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

html, body {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  /* Transparente: al embeber en un iframe, los márgenes se funden con
     la página anfitriona (la tarjeta blanca del boletín) en vez de
     mostrar un marco oscuro. */
  background: transparent;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   CONTENEDOR DEL JUEGO  (640×400, ratio 8:5)
══════════════════════════════════════════ */
#game {
  /* Tamaño de DISEÑO fijo (640×400). Todo el juego —texto, sprites,
     cajas, bordes— está pensado a esta escala. Luego se amplía POR
     COMPLETO con transform:scale (ver --scale en script.js) para llenar
     el iframe sin deformar nada: el texto crece igual que el resto. */
  width: 640px;
  height: 400px;
  flex: none;
  transform: scale(var(--scale, 1));
  transform-origin: center center;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Marco exterior dorado cálido — consonante con la estética Zelda/CFRU */
  border: 4px solid #3a1800;
  box-shadow: 0 0 0 2px #a07020, 0 12px 40px rgba(0,0,0,0.9);
  font-family: 'Pixelify Sans', monospace;
  image-rendering: pixelated;
  user-select: none;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   CAMPO DE BATALLA — dos medios apilados como
   múltiples backgrounds: far (arriba) + near (abajo).
   Split limpio al 50% exacto, sin pseudo-elementos
   y sin costura independientemente de la altura.
   Para cambiar a montaña: sustituye _Forest_ por _Mountain_.
══════════════════════════════════════════ */
#field {
  flex: 3;
  position: relative;
  overflow: hidden;
  image-rendering: pixelated;
  background: url('assets/img/BATTLE BACK/BATTLE BACK/TALL GRASS.png') 0 0 / 100% 100% no-repeat;
}

/* ── PLATAFORMAS: sombras ovaladas difuminadas ── */
/* Mantenidas en caso de que el fondo no cubra toda la profundidad */
.platform {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}
.platform-enemy {
  width: 112px; height: 18px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.08) 70%, transparent 100%);
  right: 7%; bottom: 48%;
}
.platform-player {
  width: 152px; height: 24px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.08) 70%, transparent 100%);
  left: 5%; bottom: 2px;
}

/* ── BOTONES DE CONTROL (silencio / pantalla completa) ── */
/* Ambos comparten aspecto; solo cambia la posición horizontal. */
.btn-mute,
.btn-fullscreen {
  position: absolute;
  top: 8px;
  z-index: 110;          /* siempre accesible, por encima de todo */
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  background: rgba(20,20,28,0.72);
  color: #fff;
  border: 2px solid #181818;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Pixelify Sans', monospace;
  transition: background 0.12s, opacity 0.12s;
}
.btn-mute       { right: 8px; }   /* el de más a la derecha */
.btn-fullscreen { right: 44px; }  /* a la izquierda del de silencio */
.btn-mute:hover,
.btn-fullscreen:hover { background: rgba(45,45,60,0.92); }
.btn-mute.is-muted    { opacity: 0.8; }

/* ── SPRITES ──
   El sprite se ajusta dentro de un recuadro máximo (alto y ancho)
   conservando su proporción. Así da igual que la imagen sea vertical
   o apaisada: nunca se deforma ni se sale del campo de batalla. */
.sprite-wrap { position: absolute; z-index: 2; }

.sprite-wrap img {
  display: block;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  animation: idle-float 2s ease-in-out infinite;
}
/* Rival (arriba): recuadro más pequeño. Jugador (abajo): más grande. */
/* El wrap toma el ancho de su plataforma y centra el sprite dentro,
   anclado al suelo (flex-end), para que quede justo sobre la sombra
   sea cual sea la proporción de la imagen. */
.sprite-enemy        { right: 7%; bottom: calc(48% + 8px); width: 112px;
                       display: flex; justify-content: center; align-items: flex-end; }
.sprite-enemy  img   { max-height: 120px; max-width: 150px; }
.sprite-player       { left: 5%; bottom: 12px; width: 152px;
                       display: flex; justify-content: center; align-items: flex-end; }
.sprite-player img   { max-height: 205px; max-width: 200px; animation-delay: 0.7s; }

/* Modo "preview" (pantalla de elegir personaje/escenario): de fondo solo
   se ve el RIVAL; el jugador aún no está elegido, así que se oculta su
   sprite y su HUD. Se quita al empezar el combate. */
#field.preview .hud-player,
#field.preview .sprite-player { display: none; }

@keyframes idle-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Golpe: sacudida + flash blanco como en los juegos */
@keyframes hit-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-9px); }
  40%     { transform: translateX(9px); }
  60%     { transform: translateX(-6px); }
  80%     { transform: translateX(6px); }
}
@keyframes hit-flash {
  0%,100% { filter: none; }
  25%     { filter: brightness(20) saturate(0); }
  55%     { filter: none; }
  75%     { filter: brightness(8) saturate(0); }
}
.doing-hit { animation: hit-shake 0.45s ease-out, hit-flash 0.45s ease-out !important; }

/* Derrotas */
@keyframes faint-enemy  {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(70px); opacity: 0; }
}
@keyframes faint-player {
  0%   { transform: translateY(0) scaleY(1); opacity: 1; }
  100% { transform: translateY(50px) scaleY(0.15); opacity: 0; }
}
.doing-faint-enemy  img { animation: faint-enemy  0.65s ease-in  forwards !important; }
.doing-faint-player img { animation: faint-player 0.55s ease-in forwards !important; }

/* ══════════════════════════════════════════
   HUD — estilo DS (Diamond/Pearl/HGSS)
   Forma trapezoidal con clip-path, fondo gris
   degradado, etiqueta HP en amarillo.
══════════════════════════════════════════ */
.hud {
  position: absolute; z-index: 3;
  padding: 8px 18px 9px 20px;
  min-width: 220px;
  background: linear-gradient(to bottom, #e0e0e4 0%, #c4c4cc 55%, #b4b4bc 100%);
  /* drop-shadow respeta el clip-path de la forma */
  filter: drop-shadow(1px 4px 0px #404048);
}

/* Rival: esquina superior-izquierda cortada en diagonal */
.hud-enemy {
  top: 5%; left: 0;
  clip-path: polygon(24px 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Jugador: esquina superior-derecha cortada en diagonal (espejo) */
.hud-player {
  bottom: 2%; right: 0;
  clip-path: polygon(0% 0%, calc(100% - 24px) 0%, 100% 100%, 0% 100%);
  padding-right: 36px;
}

.hud-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.hud-name   { font-size: 13px; flex: 1; color: #101018; font-weight: bold; }
.hud-gender { font-size: 13px; color: #2850b8; }
.hud-level  { font-size: 11px; color: #101018; white-space: nowrap; }

/* Fila PS + barra */
.hud-hp-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }

/* Etiqueta "PS" en amarillo como el "HP" original DS */
.hud-ps {
  font-size: 11px;
  font-weight: bold;
  color: #c89000;
  background: none;
  padding: 0;
  letter-spacing: 0;
}

.hp-track {
  flex: 1; min-width: 130px;
  height: 10px;
  background: #484850;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.3);
}

.hp-fill {
  height: 100%;
  width: 100%;
  background: #38c010;
  transition: width 0.5s ease-out, background 0.3s;
}
.hp-fill.hp-yellow { background: #d8a800; }
.hp-fill.hp-red    { background: #d01808; }

/* Números de HP (solo jugador) */
.hud-nums {
  text-align: right;
  font-size: 11px;
  margin-top: 3px;
  color: #101018;
}

/* ══════════════════════════════════════════
   PANEL INFERIOR — estilo Black / White (Gen V)
   Fondo gris oscuro de DS; caja de diálogo
   blanca con borde negro; 4 botones de colores.
══════════════════════════════════════════ */
#ui {
  flex: 1.2;
  display: flex;
  border-top: 4px solid #181818;
  background: #707070;
  gap: 5px;
  padding: 5px;
  /* Altura fija: el panel NO crece aunque el texto sea largo, así
     nunca tapa el campo de batalla. El texto se adapta dentro. */
  min-height: 0;
  overflow: hidden;
}

/* Caja de diálogo: blanco limpio, borde negro sólido BW */
#dialog {
  flex: 0.85;   /* más estrecha: deja más sitio a las respuestas */
  /* Más padding abajo: reserva una franja para el botón ▶ y que el
     texto (anclado arriba) nunca quede tapado por él. */
  padding: 9px 14px 30px 14px;
  display: flex;
  align-items: flex-start;
  background: #f8f8f0;
  border: 3px solid #181818;
  border-radius: 6px;
  /* Reborde blanco interior para el efecto DS */
  box-shadow: inset 0 0 0 2px #ffffff;
  position: relative; /* ancla el botón play */
  /* Caja de altura fija con recorte: el texto largo se pagina (ver script.js) */
  min-height: 0;
  overflow: hidden;
}

#dialog-text {
  /* VT323: retro pero mucho más legible para la pregunta y el feedback.
     16px de VT323 ≈ el alto de línea de antes, pero con letra más clara. */
  font-family: 'VT323', monospace;
  font-size: 16px;
  line-height: 1.3;
  color: #101010;
  word-break: break-word;
  width: 100%;   /* ocupa todo el ancho para envolver el texto con fiabilidad */
}

/* ══════════════════════════════════════════
   MENÚ DE OPCIONES — estilo BW (4 botones de colores)
══════════════════════════════════════════ */
#options {
  flex: 1.5;    /* las 4 respuestas ocupan más ancho que la pregunta */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: transparent;
  gap: 6px;
  padding: 0;
  min-height: 0;     /* la rejilla respeta la altura del panel, no la empuja */
  overflow: hidden;
}

.opt {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px 9px;
  border: 3px solid #181818;
  /* Píldora redondeada, igual que los botones BW originales */
  border-radius: 22px;
  cursor: pointer;
  font-family: 'Pixelify Sans', monospace;
  color: #101010;
  transition: filter 0.07s, transform 0.07s, box-shadow 0.07s;
  position: relative;
  /* Sombra inferior para efecto de botón físico */
  box-shadow: 0 4px 0 rgba(0,0,0,0.45);
  /* Cada botón respeta su celda de la rejilla; si el texto fuese muy
     largo se recorta en lugar de agrandar el panel. */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Colores BW por opción: rosa / naranja / verde / azul */
.opt-a { background: #f07878; }
.opt-b { background: #e8a820; }
.opt-c { background: #50c040; }
.opt-d { background: #5898f8; }

/* Flechita de selección (cursor BW) al hacer hover */
.opt::before {
  content: '▶';
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: #101010;
  opacity: 0;
  transition: opacity 0.07s;
}
.opt:hover:not(:disabled)::before { opacity: 1; }
.opt:hover:not(:disabled)  { filter: brightness(1.08); }
.opt:active:not(:disabled) {
  filter: brightness(0.92);
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.opt:disabled { opacity: 0.4; cursor: not-allowed; }

/* Las letras A/B/C/D se ocultan: el texto de la respuesta va solo. */
.opt b { display: none; }

/* Texto de respuesta — centrado y a todo el alto del botón.
   VT323 (retro y legible); el tamaño se autoajusta por JS
   (fitOptionText) si una respuesta no cabe. */
.opt span {
  font-family: 'VT323', monospace;
  font-size: 15px;
  line-height: 1.1;
  word-break: break-word;
  width: 100%;
  color: #101010;
}

/* Feedback: respuesta correcta */
.opt.is-correct {
  background: #60d850 !important;
  border-color: #1a6808 !important;
  box-shadow: 0 4px 0 rgba(0,60,0,0.45) !important;
}
.opt.is-correct b, .opt.is-correct span {
  color: #0a3800 !important;
}

/* Feedback: respuesta incorrecta */
.opt.is-wrong {
  background: #f05050 !important;
  border-color: #880010 !important;
  box-shadow: 0 4px 0 rgba(80,0,0,0.45) !important;
}
.opt.is-wrong b, .opt.is-wrong span {
  color: #400000 !important;
}

/* ══════════════════════════════════════════
   PANTALLAS DE RESULTADO
══════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Pixelify Sans', monospace;
  animation: overlay-in 0.3s ease-out;
}
.overlay[hidden] { display: none; }

#overlay-win  { background: rgba(10,20,5,0.90); }
#overlay-lose { background: rgba(30,5,0,0.90); }

@keyframes overlay-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

.overlay-box {
  background: #f8f8f0;
  border: 3px solid #181818;
  box-shadow: inset 0 0 0 2px #ffffff, 5px 5px 0 #181818;
  padding: 28px 34px;
  text-align: center;
  max-width: 300px;
  /* Se escala igual que el juego para que la pantalla de resultado
     guarde la misma proporción que el combate. */
  transform: scale(var(--scale, 1));
  transform-origin: center center;
}

.overlay-title {
  font-size: 18px;
  margin-bottom: 12px;
  color: #101010;
}
.overlay-msg {
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 22px;
  color: #303030;
}
/* Botón de overlay estilo BW — azul como el botón RUN */
.overlay-btn {
  font-family: 'Pixelify Sans', monospace;
  font-size: 12px;
  font-weight: bold;
  padding: 10px 24px;
  background: #5898f8;
  border: 3px solid #181818;
  border-radius: 22px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.4);
  cursor: pointer;
  color: #101010;
  transition: filter 0.07s, transform 0.07s, box-shadow 0.07s;
}
.overlay-btn:hover  { filter: brightness(1.1); }
.overlay-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }

/* ══════════════════════════════════════════
   BOTÓN PLAY (siguiente pregunta)
   Aparece en la esquina del diálogo tras responder.
══════════════════════════════════════════ */
.btn-next {
  position: absolute;
  bottom: 5px;
  right: 7px;
  font-family: 'Pixelify Sans', monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 11px;
  background: #e8a820;
  border: 3px solid #181818;
  border-radius: 22px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.45);
  cursor: pointer;
  color: #101010;
  transition: filter 0.07s, transform 0.07s, box-shadow 0.07s;
}
.btn-next:hover  { filter: brightness(1.1); }
.btn-next:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.btn-next[hidden] { display: none; }

/* ══════════════════════════════════════════
   PANTALLA DE INTRO
   Cubre el campo de batalla hasta que el alumno
   pulsa "¡A combatir!".
══════════════════════════════════════════ */
#screen-intro {
  position: absolute;
  inset: 0;
  z-index: 50;
  /* Fondo: imagen de batalla con overlay oscuro — más épico que negro liso */
  background:
    linear-gradient(rgba(12,12,24,0.72), rgba(12,12,24,0.88)),
    url('assets/img/BATTLE BACK/BATTLE BACK/TALL GRASS.png') center / cover;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pixelify Sans', monospace;
  animation: overlay-in 0.3s ease-out;
}
#screen-intro.hidden { display: none; }

.intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  max-width: 560px;
  width: 92%;
}

.intro-flash { font-size: 2.6rem; line-height: 1; }

.intro-title {
  font-size: 28px;
  color: #f8f8f0;
  text-align: center;
  text-shadow: 0 0 18px rgba(248,248,240,0.35), 0 2px 0 #000;
}

.intro-topic {
  font-size: 14px;
  color: #b8b8d0;
  text-align: center;
  line-height: 1.5;
  min-height: 1em;
}

.intro-rules {
  background: #f8f8f0;
  border: 3px solid #181818;
  box-shadow: inset 0 0 0 2px #ffffff, 3px 3px 0 #181818;
  padding: 14px 20px;
  width: 100%;
}
.intro-rules-hd {
  font-size: 11px;
  color: #c89000;
  margin-bottom: 10px;
  letter-spacing: 0.06em;
}
.intro-rules ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intro-rules li {
  font-size: 13px;
  color: #181818;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.ir-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  flex-shrink: 0;
  color: #101010;
}
.ir-ok   { background: #50c040; }
.ir-ko   { background: #f07878; }
.ir-win  { background: #e8a820; }
.ir-redo { background: #5898f8; }

/* Botón de inicio más grande que los de resultado */
#screen-intro .overlay-btn {
  font-size: 15px;
  padding: 12px 32px;
}

/* ══════════════════════════════════════════
   PANTALLA DE SELECCIÓN DE ESCENARIO
   Aparece tras la intro, antes de iniciar el combate.
══════════════════════════════════════════ */
#screen-scene {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: linear-gradient(rgba(12,12,24,0.82), rgba(12,12,24,0.96));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pixelify Sans', monospace;
  animation: overlay-in 0.3s ease-out;
}
#screen-scene[hidden] { display: none; }

.scene-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  width: 100%;
}

.scene-hd {
  font-size: 12px;
  color: #c89000;
  letter-spacing: 0.1em;
  text-align: center;
}

.scene-grid {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* Tarjeta de miniatura de escenario */
.scene-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 3px solid #404058;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  font-family: 'Pixelify Sans', monospace;
  font-size: 10px;
  color: #a0a0c0;
  transition: border-color 0.12s, color 0.12s;
  animation: card-float 2.2s ease-in-out infinite;
}

.scene-card img {
  width: 100px;
  height: 63px;
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
}

/* Al pasar el ratón: detener flotación, subir y resaltar */
.scene-card:hover {
  border-color: #e8a820;
  color: #f8f8f0;
  animation: none;
  transform: translateY(-6px);
}

.scene-card:active {
  transform: translateY(0);
}

@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* ══════════════════════════════════════════
   SELECCIÓN DE PERSONAJE (misma pantalla que el escenario)
   El alumno elige 1 de 3; el sprite de espaldas se usa en combate.
══════════════════════════════════════════ */
.char-grid {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: flex-end;
}

.char-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.04);
  border: 3px solid #404058;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  font-family: 'Pixelify Sans', monospace;
  font-size: 10px;
  color: #a0a0c0;
  transition: border-color 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s;
}

.char-card img {
  width: 64px;
  height: 80px;
  object-fit: contain;          /* retrato completo, sin recorte */
  image-rendering: pixelated;
  display: block;
}

.char-card:hover {
  border-color: #e8a820;
  color: #f8f8f0;
  transform: translateY(-4px);
}

/* Personaje actualmente elegido: marco verde resaltado */
.char-card.is-selected {
  border-color: #60d850;
  color: #f8f8f0;
  box-shadow: 0 0 0 2px #60d850;
}