:root{
  --fondo:#0e0a1f; --panel:#1a1332; --panel-2:#241a45; --borde:#3a2d66;
  --texto:#f2eeff; --texto-suave:#b6abd8; --oro:#f5c542; --oro-osc:#c99a1e;
  --verde:#2ecc71; --rojo:#ff5470; --radio:14px;
  --sombra:0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,"Segoe UI",Roboto,Inter,sans-serif;background:
  radial-gradient(1200px 600px at 80% -10%, #2a1d5c 0%, transparent 60%),
  radial-gradient(900px 500px at -10% 30%, #1f1444 0%, transparent 55%),
  var(--fondo);
  color:var(--texto);line-height:1.6;min-height:100vh}
.cabecera{display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,4vw,40px);max-width:980px;margin:0 auto}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;color:var(--oro)}
.record-chip{background:var(--panel);border:1px solid var(--borde);border-radius:999px;padding:6px 14px;font-size:.8rem;color:var(--texto-suave)}
.record-chip strong{color:var(--oro)}
main{max-width:760px;margin:0 auto;padding:0 20px 48px}

.hero{text-align:center;padding:clamp(12px,4vh,36px) 0 8px;animation:entrar .5s ease both}
.kicker{color:var(--oro);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;margin-bottom:10px}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,6vw,3.2rem);letter-spacing:-.01em;line-height:1.1;margin-bottom:12px}
.sub{color:var(--texto-suave);max-width:520px;margin:0 auto 22px;font-size:clamp(.95rem,2.5vw,1.05rem)}

.panel{background:linear-gradient(180deg,var(--panel) 0%,#150f2b 100%);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:clamp(18px,4vw,28px)}
.panel-inicio{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.opciones-partida{display:flex;justify-content:center}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem;color:var(--texto-suave)}
.toggle input{position:absolute;opacity:0}
.toggle-pista{width:44px;height:24px;border-radius:999px;background:var(--panel-2);border:1px solid var(--borde);position:relative;transition:background .2s;flex-shrink:0}
.toggle-pista::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--texto-suave);transition:transform .2s,background .2s}
.toggle input:checked+.toggle-pista{background:var(--oro-osc)}
.toggle input:checked+.toggle-pista::after{transform:translateX(20px);background:#fff}
.toggle input:focus-visible+.toggle-pista{outline:2px solid var(--oro);outline-offset:2px}

.btn{border:none;border-radius:10px;padding:14px 26px;font-size:1rem;font-weight:700;cursor:pointer;min-height:48px;transition:transform .15s,box-shadow .15s,filter .15s;letter-spacing:.02em}
.btn:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.btn-primario{background:linear-gradient(180deg,var(--oro),var(--oro-osc));color:#1a1332;box-shadow:0 6px 18px rgba(245,197,66,.25)}
.btn-primario:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(245,197,66,.35)}
.btn-secundario{background:transparent;color:var(--texto);border:1px solid var(--borde)}
.btn-secundario:hover{border-color:var(--oro);color:var(--oro)}
.btn-siguiente{background:var(--panel-2);color:var(--oro);border:1px solid var(--borde);width:100%;margin-top:14px}
.btn-siguiente:hover{border-color:var(--oro)}
.nota-inicio{font-size:.78rem;color:var(--texto-suave);text-align:center}

.juego-cabecera{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.82rem;color:var(--texto-suave);margin-bottom:10px}
.aciertos{color:var(--verde);font-weight:700}
.temporizador{background:var(--rojo);color:#fff;font-weight:700;border-radius:999px;padding:3px 12px;animation:pulso 1s infinite}
@keyframes pulso{50%{opacity:.65}}
.barra-progreso{height:8px;background:var(--panel-2);border-radius:999px;overflow:hidden;margin-bottom:20px}
.barra-relleno{height:100%;width:0;background:linear-gradient(90deg,var(--oro),#ffe08a);border-radius:999px;transition:width .35s ease}
.pregunta{font-family:Georgia,serif;font-size:clamp(1.15rem,3.5vw,1.5rem);line-height:1.35;margin-bottom:18px;min-height:2.6em}
.respuestas{display:grid;gap:10px}
.respuesta{display:block;width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--borde);border-radius:10px;padding:13px 16px;color:var(--texto);font-size:.98rem;cursor:pointer;min-height:48px;transition:border-color .2s,transform .15s,background .2s}
.respuesta:hover:not(:disabled){border-color:var(--oro);transform:translateX(4px)}
.respuesta:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.respuesta:disabled{cursor:default;opacity:.85}
.respuesta-correcta{background:rgba(46,204,113,.16)!important;border-color:var(--verde)!important;color:#c9f7dd}
.respuesta-incorrecta{background:rgba(255,84,112,.14)!important;border-color:var(--rojo)!important;color:#ffd3db}
.feedback{margin-top:16px;padding:14px 16px;border-radius:10px;border-left:3px solid var(--oro);background:rgba(245,197,66,.07);animation:entrar .3s ease both}
.feedback-titulo{font-weight:700;margin-bottom:4px}
.feedback-titulo.ok{color:var(--verde)} .feedback-titulo.mal{color:var(--rojo)}
.feedback-dato{color:var(--texto-suave);font-size:.92rem}

.final-kicker{color:var(--oro);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:700;text-align:center}
.final-puntuacion{font-family:Georgia,serif;font-size:clamp(3rem,10vw,4.5rem);text-align:center;line-height:1;margin:8px 0}
.final-total{font-size:.45em;color:var(--texto-suave)}
.panel-final h2{text-align:center;font-size:1.2rem;margin-bottom:6px}
.final-record{text-align:center;color:var(--texto-suave);font-size:.88rem;margin-bottom:18px}
.final-botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.copiado-toast{text-align:center;color:var(--verde);font-size:.85rem;margin-top:12px}

.contenido{margin-top:44px;display:flex;flex-direction:column;gap:14px}
.contenido h2{font-family:Georgia,serif;font-size:1.35rem;color:var(--oro);margin-top:14px}
.contenido p{color:var(--texto-suave)}
.pasos{padding-left:22px;color:var(--texto-suave);display:flex;flex-direction:column;gap:8px}
details{background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:14px 18px}
details summary{cursor:pointer;font-weight:600;min-height:24px}
details p{margin-top:8px}
.cta-suave{text-align:center;margin-top:32px;color:var(--texto-suave)}
.cta-suave a{color:var(--oro)}
.pie{text-align:center;padding:24px 20px 40px;color:var(--texto-suave);font-size:.82rem;border-top:1px solid var(--borde);max-width:760px;margin:24px auto 0}
.pie nav{margin-bottom:8px}
.pie a{color:var(--texto-suave)}

@keyframes entrar{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-color-scheme:light){
  :root{--fondo:#faf7ef;--panel:#fff;--panel-2:#f3eee0;--borde:#e2d9c2;--texto:#241d3d;--texto-suave:#6b6188;
    --sombra:0 10px 30px rgba(60,45,110,.12),0 2px 8px rgba(60,45,110,.08)}
  body{background:radial-gradient(1200px 600px at 80% -10%,#fdf3d3 0%,transparent 60%),var(--fondo)}
  .panel{background:linear-gradient(180deg,#ffffff 0%,#faf6ea 100%)}
  .btn-primario{color:#241d3d}
}