/* The screens: the regions every screen shares (head / content / foot), then each screen's own
   arrangement of the shared components (css/components.css). The select screen is css/select.css. */

/* ---------------------------------------------------------------- regions */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  pointer-events: none;
  color: var(--c-text);
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  /* (clear of a phone's notch and rounded corners: viewport-fit=cover lets the picture go under them, not the menus) */
  padding: max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  pointer-events: auto;
}

/* a sheet in the middle over the dimmed game */
.screen-sheet {
  align-items: center;
  justify-content: center;
  background: var(--glass-scrim);
}

/* open screens: head along the top, foot along the bottom, the game in between */
.screen-open {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
  background:
    linear-gradient(rgb(13 23 48 / 46%), rgb(13 23 48 / 0%) 22%),
    linear-gradient(rgb(13 23 48 / 0%) 64%, rgb(13 23 48 / 62%));
}

.head-context { margin-left: auto; }
.title.wrap { white-space: normal; }
.grow { flex: 1 1 0; min-width: 0; min-height: 0; }

/* ---------------------------------------------------------------- the foot's prompts: the buttons of the device in use */
.prompts {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font-size: var(--t-sm);
}

/* a narrow sheet has room for two prompts beside its button */
.sheet-narrow .prompt:nth-child(n + 3) { display: none; }

/* (a prompt that does not fit beside the foot's button goes below the others rather than being cut off mid-word: longer
   words, as in German, need two lines in a narrow sheet) */
.prompt-set { display: none; flex-wrap: wrap; gap: var(--s-1) var(--s-4); align-items: center; }
/* a gamepad's prompts in its own family's buttons (html[data-pad]: js/ui/prompts.js) */
html[data-input="pad"][data-pad="xbox"] .prompt-pad-xbox,
html[data-input="pad"][data-pad="playstation"] .prompt-pad-playstation,
html[data-input="pad"][data-pad="nintendo"] .prompt-pad-nintendo,
html[data-input="pad"][data-pad="generic"] .prompt-pad-generic,
html[data-input="keys"] .prompt-keys,
html:not([data-input]) .prompt-keys { display: flex; }

.prompt {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  font-size: 0.85em;
  font-weight: 800;
  color: var(--c-text-soft);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(0 0 0 / 70%);
}

.prompt .cap { font-size: 0.82em; }
.prompt-label { margin-left: 0.15em; }

/* ---------------------------------------------------------------- title */
/* the logo, centred at the top and still (no float, no bob) */
.title-head {
  position: relative;
  display: flex;
  justify-content: center;
}

/* full screen in and out (js/ui/fullscreen.js), in the corner clear of the logo */
.title-fullscreen { position: absolute; top: 0; right: 0; }

.title-mark { margin: 0; }

.title-logo {
  display: block;
  /* (not wider than the middle of the view: the sign board on the 3D start gantry is often beside it) */
  width: min(26rem, 46vw);
  max-height: 24vh;
  object-fit: contain;
  filter: drop-shadow(0 8px 0 rgb(0 0 0 / 28%)) drop-shadow(0 18px 26px rgb(0 0 0 / 45%));
}

.title-body {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.mode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 15rem)) minmax(0, 10rem);
  gap: var(--s-4);
  width: 100%;
  justify-content: center;
}

.mode {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  align-items: center;
  justify-content: center;
  min-height: 9.5rem;
  padding: var(--s-4);
  font-style: italic;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: var(--glass-1);
  border: var(--line-thin) solid var(--glass-rim);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-plate);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  transition: transform var(--dur-fast), box-shadow var(--dur), border-color var(--dur);
}

.mode b {
  font-size: var(--t-lg);
  font-weight: 900;
  line-height: 1.1;
  paint-order: stroke fill;
  -webkit-text-stroke: var(--stroke) var(--c-ink);
}

.mode small {
  font-size: var(--t-xs);
  font-style: normal;
  font-weight: 700;
  color: var(--c-text-soft);
}

.mode-icon svg {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  overflow: visible;
}

.mode-primary {
  background: linear-gradient(rgb(255 224 102 / 92%), rgb(255 165 30 / 92%));
  border-color: var(--c-gold-rim);
}

.mode-primary small { color: #5a3200; }

.mode-small b { font-size: var(--t-md); }

.mode:hover,
.mode:focus-visible,
html.nav-keys .mode:focus {
  transform: translateY(-0.35rem);
  border-color: #fff;
}

/* ---------------------------------------------------------------- race set-up / online room */
.room-body {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  min-height: 0;
}

.room-setup,
.room-racers {
  display: flex;
  flex: 0 1 22rem;
  flex-direction: column;
  gap: var(--s-4);
  max-height: 100%;
  padding: var(--s-4);
  min-width: 0;
  overflow: auto;
  scrollbar-width: thin;
}

/* a racer's row: the name stays whole (up to most of the row) and the device tag after it gives way, cut short with an
   ellipsis - a long tag ("Tastatur oder Controller") pushed the name out */
.room-racers .row-item > .grow-text { flex-shrink: 0; max-width: 60%; }
.room-racers .row-item > .badge { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.track-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.tile-track {
  flex-direction: row;
  gap: var(--s-3);
  justify-content: flex-start;
  min-height: 3.4rem;
  padding: var(--s-2) var(--s-3);
  text-align: left;
  background: var(--track-bg);
  border-color: rgb(13 23 48 / 55%);
  text-shadow: 0 2px 0 rgb(0 0 0 / 35%);
}

.tile-track[aria-checked="true"] {
  background: var(--track-bg);
  border-color: var(--c-gold);
  transform: scale(1.03);
}

.track-icon svg { display: block; width: 1.9rem; height: 1.9rem; overflow: visible; }
.track-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.track-text b { font-size: var(--t-md); font-weight: 900; }
.track-text small { display: none; font-size: var(--t-xs); font-style: normal; font-weight: 700; line-height: 1.3; }
.tile-track[aria-checked="true"] small { display: block; }

.racers-head {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
}

.players {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.players .face { width: 2.4rem; height: 2.4rem; }

/* the track from above (the HUD's minimap, sized for the panel) */
.room-map-box { display: flex; flex-direction: column; gap: var(--s-2); }

.room-map {
  --u: 6px;
  display: flex;
  justify-content: center;
  height: 9rem;
  padding: var(--s-2);
  background: var(--glass-2);
  border-radius: var(--r-md);
}

.room-map .hud-map { justify-content: center; height: 100%; }
.room-map .hud-map svg { max-height: none; }

.room-code {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--hit);
  padding: 0 var(--s-4);
  background: var(--glass-1);
  border: var(--line-thin) solid var(--glass-rim);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

.room-code strong {
  font-size: var(--t-xl);
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  -webkit-user-select: text;
  user-select: text;
}

.wait-pill {
  display: inline-flex;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--hit-lg);
  margin-left: auto;
  padding: 0 var(--s-5);
  font-weight: 800;
  background: var(--glass-1);
  border: var(--line-thin) solid var(--glass-rim);
  border-radius: var(--r-md);
}

.spinner.small { width: 1.4rem; height: 1.4rem; border-width: 0.22rem; }

/* seat badge: a player's colour and shape (P1 ●, P2 ▲, P3 ■, P4 ◆) */
.seat-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0.05rem 0.55rem;
  font-size: var(--t-sm);
  font-style: italic;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  background: var(--seat, var(--p1));
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 2px var(--c-ink);
  paint-order: stroke fill;
  -webkit-text-stroke: 0.2em var(--c-ink);
}

.seat-badge:empty { display: none; }
.seat-badge.small { font-size: var(--t-xs); }

/* ---------------------------------------------------------------- online */
.online-sheet [data-when] { display: none; }
.online-sheet[data-state="idle"] [data-when="idle"] { display: grid; }
.online-sheet[data-state="busy"] [data-when="busy"],
.online-sheet[data-state="failed"] [data-when="failed"] { display: flex; }

.online-choices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

/* what online play shares, and where the privacy policy says more (datenschutz.html) - under both choices */
.online-privacy {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text-dim);
}

.online-privacy a { color: var(--c-text-soft); }

.online-choice {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5) var(--s-5);
}

.choice-icon svg { display: block; width: 2.4rem; height: 2.4rem; overflow: visible; }
.choice-icon.is-warn { color: #ffd23f; }
.choice-title { font-size: var(--t-lg); font-style: italic; font-weight: 900; }
.choice-text { flex: 1; font-weight: 700; color: var(--c-text-soft); }

.join { display: flex; gap: var(--s-2); width: 100%; }

.code-input {
  flex: 1;
  width: 6rem;
  font-size: var(--t-lg);
  text-align: center;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.online-message {
  flex-direction: column;
  gap: var(--s-4);
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  text-align: center;
}

/* ---------------------------------------------------------------- options hub */
.options-sheet {
  --sheet-w: 66rem;
  height: min(100%, 46rem);
}

.options-body {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  gap: var(--s-4);
  min-height: 0;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}

.rail-group { padding: var(--s-3) var(--s-3) var(--s-1); }
.rail-group:first-child { padding-top: 0; }

.rail > button {
  display: flex;
  flex: none;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--hit);
  padding: 0 var(--s-3);
  font-size: var(--t-md);
  font-weight: 800;
  color: var(--c-text-soft);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 transparent;
  transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}

.rail > button:hover { color: #fff; background: rgb(255 255 255 / 7%); }

.rail > button[aria-selected="true"] {
  color: var(--c-gold);
  background: rgb(255 201 58 / 12%);
  box-shadow: inset 0.3rem 0 0 var(--c-gold);
}

.options-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 0;
  padding: var(--s-4) var(--s-5);
}

.page-title {
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 900;
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
}

.setting-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  min-height: 3.6rem;
  padding: var(--s-2) 0;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.setting-icon svg { width: 1.6rem; height: 1.6rem; }
.setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting-label { font-size: var(--t-md); font-weight: 800; }
.setting-hint { font-size: var(--t-xs); font-weight: 700; color: var(--c-text-soft); }
.setting-note { font-size: var(--t-xs); font-weight: 800; color: #ffe9a8; }
.setting-note:empty { display: none; }
.setting-name { width: 12rem; }
.device-seg { align-self: flex-start; margin: var(--s-2) 0; }
.setting-row .stepper { width: min(16rem, 40vw); }
.setting-row .seg { min-width: 14rem; }

/* how to play: the tips */
.tips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--s-3);
  list-style: none;
}

.tip {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.4;
  background: rgb(255 255 255 / 6%);
  border-radius: var(--r-md);
}

.tip b { font-weight: 900; color: var(--c-gold); }
.tip-icon { color: var(--c-gold); }
.tip-icon svg { width: 1.8rem; height: 1.8rem; }

/* credits */
.credits { gap: var(--s-3); }
.credits-lead, .credits-note { font-size: var(--t-sm); font-weight: 600; line-height: 1.4; color: var(--c-text-soft); }
/* who made it (js/ui/credits.js MAKER, drawn by the engine's renderMadeBy): the Raykast logo, the name and its line, the tools */
.made-by { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid rgb(255 255 255 / 15%); }
.made-by-logo { align-self: flex-start; }
.made-by-logo img { display: block; height: 32px; width: auto; }
.made-by-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); font-weight: 600; line-height: 1.4; color: var(--c-text-soft); }
.made-by-name { font-weight: 800; color: var(--c-text); }
.made-by a { color: inherit; text-decoration: none; }
.made-by a:hover, .made-by a:focus-visible { text-decoration: underline; }
.made-by-name a, .made-by-tool a { font-weight: 800; color: var(--c-gold); }
/* the game's version (js/version.js), at the head of the credits */
.credits-version { margin: 0; font-size: var(--t-sm); font-weight: 800; color: var(--c-text); }
.credits-note { font-size: var(--t-xs); }
/* each model (js/ui/credits.js, drawn by the engine's renderCredits): its title (a link to it), "by" its maker · its licence
   (links to their page and to its text), what it became in the game, and what was changed */
.credits-list { display: flex; flex-direction: column; gap: var(--s-1); }
.credit { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); background: rgb(255 255 255 / 6%); border-radius: var(--r-sm); }
.credit-text { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); align-items: baseline; min-width: 0; }
.credit a { color: inherit; text-decoration: none; }
.credit a:hover, .credit a:focus-visible { text-decoration: underline; }
.credit .credit-title { font-weight: 800; color: var(--c-gold); }
.credit-by { font-size: var(--t-xs); font-weight: 600; color: var(--c-text-soft); }
.credit-by a:not(.credit-licence) { font-weight: 700; color: var(--c-text); }
.credit .credit-licence { padding: 0 var(--s-2); white-space: nowrap; border: 1px solid rgb(255 255 255 / 30%); border-radius: var(--r-pill); }
.credit-use { flex: 1 0 100%; font-weight: 700; line-height: 1.3; color: var(--c-text); }
.credit-changed { flex: 1 0 100%; font-size: var(--t-xs); line-height: 1.3; color: var(--c-text-soft); }

/* ---------------------------------------------------------------- pause */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.menu-list > .btn { justify-content: flex-start; width: 100%; }

/* ---------------------------------------------------------------- results
   One layout system (js/ui/screens/resultsScreen.js): the list's row (--row) is the unit.
   - The list is one row per racer, every row with the same columns: place, face, name, time, gap to
     the winner - or "Did not finish" across the time and the gap.
   - The podium stands on the same rows as the list, so the two are as tall and their rows line up: its
     blocks are whole rows high (first three, second two, third one), the face and name over each take
     the two rows above it, and every face on it is the same size.
   - One place badge size (--badge-h) on the podium and in the list.
   - The buttons: one main action (gold, last), the others alike - one look, one size; the ones a
     player may not use are left out, never left as holes. */
.results-sheet {
  --sheet-w: 68rem;
  --row: 2.75rem;
  --row-gap: var(--s-1);
  --badge-h: 1.9rem;
}

.results-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-5);
  align-items: start;
}

.podium,
.results {
  display: grid;
  grid-template-rows: repeat(var(--rows, 6), var(--row));
  row-gap: var(--row-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
}

.podium {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--s-2);
}

.podium-who {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding-bottom: var(--s-1);
}

.podium-face-box { position: relative; display: block; }
.podium-face { width: calc(var(--row) * 1.25); height: calc(var(--row) * 1.25); box-shadow: 0 0 0 3px var(--accent), 0 0 0 5px var(--c-ink); }
.podium-face-box > .seat-badge { position: absolute; top: -0.45rem; right: -0.8rem; }
.podium-name { max-width: 100%; overflow: hidden; font-size: var(--t-sm); font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.podium-who.is-me .podium-name { color: var(--c-gold); }

/* the blocks: the colour of their place along the top (the badges' gold, silver and bronze) */
.podium-block {
  --metal: #c9d8f2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding-top: calc((var(--row) - var(--badge-h)) / 2);
  background: linear-gradient(rgb(255 255 255 / 20%), rgb(255 255 255 / 5%));
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  box-shadow: inset 0 0.3rem 0 var(--metal), var(--glass-shine);
}

.podium-block.podium-1 { --metal: #ffd23a; }
.podium-block.podium-2 { --metal: #dfe7f3; }
.podium-block.podium-3 { --metal: #efa165; }
.podium-block.is-me { background: linear-gradient(rgb(255 201 58 / 40%), rgb(255 165 30 / 10%)); }

.podium-rank,
.results .place svg { display: block; width: auto; height: var(--badge-h); overflow: visible; }

.results { list-style: none; }

.result-row {
  display: grid;
  grid-template-columns: 3.2rem calc(var(--row) - 0.6rem) minmax(0, 1fr) 4.6rem 3.4rem;
  gap: var(--s-3);
  min-height: 0;
  padding: 0 var(--s-3) 0 var(--s-2);
}

.result-row .face { width: calc(var(--row) - 0.6rem); height: calc(var(--row) - 0.6rem); }
.result-name { display: flex; gap: var(--s-2); align-items: center; min-width: 0; }
.result-row .time { font-variant-numeric: tabular-nums; text-align: right; }
.result-row .gap { font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--c-text-soft); text-align: right; }
.result-row.is-me .gap { color: rgb(13 23 48 / 72%); }
.result-out { grid-column: 4 / -1; justify-self: end; }

/* what next: one main action, the others alike - equal columns as wide as the widest label (a button left
   out takes no column) */
.results-actions {
  display: flex;
  flex: 0 1 auto;
  gap: var(--s-3);
  min-width: 0;
  margin-left: auto;
}

.results-more {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--s-3);
  min-width: 0;
}

.results-action {
  min-height: var(--hit-lg);
  padding: 0 var(--s-3);
  font-size: var(--t-sm);
}

.results-action .label { min-width: 0; padding-right: 0.15em; overflow: hidden; text-overflow: ellipsis; }
.results-main { min-width: 12rem; padding: 0 var(--s-5); font-size: var(--t-lg); }

/* ---------------------------------------------------------------- a low window (a phone on its side) */
@media (max-height: 520px) {
  .screen-open { gap: var(--s-2); }
  .title-logo { max-height: 26vh; }
  .mode { min-height: 5.2rem; padding: var(--s-2); }
  .mode small { display: none; }
  .mode-icon svg { width: 1.8rem; height: 1.8rem; }
  .track-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
  .tile-track { min-height: var(--hit); padding: var(--s-1) var(--s-2); }
  .tile-track[aria-checked="true"] small { display: none; }
  .track-icon svg { width: 1.4rem; height: 1.4rem; }
  .track-text b { font-size: var(--t-sm); }
  .room-setup, .room-racers { gap: var(--s-2); padding: var(--s-2) var(--s-3); }
  .room-setup .field { gap: var(--s-1); }
  /* (the tracks and the difficulty explain themselves: their labels make way so nothing scrolls) */
  .room-setup .field > .kicker { display: none; }
  .room-setup .seg { padding: 2px; }
  .room-setup { flex-basis: 24rem; }
  /* (the racers are a list to read, not to press: slimmer rows, one column, the whole name in view) */
  .players { gap: 2px; }
  .players .row-item { min-height: 1.95rem; padding: 1px var(--s-2); }
  .players .face { width: 1.6rem; height: 1.6rem; }
  .players .seat-badge { font-size: 0.7rem; }
  .players .badge { display: none; }
  .room-map-box { display: none; }
  .sheet { gap: var(--s-2); padding: var(--s-3) var(--s-4); }
  .options-body { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); }
  .rail .label, .rail-group { display: none; }
  /* (seven pages in a window this low: their drawings two by two, each a whole finger wide) */
  .rail { display: grid; grid-template-columns: repeat(2, var(--hit)); grid-auto-rows: var(--hit); gap: 2px; align-content: start; }
  .rail > button { justify-content: center; min-width: var(--hit); padding: 0; }
  .options-page { padding: var(--s-2) var(--s-3); }
  .page-title { display: none; }
  .setting-row { min-height: 3rem; padding: var(--s-1) 0; }
  .setting-hint { display: none; }
  .menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* (the results keep their one layout, on a smaller row - no taller than the six rows leave room for under the
     head and the foot, bigger text too; the other actions keep to their icons) */
  .results-sheet {
    --row: min(2.4rem, calc((100dvh - 2 * var(--gutter) - 2 * var(--s-3) - 2 * var(--s-2) - var(--hit) - var(--hit-lg) - 5 * var(--row-gap) - 2 * var(--line-thin)) / 6));
    --badge-h: min(1.55rem, calc(var(--row) * 0.72));
  }
  .results-body { gap: var(--s-4); }
  .podium-name { font-size: var(--t-xs); }
  .result-row { grid-template-columns: 2.6rem calc(var(--row) - 0.5rem) minmax(0, 1fr) 4rem 3rem; gap: var(--s-2); }
  .results-actions, .results-more { gap: var(--s-2); }
  .results-more { grid-auto-columns: var(--hit-lg); }
  .results-action:not(.results-main) { padding: 0; }
  .results-action:not(.results-main) .label { display: none; }
  .results-main { min-width: 0; font-size: var(--t-md); }
  /* (a guest has one button, Leave room: it keeps its word) */
  .results-actions.is-waiting .results-more { grid-auto-columns: auto; }
  .results-actions.is-waiting .results-action { padding: 0 var(--s-4); }
  .results-actions.is-waiting .results-action .label { display: inline; }
  .online-message { min-height: 6rem; }
  .screen-foot .btn-sm .label { display: none; }
}

/* ---------------------------------------------------------------- an upright window */
@media (max-aspect-ratio: 6/5) {
  .mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-body { flex-direction: column; overflow: auto; }
  .room-body > .grow { display: none; }
  .room-setup, .room-racers { flex: none; width: 100%; max-height: none; }
  .online-choices { grid-template-columns: 1fr; }
  .results-body { grid-template-columns: minmax(0, 1fr); }
  .podium { grid-template-rows: repeat(var(--rows, 6), calc(var(--row) * 0.75)); }
  .options-body { grid-template-columns: auto minmax(0, 1fr); }
  .rail .label, .rail-group { display: none; }
  .rail > button { justify-content: center; min-width: var(--hit); padding: 0 var(--s-2); }
  /* results: the other actions in a row of their own over the main one, each its drawing over its word */
  .results-foot { flex-wrap: wrap; }
  .results-actions { flex-direction: column; width: 100%; margin-left: 0; }
  .results-more { grid-auto-columns: minmax(0, 1fr); }
  .results-action:not(.results-main) { flex-direction: column; gap: 2px; padding: var(--s-1); font-size: var(--t-xs); }
  .results-main { width: 100%; min-width: 0; }
  /* (the list keeps place, face, name and time; a name too long ends in an ellipsis, never wraps out of its row) */
  .result-row { grid-template-columns: 2.4rem calc(var(--row) - 0.6rem) minmax(0, 1fr) auto; }
  .result-row .gap { display: none; }
  .result-name > .grow-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .result-out { grid-column: 4; font-size: var(--t-xs); }
  .podium-face { width: calc(var(--row) * 0.9); height: calc(var(--row) * 0.9); }
}

/* a narrow window (a phone held upright): sheets keep less to themselves, for what is in them */
@media (max-width: 480px) {
  .sheet { padding: var(--s-4) var(--s-3); }
  .options-page { padding: var(--s-3); }
}

/* the options' page in a narrow box (an upright phone): a row's control goes under its words, the full width */
.options-page { container-type: inline-size; }

@container (width < 28rem) {
  .setting-row { grid-template-columns: auto minmax(0, 1fr); }
  /* (a switch is small: it stays beside its words) */
  .setting-row:has(> .switch) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .setting-row > .stepper,
  .setting-row > .seg,
  .setting-row > .setting-name { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .device-seg { flex-wrap: wrap; }
  .device-seg > button { flex: 1 0 auto; }
}

/* a finger is wider than a mouse pointer: the small links on a touch screen get a whole finger's height */
html.touch .legal-links a,
html.touch .online-privacy a { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--s-1); }
html.touch .legal-links { gap: var(--s-2); align-items: center; }

/* hover only where there is a pointer that hovers */
@media (hover: none) {
  .mode:hover, .btn:hover, .tile:hover { filter: none; transform: none; }
}