/* ============================================================
   AMANE MINÚSCULAS — Estilos
   ============================================================ */

*, *::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;
}

/* Tamaño de la letra a adivinar. Aquí lo más largo que se enseña son dos
   caracteres (una letra suelta, o consonante+vocal de makeSyllables), así
   que cabe mucho más que el tamaño de serie de la cáscara, calculado para
   los juegos que meten una frase entera. Con 48cqw dos letras ocupan el
   78% del ancho. */
:root {
  --tam-elemento: min(46cqh, 48cqw);
  /* y lo mismo en los botones: aquí las opciones son letras sueltas
     (o dos caracteres como mucho), no palabras */
  --tam-opcion: clamp(2rem, 9.5vw, 3.6rem);
}


/* 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. */
html {
  touch-action: manipulation;      /* mata el zoom por doble toque */
  -webkit-text-size-adjust: 100%;  /* Safari no reescala el texto solo */
}

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(24px, 4vh) 16px 32px;
  touch-action: manipulation;
  overscroll-behavior: none;       /* sin rebote elástico al arrastrar */
  -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;
}

#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;
  /* sin uppercase: la etiqueta muestra las parejas Aa Ee Ii… */
  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-suave);
  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: 44px 24px 36px;
  text-align: center;
  position: relative;
}

#element-text {
  font-size: 5.5rem;
  font-weight: 900;
  color: var(--acento);
  line-height: 1.1;
  user-select: none;
  transition: transform 0.2s;
}

/* Ajuste de tamaño según la longitud del texto (nivel de palabras) */
#element-text.len-md { font-size: 4rem; }
#element-text.len-lg { font-size: 3.2rem; }
#element-text.len-xl { font-size: 2.6rem; }

#element-text.pop {
  animation: pop 0.35s ease-out;
}

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

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

/* 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-suave);
  border-radius: 16px;
  font-size: 2.8rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  color: var(--text);
  padding: 22px 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;
  /* holgura para los trazos descendentes de g, j, p, q, y */
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Ajuste de tamaño según la longitud del texto (nivel de palabras) */
.option-btn.len-md { font-size: 2rem; }
.option-btn.len-lg { font-size: 1.6rem; }
.option-btn.len-xl { font-size: 1.3rem; }

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

/* Name screen */
#name-screen {
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg) 50%, var(--acento-suave) 100%);
}

#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(233,30,140,0.18), 0 2px 8px rgba(0,0,0,0.06);
  width: 100%;
  max-width: 480px;
  animation: name-box-in 0.5s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes name-box-in {
  from { transform: scale(0.8) translateY(30px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

#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%;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

#name-input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px rgba(233,30,140,0.12);
}

#name-input::placeholder {
  color: #dbb;
  font-weight: 700;
}

#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%;
  transition: transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 6px 20px rgba(233,30,140,0.4);
  letter-spacing: 0.5px;
  -webkit-appearance: none;
}

#name-btn:hover  { transform: scale(1.03); box-shadow: 0 8px 28px rgba(233,30,140,0.5); }
#name-btn:active { transform: scale(0.97); }

@media (min-width: 768px) {
  #name-box      { padding: 64px 56px 68px; gap: 36px; }
  #name-emoji    { font-size: 7rem; }
  #name-box h2   { font-size: 3.4rem; }
  #name-box p    { font-size: 1.6rem; }
  #name-input    { font-size: 2.2rem; padding: 22px 40px; }
  #name-btn      { font-size: 1.8rem; padding: 26px 64px; }
}

@media (max-width: 420px) {
  #name-box    { padding: 36px 24px 40px; gap: 20px; border-radius: 24px; }
  #name-emoji  { font-size: 4rem; }
  #name-box h2 { font-size: 2.2rem; }
  #name-input  { font-size: 1.5rem; padding: 15px 24px; }
  #name-btn    { font-size: 1.3rem; padding: 18px 40px; }
}

/* 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);
  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: 56px 40px 48px; }
  #element-text  { font-size: 7rem; }
  #element-text.len-md { font-size: 5.2rem; }
  #element-text.len-lg { font-size: 4.2rem; }
  #element-text.len-xl { font-size: 3.4rem; }
  #options-grid  { gap: 20px; margin-top: 12px; }
  .option-btn    { font-size: 3.2rem; min-height: 110px; padding: 28px 16px; }
  .option-btn.len-md { font-size: 2.4rem; }
  .option-btn.len-lg { font-size: 2rem; }
  .option-btn.len-xl { font-size: 1.6rem; }
  #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; }
  #element-text    { font-size: 4rem; }
  #element-text.len-md { font-size: 3.2rem; }
  #element-text.len-lg { font-size: 2.6rem; }
  #element-text.len-xl { font-size: 2.1rem; }
  .option-btn      { font-size: 2.2rem; padding: 16px 8px; min-height: 78px; }
  .option-btn.len-md { font-size: 1.7rem; }
  .option-btn.len-lg { font-size: 1.35rem; }
  .option-btn.len-xl { font-size: 1.1rem; }
  #video-box h2    { font-size: 1.3rem; }
}