:root {
  --bg:#0f1226;
  --card:#171a33;
  --accent:#7c5cff;
  --accent-2:#4ad395;
  --text:#e9ecff;
  --muted:#9aa3b2;
  --danger:#ff5c7a;
  --warning:#ffcc66;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}
* { box-sizing:border-box; }
body {
  margin:0; padding:32px;
  background: radial-gradient(1200px 800px at 10% 20%, #14183a, #0d1024 60%), var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,sans-serif;
  display:grid; place-items:center; min-height:100vh;
}
.game {
  width:min(720px,95vw);
  background:linear-gradient(180deg,#1b1f3f 0%,#121530 100%);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  position:relative;
}
.header {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
h1 {margin:0;}
.controls {display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.select, .btn {
  border:none; border-radius:12px; padding:10px 14px;
  font-weight:600; cursor:pointer;
}
.select {background:#0f1230; color:var(--text);}
.btn {background:var(--accent); color:#fff;}
.btn.secondary {background:#2a2e5a;}
.btn.ghost {background:transparent; border:1px solid #2a2e5a;}
.grid {display:grid; grid-template-columns:1.1fr .9fr; gap:20px; margin-top:20px;}
@media(max-width:700px){.grid{grid-template-columns:1fr;}}
.card {background:var(--card); border-radius:16px; padding:18px;}
.row {display:flex; gap:10px;}
.range {color:var(--muted);}
.feedback {margin-top:10px; min-height:24px;}
.timer {height:12px; background:#0e1130; border-radius:999px; overflow:hidden; margin-top:10px;}
.bar {height:100%; background:linear-gradient(90deg,var(--accent),var(--warning)); transform-origin:left;}
.stats {display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px;}
.stat {background:#0f1230; border-radius:12px; padding:10px; text-align:center;}
.stat .label {font-size:12px; color:var(--muted);}
.stat .value {font-size:18px; font-weight:700;}
.score {display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.pill {background:#0f1230; border:1px solid #2a2e5a; padding:6px 10px; border-radius:999px;}
.toast {
  position:absolute; bottom:18px; right:18px;
  background:#0f1230; padding:12px 14px;
  border-left:4px solid var(--accent-2);
  border-radius:12px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(10px);
  transition:.3s ease;
}
.toast.show {opacity:1; transform:translateY(0);}
.danger {color:var(--danger);}
.muted {color:var(--muted);}