/* ============================================================
   VERBOS · PASADO — la piel del juego

   La COLOCACIÓN no está aquí: la pone ../juego-layout.css, que se
   carga detrás de esta hoja a propósito y manda en todo lo que sea
   sitio y tamaño de las tres bandas (cabecera, tarjeta y opciones).
   Aquí queda el color, el tipo de letra, lo que pasa al acertar o
   fallar, las pantallas de premio — y las medidas de DENTRO de la
   tarjeta, que la cáscara no conoce: dibujo, infinitivo y frase.

   Cuidado al tocar: lo que la cáscara declara no se puede tapar
   desde aquí a igual especificidad, porque carga después. Si algún
   día hace falta, hay que anteponer el id (#options-grid .option-btn).
   ============================================================ */

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

:root {
  /* Respaldo por si game.json no llega a cargar. Lo normal es que
     juego-comun.js reescriba estos tonos con el color de la tarjeta
     del juego en el selector, así que aquí puede acabar cualquiera. */
  --acento:        #8A5312;
  --acento-fuerte: #6B3E0B;
  --acento-medio:  #C98A3C;
  --acento-claro:  #EBD3AF;
  --acento-suave:  #F8EFE0;
  --bg:            #FDF7EE;
  --text:          #3B2A15;
  --correct-bg:    #e8f5e9;
  --correct-bd:    #66bb6a;
  --wrong-bg:      #ffebee;
  --wrong-bd:      #ef5350;
  --shadow:        0 6px 24px rgba(138,83,18,.18);
}

body {
  font-family: 'Nunito', 'Hiragino Sans', 'Meiryo', sans-serif;
  color: var(--text);
}

/* ── Barras de la cabecera ───────────────────────────────────
   El canal vacío lo pinta la cáscara (translúcido, para que se vea
   el paisaje por debajo); el relleno es cosa del juego, que es
   quien tiene el color. */
#level-bar-bg, #accuracy-bar-bg { border-radius: 99px; overflow: hidden; }

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

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

/* ── LA TARJETA ──────────────────────────────────────────────
   La cáscara la deja en `grid` con las filas estiradas —está pensada
   para juegos de un solo hijo, un emoji enorme y nada más—, y aquí
   hay tres. Sin esto salen separados media pantalla.

   Todo lo de dentro se mide en cqh/cqw, o sea en % del hueco que le
   ha quedado a la tarjeta y NO de la ventana: da igual el móvil, se
   ve siempre lo mismo y no se sale nada. Reparto del alto, más o
   menos: 30 el dibujo + 11 el infinitivo + 15 la frase + los huecos,
   unos 70 de 100. Lo que sobra es el aire que necesita para flotar. */
#element-card {
  align-content: center;
  row-gap: 2.5cqh;
  text-align: center;
}

#element-emoji {
  font-size: min(30cqh, 30cqw);
  line-height: 1;
  user-select: none;
  /* sombra de figura y no de texto: recorta la silueta del dibujo en
     vez de dejar un borrón de color alrededor */
  filter: drop-shadow(0 8px 12px rgba(60,40,10,.28));
}

/* El infinitivo va en píldora, y no suelto como una palabra más: así
   se lee de un vistazo como "el verbo del que va la pregunta" y no
   como parte de la frase que hay debajo. */
#element-verb {
  font-size: min(9cqh, 7.6cqw);
  font-weight: 900;
  line-height: 1.15;
  color: var(--acento-fuerte);
  background: rgba(255,255,255,.78);
  border: .18em solid var(--acento-claro);
  border-radius: 99px;
  padding: .16em .7em;
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 .12em .3em rgba(60,40,10,.14);
}

/* La frase con el hueco. El tamaño NO se pone aquí: lo calcula
   game.js y lo deja en --tam-elemento, que es la perilla que la
   cáscara mira primero. Tiene que ser así porque depende de cuántas
   letras sean, y aquí se va de "Ayer yo …" a "Ayer vosotros …". */
#element-text {
  font-weight: 900;
  color: var(--acento-fuerte);
  user-select: none;
}

/* Cada pregunta nueva entra fundiendo. La cáscara ya lo hace con la
   frase (#element-text.pop); estas dos piezas son nuestras, así que
   les toca aquí. Sólo opacidad: el dibujo ya se está moviendo con el
   vaivén de la tarjeta y un cambio de tamaño encima se lee como un
   fallo, no como un gesto. */
#element-emoji.pop, #element-verb.pop {
  animation: aparecer-pieza .5s ease-out backwards;
}

@keyframes aparecer-pieza {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #element-emoji.pop, #element-verb.pop { animation: none; }
}

/* La voz está apagada en código, así que el botón no se enseña. Se
   deja en el HTML porque game.js le habla. */
#audio-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--acento-suave);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ── LAS CUATRO OPCIONES ─────────────────────────────────────
   La cáscara ya les da sitio, alto, cristal y canto —y el tamaño de
   letra por las clases len-*, que pone game.js—. Aquí sólo el color
   y lo que pasa al tocarlas. */
.option-btn {
  font-family: inherit;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}

.option-btn:active:not(.disabled) { transform: translateY(1px); }

.option-btn.correct {
  background: var(--correct-bg);
  border-color: var(--correct-bd);
  animation: correct-flash .35s ease-out;
}

@keyframes correct-flash {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}

.option-btn.wrong {
  background: var(--wrong-bg);
  border-color: var(--wrong-bd);
  animation: shake .4s ease-in-out;
}

@keyframes shake {
  0%,100% { transform: translateX(0);    }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px);  }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px);  }
}

.option-btn.disabled { cursor: default; pointer-events: none; }
.option-btn.disabled:not(.correct):not(.wrong) { opacity: .35; }

/* Mensaje de acierto/fallo: la cáscara lo esconde (el premio se
   cuenta con luz y movimiento, no con una palabra que hay que leer).
   Los colores se quedan por si algún día se vuelve a enseñar. */
.fb-correct { color: #2e7d32; }
.fb-wrong   { color: #c62828; }

/* ── PANTALLAS DE PREMIO ─────────────────────────────────────
   El cristal esmerilado de detrás lo pone la cáscara; aquí, la caja. */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.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: clamp(1.3rem, 5vw, 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;
}

#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: transform .12s;
  box-shadow: var(--shadow);
}

#skip-btn:hover { transform: scale(1.04); }
#skip-btn:active { transform: scale(.97); }