/* Estilos base del juego. Simples a proposito, sin framework CSS. */ /* Tamanos reales de los assets fuente, ver docs/image_inventory.xlsx (generado por scripts/generate_image_inventory_xlsx.py) -- todo el arte por categoria es cuadrado y uniforme salvo banners. Los tamanos de despliegue de abajo son fracciones limpias de estos, a proposito: cuando se reemplace el placeholder por arte final del mismo tamano de origen, nada de esto necesita tocarse. */ :root { --bg: #ddc48c; --panel: #f1e2b8; --panel-alt: #e6d19f; --border: #6b4423; --accent: #b8862e; --accent-bright: #c9a24b; --text: #4a2c14; --text-muted: #7a5230; --divider: #a13a2a; --error: #8b1a1a; --ink-on-accent: #2b1a0a; --icon-src-building: 256px; --icon-src-unit: 128px; --icon-src-resource: 64px; --bronze: #8a6a3a; font-family: system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); } h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; } button { cursor: pointer; background: var(--accent); color: var(--ink-on-accent); border: none; border-radius: 4px; padding: 0.4rem 0.8rem; font-weight: 600; } input, select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem; } label { display: block; margin: 0.4rem 0; } .error { color: var(--error); font-weight: 600; } /* --- Loading overlay: primer hijo de , visible por defecto desde el HTML server-rendered (sin esperar a que corra JS) para eliminar el flash de shell vacio entre login y que la ciudad/mundo terminen de cargar. --- */ .loading-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: var(--bg); color: var(--text); } .loading-overlay[hidden] { display: none; } .spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Nav / shell --- */ .topnav { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; background: var(--panel); border-bottom: 1px solid var(--border); } .brand { font-weight: 700; font-size: 1.2rem; color: var(--accent); } .tabs { display: flex; gap: 0.4rem; flex: 1; } .tab-link { background: transparent; color: var(--text); border: 1px solid var(--border); } .tab-link.active { background: var(--accent); color: var(--ink-on-accent); } .logout { background: var(--error); color: white; } .content { padding: 1rem; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* --- World picker --- */ #world-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } /* --- City view --- */ .resource-bar { display: flex; gap: 0.8rem; margin-bottom: 1rem; flex-wrap: wrap; } .resource-pill { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--panel); border: 1px solid var(--accent); border-radius: 4px; padding: 0.2rem 0.6rem; font-variant-numeric: tabular-nums; box-shadow: 0 0 4px rgba(201, 162, 75, 0.35); } /* Fuente 64x64 (--icon-src-resource), desplegado a 1/4 -- misma relacion de escala que building/unit mas abajo, por consistencia visual. */ .resource-pill img { width: calc(var(--icon-src-resource) / 4); height: calc(var(--icon-src-resource) / 4); } /* --- Vista de ciudad: una unica imagen de fondo fija (no una textura que se repite, ver app/core/city_layout.py), con edificios superpuestos en posiciones absolutas (%) sobre ella. --- */ .city-scene { position: relative; width: 100%; aspect-ratio: 3000 / 1408; background-image: url("/static/assets/img/backgrounds/city_ground.png"); background-size: cover; background-position: center; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } #city-slots { position: absolute; inset: 0; z-index: 2; pointer-events: none; } #city-slots .city-slot { pointer-events: auto; } /* Panel de construccion: anclado junto al slot clickeado (no un dialogo modal separado) -- iconos reales en vez de un