*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b1020; --card:rgba(255,255,255,.055); --line:rgba(255,255,255,.12);
  --txt:#eef2ff; --dim:#9aa6c7; --acc:#5eead4; --acc2:#a78bfa;
  --ok:#34d399; --bad:#fb7185;
}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--txt);
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px 16px 60px;
  overflow-x:hidden;
}
.bg-glow{
  position:fixed; inset:-30%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(94,234,212,.20), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(167,139,250,.22), transparent 45%),
    radial-gradient(circle at 55% 50%, rgba(59,130,246,.14), transparent 60%);
  filter:blur(10px);
}
.shell{width:100%; max-width:860px}
.screen{display:none; animation:fade .35s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.badge{
  display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc); border:1px solid rgba(94,234,212,.35);
  background:rgba(94,234,212,.08); padding:6px 14px; border-radius:999px;
  margin-bottom:18px;
}
h1{font-size:clamp(38px,7vw,64px); line-height:1.05; letter-spacing:-.02em; margin-bottom:16px}
h1 span{
  background:linear-gradient(100deg,var(--acc),var(--acc2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{color:var(--dim); font-size:17px; line-height:1.6; max-width:620px; margin-bottom:30px}

.levels{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:30px}
.level-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:20px; transition:.25s;
}
.level-card:hover{transform:translateY(-4px); border-color:rgba(94,234,212,.45)}
.lv-num{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-weight:700;font-size:14px;margin-bottom:12px;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#08111f;
}
.level-card h3{font-size:16px;margin-bottom:6px}
.level-card p{font-size:13px;color:var(--dim);line-height:1.45}

.btn{
  border:none; cursor:pointer; font-family:inherit; font-size:16px; font-weight:600;
  padding:15px 30px; border-radius:14px; transition:.2s;
}
.btn.primary{
  background:linear-gradient(100deg,var(--acc),var(--acc2)); color:#08111f;
  box-shadow:0 10px 30px -12px rgba(94,234,212,.7);
}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(167,139,250,.8)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.hint{font-size:13px;color:var(--dim);margin-top:14px}
.hidden{display:none !important}

.topbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pill{
  font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--dim);
}
.pill.timer{margin-left:auto;color:var(--acc);border-color:rgba(94,234,212,.4);min-width:56px;text-align:center}
.pill.timer.warn{color:var(--bad);border-color:rgba(251,113,133,.5);animation:pulse .8s infinite}
@keyframes pulse{50%{opacity:.45}}

.progress{height:7px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-bottom:22px}
.progress-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .4s ease}

.question-box{
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:clamp(20px,4vw,36px); backdrop-filter:blur(8px);
}
.q-index{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
#q-text{font-size:clamp(20px,3vw,26px);line-height:1.4;margin-bottom:22px;font-weight:600}

.answers{display:grid;gap:10px}
.answer{
  text-align:left; font-family:inherit; font-size:16px; color:var(--txt);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  padding:15px 18px; border-radius:14px; cursor:pointer; transition:.18s;
  display:flex; gap:12px; align-items:center;
}
.answer:hover:not(:disabled){background:rgba(94,234,212,.09);border-color:rgba(94,234,212,.45);transform:translateX(3px)}
.answer .key{
  width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:rgba(255,255,255,.08);color:var(--dim);
}
.answer.correct{background:rgba(52,211,153,.16);border-color:var(--ok)}
.answer.correct .key{background:var(--ok);color:#08111f}
.answer.wrong{background:rgba(251,113,133,.14);border-color:var(--bad)}
.answer.wrong .key{background:var(--bad);color:#08111f}
.answer:disabled{cursor:default}

.feedback{margin-top:18px;font-size:15px;line-height:1.55;color:var(--dim);
  border-left:3px solid var(--acc); padding-left:14px; display:none}
.feedback.show{display:block; animation:fade .3s ease}
#btn-next{margin-top:22px}

.score-ring{
  display:inline-flex;align-items:baseline;gap:6px;margin:10px 0 6px;
  font-size:64px;font-weight:800;
  background:linear-gradient(100deg,var(--acc),var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.score-ring small{font-size:20px;color:var(--dim);-webkit-text-fill-color:var(--dim)}
.rank{font-size:22px;font-weight:700;color:var(--acc);margin-bottom:10px}
.breakdown{display:grid;gap:8px;margin:24px 0 30px;max-width:520px}
.bd-row{display:flex;justify-content:space-between;font-size:14px;color:var(--dim);
  background:var(--card);border:1px solid var(--line);padding:11px 16px;border-radius:12px}
.bd-row b{color:var(--txt)}

footer{position:fixed;bottom:14px;font-size:12px;color:rgba(154,166,199,.55)}

@media(max-width:620px){
  .levels{grid-template-columns:1fr}
  .level-card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
  .level-card .lv-num{grid-row:span 2;margin:0}
}