/* ============================================================
   Vocab Runner — UI
   Estética arcade de Spanish Tutor Now: misma paleta, tipografías
   y tratamiento CRT que games-arcade.css, para que el juego se
   sienta parte de la sección de juegos y no un injerto.
   ============================================================ */

:root {
  --bg:         #0a0821;
  --bg-deep:    #050414;
  --panel:      #140f33;
  --panel-2:    #1d1747;

  --ink:        #eafcff;
  --ink-soft:   rgba(210, 240, 255, .78);
  --ink-mute:   rgba(180, 210, 255, .55);

  --magenta:      #ff2ec4;
  --magenta-deep: #a3128e;
  --magenta-soft: #ff6ad5;

  --cyan:       #00e5ff;
  --cyan-deep:  #00a8c2;
  --yellow:     #fff35c;

  --line:       rgba(0, 229, 255, .35);
  --line-soft:  rgba(0, 229, 255, .18);

  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-crt:   "VT323", "Courier New", monospace;

  --cut: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-crt);
  font-size: 1.15rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* OJO: nada de `touch-action: none` aquí. touch-action se resuelve
     recorriendo los ancestros, así que ponerlo en el body bloquea el
     scroll táctil de TODO — incluidas las pantallas de menú, dejando el
     botón Jugar inalcanzable en un teléfono. Se limita al canvas. */
}

#app { position: fixed; inset: 0; }

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;   /* aquí sí: los swipes son controles, no scroll */
}

.hidden { display: none !important; }

/* Scanlines CRT sobre todo el juego (igual que el sitio). */
#app::after {
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px,
    transparent 2px, transparent 4px
  );
  mix-blend-mode: overlay;
  opacity: .5;
}
@media (prefers-reduced-motion: reduce) { #app::after { display: none; } }

/* ============ HUD ============ */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: max(12px, env(safe-area-inset-top)) 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hud-row {
  width: 100%;
  max-width: 660px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.hud-stats { justify-content: center; gap: 9px; }

.hud-chip {
  font-family: var(--font-pixel);
  font-size: clamp(8px, 2.1vw, 11px);
  line-height: 1.6;
  text-transform: uppercase;
  background: rgba(10, 8, 33, .78);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 12px;
  white-space: nowrap;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, .55);
}

.hud-chip b { color: var(--yellow); text-shadow: 0 0 8px rgba(255, 243, 92, .6); }

#hud-lives { border-color: rgba(255, 46, 196, .5); letter-spacing: 2px; }

#hud-word {
  background: rgba(10, 8, 33, .82);
  border: 1px solid rgba(255, 46, 196, .55);
  box-shadow: 0 0 0 1px rgba(255,46,196,.25), 0 0 34px rgba(255, 46, 196, .3);
  clip-path: var(--cut);
  padding: 12px 24px 14px;
  text-align: center;
  max-width: min(560px, 94vw);
}

.hud-word-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: .14em;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 229, 255, .6);
  margin-bottom: 9px;
}

.hud-word-text {
  display: block;
  font-family: var(--font-pixel);
  font-size: clamp(15px, 4.6vw, 30px);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 12px rgba(255, 46, 196, .75), 0 0 30px rgba(255, 46, 196, .4);
  word-break: break-word;
}

/* Flash de acierto / error */
#feedback {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
#feedback.ok  { background: radial-gradient(circle at 50% 60%, rgba(0, 229, 255, .42), transparent 62%); opacity: 1; }
#feedback.bad { background: radial-gradient(circle at 50% 60%, rgba(255, 46, 196, .5), transparent 62%); opacity: 1; }

/* ============ Pantallas ============ */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  /* Centrado con margin:auto en el hijo, NO con align-items:center:
     dentro de un iframe bajo el panel puede ser más alto que el marco,
     y align-items:center recorta el borde superior sin poder scrollear. */
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;   /* el menú tiene que poder scrollearse con el dedo */
  z-index: 10;
  /* Fondo CRT: rejilla + brillos, idéntico al de la página de juegos. */
  background:
    linear-gradient(rgba(0,229,255,.07) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, rgba(255,46,196,.06) 1px, transparent 1px) 0 0 / 42px 100%,
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255,46,196,.18), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(0,229,255,.16), transparent 60%),
    rgba(5, 4, 20, .94);
}

.panel {
  margin: auto;
  width: min(600px, 100%);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  clip-path: var(--cut);
  padding: clamp(20px, 5vw, 34px);
  text-align: center;
  box-shadow: 0 0 60px rgba(255, 46, 196, .22), 0 30px 70px rgba(0, 0, 0, .5);
}

.panel h1 {
  font-family: var(--font-pixel);
  font-size: clamp(15px, 5vw, 30px);
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 12px rgba(255, 46, 196, .7), 0 0 30px rgba(255, 46, 196, .38);
}

.panel h2 {
  font-family: var(--font-pixel);
  font-size: clamp(8px, 2.2vw, 10px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 229, 255, .6);
  margin: 26px 0 14px;
}

.tagline { color: var(--ink-soft); margin-top: 14px; font-size: 1.2rem; }
.hint    { margin-top: 16px; font-size: 1.05rem; color: var(--ink-mute); }

/* ---- Selector de niveles ---- */

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
  gap: 9px;
  text-align: left;
}

.level-card {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  padding: 11px 12px 12px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: box-shadow .12s ease, transform .12s ease, background .12s ease;
}

.level-card:hover:not(.locked) {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 34px rgba(0, 229, 255, .38);
}

.level-card.selected {
  box-shadow: 0 0 0 1px var(--magenta), 0 0 34px rgba(255, 46, 196, .5);
  background: #241a52;
}

.level-card.locked { opacity: .34; cursor: not-allowed; }

.level-card .lv-num {
  font-family: var(--font-pixel);
  font-size: 15px;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(255, 46, 196, .7);
  line-height: 1;
}

.level-card .lv-cefr {
  display: block;
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: .08em;
  color: var(--cyan);
  margin: 8px 0 6px;
}

.level-card .lv-cat  { display: block; font-size: 1rem; line-height: 1.2; color: var(--ink-soft); }
.level-card .lv-best { display: block; font-size: .92rem; color: var(--yellow); margin-top: 6px; }
.level-card .lv-lock { position: absolute; top: 9px; right: 10px; font-size: 12px; }

/* ---- Botones estilo cabinet ---- */

.btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 15px 18px;
  border: 0;
  border-radius: 5px;
  font-family: var(--font-pixel);
  font-size: clamp(9px, 2.6vw, 12px);
  line-height: 1.6;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--magenta);
  color: #fff0fb;
  box-shadow: 0 0 0 2px var(--magenta-deep), 0 0 22px rgba(255, 46, 196, .55);
}
.btn-primary:hover {
  background: var(--magenta-soft);
  box-shadow: 0 0 0 2px var(--magenta-deep), 0 0 36px rgba(255, 46, 196, .85);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--cyan); background: rgba(0, 229, 255, .08); }

/* ---- Estadísticas de fin de partida ---- */

.stats { display: flex; gap: 9px; margin: 24px 0 6px; }

.stat {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  padding: 14px 5px;
}
.stat span {
  display: block;
  font-family: var(--font-pixel);
  font-size: clamp(13px, 4vw, 20px);
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(255, 243, 92, .55);
}
.stat small {
  display: block;
  font-family: var(--font-pixel);
  font-size: 6.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 9px;
}

/* ---- Repaso de errores ---- */

#over-review { margin-top: 18px; text-align: left; }
#over-review h3 {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--magenta);
  text-shadow: 0 0 10px rgba(255, 46, 196, .55);
  margin-bottom: 10px;
}
.review-item {
  background: rgba(255, 46, 196, .1);
  border-left: 3px solid var(--magenta);
  padding: 7px 11px;
  margin-bottom: 6px;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.review-item b { color: var(--yellow); }

/* Marcos bajos (el iframe 3/2 de la web, o móvil en horizontal).
   En el HUD el problema es distinto al del menú: la fila de puntaje cae
   justo a la altura donde emergen las puertas y tapa las palabras, así
   que se va abajo del todo. */
/* Teléfono en vertical: con 2 columnas los 10 niveles no caben y hay que
   scrollear para llegar a Jugar. A 3 columnas entra todo de una vez. */
@media (max-width: 460px) {
  .level-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .level-card { padding: 8px 6px 9px; text-align: center; }
  .level-card .lv-num  { font-size: 13px; }
  .level-card .lv-cefr { font-size: 6.5px; margin: 6px 0 5px; }
  .level-card .lv-cat  { font-size: .84rem; line-height: 1.15; }
  .level-card .lv-best { font-size: .8rem; margin-top: 4px; }
  .level-card .lv-lock { top: 5px; right: 6px; font-size: 10px; }
  .panel h1 { font-size: clamp(14px, 5.6vw, 22px); }
  .tagline  { font-size: 1.05rem; margin-top: 10px; }
  .panel h2 { margin: 18px 0 10px; }
}

/* Marcos muy bajos: embebido en la web, el iframe en un móvil mide unos
   436px de alto. Ahí no cabe nada por mucho que se encojan las tarjetas,
   así que la rejilla se vuelve scrollable y el botón Jugar queda anclado
   debajo, siempre visible. */
@media (max-height: 560px) {
  .level-grid {
    max-height: 42vh;
    overflow-y: auto;
    touch-action: pan-y;
    padding-right: 3px;
  }
  #over-review { max-height: 24vh; overflow-y: auto; touch-action: pan-y; }
  .panel h2 { margin: 10px 0 8px; }
}

@media (max-height: 720px) {
  #hud-word { padding: 7px 18px 9px; }
  .hud-word-label { font-size: 7px; margin-bottom: 6px; }
  .hud-word-text { font-size: clamp(13px, 3.4vw, 22px); }
  .hud-stats {
    position: absolute;
    left: 0; right: 0;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
  }
}

/* Marcos bajos: el menú tiene que caber entero, sin scroll interno, o el
   botón Jugar queda fuera de vista dentro del iframe. */
@media (max-height: 720px) {
  .panel { padding: 16px 18px 18px; }
  .panel h1 { font-size: clamp(13px, 3.4vw, 20px); }
  .panel h2 { margin: 14px 0 9px; }
  .tagline, .hint { display: none; }
  .btn { padding: 11px; margin-top: 8px; }
  .stats { margin: 14px 0 4px; }
  .level-grid { gap: 7px; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .level-card { padding: 8px 9px 9px; }
  .level-card .lv-num  { font-size: 13px; }
  .level-card .lv-cefr { margin: 6px 0 4px; }
  .level-card .lv-cat  { font-size: .92rem; }
  #over-review { margin-top: 12px; }
  .review-item { padding: 5px 9px; margin-bottom: 4px; }
}