/* The teaser page: a dark page, the watch large in its middle. Everything on the watch is sized in its
   display's points (--u CSS pixels each, set by the page to fit the viewport), like the 46 mm watch. */
:root {
  --u: 2px;
  --bg: #0a0a0d; --fg: #f2f2f6; --dim: #9b9baa; --faint: #5f5f6e; --line: #25252e;
  --tap: #2EE6FF; --hold: #58FF8F; --fwd: #FF3DB4; --bwd: #FFC53D; --gold: #FFC46B; --miss: #FF3B30;
  --perfect: #FFF4C2; --ok: #8E96A6; --fire: #FF7A2E; --spin: #A585FF;
  --rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: radial-gradient(120% 70% at 50% 45%, #15141b 0%, var(--bg) 70%) fixed, var(--bg);
  color: var(--fg); font: 15px/1.45 var(--text); -webkit-font-smoothing: antialiased;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar" "stage" "controls";
  min-height: 100dvh; height: 100dvh; overflow: hidden;
}
/* The landing view: the name, Coming Soon and the way in around the watch; the experience: the watch with
   its controls. */
body[data-view="landing"] { grid-template-areas: "hero" "stage" "start"; }
body[data-view="landing"] :is(.bar, .controls, .overlay) { display: none; }
body[data-view="experience"] :is(.hero, .hero-start) { display: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--tap); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───────────── The page around the watch ───────────── */
.hero {
  grid-area: hero; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: max(28px, env(safe-area-inset-top)) 24px 0;
}
.hero-icon { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.hero-name {
  margin: 14px 0 8px; font: 800 clamp(40px, 11vw, 104px)/.95 var(--rounded); letter-spacing: -.025em; text-wrap: balance;
}
.hero-coming {
  margin: 0; font: 700 clamp(13px, 1.3vw, 18px)/1.2 var(--rounded); letter-spacing: .28em; text-transform: uppercase; color: var(--dim);
}
.hero-start { grid-area: start; display: flex; justify-content: center; padding: 8px 24px max(32px, env(safe-area-inset-bottom)); }
.start {
  padding: .95em 1.9em; border: 0; border-radius: 999px; background: var(--tap); color: #000;
  font: 800 18px/1 var(--rounded); letter-spacing: -.005em;
  box-shadow: 0 0 0 1px rgba(46,230,255,.4), 0 10px 40px rgba(46,230,255,.28);
  transition: transform .15s, box-shadow .15s;
}
.start:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(46,230,255,.6), 0 14px 48px rgba(46,230,255,.4); }
.start:active { transform: none; opacity: .8; }
/* Wide screens: the words and the way in on the left, the watch on the right. */
@media (orientation: landscape) and (min-width: 720px) {
  body[data-view="landing"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". stage" "hero stage" "start stage" ". stage";
  }
  body[data-view="landing"] .stage { padding: 7vh 7vw 7vh 0; }
  .hero { align-items: flex-start; text-align: left; padding: 0 0 0 max(48px, 9vw, env(safe-area-inset-left)); }
  /* The words grow with the screen, beside a watch that does. */
  .hero-icon { width: clamp(64px, 5vw, 128px); height: auto; border-radius: 22%; }
  .hero-name { margin: .25em 0 .16em; font-size: clamp(64px, 6.2vw, 168px); }
  .hero-coming { font-size: clamp(14px, 1.1vw, 28px); }
  .hero-start { justify-content: flex-start; padding: clamp(32px, 2.8vw, 72px) 0 0 max(48px, 9vw, env(safe-area-inset-left)); }
  .start { font-size: clamp(18px, 1.35vw, 34px); }
}

.bar { grid-area: bar; padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.home {
  padding: 6px 8px; margin-left: -8px; border: 0; border-radius: 8px; background: none; color: var(--dim);
  font: 700 15px/1 var(--rounded);
}
.home span { font-size: 20px; line-height: 0; margin-right: 2px; vertical-align: -1px; }
.home:hover { color: var(--fg); }
/* Home between runs and on the fail card, not in one. */
body:is([data-phase="countingIn"], [data-phase="playing"], [data-phase="paused"], [data-phase="finished"], .drilling) .home { visibility: hidden; }

.stage {
  grid-area: stage; display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.controls {
  grid-area: controls; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px;
  padding: 6px max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  color: var(--dim); font-size: 13px;
}
.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; }
.keys > div { display: flex; gap: 7px; align-items: baseline; white-space: nowrap; }
.keys dt { color: var(--fg); font-weight: 600; }
.keys dd { margin: 0; }
body.touch .for-keys, body:not(.touch) .for-touch { display: none; }
kbd {
  display: inline-block; min-width: 21px; padding: 2px 6px; border: 1px solid #3a3a46; border-bottom-width: 2px;
  border-radius: 5px; background: #1b1b22; color: #fff; font: 600 11.5px/1.3 var(--text); text-align: center;
}
.settings { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.settings button, .calibration button {
  padding: 7px 12px; border: 1px solid #34343f; border-radius: 999px; background: #17171d; font: 600 12.5px/1 var(--rounded);
}
.settings button:hover, .calibration button:hover { background: #20202a; }
.switch::before { content: ""; display: inline-block; width: 22px; height: 12px; margin-right: 8px; vertical-align: -1px;
  border-radius: 6px; background: #3a3a46 radial-gradient(circle at 6px 6px, #fff 4px, transparent 4.5px); transition: background .15s; }
.switch[aria-checked="true"]::before { background: var(--hold) radial-gradient(circle at 16px 6px, #fff 4px, transparent 4.5px); }
#offset-value { color: var(--gold); }
#offset-value:empty { display: none; }
.pause-button { border-color: var(--fg) !important; }

/* ───────────── The watch ───────────── */
.watch { position: relative; padding: calc(26 * var(--u)) calc(9 * var(--u)); }
.band {
  position: absolute; left: 50%; width: calc(150 * var(--u)); height: calc(36 * var(--u)); translate: -50% 0;
  background: linear-gradient(90deg, #17171c, #2a2a31 30%, #33333b 50%, #2a2a31 70%, #17171c);
}
.band.top { top: 0; border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0;
  mask-image: linear-gradient(to top, #000 40%, transparent); -webkit-mask-image: linear-gradient(to top, #000 40%, transparent); }
.band.bottom { bottom: 0; border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u));
  mask-image: linear-gradient(to bottom, #000 40%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.case {
  position: relative; padding: calc(11 * var(--u)); border-radius: calc(54 * var(--u));
  background: linear-gradient(155deg, #3b3b42 0%, #1d1d22 30%, #111114 60%, #26262c 100%);
  box-shadow: 0 0 0 calc(.6 * var(--u)) #4a4a52 inset, 0 calc(.6 * var(--u)) 0 calc(.6 * var(--u)) rgba(255,255,255,.06) inset,
    0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.6);
}
.crown {
  --turn: 0;
  position: absolute; right: calc(-6 * var(--u)); top: calc(54 * var(--u)); width: calc(8 * var(--u)); height: calc(30 * var(--u));
  border-radius: calc(2.5 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(2.5 * var(--u));
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.45) 0 calc(.8 * var(--u)), transparent calc(.8 * var(--u)) calc(2.2 * var(--u)))
      0 calc(var(--turn) * 6 * var(--u)) / 100% calc(2.2 * var(--u)),
    linear-gradient(90deg, #2a2a30, #6a6a72 45%, #3a3a42 70%, #1e1e24);
  box-shadow: 0 0 0 calc(.4 * var(--u)) #111 inset;
}
.side-button {
  position: absolute; right: calc(-3.5 * var(--u)); top: calc(110 * var(--u)); width: calc(4.5 * var(--u)); height: calc(46 * var(--u));
  border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0; background: linear-gradient(90deg, #1c1c22, #4a4a52 60%, #26262c);
}
.screen {
  position: relative; width: calc(208 * var(--u)); height: calc(248 * var(--u)); border-radius: calc(42.64 * var(--u));
  overflow: hidden; background: #000; isolation: isolate;
  box-shadow: 0 0 0 calc(2 * var(--u)) #050506;
}
#display { position: absolute; inset: 0; display: block; }

/* Text on the watch, in display points. */
.screen { font-family: var(--rounded); }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; }
.overlay[hidden] { display: none; }
.button {
  display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); min-height: calc(36 * var(--u));
  padding: 0 calc(8 * var(--u)); border: 0; border-radius: calc(14 * var(--u)); background: rgba(255,255,255,.18);
  font: 600 calc(14 * var(--u))/1.1 var(--rounded); color: #fff;
}
.button.prominent { background: var(--tap); color: #000; }
.button:active { opacity: .7; }
.row { display: flex; gap: calc(8 * var(--u)); }
.row > * { flex: 1; }

/* The signs (index.html's symbols), filled in the colour they're given; Mirror's halves stroked round at the corners. */
svg.defs { position: absolute; }
.sign { fill: currentColor; }
.sign.mirror, .sign.counterspin { stroke: currentColor; }

/* The title: the track's cover and venue, and the difficulty that starts a run. */
.title {
  padding: calc(30 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); gap: calc(5 * var(--u)); justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 30%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.88) 72%, #000), var(--venue) center 35% / cover;
}
.clock { position: absolute; top: calc(14 * var(--u)); right: calc(22 * var(--u)); font: 600 calc(17 * var(--u))/1 var(--text); color: #fff; }
.title-head { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.cover { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(8 * var(--u)); flex: none;
  box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.6), 0 0 0 calc(.5 * var(--u)) rgba(255,255,255,.12); }
.title-text { min-width: 0; }
.title h1 { margin: 0; font: 800 calc(21 * var(--u))/1.05 var(--rounded); letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.stars { display: flex; gap: calc(2 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.3; color: rgba(255,255,255,.3); }
.stars .on { color: var(--bwd); }
.venue { margin: calc(1 * var(--u)) 0 0; font-size: calc(10 * var(--u)); line-height: 1.25; color: rgba(255,255,255,.8); text-shadow: 0 1px 4px rgba(0,0,0,.8); }
/* The venue's tagline under its name: one line for every venue's, balanced should a narrower column wrap it. */
.venue .intro { display: block; font-size: calc(9.5 * var(--u)); text-wrap: balance; }
#venue-name { color: #fff; font-weight: 600; }
/* The modifiers (ModifierToggles): a round switch each, lit in its colour while on, dimmed while locked; what
   Play plays with beside them, and on a line under them what opens the next. */
.flags { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.flag {
  --c: var(--fwd);
  display: grid; place-items: center; flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); padding: 0;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c);
}
.flag.pitch { --c: var(--fire); }
.flag.counterspin { --c: var(--spin); }
.flag .sign { height: calc(14 * var(--u)); width: auto; }
.flag[aria-checked="true"] { background: var(--c); color: #000; }
.flag[aria-disabled="true"] { background: rgba(255,255,255,.08); color: rgba(255,255,255,.28); cursor: default; }
.flags-caption { margin: 0 0 0 calc(3 * var(--u)); min-width: 0; text-wrap: balance; font: 700 calc(10.5 * var(--u))/1.2 var(--rounded); color: rgba(255,255,255,.75); }
.flags-caption .mirror { color: var(--fwd); } .flags-caption .pitch { color: var(--fire); } .flags-caption .counterspin { color: var(--spin); }
.flags-hint { margin: calc(-2 * var(--u)) 0 0; font: 500 calc(9 * var(--u))/1.2 var(--rounded); color: rgba(255,255,255,.6); text-wrap: balance; }
.flags-hint:empty { display: none; }
.flags-hint.nudge { animation: nudge .45s; }
@keyframes nudge { 20%, 60% { translate: calc(-3 * var(--u)) 0; color: #fff; } 40%, 80% { translate: calc(3 * var(--u)) 0; } }
/* The rows reach further out than the title, as a watch's list rows do: still inside the screen's corners. */
.difficulties { display: flex; flex-direction: column; gap: calc(2 * var(--u)); margin: 0 calc(-8 * var(--u)); }
/* A row: the difficulty's name over its level, then its best, grade and score, in a column of one width on every
   row, right-aligned and wide enough for a seven-digit score, then its marks (OverviewLine). */
.difficulties button {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(62 * var(--u)) auto; align-items: center;
  column-gap: calc(4 * var(--u)); min-height: calc(27 * var(--u)); padding: calc(1.5 * var(--u)) calc(8 * var(--u)); text-align: start;
  border: calc(1.2 * var(--u)) solid rgba(255,255,255,.14); border-radius: calc(12 * var(--u)); background: rgba(20,20,26,.78);
  transition: border-color .15s, background .15s;
}
.difficulties button:hover:not(:disabled) { border-color: var(--tap); background: rgba(46,230,255,.14); }
.difficulties button:active:not(:disabled) { opacity: .7; }
.difficulties button:disabled { opacity: .45; }
.difficulties button:has(.marks:empty) { grid-template-columns: minmax(0, 1fr) calc(62 * var(--u)); }
.difficulties .name { display: flex; flex-direction: column; white-space: nowrap; }
.difficulties .name .label { font: 700 calc(12 * var(--u))/1.1 var(--rounded); }
.difficulties .level { font: 500 calc(8 * var(--u))/1.15 var(--rounded); color: rgba(255,255,255,.6); }
.difficulties .best { justify-self: end; font: 600 calc(9.5 * var(--u))/1.1 var(--rounded); color: rgba(255,255,255,.6); white-space: nowrap; font-variant-numeric: tabular-nums; }
.difficulties button.full-combo .best { color: var(--hold); }
/* The marks after the best, 2.5 pt apart: the Flawless sparkle, then the open modifiers' signs; "FLAWLESS" over the
   sparkle's column, ending where it ends. */
.difficulties .marks { display: flex; align-items: center; gap: calc(2.5 * var(--u)); }
.difficulties .marks:empty { display: none; }
.marks-head {
  display: flex; justify-content: flex-end; align-items: flex-end; gap: calc(2.5 * var(--u));
  margin-bottom: calc(-1 * var(--u)); padding: 0 calc(8 * var(--u));
  /* A row's border, unseen, so the head's edge snaps to the same pixel as theirs. */
  border: solid transparent; border-width: 0 calc(1.2 * var(--u));
  font: 800 calc(8 * var(--u))/1 var(--rounded); text-transform: uppercase; color: var(--tap);
}
.marks-head[hidden] { display: none; }
.marks-head .marks { visibility: hidden; height: 0; }
/* A mark, drawn as the Flawless mark (FlawlessMark, ModifierMark): its sign in its colour at 25 % until earned, then
   white into its colour, glowing. The sparkle at 11 pt, a modifier's sign at 9.5. */
.mark { --c: var(--tap); --m: calc(11 * var(--u)); height: var(--m); width: auto; flex: none; fill: color-mix(in srgb, var(--c) 25%, transparent); }
.mark.mirror { --c: var(--fwd); --m: calc(9.5 * var(--u)); stroke: color-mix(in srgb, var(--c) 25%, transparent); }
.mark.pitch { --c: var(--fire); --m: calc(9.5 * var(--u)); }
.mark.counterspin { --c: var(--spin); --m: calc(9.5 * var(--u)); stroke: color-mix(in srgb, var(--c) 25%, transparent); }
.mark.on { filter: drop-shadow(0 0 calc(.35 * var(--m)) var(--c)); }
.mark.flawless.on { fill: url(#lit-flawless); }
.mark.mirror.on { fill: url(#lit-mirror); stroke: url(#lit-mirror); }
.mark.pitch.on { fill: url(#lit-pitch); }
.mark.counterspin.on { fill: url(#lit-counterspin); stroke: url(#lit-counterspin); }
.title .loading { height: calc(2.5 * var(--u)); margin: 0 calc(18 * var(--u)); border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
.title .loading span { display: block; height: 100%; background: var(--tap); transform-origin: left; transform: scaleX(0); }
body.loaded .title .loading { display: none; }

/* How to play: over the decks for a deck's hint, under the strip for the crown's. */
.howto { pointer-events: none; }
.howto .skip {
  pointer-events: auto; position: absolute; top: calc(10 * var(--u)); left: calc(18 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u));
  border: 0; background: none; color: rgba(255,255,255,.6); font: 500 calc(13 * var(--u))/1 var(--rounded);
  animation: appear .3s 4s both;
}
@keyframes appear { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
/* A deck's hint over the strip's place (hidden then), clear of the markers on the records' inner tops; the
   crown's under the strip, over the dimmed records. */
.howto-text {
  position: absolute; left: 0; right: 0; top: calc(17 * var(--u)); height: calc(78 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u));
  padding: 0 calc(16 * var(--u)); text-align: center; text-shadow: 0 0 calc(4 * var(--u)) #000;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.8) 20%, rgba(0,0,0,.8) 80%, transparent);
}
.howto.on-crown .howto-text { top: calc(86 * var(--u)); height: calc(110 * var(--u)); }
.howto .caption { margin: 0; font: 600 calc(11 * var(--u))/1.2 var(--rounded); color: rgba(255,255,255,.6); }
.howto h2 { margin: 0; font: 800 calc(22 * var(--u))/1.1 var(--rounded); }
.howto-body { position: relative; display: grid; place-items: center; }
.howto-body p { margin: 0; font: 400 calc(13 * var(--u))/1.2 var(--rounded); }
.howto .check { position: absolute; font: 900 calc(26 * var(--u))/1 var(--rounded); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.howto.passed .howto-body p { opacity: 0; }
.howto.passed .check { opacity: 1; transform: none; }

/* Paused: resume, restart or quit (GameplayView's PauseOverlay). */
.pause {
  justify-content: center; gap: calc(8 * var(--u)); padding: 0 calc(18 * var(--u));
  background: rgba(0,0,0,.85);
}
.pause h2 { margin: 0 0 calc(2 * var(--u)); text-align: center; font: 700 calc(17 * var(--u))/1.2 var(--rounded); }
.pause .row .button { flex-direction: column; gap: calc(2 * var(--u)); font-size: calc(13 * var(--u)); padding: calc(4 * var(--u)) 0; }
.pause .icon { font-size: calc(15 * var(--u)); line-height: 1; }

/* Failed: how far the run got (GameplayView's FailCard), until the run starts over by itself. */
.fail {
  align-items: center; justify-content: center; gap: calc(6 * var(--u)); padding: 0 calc(20 * var(--u));
  background: radial-gradient(circle at 50% 50%, #000 0, #000 calc(55 * var(--u)), transparent calc(125 * var(--u))), rgba(0,0,0,.75);
}
.fail h2 { margin: 0; font: 900 calc(26 * var(--u))/1.1 var(--rounded); color: var(--miss);
  text-shadow: 0 0 calc(8 * var(--u)) rgba(255,59,48,.5); }
.reached { --reached: 0; width: calc(96 * var(--u)); height: calc(6 * var(--u)); border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
.reached span { display: block; height: 100%; width: max(calc(6 * var(--u)), calc(var(--reached) * 100%)); border-radius: 99px; background: var(--miss); }
.fail p { margin: 0; font: 400 calc(13 * var(--u))/1.2 var(--rounded); color: rgba(255,255,255,.6); }

/* Results: grade, stars and score up front, then the details (Screens/ResultsView.swift). */
.results {
  align-items: stretch; padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)); gap: calc(2 * var(--u));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; background: #000; text-align: center;
}
.results::-webkit-scrollbar { display: none; }
.results-backdrop { position: absolute; inset: 0 0 auto; height: calc(150 * var(--u)); z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.5), #000), url("track/cover.png") center / cover; filter: blur(calc(10 * var(--u))) brightness(.55); transform: scale(1.2); }
.results .difficulty { margin: 0; font: 400 calc(12 * var(--u))/1.2 var(--rounded); color: rgba(255,255,255,.6); }
.grade-row { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); }
.grade { font: 900 calc(48 * var(--u))/1 var(--rounded); text-shadow: 0 0 calc(8 * var(--u)) currentColor; }
.grade-side { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u)); }
.results .stars { font-size: calc(15 * var(--u)); }
.flawless { display: flex; gap: calc(3 * var(--u)); font-size: calc(12 * var(--u)); color: rgba(255,255,255,.3); }
.flawless .on { color: var(--tap); }
.fc { font: 900 calc(11 * var(--u))/1 var(--rounded); color: var(--hold); white-space: nowrap; }
.fc[hidden], .flawless[hidden] { display: none; }
.score { margin: 0; font: 700 calc(26 * var(--u))/1.1 var(--rounded); font-variant-numeric: tabular-nums; }
.badges { display: flex; justify-content: center; gap: calc(4 * var(--u)); }
.badges:empty { display: none; }
.badges span { padding: calc(2 * var(--u)) calc(6 * var(--u)); border-radius: 99px; background: var(--bwd); color: #000; font: 900 calc(9 * var(--u))/1.2 var(--rounded); }
.stats, .counts { display: grid; margin: 0; }
.stats { grid-template-columns: repeat(3, 1fr); margin-top: calc(4 * var(--u)); }
.stats div, .counts div { display: flex; flex-direction: column-reverse; align-items: center; }
.stats dd { margin: 0; font: 600 calc(14 * var(--u))/1.2 var(--rounded); font-variant-numeric: tabular-nums; }
.stats dt { font: 400 calc(9.5 * var(--u))/1.2 var(--text); color: rgba(255,255,255,.55); }
.counts { grid-template-columns: repeat(5, 1fr); margin: calc(3 * var(--u)) 0 calc(5 * var(--u)); }
.counts dd { margin: 0; font: 700 calc(12 * var(--u))/1.2 var(--rounded); font-variant-numeric: tabular-nums; }
.counts dt { font: 600 calc(7.5 * var(--u))/1.2 var(--rounded); text-transform: uppercase; letter-spacing: .02em; }
.counts .perfect { color: var(--perfect); } .counts .great { color: var(--tap); } .counts .good { color: var(--hold); }
.counts .ok { color: var(--ok); } .counts .miss { color: var(--miss); }
.results .row { margin-top: auto; }
.results .button { min-height: calc(32 * var(--u)); font-size: calc(13 * var(--u)); }

/* A moment over the results (FlawlessMoment, ModifierMarkMoment, ModifierMoment), opaque: its title in its colour,
   its signs popping in one after the other at 30 pt, a line under them. */
.moment {
  --c: var(--fwd);
  align-items: center; justify-content: center; gap: calc(8 * var(--u)); padding: calc(16 * var(--u));
  background: #000; text-align: center; cursor: pointer;
}
.moment h2 { margin: 0; text-wrap: balance; font: 900 calc(22 * var(--u))/1.1 var(--rounded); color: var(--c); text-shadow: 0 0 calc(8 * var(--u)) color-mix(in srgb, var(--c) 70%, transparent); }
.moment h2 .dot { color: rgba(255,255,255,.6); }
.moment-signs { display: flex; justify-content: center; align-items: flex-start; gap: calc(16 * var(--u)); }
.moment[data-kind="flawless"] .moment-signs { gap: calc(12 * var(--u)); }
.moment .pop { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); scale: .2; opacity: 0; }
.moment.shown .pop { scale: 1; opacity: 1; transition: scale .4s var(--delay) cubic-bezier(.3, 1.7, .5, 1), opacity .2s var(--delay); }
.moment .mark { --m: calc(30 * var(--u)); }
.moment .sign { height: calc(30 * var(--u)); width: auto; color: var(--c); filter: drop-shadow(0 0 calc(10 * var(--u)) var(--c)); }
.moment .sign-caption { font: 600 calc(9.5 * var(--u))/1.2 var(--rounded); color: rgba(255,255,255,.6); white-space: nowrap; }
.moment p { margin: 0; text-wrap: balance; font: 400 calc(12 * var(--u))/1.25 var(--rounded); color: rgba(255,255,255,.6); }

/* Calibration. */
.calibration {
  width: min(420px, calc(100vw - 32px)); padding: 24px 24px 20px; border: 1px solid var(--line); border-radius: 20px;
  background: #121217; color: var(--fg); text-align: center;
}
.calibration:focus { outline: none; }
.calibration::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.calibration h2 { margin: 0 0 6px; font: 800 20px/1.2 var(--rounded); }
.calibration p { margin: 0; color: var(--dim); }
.pad {
  --pulse: 0;
  width: 132px; height: 132px; margin: 20px auto 14px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,196,107, calc(.35 + .65 * var(--pulse)));
  background: radial-gradient(circle, rgba(255,196,107, calc(.08 + .35 * var(--pulse))), rgba(255,196,107,.02) 70%);
  touch-action: manipulation;
}
.calibration .status { min-height: 1.45em; color: var(--fg); }
.offset { display: grid; gap: 6px; margin: 18px 0 18px; color: var(--dim); font-size: 13px; }
.offset output { color: var(--gold); font-variant-numeric: tabular-nums; margin-left: 6px; }
.offset input { width: 100%; accent-color: var(--gold); }
.calibration .row { justify-content: center; }
.calibration .row > * { flex: 0 1 auto; }
.calibration .prominent { background: var(--fg); color: #111; border-color: var(--fg); }

/* Phones: the controls' words get smaller. */
@media (max-width: 640px) {
  .controls { gap: 8px; font-size: 12.5px; }
}