:root{
  --bg:#0b1220; --panel:#0f1b31; --ink:#e9eefc; --muted:#a8b0c6;
  --brand:#5aa2ff; --ok:#22c55e; --bad:#ef4444; --warn:#f59e0b;
  --elec:#6ec1ff; --elec-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; justify-content:center; align-items:center; padding:24px;
}
.mono{font-variant-numeric:tabular-nums;}

.app{width:min(820px,100%);}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;}
.title{font-weight:800;letter-spacing:.4px;font-size:clamp(18px,3vw,26px)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ctl{display:flex;gap:8px;align-items:center;background:#16223a;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px 8px}
.ctl span:first-child{color:var(--muted);font-size:12px}
select,input[type="range"]{background:#0b172e;color:var(--ink);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:6px}
#bpmVal{min-width:32px;text-align:center}

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,.18);box-shadow:none;color:var(--ink)}
button:disabled{opacity:.6;cursor:not-allowed}
a.btn{display:inline-block;background:#16223a;border:1px solid rgba(255,255,255,.18);color:var(--ink);padding:8px 10px;border-radius:10px;text-decoration:none;}

.grid{display:grid;gap:12px;margin-bottom:16px}
.card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.06));
  border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); 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:10px;text-align:center}
.metric .label{color:var(--muted);font-size:12px;margin-bottom:6px}
.metric .value{font-size:clamp(18px,4vw,26px);font-weight:800}
.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:inherit;transition:width .12s linear}

.game{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.pads{display:grid;grid-template-columns:repeat(2,160px);grid-auto-rows:160px;gap:14px}
.pad{
  border-radius:18px;border:2px solid rgba(255,255,255,.18);background:#132447;color:#fff;font-size:40px;font-weight:800;
  display:grid;place-items:center;cursor:pointer;user-select:none;transition:transform .06s ease, box-shadow .12s;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.pad:active{transform:scale(.98)}
.pad.active{transform:scale(1.04); box-shadow:0 14px 36px rgba(0,0,0,.5)}
.p0{background:linear-gradient(180deg,#16a34a,#0f6b35)}
.p1{background:linear-gradient(180deg,#ef4444,#9f1f1f)}
.p2{background:linear-gradient(180deg,#3b82f6,#1e4890)}
.p3{background:linear-gradient(180deg,#f59e0b,#7b4f07)}

.status{color:var(--muted);min-height:22px}
.help{color:var(--muted);font-size:12px}

/* Beat visual nadi */
.app.rhythm .timebar>div{background:linear-gradient(90deg,#22c55e,#5aa2ff)}

/* === COMBO GLOW mulai streak > 3 (JS: .combo-on di #app) === */
.app.combo-on .stats,
.app.combo-on .game{
  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;
}
@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 singkat saat combo baru aktif */
.app.zap .stats::after,
.app.zap .game::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  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 .42s ease-out forwards;
}
@keyframes zap-burst{
  0%{opacity:0; transform:scale(.98)}
  25%{opacity:1; transform:scale(1.02)}
  100%{opacity:0; transform:scale(1.04)}
}

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

/* Responsive */
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .pads{grid-template-columns:repeat(2,minmax(120px,1fr));grid-auto-rows:120px}
}