:root{
  --bg:#0b1220;
  --panel:#0f1b31;
  --ink:#e9eefc;
  --muted:#a8b0c6;
  --brand:#5aa2ff;
  --ok:#22c55e;
  --bad:#ef4444;
  --gold:#f7d046;
}
*{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 15% -10%, #0f2749 0%, transparent 60%),
    radial-gradient(1000px 500px at 120% 0%, #1a2d52 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  min-height:100vh; padding:20px;
  display:flex; justify-content:center; align-items:center;
}
.app{ width:min(1000px,100%); }
header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.title{ font-weight:800; font-size:clamp(18px,3vw,28px) }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap }

select, button, a.btn{
  background:#16223a;border:1px solid rgba(255,255,255,.2);
  color:var(--ink); padding:8px 10px;border-radius:10px;
}
button{
  background:linear-gradient(180deg,#7bb2ff,#3b82f6);
  border:0; border-radius:12px; padding:10px 14px; font-weight:700; color:white; cursor:pointer;
  box-shadow:0 8px 16px rgba(59,130,246,.35);
}
button.secondary{ background:#16223a; border:1px solid rgba(255,255,255,.2); box-shadow:none; }
button:disabled{ opacity:.6; cursor:not-allowed }
a.btn{ text-decoration:none; }

.grid{ display:grid; gap:14px; margin-bottom:16px }
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.06));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:16px;
}
.stats{ display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; }
.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 }
.metric .value{ font-size:clamp(16px,3.8vw,24px); font-weight:800 }

.game-wrap{ display:flex; flex-direction:column; gap:12px }
.canvas-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; }
#gameCanvas{
  width:100%;
  aspect-ratio:1/1;
  background:#091226;
  border:2px dashed rgba(255,255,255,.18);
  border-radius:18px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.35);
  touch-action:manipulation;
}
.hud-bottom{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  color:var(--muted); font-size:12px; background:rgba(0,0,0,.25);
  padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.08);
}

/* Glow saat combo tinggi (dari fitur sebelumnya) */
.app.combo-on .stats,
.app.combo-on .game-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;
}
@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)); }
}

/* === GLOW MILESTONE (aktif 3 detik setelah sambaran petir) === */
.app.milestone-glow .stats,
.app.milestone-glow .game-wrap{
  border-color: rgba(120,200,255,.85);
  box-shadow:
    0 0 0 1px rgba(120,200,255,.22) inset,
    0 0 34px rgba(120,200,255,.40),
    0 0 90px rgba(120,200,255,.26);
  animation: milestone-pulse .9s ease-in-out infinite alternate;
}
@keyframes milestone-pulse{
  0%{ filter: drop-shadow(0 0 0 rgba(120,200,255,0)); }
  100%{ filter: drop-shadow(0 0 18px rgba(120,200,255,.75)) drop-shadow(0 0 36px rgba(120,200,255,.45)); }
}

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