:root {
  --u: 4px; /* one percent of the stage height, set by main.js */
  --edge: 28px; /* keep controls away from the system edge-swipe zones */
  --sa-t: 0px; --sa-r: 0px; --sa-b: 0px; --sa-l: 0px; /* safe-area insets mapped onto the stage edges */
  --ink: #fff;
  --panel: rgba(12, 14, 24, 0.82);
  --accent: #ffb347;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  margin: 0;
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  touch-action: none;
}

#page { position: fixed; inset: 0; overflow: hidden; }

#probe {
  position: fixed; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#boot-error {
  position: fixed; left: 0; right: 0; top: 0; padding: 16px; background: #a00; color: #fff; z-index: 99; text-align: center;
}

button {
  font: inherit; color: inherit; border: 0; margin: 0; padding: 0; background: none; touch-action: none;
  -webkit-appearance: none; appearance: none;
}
button:disabled { opacity: 0.5; }

/* ---- stage ---- */

#stage {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  overflow: hidden;
  background: #000;
  touch-action: none;
  visibility: hidden;
}
#stage.on { visibility: visible; }

#game { position: absolute; inset: 0; }
#game canvas { position: absolute; left: 0; top: 0; display: block; }

#hud, #toolbar { pointer-events: none; }
#hud > * { position: absolute; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); font-variant-numeric: tabular-nums; }
#hud small { display: block; font-size: calc(var(--u) * 3); opacity: 0.8; letter-spacing: 0.08em; text-transform: uppercase; }

#hud-speed { left: max(var(--sa-l), var(--edge)); top: calc(var(--sa-t) + var(--u) * 3); font-size: calc(var(--u) * 10); font-weight: 800; line-height: 1; }
#hud-time { left: 50%; transform: translateX(-50%); top: calc(var(--sa-t) + var(--u) * 3); font-size: calc(var(--u) * 10); font-weight: 800; line-height: 1; text-align: center; }
#hud-time.low { color: #ff6b5e; }
#hud-time.full { color: #ffd23f; }   /* the bank is at its cap */
#hud-score { left: 50%; transform: translateX(-50%); top: calc(var(--sa-t) + var(--u) * 16); font-size: calc(var(--u) * 5); font-weight: 700; text-align: center; white-space: nowrap; }
#hud-score small { display: inline; margin-left: 0.3em; }
#test-badge {
  left: max(var(--sa-l), var(--edge)); top: calc(var(--sa-t) + var(--u) * 16); /* under the speed, clear of the popups */
  padding: calc(var(--u) * 0.4) calc(var(--u) * 2); border: 1px solid var(--accent); border-radius: calc(var(--u) * 2);
  font-size: calc(var(--u) * 3); font-weight: 800; letter-spacing: 0.12em; color: var(--accent); white-space: nowrap;
}
#test-badge[hidden] { display: none; }
/* The wind arrow shows which way the wind will push, about two seconds ahead of the push; SLIPPERY shows on a wet or sandy road. */
#hud-wx {
  left: max(var(--sa-l), var(--edge)); top: calc(var(--sa-t) + var(--u) * 22);
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  font-size: calc(var(--u) * 3.2); font-weight: 800; letter-spacing: 0.1em; opacity: 0; transition: opacity 0.4s;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 3); background: rgba(12, 14, 24, 0.55);
}
#hud-wx.show { opacity: 1; }
#wx-slip { color: #9fd3ff; }
#wx-wind { display: inline-flex; padding-left: calc(var(--u) * 0.6); }
#wx-wind[hidden] { display: none; }
#wx-wind i {
  width: calc(var(--u) * 3); height: calc(var(--u) * 3); margin-right: calc(var(--u) * -0.9);
  border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg); opacity: 0.2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
#wx-wind.left { transform: scaleX(-1); }
#wx-wind[data-n="1"] i:nth-child(1), #wx-wind[data-n="2"] i:nth-child(-n+2), #wx-wind[data-n="3"] i { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #hud-wx { transition: none; } }
#v-combo { margin-left: 0.6em; color: var(--accent); }
#popup { left: 50%; top: 27%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 8); font-weight: 800; color: var(--accent); opacity: 0; white-space: pre; text-align: center; transition: opacity 0.25s; }
#popup.show { opacity: 1; transition: none; }
#popup.gold { color: #ffd23f; font-size: calc(var(--u) * 10); text-shadow: 0 0 calc(var(--u) * 1.5) rgba(30, 20, 0, 0.75), 0 calc(var(--u) * 0.4) 0 rgba(30, 20, 0, 0.6); }
#hint { left: 50%; bottom: calc(var(--u) * 24); transform: translateX(-50%); font-size: calc(var(--u) * 4.5); opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
#hint.show { opacity: 0.9; }

#toolbar {
  position: absolute; right: calc(var(--sa-r) + var(--u) * 2); top: calc(var(--sa-t) + var(--u) * 2);
  /* A column keeps the buttons clear of the centred time and score readouts on narrow stages. */
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 1.5);
}
#toolbar button {
  pointer-events: auto;
  min-height: calc(var(--u) * 8); padding: 0 calc(var(--u) * 2.5);
  font-size: calc(var(--u) * 3.2); font-weight: 600; letter-spacing: 0.04em;
  background: rgba(12, 14, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: calc(var(--u) * 4);
}

.pedal {
  position: absolute; bottom: max(var(--sa-b), var(--edge));
  width: calc(var(--u) * 42); height: calc(var(--u) * 30);
  border: 2px solid rgba(255, 255, 255, 0.55); border-radius: calc(var(--u) * 5);
  background: rgba(20, 20, 30, 0.35);
  font-size: calc(var(--u) * 5); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
#brake { left: max(var(--sa-l), var(--edge)); border-color: rgba(255, 110, 100, 0.8); }
#gas { right: max(var(--sa-r), var(--edge)); border-color: rgba(120, 230, 150, 0.8); }
#brake.down { background: rgba(255, 90, 80, 0.5); }
#gas.down { background: rgba(90, 220, 130, 0.5); }
.pedal span { pointer-events: none; }

/* ---- debug panel ---- */

#debug {
  /* Sits between the two pedals so it never covers them. */
  position: absolute; top: calc(var(--sa-t) + var(--u) * 12);
  left: calc(max(var(--sa-l), var(--edge)) + var(--u) * 44);
  right: calc(max(var(--sa-r), var(--edge)) + var(--u) * 44);
  max-height: calc(100% - var(--sa-t) - var(--u) * 14 - var(--edge));
  overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: calc(var(--u) * 2); background: var(--panel); border-radius: calc(var(--u) * 2);
  font-size: calc(var(--u) * 3.1);
}
#debug[hidden] { display: none; }
#warp-tool { margin-bottom: calc(var(--u) * 1); padding-bottom: calc(var(--u) * 1); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.dbg-head { font-weight: 800; letter-spacing: 0.04em; color: var(--accent); white-space: nowrap; }
.warp-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); }
.warp-row + .warp-row { margin-top: calc(var(--u) * 1); }
.warp-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
#warp-tool button { flex: 1; padding: calc(var(--u) * 1) calc(var(--u) * 2); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: calc(var(--u) * 2); touch-action: manipulation; }
/* Two label and value pairs per row so the whole panel fits without scrolling, down to a stage 664 px wide (touch
   scrolling inside the rotated stage is untested on a phone). */
.dbg-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 0 calc(var(--u) * 3); font-variant-numeric: tabular-nums; }
.dbg-grid span { opacity: 0.7; }
.dbg-grid b { font-weight: 600; text-align: right; }
.dbg-grid #d-pose, .dbg-grid #d-fps, .dbg-grid #d-scale { grid-column: 2 / 5; }
.dbg-row { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: calc(var(--u) * 1.5); }
.dbg-row span { font-size: 0.8em; white-space: nowrap; }
.dbg-row b { font-variant-numeric: tabular-nums; margin-left: 0.3em; }
.dbg-row input[type=range] { grid-column: 1 / 3; width: 100%; touch-action: none; margin: calc(var(--u) * 0.5) 0 0; }
#dbg-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--u) * 1.5); }
.dbg-foot { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--u) * 1); }
#d-reset { padding: calc(var(--u) * 1) calc(var(--u) * 2); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: calc(var(--u) * 2); touch-action: manipulation; }

/* ---- screens ---- */

.pscreen, .sscreen {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center; text-align: center;
  background: rgba(8, 10, 20, 0.86);
}
.pscreen { position: fixed; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: #0b0d1a; z-index: 10; overflow-y: auto; }
.sscreen { padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); z-index: 5; }
.pscreen.show, .sscreen.show { display: flex; }
#s-start { touch-action: pan-y; }

.card { max-width: 30em; padding: 20px 24px; }
.sscreen .card { padding: 0 24px; }
h1 { margin: 0 0 8px; font-size: 44px; letter-spacing: 0.02em; color: var(--accent); }
h2 { margin: 0 0 8px; font-size: 26px; }
.sscreen h2 { font-size: calc(var(--u) * 9); }
.sscreen p { font-size: calc(var(--u) * 4.5); margin: calc(var(--u) * 1.5) 0; }
.sscreen .big, .big { font-size: calc(var(--u) * 6); font-weight: 800; color: var(--accent); }
.pscreen .big { font-size: 22px; }
.lead { font-size: 18px; line-height: 1.4; }
ol { text-align: left; font-size: 16px; line-height: 1.45; padding-left: 1.4em; margin: 16px 0 22px; }
.note { font-size: 14px; opacity: 0.75; min-height: 1.2em; }
.sscreen .note { font-size: calc(var(--u) * 3.6); }
#cal-note:empty { display: none; }
.primary {
  display: inline-block; min-width: 14em; padding: 16px 28px; border-radius: 14px;
  background: var(--accent); color: #1a1205; font-size: 20px; font-weight: 800; touch-action: manipulation;
}
.sscreen .primary { font-size: calc(var(--u) * 5.5); padding: calc(var(--u) * 3) calc(var(--u) * 7); min-width: min(14em, 100%); }
.link { display: block; margin: 18px auto 0; font-size: 15px; text-decoration: underline; opacity: 0.8; touch-action: manipulation; }
#s-calibrate { cursor: pointer; }
.desktop .pedal, .desktop #b-view, .desktop #b-debug { display: none; }
#cal-test[hidden], #cal-best[hidden] { display: none; }
.desktop .sscreen #cal-text { font-size: calc(var(--u) * 3.2); }
#b-restart {
  margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 6); border-radius: 14px;
  border: 2px solid var(--accent); color: var(--accent); background: transparent;
  font-size: calc(var(--u) * 4.5); font-weight: 800; touch-action: manipulation;
}
#b-restart[hidden] { display: none; }

/* ---- music on the ready and pause cards: the song that plays, Like, and the music switch ---- */

#cal-music { margin-top: calc(var(--u) * 2); }
#cal-music[hidden], #cal-music [hidden] { display: none; }
.sscreen #mu-title { margin: 0; font-size: calc(var(--u) * 4); font-weight: 700; }
#mu-info { margin: calc(var(--u) * 0.5) 0 0; }
.mu-row { display: flex; justify-content: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1.5); }
.mu-row button {
  min-height: max(44px, calc(var(--u) * 8)); padding: 0 calc(var(--u) * 4);
  border: 2px solid rgba(255, 255, 255, 0.4); border-radius: calc(var(--u) * 2.2); background: rgba(255, 255, 255, 0.06);
  font-size: calc(var(--u) * 3.6); font-weight: 700; touch-action: manipulation; cursor: pointer;
}
#mu-stars { align-items: center; gap: calc(var(--u) * 1); }
#mu-rate { margin-right: calc(var(--u) * 1); font-size: calc(var(--u) * 3.6); opacity: 0.8; }
#mu-stars button { min-width: max(44px, calc(var(--u) * 8)); padding: 0; font-size: calc(var(--u) * 5); color: rgba(255, 255, 255, 0.45); }
#mu-stars button.on { color: var(--accent); border-color: var(--accent); }

/* ---- start-from picker on the ready card ---- */

/* Wider than the plain ready card; 8 chips per row, two rows (6 and three below). Each chip is at least 44 css px high (the stage is never scaled, only rotated). */
#s-calibrate .card:has(#cal-pick:not([hidden])) { max-width: none; width: min(calc(var(--u) * 190), calc(100% - 2 * var(--edge))); }
#cal-pick { margin: calc(var(--u) * 2) 0 calc(var(--u) * 1); container-type: inline-size; }
#cal-pick[hidden] { display: none; }
.sscreen #pick-head { margin: 0 0 calc(var(--u) * 1); font-size: calc(var(--u) * 3.2); opacity: 0.75; letter-spacing: 0.04em; }
#pick-chips { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: calc(var(--u) * 1); }
/* On a stage narrower than about 600 px the labels no longer fit eight to a row: six to a row, three rows. */
/* The label goes too (the chips speak for themselves) so the whole card keeps clear of the stage edges. */
@container (max-width: 540px) { #pick-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sscreen #pick-head { display: none; } }
#cal-test:empty { display: none; }
/* On a short stage (a phone in landscape) the mode block is the chips alone: the head and the note go (the note is the chips' title). */
.short #mode-head, .short #mode-note { display: none; }
#cal-mode { margin: calc(var(--u) * 2) 0 calc(var(--u) * 1); }
#cal-mode[hidden] { display: none; }
.sscreen #mode-head { margin: 0 0 calc(var(--u) * 1); font-size: calc(var(--u) * 3.2); opacity: 0.75; letter-spacing: 0.04em; }
#mode-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1); max-width: calc(var(--u) * 100); margin: 0 auto; }
#mode-note { margin: calc(var(--u) * 1) 0 0; min-height: 0; }
#pick-chips button, #mode-chips button {
  min-height: max(44px, calc(var(--u) * 8)); padding: 0 2px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: calc(var(--u) * 3.4); font-weight: 700; line-height: 1.15;
  border: 2px solid rgba(255, 255, 255, 0.4); border-radius: calc(var(--u) * 2.2); background: rgba(255, 255, 255, 0.06);
  touch-action: manipulation; cursor: pointer;
}
#pick-chips button.sel, #mode-chips button.sel { background: var(--accent); border-color: var(--accent); color: #1a1205; }
#pick-chips button:first-child:not(.sel) { border-color: var(--accent); color: var(--accent); }

/* ---- result, name and board cards ---- */

.sscreen[role=dialog] .card { max-width: none; width: calc(var(--u) * 150); }
.sscreen[role=dialog] h2 { margin-bottom: calc(var(--u) * 1); }
.sscreen[role=dialog] p { margin: calc(var(--u) * 1) 0; }
.lede { font-size: calc(var(--u) * 4) !important; opacity: 0.9; }
.status { font-size: calc(var(--u) * 4.2) !important; margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 2.5) !important; }
.sscreen .big { margin: calc(var(--u) * 1) 0 calc(var(--u) * 1.5); }

.parts { list-style: none; margin: 0 auto calc(var(--u) * 1); padding: 0; display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 0.6) calc(var(--u) * 6); text-align: left; font-size: calc(var(--u) * 4); font-variant-numeric: tabular-nums; }
.parts li { display: flex; justify-content: space-between; gap: calc(var(--u) * 2); }
.parts b { font-weight: 700; color: var(--accent); }
.wide .parts { grid-template-columns: 1fr 1fr; }

.btns { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.sscreen .btns .primary { min-width: 0; padding: calc(var(--u) * 2.2) calc(var(--u) * 5); font-size: calc(var(--u) * 5); border-radius: calc(var(--u) * 3); }
.second {
  min-height: calc(var(--u) * 11); padding: 0 calc(var(--u) * 4); border: 2px solid rgba(255, 255, 255, 0.5); border-radius: calc(var(--u) * 3);
  font-size: calc(var(--u) * 4.2); font-weight: 700; touch-action: manipulation;
}
.btns .primary { min-height: calc(var(--u) * 11); }
button[hidden], .btns [hidden] { display: none; }
#b-scores, #b-sound { font-size: calc(var(--u) * 4); min-height: calc(var(--u) * 11); margin-top: calc(var(--u) * 1); }
.links { display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 6); }
.links .link { margin-left: 0; margin-right: 0; }
.sscreen button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* name card: the live name above a drum of tiles, the pedals below */
/* The bottom padding keeps the text and the drum above the two pedal buttons. */
#s-name .card { width: 100%; max-width: none; padding: 0 calc(var(--u) * 2) calc(var(--u) * 32); }
#nm-slots { display: flex; justify-content: center; gap: calc(var(--u) * 1.2); margin: calc(var(--u) * 1) 0 calc(var(--u) * 2); }
#nm-slots span {
  width: calc(var(--u) * 7); height: calc(var(--u) * 9); border-bottom: 3px solid rgba(255, 255, 255, 0.35);
  font-size: calc(var(--u) * 7.5); font-weight: 800; line-height: calc(var(--u) * 9); color: var(--accent);
}
#nm-slots span.cur { border-bottom-color: var(--accent); }
#nm-drum { position: relative; overflow: hidden; width: 100%; height: calc(var(--u) * 14); margin: 0 auto; }
#nm-drum::before {
  content: ''; position: absolute; left: 50%; top: calc(var(--u) * 0.5); width: calc(var(--u) * 15); height: calc(var(--u) * 13); transform: translateX(-50%);
  border: 3px solid var(--accent); border-radius: calc(var(--u) * 2); background: rgba(255, 179, 71, 0.16);
}
#nm-row { position: absolute; left: 50%; top: 0; height: 100%; display: flex; align-items: center; will-change: transform; }
#nm-row span {
  flex: none; width: calc(var(--u) * 15); text-align: center; font-size: calc(var(--u) * 7); font-weight: 800; touch-action: manipulation; opacity: 0.55;
  position: relative; z-index: 1;
}
#nm-row span.mid { opacity: 1; color: #fff; }
#nm-row span.cmd { font-size: calc(var(--u) * 4.6); letter-spacing: 0.04em; }
#nm-hint { min-height: calc(var(--u) * 5); font-size: calc(var(--u) * 3.8) !important; opacity: 0.9; }
#nm-back { position: absolute; left: max(var(--sa-l), var(--edge)); top: calc(var(--sa-t) + var(--u) * 3); }
#s-name .pedal { z-index: 1; font-size: calc(var(--u) * 4); }
#nm-del { left: max(var(--sa-l), var(--edge)); border-color: rgba(255, 110, 100, 0.8); }
#nm-pick { right: max(var(--sa-r), var(--edge)); border-color: rgba(120, 230, 150, 0.8); }
#nm-del.down { background: rgba(255, 90, 80, 0.5); }
#nm-pick.down { background: rgba(90, 220, 130, 0.5); }

/* board card */
#s-board .card { width: calc(var(--u) * 210); }
.narrow#s-board .card { width: calc(var(--u) * 150); }
#bd-list { list-style: none; margin: 0 auto calc(var(--u) * 1); padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); justify-content: center; gap: 0 calc(var(--u) * 4); text-align: left; }
.narrow #bd-list { grid-template-rows: repeat(10, auto); }
#bd-list li { display: grid; grid-template-columns: 1.5em 4.6em 4.8em 4.6em 3.9em 2.8em; align-items: baseline; gap: 0 0.6em; font-size: calc(var(--u) * 3.8); line-height: 1.6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.narrow #bd-list li { line-height: 1.32; }
#bd-list li b { text-align: right; font-weight: 700; }
#bd-list li .rk { text-align: right; opacity: 0.8; }
#bd-list li .km { text-align: right; }
#bd-list li.new { color: var(--accent); font-weight: 800; }
#bd-list li .tag { font-size: 0.7em; letter-spacing: 0.1em; }

/* while a card is up the HUD behind it would only add noise */
#stage.carded #hud { visibility: hidden; }
/* The pedals and the toolbar do nothing on the result, name and board cards. */
#stage.ended #toolbar, #stage.ended #brake, #stage.ended #gas { visibility: hidden; }

/* ---- sound card: the mixer ---- */
.sscreen[role=dialog]#s-sound .card { width: calc(var(--u) * 110); }
#mixer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 2.5) calc(var(--u) * 3); margin: calc(var(--u) * 3) 0 calc(var(--u) * 2); text-align: left; }
#mixer label { font-size: calc(var(--u) * 4.6); font-weight: 700; }
#mixer output { min-width: 3.2em; text-align: right; font-size: calc(var(--u) * 4.2); font-variant-numeric: tabular-nums; color: var(--accent); }
#mixer input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: max(44px, calc(var(--u) * 9)); margin: 0; background: transparent; touch-action: pan-y;
}
#mixer input[type=range]::-webkit-slider-runnable-track { height: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, 0.28); }
#mixer input[type=range]::-moz-range-track { height: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, 0.28); }
#mixer input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: calc(var(--u) * 7); height: calc(var(--u) * 7); margin-top: calc(var(--u) * -2.7);
  border-radius: 50%; background: var(--accent); border: 2px solid #1a1205;
}
#mixer input[type=range]::-moz-range-thumb { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--accent); border: 2px solid #1a1205; }
#mixer input[type=range]:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: calc(var(--u) * 2); }
#s-sound .btns { margin-top: calc(var(--u) * 2.5); }

/* ---- title screen ---- */
/* The picture (art/, with the logo in it) fills the page behind the text; the start button and the three steps stand on a dark glass panel at the bottom. */
#title-art { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #08130f; }
#title-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
/* On a phone the panel covers the lower third: the picture moves up a little so the car stays above it (the lowest part of the picture is calm foliage). */
@media (orientation: portrait) {
  #title-art img { transform: translateY(-5%); }
  #title-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(rgba(8, 19, 15, 0), #08130f); }
}
#s-start { align-items: stretch; }
#s-start .card { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-self: stretch; width: 100%; max-width: 34em; margin: 0 auto; padding: clamp(14px, 3vh, 30px) 20px clamp(14px, 3vh, 28px); box-sizing: border-box; }
/* The name is in the picture; the heading stays for screen readers and search. */
#s-start h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#s-start .lead { margin: 0 auto 12px; max-width: 24em; padding: 0 4px; font-size: clamp(13px, 1.9vh, 16px); line-height: 1.35; opacity: 0.92; }
.title-bottom { width: 100%; max-width: 26em; padding: clamp(12px, 2vh, 18px) 20px clamp(10px, 1.6vh, 16px); border-radius: 20px; background: rgba(10, 8, 26, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); }
.title-bottom .primary { min-width: 0; width: 100%; box-sizing: border-box; }
.title-bottom .link { margin-top: 10px; }
.title-bottom .note { margin: 6px 0 0; min-height: 0; }
.title-bottom .note:empty { display: none; }
.title-bottom .how { margin: 12px 0 8px; font-size: clamp(13px, 1.9vh, 15px); line-height: 1.4; opacity: 0.9; }
.credit { margin: 8px 0 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
/* A mouse and keyboard machine in landscape does not need the phone steps: the panel stays short and the car on the road stays in view (the panel also moves to the left of it). */
@media (min-aspect-ratio: 1/1) and (pointer: fine) { .title-bottom .how { display: none; } .title-bottom { transform: translateX(-12vw); } }
/* The pause card of dev mode is tall: on a short desktop window the key reminder gives way, so the card fits above the Sound link. */
.desktop #s-calibrate.short.paused #cal-text { display: none; }