/* ============================================================
   TRAZOS — Estilos (adaptado de "escribir")
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Respaldo por si game.json no carga. Lo normal es que juego-comun.js
     los reescriba con el color de la tarjeta del juego en el selector.
     Nombres neutros porque aquí puede acabar cualquier tono. */
  --acento:       #ea580c;
  --acento-claro: #f0d0e8;
  --acento-suave: #ffedd5;
  --acento-fuerte: #c2176e;
  --acento-medio:   #fb923c;
  --bg:            #fff7ed;
  --card:          #ffffff;
  --text:          #3a1a0a;
  --correct-bg:    #e8f5e9;
  --correct-bd:    #66bb6a;
  --wrong-bg:      #ffebee;
  --wrong-bd:      #ef5350;
  --shadow:        0 6px 24px rgba(234,88,12,0.18);
  --radius:        20px;
}

body {
  font-family: 'Nunito', 'Hiragino Sans', 'Meiryo', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;          /* altura visible real (sin contar barra del navegador) */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(12px, 1.5vh) 12px 12px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  width: 100%;
  max-width: 920px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── GAME SCREEN ─────────────────────────────────────────── */
#game-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* El emoji absorbe el espacio libre (card flex:1) y empuja las cajas abajo */
#game-screen > main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}


header { text-align: center; }

h1 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--acento);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

#level-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

#phase-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #999;
  font-weight: 700;
}

#level-row { width: 100%; max-width: 320px; }

#level-text {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: #777;
  margin-bottom: 3px;
}

#level-bar-bg {
  background: var(--acento-suave);
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
}

#level-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--acento-medio), var(--acento));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(.34,1.56,.64,1);
}

#accuracy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

#accuracy-bar-bg {
  flex: 1;
  background: #f0f0f0;
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}

#accuracy-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: #ccc;
  transition: width 0.5s ease, background 0.5s ease;
}

#accuracy-pct {
  font-size: 0.7rem;
  color: #bbb;
  font-weight: 700;
  min-width: 2.8em;
  text-align: right;
}

/* Solo el emoji, centrado y sin fondo. Crece para absorber el espacio libre. */
#element-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* LO QUE HAY QUE ESCRIBIR, en mayúscula. En `palabras` esto es un emoji y su
   tamaño lo calcula game.js a mano (`sizeEmoji`), porque un dibujo no tiene
   largo. Aquí es TEXTO, así que el tamaño lo pone la cáscara con su tabla de
   `data-largo` y esta regla es sólo el primer fotograma.

   ⚠ NO ESCRIBIR AQUÍ UN `font-size` DEFINITIVO: no ajustaría nada, APAGARÍA
   esa tabla — es lo que le pasó a `minusculas/` y `silabas/`. */
#element-text {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--acento);
  letter-spacing: .04em;
  line-height: 1.1;
}

/* Controles (voz + pista) flotando en la esquina superior derecha de la app */
#app-controls {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 8px;
  z-index: 50;
}

.ctrl {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--acento);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(234,88,12,0.18);
  position: relative;
  -webkit-appearance: none;
  touch-action: manipulation;
  transition: transform 0.12s, background 0.15s;
}
.ctrl:active { transform: scale(0.92); }
@media (hover: hover) { .ctrl:hover { background: var(--acento-suave); } }

/* Voz activa (no muted): resaltar en verde */
#audio-btn:not(.muted) { background: #d7f5dd; color: #16a34a; }

/* ── CAJAS DE DIBUJO (una por letra) ─────────────────────── */
#canvas-area {
  display: block;
}

/* Cada letra es una caja <trace-glyph>; se disponen en fila y envuelven si la
   palabra es larga. El recuadro, los flashes y el ↻ de borrar viven dentro de
   su Shadow DOM. El ▶ de pista es lógica del juego y vive en la tarjeta. */
#word-boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;          /* ancho definido: imprescindible para que el flex reparta */
  max-width: 480px;
  margin: 0 auto;
}

/* Cada caja: pequeña por defecto, grande al activarse. Sin scroll horizontal:
   las inactivas tienen base fija y se encogen; la activa rellena el resto. */
/* El ancho exacto de cada caja lo fija game.js en px (activa ≈ 50%, resto reparte);
   aspect-ratio la hace cuadrada a partir de ese ancho. Sin grow/shrink → sin overflow. */
.box-slot {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  transition: width 0.35s cubic-bezier(.34,1.56,.64,1);
}
.box-slot trace-glyph {
  display: block;
  width: 100%;
  height: 100%;
}

/* Badge con el nº de pistas en la esquina del botón ▶ */
#replay-btn::after {
  content: attr(data-uses);
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(239,68,68,0.45);
  pointer-events: none;
}

#replay-btn.depleted { opacity: 0.5; cursor: not-allowed; }
#replay-btn.depleted::after { background: #999; box-shadow: none; }

#replay-btn.bonus { animation: replay-bonus-pop 0.6s cubic-bezier(0.34,1.56,0.64,1); }
#replay-btn.bonus::after {
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,0.25);
}

@keyframes replay-bonus-pop {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.3) rotate(-12deg); }
  65%      { transform: scale(0.95) rotate(6deg); }
}

.replay-bonus-toast {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  user-select: none;
  font-size: 1.3rem;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: replay-bonus-rise 1.5s ease-out forwards;
}

@keyframes replay-bonus-rise {
  0%   { transform: translate(-50%, -50%) scale(0.3);   opacity: 0; }
  18%  { transform: translate(-50%, -90%) scale(1.3);   opacity: 1; }
  100% { transform: translate(-50%, -210%) scale(1);    opacity: 0; }
}

/* Feedback */
#feedback {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  min-height: 1.4em;
}

.fb-correct { color: #2e7d32; }
.fb-wrong   { color: #c62828; }
.fb-score   { color: var(--acento); }
.fb-perfect {
  color: var(--acento);
  font-size: 1.2em;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(251,191,36,0.4);
  animation: fb-pop 0.5s ease-out;
}

@keyframes fb-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.heart-particle {
  position: fixed;
  z-index: 99998;
  pointer-events: none;
  user-select: none;
  transform-origin: center;
  will-change: transform, opacity;
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
  filter: drop-shadow(0 0 4px rgba(251,191,36,0.5));
}

/* ── OVERLAYS ─────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 247, 237, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.overlay.hidden { display: none; }

#video-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 680px;
  text-align: center;
}

#video-box h2 {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--acento);
}

#youtube-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}

#youtube-player iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
}


/* Pantalla de victoria */
#skip-btn {
  background: var(--acento);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 14px 38px;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  box-shadow: 0 4px 14px rgba(234,88,12,0.32);
}

@media (hover: hover) {
#skip-btn:hover {
    background: var(--acento);
    transform: scale(1.04);
  }
}

#skip-btn:active { transform: scale(0.97); }

/* ── RESPONSIVE ───────────────────────────────────────────── */

/* iPad y desktop */
@media (min-width: 768px) {
  body              { padding: max(20px, 2vh) 24px 20px; }
  h1                { font-size: 2rem; }
  #game-screen      { gap: 16px; }
  .ctrl             { width: 52px; height: 52px; font-size: 1.6rem; }
  #feedback         { font-size: 1.2rem; }
  #level-row, #accuracy-row { max-width: 400px; }
  #word-boxes       { gap: 14px; max-width: 820px; }
  #element-card     { max-width: 820px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* Móvil pequeño */
@media (max-width: 420px) {
  h1               { font-size: 1.25rem; }
  #video-box h2    { font-size: 1.3rem; }
}

/* ============================================================
   LA CÁSCARA COMÚN, EN UN JUEGO DE ESCRIBIR

   ../juego-layout.css pone el paisaje de la categoría de fondo, deja el
   título flotando encima sin caja y parte la pantalla en bandas, sin
   scroll. Aquí encaja casi tal cual, porque el reparto es el mismo que
   en un juego de test:

     ┌──────────────────┐
     │     Palabras     │  cabecera · de la cáscara
     │                  │
     │        🐻        │  el dibujo · se come todo el hueco que sobra
     │                  │
     │  [O][S][O]       │  las cajas · pegadas al suelo, una por letra
     └──────────────────┘

   Lo que en un test son cuatro pastillas, aquí es la fila de cajas de
   pintar: misma banda y mismo sitio. Por eso este bloque es corto —lo
   único que hay que decirle a la cáscara es que la fila de cajas es la
   banda de abajo; el resto (el dibujo comiéndose el hueco, el vaivén,
   el resplandor de debajo) ya lo hace ella.

   Esta hoja carga ANTES que la cáscara, así que a igualdad de peso ella
   gana. Lo que hay que quitarle lleva un id de más; lo que no toca
   —#element-text, #word-boxes, los mandos— se escribe pelado.

   Va al final del fichero a propósito: por delante hay dos bloques
   @media con las medidas de antes. Las media queries no suman
   especificidad, así que lo de aquí les gana por orden.
   ============================================================ */

/* ── BANDA MEDIA · la palabra ────────────────────────────────
   AQUÍ NO HAY REGLA DE TAMAÑO, y es a propósito. En `palabras` lo
   calcula game.js midiendo la caja, porque un emoji no tiene largo que
   contar. Lo de aquí es texto, así que quien lo mide es la cáscara:
   juego-comun.js cuenta los caracteres y juego-layout.css tiene una
   fila por cada largo, con su respaldo bajo @supports para el Safari 15
   del iPad. Un `font-size` escrito aquí apagaría esa tabla.

   Con la cáscara vienen también el halo (`text-shadow: var(--halo)`,
   que en esta categoría es el resplandor claro que va bajo letra
   oscura) y la entrada, que SÓLO funde: el `pop` que se encogía y
   giraba, encima del vaivén de la banda, no se leía como «ha entrado
   otra» sino como que algo había fallado.

   `palabras` sí tiene aquí dos reglas —sombra de figura para el emoji y
   su propio `.pop`—: allí lo que entra es un dibujo, y sobre un dibujo
   el halo blanco se ve como un borrón de color alrededor de la
   silueta. */

/* ── BANDA BAJA · la fila de cajas ───────────────────────────
   `flex:0 0 auto` es lo que la deja pegada al suelo con su alto propio
   (el que le sale de los anchos que reparte game.js), y el `order` la
   pone debajo del dibujo sin tocar el HTML: es el mismo sitio que
   ocupan las pastillas en un juego de test.

   El tope de ancho se quita: quien manda ahora es #app —640px— y la
   banda ya viene con el aire de la cáscara a los lados. */
#canvas-area {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
}

#word-boxes {
  max-width: none;
  gap: clamp(6px, 2vw, 14px);
}

/* El recuadro de cada letra se pinta dentro del Shadow DOM de
   <trace-glyph>, así que desde fuera sólo se le puede hablar por
   variables —las hereda igual que cualquier hijo—. Con éstas la caja
   deja de ser la tarjeta blanca de antes y pasa a ser una pieza más de
   la cáscara: el mismo canto teñido con el color del juego y la misma
   sombra que las pastillas.

   `--primary-mid` es como se llama el canto ahí dentro; sin esto se
   quedaba con su respaldo naranja, que no tiene nada que ver con el
   color de la tarjeta del juego en el selector. Se le da el tono MEDIO
   y no el `--canto` claro de las pastillas a propósito: una caja de
   pintar es grande y clara, y con un filo pastel se deshacía sobre el
   paisaje; lo que la hace legible es un borde con color, que además es
   el que tenía antes. */
#word-boxes {
  --card: rgba(255,253,247,.97);
  --primary-mid: var(--acento-medio, #fb923c);
  --radius: 18px;
  --shadow: 0 10px 26px rgba(60,40,10,.18);
}

/* ── LOS MANDOS · voz y pista ────────────────────────────────
   Se van a la esquina de la pantalla, enfrente del botón de volver al
   menú que pone juego-comun.js: mismo tamaño y mismo cuerpo de cristal,
   para que los tres se lean como los mandos del juego y no como parte
   del tablero. Antes colgaban de #app, que en una pantalla ancha se
   queda a 640px y los dejaba flotando en mitad del paisaje. */
#app-controls {
  position: fixed;
  top:   max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  /* Por debajo de las pantallas de premio (z-200) y por encima del
     tablero: cuando sale la copa, los mandos desaparecen con el juego.
     El de volver al menú, que es de la cáscara, sí se queda: es la
     salida. */
  z-index: 40;
  gap: 10px;
}

.ctrl {
  width: 46px;
  height: 46px;
  font-size: 1.25rem;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  box-shadow: 0 4px 14px rgba(60,40,10,.14);
}

/* Con la voz encendida sí se distingue: es el único mando con dos
   estados y a distancia el icono no se lee. */
#audio-btn:not(.muted) { background: rgba(215,245,221,.92); }

/* ── Móvil tumbado ───────────────────────────────────────────
   Tumbado el hueco del medio casi desaparece; el dibujo se apaña solo
   porque game.js lo mide contra lo que le quede, y game.js ya le pone
   tope de alto a las cajas (52vh). Aquí sólo se encogen los mandos, que
   son los únicos de tamaño fijo. Mismo umbral que usa la cáscara para
   las pastillas, para que los juegos cambien a la vez. */
@media (orientation: landscape) and (max-height: 560px) {
  .ctrl { width: 40px; height: 40px; font-size: 1.05rem; }
  #app-controls { gap: 8px; }
}