:root{
  --bg:#0f172a; --panel:#0b1220; --muted:#94a3b8; --text:#e5e7eb;
  --ok:#10b981; --err:#ef4444; --border:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 50% -20%,#1f2937 0%,var(--bg) 60%);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  display:grid;place-items:center
}
.app{
  width:min(100%,900px);
  background:linear-gradient(180deg,#0b1220,#0b1220ee);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.35)
}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.title{font-weight:800}
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{background:#0a0f1c;border:1px solid var(--border);border-radius:12px;padding:8px 12px;font-variant-numeric:tabular-nums}

.stage{position:relative;margin-top:16px;border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--panel);min-height:520px;overflow:hidden}
.instruction{background:#0a0f1c;border:1px dashed #21314f;border-radius:14px;padding:12px 14px;color:#d1d5db;line-height:1.45}
.controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}
.btn{border:none;border-radius:12px;padding:10px 14px;font-weight:800;color:white;background:linear-gradient(180deg,#374151,#1f2937);border:1px solid #374151;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-start{background:linear-gradient(180deg,#2563eb,#1d4ed8);border-color:#1d4ed8}
.scoreline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-variant-numeric:tabular-nums}
footer{margin-top:10px;color:var(--muted);font-size:12px;text-align:center}