:root {
  --bg: #0e1016;
  --panel: #171a23;
  --line: #262a36;
  --text: #e8eaf0;
  --muted: #8a90a2;
  --hit: #ffd84a;
  --miss: #ff5d73;
  --you: #4aa8ff;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  height: 100dvh; /* phones: the visible area, not counting the browser bars */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
h1 { margin: 0; font-size: 17px; font-weight: 600; }
.sub { color: var(--muted); font-size: 12px; }
.stats { display: flex; gap: 28px; margin-left: auto; }
.stats div { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; }
.stats label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.stats b { font-size: 20px; font-variant-numeric: tabular-nums; }

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#lane { flex: 1; width: 100%; min-height: 0; display: block; }

.lyrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  padding: 14px 20px 18px;
  font-size: clamp(13px, 1.6vw, 22px);
  font-weight: 700;
  color: #5b6172;
}
.lyrics span { min-width: 1.1em; text-align: center; transition: color .1s; }
.lyrics .hit { color: var(--hit); }
.lyrics .miss { color: var(--miss); }
.lyrics .now { color: #fff; transform: scale(1.25); }

footer { padding: 12px 20px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row + .row { margin-top: 10px; }

button {
  background: #232736;
  color: var(--text);
  border: 1px solid #323748;
  border-radius: 8px;
  padding: 7px 12px;
  font: inherit;
  cursor: pointer;
}
button:hover { background: #2c3143; }
button.primary { background: var(--you); border-color: var(--you); color: #04111f; font-weight: 600; min-width: 96px; }
#seek { flex: 1; accent-color: var(--you); }
.time { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }

.rounds { display: flex; gap: 6px; }
.rounds button { padding: 4px 9px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 44px; }
.rounds button small { color: var(--muted); font-size: 11px; min-height: 1.2em; }
.rounds button.current { border-color: var(--you); }

.speed { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.speed label { color: var(--muted); }
.speed input[type=range] { width: 140px; accent-color: var(--you); }
.speed input[type=number] {
  width: 64px;
  background: #0f121a;
  color: var(--text);
  border: 1px solid #323748;
  border-radius: 6px;
  padding: 5px 6px;
  font: inherit;
}
.mic { color: var(--muted); font-size: 12px; }
.mic.on { color: #6ee7a1; }
.mic.err { color: var(--miss); }

dialog {
  max-width: min(420px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid #323748;
  border-radius: 12px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog h2 { margin: 0 0 10px; font-size: 18px; }
dialog p { margin: 0 0 10px; color: #c3c7d3; }
dialog form { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
dialog label { display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
dialog input[type=checkbox] { accent-color: var(--you); }

.voice { display: flex; border: 1px solid #323748; border-radius: 8px; overflow: hidden; }
.voice button { border: 0; border-radius: 0; background: transparent; padding: 6px 12px; white-space: nowrap; }
.voice button.active { background: var(--you); color: #04111f; font-weight: 600; }

/* Phones: stack the header, give the round buttons and speed their own full-width rows. */
@media (max-width: 700px) {
  header { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; }
  h1 { font-size: 15px; }
  .voice { align-self: flex-start; }
  .stats { margin-left: 0; }
  .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .stats div { align-items: flex-start; min-width: 0; }
  .stats b { font-size: 16px; white-space: nowrap; }

  .lyrics { font-size: 14px; gap: 2px 6px; padding: 8px 10px; }

  footer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .row { gap: 8px; }
  #seek { order: 1; flex-basis: 100%; }
  .time { margin-left: auto; }
  .rounds { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; gap: 4px; }
  .rounds button { min-width: 0; padding: 4px 0; font-size: 12px; white-space: nowrap; }
  .speed { margin-left: 0; width: 100%; }
  .speed input[type=range] { flex: 1; width: auto; }
}