/* ============================================================
   ECOS ONIKIX · estilos del cartucho
   El laberinto vive en el canvas (ahí está el acabado); este archivo se
   ocupa del marco premium alrededor: cabecera, marcadores, tarjeta de
   sala, voz de la chica y pantallas.

   Regla estructural de la pantalla de partida: el tablero es el ÚNICO
   elemento elástico. Cabecera y tira de la chica tienen altura propia y no
   se comprimen, así el canvas siempre recibe una medida real y las 15
   filas caben enteras sin scroll en cualquier iPhone.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/Fraunces-Italic-Variable-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/BricolageGrotesque-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-Variable-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --canvas: #F8F5EF;
  --surface: #EFE9DC;
  --card: #FFFFFF;
  --ink: #1F1B16;
  --soft-ink: #5A5147;
  --mute: #6B6258;
  --mute-decor: #8A8175;
  --line: #E5DFD3;
  --gold: #C9962E;
  --gold-light: #F0D48A;

  /* Los pone boot.js según la chica elegida. Camila es la anfitriona. */
  --pj: #4A1A7A;
  --pj-2: #7042A6;
  --pj-soft: #EAE3FE;
  --pj-pale: #FAF7FF;

  --font-display: "Fraunces", Georgia, serif;
  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --radius: 16px;
  --shadow-soft: 0 10px 30px rgba(31, 27, 22, .08);
  --gold-edge: rgba(201, 150, 46, .28);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
}
body {
  margin: 0;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }

.app { min-height: 100svh; display: flex; flex-direction: column; }
.screen { display: none; flex: 1; flex-direction: column; }
.screen.is-active { display: flex; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   PORTADA
   ============================================================ */

.home-screen { width: min(100%, 480px); margin-inline: auto; }

.brand { display: flex; align-items: center; gap: 10px; padding: max(18px, env(safe-area-inset-top)) 22px 0; }
.brand-mark {
  width: 26px; height: 26px; background: var(--ink);
  -webkit-mask: url("../assets/img/onikix-mark.svg") no-repeat center / contain;
  mask: url("../assets/img/onikix-mark.svg") no-repeat center / contain;
}
.brand-word { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .22em; }
.brand-word em { font-style: normal; font-weight: 400; color: var(--mute); }
.brand-actions { margin-left: auto; display: flex; gap: 8px; }

.sound-btn, .help-btn {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink); flex: none;
  transition: transform .15s ease;
  box-shadow: var(--shadow-soft);
}
.sound-btn:active, .help-btn:active { transform: scale(.94); }
.sound-btn .icon-off { display: none; }
.sound-btn.is-muted .icon-on { display: none; }
.sound-btn.is-muted .icon-off { display: block; }
.sound-btn.is-muted { color: var(--mute); }

/* Esta portada es más densa que la plantilla: lleva banner, instrucciones
   Y selector de chica. Se ajustan las tres palancas de aire que el propio
   sistema expone —en vez de pelearse con él— para que el CTA no se coma el
   pie en 390×844 ni en 375×667. */
.cover-main.cover-main--artwork {
  --cover-banner-height: auto;
  --cover-banner-gap: clamp(10px, 1.8svh, 16px);
  --cover-action-gap: clamp(10px, 1.8svh, 18px);
  --cover-bottom-gap: clamp(6px, 1svh, 10px);
}
.cover-banner.cover-banner--artwork {
  height: auto; min-height: 0; flex: 0 0 auto;
  aspect-ratio: 1774 / 887;
}
.cover-banner.cover-banner--artwork .cover-banner__art { object-fit: contain; }

/* La portada lleva banner, instrucciones Y selector de chica: más
   contenido del que trae la plantilla. `.cover-main` es flex y comprimiría
   los bloques por debajo de su contenido, que entonces se sale de su caja.
   Con `flex: 0 0 auto` cada bloque conserva su alto real y el aire sobrante
   se reparte donde toca. */
.cover-main > .cover-choice__label,
.cover-main > .cast-options,
.cover-main > .home-cast-hint,
.cover-main > .seg,
.cover-main > .home-level-note,
.cover-main > .home-help-link { flex: 0 0 auto; }

.home-help-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px auto 0; padding: 8px 16px; min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--cover-accent-border, var(--line));
  background: rgba(255, 255, 255, .72);
  color: var(--cover-accent, var(--pj));
  font-family: var(--font-head); font-weight: 650; font-size: 13.5px;
}
.home-help-link:active { transform: scale(.97); }

.home-cast-hint {
  margin: 8px 0 0; min-height: 20px; text-align: center;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 14.5px; color: var(--cover-accent, var(--pj));
}
.home-primary { margin-top: auto; }

/* ---------- Selector de dificultad ----------
   Mismo control segmentado que usa Conecta, con las cuatro señales de
   selección del sistema: fondo, doble borde, marca ✓ y más peso de texto.
   Nunca negro: el acento es siempre el color de la chica elegida. */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}
.seg-btn {
  position: relative;
  min-height: 46px;
  padding: 10px 6px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--card);
  font-family: var(--font-head);
  font-weight: 650;
  font-size: 13px;
  color: var(--soft-ink);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.seg-btn[aria-pressed="true"] {
  border-color: var(--cover-accent);
  background: var(--cover-accent-soft);
  color: var(--cover-accent);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--cover-accent), 0 7px 18px var(--cover-accent-shadow);
}
.seg-btn[aria-pressed="true"]::before {
  content: "✓";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 900;
  color: var(--cover-accent);
}
.seg-btn:active { transform: scale(.96); }

.home-level-note {
  margin: 6px 0 0;
  min-height: 16px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ============================================================
   PARTIDA
   ============================================================ */

.game-screen { overflow: hidden; }

/* Solo durante la jugabilidad activa: el navegador no interpreta un gesto
   del juego como zoom, selección, arrastre nativo o pulsado largo. La
   clase se retira al pausar, abrir ayuda, terminar o volver a la portada. */
body.is-gameplay-active .game-screen {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body.is-gameplay-active .game-screen img { -webkit-user-drag: none; }

.hud {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 12px 6px;
}
.hud-back {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; flex: none;
  transition: transform .15s ease;
}
.hud-back:active { transform: scale(.92); }

.hud-stats { display: flex; gap: 5px; flex: 1; min-width: 0; margin-inline: 2px; }
.stat {
  flex: 1; min-width: 0; display: grid; justify-items: center; gap: 1px;
  padding: 5px 3px 4px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  box-shadow: 0 5px 14px rgba(31, 27, 22, .045);
}
.stat b {
  font-family: var(--font-head); font-weight: 800; font-size: 15px;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.stat small {
  font-family: var(--font-head); font-weight: 700; font-size: 8.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--mute);
}
.stat--destellos { flex: 1.15; }

/* Los Destellos son SU símbolo en oro, dibujados con el mismo trazador
   que el tablero. Al apagarse pasan a la línea cálida, nunca a rojo. */
#destellos { display: flex; gap: 2px; align-items: center; height: 17px; }
.destello { width: 17px; height: 17px; transition: opacity .3s var(--ease-out-quint); }
.destello.is-out { opacity: .55; }

.play-area {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  padding: 2px 10px 4px;
}
#board-wrap {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center;
}
.board-frame {
  position: relative; padding: 5px; border-radius: 20px;
  background: linear-gradient(170deg, #FFFDFA, var(--surface));
  border: 1px solid var(--gold-edge);
  box-shadow: 0 18px 42px rgba(31, 27, 22, .10), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.board-canvas {
  display: block; border-radius: 15px;
  background: var(--pj-pale);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}

/* Tarjeta de sala: aparece sobre el tablero al entrar y al limpiarla. */
.sala-card {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.94);
  width: min(300px, 86%);
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--gold-edge);
  box-shadow: 0 22px 54px rgba(31, 27, 22, .22);
  text-align: center;
  opacity: 0;
  transition: opacity .26s var(--ease-out-quint), transform .26s var(--ease-out-quint);
  pointer-events: none;
  z-index: 5;
}
.sala-card.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sala-card[hidden] { display: none; }
.sala-card__eyebrow {
  margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}
.sala-card__name {
  margin: 6px 0 0; font-family: var(--font-display); font-style: italic;
  font-weight: 620; font-size: 27px; line-height: 1.05; color: var(--pj);
}
.sala-card__note {
  margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--soft-ink);
}
.sala-card__points {
  margin: 10px 0 0; font-family: var(--font-head); font-weight: 800;
  font-size: 19px; color: #9C6F1C;
}
.sala-card__clean {
  display: inline-block; margin-left: 6px; padding: 3px 9px;
  border-radius: 999px; background: var(--pj-soft); color: var(--pj);
  font-size: 11px; letter-spacing: .04em;
}
.sala-card__fact {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.4; color: var(--mute);
}

/* Tira de presencia: su cara y su voz, sin invadir el tablero. */
.girl-strip {
  display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
  min-height: 46px; padding: 4px 14px calc(6px + env(safe-area-inset-bottom, 0px));
}
.girl-portrait {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--pj-soft);
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--pj);
}
.girl-bubble {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 15px; line-height: 1.2; color: var(--pj);
  opacity: 0; transform: translateY(4px);
  transition: opacity .28s ease, transform .28s ease;
}
.girl-bubble.is-visible { opacity: 1; transform: none; }
.girl-hint {
  margin: 0; flex: none; max-width: 42%;
  font-family: var(--font-head); font-weight: 700; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mute);
  text-align: right;
}
.girl-bubble.is-visible ~ .girl-hint { opacity: .28; }

/* ============================================================
   Botones, modales y aviso
   ============================================================ */

.btn {
  display: block; width: 100%; border-radius: 999px; padding: 14px 18px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  transition: transform .15s ease, opacity .15s ease; border: 0;
}
.btn:active { transform: scale(.97); }
.btn + .btn { margin-top: 9px; }
.btn-primary { background: var(--pj); color: var(--card); }
.btn-ghost { background: var(--card); border: 1.5px solid var(--ink); color: var(--ink); }
.btn-text { background: transparent; color: var(--soft-ink); font-weight: 600; padding: 10px; }

.modal {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: 20px;
  background: rgba(31, 27, 22, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: modalFade .25s ease both;
}
.modal[hidden] { display: none; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative; width: min(360px, 100%);
  max-height: min(88svh, 660px); overflow-y: auto;
  background: var(--card); border-radius: 24px;
  padding: 24px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  box-shadow: 0 24px 60px rgba(31, 27, 22, .28);
  animation: modalCardIn .4s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.modal-title { font-family: var(--font-display); font-style: italic; font-weight: 620; font-size: 26px; margin: 0; }
/* El sistema lleva el foco al título del diálogo (correcto para lector de
   pantalla), pero un anillo sobre un encabezado no interactivo se lee como
   un error de maqueta. */
.modal-card .modal-title:focus,
.modal-card .modal-title:focus-visible,
.game-help-card .game-help-title:focus,
.game-help-card .game-help-title:focus-visible { outline: 0; box-shadow: none; }

.modal-busto {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  background: var(--pj-soft);
  box-shadow: 0 0 0 3px var(--pj-soft), 0 0 0 4.5px var(--pj);
  margin: 0 auto 10px; display: block;
}
.modal-full {
  display: block; width: 108px; height: auto; margin: -6px auto 4px;
}
.modal-full[hidden] { display: none; }
.modal-line { margin-top: 6px; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--soft-ink); }

.result-crown {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-size: 26px; color: var(--gold);
  animation: crownIn .6s cubic-bezier(.2, .9, .3, 1.1) both;
}
.result-crown[hidden] { display: none; }
@keyframes crownIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.6); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.result-stats { display: flex; justify-content: center; gap: 8px; margin: 16px 0 10px; padding: 0; }
.result-stats > div { flex: 1; background: var(--surface); border-radius: 14px; padding: 10px 4px; }
.result-stats dt {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mute); font-family: var(--font-head); font-weight: 600; margin: 0;
}
.result-stats dd {
  margin: 3px 0 0; font-family: var(--font-head); font-weight: 700;
  font-size: 17px; font-variant-numeric: tabular-nums;
}
.result-best {
  margin: 0 0 16px; min-height: 18px;
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px; color: #9C6F1C;
}

.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: var(--canvas);
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  border-radius: 999px; padding: 11px 20px;
  box-shadow: 0 10px 26px rgba(31, 27, 22, .3);
  max-width: 86vw; text-align: center;
}
.toast[hidden] { display: none; }

/* ============================================================
   Ajustes por tamaño
   ============================================================ */

/* iPhone SE y similares: se recorta el aire, nunca la información. */
@media (max-height: 700px) {
  .hud { padding-top: max(6px, env(safe-area-inset-top)); }
  .stat { padding: 4px 2px 3px; }
  .stat b { font-size: 14px; }
  .girl-strip { min-height: 40px; }
  .girl-bubble { font-size: 14px; }
  .sala-card { padding: 14px 16px 16px; }
  .sala-card__name { font-size: 23px; }

  /* iPhone SE: la portada cede aire, nunca información — ni controles.
     Ayuda y selector de dificultad se quedan en 44; el sitio sale del
     margen y del alto de las tarjetas de cast, más abajo. */
  .home-help-link { margin-top: 4px; min-height: 44px; padding: 6px 14px; font-size: 12.5px; }
  .home-cast-hint { margin-top: 4px; min-height: 16px; font-size: 13.5px; }
  .seg .seg-btn { min-height: 44px; font-size: 12.5px; }
  .home-level-note { margin-top: 4px; min-height: 14px; font-size: 10px; }
  /* En 390×664 —la altura real de un iPhone con las barras de Safari
     desplegadas— la portada se pasaba 3 px y el CTA rozaba el pie. Se
     aprietan los dos saltos verticales que quedan; nada de información se
     va. */
  .cover-main.cover-main--artwork {
    --cover-action-gap: clamp(6px, 1.2svh, 14px);
    --cover-bottom-gap: 2px;
  }
  /* Doble clase: el sistema se carga después y ganaría a igual peso. */
  .cast-options .cast-option { min-height: 62px; }
  .cast-options .cast-option img { width: 38px; height: 38px; }
  .home-primary .home-cta { min-height: 54px; }
}

/* Pantallas muy bajas (iPhone SE de primera generación, 320×568). Por
   debajo del mínimo que exige el método, pero los cinco iconos, los tres
   niveles, el CTA y el pie se quedan enteros. */
@media (max-height: 620px) {
  /* Ni aquí ceden: 320×568 está por debajo del mínimo que exige el método,
     pero un control de 36px sigue siendo un control mal hecho. */
  .home-help-link { margin-top: 3px; min-height: 44px; }
  .cast-options .cast-option { min-height: 56px; }
  .cast-options .cast-option img { width: 34px; height: 34px; }
  .seg .seg-btn { min-height: 44px; }
}

@media (max-width: 360px) {
  .play-area { padding-inline: 6px; }
  .girl-strip { padding-inline: 10px; }
  .girl-hint { display: none; }
  .seg .seg-btn { font-size: 12px; padding-inline: 2px; }
}

/* Pantallas grandes: el tablero no crece sin fin ni se despega del pulgar. */
@media (min-width: 620px) {
  .play-area, .girl-strip, .hud { max-width: 520px; width: 100%; margin-inline: auto; }
}

/* ============================================================
   Toque, foco y movimiento reducido
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .sound-btn:hover, .help-btn:hover, .hud-back:hover { border-color: var(--pj); }
  .home-help-link:hover { background: var(--card); }
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal-card, .result-crown { animation: none; }
  .girl-bubble, .sala-card, .destello { transition-duration: 1ms; }
}
[data-reduced-motion="true"] .modal,
[data-reduced-motion="true"] .modal-card,
[data-reduced-motion="true"] .result-crown { animation: none; }