/* Trivial de Historia y Leyenda — estilo oscuro cinemático de la portada.
   Solo se animan transform y opacity para que vaya fluido incluso en móviles modestos. */

.tv-page{background:#090807}
.tv{
  --ok:#5fae7c;--ok-bg:rgba(95,174,124,.14);
  --ko:#d4463f;--ko-bg:rgba(212,70,63,.14);
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;padding:clamp(108px,14vh,140px) 20px clamp(60px,8vh,90px);
  color:var(--h-text);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(195,154,97,.16),transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(148,29,25,.12),transparent 70%),
    #090807;
}
.tv-embers{z-index:-1}
.tv kbd{display:inline-block;min-width:1.7em;padding:2px 6px;border:1px solid rgba(225,189,130,.4);border-bottom-width:2px;border-radius:5px;color:var(--gold2);background:rgba(225,189,130,.06);font:700 .72rem/1.3 var(--sans);text-align:center}
.tv-keyhint{margin:14px 0 0;color:var(--h-mute);font-size:.82rem}
@media (hover:none){.tv-keyhint{display:none}}

/* ---------- Pantallas ---------- */
.tv-screen{width:min(880px,100%);margin:0 auto}
.tv-screen.is-active{animation:tv-rise .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes tv-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- Portada ---------- */
.tv-intro{text-align:center}
.tv-intro h1{max-width:760px;margin:0 auto;font-family:var(--display);font-size:clamp(2.8rem,7vw,5.2rem);font-weight:600;line-height:.98;letter-spacing:-.015em;text-wrap:balance}
.tv-intro h1 em{color:var(--gold2);font-style:italic;font-weight:500}
.tv-lead{max-width:560px;margin:22px auto 0;color:var(--h-soft);font-size:clamp(1rem,2vw,1.15rem);line-height:1.65}
.tv-path{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:52px 0 0;padding:0;list-style:none;counter-reset:tvp}
.tv-path::before{position:absolute;top:13px;left:12%;right:12%;height:1px;content:"";background:linear-gradient(90deg,transparent,var(--gold) 10%,var(--gold) 90%,transparent);opacity:.6}
.tv-path li{position:relative;padding-top:38px;animation:tv-rise .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.25s + var(--i,0) * .12s)}
.tv-path li:nth-child(2){--i:1}.tv-path li:nth-child(3){--i:2}.tv-path li:nth-child(4){--i:3}
.tv-path li::before{position:absolute;top:6px;left:50%;width:15px;height:15px;margin-left:-7.5px;content:"";border:1px solid var(--gold);border-radius:50%;background:#0f0c0a;box-shadow:0 0 0 4px #090807}
.tv-path li:last-child::before{background:var(--gold2);box-shadow:0 0 0 4px #090807,0 0 18px 4px rgba(225,189,130,.55);animation:h-breathe 3s ease-in-out infinite}
.tv-path b{display:block;font-family:var(--display);font-size:clamp(1.05rem,2vw,1.35rem);font-weight:600;line-height:1.1}
.tv-path li:last-child b{color:var(--gold2)}
.tv-path small{display:block;margin-top:5px;color:var(--h-mute);font-size:.72rem;letter-spacing:.06em}
.tv-intro-actions{margin-top:48px}
.tv-start{min-width:220px;font-size:.85rem}
.tv-start:disabled{opacity:.5;cursor:wait}

/* ---------- Barra superior de la partida ---------- */
.tv-top{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.tv-progress{display:flex;flex:1;gap:5px;margin:0;padding:0;list-style:none}
.tv-progress li{position:relative;flex:1;height:5px;overflow:hidden;border-radius:3px;background:rgba(225,189,130,.13)}
.tv-progress li:nth-child(5),.tv-progress li:nth-child(9){margin-left:9px}
.tv-progress li::after{position:absolute;inset:0;content:"";transform:scaleX(0);transform-origin:left;background:var(--gold2);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s}
.tv-progress li.is-current::after{transform:scaleX(.35);background:rgba(225,189,130,.55)}
.tv-progress li.is-ok::after{transform:scaleX(1);background:var(--ok)}
.tv-progress li.is-ko::after{transform:scaleX(1);background:var(--ko)}
.tv-top-right{display:flex;align-items:center;gap:12px}
.tv-score{display:inline-flex;align-items:center;gap:7px;min-width:52px;color:var(--gold2);font-family:var(--display);font-size:1.6rem;font-weight:600;line-height:1}
.tv-score::before{content:"✦";font-size:.95rem}
.tv-score.is-bump{animation:tv-bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes tv-bump{40%{transform:scale(1.35)}}
.tv-sound{display:grid;width:40px;height:40px;place-items:center;padding:0;border:1px solid rgba(225,189,130,.3);border-radius:50%;color:var(--h-soft);background:transparent;cursor:pointer;transition:color .2s,border-color .2s}
.tv-sound:hover{color:var(--gold2);border-color:var(--gold2)}
.tv-sound .tv-sound-off{display:none}
.tv-sound[aria-pressed="false"] .tv-sound-waves{display:none}
.tv-sound[aria-pressed="false"] .tv-sound-off{display:inline}

/* ---------- Tarjeta de pregunta ---------- */
.tv-card{position:relative;padding:clamp(24px,4.5vw,46px);border:1px solid var(--h-line);border-radius:14px;background:linear-gradient(160deg,#17120e 0%,#100d0a 60%,#0d0a08 100%);box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(225,189,130,.08)}
.tv-card::before{position:absolute;top:0;left:10%;right:10%;height:1px;content:"";background:linear-gradient(90deg,transparent,var(--gold2),transparent);opacity:.55}
.tv-card.is-in{animation:tv-in .5s cubic-bezier(.2,.8,.2,1) both}
.tv-card.is-out{animation:tv-out .28s cubic-bezier(.5,0,.75,0) both}
@keyframes tv-in{from{opacity:0;transform:translateX(46px) rotate(.6deg)}to{opacity:1;transform:none}}
@keyframes tv-out{to{opacity:0;transform:translateX(-46px) rotate(-.6deg)}}

.tv-era{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.tv-era img{width:46px;height:46px;border:2px solid #120e0b;border-radius:50%;object-fit:cover;outline:1px solid rgba(225,189,130,.55)}
.tv-era b{display:block;color:var(--gold2);font-size:.72rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.tv-era small{display:block;margin-top:3px;color:var(--h-mute);font-size:.78rem}
.tv-q{margin:0 0 28px;font-family:var(--display);font-size:clamp(1.65rem,3.6vw,2.45rem);font-weight:600;line-height:1.12;text-wrap:balance}

.tv-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.tv-opt{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 16px;overflow:hidden;border:1px solid rgba(225,189,130,.22);border-radius:10px;color:var(--h-text);background:rgba(255,255,255,.025);font:600 1rem/1.3 var(--sans);text-align:left;cursor:pointer;animation:tv-rise .42s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.12s + var(--i,0) * .06s);transition:transform .18s,border-color .18s,background .18s,opacity .3s}
.tv-opt:hover:not(:disabled),.tv-opt:focus-visible{border-color:var(--gold2);background:rgba(225,189,130,.07);transform:translateY(-2px)}
.tv-opt:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.tv-opt.is-pressed{transform:scale(.97)}
.tv-opt:disabled{cursor:default}
.tv-key{display:grid;flex:0 0 34px;height:34px;place-items:center;border:1px solid rgba(225,189,130,.45);border-radius:50%;color:var(--gold2);font:800 .82rem/1 var(--sans);transition:background .25s,color .25s,border-color .25s}
.tv-opt:hover:not(:disabled) .tv-key{color:#090807;background:var(--gold2);border-color:var(--gold2)}

.tv-opt.is-ok{border-color:var(--ok);background:var(--ok-bg);animation:tv-glow .9s ease-out}
.tv-opt.is-ok .tv-key{color:#090807;background:var(--ok);border-color:var(--ok)}
.tv-opt.is-ko{border-color:var(--ko);background:var(--ko-bg);animation:tv-shake .42s ease-in-out}
.tv-opt.is-ko .tv-key{color:#fff;background:var(--ko);border-color:var(--ko)}
.tv-opt.is-dim{opacity:.38;animation:none}
@keyframes tv-glow{0%{box-shadow:0 0 0 0 rgba(95,174,124,.6)}100%{box-shadow:0 0 0 14px rgba(95,174,124,0)}}
@keyframes tv-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* Chispas al acertar */
.tv-spark{position:absolute;top:50%;left:34px;z-index:2;width:5px;height:5px;border-radius:50%;background:#f3d9a8;box-shadow:0 0 8px 2px rgba(240,184,98,.7);pointer-events:none;animation:tv-burst .7s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes tv-burst{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3)}}

/* Dato curioso tras responder */
.tv-fact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;align-items:center;margin-top:24px;padding-top:22px;border-top:1px solid var(--h-line);animation:tv-rise .4s cubic-bezier(.2,.8,.2,1) both}
.tv-verdict{margin:0 0 6px;font-family:var(--display);font-size:1.55rem;font-weight:600;line-height:1}
.tv-verdict.ok{color:var(--ok)}
.tv-verdict.ko{color:#e8746d}
.tv-fact p.tv-x{margin:0;color:var(--h-soft);font-size:1rem;line-height:1.55}
.tv-fact p.tv-x::before{content:"¿Sabías que…? ";color:var(--gold2);font-weight:800}
.tv-fact a{display:inline-block;margin-top:8px;color:var(--gold2);font-size:.78rem;font-weight:900;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.tv-fact a:hover{color:#fff}
.tv-next{white-space:nowrap}
.tv-next kbd{margin-left:8px;border-color:rgba(255,255,255,.35);color:#fff;background:rgba(0,0,0,.15)}
@media (hover:none){.tv-next kbd{display:none}}

/* ---------- Resultado ---------- */
.tv-result{text-align:center}
.tv-medal{position:relative;display:grid;width:170px;height:170px;margin:0 auto 16px;place-items:center}
.tv-medal img{position:relative;width:150px;height:auto;object-fit:contain;animation:tv-pop .8s cubic-bezier(.3,1.4,.5,1) both}
.tv-medal-halo{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(225,189,130,.35) 0%,rgba(225,189,130,.08) 45%,transparent 70%);animation:h-breathe 4s ease-in-out infinite}
.tv-result[data-tier="0"] .tv-medal img{filter:grayscale(.85) brightness(.75)}
.tv-result[data-tier="1"] .tv-medal img{filter:grayscale(.35) brightness(.9)}
.tv-result[data-tier="3"] .tv-medal-halo{inset:-30px;background:radial-gradient(circle,rgba(240,190,110,.6) 0%,rgba(225,189,130,.15) 45%,transparent 70%)}
@keyframes tv-pop{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}
.tv-rank{margin:0;font-family:var(--display);font-size:clamp(3rem,9vw,6rem);font-weight:600;line-height:.95;letter-spacing:-.01em;animation:tv-reveal 1s .25s cubic-bezier(.2,.8,.2,1) both}
.tv-result[data-tier="3"] .tv-rank{color:var(--gold2);text-shadow:0 0 40px rgba(225,189,130,.35)}
@keyframes tv-reveal{from{opacity:0;letter-spacing:.18em;transform:translateY(10px)}to{opacity:1;letter-spacing:-.01em;transform:none}}
.tv-final-score{margin:16px 0 0;color:var(--gold2);font-family:var(--display);font-size:3rem;font-weight:600;line-height:1}
.tv-final-score small{color:var(--h-mute);font-size:1.6rem}
.tv-phrase{max-width:560px;margin:16px auto 0;color:var(--h-soft);font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.45rem);font-style:italic;line-height:1.45}
.tv-dots{display:flex;justify-content:center;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.tv-dots li{width:12px;height:12px;border-radius:50%;animation:tv-pop .4s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:calc(.6s + var(--i,0) * .07s)}
.tv-dots li:nth-child(5),.tv-dots li:nth-child(9){margin-left:8px}
.tv-dots .ok{background:var(--ok)}
.tv-dots .ko{background:transparent;box-shadow:inset 0 0 0 2px var(--ko)}
.tv-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.tv-toast{min-height:1.4em;margin:12px 0 0;color:var(--gold2);font-size:.85rem}

.tv-review{max-width:760px;margin:46px auto 0;text-align:left}
.tv-review h3{margin:0 0 16px;font-family:var(--display);font-size:1.8rem;font-weight:600;text-align:center}
.tv-review ol{margin:0;padding:0;list-style:none}
.tv-review li{padding:16px 4px;border-bottom:1px solid rgba(225,189,130,.14)}
.tv-review li small{color:var(--gold);font-size:.66rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.tv-review li p{margin:5px 0 0;line-height:1.45}
.tv-review .tv-rq{color:var(--h-text);font-weight:600}
.tv-review .tv-ra{color:var(--h-soft)}
.tv-review .tv-ra b{color:var(--ok)}
.tv-review .tv-ra s{color:#e8746d;text-decoration-thickness:1px}
.tv-review a{color:var(--gold2);font-size:.75rem;font-weight:900;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.tv-review a:hover{color:#fff}
.tv-perfect{color:var(--gold2);font-family:var(--display);font-size:1.4rem;font-style:italic;text-align:center}

/* ---------- Utilidades ---------- */
.tv .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}

/* ---------- Móvil ---------- */
@media (max-width:680px){
  .tv{padding-top:100px}
  .tv-path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .tv-path::before{display:none}
  .tv-options{grid-template-columns:1fr;gap:10px}
  .tv-opt{min-height:56px}
  .tv-fact{grid-template-columns:1fr}
  .tv-next{width:100%}
  .tv-result-actions .button{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  .tv *,.tv *::before,.tv *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .tv-embers{display:none}
}
.tv-q:focus{outline:none}
.tv-score,.tv-final-score,.tv-path small{font-variant-numeric:lining-nums}
.tv-next:focus-visible,.tv-result-actions .button:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.tv-next:focus:not(:focus-visible),.tv-result-actions .button:focus:not(:focus-visible){outline:none}