/* ============================================================
   RELOJ — Estilos
   ============================================================ */

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

:root {
  /* Estos valores son sólo el respaldo 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, para que menú y juego vayan a juego. Por eso los nombres son
     neutros y no "pink": aquí puede acabar cualquier tono. */
  --acento:        #e91e8c;   /* el fuerte: botones y acentos */
  --acento-fuerte: #c2176e;   /* el mismo, más oscuro (hover) */
  --acento-medio:  #f48fb1;   /* medio tono */
  --acento-claro:  #f0d0e8;   /* tinte claro: bordes */
  --acento-suave:  #fce4ec;   /* tinte muy claro: fondos */
  --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;
}

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(24px, 4vh) 16px 32px;
}

#app {
  width: 100%;
  max-width: 560px;
  position: relative;
}

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

/* Header */
header { text-align: center; }

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

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

#phase-label {
  font-size: 0.78rem;
  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.88rem;
  color: #777;
  margin-bottom: 5px;
}

#level-bar-bg {
  background: var(--acento-claro);
  border-radius: 99px;
  height: 10px;
  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: 8px;
  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.72rem;
  color: #bbb;
  font-weight: 700;
  min-width: 2.8em;
  text-align: right;
}

/* Element card */
#element-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 24px 28px;
  text-align: center;
}

/* Clock SVG container */
#clock-wrap {
  width: min(230px, 72vw);
  aspect-ratio: 1;
  margin: 0 auto;
  user-select: none;
}

#clock-wrap.pop {
  animation: pop 0.35s ease-out;
}

@keyframes pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1);   opacity: 1; }
}

/* Options grid */
#options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}

.option-btn {
  background: var(--card);
  border: 3px solid var(--acento-claro);
  border-radius: 16px;
  font-size: 1.9rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  color: var(--text);
  padding: 20px 12px;
  cursor: pointer;
  min-height: 90px;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(233,30,140,0.07);
  user-select: none;
  line-height: 1;
  letter-spacing: -0.5px;
}

@media (hover: hover) {
  .option-btn:hover:not(.disabled) {
    background: var(--bg);
    border-color: var(--acento-medio);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(233,30,140,0.15);
  }
}

.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) { opacity: 0.35; }

/* Feedback */
#feedback {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  min-height: 1.8em;
  transition: opacity 0.2s;
}

.fb-correct { color: #2e7d32; }
.fb-wrong   { color: #c62828; }

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

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

/* 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: 0 4px 14px rgba(233,30,140,0.3);
}

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

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

/* iPad (768 px+) */
@media (min-width: 768px) {
  body          { padding: max(40px, 6vh) 32px 40px; }
  #app          { max-width: 660px; }
  h1            { font-size: 2.4rem; }
  #game-screen  { gap: 32px; }
  #element-card { padding: 40px 40px 36px; }
  #clock-wrap   { width: 280px; }
  #options-grid { gap: 20px; margin-top: 12px; }
  .option-btn   { font-size: 2.2rem; min-height: 110px; padding: 26px 16px; }
  #feedback     { font-size: 1.3rem; }
  #level-row    { max-width: 400px; }
  #accuracy-row { max-width: 400px; }
}

/* iPhone pequeño */
@media (max-width: 420px) {
  h1              { font-size: 1.5rem; }
  #clock-wrap     { width: min(190px, 68vw); }
  .option-btn     { font-size: 1.5rem; padding: 16px 8px; min-height: 78px; }
  #video-box h2   { font-size: 1.3rem; }
}

/* ============================================================
   LA CÁSCARA COMÚN (../juego-layout.css)

   Va la última y manda en la colocación: paisaje de fondo, título
   arriba, opciones abajo y el hueco de en medio para el reloj. Todo lo
   de aquí arriba se queda con la piel (color, animaciones, pantallas de
   premio) y con el respaldo por si la cáscara no cargara.

   Este bloque es lo poco que la cáscara no puede saber de este juego, y
   tiene que ir AL FINAL del fichero: los dos @media de arriba traen las
   medidas fijas viejas del reloj y las media queries no suman
   especificidad, así que gana el orden.
   ============================================================ */

/* El reloj no es texto, es un SVG: la cáscara sabe agrandar #element-text
   según cuántas letras tenga, pero de esto no sabe nada. Se mide contra
   SU hueco (cqh/cqw, que la cáscara declara contenedor de tamaño), no
   contra la ventana, así que sale del tamaño que toca en cualquier móvil
   sin una sola media query. El ancho es el que manda de pie y el alto
   tumbado, de ahí el min() de los dos. */
#element-card #clock-wrap {
  width: min(92cqh, 84cqw);
  height: auto;
  aspect-ratio: 1;
  margin: 0;
}

/* La pregunta nueva entra fundiendo, no dando un salto de tamaño: es el
   gesto que usa la cáscara para el emoji (`aparecer`), y aquí manda más
   todavía, porque un reloj que crece de golpe parece que se mueven las
   agujas. El @keyframes pop de arriba se queda sin usar. */
#clock-wrap.pop {
  animation: aparecer .5s ease-out backwards;
}

/* Las opciones de este juego son FRASES —de "la una en punto" (15
   letras) a "las cuatro menos veinticuatro" (29)—, no palabras sueltas.
   Los tamaños de serie de la cáscara están calculados para una palabra
   larga y para el kana, que ocupa el doble; con frases latinas caben
   letras bastante más grandes. Los cortes de largo los reparte
   sizeClass() en game.js.

   Hay que anteponer #options-grid porque `.option-btn.len-md` la declara
   la cáscara, que carga DESPUÉS: a igual peso ganaría ella. */
#options-grid .option-btn         { --fs: clamp(1.25rem, 6.1vw, 2.1rem);  }
#options-grid .option-btn.len-md  { --fs: clamp(1.15rem, 5.4vw, 1.9rem);  }
#options-grid .option-btn.len-lg  { --fs: clamp(1.05rem, 4.9vw, 1.7rem);  }
#options-grid .option-btn.len-xl  { --fs: clamp(.95rem,  4.4vw, 1.55rem); }

/* Y que las dos líneas queden parecidas en vez de dejar una palabra
   huérfana: "las ocho menos / veinticinco" se lee peor que
   "las ocho / menos veinticinco". */
.option-btn { text-wrap: balance; }

/* Tumbado, las cuatro opciones pasan a una sola fila (lo hace la
   cáscara) y el botón se queda en un cuarto del ancho: los tamaños de
   arriba, que van en vw de la pantalla entera, se saldrían. Aquí la
   cuenta es la misma que la de la cáscara —~19vw útiles por botón— pero
   repartida entre las tres o cuatro palabras de la frase, no entre
   caracteres sueltos. */
@media (orientation: landscape) and (max-height: 560px) {
  #options-grid .option-btn         { --fs: min(2.6vw, 24px); }
  #options-grid .option-btn.len-md  { --fs: min(2.3vw, 21px); }
  #options-grid .option-btn.len-lg  { --fs: min(2.1vw, 19px); }
  #options-grid .option-btn.len-xl  { --fs: min(1.9vw, 17px); }
}