:root{
  --bg:#0b1220;
  --panel:#0f1b31;
  --ink:#e9eefc;
  --muted:#a8b0c6;
  --brand:#5aa2ff;
  --ok:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --electric:#6ec1ff;
  --electric-strong:#9ad1ff;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background:
    radial-gradient(1200px 600px at 20% -10%, #0f2749 0%, transparent 60%),
    radial-gradient(1000px 600px at 120% 0%, #1a2d52 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.app{width:min(760px,100%);}
header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px;}
.title{font-weight:800;letter-spacing:.5px;font-size:clamp(18px,3vw,26px);}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
select, button, a.btn{
  background:#16223a;border:1px solid rgba(255,255,255,.18);
  color:var(--ink);
  padding:8px 10px;border-radius:10px;
}
button{
  background:linear-gradient(180deg,#7bb2ff,#3b82f6);
  color:white;border:0;border-radius:12px;
  padding:10px 14px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 16px rgba(59,130,246,.35);
}
button.secondary{background:#16223a;border:1px solid rgba(255,255,255,.12);box-shadow:none;color:var(--ink);}
button:disabled{opacity:.6;cursor:not-allowed}
a.btn{text-decoration:none;}

.grid{display:grid;grid-template-columns:1fr auto;gap:12px;margin-bottom:16px;}
.card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.05));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  border-radius:18px;
  padding:16px;
  overflow:hidden;
}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;}
.metric{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 10px;text-align:center;}
.metric .label{color:var(--muted);font-size:12px;margin-bottom:6px;}
.metric .value{font-size:clamp(18px,4vw,28px);font-weight:800;}
.record .label{color:var(--muted);font-size:12px;margin-bottom:6px;}
.record .value{font-size:clamp(18px,4vw,24px);font-weight:800;text-align:center;}

.timebar{grid-column:1/-1;margin-top:10px;height:8px;background:#0b172e;border-radius:999px;border:1px solid rgba(255,255,255,.08);}
.timebar>div{height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#5aa2ff);border-radius:999px;transition:width .2s linear;}

.quiz-wrap{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;}
.question{font-size:clamp(22px,4.2vw,32px);font-weight:800;margin:10px 0;}
.answer{
  padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:#091226;color:var(--ink);font-size:20px;text-align:center;outline:none;width:min(440px,90%);
}
.feedback{font-size:16px;font-weight:700;height:24px;}
.feedback.ok{color:var(--ok);}
.feedback.bad{color:var(--bad);}
.hint{color:var(--muted);font-size:12px;}

.help{color:var(--muted);font-size:12px;margin-top:12px;text-align:center;}

/* Low time state */
.app.lowtime .timebar>div{background:linear-gradient(90deg,#f59e0b,#ef4444);}
.app.lowtime .metric:last-child{outline:2px solid var(--warn);}

/* ===========================================
   GLOW KOMBO — aktif mulai streak > 3 (JS: .combo-on)
   Hanya untuk papan skor, papan utama, dan input jawaban
   =========================================== */
.app.combo-on .card.stats,
.app.combo-on .quiz-wrap{
  border-color: rgba(106,188,255,.6);
  box-shadow:
    0 0 0 1px rgba(106,188,255,.18) inset,
    0 0 26px rgba(106,188,255,.28),
    0 0 70px rgba(106,188,255,.2);
  animation: electric-glow 1.1s ease-in-out infinite alternate;
}
.app.combo-on .answer{
  border-color: rgba(106,188,255,.65);
  box-shadow:
    0 0 0 1px rgba(106,188,255,.22) inset,
    0 0 22px rgba(106,188,255,.28),
    0 0 54px rgba(106,188,255,.18);
  animation: electric-glow 1.1s ease-in-out infinite alternate;
  position:relative;
  z-index:0;
}
@keyframes electric-glow{
  0%{ filter: drop-shadow(0 0 0 rgba(110,193,255,0)); }
  100%{ filter: drop-shadow(0 0 14px rgba(110,193,255,.6)) drop-shadow(0 0 28px rgba(110,193,255,.4)); }
}

/* ===========================================
   ZAP (sambaran listrik biru) — SEKALI saat kombo baru aktif
   (JS: tambah .zap selama ~0.48s)
   =========================================== */
.app.zap .card.stats::after,
.app.zap .quiz-wrap::after{
  content:"";
  position:absolute; inset:-2px; pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(140px 24px at 10% 10%, rgba(158,216,255,.95), transparent 60%),
    radial-gradient(120px 30px at 80% 30%, rgba(110,193,255,.85), transparent 60%),
    repeating-linear-gradient(115deg, rgba(110,193,255,.26) 0 2px, transparent 2px 6px);
  mix-blend-mode:screen;
  animation: zap-burst 0.4s ease-out forwards;
}
/* input tidak bisa pseudo-element di sebagian browser → animasi box-shadow saja */
.app.zap .answer{
  animation: zap-border 0.4s ease-out;
}
@keyframes zap-burst{
  0%   { opacity:0;   transform:scale(0.96); }
  20%  { opacity:1;   transform:scale(1.02); }
  60%  { opacity:.7;  transform:scale(1); }
  100% { opacity:0;   transform:scale(1.05); }
}
@keyframes zap-border{
  0%   { box-shadow:0 0 0 0 rgba(106,188,255,0); }
  20%  { box-shadow:
           0 0 0 1px rgba(106,188,255,.25) inset,
           0 0 28px rgba(106,188,255,.45),
           0 0 70px rgba(106,188,255,.3); }
  100% { box-shadow:0 0 0 0 rgba(106,188,255,0); }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .app.combo-on .card.stats,
  .app.combo-on .quiz-wrap,
  .app.combo-on .answer{ animation:none }
  .app.zap .card.stats::after,
  .app.zap .quiz-wrap::after{ animation:none; opacity:0 }
  .app.zap .answer{ animation:none }
}

/* Responsive */
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .timebar{grid-column:1/-1}
  .grid{grid-template-columns:1fr;}
}