/* ============================================================
   TRAZOS-MINÚSCULAS — Estilos (los de `trazos`, más el renglón)
   ============================================================ */

*, *::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;
  display: flex;
  align-items: flex-start;
  justify-content: 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: 720px;
  position: relative;
}

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

#canvas-area { margin-top: 14px; }

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;
}

/* Element card: la palabra en mayúscula, y nada más */
#element-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 50px 10px 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* LO QUE HAY QUE ESCRIBIR, en mayúscula. Aquí había un emoji hasta el 31
   de agosto de 2026: a este juego se llega sabiendo leer las mayúsculas
   —`trazos` va delante— así que decir la palabra sale más barato que
   hacerla adivinar por un dibujo, y en las letras sueltas el emoji era
   además una adivinanza de segundo grado (la «a» se pedía con una abeja).

   Tinta oscura porque en `caligrafia` esto cae sobre la pared de yeso;
   quien lo decide es la categoría (`--acento`), no esta hoja.

   El tamaño de aquí es el del PRIMER FOTOGRAMA y el repuesto de que no
   cargue la cáscara. Quien manda es juego-layout.css con su tabla de
   `data-largo`, que es la que hace que «SOL» salga enorme y
   «MURCIELAGO» quepa sin una sola medida escrita en este fichero. */
#element-text {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--acento);
  letter-spacing: .04em;
  line-height: 1.1;
  flex-shrink: 0;
}

#audio-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: var(--acento-suave);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}

@media (hover: hover) {
  #audio-btn:hover { background: var(--acento-claro); transform: scale(1.15); }
}
#audio-btn:active { transform: scale(0.95); }

/* ── LAS LETRAS DE LA PALABRA ────────────────────────────────
   La palabra de arriba se pinta letra a letra (`renderDisplay()`) para
   que diga además POR DÓNDE VA. Debajo había una tira de casillas que
   hacía ese papel tapando con «?» las que faltaban; con la palabra
   escrita encima ya no tapaba nada, así que se fue y su trabajo se
   quedó aquí. Dos piezas que decían lo mismo son dos sitios donde
   mirar, y esta pantalla es de una niña de seis años.

   El apagado va en `opacity` y NO en `color-mix()`: el iPad de casa va
   con Safari 15 y no lo entiende. Sin `var()` de por medio el navegador
   sí tira la declaración al leerla, pero aquí no hay nada detrás que la
   recoja — el color quedaría a tinta plena y las tres señales serían
   una sola.

   Y `inline-block` no es adorno: un `span` en línea no admite
   `transform`, así que sin él el brinco de la letra perfecta no se ve.
   Se hereda todo lo demás —cuerpo, familia y halo— de #element-text,
   que es quien decide el tamaño contra el hueco. */
.ch {
  display: inline-block;
  /* Lo que falta se sigue LEYENDO: es el modelo que hay que copiar. Sólo
     se aparta para que lo que salte a la vista sea la letra de turno. */
  opacity: .34;
  transition: opacity .18s ease, color .18s ease;
}

.ch.turno { opacity: 1; }

/* Verde y no el de las casillas (#6ba56e): aquél iba sobre el blanco de
   su cajón y éste cae sobre la pared de yeso, donde se quedaba en 2,6:1.
   Éste da 5,1:1, que es lo que pide un texto de este tamaño. */
.ch.hecha {
  opacity: 1;
  color: #3f7a45;
  animation: letra-hecha .25s ease-out;
}

/* El premio del ≥90%. Sólo el brinco: el oro de la casilla `.perfect`
   vivía sobre su propio fondo dorado y aquí, sobre el crema de la pared,
   sería un amarillo que no se lee. La fiesta ya la ponen el destello del
   papel y los corazones. */
.ch.perfecta { animation: letra-perfecta .75s cubic-bezier(0.34,1.56,0.64,1); }

@keyframes letra-hecha {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes letra-perfecta {
  0%   { transform: scale(0.5) rotate(-18deg); }
  35%  { transform: scale(1.45) rotate(12deg); }
  60%  { transform: scale(0.92) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ── CANVAS DE DIBUJO ────────────────────────────────────── */
#canvas-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#canvas-wrap {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: 50vh;
  width: 100%;
  margin: 0 auto;
  border: 3px solid var(--acento-medio);
}

#canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* El renglón, la demo y el dedo, en ese orden. Ver el `index.html`. */
#guide { z-index: 0; }
#ghost { z-index: 1; }
#board { z-index: 2; }

#canvas-wrap.flash-ok      { border-color: var(--correct-bd); background: var(--correct-bg); }
#canvas-wrap.flash-bad     { border-color: var(--wrong-bd);   background: var(--wrong-bg); }
#canvas-wrap.flash-perfect {
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fff5d4, #fde68a);
  animation: canvas-perfect-glow 0.7s ease-out;
}

@keyframes canvas-perfect-glow {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0.75); }
  100% { box-shadow: 0 0 0 50px rgba(251,191,36,0); }
}

/* Botones flotantes en esquinas del canvas */
#clear-btn, #replay-btn {
  position: absolute;
  top: 8px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--acento);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.1s, background 0.15s;
  -webkit-appearance: none;
  touch-action: manipulation;
}

#clear-btn  { right: 8px; }
#replay-btn { left: 8px; padding-left: 3px; }
#clear-btn:active, #replay-btn:active { transform: scale(0.92); background: var(--acento-suave); }

/* EL ▶ VA PELADO, Y ESO ES EL CAMBIO. Llevaba encima una píldora roja con las
   pistas que quedaban (`content: attr(data-uses)`), un estado apagado para
   cuando se acababan y un «+1 ❤️» verde que subía flotando cada tres palabras.
   Se fue todo el 31 de agosto de 2026 con el racionamiento que contaba: sin
   nada que contar, la píldora sólo podía decir un número que nunca baja, y un
   contador que no se mueve es peor que ninguno — promete una regla que no
   existe. Ahora es lo que parece: un botón de ver otra vez. El porqué está en
   `game.js`, junto a `DEMO_LENTA`. */

/* 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; }
  #element-card     { padding: 14px 60px 14px 24px; gap: 22px; }
  #feedback         { font-size: 1.2rem; }
  #level-row, #accuracy-row { max-width: 400px; }
  #canvas-wrap      { max-height: 60vh; max-width: 480px; }
  #canvas-area      { margin-top: 24px; }
  #element-card     { max-width: 480px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* Móvil pequeño */
@media (max-width: 420px) {
  h1               { font-size: 1.25rem; }
  #element-card    { padding: 8px 12px 6px; gap: 10px; }
  #video-box h2    { font-size: 1.3rem; }
}

/* ============================================================
   LA CÁSCARA COMÚN, EN UN JUEGO DE PAPEL Y LÁPIZ

   ../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. En los juegos de test la banda de abajo son cuatro pastillas;
   aquí es el papel, y encima va lo que hay que escribir:

     ┌──────────────────┐
     │    Minúsculas    │  cabecera · de la cáscara
     │      S O L       │  la palabra · en mayúscula, y se come la holgura.
     │                  │                Las letras hechas van en verde, y
     │                  │                así dice también por dónde va
     │  ┌────────────┐  │
     │  │┈┈┈┈┈┈┈┈┈┈┈┈│  │  el papel · cuadrado, lo más grande posible,
     │  │─── a ──────│  │              y con el renglón de cuatro líneas
     │  └────────────┘  │
     └──────────────────┘

   El reparto es el de la cáscara con una vuelta de tuerca: allí el
   hueco sobrante es del elemento y la banda de abajo mide lo que miden
   los botones; aquí la banda de abajo es un cuadrado que se mide contra
   la ventana (56vh o el ancho, lo que sea menor) y el sobrante sigue
   siendo del elemento. Así el papel es igual de grande en cualquier
   pantalla y la holgura de un móvil alto no se queda en blanco.

   Esta hoja carga ANTES que la cáscara, así que a igualdad de peso ella
   gana. Casi nunca hace falta pelearse: lo de la banda del medio
   (filas, tamaño de la palabra) son propiedades que ella no declara, y
   el lienzo y el renglón son sólo de aquí. La única regla con un id de
   más está en el bloque de móvil tumbado, y allí se explica por qué.

   Va al final del fichero a propósito: por delante hay dos bloques
   @media con las medidas de antes (el lienzo a 50vh…). Las media
   queries no suman especificidad, así que lo de aquí les gana por orden
   y aquéllas se quedan sólo para lo que no se redefine abajo.
   ============================================================ */

/* ── BANDA MEDIA · la palabra ────────────────────────────────
   La cáscara deja #element-card en `display:grid` con el hueco que
   sobra y lo declara contenedor de tamaño; a partir de ahí 1cqh es el
   1% de ESE hueco y no del alto de la ventana, así que la palabra se
   mide contra el sitio que le ha quedado.

   UNA fila, y era dos hasta el 31 de agosto de 2026: debajo de la
   palabra iba la tira de casillas, y el par se centraba junto en la
   banda para que se leyeran como una sola cosa. Al irse las casillas,
   la palabra hace las dos cosas y se queda sola en el centro.

   Que la fila mida lo suyo y no `1fr` tiene su porqué: el tamaño de la
   palabra sale del alto de la BANDA (cqh), que es firme, así que no hay
   pescadilla que se muerda la cola por mucho que la fila se mida por su
   contenido. */
#element-card {
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: 0;
}

/* AQUÍ NO HAY REGLA PARA #element-text, Y ES A PROPÓSITO.
   Mientras esto era un emoji había que medirlo a mano contra la banda
   (`min(52cqh, 42cqw)`, con dos repuestos delante para quien no tenga
   unidades de contenedor). Desde que lo que se enseña es TEXTO, quien
   sabe hacerlo es la cáscara: juego-comun.js le cuenta los caracteres
   y juego-layout.css tiene una fila por cada largo —de 52cqh para una
   letra a 28cqh para nueve—, con su respaldo bajo @supports para el
   Safari 15 del iPad. Escribir aquí un `font-size` no ajustaría nada:
   APAGARÍA esa tabla, y una palabra de diez letras se saldría.

   Con ella 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. */

/* ── EL BOTÓN DE VOZ ─────────────────────────────────────────
   Sin la tarjeta blanca detrás ya no tiene dónde vivir, así que sale de
   la banda y se va 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,
   para que se lean como la pareja de mandos del juego.

   (`fixed` dentro de #game-screen: cuando juego-fx.js hace temblar la
   pantalla por un fallo, tiembla con ella. Es lo que se quiere.) */
#audio-btn {
  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, el mando desaparece con el juego. El
     de volver al menú, que es de la cáscara, sí se queda: es la salida. */
  z-index: 40;
  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); }

/* ── BANDA BAJA · el papel ───────────────────────────────────
   Cuadrado SIEMPRE: es lo que hace que la letra de la plantilla y la
   que se dibuja encima estén a la misma escala. El lado es el menor de
   los dos límites —lo que hay de ancho, o 56vh— así que no se sale ni
   de pie ni tumbado, y lo que sobra se lo queda la palabra de arriba.

   El 52 no es a ojo: la cabecera se lleva ~11dvh y hay que dejarle a la
   banda del medio algo con lo que trabajar. Con más, en una tableta la
   palabra se queda de sello; con menos, el papel se hace pequeño justo
   donde hay sitio de sobra.

   Y va en `dvh`, no en `vh`: en iOS `vh` es el viewport GRANDE —el de
   la barra del navegador escondida—, así que un 56vh se comía ~50px más
   de los que hay de verdad y el papel salía tapando la palabra. La
   línea de `vh` se queda delante de repuesto, para un navegador que no
   entienda `dvh` (Safari < 15.4). */
#canvas-area {
  order: 1;
  flex: 0 0 auto;
  margin: 0;
  display: grid;
  place-items: center;
}

#canvas-wrap {
  width: min(100%, 52vh);
  width: min(100%, 52dvh);
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 22px;
  border: 3px solid var(--canto);
  background: rgba(255,253,247,.97);
  box-shadow: 0 10px 28px rgba(60,40,10,.20);
}

/* ── Móvil tumbado ───────────────────────────────────────────
   Tumbado no hay alto para tres pisos, pero sobra ancho: la pantalla se
   parte en dos columnas —a la izquierda lo que hay que escribir, a la
   derecha el papel— y así el cuadrado vuelve a ser lo más grande que
   cabe, ahora medido por el alto de la banda.

   Es un cambio de eje, no de piezas: `main` pasa a fila y el orden que
   ya tenían (palabra 0, papel 1) las coloca solas. El papel se estira al
   alto de la banda y su `aspect-ratio` le saca el ancho; el resto se lo
   queda la columna de la izquierda, que sigue siendo el contenedor de
   tamaño contra el que se mide la palabra.

   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) {
  /* Lleva un id de más porque la cáscara declara `flex-direction:column`
     sobre `main` pelado, y como carga después ganaba ella. */
  #game-screen main { flex-direction: row; align-items: stretch; }

  /* Y el mando de la voz baja debajo del de volver, en la misma esquina:
     donde estaba —arriba a la derecha— le caía justo encima al botón de
     borrar del papel, que tumbado se pega al borde de la pantalla. */
  #audio-btn {
    top: calc(max(10px, env(safe-area-inset-top, 0px)) + 50px);
    left: max(10px, env(safe-area-inset-left, 0px));
    right: auto;
  }

  /* El lado sale de la ventana y no del hueco, a diferencia de lo que
     se hace de pie. Es por una pescadilla que se muerde la cola: en una
     fila, el ancho de la columna del papel se calcula ANTES de saber
     cuánto mide de alto, así que un cuadrado que saque su ancho del
     alto (height:100% + aspect-ratio) se queda en cero y desaparece.
     Con dos topes contra la ventana no hay nada que adivinar: 72vh es
     lo que queda de alto quitando la cabecera, y 46vw deja la mitad
     larga de la pantalla para la palabra. */
  #canvas-wrap {
    width: min(46vw, 72vh);
    width: min(46vw, 72dvh);
    max-height: 100%;
  }

  #audio-btn { width: 40px; height: 40px; font-size: 1.05rem; }
}