/* ============================================================
   ANIMALES — Piel del juego

   La COLOCACIÓN no está aquí: la pone `../juego-layout.css`, que se
   carga detrás de esta hoja y es común a todos los juegos tipo test
   (título arriba, opciones abajo, emoji comiéndose el hueco de en
   medio, fondo de paisaje). Aquí sólo queda lo que hace que este juego
   se vea como este juego: color, animaciones y pantallas de premio.
   ============================================================ */

*, *::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:        #e91e8c;
  --acento-claro: #f0d0e8;
  --acento-suave:  #fce4ec;
  --acento-fuerte: #c2176e;
  --acento-medio:    #f48fb1;
  --bg:          #fff5f9;
  --card:        #ffffff;
  --text:        #3a1a2e;
  --correct-bg:  #e8f5e9;
  --correct-bd:  #66bb6a;
  --wrong-bg:    #ffebee;
  --wrong-bd:    #ef5350;
  --shadow:      0 6px 24px rgba(233,30,140,0.15);
  --radius:      20px;
}

/* Nada de zoom con los dedos ni doble toque: el niño se distrae haciendo
   zoom en vez de jugar. El pellizco se bloquea además por JS (game.js),
   porque iOS ignora user-scalable=no desde iOS 10. */
body {
  font-family: 'Nunito', 'Hiragino Sans', 'Meiryo', sans-serif;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;     /* sin lupa ni menú al mantener pulsado */
}

/* El campo del nombre sí necesita selección de texto */
#name-input {
  -webkit-user-select: text;
  user-select: text;
}

/* ── CABECERA ────────────────────────────────────────────── */
h1 {
  font-weight: 900;
  color: var(--acento);
  letter-spacing: -0.5px;
}

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

#phase-label {
  /* sin uppercase: la etiqueta muestra las parejas Aa Ee Ii… */
  font-weight: 700;
}

#level-row  { width: 100%; }
#level-text { display: block; text-align: center; }

/* El color del canal lo pone la cáscara: es cosa del decorado. */
#level-bar-bg {
  border-radius: 99px;
  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%;
}

#accuracy-bar-bg {
  flex: 1;
  border-radius: 99px;
  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-weight: 700;
  min-width: 2.8em;
  text-align: right;
}

/* ── ELEMENTO A ADIVINAR ─────────────────────────────────── */
#element-text {
  font-weight: 900;
  color: var(--acento);
  user-select: none;
  transition: transform 0.2s;
}

/* Aquí el elemento a adivinar es un emoji, no texto: su propia pila de
   fuentes, porque Nunito no trae emoji. El tamaño lo pone la cáscara. */
#element-text.emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* La animación de entrada (la clase `pop` que pone game.js) ya no está
   aquí: la define la cáscara, para que todos los juegos entren igual.
   Ver `aparecer` en ../juego-layout.css. */

#audio-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  background: var(--acento-suave);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  display: none; /* oculto mientras la voz esté deshabilitada en código */
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}

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

/* ── OPCIONES ────────────────────────────────────────────── */
.option-btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
  user-select: none;
}

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

.option-btn.correct {
  background: var(--correct-bg);
  border-color: var(--correct-bd);
  animation: correct-flash 0.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 0.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) {
  /* medio apagados, no borrados: sobre el paisaje un 0.35 los dejaba
     ilegibles y parecía que faltaban botones */
  opacity: 0.5;
}

/* ── MENSAJE ─────────────────────────────────────────────── */
#feedback {
  text-align: center;
  font-weight: 700;
  transition: opacity 0.2s;
}

.fb-correct { color: #1b5e20; }
.fb-wrong   { color: #b71c1c; }

/* ── OVERLAYS ─────────────────────────────────────────────── */
/* El velo (cristal esmerilado sobre el paisaje) lo pone la cáscara. */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.overlay.hidden { display: none; }

/* Video screen */
#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;
}

/* Name screen (en desuso: el juego entra directo) */
#name-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  background: #fff;
  border-radius: 32px;
  padding: 48px 40px 52px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06);
  width: 100%;
  max-width: 480px;
}

#name-emoji {
  font-size: 5.5rem;
  line-height: 1;
  animation: bounce 1.8s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-12px); }
}

#name-box h2 { font-size: 2.8rem; font-weight: 900; color: var(--acento); line-height: 1.1; }
#name-box p  { font-size: 1.35rem; color: #888; font-weight: 700; }

#name-input {
  font-family: inherit;
  font-size: 1.8rem;
  font-weight: 900;
  text-align: center;
  border: 4px solid var(--acento-medio);
  border-radius: 99px;
  padding: 18px 36px;
  outline: none;
  color: var(--text);
  background: var(--bg);
  width: 100%;
  -webkit-appearance: none;
}

#name-btn {
  background: linear-gradient(135deg, var(--acento-medio), var(--acento));
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 22px 56px;
  font-size: 1.5rem;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  width: 100%;
  box-shadow: var(--shadow);
  -webkit-appearance: none;
}

/* Shared buttons */
#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: var(--shadow);
}

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