/* Pregunta del Duelo · «Combate» (games/duelo/pregunta-escena.js), la que
   eligió Nico el 30-sep-2026 (raíles y marcador, borradas).
   Va encima de css/duelo-pregunta.css (que sigue poniendo la losa, la
   corrección dentro de la losa y los colores de acierto y fallo).
   Mismo lenguaje que «Elige tu rival» Lucha y la ruleta: rayas diagonales,
   Syne en cursiva, piezas inclinadas; azul = tú, --rc = el rival (color de
   su dificultad), --tc = el tema de la porción. Solo transform/opacity. */

#board.pq{ --tc:#d4a843; --rc:#ffb020; --azul:#3b82f6; --pop:cubic-bezier(.3,1.6,.5,1); --cae:cubic-bezier(.2,.9,.3,1.25);
  background:#060608; isolation:isolate; }
#board.pq > *{ position:relative; z-index:2; }
#board.pq > .s3-beams, #board.pq > .duq-barra{ display:none; }
#board.pq .pq-fondo{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(80% 40% at 50% 34%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #0a0a12, #060608 60%); }
#board.pq .pq-rayas{ position:absolute; inset:-20% -40%; opacity:.14;
  background:repeating-linear-gradient(-62deg, transparent 0 34px, var(--tc) 34px 37px, transparent 37px 80px);
  animation:pqRayas 7s linear infinite; }
@keyframes pqRayas{ to{ transform:translate3d(-80px,0,0); } }

/* ── HUD común ── */
#board.pq .pq-hud{ z-index:4; flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(6px,2vw,14px);
  margin:0 var(--duq-mx) clamp(6px,1vh,10px); }
#board.pq .pq-lado{ display:flex; align-items:center; gap:clamp(6px,1.8vw,10px); min-width:0; }
#board.pq .pq-el{ flex-direction:row-reverse; }
#board.pq .pq-cara{ flex:none; position:relative; width:clamp(40px,11vw,64px); aspect-ratio:1; overflow:hidden; border-radius:8px; transform:skewX(-8deg);
  border:2px solid var(--rc); background:linear-gradient(180deg, color-mix(in srgb, var(--rc) 45%, #0a0a10), #0a0a10); box-shadow:0 0 16px -4px var(--rc); }
#board.pq .pq-cara img{ position:absolute; left:50%; top:4%; height:300%; width:auto; max-width:none; transform:translateX(-50%) skewX(8deg); }
#board.pq .pq-cara-yo{ border-color:var(--azul); background:linear-gradient(160deg, #1d4fb8, #0a1430); box-shadow:0 0 16px -4px var(--azul); display:grid; place-items:center; }
#board.pq .pq-cara-yo{ overflow:visible; }
#board.pq .pq-cara-yo b{ padding-top:.18em; transform:skewX(8deg); font:800 italic clamp(1.05rem,5vw,1.7rem)/1.1 'Syne',sans-serif; color:#fff; text-shadow:2px 2px 0 #0b2a6b; }
#board.pq .pq-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
#board.pq .pq-el .pq-info{ align-items:flex-end; }
#board.pq .pq-nom{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transform:skewX(-8deg);
  font:800 italic clamp(.8rem,3.4vw,1.2rem)/1.05 'Syne',sans-serif; text-transform:uppercase; color:#fff; }
#board.pq .pq-yo .pq-nom{ text-shadow:2px 2px 0 #1d4fb8; }
#board.pq .pq-el .pq-nom{ text-shadow:2px 2px 0 color-mix(in srgb, var(--rc) 80%, #000); }
#board.pq .pq-barra{ display:flex; gap:2px; width:100%; transform:skewX(-20deg); padding:2px; box-sizing:border-box; border-radius:3px;
  background:rgba(0,0,0,.55); box-shadow:inset 0 0 0 1px rgba(59,130,246,.55); }
#board.pq .pq-el .pq-barra{ flex-direction:row-reverse; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rc) 60%, transparent); }
#board.pq .pq-barra i{ flex:1; height:clamp(8px,1.2dvh,12px); background:rgba(255,255,255,.14); }
#board.pq .pq-barra i.on{ background:var(--wc); box-shadow:0 0 7px var(--wc); }
#board.pq .pq-n{ display:none; }
#board.pq .pq-centro{ display:flex; flex-direction:column; align-items:center; gap:3px; }
#board.pq .duq-ronda{ font-size:clamp(.62rem,2.5vw,.78rem); letter-spacing:.14em; color:#bdb4a2; }
/* el reloj del juego, restilado por propuesta */
#board.pq #timerRing{ position:relative; top:auto; right:auto; left:auto; flex:none; }
#board.pq .s5-timer-ticks{ display:none; }

/* el tema, con su color */
#board.pq .pq-tema{ flex:none; display:flex; align-items:center; justify-content:center; gap:10px; margin:0 var(--duq-mx) clamp(6px,1vh,10px); }
#board.pq .pq-tema-ico{ flex:none; display:grid; place-items:center; width:clamp(26px,7vw,36px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 30%, #fffaf0, color-mix(in srgb, var(--tc) 40%, #f3e2b4) 60%, var(--tc)); box-shadow:0 0 12px var(--tc); }
#board.pq .pq-tema-ico svg{ width:62%; height:62%; }
#board.pq .pq-tema b{ font:800 italic clamp(1.3rem,6.4vw,2.4rem)/1 'Syne',sans-serif; text-transform:uppercase; white-space:nowrap; color:#fff; transform:skewX(-8deg);
  text-shadow:3px 3px 0 color-mix(in srgb, var(--tc) 80%, #000), 0 0 22px color-mix(in srgb, var(--tc) 65%, transparent), 0 4px 14px rgba(0,0,0,.9); }

/* la foto: marco del color del tema (la foto entera, nada encima) */
#board.pq .s5-image-frame{ border-color:color-mix(in srgb, var(--tc) 80%, #fff); box-shadow:0 0 0 1px rgba(0,0,0,.85), 0 0 22px color-mix(in srgb, var(--tc) 30%, transparent), 0 16px 32px rgba(0,0,0,.7); }
#board.pq .s5-image-frame::before, #board.pq .s5-image-frame::after{ display:none; }
#board.pq .s5-image-frame{ padding:clamp(5px,.9vh,8px); }
/* la losa: filo del tema */
#board.pq .s5-question{ border-top-color:var(--tc); border-bottom-color:var(--tc); }

/* aviso sobre el rival cuando juega por dentro */
#board.pq .pq-lado{ position:relative; }
#board.pq .pq-aviso{ position:absolute; top:100%; margin-top:4px; z-index:5; padding:4px 9px; border-radius:6px; white-space:nowrap; transform:skewX(-8deg);
  font:800 clamp(.72rem,3vw,.9rem)/1 'DM Sans',sans-serif; color:#fff; background:color-mix(in srgb, var(--rc) 70%, #000); box-shadow:0 0 14px var(--rc);
  animation:pqAviso 1200ms ease-out both; }
#board.pq .pq-el .pq-aviso{ right:0; }
@keyframes pqAviso{ 0%{ opacity:0; transform:skewX(-8deg) translateY(-8px) scale(1.4); } 15%{ opacity:1; transform:skewX(-8deg) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:skewX(-8deg) translateY(-6px); } }
#board.pq .pq-golpe .pq-cara{ animation:pqCara 420ms var(--pop); }
@keyframes pqCara{ 0%{ transform:skewX(-8deg) scale(1.25); } 100%{ transform:skewX(-8deg); } }
#board.pq i.pq-nueva{ animation:pqSeg 460ms var(--pop); }
@keyframes pqSeg{ 0%{ transform:scale(1,2.4); opacity:.2; } 60%{ transform:scale(1,.8); opacity:1; } 100%{ transform:none; } }
#board.pq .pq-sube{ animation:pqSube 420ms var(--pop); }
@keyframes pqSube{ 0%{ transform:skewX(-8deg) scale(1.8); } 100%{ transform:skewX(-8deg); } }

/* ═════════ 1 · COMBATE ═════════ */
#board.pq-v1 .pq-cara{ width:clamp(44px,11.6vw,72px); }
#board.pq-v1 .pq-barra i{ height:clamp(10px,1.5dvh,14px); }
#board.pq-v1 #timerRing{ width:clamp(48px,13vw,72px); height:clamp(48px,13vw,72px); border-radius:8px; transform:skewX(-8deg);
  background:linear-gradient(180deg, #1b1407, #0a0804); box-shadow:0 0 0 2px #d4a843, 0 0 16px rgba(246,208,106,.5); }
#board.pq-v1 #timerRing .s5-timer-ring{ display:none; }
#board.pq-v1 #timerRing .s5-timer-num{ position:absolute; inset:0; display:grid; place-items:center; transform:skewX(8deg);
  font:800 italic clamp(1.5rem,7vw,2.5rem)/1 'Syne',sans-serif; color:#fff6d8; text-shadow:2px 2px 0 #6b4a10, 0 0 12px rgba(246,208,106,.7); }
#board.pq-v1 .pq-tema{ position:relative; padding:6px 0; }
#board.pq-v1 .pq-tema::before{ content:""; position:absolute; inset:0 -6%; z-index:-1; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--tc) 50%, #000) 14%, color-mix(in srgb, var(--tc) 50%, #000) 86%, transparent);
  box-shadow:0 0 22px color-mix(in srgb, var(--tc) 45%, transparent); }
#board.pq-v1 .s5-image-frame{ transform:skewX(-3deg); border-radius:10px; }
#board.pq-v1 .q-image-wrap{ transform:skewX(3deg); }
#board.pq-v1 .option-btn{ border-radius:10px; transform:skewX(-6deg); padding-left:6px; }
#board.pq-v1 .option-btn > *{ transform:skewX(6deg); }
#board.pq-v1 .option-letter{ border-radius:7px; }
#board.pq-v1 .option-btn:not(:disabled):active{ transform:skewX(-6deg) scale(.98); }
#board.pq-v1 .option-btn:not(:disabled):hover, #board.pq-v1 .option-btn.correct, #board.pq-v1 .option-btn.wrong, #board.pq-v1 .option-btn.selected{ transform:skewX(-6deg); }
/* entrada: los dos lados chocan, el reloj cae, la franja del tema se estampa */
#board.pq-v1.pq-entra .pq-yo{ animation:pqDeIzq 420ms var(--cae) both; }
#board.pq-v1.pq-entra .pq-el{ animation:pqDeDer 420ms var(--cae) 60ms both; }
#board.pq-v1.pq-entra .pq-centro{ animation:pqCae 440ms var(--pop) 180ms both; }
#board.pq-v1.pq-entra .pq-tema{ animation:pqSello 480ms var(--pop) 260ms both; }

/* ═════════ entradas comunes ═════════ */
#board.pq.pq-entra .s5-image-frame{ animation:pqFoto 460ms var(--cae) 200ms backwards; }
#board.pq.pq-entra .s5-question{ animation:pqSubeY 380ms var(--cae) 300ms backwards; }
#board.pq.pq-entra .option-btn{ animation:pqOpt 440ms var(--cae) backwards; }
#board.pq.pq-entra .option-btn:nth-child(1){ animation-delay:380ms; }
#board.pq.pq-entra .option-btn:nth-child(2){ animation-delay:460ms; }
#board.pq.pq-entra .option-btn:nth-child(3){ animation-delay:540ms; }
#board.pq.pq-entra .option-btn:nth-child(4){ animation-delay:620ms; }
@keyframes pqDeIzq{ from{ opacity:0; transform:translateX(-60%); } to{ opacity:1; transform:none; } }
@keyframes pqDeDer{ from{ opacity:0; transform:translateX(60%); } to{ opacity:1; transform:none; } }
@keyframes pqCae{ 0%{ opacity:0; transform:translateY(-80%) scale(1.3); } 70%{ opacity:1; transform:translateY(4%) scale(.96); } 100%{ opacity:1; transform:none; } }
@keyframes pqSello{ 0%{ opacity:0; transform:scale(2.2); } 60%{ opacity:1; transform:scale(.94); } 100%{ opacity:1; transform:none; } }
@keyframes pqFoto{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; } }
@keyframes pqSubeY{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; } }
@keyframes pqOpt{ 0%{ opacity:0; transform:translateY(40px); } 70%{ opacity:1; transform:translateY(-3px); } 100%{ opacity:1; } }
/* v1: las cartas llevan su inclinación también al entrar */
#board.pq-v1.pq-entra .option-btn{ animation-name:pqOpt1; }
@keyframes pqOpt1{ 0%{ opacity:0; transform:skewX(-6deg) translateY(40px); } 70%{ opacity:1; transform:skewX(-6deg) translateY(-3px); } 100%{ opacity:1; transform:skewX(-6deg); } }
#board.pq-v1.pq-entra .s5-image-frame{ animation-name:pqFoto1; }
@keyframes pqFoto1{ from{ opacity:0; transform:skewX(-3deg) scale(.9); } to{ opacity:1; transform:skewX(-3deg); } }

@media (prefers-reduced-motion:reduce){
  #board.pq *, #board.pq{ animation:none !important; }
}

/* nombres enteros y a ≥12 px (30-sep) */
#board.pq-v1 .pq-hud{ gap:clamp(4px,1.4vw,14px); }
@media (max-width:380px){ #board.pq-v1 .pq-cara{ width:40px; } #board.pq-v1 #timerRing{ width:44px; height:44px; } }