/* ═══════════════════════════════════════════════════════════════
   PlayICFES · La piel del JUEGO (juego.css)
   Solo la carga student/play.php. Convierte la pantalla de juego al
   modo arcade nocturno de la portada: noche + neón + 4 tipografías.
   Las demás páginas del aula (panel, niveles, historial) no cambian.

   Reglas de la casa: animaciones solo de transform/opacity (nada que
   repinte por cuadro) y todo se degrada con elegancia sin JS.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ LOS DOS MUNDOS ══════════════════════════════════════════
   El juego arranca SIEMPRE en Modo Día (claro) y el estudiante
   enciende la noche con el interruptor de la esquina. Los mismos
   tokens cambian de valor; ni una regla de abajo se entera. */
body.modo-juego {
  /* MODO DÍA — el mundo alumbrado (por defecto) */
  --noche:    #f4f7fd;
  --noche-2:  #ffffff;
  --carta:    #ffffff;
  --neon:     #0a9e52;
  --neon-osc: #067a3e;
  --sol:      #b8860b;
  --coral:    #d92d43;
  --cielo:    #1c6fd0;
  --tiza:     #0c1222;
  --bruma:    #5b6884;
  --linea:    rgba(12, 18, 34, .14);
  --f-display: 'Space Grotesk', 'Baloo 2', sans-serif;
  --f-hud:     'JetBrains Mono', monospace;
  --f-mano:    'Caveat', cursive;

  color: var(--tiza);
  background:
    radial-gradient(520px 340px at 88% 4%, rgba(10,158,82,.07), transparent 70%),
    radial-gradient(420px 300px at 4% 60%, rgba(28,111,208,.06), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(12,18,34,.04) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(12,18,34,.04) 39px 40px),
    var(--noche);
  transition: background-color .45s ease, color .45s ease;
}

/* MODO NOCHE — la identidad arcade original, a un interruptor */
body.modo-juego.tema-noche {
  --noche:    #070e24;
  --noche-2:  #0d1735;
  --carta:    #111d40;
  --neon:     #1fe374;
  --neon-osc: #12b95c;
  --sol:      #ffd166;
  --coral:    #ff5d6c;
  --cielo:    #4da3ff;
  --tiza:     #eef2fb;
  --bruma:    #93a0c2;
  --linea:    rgba(147, 160, 194, .18);
  background:
    radial-gradient(520px 340px at 88% 4%, rgba(31,227,116,.10), transparent 70%),
    radial-gradient(420px 300px at 4% 60%, rgba(77,163,255,.08), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(147,160,194,.045) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(147,160,194,.045) 39px 40px),
    var(--noche);
}

/* En Modo Día las cartas necesitan sombra en vez de brillo. */
body.modo-juego:not(.tema-noche) .question-card,
body.modo-juego:not(.tema-noche) .quiz-topbar,
body.modo-juego:not(.tema-noche) .level-summary {
  box-shadow: 0 2px 4px rgba(12,18,34,.04), 0 18px 40px -22px rgba(12,18,34,.28);
}
body.modo-juego:not(.tema-noche) .topbar { background: #fff; border-bottom: 1px solid var(--linea); }
body.modo-juego:not(.tema-noche) .arena { background: linear-gradient(180deg, #fbfdff, #eef3fb); }
body.modo-juego:not(.tema-noche) .exp-nodo.bloqueado { opacity: .55; }
body.modo-juego:not(.tema-noche) #jg-luz-mundo { mix-blend-mode: multiply; }
body.modo-juego:not(.tema-noche) .jg-rango-overlay,
body.modo-juego:not(.tema-noche) .jg-oscuridad,
body.modo-juego:not(.tema-noche) .jg-respira { background: rgba(244,247,253,.96); }
body.modo-juego:not(.tema-noche) .screen-lock-overlay { background: rgba(244,247,253,.97); }

/* ── El interruptor Día/Noche, esquina inferior izquierda ─────── */
.tema-switch {
  position: fixed; left: 18px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--carta, #fff); border: 1px solid var(--linea, rgba(12,18,34,.14));
  color: var(--tiza, #0c1222);
  border-radius: 999px; padding: 7px 14px 7px 8px; cursor: pointer;
  font: 700 .78rem/1 var(--f-hud, ui-monospace, monospace); letter-spacing: .08em;
  box-shadow: 0 4px 10px rgba(12,18,34,.10), 0 14px 30px -14px rgba(12,18,34,.35);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.tema-switch:hover { transform: translateY(-2px); }
.tema-switch:focus-visible { outline: 2px solid var(--neon, #0a9e52); outline-offset: 3px; }
.tema-switch .riel {
  width: 38px; height: 22px; border-radius: 999px; position: relative; flex: none;
  background: rgba(12,18,34,.14); transition: background .3s;
}
.tema-switch .bolita {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #b8860b; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
body.tema-noche .tema-switch .riel { background: rgba(31,227,116,.25); }
body.tema-noche .tema-switch .bolita { transform: translateX(16px); background: #1fe374; color: #04240f; }
.tema-switch .bolita svg { width: 10px; height: 10px; display: block; }
@media (max-width: 620px) {
  .tema-switch { left: 12px; bottom: 14px; padding: 6px 12px 6px 6px; font-size: .7rem; }
  .tema-switch .etq { display: none; }
}

/* La barra del sitio se viste de noche mientras se juega. */
body.modo-juego .topbar { background: var(--noche-2); border-bottom: 1px solid var(--linea); box-shadow: none; }
body.modo-juego .topbar a, body.modo-juego .topbar .brand-name, body.modo-juego .nav-user-name { color: var(--tiza); }
body.modo-juego .main-nav a { color: var(--bruma); }
body.modo-juego .main-nav a:hover { color: var(--neon); background: rgba(31,227,116,.08); }
body.modo-juego .brand-badge { background: rgba(31,227,116,.12); }

/* ── HUD superior del juego ─────────────────────────────────────── */
body.modo-juego .quiz-topbar {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 12px 16px;
  gap: 12px;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.6);
}
body.modo-juego .area-chip {
  background: rgba(31,227,116,.08);
  border: 1px solid var(--chip-color, var(--neon));
  color: var(--tiza);
  font-family: var(--f-hud);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.modo-juego .progress-bar { background: rgba(147,160,194,.15); height: 10px; }
body.modo-juego .progress-bar-fill {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--neon-osc), var(--neon));
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
body.modo-juego .progress-bar-fill::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: jg-destello 2.4s ease-in-out infinite;
}
@keyframes jg-destello {
  0%, 35% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(320%); }
}
body.modo-juego .quiz-score-pill,
body.modo-juego .quiz-timer-pill {
  background: var(--noche-2);
  border: 1px solid var(--linea);
  color: var(--neon);
  font-family: var(--f-hud);
  font-weight: 800;
  display: inline-flex; align-items: center; gap: 6px;
}
body.modo-juego .quiz-score-pill svg { display: block; }
body.modo-juego .quiz-score-pill.pop { animation: jg-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes jg-pop { 40% { transform: scale(1.18); } }
body.modo-juego .quiz-timer-pill { color: var(--tiza); }
body.modo-juego .quiz-timer-pill.warn { color: var(--sol); border-color: rgba(255,209,102,.5); }
body.modo-juego .quiz-timer-pill.danger { color: var(--coral); border-color: rgba(255,93,108,.6); animation: jg-late 1s ease-in-out infinite; }
@keyframes jg-late { 50% { transform: scale(1.07); } }

/* La racha: llama + multiplicador. Aparece desde ×2. */
body.modo-juego .racha-pill {
  background: var(--noche-2);
  border: 1px solid rgba(255,93,108,.45);
  color: var(--sol);
  font-family: var(--f-hud);
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 12px;
  display: none;
  align-items: center; gap: 6px;
  font-size: .85rem;
}
body.modo-juego .racha-pill.viva { display: inline-flex; }
body.modo-juego .racha-pill.pop { animation: jg-pop .5s cubic-bezier(.34,1.56,.64,1); }
body.modo-juego .racha-pill .llama-j { display: inline-flex; animation: jg-llama 1.6s ease-in-out infinite; transform-origin: bottom center; color: var(--coral); }
@keyframes jg-llama { 50% { transform: scale(1.2) rotate(-6deg); } }

body.modo-juego .approval-pill {
  background: var(--carta); border: 1px solid var(--linea); color: var(--bruma);
  font-family: var(--f-hud); font-size: .78rem;
}
body.modo-juego .approval-pill.passing { border-color: rgba(31,227,116,.5); color: var(--neon); }
body.modo-juego .approval-pill.failing { border-color: rgba(255,209,102,.5); color: var(--sol); }

/* ── La carta del juego ─────────────────────────────────────────── */
body.modo-juego .question-card {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: 24px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.65), 0 0 44px -14px rgba(31,227,116,.14);
  color: var(--tiza);
}
body.modo-juego .question-passage {
  background: var(--noche-2); border: 1px solid var(--linea); border-left: 3px solid var(--cielo);
  color: var(--bruma); border-radius: 14px;
}
body.modo-juego .question-statement {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  color: var(--tiza);
  animation: jg-entra .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes jg-entra { from { opacity: 0; transform: translateY(14px); } }

/* Opciones: entran en cascada, laten al pasar, celebran o tiemblan. */
body.modo-juego .option-btn {
  background: var(--noche-2);
  border: 1.5px solid var(--linea);
  color: var(--tiza);
  border-radius: 16px;
  transition: border-color .2s, background .2s, transform .18s cubic-bezier(.22,1,.36,1);
  opacity: 0; transform: translateY(12px);
  animation: jg-op .45s cubic-bezier(.22,1,.36,1) forwards;
}
body.modo-juego .option-btn:nth-child(1) { animation-delay: .08s; }
body.modo-juego .option-btn:nth-child(2) { animation-delay: .18s; }
body.modo-juego .option-btn:nth-child(3) { animation-delay: .28s; }
body.modo-juego .option-btn:nth-child(4) { animation-delay: .38s; }
body.modo-juego .option-btn:nth-child(5) { animation-delay: .48s; }
@keyframes jg-op { to { opacity: 1; transform: translateY(0); } }
body.modo-juego .option-btn:not(:disabled):hover {
  border-color: var(--neon); background: rgba(31,227,116,.07); transform: translateY(-2px);
}
body.modo-juego .option-btn:not(:disabled):active { transform: scale(.98); }
body.modo-juego .option-label {
  background: var(--carta); border: 1px solid var(--linea); color: var(--bruma);
  font-family: var(--f-hud); font-weight: 800;
}
/* OJO con el `opacity: 1` de estas dos reglas: NO es decorativo.
   La opción nace en `opacity: 0` y solo la deja visible el relleno
   (`forwards`) de la animación de entrada. Al responder, game.js le pone
   la clase `correct`/`incorrect`, eso CAMBIA la animación — y con ella se
   pierde el relleno de la anterior, así que la opción volvía a
   `opacity: 0`: la respuesta correcta y la que el estudiante acababa de
   marcar desaparecían justo cuando hay que mirarlas. */
body.modo-juego .option-btn.correct {
  border-color: var(--neon); background: rgba(31,227,116,.13); color: var(--tiza);
  opacity: 1; transform: none;
  animation: jg-celebra .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes jg-celebra { 35% { transform: scale(1.035); } }
body.modo-juego .option-btn.correct .option-label { background: var(--neon); border-color: var(--neon); color: #04240f; }
body.modo-juego .option-btn.incorrect {
  border-color: var(--coral); background: rgba(255,93,108,.12); color: #ffc4ca;
  opacity: 1; transform: none;
  animation: jg-tiembla .45s;
}
@keyframes jg-tiembla { 20% { transform: translateX(-6px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }
body.modo-juego .option-btn.incorrect .option-label { background: var(--coral); border-color: var(--coral); color: #fff; }

/* Los «+50 pts» vuelan de la respuesta hacia el marcador. */
.pts-vuelo {
  position: fixed; z-index: 60; pointer-events: none;
  font-family: var(--f-hud); font-weight: 800; font-size: 1.15rem; color: var(--neon);
  text-shadow: 0 0 14px rgba(31,227,116,.6);
  animation: jg-vuelo 1s cubic-bezier(.22,1,.36,1) forwards;
}
.pts-vuelo.negativo { color: var(--coral); text-shadow: 0 0 14px rgba(255,93,108,.5); }
@keyframes jg-vuelo {
  0%   { opacity: 0; transform: translateY(10px) scale(.7); }
  20%  { opacity: 1; transform: translateY(0) scale(1.15); }
  100% { opacity: 0; transform: translateY(-90px) scale(.9); }
}

/* ── La retroalimentación: LA CLAVE + EL PORQUÉ ─────────────────── */
body.modo-juego .feedback-banner {
  border-radius: 20px; border: 1px solid var(--linea);
  background: var(--noche-2);
  animation: jg-entra .5s cubic-bezier(.22,1,.36,1) both;
}
body.modo-juego .feedback-banner.correct { border-color: rgba(31,227,116,.45); box-shadow: 0 0 44px -14px rgba(31,227,116,.3); }
body.modo-juego .feedback-banner.incorrect { border-color: rgba(255,209,102,.4); }
body.modo-juego .feedback-title {
  font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.modo-juego .feedback-title.correct { color: var(--neon); }
body.modo-juego .feedback-title.incorrect { color: var(--sol); }
body.modo-juego .feedback-sub { font-family: var(--f-mano); font-size: 1.25rem; color: var(--bruma); transform: rotate(-1deg); margin: 2px 0 10px; }
body.modo-juego .feedback-points {
  font-family: var(--f-hud); font-weight: 800; font-size: 1.15rem; color: var(--neon);
  display: inline-block; background: rgba(31,227,116,.1); border: 1px solid rgba(31,227,116,.4);
  border-radius: 999px; padding: 4px 14px; margin: 4px 0 10px;
}
body.modo-juego .feedback-banner.incorrect .feedback-points { color: var(--coral); background: rgba(255,93,108,.08); border-color: rgba(255,93,108,.35); }

.jg-clave {
  border: 1.5px solid var(--neon); border-radius: 14px; background: rgba(31,227,116,.08);
  padding: 12px 14px; margin: 8px 0 12px; color: var(--tiza);
}
.jg-clave .jg-eti { font-family: var(--f-hud); font-size: .68rem; font-weight: 800; letter-spacing: .16em; color: var(--neon); display: block; margin-bottom: 4px; }
.jg-porque {
  border: 1px solid var(--linea); border-radius: 14px; background: var(--carta);
  padding: 12px 14px; color: var(--bruma); line-height: 1.65;
}
.jg-porque .jg-eti { font-family: var(--f-hud); font-size: .68rem; font-weight: 800; letter-spacing: .16em; color: var(--cielo); display: block; margin-bottom: 6px; }
.jg-porque b, .jg-porque strong { color: var(--tiza); }

body.modo-juego .qa-speak-btn {
  background: var(--carta); border: 1px solid var(--linea); color: var(--tiza);
  border-radius: 10px; display: inline-flex; align-items: center; gap: 6px;
}
body.modo-juego .qa-speak-btn:hover { border-color: var(--neon); color: var(--neon); }
body.modo-juego .qa-speak-btn.hablando { border-color: var(--neon); color: var(--neon); animation: jg-late 1.4s ease-in-out infinite; }

body.modo-juego .break-btn-row label { color: var(--bruma); }
body.modo-juego #qa-feedback .btn.btn-primary,
body.modo-juego .exp-poder .btn.btn-primary,
body.modo-juego .level-summary .btn.btn-primary {
  background: linear-gradient(135deg, var(--neon) 0%, var(--neon-osc) 100%);
  color: #04240f; font-weight: 800; border: none;
  box-shadow: 0 6px 20px -6px rgba(31,227,116,.55);
}
body.modo-juego .btn.btn-ghost { color: var(--bruma); border-color: var(--linea); background: transparent; }
body.modo-juego .btn.btn-ghost:hover { color: var(--tiza); border-color: var(--bruma); }

/* ── El mapa del nivel ──────────────────────────────────────────── */
body.modo-juego .qmap-intro { color: var(--bruma); font-family: var(--f-mano); font-size: 1.3rem; transform: rotate(-.5deg); }
body.modo-juego .qmap-area-card {
  background: var(--noche-2); border: 1px solid var(--linea);
  border-left: 3px solid var(--area-color, var(--neon)); border-radius: 16px;
}
body.modo-juego .qmap-area-title { color: var(--tiza); font-family: var(--f-display); font-weight: 600; }
body.modo-juego .qmap-node {
  background: var(--carta); border: 1.5px solid var(--linea); color: var(--bruma);
  font-family: var(--f-hud); font-weight: 800;
  transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .2s;
  opacity: 0; animation: jg-nodo .4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes jg-nodo { from { transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
body.modo-juego .qmap-node:hover { transform: translateY(-3px) scale(1.06); border-color: var(--neon); color: var(--tiza); }
body.modo-juego .qmap-node.pending { border-style: dashed; }
body.modo-juego .qmap-node.correct { background: rgba(31,227,116,.14); border-color: var(--neon); color: var(--neon); }
body.modo-juego .qmap-node.incorrect { background: rgba(255,93,108,.12); border-color: var(--coral); color: var(--coral); }

body.modo-juego .review-badge.correct { background: rgba(31,227,116,.1); color: var(--neon); border: 1px solid rgba(31,227,116,.4); }
body.modo-juego .review-badge.incorrect { background: rgba(255,93,108,.1); color: var(--coral); border: 1px solid rgba(255,93,108,.4); }

/* ── Resumen del nivel ──────────────────────────────────────────── */
body.modo-juego .level-summary {
  background: var(--carta); border: 1px solid var(--linea); border-radius: 24px; color: var(--tiza);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.65), 0 0 44px -14px rgba(31,227,116,.16);
  animation: jg-entra .5s cubic-bezier(.22,1,.36,1) both;
}
body.modo-juego .level-summary h2 { font-family: var(--f-display); letter-spacing: -0.01em; }
body.modo-juego .big-score {
  font-family: var(--f-hud); font-weight: 800; color: var(--neon);
  text-shadow: 0 0 22px rgba(31,227,116,.45);
}
body.modo-juego .stars-row { display: flex; justify-content: center; gap: 8px; }
body.modo-juego .stars-row .estrella { color: var(--sol); opacity: 0; transform: scale(0); animation: jg-estrella .5s cubic-bezier(.34,1.56,.64,1) forwards; }
body.modo-juego .stars-row .estrella.apagada { color: rgba(147,160,194,.35); }
body.modo-juego .stars-row .estrella:nth-child(1) { animation-delay: .25s; }
body.modo-juego .stars-row .estrella:nth-child(2) { animation-delay: .55s; }
body.modo-juego .stars-row .estrella:nth-child(3) { animation-delay: .85s; }
@keyframes jg-estrella { to { opacity: 1; transform: scale(1); } }

/* Pantallas de descanso y bloqueo, en clave nocturna. */
body.modo-juego .screen-lock-overlay { background: rgba(4, 8, 22, .96); color: var(--tiza); font-family: var(--f-display); }
body.modo-juego .watermark-layer span { color: rgba(147,160,194,.06); }

/* ── LA EXPEDICIÓN: el camino de aventura ───────────────────────── */
body.modo-juego .exp-cabecera { text-align: center; margin-bottom: 18px; }
body.modo-juego .exp-titulo {
  font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: .04em;
}
body.modo-juego .exp-titulo span { color: var(--neon); text-shadow: 0 0 18px rgba(31,227,116,.5); }
body.modo-juego .exp-sub { font-family: var(--f-mano); font-size: 1.25rem; color: var(--bruma); transform: rotate(-.5deg); }

/* El sendero: una línea punteada vertical y paradas en zigzag. */
body.modo-juego .exp-camino {
  position: relative; max-width: 420px; margin: 0 auto; padding: 6px 0 20px;
}
body.modo-juego .exp-camino::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  border-left: 3px dashed rgba(147,160,194,.25);
}
body.modo-juego .exp-zona {
  /* El margen inferior grande deja sitio a Saber y su burbuja cuando la
     parada actual es la primera de la zona: sin él se montan encima. */
  position: relative; z-index: 1; text-align: center; margin: 26px auto 84px;
  background: var(--noche-2); border: 1px solid var(--zona-color, var(--neon));
  color: var(--tiza); border-radius: 999px; padding: 8px 18px; width: max-content; max-width: 92%;
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  box-shadow: 0 0 24px -8px var(--zona-color, var(--neon));
}
body.modo-juego .exp-zona-num {
  font-family: var(--f-hud); font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  color: var(--zona-color, var(--neon)); margin-right: 6px;
}
body.modo-juego .exp-paso { position: relative; z-index: 1; display: flex; margin: 14px 0; }
body.modo-juego .exp-nodo {
  position: relative;
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--linea); background: var(--carta); color: var(--bruma);
  font-family: var(--f-hud); font-weight: 800; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .2s;
  opacity: 0; animation: jg-nodo .4s cubic-bezier(.22,1,.36,1) forwards;
}
body.modo-juego .exp-nodo.izq { margin-left: 18%; }
body.modo-juego .exp-nodo.der { margin-left: auto; margin-right: 18%; }
body.modo-juego .exp-nodo:not(:disabled):hover { transform: translateY(-3px) scale(1.06); border-color: var(--neon); color: var(--tiza); }
body.modo-juego .exp-nodo.bien { border-color: var(--neon); background: rgba(31,227,116,.14); color: var(--neon); }
body.modo-juego .exp-nodo.mal { border-color: var(--coral); background: rgba(255,93,108,.12); color: var(--coral); }
body.modo-juego .exp-nodo.bloqueado { opacity: 0; animation: jg-nodo .4s cubic-bezier(.22,1,.36,1) forwards; color: rgba(147,160,194,.5); cursor: default; }

/* La parada ACTUAL: más grande, latiendo, con Saber parado encima
   y el rótulo ¡JUGAR! — imposible no saber dónde vas. */
body.modo-juego .exp-nodo.actual {
  width: 76px; height: 76px;
  border-color: var(--neon); background: rgba(31,227,116,.12); color: var(--neon);
  box-shadow: 0 0 34px -6px rgba(31,227,116,.55);
  animation: jg-nodo .4s cubic-bezier(.22,1,.36,1) forwards, jg-late 1.8s ease-in-out .5s infinite;
}
body.modo-juego .exp-saber {
  position: absolute; top: -52px; left: 50%; transform: translateX(-50%);
  animation: jg-saber 2.6s ease-in-out infinite; pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
@keyframes jg-saber { 50% { transform: translateX(-50%) translateY(-7px); } }
body.modo-juego .exp-jugar {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  font-family: var(--f-mano); font-weight: 700; font-size: 1.15rem; color: var(--sol); white-space: nowrap;
}

/* ── El campamento del PODER ────────────────────────────────────── */
body.modo-juego .exp-poder {
  position: relative; text-align: center; padding: 34px 22px 28px; overflow: hidden;
  animation: jg-entra .5s cubic-bezier(.22,1,.36,1) both;
}
body.modo-juego .exp-poder-halo {
  position: absolute; inset: -20% -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 45% at 50% 30%, rgba(255,209,102,.16), transparent 70%);
  animation: pi-respira 4s ease-in-out infinite;
}
@keyframes pi-respira { 50% { opacity: .5; } }
body.modo-juego .exp-poder > *:not(.exp-poder-halo) { position: relative; z-index: 1; }
body.modo-juego .exp-poder-eti {
  display: inline-block; font-family: var(--f-hud); font-size: .7rem; font-weight: 800;
  letter-spacing: .16em; color: var(--sol);
  border: 1px solid rgba(255,209,102,.45); background: rgba(255,209,102,.08);
  border-radius: 999px; padding: 6px 16px; margin-bottom: 16px;
}
body.modo-juego .exp-poder-icono {
  width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--sol); background: rgba(255,209,102,.1); border: 2px solid rgba(255,209,102,.5);
  box-shadow: 0 0 40px -8px rgba(255,209,102,.6);
  animation: jg-poder-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes jg-poder-pop { from { transform: scale(0) rotate(-20deg); } }
body.modo-juego .exp-poder-titulo { font-family: var(--f-display); font-size: 1.45rem; margin: 6px 0 10px; letter-spacing: -0.01em; }
body.modo-juego .exp-poder-texto { color: var(--bruma); max-width: 460px; margin: 0 auto 8px; line-height: 1.65; }
body.modo-juego .exp-poder-mano { font-family: var(--f-mano); font-size: 1.25rem; color: var(--sol); transform: rotate(-1.5deg); margin-bottom: 18px; }

/* El contador de poderes en el HUD. */
body.modo-juego .poderes-pill {
  background: var(--noche-2); border: 1px solid rgba(255,209,102,.45); color: var(--sol);
  font-family: var(--f-hud); font-weight: 800; border-radius: 999px; padding: 6px 12px;
  display: none; align-items: center; gap: 5px; font-size: .85rem;
}

/* ── EL MOTOR DE MOTIVACIÓN ─────────────────────────────────────── */
/* Rango del explorador y gemas en el HUD. */
body.modo-juego .rango-pill {
  background: var(--noche-2); border: 1px solid rgba(77,163,255,.45); color: var(--cielo);
  font-family: var(--f-hud); font-weight: 800; border-radius: 999px; padding: 6px 12px;
  display: none; align-items: center; gap: 6px; font-size: .72rem; letter-spacing: .06em;
}
body.modo-juego .rango-pill i { font-style: normal; color: var(--bruma); font-weight: 700; }
body.modo-juego .gemas-pill {
  background: var(--noche-2); border: 1px solid rgba(77,163,255,.45); color: #7cc0ff;
  font-family: var(--f-hud); font-weight: 800; border-radius: 999px; padding: 6px 12px;
  display: none; align-items: center; gap: 5px; font-size: .85rem;
}
body.modo-juego .gemas-pill.pop { animation: jg-pop .5s cubic-bezier(.34,1.56,.64,1); }

/* El cofre asomado en la parada del camino. */
body.modo-juego .exp-cofre {
  position: absolute; top: -10px; right: -10px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,209,102,.15); border: 1.5px solid var(--sol); color: var(--sol);
  animation: jg-cofre-late 2s ease-in-out infinite;
}
@keyframes jg-cofre-late { 50% { transform: scale(1.15) rotate(6deg); } }
body.modo-juego .jg-cofre-premio {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--sol); background: rgba(255,209,102,.1); color: var(--sol);
  border-radius: 12px; padding: 8px 14px; margin: 4px 0 10px;
  font-family: var(--f-hud); font-size: .82rem; font-weight: 800;
  animation: jg-pop .6s cubic-bezier(.34,1.56,.64,1) .4s both;
}

/* La burbuja de Saber en el camino. */
body.modo-juego .exp-burbuja {
  position: absolute; top: -66px; left: 58px;
  background: var(--noche-2); border: 1px solid var(--linea); color: var(--tiza);
  font-family: var(--f-mano); font-size: 1.02rem; white-space: nowrap;
  border-radius: 14px 14px 14px 3px; padding: 5px 12px; pointer-events: none;
  animation: jg-nodo .5s cubic-bezier(.22,1,.36,1) .4s both;
}
body.modo-juego .exp-nodo.der .exp-burbuja { left: auto; right: 58px; border-radius: 14px 14px 3px 14px; }

/* Los avisos de LOGRO (toasts). */
#jg-toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: min(360px, 92vw); }
.jg-toast {
  display: flex; align-items: center; gap: 12px;
  background: #0d1735; border: 1px solid rgba(255,209,102,.5); color: #eef2fb;
  border-radius: 14px; padding: 10px 16px;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.7), 0 0 30px -10px rgba(255,209,102,.4);
  font-size: .9rem; line-height: 1.35;
  animation: jg-toast-entra .45s cubic-bezier(.34,1.56,.64,1) both;
  transition: opacity .4s, transform .4s;
}
.jg-toast b { color: #ffd166; font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .1em; display: block; }
.jg-toast i { font-style: normal; color: #93a0c2; font-size: .8rem; display: block; }
.jg-toast-medalla { color: #ffd166; display: inline-flex; flex: 0 0 auto; }
.jg-toast.fuera { opacity: 0; transform: translateY(-14px); }
@keyframes jg-toast-entra { from { opacity: 0; transform: translateY(-18px) scale(.9); } }

/* La cortina de ¡NUEVO RANGO! */
.jg-rango-overlay {
  position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,22,.85); transition: opacity .5s; pointer-events: none;
}
.jg-rango-overlay.fuera { opacity: 0; }
.jg-rango-caja { text-align: center; animation: jg-poder-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
.jg-rango-eti { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: .8rem; letter-spacing: .2em; color: #ffd166; }
.jg-rango-nombre {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.8rem, 8vw, 3rem);
  color: #1fe374; text-shadow: 0 0 34px rgba(31,227,116,.6); margin: 8px 0 4px; letter-spacing: .02em;
}
.jg-rango-mano { font-family: 'Caveat', cursive; font-size: 1.4rem; color: #93a0c2; transform: rotate(-1.5deg); }

/* La meta al final del sendero y la zona conquistada. */
body.modo-juego .exp-meta { position: relative; z-index: 1; text-align: center; padding: 18px 0 6px; }
body.modo-juego .exp-meta-circulo {
  width: 74px; height: 74px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--sol); background: rgba(255,209,102,.08); border: 2px dashed rgba(255,209,102,.5);
}
body.modo-juego .exp-meta-texto { display: block; margin-top: 6px; font-family: var(--f-hud); font-size: .7rem; font-weight: 800; letter-spacing: .18em; color: var(--sol); }
body.modo-juego .exp-zona-fin-saber { margin: 4px auto 8px; animation: jg-saber 2.6s ease-in-out infinite; width: max-content; }

/* ── LA ARENA DE COMBATE ────────────────────────────────────────── */
body.modo-juego .arena {
  position: relative;
  background: linear-gradient(180deg, rgba(13,23,53,.9), rgba(7,14,36,.6));
  border: 1px solid var(--linea); border-radius: 18px;
  padding: 16px 14px 12px; margin-bottom: 16px; overflow: hidden;
}
body.modo-juego .arena-jefe { border-color: rgba(255,209,102,.55); box-shadow: 0 0 40px -10px rgba(255,209,102,.4); }
body.modo-juego .arena-jefe-banda {
  position: absolute; top: 12px; right: -34px; transform: rotate(38deg);
  background: var(--sol); color: #3a2b00; font-family: var(--f-hud); font-weight: 800;
  font-size: .66rem; letter-spacing: .12em; padding: 4px 40px;
}
body.modo-juego .arena-monstruo { text-align: center; transition: transform .5s, opacity .5s, filter .5s; }
body.modo-juego .arena-monstruo svg { animation: jg-monstruo 3s ease-in-out infinite; }
@keyframes jg-monstruo { 50% { transform: translateY(-7px) rotate(-2deg); } }
body.modo-juego .arena-monstruo.derrotado { transform: rotate(24deg) translateY(46px) scale(.7); opacity: 0; filter: saturate(.2); }
body.modo-juego .arena-taunt {
  display: inline-block; background: var(--noche-2); border: 1px solid var(--linea);
  color: var(--bruma); font-family: var(--f-mano); font-size: 1.05rem;
  border-radius: 14px 14px 14px 3px; padding: 4px 12px; margin-bottom: 6px;
  animation: jg-nodo .5s cubic-bezier(.22,1,.36,1) .3s both;
}
body.modo-juego .arena-placa {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  background: var(--noche-2); border: 1px solid var(--m-color, var(--linea));
  border-radius: 999px; padding: 5px 14px;
}
body.modo-juego .arena-placa b { font-family: var(--f-display); font-size: .85rem; color: var(--tiza); white-space: nowrap; }
body.modo-juego .arena-hp {
  display: inline-block; width: 90px; height: 8px; border-radius: 999px;
  background: rgba(147,160,194,.2); overflow: hidden;
}
body.modo-juego .arena-hp i { display: block; height: 100%; border-radius: inherit; transition: width .6s cubic-bezier(.22,1,.36,1); }
body.modo-juego .arena-vs { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
body.modo-juego .arena-vs-texto { font-family: var(--f-hud); font-weight: 800; font-size: .8rem; color: var(--coral); letter-spacing: .2em; }
body.modo-juego .arena-jugador { display: inline-flex; align-items: center; gap: 8px; }
body.modo-juego .arena-placa-jugador { border-color: rgba(31,227,116,.5); }
body.modo-juego .arena-placa-jugador i { background: linear-gradient(90deg, var(--neon-osc), var(--neon)); }
body.modo-juego .arena-placa-jugador em { font-style: normal; font-family: var(--f-hud); font-weight: 800; font-size: .78rem; color: var(--neon); }
body.modo-juego .arena-reto-eti {
  font-family: var(--f-hud); font-size: .66rem; font-weight: 800; letter-spacing: .16em;
  color: var(--coral); text-align: center; margin: 2px 0 12px;
}

/* El tajo del golpe: un destello diagonal que cruza la arena. */
body.modo-juego .arena-tajo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.9) 50%, transparent 58%);
  animation: jg-tajo .4s ease-out both;
}
@keyframes jg-tajo {
  from { transform: translateX(-110%) skewX(-12deg); opacity: 1; }
  to   { transform: translateX(110%) skewX(-12deg); opacity: 0; }
}
/* Los números de daño vuelan. */
body.modo-juego .arena-danio {
  position: absolute; top: 34%; left: 50%; pointer-events: none;
  font-family: var(--f-hud); font-weight: 800; font-size: 1.5rem; color: var(--tiza);
  text-shadow: 0 0 16px rgba(255,255,255,.5);
  animation: jg-danio 1s cubic-bezier(.22,1,.36,1) .25s both;
}
body.modo-juego .arena-danio.critico { color: var(--sol); font-size: 1.9rem; text-shadow: 0 0 22px rgba(255,209,102,.8); }
body.modo-juego .arena-danio.recibido { color: var(--coral); text-shadow: 0 0 16px rgba(255,93,108,.7); }
@keyframes jg-danio {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.6); }
  25%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  to   { opacity: 0; transform: translate(-50%, -60px) scale(1); }
}
/* La sacudida al recibir el golpe + destello rojo. */
@keyframes jg-sacudir {
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(4px); }
}
body.jg-sacudida #quiz-app { animation: jg-sacudir .45s; }
body.modo-juego .arena.arena-golpeado::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 80% at 50% 50%, transparent 55%, rgba(255,93,108,.35));
  animation: jg-fundido-salida 1s ease-out both;
}

/* El parte de batalla en el feedback. */
body.modo-juego .jg-bestia {
  border: 1.5px solid rgba(167,139,250,.5); background: rgba(167,139,250,.08);
  border-radius: 14px; padding: 10px 14px; margin: 6px 0 12px;
  color: var(--bruma); font-size: .92rem; line-height: 1.55;
}
body.modo-juego .jg-bestia b { color: var(--tiza); }
body.modo-juego .jg-bestia-eti { display: block; font-family: var(--f-hud); font-size: .64rem; font-weight: 800; letter-spacing: .16em; color: #a78bfa; margin-bottom: 3px; }
body.modo-juego .jg-bestia.escapo { border-color: rgba(255,93,108,.45); background: rgba(255,93,108,.07); }
body.modo-juego .jg-bestia.escapo .jg-bestia-eti { color: var(--coral); }

/* Los ojos agazapados en las paradas bloqueadas. */
body.modo-juego .exp-ojos { display: inline-flex; gap: 7px; }
body.modo-juego .exp-ojos i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--bruma); opacity: .7;
  animation: jg-parpadeo 4s ease-in-out infinite;
}
body.modo-juego .exp-ojos i:nth-child(2) { animation-delay: .12s; }
@keyframes jg-parpadeo { 0%, 88%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.1); } }

/* La pantalla de misión. */
body.modo-juego .exp-mision-monstruos { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
body.modo-juego .exp-mision-monstruos svg { animation: jg-monstruo 3s ease-in-out infinite; }
body.modo-juego .exp-mision-monstruos svg:nth-child(2) { animation-delay: -1s; }
body.modo-juego .exp-mision-monstruos svg:nth-child(3) { animation-delay: -2s; }

/* ── EL APAGÓN DEL SABER: la historia que se ve ─────────────────── */
/* La luz del mundo: un resplandor global cuya intensidad es tu avance.
   Empieza casi apagado; con cada acierto el mundo se aclara de verdad. */
#jg-luz-mundo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255,224,150,.14), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(31,227,116,.10), transparent 70%);
  opacity: .12; transition: opacity 1.2s ease;
}
body.modo-juego #quiz-app { position: relative; z-index: 1; }
/* El medidor de luz se rehízo más abajo, en «EL HUD REDUCIDO», con los
   tokens del tema. La versión vieja que vivía aquí ganaba por
   especificidad (`body.modo-juego .luz-pill` pesa más que `.luz-pill`) y
   se imponía sin que se notara: en Modo Día pintaba el puntaje ICFES
   estimado en amarillo pastel sobre blanco —contraste 1,3:1, invisible—
   y la barrita en un degradado igual de pálido. Se retira; manda la
   definición nueva. */

/* Las zonas del camino viven la historia: tinieblas → ardiendo → luz. */
body.modo-juego .exp-zona.zona-apagada {
  filter: grayscale(.9) brightness(.6);
  border-style: dashed; box-shadow: none;
}
body.modo-juego .zona-tiniebla {
  display: block; font-family: var(--f-hud); font-size: .58rem; font-weight: 800;
  letter-spacing: .2em; color: var(--bruma); opacity: .8; margin-top: 2px;
}
body.modo-juego .exp-zona.zona-ardiendo { box-shadow: 0 0 30px -8px var(--zona-color, var(--neon)); }
body.modo-juego .exp-zona.zona-encendida {
  border-color: #ffe096; color: var(--tiza);
  box-shadow: 0 0 34px -6px rgba(255,224,150,.65);
  display: flex; align-items: center; justify-content: center;
}
body.modo-juego .exp-zona.zona-encendida svg { color: #ffe096; animation: jg-late 2.4s ease-in-out infinite; }

/* Los CRISTALES DE LUZ en la arena. */
body.modo-juego .arena-cristales { display: inline-flex; gap: 4px; }
body.modo-juego .arena-cristales .cristal { color: #7ff0c0; display: inline-flex; filter: drop-shadow(0 0 6px rgba(31,227,116,.5)); transition: opacity .4s, filter .4s, transform .4s; }
body.modo-juego .arena-cristales .cristal.roto { color: var(--bruma); opacity: .25; filter: none; transform: scale(.85) rotate(12deg); }

/* EL CRISTALAZO: tu cristal estalla en el centro de la pantalla. */
.jg-cristalazo {
  position: fixed; inset: 0; z-index: 1002; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.jg-cristal-grande { color: #7ff0c0; filter: drop-shadow(0 0 30px rgba(127,240,192,.9)); animation: jg-cristal-estalla .5s ease-in both; }
.jg-cristal-grande svg { width: 90px; height: 90px; }
@keyframes jg-cristal-estalla {
  0%   { transform: scale(.4); opacity: 0; }
  35%  { transform: scale(1.1); opacity: 1; }
  55%  { transform: scale(1) rotate(-4deg); }
  70%  { transform: scale(1.06) rotate(5deg); opacity: 1; }
  100% { transform: scale(.9); opacity: 0; }
}
.jg-cristalazo .esquirla {
  position: absolute; width: 14px; height: 22px; background: #7ff0c0;
  clip-path: polygon(50% 0, 100% 60%, 55% 100%, 0 55%);
  opacity: 0; animation: jg-esquirla .8s ease-out .35s both;
}
.jg-cristalazo .e1 { --dx: -120px; --dy: -90px; }
.jg-cristalazo .e2 { --dx: 130px; --dy: -70px; }
.jg-cristalazo .e3 { --dx: -90px; --dy: 110px; }
.jg-cristalazo .e4 { --dx: 100px; --dy: 120px; }
.jg-cristalazo .e5 { --dx: 0px; --dy: -140px; }
@keyframes jg-esquirla {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(220deg); }
}
.jg-cristal-texto {
  position: absolute; margin-top: 130px;
  font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: .85rem;
  letter-spacing: .16em; color: #ff8f9a; text-shadow: 0 0 14px rgba(255,93,108,.6);
  animation: jg-danio 1.1s cubic-bezier(.22,1,.36,1) .3s both;
}

/* La penumbra: al fallar, el mundo entero pierde luz un instante. */
body.jg-penumbra #jg-luz-mundo { opacity: .02 !important; }
body.jg-penumbra::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: radial-gradient(90% 90% at 50% 50%, transparent 40%, rgba(2,4,12,.75));
  animation: jg-fundido-salida 1.6s ease-out both;
}

/* LA OSCURIDAD TE ATRAPÓ. */
.jg-oscuridad {
  position: fixed; inset: 0; z-index: 1003;
  background: rgba(2, 4, 12, .96);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s; text-align: center;
}
.jg-oscuridad.fuera { opacity: 0; pointer-events: none; }
.jg-oscuridad-titulo {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 7vw, 2.6rem); color: #a78bfa;
  text-shadow: 0 0 40px rgba(167,139,250,.6); letter-spacing: .04em;
  animation: jg-poder-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.jg-oscuridad-texto { color: #93a0c2; margin-top: 10px; font-size: 1.02rem; }
.jg-oscuridad-mano { font-family: 'Caveat', cursive; font-size: 1.4rem; color: #ffd166; margin-top: 8px; transform: rotate(-1.5deg); }

/* El monstruo festeja tu error: brinca de gusto. */
body.modo-juego .arena-monstruo.festeja svg { animation: jg-festeja .5s ease-in-out 2; }
@keyframes jg-festeja { 40% { transform: translateY(-14px) rotate(6deg) scale(1.08); } }

/* LA SOMBRA: la arena del jefe final se tiñe de púrpura y late. */
body.modo-juego .arena-sombra {
  border-color: rgba(167,139,250,.6);
  background: linear-gradient(180deg, rgba(23,17,48,.95), rgba(7,6,20,.8));
  box-shadow: 0 0 60px -12px rgba(167,139,250,.55);
  animation: jg-sombra-late 3s ease-in-out infinite;
}
@keyframes jg-sombra-late { 50% { box-shadow: 0 0 80px -8px rgba(167,139,250,.75); } }
body.modo-juego .arena-sombra .arena-taunt { border-color: rgba(167,139,250,.5); color: #cabcf5; }

/* El Faro del Saber al final del camino. */
body.modo-juego .exp-meta-mano { display: block; font-family: var(--f-mano); font-size: 1.1rem; color: #a78bfa; transform: rotate(-1.5deg); margin-top: 2px; }

/* ── Accesibilidad: con reduce-motion todo aparece por fundido ──── */
@media (prefers-reduced-motion: reduce) {
  body.modo-juego .option-btn { transform: none; animation-name: jg-fundido; }
  body.modo-juego .question-statement, body.modo-juego .feedback-banner, body.modo-juego .level-summary { animation-name: jg-fundido; }
  body.modo-juego .option-btn.incorrect { animation: none; }
  body.modo-juego .qmap-node { animation-name: jg-fundido; transform: none; }
  body.modo-juego .progress-bar-fill::after { animation: none; }
  body.modo-juego .racha-pill .llama-j, body.modo-juego .quiz-timer-pill.danger { animation: none; }
  .pts-vuelo { animation-name: jg-fundido-salida; }
}
@keyframes jg-fundido { to { opacity: 1; } }
@keyframes jg-fundido-salida { 20% { opacity: 1; } to { opacity: 0; } }


/* ── EL BESTIARIO (códex coleccionable) ─────────────────────────── */
body.modo-juego .codex { padding: 6px 2px 10px; }
body.modo-juego .codex-cab { text-align: center; margin-bottom: 20px; }
body.modo-juego .codex-eti {
  display: inline-block; font-family: var(--f-hud); font-size: .68rem; font-weight: 800;
  letter-spacing: .18em; color: var(--cielo); border: 1px solid var(--cielo);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 10px;
}
body.modo-juego .codex-titulo { font-family: var(--f-display); font-size: 1.4rem; margin: 0 0 4px; }
body.modo-juego .codex-sub { color: var(--bruma); margin: 0; font-size: .95rem; }
body.modo-juego .codex-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px;
}
body.modo-juego .codex-carta {
  background: var(--noche-2); border: 1px solid var(--linea); border-top: 3px solid var(--m, var(--neon));
  border-radius: 16px; padding: 14px 14px 12px; text-align: center;
  animation: jg-nodo .4s cubic-bezier(.22,1,.36,1) both;
}
body.modo-juego .codex-carta b { display: block; font-family: var(--f-display); font-size: .95rem; margin-top: 6px; }
body.modo-juego .codex-area { font-family: var(--f-hud); font-size: .6rem; letter-spacing: .1em; color: var(--bruma); }
body.modo-juego .codex-carta p { color: var(--bruma); font-size: .8rem; line-height: 1.5; margin: 8px 0 6px; }
body.modo-juego .codex-marca {
  font-family: var(--f-hud); font-size: .66rem; font-weight: 800; color: var(--neon);
  background: rgba(31,227,116,.1); border-radius: 999px; padding: 3px 10px; display: inline-block;
}
body.modo-juego .codex-carta.oculta { border-top-color: var(--linea); opacity: .62; }
body.modo-juego .codex-carta.oculta .codex-sprite svg { filter: brightness(0) saturate(0) opacity(.42); }
body.modo-juego:not(.tema-noche) .codex-carta.oculta .codex-sprite svg { filter: grayscale(1) opacity(.3); }
body.modo-juego .codex-pie { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ── REPASO OBLIGATORIO DE ZONA ─────────────────────────────────── */
body.modo-juego .repaso-lista { display: grid; gap: 10px; margin: 6px auto 16px; max-width: 520px; text-align: left; }
body.modo-juego .repaso-item {
  background: var(--noche-2); border: 1px solid var(--linea); border-left: 3px solid var(--m, var(--cielo));
  border-radius: 12px; padding: 12px 14px;
}
body.modo-juego .repaso-item b { font-family: var(--f-display); font-size: .96rem; }
body.modo-juego .repaso-item p { color: var(--bruma); font-size: .88rem; margin: 4px 0 0; line-height: 1.55; }

/* ── EL ALIENTO DE LA LUZ (respiración anti-pánico) ─────────────── */
.jg-respira {
  position: fixed; inset: 0; z-index: 1004; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,22,.95); transition: opacity .5s; text-align: center; padding: 20px;
}
.jg-respira.fuera { opacity: 0; pointer-events: none; }
.jg-respira-eti {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; font-weight: 800;
  letter-spacing: .18em; color: #ffd166; display: block; margin-bottom: 26px;
}
.jg-respira-circulo {
  width: 168px; height: 168px; margin: 0 auto 22px; border-radius: 50%;
  border: 3px solid #1fe374; display: flex; align-items: center; justify-content: center;
  color: #eef2fb; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.25rem;
  box-shadow: 0 0 60px -10px rgba(31,227,116,.55);
  transform: scale(.72); transition: transform 4s ease-in-out, box-shadow 4s ease-in-out;
}
.jg-respira-circulo.inhala { transform: scale(1.12); box-shadow: 0 0 90px -6px rgba(31,227,116,.8); }
.jg-respira-circulo.sosten { transform: scale(1.12); }
.jg-respira-circulo.exhala { transform: scale(.72); transition-duration: 6s; }
.jg-respira-circulo.listo { transform: scale(1); border-color: #ffd166; box-shadow: 0 0 90px -6px rgba(255,209,102,.8); }
.jg-respira-guia { color: #93a0c2; font-size: 1rem; margin: 0 0 20px; }

/* ── COMPARTIR A REDES ──────────────────────────────────────────── */
body.modo-juego .btn-compartir, .jg-rango-caja .btn-compartir {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  background: transparent; border: 1.5px solid var(--neon, #1fe374); color: var(--neon, #1fe374);
  border-radius: 12px; padding: 9px 16px; font-weight: 800; font-size: .88rem; cursor: pointer;
  transition: transform .2s cubic-bezier(.22,1,.36,1), background .2s;
}
body.modo-juego .btn-compartir:hover, .jg-rango-caja .btn-compartir:hover {
  transform: translateY(-2px); background: rgba(31,227,116,.1);
}
.jg-aviso {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1005;
  background: #0d1735; color: #eef2fb; border: 1px solid rgba(31,227,116,.5);
  border-radius: 14px; padding: 12px 20px; font-size: .9rem;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.6); transition: opacity .4s, transform .4s;
}
.jg-aviso.fuera { opacity: 0; transform: translateX(-50%) translateY(10px); }

body.modo-juego .exp-acciones { display: flex; justify-content: center; margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .jg-respira-circulo { transition: none; }
  .tema-switch, .tema-switch .bolita { transition: none; }
}

/* ── DUELOS DE CAZADORES ────────────────────────────────────────── */
body.modo-juego .duelo-wrap { max-width: 620px; margin: 0 auto; }
body.modo-juego .duelo-caja { text-align: center; padding: 26px 22px 22px; }
body.modo-juego .duelo-titulo { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; margin: 12px 0 8px; text-wrap: balance; }
body.modo-juego .duelo-sub { color: var(--bruma); font-size: .96rem; margin: 0 auto 18px; max-width: 46ch; }
body.modo-juego .duelo-form { text-align: left; }
body.modo-juego .duelo-lbl { display: block; font-family: var(--f-hud); font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: var(--bruma); margin: 14px 0 6px; }
body.modo-juego .duelo-input {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-family: var(--f-texto, inherit); font-size: 1rem;
  background: var(--noche-2); border: 1.5px solid var(--linea); color: var(--tiza);
}
body.modo-juego .duelo-input:focus { outline: none; border-color: var(--neon); }
body.modo-juego .duelo-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
body.modo-juego .duelo-modo { cursor: pointer; }
body.modo-juego .duelo-modo input { position: absolute; opacity: 0; pointer-events: none; }
body.modo-juego .duelo-modo span {
  display: block; text-align: center; padding: 13px 10px; border-radius: 14px;
  background: var(--noche-2); border: 1.5px solid var(--linea); transition: border-color .2s, background .2s;
}
body.modo-juego .duelo-modo b { display: block; font-family: var(--f-display); font-size: .96rem; }
body.modo-juego .duelo-modo i { font-style: normal; font-size: .78rem; color: var(--bruma); }
body.modo-juego .duelo-modo input:checked + span { border-color: var(--neon); background: rgba(31,227,116,.09); }
body.modo-juego .duelo-modo input:focus-visible + span { outline: 2px solid var(--neon); outline-offset: 2px; }
body.modo-juego .duelo-pie { color: var(--bruma); font-family: var(--f-mano); font-size: 1.1rem; margin: 16px 0 0; }
body.modo-juego .duelo-hud { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
body.modo-juego .duelo-chip {
  font-family: var(--f-hud); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--noche-2); border: 1px solid var(--linea); color: var(--tiza); border-radius: 999px; padding: 6px 13px;
}
body.modo-juego .duelo-marca {
  font-family: var(--f-hud); font-weight: 800; font-size: 4rem; color: var(--neon); line-height: 1;
  text-shadow: 0 0 34px rgba(31,227,116,.4); margin: 14px 0 4px;
}
body.modo-juego .duelo-marca span { font-size: 1.5rem; color: var(--bruma); }
body.modo-juego .duelo-codigo {
  font-family: var(--f-hud); font-size: .88rem; color: var(--bruma); letter-spacing: .1em;
  background: var(--noche-2); border: 1px dashed var(--linea); border-radius: 12px; padding: 10px; margin: 4px 0 16px;
}
body.modo-juego .duelo-codigo b { color: var(--sol); font-size: 1.1rem; letter-spacing: .22em; }
body.modo-juego .duelo-tablero { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0 6px; }
body.modo-juego .duelo-lado {
  flex: 1; background: var(--noche-2); border: 1.5px solid var(--linea); border-radius: 18px; padding: 16px 10px;
}
body.modo-juego .duelo-lado.gana { border-color: var(--neon); background: rgba(31,227,116,.08); box-shadow: 0 0 34px -12px rgba(31,227,116,.55); }
body.modo-juego .duelo-lado b { display: block; font-family: var(--f-display); font-size: .92rem; margin-bottom: 4px; word-break: break-word; }
body.modo-juego .duelo-pts { display: block; font-family: var(--f-hud); font-weight: 800; font-size: 2.6rem; color: var(--tiza); line-height: 1; }
body.modo-juego .duelo-lado.gana .duelo-pts { color: var(--neon); }
body.modo-juego .duelo-lado i { font-style: normal; font-family: var(--f-hud); font-size: .7rem; color: var(--bruma); }
body.modo-juego .duelo-vs { font-family: var(--f-hud); font-weight: 800; font-size: .8rem; color: var(--coral); letter-spacing: .18em; }
body.modo-juego .duelo-caja .btn-block { display: flex; width: 100%; justify-content: center; }

/* ── LA ANTORCHA DEL FARO (mapa de Colombia) ────────────────────── */
body.modo-juego .antorcha-wrap { max-width: 760px; margin: 0 auto; text-align: center; }
body.modo-juego .antorcha-cab { margin-bottom: 20px; }
body.modo-juego .antorcha-titulo { font-family: var(--f-display); font-size: clamp(1.5rem,4.5vw,2.1rem); margin: 12px 0 6px; text-wrap: balance; }
body.modo-juego .antorcha-titulo span { color: var(--sol); }
body.modo-juego .antorcha-sub { color: var(--bruma); margin: 0 auto; max-width: 48ch; }
body.modo-juego .antorcha-cifras { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 22px 0; }
body.modo-juego .antorcha-cifras div {
  background: var(--carta); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 8px;
}
body.modo-juego .antorcha-cifras b {
  display: block; font-family: var(--f-hud); font-weight: 800;
  font-size: clamp(1.3rem,4vw,1.9rem); color: var(--neon); font-variant-numeric: tabular-nums;
}
body.modo-juego .antorcha-cifras span { font-size: .76rem; color: var(--bruma); }
body.modo-juego .antorcha-lienzo {
  position: relative; background: var(--carta); border: 1px solid var(--linea);
  border-radius: 22px; padding: 12px; overflow: hidden;
}
/* El lienzo se mide solo (mapa.php le fija ancho y alto en píxeles reales
   para que no salga borroso); aquí solo se centra. */
body.modo-juego .antorcha-lienzo canvas { max-width: 100%; height: auto; display: block; margin: 0 auto; cursor: pointer; }
body.modo-juego .antorcha-tip {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: var(--noche-2); border: 1px solid var(--neon); border-radius: 14px;
  padding: 9px 16px; font-size: .86rem; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
}
body.modo-juego .antorcha-tip b { display: block; font-family: var(--f-display); }
body.modo-juego .antorcha-tip span { color: var(--bruma); font-size: .78rem; }
body.modo-juego .antorcha-h2 { font-family: var(--f-display); font-size: 1.15rem; margin: 26px 0 10px; }
body.modo-juego .antorcha-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
body.modo-juego .antorcha-lista li {
  display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; text-align: left;
  background: var(--carta); border: 1px solid var(--linea); border-left: 3px solid var(--sol);
  border-radius: 12px; padding: 10px 14px;
}
body.modo-juego .ant-pos { font-family: var(--f-hud); font-weight: 800; color: var(--sol); }
body.modo-juego .ant-ciudad { font-weight: 700; }
body.modo-juego .ant-est { font-size: .76rem; color: var(--bruma); }
body.modo-juego .ant-luz { font-family: var(--f-hud); font-weight: 800; color: var(--neon); font-size: .82rem; font-variant-numeric: tabular-nums; }
body.modo-juego .antorcha-vacio { color: var(--bruma); margin: 22px 0; }
body.modo-juego .antorcha-vacio b { color: var(--sol); }
body.modo-juego .antorcha-pie { font-family: var(--f-mano); font-size: 1.3rem; color: var(--bruma); margin: 26px 0 12px; }
body.modo-juego .antorcha-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
@media (max-width: 520px) {
  body.modo-juego .antorcha-lista li { grid-template-columns: 28px 1fr auto; }
  body.modo-juego .ant-est { display: none; }
}

body.modo-juego .duelo-separa {
  display: flex; align-items: center; gap: 12px; margin: 26px 0 14px;
  font-family: var(--f-hud); font-size: .64rem; letter-spacing: .14em; color: var(--bruma);
}
body.modo-juego .duelo-separa::before, body.modo-juego .duelo-separa::after {
  content: ""; flex: 1; height: 1px; background: var(--linea);
}

/* ═══════════════════════════════════════════════════════════════════
   EL HUD REDUCIDO — de ocho medidores a cuatro.

   Del consejo estudiantil: «seis medidores compitiendo por su atención
   al mismo tiempo». Arriba queda solo lo que se usa MIENTRAS se responde;
   el resto vive en un cajón que se abre con un toque.
   ═══════════════════════════════════════════════════════════════════ */

/* ── La vida: los cristales, en un sitio fijo del HUD ───────────── */
/* Antes vivían solo dentro de la arena. Al fallar, el estudiante tenía
   que buscar dónde le habían pegado — y un golpe que hay que buscar no
   duele. Ahora están siempre en el mismo punto de la pantalla. */
.vida-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--carta);
  border: 1px solid var(--linea);
  color: var(--sol);
  line-height: 0;
}
.vida-pill .cristal {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.6), opacity .25s ease, filter .25s ease;
}
.vida-pill .cristal.roto { opacity: .22; filter: grayscale(1); transform: scale(.82); }

/* El cristal que se acaba de perder estalla EN SU SITIO. */
.vida-pill .cristal.estalla { animation: vidaEstalla .62s cubic-bezier(.3,.7,.4,1) both; }
@keyframes vidaEstalla {
  0%   { transform: scale(1) rotate(0); opacity: 1; filter: none; }
  18%  { transform: scale(1.65) rotate(-14deg); opacity: 1; filter: brightness(2.2); }
  46%  { transform: scale(.6) rotate(16deg); opacity: .5; }
  100% { transform: scale(.82) rotate(0); opacity: .22; filter: grayscale(1); }
}
/* Y la píldora entera se sacude, para que el ojo vaya solo hasta allá. */
.vida-pill.golpe { animation: vidaGolpe .6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes vidaGolpe {
  0%,100% { transform: translate3d(0,0,0); border-color: var(--linea); }
  15%     { transform: translate3d(-7px,0,0); border-color: var(--coral); }
  35%     { transform: translate3d(6px,0,0); border-color: var(--coral); }
  55%     { transform: translate3d(-4px,0,0); border-color: var(--coral); }
  75%     { transform: translate3d(3px,0,0); }
}

/* ── El medidor traducido a la escala del ICFES ─────────────────── */
.luz-pill {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--carta);
  border: 1px solid var(--linea);
  color: var(--neon);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  cursor: help;
}
.luz-pill svg { align-self: center; }
.luz-eti {
  font-size: .58rem; font-weight: 800; letter-spacing: .08em;
  color: var(--bruma); align-self: center; white-space: nowrap;
}
.luz-num { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.luz-de { font-size: .66rem; font-style: normal; color: var(--bruma); }
.luz-mini {
  display: inline-block; width: 34px; height: 5px;
  border-radius: 999px; background: var(--linea);
  overflow: hidden; align-self: center; margin-left: 2px;
}
.luz-mini i {
  display: block; height: 100%; background: var(--neon);
  border-radius: 999px; transition: width .5s ease;
}

/* ── El cajón con lo demás ──────────────────────────────────────── */
.hud-mas {
  position: relative;
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--carta);
  border: 1px solid var(--linea);
  color: var(--bruma);
  cursor: pointer;
  transition: transform .25s ease, color .2s ease, border-color .2s ease;
}
.hud-mas:hover { color: var(--tiza); border-color: var(--neon); }
.hud-mas:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }
.hud-mas.abierto { transform: rotate(180deg); color: var(--neon); border-color: var(--neon); }
.hud-mas-punto {
  position: absolute; top: 1px; right: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sol);
  border: 2px solid var(--noche-2, #fff);
}

.hud-detalle {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 11px 14px;
  margin: -4px 0 14px;
  border-radius: 14px;
  background: var(--carta);
  border: 1px solid var(--linea);
  animation: hudBaja .28s cubic-bezier(.2,.8,.3,1) both;
}
.hud-detalle[hidden] { display: none; }
@keyframes hudBaja {
  from { opacity: 0; transform: translate3d(0,-8px,0); }
  to   { opacity: 1; transform: none; }
}
/* Dentro del cajón las píldoras vacías no dejan huecos raros. */
.hud-detalle > div:empty { display: none; }

@media (max-width: 640px) {
  .luz-eti { display: none; }          /* en móvil manda la cifra */
  .luz-mini { display: none; }
  .vida-pill { padding: 5px 8px; gap: 2px; }
  .vida-pill .cristal svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .vida-pill.golpe { animation: vidaTinte .6s ease both; }
  .vida-pill .cristal.estalla { animation: none; opacity: .22; filter: grayscale(1); }
  .hud-mas.abierto { transform: none; }
  .hud-detalle { animation: hudFundido .25s ease both; }
  @keyframes vidaTinte { 0%,100% { border-color: var(--linea); } 40% { border-color: var(--coral); } }
  @keyframes hudFundido { from { opacity: 0; } to { opacity: 1; } }
}

/* ── La revelación del puntaje al cerrar la demo ────────────────── */
/* «Terminó la demo sin sentir un logro grande antes de que le pidieran
   pagar». Ahora el cierre ES el logro: el puntaje que se acaba de ganar. */
.demo-revelacion {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin: 22px auto 0; padding: 22px 28px;
  border-radius: 20px;
  background: var(--carta);
  border: 2px solid var(--linea);
  max-width: 340px;
}
.demo-eti {
  font-size: .68rem; font-weight: 900; letter-spacing: .12em;
  color: var(--bruma); text-align: center;
}
.demo-cifra {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(3.2rem, 13vw, 4.6rem); font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.demo-de { font-size: .8rem; color: var(--bruma); font-weight: 700; }
.demo-banda {
  margin-top: 10px; padding: 5px 15px; border-radius: 999px;
  color: #fff; font-size: .72rem; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase;
}

/* ── EL TIP DE LA PREGUNTA ────────────────────────────────────────────────
   Amarillo de aviso sobre el fondo del juego, con una barra viva a la
   izquierda: tiene que ganarle la mirada al enunciado, porque se lee ANTES.
   Es lo único de la pantalla que no es la pregunta y que sí conviene leer. */
.jg-tip {
  position: relative;
  margin: 0 0 18px;
  padding: 14px 16px 14px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,209,102,.20), rgba(255,209,102,.06));
  border: 1px solid rgba(224,164,34,.5);
  overflow: hidden;
  animation: jgTipEntra .45s cubic-bezier(.22,1,.36,1) both;
}
.jg-tip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #ffd166, #e0a422);
}
.jg-tip-eti {
  display: block; font-size: .66rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #b8860b; margin-bottom: 5px;
}
.jg-tip b {
  display: block; font-size: 1.02rem; line-height: 1.3; color: var(--ink);
  margin-bottom: 4px;
}
/* Este texto está para LEERSE, no para acompañar: contraste alto. */
.jg-tip-txt { display: block; font-size: .91rem; line-height: 1.6; color: #4a5568; }
body.tema-noche .jg-tip b { color: #ffe9b0; }
body.tema-noche .jg-tip-txt { color: #b9c6de; }
@keyframes jgTipEntra {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .jg-tip { animation: none; } }


/* ═══════════════════════════════════════════════════════════════════
   EL MODO DÍA, LEGIBLE

   La piel del juego nació de noche. Sus acentos son colores de neón
   —#1fe374, #ffd166, #7ff0c0, #a78bfa— pensados para BRILLAR sobre un
   fondo casi negro, y buena parte quedó escrita a pelo dentro de las
   reglas en vez de en los tokens. Cuando el estudiante enciende el Modo
   Día esos mismos colores caen sobre blanco y sencillamente desaparecen:
   «RESPIRA» en amarillo pastel (contraste 1,3:1), el círculo de la
   respiración con la letra blanca sobre blanco (1,0:1), el puntaje ICFES
   del HUD invisible, las gemas en celeste (1,9:1), «NUEVO RANGO» que no
   se ve, los cristales de vida en menta, los bordes dorados al 45 %.
   De ahí el «muchas veces no logra identificarse nada».

   Dos reglas de esta sección:

   · NO se toca el Modo Noche. Todo va calzado a `:not(.tema-noche)`, así
     que la identidad nocturna queda byte a byte como estaba. Lo de abajo
     es solo la traducción diurna de cada acento.
   · El listón es el contraste, no el gusto: texto normal ≥ 4,5:1 y texto
     grande ≥ 3:1 sobre su fondo real, que es lo que pide la WCAG. Por eso
     el verde de la marca (#0a9e52) sigue mandando en los titulares y las
     cifras grandes, pero el texto pequeño usa su versión oscura.
   ═══════════════════════════════════════════════════════════════════ */

body.modo-juego:not(.tema-noche) {
  --neon-txt:  #077a3f;   /* el verde, cuando tiene que LEERSE en pequeño */
  --oro:       #8a6508;   /* el sol */
  --cristal:   #0b7a57;   /* la menta de los cristales de luz */
  --sombra-c:  #6d3fd6;   /* el púrpura de La Sombra */
  --velo:      rgba(244,247,253,.97);  /* el fondo de las capas a pantalla completa */
}

/* ── El HUD ──────────────────────────────────────────────────────── */
body.modo-juego:not(.tema-noche) .gemas-pill {
  color: var(--cielo); border-color: rgba(28,111,208,.55); background: rgba(28,111,208,.06);
}
body.modo-juego:not(.tema-noche) .rango-pill { border-color: rgba(28,111,208,.5); }
body.modo-juego:not(.tema-noche) .poderes-pill { color: var(--oro); border-color: rgba(184,134,11,.55); }
body.modo-juego:not(.tema-noche) .racha-pill { color: var(--oro); border-color: rgba(217,45,67,.5); }
body.modo-juego:not(.tema-noche) .approval-pill.passing { color: var(--neon-txt); border-color: rgba(10,158,82,.6); }
body.modo-juego:not(.tema-noche) .approval-pill.failing { color: var(--oro); border-color: rgba(184,134,11,.6); }
body.modo-juego:not(.tema-noche) .quiz-timer-pill.warn { color: var(--oro); border-color: rgba(184,134,11,.65); }
body.modo-juego:not(.tema-noche) .quiz-timer-pill.danger { border-color: rgba(217,45,67,.65); }
body.modo-juego:not(.tema-noche) .quiz-score-pill { color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .luz-pill { color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .vida-pill { color: #b3720a; }
body.modo-juego:not(.tema-noche) .progress-bar { background: rgba(12,18,34,.10); }

/* ── Opciones y retroalimentación ────────────────────────────────── */
/* El rosa claro de la opción fallada venía de la noche: sobre blanco daba
   1,5:1, o sea texto ilegible justo en la opción que hay que revisar. */
body.modo-juego:not(.tema-noche) .option-btn.correct { background: rgba(10,158,82,.10); }
body.modo-juego:not(.tema-noche) .option-btn.correct .option-label { color: #fff; }
body.modo-juego:not(.tema-noche) .option-btn.incorrect { color: #8c1a28; background: rgba(217,45,67,.09); }
body.modo-juego:not(.tema-noche) .option-btn:not(:disabled):hover { background: rgba(10,158,82,.07); }
body.modo-juego:not(.tema-noche) .feedback-banner.correct { border-color: rgba(10,158,82,.5); box-shadow: none; }
body.modo-juego:not(.tema-noche) .feedback-banner.incorrect { border-color: rgba(184,134,11,.5); }
body.modo-juego:not(.tema-noche) .feedback-title.correct { color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .feedback-points {
  color: var(--neon-txt); background: rgba(10,158,82,.09); border-color: rgba(10,158,82,.45);
}
body.modo-juego:not(.tema-noche) .feedback-banner.incorrect .feedback-points {
  background: rgba(217,45,67,.08); border-color: rgba(217,45,67,.4);
}
body.modo-juego:not(.tema-noche) .jg-clave { background: rgba(10,158,82,.08); }
body.modo-juego:not(.tema-noche) .jg-clave .jg-eti { color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .jg-cofre-premio { color: var(--oro); background: rgba(184,134,11,.09); border-color: rgba(184,134,11,.55); }
body.modo-juego:not(.tema-noche) .jg-bestia { border-color: rgba(109,63,214,.4); background: rgba(109,63,214,.06); }
body.modo-juego:not(.tema-noche) .jg-bestia-eti { color: var(--sombra-c); }
body.modo-juego:not(.tema-noche) .jg-bestia.escapo { border-color: rgba(217,45,67,.4); background: rgba(217,45,67,.06); }
body.modo-juego:not(.tema-noche) .review-badge.correct { color: var(--neon-txt); background: rgba(10,158,82,.09); border-color: rgba(10,158,82,.4); }
body.modo-juego:not(.tema-noche) .review-badge.incorrect { background: rgba(217,45,67,.08); border-color: rgba(217,45,67,.4); }

/* ── El camino y sus zonas ───────────────────────────────────────── */
/* La zona en tinieblas se apagaba con `brightness(.6)`: de noche eso la
   hunde en el fondo, pero de día ennegrece una tarjeta BLANCA y deja el
   texto oscuro sobre gris oscuro. De día se apaga quitándole color y
   presencia, no luz. */
body.modo-juego:not(.tema-noche) .exp-zona.zona-apagada {
  filter: grayscale(1); opacity: .5; background: var(--noche-2);
}
body.modo-juego:not(.tema-noche) .exp-zona.zona-encendida {
  border-color: var(--oro); box-shadow: 0 0 0 3px rgba(184,134,11,.14);
}
body.modo-juego:not(.tema-noche) .exp-zona.zona-encendida svg { color: var(--oro); }
body.modo-juego:not(.tema-noche) .exp-zona { box-shadow: 0 2px 10px -6px rgba(12,18,34,.5); }
body.modo-juego:not(.tema-noche) .exp-camino::before { border-left-color: rgba(12,18,34,.16); }
body.modo-juego:not(.tema-noche) .exp-nodo.bien { background: rgba(10,158,82,.12); color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .exp-nodo.actual { background: rgba(10,158,82,.10); color: var(--neon-txt); box-shadow: 0 0 0 4px rgba(10,158,82,.14); }
body.modo-juego:not(.tema-noche) .exp-nodo.bloqueado { color: rgba(91,104,132,.75); }
body.modo-juego:not(.tema-noche) .exp-ojos i { background: rgba(91,104,132,.8); }
body.modo-juego:not(.tema-noche) .exp-cofre { color: var(--oro); border-color: var(--oro); background: rgba(184,134,11,.12); }
body.modo-juego:not(.tema-noche) .exp-jugar,
body.modo-juego:not(.tema-noche) .exp-meta-texto { color: var(--oro); }
body.modo-juego:not(.tema-noche) .exp-meta-circulo { color: var(--oro); border-color: rgba(184,134,11,.55); background: rgba(184,134,11,.07); }
body.modo-juego:not(.tema-noche) .exp-meta-mano { color: var(--sombra-c); }
body.modo-juego:not(.tema-noche) .exp-titulo span { color: var(--neon-txt); text-shadow: none; }
body.modo-juego:not(.tema-noche) .exp-saber { filter: drop-shadow(0 6px 10px rgba(12,18,34,.22)); }
body.modo-juego:not(.tema-noche) .qmap-node.correct { background: rgba(10,158,82,.12); color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .qmap-node.incorrect { background: rgba(217,45,67,.10); }

/* ── El campamento del poder ─────────────────────────────────────── */
body.modo-juego:not(.tema-noche) .exp-poder-eti {
  color: var(--oro); border-color: rgba(184,134,11,.55); background: rgba(184,134,11,.08);
}
body.modo-juego:not(.tema-noche) .exp-poder-icono {
  color: var(--oro); border-color: rgba(184,134,11,.6); background: rgba(184,134,11,.09);
  box-shadow: 0 0 0 6px rgba(184,134,11,.10);
}
body.modo-juego:not(.tema-noche) .exp-poder-mano { color: var(--oro); }
body.modo-juego:not(.tema-noche) .exp-poder-halo {
  background: radial-gradient(50% 45% at 50% 30%, rgba(184,134,11,.10), transparent 70%);
}

/* ── La arena ────────────────────────────────────────────────────── */
body.modo-juego:not(.tema-noche) .arena-cristales .cristal {
  color: var(--cristal); filter: none;
}
body.modo-juego:not(.tema-noche) .arena-cristales .cristal.roto { color: var(--bruma); }
body.modo-juego:not(.tema-noche) .arena-jefe { border-color: rgba(184,134,11,.6); box-shadow: 0 0 0 3px rgba(184,134,11,.12); }
body.modo-juego:not(.tema-noche) .arena-jefe-banda { background: var(--oro); color: #fff; }
body.modo-juego:not(.tema-noche) .arena-sombra {
  border-color: rgba(109,63,214,.55); box-shadow: 0 0 0 3px rgba(109,63,214,.12); animation: none;
}
body.modo-juego:not(.tema-noche) .arena-sombra .arena-taunt { border-color: rgba(109,63,214,.45); color: var(--sombra-c); }
body.modo-juego:not(.tema-noche) .arena-hp { background: rgba(12,18,34,.12); }
body.modo-juego:not(.tema-noche) .arena-placa-jugador em { color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .arena-danio { text-shadow: 0 2px 6px rgba(255,255,255,.9); }
body.modo-juego:not(.tema-noche) .arena-danio.critico { color: var(--oro); text-shadow: 0 2px 6px rgba(255,255,255,.9); }
body.modo-juego:not(.tema-noche) .arena-tajo {
  background: linear-gradient(115deg, transparent 42%, rgba(12,18,34,.35) 50%, transparent 58%);
}
body.modo-juego:not(.tema-noche) .arena-taunt { box-shadow: 0 2px 8px -5px rgba(12,18,34,.6); }

/* ── Bestiario, repaso y remates ─────────────────────────────────── */
body.modo-juego:not(.tema-noche) .codex-marca { color: var(--neon-txt); background: rgba(10,158,82,.10); }
body.modo-juego:not(.tema-noche) .big-score { color: var(--neon-txt); text-shadow: none; }
body.modo-juego:not(.tema-noche) .stars-row .estrella.apagada { color: rgba(12,18,34,.18); }
body.modo-juego:not(.tema-noche) .btn-compartir { border-color: var(--neon-txt); color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .duelo-marca { color: var(--neon-txt); text-shadow: none; }
body.modo-juego:not(.tema-noche) .duelo-codigo b { color: var(--oro); }
body.modo-juego:not(.tema-noche) .duelo-lado.gana { background: rgba(10,158,82,.08); box-shadow: 0 0 0 3px rgba(10,158,82,.12); }
body.modo-juego:not(.tema-noche) .duelo-lado.gana .duelo-pts { color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .duelo-modo input:checked + span { background: rgba(10,158,82,.08); }
body.modo-juego:not(.tema-noche) .antorcha-lista li { border-left-color: var(--oro); }
body.modo-juego:not(.tema-noche) .ant-pos,
body.modo-juego:not(.tema-noche) .antorcha-vacio b,
body.modo-juego:not(.tema-noche) .antorcha-titulo span { color: var(--oro); }
body.modo-juego:not(.tema-noche) .ant-luz { color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .antorcha-tip { border-color: var(--neon-txt); }
body.modo-juego:not(.tema-noche) .luz-mini { background: rgba(12,18,34,.12); }

/* ── Las capas a pantalla completa ───────────────────────────────── */
/* Estas viven fuera de `body.modo-juego` (se pegan al <body>), así que
   van calzadas por el tema del <body> a secas. Son las que peor estaban:
   texto de neón sobre un velo casi blanco. */
body:not(.tema-noche) .jg-rango-overlay,
body:not(.tema-noche) .jg-oscuridad,
body:not(.tema-noche) .jg-respira { background: rgba(244,247,253,.97); }

body:not(.tema-noche) .jg-rango-eti { color: #8a6508; }
body:not(.tema-noche) .jg-rango-nombre { color: #077a3f; text-shadow: none; }
body:not(.tema-noche) .jg-rango-mano { color: #5b6884; }

body:not(.tema-noche) .jg-oscuridad-titulo { color: #5b31c4; text-shadow: none; }
body:not(.tema-noche) .jg-oscuridad-texto { color: #414d66; }
body:not(.tema-noche) .jg-oscuridad-mano { color: #8a6508; }

body:not(.tema-noche) .jg-respira-eti { color: #8a6508; }
body:not(.tema-noche) .jg-respira-circulo {
  color: #0c1222; border-color: #0a9e52; background: #fff;
  box-shadow: 0 10px 40px -14px rgba(10,158,82,.55);
}
body:not(.tema-noche) .jg-respira-circulo.inhala { box-shadow: 0 14px 60px -12px rgba(10,158,82,.7); }
body:not(.tema-noche) .jg-respira-circulo.listo { border-color: #8a6508; box-shadow: 0 14px 60px -12px rgba(184,134,11,.6); }
body:not(.tema-noche) .jg-respira-guia { color: #414d66; }

body:not(.tema-noche) .jg-cristal-grande { color: #0b7a57; filter: drop-shadow(0 6px 18px rgba(11,122,87,.45)); }
body:not(.tema-noche) .jg-cristalazo .esquirla { background: #0b7a57; }
body:not(.tema-noche) .jg-cristal-texto { color: #b0182c; text-shadow: none; }

/* El fogonazo del fallo oscurecía la pantalla entera; de día basta con
   un velo cálido, sin apagar la luz que el estudiante viene ganando. */
body:not(.tema-noche).jg-penumbra::after {
  background: radial-gradient(90% 90% at 50% 50%, transparent 40%, rgba(12,18,34,.18));
}
body:not(.tema-noche).jg-penumbra #jg-luz-mundo { opacity: .06 !important; }

/* Los avisos flotantes se quedan oscuros a propósito (se leen encima de
   cualquier cosa), pero de día no tienen por qué llevar borde de neón. */
body:not(.tema-noche) .jg-toast { border-color: rgba(184,134,11,.65); }
body:not(.tema-noche) .jg-aviso { border-color: rgba(10,158,82,.6); }