/* ═══════════════════════════════════════════════════════════════
   IGNITE · styles.css — ESTILOS (Liquid Glass, Safari/WebKit)
   Organizado por secciones (busca los banners ═══ para navegar):
   TOKENS · ATMÓSFERA · BASE · COMPONENTES · PANTALLAS · RESPONSIVE.
   Optimizado para iPhone: blur reducido, contención de pintado,
   animaciones que se pausan en 2º plano e inactividad.
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   TOKENS — Liquid Glass (BOLD locked)
═══════════════════════════════════════════════════════════════ */
:root {
  --bg-0: #05020a;
  --rose:   #e05c7d; --rose-d: #b02850;
  --plum:   #a878d8; --plum-d: #8858b8;
  --gold:   #d8a868; --gold-d: #b88848;
  --steel:  #6ea8c8;

  /* canales RGB — fuente única para tematización invierno/verano */
  --rose-rgb: 224,92,125;
  --plum-rgb: 168,120,216;
  --gold-rgb: 216,168,104;
  --gold2-rgb: 240,200,120;

  --santi:       #e05c7d;
  --santi-soft:  rgba(224,92,125,.12);
  --santi-glow:  rgba(224,92,125,.55);
  --carol:       #a878d8;
  --carol-soft:  rgba(168,120,216,.12);
  --carol-glow:  rgba(168,120,216,.55);

  --text:   #f7f0fa;
  --text-2: rgba(247,240,250,.86);
  --text-3: rgba(247,240,250,.64);
  --text-4: rgba(247,240,250,.32);

  --l1: #6ea8c8; --l2: #a878d8; --l3: #e05c7d; --l4: #e07c58; --l5: #d8a868;

  /* GLASS — blur reducido para iPhone/Safari (menor GPU/batería) */
  --g-blur: 10px;
  --g-sat: 1.35;
  --g-bg: rgba(255,255,255,0.058);
  --g-bg-hi: rgba(255,255,255,0.088);
  --g-border: rgba(255,255,255,0.14);
  --g-border-hi: rgba(255,255,255,0.20);
  --g-inner:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.04);
  --g-shadow: 0 12px 48px rgba(0,0,0,.50), 0 4px 16px rgba(0,0,0,.30), 0 0 60px rgba(224,92,125,.08);
  --g-sheen: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 30%, transparent 55%, rgba(255,255,255,.10) 100%);

  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --space-xs: 8px; --space-sm: 14px; --space-md: 20px; --space-lg: 32px; --space-xl: 48px;

  --fs-hero:    clamp(56px, 11vmin, 92px);
  --fs-display: clamp(42px, 7vmin, 64px);
  --fs-title:   clamp(22px, 3.5vmin, 32px);
  --fs-body:    clamp(14px, 1.8vmin, 16px);

  --app-max: 480px;
  --app-px: 22px;

  --card-shadow: var(--g-shadow);
}

@media (min-width: 768px) { :root { --app-max: 540px; --app-px: 32px; } }
@media (min-width: 1200px) { :root { --app-max: 620px; --app-px: 40px; } }

/* ═══════════════════════════════════════════════════════════════
   iPAD — misma UI que iPhone, escalada y rellenando la pantalla
   horizontal. TODO va bajo html[data-device="ipad"] para no tocar
   jamás el iPhone (que se queda exactamente igual). El atributo lo
   fija detectDevice() en JS. Ajustar con las variables --ipad-*.
═══════════════════════════════════════════════════════════════ */
html[data-device="ipad"] {
  /* Escala de espacios y radios: todo "respira" más en pantalla grande */
  --app-px: 46px;
  --space-xs: 10px; --space-sm: 18px; --space-md: 26px;
  --space-lg: 42px; --space-xl: 64px;
  --r-md: 22px; --r-lg: 30px; --r-xl: 40px;
  /* Tipografía algo mayor (el body apenas crecía con vmin en iPad) */
  --fs-title: clamp(27px, 3.5vmin, 40px);
  --fs-body:  clamp(17px, 2.1vmin, 20px);
  /* Ancho de "etapa" — UN solo mando. Sube/baja el tope (880px) para rellenar
     más o menos el ancho. Es responsivo (76vw) para rellenar parecido en
     cualquier iPad (10", mini, Air, Pro 11"/12.9"). Todo el juego se alinea. */
  --ipad-stage: min(76vw, 880px);
}
/* La app ocupa todo el ancho; cada etapa controla su propio máximo */
html[data-device="ipad"] .app { max-width: 100%; }

/* Todo el juego (chrome + tarjeta + barra de acción) comparte ancho:
   coherente y "como iPhone pero más grande", sin columna flotando estrecha. */
html[data-device="ipad"] .game-top,
html[data-device="ipad"] .g-panel,
html[data-device="ipad"] .mission-area,
html[data-device="ipad"] .action-bar { max-width: var(--ipad-stage); }
html[data-device="ipad"] .setup-wrap  { max-width: 720px; }
html[data-device="ipad"] .end         { max-width: 700px; }
html[data-device="ipad"] .home-actions{ max-width: 520px; }

/* La misión ocupa toda la altura disponible. */
html[data-device="ipad"] #panel-mission.on {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
/* La tarjeta se ancla en un punto FIJO un poco sobre el centro (no centrada),
   reservando hueco debajo para el temporizador: así al aparecer este la tarjeta
   NO se desplaza hacia arriba. El padding lateral se reduce (antes había doble
   padding panel+área = 92px/lado) para que la tarjeta aproveche más el ancho. */
html[data-device="ipad"] .mission-area {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: clamp(36px, 6vh, 90px);
  padding-left: 10px; padding-right: 10px;
}

/* Cabecera como barra de herramientas: casa + nivel a la izquierda, turno a la
   derecha. El pill de turno deja de estirarse vacío (en iPhone era flex:1). */
html[data-device="ipad"] .g-turn {
  flex: 0 1 auto; margin-left: auto; min-width: 220px; max-width: 320px;
}

/* Micro-tipografía fija que no escalaba sola */
html[data-device="ipad"] .g-tab    { font-size: 11px; padding: 13px 12px; letter-spacing: 1.6px; }
html[data-device="ipad"] .g-level  { font-size: 10.5px; padding: 8px 16px; }
html[data-device="ipad"] .g-turn-name { font-size: clamp(20px, 2.4vmin, 26px); }

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  width: 100%;
  height: 100vh;
  height: 100lvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: #0a0418;
}
body {
  font-family: 'Outfit', -apple-system, sans-serif;
  color: var(--text);
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}