/* duelo-pregunta.css — el TABLERO de la pregunta del Duelo (28-sep-2026).
 *
 * Es la pantalla que eligió Nico: «Duelo · pregunta — videomarcador, respuestas
 * iguales en oro». De arriba abajo:
 *   · la fila de controles común (css/controles-juego.css) — no se toca;
 *   · la barra del tablero: el tema en su píldora, «RONDA n DE N» y el reloj
 *     en un círculo dorado;
 *   · la foto dentro de un VIDEOMARCADOR (marco oscuro con filo y una fila de
 *     bombillas arriba y abajo);
 *   · la losa NEGRA MACIZA con la pregunta en blanco grande;
 *   · las tres respuestas IGUALES: pastilla oscura con borde de oro y la letra
 *     en un botón dorado.
 *
 * Tres reglas que no se rompen:
 *   1. La foto se ve ENTERA (contain) y no hay nada encima.
 *   2. El enunciado va sobre negro macizo; la letra la decide duelo/pregunta-fit.js.
 *   3. Al contestar NO se mueve nada: el resultado se pinta SOBRE las mismas
 *      pastillas (verde la buena, roja la tuya, el resto apagado) y la
 *      explicación del fallo sale DENTRO de la losa, en el sitio del enunciado.
 *      Nada de transform de escala ni paneles que aprieten el tablero.
 *
 * Sustituye a la arena del videomarcador del 22-sep (escena-pregunta.js), que
 * dibujaba el marco con una ilustración colocada por detrás.
 */

#board { --duq-mx: clamp(10px, 3.2vw, 18px); --duq-oro: #d4a843; --duq-oro-hi: #f3d27a; }

/* ── fondo: la arena, oscurecida para que mande el tablero ── */
#board.board-screen {
  padding: var(--ctl-fila, 56px) 0 0;
  gap: 0;
  background:
    radial-gradient(90% 55% at 50% 38%, rgba(0,0,0,0), rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(5,5,8,.82), rgba(5,5,8,.58) 45%, rgba(5,5,8,.78)),
    url(../assets/duelo/p/preg-1.webp) center 40% / cover no-repeat,
    #060608;
}
#board > .s3-beams { opacity: .25; }
/* la fila vieja de «Tu turno» no cabe en la barra elegida (y el turno del
   rival ya no se ve: 30-sep) */
#board > .s5-turnrow { display: none; }
#board > .du-topbar .du-title { visibility: hidden; }

/* ── barra del tablero ── */
.duq-barra {
  flex: none; position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 var(--duq-mx) clamp(6px, 1.1vh, 10px);
  height: clamp(40px, 5.4vh, 50px);
}
#board .duq-barra .s5-worldbar {
  position: static; transform: none; clip-path: none; flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  height: 100%; box-sizing: border-box;
  padding: 0 clamp(12px, 3.6vw, 18px) 0 5px; border-radius: 999px;
  background: linear-gradient(180deg, #1c1810, #0a0907);
  border: 1.5px solid var(--duq-oro);
  box-shadow: 0 0 14px rgba(243,210,122,.22), inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.6);
}
#board .duq-barra .s5-world-chip {
  flex: none; width: clamp(26px, 3.8vh, 34px); height: clamp(26px, 3.8vh, 34px); border-radius: 50%;
  /* disco claro: los pictogramas de los temas son oscuros y sobre negro no se veían */
  background: radial-gradient(circle at 40% 30%, #fffaf0, #f3e2b4 60%, #c99a3e);
  border: 1.5px solid var(--duq-oro);
  box-shadow: 0 0 0 1.5px #0c0a07, 0 0 8px rgba(243,210,122,.35);
}
#board .duq-barra .s5-world-chip svg { width: 62%; height: 62%; }
/* los temas largos («Seguridad y entorno») pasan a dos líneas dentro de la
   píldora en vez de cortarse */
#board .duq-barra .s5-world-name {
  font: 400 clamp(.6rem, 2.6vw, .84rem)/1.3 var(--font-display); letter-spacing: .12em;
  color: #f7efdb; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.duq-ronda {
  flex: none; margin: 0; text-align: center; white-space: nowrap;
  font: 800 clamp(.58rem, 2.5vw, .76rem)/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; color: #b9b1c9;
  text-shadow: 0 2px 6px rgba(0,0,0,.9);
}
/* el reloj: círculo oscuro con aro de oro */
#board .duq-barra .s5-timer-wrap {
  position: relative; top: auto; right: auto; left: auto; flex: none;
  width: clamp(40px, 5.4vh, 50px); height: clamp(40px, 5.4vh, 50px);
  background: radial-gradient(circle at 40% 30%, #1d1a13, #070605);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--duq-oro), 0 0 14px rgba(243,210,122,.35), 0 6px 14px rgba(0,0,0,.6);
}
#board .duq-barra .s5-timer-ring { width: 100%; height: 100%; }
#board .duq-barra .s5-timer-disc { fill: transparent; }
#board .duq-barra .s5-timer-ticks { display: none; }
#board .duq-barra .s5-timer-track { stroke: rgba(212,168,67,.18); stroke-width: 4; }
#board .duq-barra .s5-timer-fill { stroke: var(--duq-oro-hi); stroke-width: 4; }
#board .duq-barra .s5-timer-num { font: 400 clamp(.95rem, 2.4vh, 1.2rem) var(--font-display); color: #fff4d4; }

/* ── la foto, en el videomarcador ── */
#board .s5-image-frame {
  flex: 0 1 auto; min-height: 0; position: relative; z-index: 2;
  margin: 0 var(--duq-mx);
  padding: clamp(14px, 1.9vh, 18px) clamp(9px, 2.4vw, 13px);
  border-radius: 14px;
  background: linear-gradient(180deg, #1d1a14, #0b0a08 55%, #15120d);
  border: 1.5px solid rgba(212,168,67,.8);
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 0 20px rgba(243,210,122,.16),
              inset 0 1px 0 rgba(255,255,255,.08), 0 16px 32px rgba(0,0,0,.7);
}
/* las dos filas de bombillas, en el marco (nunca sobre la foto) */
#board .s5-image-frame::before,
#board .s5-image-frame::after {
  content: ""; position: absolute; left: 12px; right: 12px; z-index: 1; pointer-events: none;
  height: 8px; box-shadow: none;
  background: radial-gradient(circle, #fffbe6 0 1.7px, rgba(255,214,120,.75) 2.5px, rgba(255,190,80,0) 4px)
              center / 15px 8px repeat-x;
  filter: drop-shadow(0 0 3px rgba(255,205,105,.85));
}
#board .s5-image-frame::before { top: calc((clamp(14px, 1.9vh, 18px) - 8px) / 2); bottom: auto; }
#board .s5-image-frame::after  { bottom: calc((clamp(14px, 1.9vh, 18px) - 8px) / 2); top: auto; }
#board .q-image-wrap {
  border: 1px solid rgba(0,0,0,.9); border-radius: 5px; background: #000; box-shadow: none;
}
#board .q-image-wrap img { width: 100%; height: auto; object-fit: contain; }

/* ── la losa negra de la pregunta ── */
#board .du-qzone { position: relative; padding: 0; gap: 0; }
#board .s5-question {
  margin: clamp(8px, 1.4vh, 14px) var(--duq-mx) 0;
  border: 0; border-image: none; border-radius: 4px;
  border-top: 2px solid var(--duq-oro); border-bottom: 2px solid var(--duq-oro);
  background: linear-gradient(180deg, #0b0b0e, #030304);
  box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 0 16px rgba(243,210,122,.12), 0 18px 36px rgba(0,0,0,.85);
  color: #fff; text-shadow: none;
}
#board .s5-question::before, #board .s5-question::after { content: none; }
#board.sin-foto .s5-question { padding-top: clamp(14px, 2.4vh, 22px); }
#board .s5-question > span { transition: opacity .22s ease; }
/* mientras se enseña la explicación, el enunciado se apaga (sigue ahí: así la
   losa conserva su alto y no se mueve nada) */
#board .s5-question.q-explica > span { opacity: 0; }

/* ── las tres respuestas, iguales ── */
#board .s5-options {
  padding: clamp(12px, 2vh, 18px) var(--duq-mx) clamp(10px, 1.6vh, 16px);
  max-width: none; gap: clamp(8px, 1.5vh, 12px);
}
#board .option-btn {
  display: flex; align-items: center; gap: clamp(10px, 3vw, 14px);
  min-height: 58px; padding: 8px 18px 8px 9px;
  border-radius: 999px; border: 1.5px solid rgba(212,168,67,.82);
  background: linear-gradient(180deg, #25211a, #100e0b 60%, #17140f);
  background-size: auto !important;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 12px rgba(243,210,122,.14), 0 6px 14px rgba(0,0,0,.6);
  transition: border-color .25s ease, box-shadow .25s ease, opacity .3s ease, background .25s ease;
}
#board .option-btn:not(:disabled):hover,
#board .option-btn:not(:disabled):active { transform: none; }
#board .option-btn:not(:disabled):active { border-color: #ffe7a0; }
#board .option-letter {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: clamp(36px, 5vh, 46px); height: clamp(36px, 5vh, 46px); border-radius: 50%;
  font: 400 clamp(.9rem, 2.2vh, 1.1rem)/1 var(--font-display); color: #1a1005;
  background: radial-gradient(circle at 36% 28%, #fff6d0, #f3d27a 38%, #c8962f 75%, #8a6116);
  box-shadow: 0 0 0 2px #0c0a07, 0 0 0 3.5px rgba(243,210,122,.55), 0 0 12px rgba(243,210,122,.4);
  transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
/* la letra de la respuesta sigue a la del botón, que es la que ajusta
   duelo/pregunta-fit.js (--tamo) */
#board .option-text { color: #fbf6ea; font-weight: 700; font-size: .94em; }

/* tocada: solo el filo se enciende (sin crecer: nada se mueve) */
#board .option-btn.selected { animation: none; filter: none; border-color: #ffe7a0;
  box-shadow: 0 0 0 1px #ffe7a0, 0 0 18px rgba(255,227,168,.55), 0 6px 14px rgba(0,0,0,.6); }
#board .option-btn.selected::after { content: none; }

/* la buena: verde con brillo */
#board .option-btn.correct{
  opacity: 1; filter: none; transform: none;
  border-color: #5ef08f;
  background: linear-gradient(180deg, #154a2b, #07200f 60%, #0d3019);
  box-shadow: 0 0 0 1px #5ef08f, 0 0 22px rgba(74,222,128,.7), 0 0 46px rgba(74,222,128,.3), inset 0 1px 0 rgba(255,255,255,.12);
  animation: none;
}
#board .option-btn.correct .option-letter{
  color: #03210e; background: radial-gradient(circle at 36% 28%, #eaffef, #6ff09b 40%, #22a653 78%, #0f6b31);
  box-shadow: 0 0 0 2px #04150a, 0 0 0 3.5px rgba(110,240,155,.6), 0 0 14px rgba(74,222,128,.6);
}
/* el brillo late en una capa aparte y solo cambia su opacidad (60 fps) */
#board .option-btn.correct::before{
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 30px rgba(74,222,128,.95), 0 0 60px rgba(74,222,128,.45);
  opacity: 0; animation: duqBrillo 1.1s ease-in-out 2;
}
@keyframes duqBrillo { 50% { opacity: 1; } }
/* la tuya, si fallas: roja y un temblor corto (solo ella) */
#board .option-btn.wrong{
  opacity: 1; filter: none;
  border-color: #ff5a5a;
  background: linear-gradient(180deg, #4d1616, #200707 60%, #301010);
  box-shadow: 0 0 0 1px #ff5a5a, 0 0 20px rgba(255,70,70,.65), inset 0 1px 0 rgba(255,255,255,.1);
  animation: duqTiembla 320ms ease-in-out;
}
#board .option-btn.wrong .option-letter{
  color: #2a0303; background: radial-gradient(circle at 36% 28%, #ffe3e3, #ff7a7a 40%, #cc2f2f 78%, #7d1212);
  box-shadow: 0 0 0 2px #1a0404, 0 0 0 3.5px rgba(255,110,110,.6), 0 0 14px rgba(255,70,70,.55);
}
@keyframes duqTiembla { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { transform: none; } }
/* el resto, apagado un poco */
#board #opts:has(.correct) .option-btn:not(.correct):not(.wrong) { opacity: .42; filter: saturate(.4); }

/* ── la explicación del fallo, DENTRO de la losa ── */
#board .santi-panel.santi-losa {
  position: absolute; z-index: 4; margin: 0; max-width: none; max-height: none;
  left: 0; top: 0; right: auto; bottom: auto;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 1.4vh, 14px) clamp(12px, 3.6vw, 22px);
  background: none; border: 0; border-radius: 0; box-shadow: none;
  overflow: hidden; opacity: 0; transform: none;
  font-size: var(--exp, 1rem);
}
/* cuando no cabe, crece hacia arriba sobre el marco de la foto (nunca hacia
   las respuestas) y se vuelve losa ella misma: negro macizo con su filo */
#board .santi-panel.santi-losa.crece {
  background: linear-gradient(180deg, #0b0b0e, #030304);
  border-top: 2px solid var(--duq-oro); border-radius: 4px;
  box-shadow: 0 -12px 30px rgba(0,0,0,.8);
}
#board .santi-panel.santi-losa.show { animation: none; opacity: 1; transition: opacity .25s ease .12s; }
#board .santi-panel.santi-losa.hide { animation: none; opacity: 0; transition: opacity .2s ease; }
#board .santi-losa .santi-body {
  width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  display: flex; flex-direction: column; align-items: center; gap: .5em; text-align: center;
}
#board .santi-losa .santi-body::-webkit-scrollbar { display: none; }
#board .santi-losa .santi-etq {
  margin: 0; font: 800 .72em/1 'DM Sans', system-ui, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: #6ff09b;
}
#board .santi-losa .santi-etq b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9em; height: 1.9em; margin-left: .3em; border-radius: 50%; vertical-align: middle;
  font: 400 1em/1 var(--font-display); letter-spacing: 0; color: #03210e;
  background: radial-gradient(circle at 36% 28%, #eaffef, #6ff09b 40%, #22a653 78%);
}
#board .santi-losa .santi-text { color: #f4efe4; font: 600 1em/1.35 'DM Sans', system-ui, sans-serif; }
#board .santi-losa .santi-ok {
  margin: .15em 0 0; flex: none; padding: .62em 1.6em; border: 0; border-radius: 999px; cursor: pointer;
  font: 900 .78em/1 'DM Sans', system-ui, sans-serif; letter-spacing: .12em; color: #1a1005;
  background: linear-gradient(180deg, #fff0c0, #f3d27a 38%, #d4a843);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.25), 0 0 16px rgba(243,210,122,.45);
}

/* ── nada sacude la pantalla mientras está el tablero ── */
body:has(#board.active-screen) .duel-shell.jx3-shake-1,
body:has(#board.active-screen) .duel-shell.jx3-shake-2,
body:has(#board.active-screen) .duel-shell.jx3-shake-3 { animation: none !important; }

@media (min-width: 700px) {
  #board .option-btn { min-height: 74px; padding-left: 12px; font-size: var(--tamo, 1.3rem); }
}