:root{
  --bg:#0b1020; --card:#141b33; --card2:#1a2342; --text:#eef2ff;
  --muted:#9aa6c7; --accent:#6c8cff; --good:#34d399; --bad:#f87171;
  --warn:#fbbf24; --radius:16px;
}
*{box-sizing:border-box}
button{touch-action:manipulation}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(1200px 600px at 20% -10%,#1b2450,transparent),var(--bg);color:var(--text);min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;position:sticky;top:0;background:rgba(11,16,32,.85);backdrop-filter:blur(8px);border-bottom:1px solid #232c52;z-index:5}
.brand{font-size:1.15rem}
.topnav .link{background:none;border:0;color:var(--muted);font-size:.95rem;margin-left:8px;cursor:pointer}
.topnav .link:hover{color:var(--text)}
main{max-width:920px;margin:0 auto;padding:16px}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero{text-align:center;padding:28px 12px}
.hero h1{font-size:clamp(1.8rem,5vw,3rem);margin:.2em 0}
.accent{color:var(--accent)}
.hero-row{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:12px;flex-wrap:wrap}
.best{background:var(--card);padding:10px 16px;border-radius:999px;border:1px solid #26305c}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid #26305c;border-radius:var(--radius);padding:16px;margin-top:12px}
.card h2{margin:.1em 0 .6em;font-size:1.05rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#0f1530;border:1px solid #2b3763;color:var(--text);border-radius:999px;padding:10px 14px;font-size:.9rem;cursor:pointer}
.chip.active{background:var(--accent);border-color:var(--accent);color:#0b1020;font-weight:700}
.chip.off{opacity:.45;text-decoration:line-through}
.chip:disabled{cursor:not-allowed}
.hint{color:var(--muted);font-size:.85rem}
.field{display:grid;gap:6px;font-size:.85rem;color:var(--muted)}
.field input{background:#0f1530;border:1px solid #2b3763;color:var(--text);border-radius:10px;padding:12px;font-size:1rem}
.btn{background:#222c55;color:var(--text);border:1px solid #33407a;border-radius:12px;padding:12px 18px;font-size:1rem;cursor:pointer;min-height:48px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#0b1020;font-weight:800}
.btn.xl{font-size:1.2rem;padding:14px 34px;border-radius:14px}
.btn.ghost{background:transparent;margin-top:10px}
.row{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.hud{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.hud-item{background:var(--card);border:1px solid #26305c;border-radius:999px;padding:8px 14px;font-size:.95rem}
.progress,.timerline{height:8px;background:#0f1530;border-radius:99px;overflow:hidden;margin:6px 0}
.progress>div{height:100%;width:0;background:var(--accent);transition:width .25s}
.timerline>div{height:100%;width:100%;background:var(--warn);transition:width .1s linear}
.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;gap:8px;flex-wrap:wrap}
.prompt{font-size:clamp(1.2rem,4vw,1.8rem);font-weight:700;margin:12px 0;word-break:break-word}
.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
@media(max-width:520px){.options{grid-template-columns:1fr}}
.opt{background:#0f1530;border:2px solid #2b3763;border-radius:14px;padding:16px;font-size:1.15rem;color:var(--text);cursor:pointer;min-height:60px}
.opt:hover{border-color:var(--accent)}
.opt.ok{border-color:var(--good);background:#0c2b21}
.opt.ko{border-color:var(--bad);background:#331212}
.opt:disabled{opacity:.85;cursor:default}
.feedback{min-height:1.6em;margin-top:10px;font-weight:700}
.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}
.center{text-align:center}
.big-score{font-size:2.6rem;font-weight:900;margin:8px 0}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
@media(max-width:560px){.rgrid{grid-template-columns:1fr 1fr}}
.record{color:var(--warn);font-weight:800;min-height:1.4em}
.stats-mini{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;font-size:.85rem;color:var(--muted)}
.achv{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.badge{background:#0f1530;border:1px solid #2b3763;border-radius:999px;padding:6px 10px;font-size:.8rem}
.badge.on{border-color:var(--warn);background:#2a2111}
.att-grid{display:grid;gap:4px;margin:12px auto;max-width:420px}
.att-cell{background:#0f1530;border:1px solid #2b3763;border-radius:8px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.mem-hidden{letter-spacing:.35em;color:var(--muted)}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:50}
.toast{background:#101736;border:1px solid var(--accent);padding:10px 16px;border-radius:12px;animation:fade .2s}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:22px 10px}
code{background:#0f1530;padding:2px 6px;border-radius:6px}

/* --- añadidos: admin, banner, accesibilidad --- */
.banner{border-radius:12px;padding:12px 16px;margin:12px 0;font-weight:700}
.banner.warn{background:#2a2111;border:1px solid var(--warn);color:#fde68a}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#0f1530;border:1px solid #2b3763;border-radius:10px;padding:10px 12px;margin-top:8px}
.admin-row .btn{min-height:40px;padding:8px 14px;font-size:.9rem}
.field-input{background:#0f1530;border:1px solid #2b3763;color:var(--text);border-radius:10px;padding:12px;font-size:1rem;min-width:min(280px,100%)}
button:focus-visible,input:focus-visible{outline:3px solid var(--warn);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}