/* boss-v2.css — Boss Final DGT · la pantalla de EXAMEN.
 *
 * Esta es la variante «a sangre», que es la que eligió Nico: en el artefacto
 * «Todo generado de cero» (9s24JNXNjXDqJC1GnwScJ5, colección `v8`) votó
 * ex7-n1→1, ex7-n2→1 y ex7-n3→1, las tres la opción 1. Lo que estaba montado
 * hasta el 25-sep era la opción 3, «expediente»: la hoja de papel sobre la
 * mesa, anclada por fracciones a assets/boss/escenas/mesa-nN.webp. Fuera.
 *
 * Cómo es la elegida, medida sobre los tres mockups del artefacto:
 *   · barra de arriba oscura con la cara de quien examina, su nombre, el nivel
 *     y el reloj dentro de un anillo, a la derecha;
 *   · la foto de la pregunta A SANGRE, de borde a borde, sin marco ni hueco;
 *   · el enunciado grande, en blanco, sobre una banda negra a todo el ancho;
 *   · las respuestas como tarjetas redondeadas, con la letra en su chapa;
 *   · abajo: «‹», las casillas de progreso con «PREGUNTA n DE 30» debajo, y
 *     «SIGUIENTE ›» en oro.
 * Cada nivel cambia de color: el 1 crema y oro, el 2 hielo y acero, el 3
 * granate y rojo. El fondo es la escena del nivel, desenfocada y a oscuras.
 *
 * Se carga DESPUÉS del CSS del juego y solo cambia la capa visual: la lógica
 * (boss-final-dgt.js), los ids y los nodos que escuchan clicks (#opts .opt,
 * #btnPrev, #btnNext, #btnQuit) siguen siendo los mismos. Quien recoloca el
 * DOM es games/boss/escena.js. Todo cuelga de body.boss-examen, para no tocar
 * ni la puerta, ni la entrada, ni el veredicto.
 * --bk es el zoom de la interfaz en tablet (W ≥ 700): lo calcula escena.js.
 */

:root {
  --bk: 1;
  --boss-fd: 'Syne', system-ui, sans-serif;
  --boss-fb: 'DM Sans', system-ui, sans-serif;
  --boss-ft: 'Special Elite', ui-monospace, monospace;
}

/* ── paleta por nivel ───────────────────────────────────────────────────── */
body.boss-examen {
  --ac: #e8c162;                 /* el oro del nivel 1 */
  --ac-dim: rgba(232,193,98,.32);
  --carta-a: #f7eed9;            /* la tarjeta de respuesta: arriba */
  --carta-b: #e7d6b2;            /* y abajo */
  --carta-tx: #17120a;
  --chapa: #e2cfa4;
  --chapa-tx: #3a2c10;
  --fondo: #0b0906;
  --escena: url(../assets/boss/escenas/mesa-n1.webp);
}
body.boss-examen[data-boss-n="2"] {
  --ac: #8fc2ff;
  --ac-dim: rgba(143,194,255,.32);
  --carta-a: #f2f6fb; --carta-b: #d3e0ee; --carta-tx: #0f1620;
  --chapa: #c7d7e8; --chapa-tx: #16222f;
  --fondo: #05080d;
  --escena: url(../assets/boss/escenas/mesa-n2.webp);
}
body.boss-examen[data-boss-n="3"] {
  --ac: #ff5545;
  --ac-dim: rgba(255,85,69,.34);
  --carta-a: #43181a; --carta-b: #2a0d0f; --carta-tx: #ffe6e1;
  --chapa: #5f2020; --chapa-tx: #ffc2b8;
  --fondo: #080303;
  --escena: url(../assets/boss/escenas/mesa-n3.webp);
}

/* ── el fondo: la escena del nivel, desenfocada y a oscuras ─────────────── */
.boss-escena, .boss-velo, .boss-alarma { display: none; position: fixed; inset: 0; pointer-events: none; }
.boss-escena {
  z-index: 0; background: var(--fondo) var(--escena) center center / cover no-repeat;
  filter: blur(16px) saturate(.8) brightness(.58); transform: scale(1.14);
}
.boss-velo { z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.24) 45%, rgba(0,0,0,.7) 100%); }
.boss-alarma { z-index: 1; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(255,30,30,.5) 100%); animation: bossAlarma 1.4s ease-in-out infinite; }
/* más suave que en la entrada del jefe: aquí hay que leer */
@keyframes bossAlarma { 0%, 100% { opacity: .07; } 50% { opacity: .34; } }
body.boss-examen { background: var(--fondo); }
body.boss-examen .boss-escena, body.boss-examen .boss-velo { display: block; }
body.boss-examen[data-boss-n="3"] .boss-alarma { display: block; }
/* el polvo/ascuas y la viñeta de escena-fx.js solo durante el examen */
body:not(.boss-examen) .fx-canvas, body:not(.boss-examen) .fx-vignette { display: none; }
@media (prefers-reduced-motion: reduce) { .boss-alarma { animation: none; opacity: .18; } }

/* ── la columna del examen ──────────────────────────────────────────────── */
body.boss-examen #app { max-width: calc(480px * var(--bk)); }
body.boss-examen #scrExamen { z-index: 2; }
body.boss-examen #scrExamen .bg, body.boss-examen #scrExamen .bg-veil { display: none; }
body.boss-examen #scrExamen .danger { position: fixed; }
body.boss-examen .examen-in { padding: 0; gap: 0; min-height: 0; }

/* lo que la escena «a sangre» ya no usa: la hoja de papel y sus adornos */
body.boss-examen .exam-sheet,
body.boss-examen .sheet-head,
body.boss-examen .exam-foot,
body.boss-examen .exam-clock,
body.boss-examen #bossImg { display: none !important; }

/* ── 1 · la barra de arriba ─────────────────────────────────────────────── */
body.boss-examen .bx-top {
  flex: none; position: relative; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: calc(var(--sat) + 7px) 12px 7px; zoom: var(--bk);
  background: linear-gradient(180deg, rgba(10,8,6,.96), rgba(10,8,6,.84));
  border-bottom: 1px solid var(--ac-dim);
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
body.boss-examen .bx-cara {
  flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #111;
  border: 2px solid var(--ac); box-shadow: 0 0 12px var(--ac-dim);
}
body.boss-examen .bx-cara img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 50% 12%; transform: scale(1.35); transform-origin: 50% 16%; }
body.boss-examen[data-boss-n="2"] .bx-cara img,
body.boss-examen[data-boss-n="3"] .bx-cara img { transform: scale(1.18); transform-origin: 50% 22%; }
body.boss-examen .bx-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.boss-examen .bx-nom b {
  font: 800 18px/1.05 var(--boss-fd); color: #fdf8ee; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.boss-examen .bx-nom span {
  font: 700 12px/1.2 var(--boss-fb); letter-spacing: .1em; text-transform: uppercase; color: var(--ac);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92;
}
/* El anillo del reloj. Nico 28-sep: «29:59» se salía del círculo. En Syne 800
   a 11,5 px el texto medía 51 px para 46 de hueco. Ahora va en DM Sans (más
   estrecha, cifras tabulares) y escena.js (encajarReloj) encoge la letra si
   las esquinas del texto no caben dentro del círculo, con cualquier valor. */
body.boss-examen .bx-reloj {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--ac); background: rgba(0,0,0,.45);
  box-shadow: 0 0 14px var(--ac-dim), inset 0 0 12px rgba(0,0,0,.6);
}
body.boss-examen .bx-reloj .clock-face {
  font: 800 var(--bx-reloj-fs, 13px)/1 var(--boss-fb); color: var(--ac); letter-spacing: -.01em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: none; border: 0; padding: 0; margin: 0; box-shadow: none; text-shadow: 0 0 10px var(--ac-dim);
}
body.boss-examen .bx-reloj.apura { border-color: #ff6a58; box-shadow: 0 0 16px rgba(255,106,88,.5); }
body.boss-examen .bx-reloj.apura .clock-face { color: #ff6a58; text-shadow: 0 0 12px rgba(255,59,59,.7); animation: bxPulso .9s ease-in-out infinite; }
@keyframes bxPulso { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { body.boss-examen .bx-reloj.apura .clock-face { animation: none } }
@media (max-width: 374px) {
  body.boss-examen .bx-nom b { font-size: 16px; }
  body.boss-examen .bx-reloj { width: 48px; height: 48px; }
}

/* «Abandonar» y el botón de aviso: chapitas discretas sobre la foto */
body.boss-examen #btnQuit {
  position: absolute; top: calc(var(--sat) + 63px); right: 10px; z-index: 6; zoom: var(--bk);
  display: flex; align-items: center; gap: 5px; min-height: 0; clip-path: none;
  padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(8,6,5,.6); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0,0,0,.5);
  font: 700 10px/1 var(--boss-fb); letter-spacing: .1em; text-transform: uppercase; color: #e9e2d4;
}
body.boss-examen[data-boss-n="3"] #btnQuit { color: #ffb0a4; border-color: rgba(255,85,69,.5); }
body.boss-examen .vp-fb-btn { top: calc(var(--sat) + 63px); right: auto; left: 10px; }

/* Quien examina no dice nada durante el examen (Nico, 28-sep): fuera el
   bocadillo «anota algo…» y el hueco de su figura. */
body.boss-examen .exam-boss { display: none !important; }

/* ── 2 · la foto, a sangre ──────────────────────────────────────────────── */
body.boss-examen .bx-foto {
  flex: none; position: relative; height: 26dvh; min-height: 118px; overflow: hidden;
  border-bottom: 2px solid var(--ac); background: #000;
}
body.boss-examen .bx-foto.vacia { height: 0; min-height: 0; border-bottom-width: 1px; }
body.boss-examen .bx-foto .q-fig {
  position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; flex: none;
  margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; filter: none;
  background-size: contain; /* la foto se ve ENTERA: recortar una señal cambia la pregunta (28-sep, la rotonda salía cortada) */ background-position: center; background-repeat: no-repeat; background-color: #000;
}

/* ── 3 · el enunciado, sobre negro y a todo el ancho ────────────────────── */
body.boss-examen .bx-preg { flex: none; background: #000; padding: 15px 20px 17px; zoom: var(--bk); }
body.boss-examen .bx-preg .q-text {
  margin: 0; text-align: center; color: #fdfaf4; text-wrap: balance;
  font: 700 var(--bx-fs, 19px)/1.32 var(--boss-fb); letter-spacing: -.005em;
  background: none; border: 0; padding: 0; transform: none; text-shadow: none;
}

/* ── 4 · las respuestas ─────────────────────────────────────────────────── */
/* Barras de scroll al pulsar (Nico, 28-sep). La causa: #opts heredaba del CSS
   viejo de la hoja `overflow-y:auto` (y con él overflow-x:auto), y arena.js
   anima cada opción al entrar (translateY 16 px) y al marcarla (.vp-pop, un
   scale 1.12 que la ensancha ~22 px por lado). Ese desborde momentáneo abría
   barras dentro de #opts. Ahora #opts no recorta (overflow visible), el golpe
   de la marca es uno pequeño que cabe en el relleno de 14 px, y la caja de
   respuestas sigue pudiendo desplazarse en vertical si una pregunta extrema no
   cupiera tras encoger la letra, pero sin barras visibles ni scroll lateral. */
body.boss-examen .bx-opts {
  flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 14px 14px 8px; zoom: var(--bk);
}
body.boss-examen .bx-opts::-webkit-scrollbar { display: none; }
body.boss-examen .bx-opts .opts { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; overflow: visible; flex: none; }
body.boss-examen .opt.vp-pop { animation: bxMarca .3s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes bxMarca { 0% { transform: scale(1) } 20% { transform: scale(.97) } 55% { transform: scale(1.025) } 100% { transform: scale(1) } }
/* red de seguridad: durante el examen la página nunca se desplaza (la columna
   ya está hecha a la medida de la pantalla; el scale de «recta final» de
   arena.js, html.vp-stress #app, ya no puede asomar barras) */
html:has(body.boss-examen), body.boss-examen { overflow: hidden; }
body.boss-examen #scrExamen { overflow: hidden; }
body.boss-examen .opt {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 15px 11px 11px;
  border: 0; border-radius: 17px; cursor: pointer; transform: none; min-height: 0; flex: none;
  background: linear-gradient(180deg, var(--carta-a), var(--carta-b));
  box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 10px 22px rgba(0,0,0,.45);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
body.boss-examen .opt:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 5px 12px rgba(0,0,0,.4); }
body.boss-examen .opt .box {
  position: relative; flex: none; width: 34px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; border: 0;
  background: var(--chapa); color: var(--chapa-tx);
  font: 800 14px/1 var(--boss-fd); letter-spacing: .02em;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4);
}
body.boss-examen .opt .box::after { content: none; }
body.boss-examen .opt .tx {
  flex: 1; min-width: 0; padding: 0; color: var(--carta-tx); text-align: left;
  font: 700 var(--bx-op, 16px)/1.32 var(--boss-fb);
}
body.boss-examen .opt.marked {
  outline: 3px solid var(--ac); outline-offset: 2px;
  box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 0 26px var(--ac-dim);
}
body.boss-examen .opt.marked .box { background: var(--ac); color: #1a1005; }
body.boss-examen .opts.bloqueada .opt { opacity: .62; }
body.boss-examen .q-bloq {
  margin: 12px 2px 0; text-align: center; border-radius: 12px; padding: 9px 12px;
  background: rgba(0,0,0,.5); border: 1px solid var(--ac-dim);
  font: 600 13px/1.35 var(--boss-fb); color: #d9d2c4;
}

/* ── 5 · el pie: «‹», las casillas y «SIGUIENTE ›» ──────────────────────── */
body.boss-examen .bx-pie {
  flex: none; position: relative; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(var(--sab) + 12px); zoom: var(--bk);
  background: linear-gradient(180deg, rgba(8,6,5,0), rgba(8,6,5,.92) 42%);
}
body.boss-examen .bx-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
body.boss-examen .bx-mid .cells {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0;
  width: 100%; max-width: 186px; border: 0; background: none;
}
body.boss-examen .bx-mid .cell {
  width: 8px; height: 8px; border-radius: 50%; flex: none; border: 0; box-shadow: none;
  background: rgba(255,255,255,.16); transition: background 140ms ease-out;
}
body.boss-examen .bx-mid .cell.done { background: var(--ac); }
body.boss-examen .bx-mid .cell.cur { background: #fff; box-shadow: 0 0 7px rgba(255,255,255,.85); }
body.boss-examen .bx-mid .q-num {
  margin: 0; font: 700 12px/1.15 var(--boss-fb); letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.6); text-align: center; background: none; padding: 0; border: 0;
  /* a 12 px (antes 8,5) «PREGUNTA 30 DE 30» no cabe en una línea entre los dos
     botones de un móvil de 360: se parte en dos antes que meterse debajo */
  white-space: normal; text-wrap: balance;
}
body.boss-examen .bx-pie .qnav {
  /* el .qnav del juego trae width:100%, que en una fila flex se come el hueco
     de las casillas: aquí cada botón mide lo suyo */
  flex: none; width: auto; border: 0; cursor: pointer; color: #1d1608; clip-path: none; isolation: auto;
  background: linear-gradient(180deg, #fff0c0, #f3d27a 34%, #dcb455);
  box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  font-family: var(--boss-fd); font-weight: 800; white-space: nowrap;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
body.boss-examen .bx-pie .qnav::before { display: none; }
body.boss-examen #btnPrev { width: 44px; height: 40px; border-radius: 13px; font-size: 19px; line-height: 1; padding: 0; }
body.boss-examen #btnNext { height: 44px; border-radius: 99px; padding: 0 20px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
body.boss-examen .bx-pie .qnav:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
body.boss-examen .bx-pie .qnav[disabled] { opacity: .35; box-shadow: 0 4px 0 rgba(0,0,0,.35); }

/* los botones flotantes de la cáscara, por encima del pie */
/* el «?» de la guía, solo en la torre: en el examen se quedaba encima de la
   última respuesta (y un examen es «sin ayudas») */
body.boss-examen .vp-gg-replay,
body:has(#scrPuerta:not(.on)) .vp-gg-replay { display: none !important; } /* y en el aula y el veredicto, donde pisaba la revisión y los botones */
html[data-vp-game="boss"] body.boss-examen .vp-sound { bottom: calc(var(--boss-pie, 96px) + 10px); }

/* ── recta final: el aviso rojo sin estorbar la lectura ─────────────────── */
body.boss-examen #scrExamen.peligro .bx-foto { border-bottom-color: #ff4b3b; }

/* ── tablet y escritorio ────────────────────────────────────────────────── */
@media (min-width: 700px) {
  body.boss-examen .bx-foto { height: 29dvh; }
}