:root{
  --bg:#0b1020; --panel:#141b33; --panel2:#1c2547;
  --txt:#e8ecff; --muted:#8b96c4;
  --a:#38e8ff; --b:#7c5cff; --ok:#2ee6a6; --bad:#ff5d73; --gold:#ffd34d;
  --shadow:0 12px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 700px at 80% -10%,#1a2350 0,var(--bg) 55%);
  color:var(--txt); -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:24px 18px 60px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.15rem;letter-spacing:.3px;margin-bottom:22px}
.brand .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 22px var(--a)}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid #26305a;border-radius:20px;padding:26px;box-shadow:var(--shadow)}
h1{margin:.1em 0 .3em;font-size:1.7rem;line-height:1.15}
h2{margin:.2em 0;font-size:1.15rem}
p.sub{color:var(--muted);margin:.2em 0 1.2em}
label{display:block;font-size:.82rem;color:var(--muted);margin:14px 0 6px;font-weight:600}
input,select{width:100%;padding:14px 15px;border-radius:12px;border:1px solid #2c3766;background:#0e1530;color:var(--txt);font-size:1rem;outline:none}
input:focus,select:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(56,232,255,.15)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;padding:15px;border:0;border-radius:13px;
  background:linear-gradient(135deg,var(--a),var(--b));color:#08122b;font-weight:800;font-size:1.05rem;cursor:pointer;transition:transform .08s, filter .2s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid #2c3766;color:var(--txt)}
.btn.sm{width:auto;padding:9px 14px;font-size:.85rem;margin-top:0;border-radius:10px}
.err{background:rgba(255,93,115,.12);border:1px solid var(--bad);color:#ffb3bf;padding:12px 14px;border-radius:11px;margin-top:14px;font-size:.9rem;display:none}
.err.show{display:block}
.foot{color:var(--muted);font-size:.78rem;text-align:center;margin-top:26px}
a{color:var(--a);text-decoration:none} a:hover{text-decoration:underline}

/* ---------- JUEGO ---------- */
.hud{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chip{background:#0e1530;border:1px solid #2c3766;border-radius:999px;padding:8px 14px;font-weight:700;font-size:.9rem;display:flex;gap:7px;align-items:center}
.chip .k{color:var(--muted);font-weight:600}
.chip.bits{border-color:var(--gold);color:var(--gold)}
.chip.racha{border-color:var(--b)}
.progress{height:9px;background:#0e1530;border-radius:99px;overflow:hidden;margin:6px 0 18px;border:1px solid #26305a}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--a),var(--b));width:0;transition:width .3s}
.timer{height:12px;background:#0e1530;border-radius:99px;overflow:hidden;margin-bottom:20px;border:1px solid #26305a}
.timer > i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--gold));width:100%;transition:width .1s linear}
.timer.low > i{background:linear-gradient(90deg,var(--gold),var(--bad))}
.q{font-size:1.32rem;font-weight:700;line-height:1.3;margin:8px 0 20px}
.diff{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.opt{display:flex;align-items:center;gap:12px;padding:16px 16px;border-radius:14px;border:1px solid #2c3766;background:#0e1530;color:var(--txt);
  font-size:1rem;font-weight:600;text-align:left;cursor:pointer;transition:transform .08s,border-color .15s,background .15s}
.opt:hover{border-color:var(--a);transform:translateY(-2px)}
.opt .lt{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:#1c2547;display:grid;place-items:center;font-weight:800;color:var(--a)}
.opt.ok{background:rgba(46,230,166,.16);border-color:var(--ok)} .opt.ok .lt{background:var(--ok);color:#052}
.opt.bad{background:rgba(255,93,115,.14);border-color:var(--bad)} .opt.bad .lt{background:var(--bad);color:#500}
.opt.dim{opacity:.32;pointer-events:none}
.opt:disabled{cursor:default}
.ayudas{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.ayuda{flex:1;min-width:120px;background:#0e1530;border:1px solid #2c3766;border-radius:12px;padding:11px;cursor:pointer;color:var(--txt);font-weight:700;font-size:.85rem;transition:border-color .15s}
.ayuda:hover:not(:disabled){border-color:var(--gold)}
.ayuda small{display:block;color:var(--gold);font-weight:800;margin-top:3px}
.ayuda:disabled{opacity:.4;cursor:not-allowed}
.feedback{margin-top:18px;padding:15px;border-radius:13px;font-size:.95rem;line-height:1.4;display:none}
.feedback.show{display:block}
.feedback.win{background:rgba(46,230,166,.12);border:1px solid var(--ok)}
.feedback.lose{background:rgba(255,93,115,.1);border:1px solid var(--bad)}
.pop{position:fixed;left:50%;top:26%;transform:translateX(-50%) scale(.6);font-size:2.4rem;font-weight:900;color:var(--gold);
  text-shadow:0 0 20px rgba(255,211,77,.7);opacity:0;pointer-events:none;transition:.4s}
.pop.show{opacity:1;transform:translateX(-50%) scale(1)}

/* ---------- FINAL / LEADERBOARD ---------- */
.final{text-align:center}
.final .score{font-size:3.4rem;font-weight:900;background:linear-gradient(135deg,var(--a),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;margin:8px 0}
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{padding:11px 10px;text-align:left;border-bottom:1px solid #26305a;font-size:.92rem}
th{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}
td.pos{font-weight:800;color:var(--muted);width:44px}
tr.me{background:rgba(56,232,255,.08)}
tr.top1 td.pos{color:var(--gold)} tr.top2 td.pos{color:#c9d2ff} tr.top3 td.pos{color:#e0a06a}
.badge{font-size:.72rem;padding:3px 9px;border-radius:99px;background:#1c2547;color:var(--muted)}
.badge.fin{background:rgba(46,230,166,.15);color:var(--ok)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.stat{background:#0e1530;border:1px solid #26305a;border-radius:14px;padding:16px;text-align:center}
.stat b{display:block;font-size:1.8rem}
.stat span{color:var(--muted);font-size:.8rem}