/* ═══════════════════════════════════════════════════════════════ app-state.css — AISLAMIENTO DE UI POR ESTADO GLOBAL ─────────────────────────────────────────────────────────────── Fuente única de verdad: la clase en que pone transitionTo() Estados: body.ui-home → páginas públicas (home, onboarding, faq...) body.ui-dashboard → dashboard del trader body.ui-game → mapa del juego (nivel1) body.ui-shop → tienda body.ui-profile → perfil (si se convierte en vista propia) Regla: cada elemento es invisible por defecto y solo se activa con el selector de su estado. Nunca usar :not(). ═══════════════════════════════════════════════════════════════ */ /* ── Elementos de juego: ocultos siempre por defecto ─────────── */ #mobile-joystick, #mobile-interact-btn, #game-hud { display: none !important; } /* Solo visibles en ui-game en dispositivos táctiles reales. pointer:coarse = input impreciso (dedo), inmune al zoom del browser y a que Windows reporte maxTouchPoints>0 en PCs de escritorio. */ @media (pointer: coarse) { body.ui-game #mobile-joystick { display: block !important; } body.ui-game #mobile-interact-btn { display: flex !important; } } body.ui-game #game-hud { display: block !important; } /* ── Sidebar y navbar: ocultos dentro del juego ──────────────── */ body.ui-game #sidebar { display: none !important; } body.ui-game nav { display: none !important; } /* ── Navbar móvil (barra superior con hamburger) ─────────────── */ /* Se oculta en juego igual que el sidebar */ body.ui-game .flex.flex-col.md\:flex-row > .md\:hidden { display: none !important; } /* ── Lesson overlay: oculta controles mientras dura la lección ── */ /* Al igual que market-open, no cambia el AppState. */ body.lesson-open #mobile-joystick, body.lesson-open #mobile-interact-btn { display: none !important; } /* ── Market overlay: oculta controles del juego mientras está abierto ── */ /* El market es un overlay SOBRE el juego, no cambia el AppState. */ /* Se combina con ui-game: los controles ya están visibles, market-open */ /* los suprime temporalmente sin tocar el estado global. */ body.market-open #mobile-joystick, body.market-open #mobile-interact-btn { display: none !important; } /* ── Store: si en el futuro tiene panel flotante exclusivo ───── */ /* #store-panel { display: none; } */ /* body.ui-shop #store-panel { display: block; } */