:root {
  --bg: #07080c;
  --fg: #f4f6fb;
  --muted: #8b93a7;
  --accent: #5eead4;
  --accent2: #99f6e4;
  --danger: #fb7185;
  --warn: #fbbf24;
  --card: #12141c;
  --ring: #1f2433;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overscroll-behavior: none;
}
#app {
  min-height: 100%; max-width: 420px; margin: 0 auto;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.top { display: flex; justify-content: space-between; align-items: baseline; }
.brand { margin: 0; letter-spacing: 0.18em; font-size: 12px; font-weight: 700; color: var(--accent); }
.meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dot { opacity: 0.5; margin: 0 4px; }
.stage {
  position: relative;
  background: radial-gradient(circle at 50% 42%, #181c2a, #0a0b10 72%);
  border: 1px solid var(--ring); border-radius: 24px; overflow: hidden; aspect-ratio: 1;
}
.shake-wrap { position: relative; width: 100%; height: 100%; }
.shake-wrap.hit { animation: shake-hit 0.18s ease; }
.shake-wrap.miss { animation: shake-miss 0.32s ease; }
@keyframes shake-hit {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(2px,-2px); }
  50% { transform: translate(-2px,1px); }
  75% { transform: translate(1px,2px); }
}
@keyframes shake-miss {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6px,2px); }
  40% { transform: translate(7px,-3px); }
  60% { transform: translate(-5px,3px); }
  80% { transform: translate(4px,-1px); }
}
canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.hud {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; padding-bottom: 22px; gap: 2px;
}
#score {
  font-size: 48px; font-weight: 800; letter-spacing: -0.04em;
  text-shadow: 0 0 28px rgba(94,234,212,.4);
  font-variant-numeric: tabular-nums;
}
#hint { font-size: 11px; letter-spacing: 0.22em; color: var(--muted); }
.combo {
  font-size: 14px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--accent2); text-shadow: 0 0 16px rgba(94,234,212,.6);
  margin-bottom: 2px;
}
.combo.hot { color: #fde68a; animation: pulse-combo 0.45s ease; }
@keyframes pulse-combo {
  0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); }
}
.grade {
  min-height: 1.1em; font-size: 13px; font-weight: 800; letter-spacing: 0.16em;
  opacity: 0; transition: opacity .12s;
}
.grade.show { opacity: 1; }
.grade.perfect { color: #fde68a; }
.grade.good { color: var(--accent); }
.grade.early, .grade.late { color: #fdba74; }
.countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 96px; font-weight: 900; color: var(--fg);
  text-shadow: 0 0 40px rgba(94,234,212,.55);
  background: rgba(7,8,12,.45); pointer-events: none;
  animation: count-pop 0.55s ease;
}
@keyframes count-pop {
  0% { transform: scale(0.6); opacity: 0; }
  40% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(94,234,212,.35), transparent 60%);
  transition: opacity .08s;
}
.flash.on { opacity: 1; }
.flash.bad {
  background: radial-gradient(circle at 50% 45%, rgba(251,113,133,.4), transparent 60%);
}
.panel { display: flex; flex-direction: column; gap: 10px; }
.tagline { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.tagline strong { color: var(--accent); }
.btn {
  appearance: none; border: 0; border-radius: 14px; padding: 14px 16px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform .08s ease, opacity .15s;
}
.btn:active { transform: scale(0.98); }
.btn.primary {
  background: linear-gradient(180deg, #7af0d8, #2dd4bf); color: #042f2e;
  box-shadow: 0 8px 28px rgba(45,212,191,.25);
}
.btn.ghost { background: var(--card); color: var(--fg); border: 1px solid var(--ring); }
.btn.dev {
  background: transparent; color: var(--warn); border: 1px dashed #78590f;
  font-size: 12px; padding: 10px 12px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hidden { display: none !important; }
.status { min-height: 1.2em; margin: 0; font-size: 12px; color: var(--muted); white-space: pre-wrap; }
.status.err { color: var(--danger); }
.status.ok { color: var(--accent); }
.legal { margin: 4px 0 0; font-size: 11px; color: #5b6478; }
.challenge {
  margin: 0; padding: 10px 12px; background: #0c0e14; border: 1px solid var(--ring);
  border-radius: 10px; font-size: 10px; color: #a8b0c2; overflow: auto; max-height: 140px;
  white-space: pre-wrap; word-break: break-word;
}

.lb-card {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 12px 14px;
}
.lb-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.lb-title {
  font-size: 11px; letter-spacing: 0.16em; font-weight: 700; color: var(--accent);
}
.lb-high {
  font-size: 13px; font-weight: 800; color: #fde68a;
  font-variant-numeric: tabular-nums;
}
.lb-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.lb-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  font-size: 12px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.lb-list .rank { color: var(--muted); font-weight: 700; }
.lb-list .handle { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-list .pts { color: var(--accent2); font-weight: 700; }
.lb-empty { color: var(--muted); font-size: 12px; display: block !important; }
.handle-row {
  display: flex; align-items: center; gap: 10px;
}
.handle-label {
  font-size: 11px; letter-spacing: 0.12em; color: var(--muted); font-weight: 700;
}
.handle-input {
  flex: 1; appearance: none; border: 1px solid var(--ring); border-radius: 10px;
  background: #0c0e14; color: var(--fg); padding: 10px 12px; font-size: 13px;
  font-family: inherit;
}
.handle-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
#globalBest { color: #fde68a; font-weight: 700; }