/* La Cabina de Mando — base: tokens, marco de teléfono (escritorio), ventana (3D) arriba y tablero abajo.
   Todo vive dentro de .app (100dvh, sin scroll del documento). Los colores del tema llegan como variables CSS
   (themes.js → applyThemeCss: --theme, --theme-2, --theme-accent, --theme-gold, --theme-hi, --theme-lo, --theme-ink). */
:root {
  --ink: #1E1B4B; --ink-2: #2A2566; --cream: #FFF7EC; --muted: rgba(255, 247, 236, .78);
  --ok: #7CF2A6; --ok-glow: rgba(124, 242, 166, .75);
  --theme: #3D6BE0; --theme-2: #45C4D9; --theme-accent: #FF9A4D; --theme-gold: #F2C94C; --theme-hi: #92ADEE; --theme-lo: #2F54B3; --theme-ink: #253270; --on-theme: #FFFFFF;
  --win-h: 55%; /* alto de la ventana; el tablero ocupa el resto */
  --radius: 22px;
  --font-head: "Fredoka", "Figtree", system-ui, sans-serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-soft: cubic-bezier(.3, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (max-height: 760px) { :root { --win-h: 51%; } }
@media (max-height: 700px) { :root { --win-h: 48%; } }
/* (todo bajo .cm, la clase de <html> de esta invitación: nada global que afecte a otras páginas) */
.cm *, .cm *::before, .cm *::after { box-sizing: border-box; }
.cm, .cm body { margin: 0; height: 100%; overflow: hidden; background: #0E0B26; color: var(--cream); font-family: var(--font-text); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* (:where = especificidad cero: los botones con clase propia —.mbtn, .step…— ganan siempre con su color) */
:where(.cm) button { font: inherit; color: inherit; }
/* sin barras de desplazamiento nativas visibles (las listas largas del monitor se deslizan igual) */
.cm, .cm * { scrollbar-width: none; }
.cm ::-webkit-scrollbar { display: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { position: fixed; inset: auto 16px 16px; padding: 16px; border-radius: 16px; background: var(--ink); font-size: 16px; }

/* ---------- Fondo de escritorio: la cabina y el espacio alrededor del teléfono ---------- */
.room { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(60% 40% at 50% 28%, rgba(111, 214, 232, .16), transparent 70%),
    radial-gradient(45% 35% at 22% 70%, rgba(255, 143, 163, .12), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #2B2266 0%, #171235 55%, #0B0922 100%); }
.room::before { /* estrellas (dos capas de puntitos) */
  content: ""; position: absolute; inset: -50%;
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, #FFF7EC, transparent), radial-gradient(1px 1px at 90px 80px, #DCD2FF, transparent), radial-gradient(1.5px 1.5px at 160px 40px, #FFD27A, transparent), radial-gradient(1px 1px at 60px 150px, #BFEFFF, transparent);
  background-size: 200px 200px; opacity: .5; animation: room-drift 120s linear infinite; }
.room::after { /* borde de la cabina: marco oscuro con remaches alrededor */
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 18px #1C1745, inset 0 0 0 22px rgba(255, 247, 236, .06), inset 0 0 120px 40px rgba(8, 6, 26, .7); }
@keyframes room-drift { to { transform: translate(200px, 120px); } }
.rm .room::before { animation: none; }

/* ---------- La app: pantalla completa en el teléfono; marco de teléfono centrado en escritorio ---------- */
.app { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #171235; isolation: isolate; }
@media (min-width: 560px) and (min-height: 560px) {
  .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%);
    border-radius: 38px; box-shadow: 0 0 0 10px #221C52, 0 0 0 12px rgba(255, 247, 236, .12), 0 30px 80px rgba(0, 0, 0, .55), 0 0 90px rgba(111, 214, 232, .18); }
}

/* ---------- Ventana (3D) ---------- */
/* el lienzo baja un poco por detrás del borde del tablero: Gloobi "se sienta" en ese borde */
.window { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--win-h) + 26px); overflow: hidden; background: #171235; }
.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
/* cabina apagada: oscuridad cálida (se retira en cadena al encender) */
.dark { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 50% 40%, rgba(40, 18, 30, .55), rgba(12, 6, 20, .9)); opacity: 0; transition: opacity 1.1s ease; }
.is-off .dark { opacity: 1; }
/* fundido del viaje (movimiento reducido: sin hiperespacio) */
.warp-fade { position: absolute; inset: 0; pointer-events: none; background: #1A1545; opacity: 0; transition: opacity .35s ease; }
.warp-fade.is-on { opacity: 1; }
.fallback-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Capa de interfaz (hojas, avisos) ---------- */
.ui { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.ui > * { pointer-events: auto; }