/* GRAND PRIX — the race HUD (js/race-hud.js), linked after parking.css.
   The same stickers as the rest of the car (bone/charcoal cards, the world's 2px ink line, a hard shadow, a little
   crooked), scoped to .race so nothing here touches the parking HUD. Only the controls take pointers (the layer itself
   passes every touch through to the world) and only the controls lock the browser's gestures (touch-action: none): the
   page keeps its zoom. Which controls show is decided by the pointer, never by the width: js/race-hud.js sets
   data-race-controls="touch" from (any-pointer: coarse) or the first touch, and "keys" otherwise. Everything sits inside
   the safe area (viewport-fit=cover makes the env() insets real; without them the gutters apply).

   THE KEEP-CLEAR BAND (RACING-PROGRESS.md D1.6): the rows from rival tops at 15 m down to the road at 8 m. No HUD
   element enters them while driving: the bar and the status line end above it (in short landscape at 118 px or less),
   the strip and the thumb controls start below it. js/race-hud.js writes the measured rows (js/race-view.js keepClear)
   to --race-band-top / --race-band-bottom; the values below are the fallbacks, the same rule as fractions of the
   canvas height (desktop 31-54%, short landscape 31-58%, portrait 29.5-41.5%). Only the pause and help cards lie over
   the band, and only while the race is paused. */

.race {
  --race-line: #17110f; --race-bone: #f0e2bf; --race-paper: #ece4cf; --race-ink: #1d1a14;
  --race-char: rgba(23, 17, 15, .88); --race-orange: #e7782b; --race-brake: #8a241b; --race-green: #a9c98a;
  --race-target: 3rem; /* ~48 CSS px: the smallest side of any control */
  --race-left: max(var(--gutter, 1rem), calc(env(safe-area-inset-left, 0px) + .25rem));
  --race-right: max(var(--gutter, 1rem), calc(env(safe-area-inset-right, 0px) + .25rem));
  --race-bottom: max(.75rem, calc(env(safe-area-inset-bottom, 0px) + .25rem));
  /* below the hub's title (two lines on an upright phone) and its SOUND / SHOP / EXIT VEHICLE row (2.75rem stickers), as
     the parking bar; short landscape tightens it (there the bar must end at 118 px or less: the band starts at 120) */
  --race-top: calc(env(safe-area-inset-top, 0px) + clamp(.75rem, 2vw, 1.25rem) + 3.3rem);
  --race-vw: calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 100);
  --race-band-top: 31%; --race-band-bottom: 54%;
  --race-pad-w: clamp(9.5rem, calc(44 * var(--race-vw)), 15rem); --race-pad-h: 4.75rem; --race-knob: 3.5rem;
  --race-pedal-w: clamp(4.25rem, calc(20 * var(--race-vw)), 5.5rem); --race-combo-h: 6.5rem; --race-gas-h: 7.25rem;
  /* the right thumb's column: two pedal widths; with auto-gas BRAKE/DRIFT takes all of it, manual splits it with GAS */
  --race-col-w: calc(2 * var(--race-pedal-w) + .5rem);
  /* the strip (desktop: bottom left, over the key line) */
  --race-strip-w: clamp(12rem, 16vw, 17rem); --race-strip-h: 22rem; --race-strip-lift: 2.9rem; --race-strip-gap: .75rem;
  color: var(--race-bone); inset: 0; pointer-events: none; position: absolute; z-index: 3;
}
.race[hidden], .race [hidden] { display: none !important; }
.hub[data-hub-state="fallback"] .race { display: none !important; }

/* every control: takes its own pointer, no scrolling/zooming/selection gestures, no long-press menu */
.race :is(button, [data-race-hold]) {
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none;
  pointer-events: auto; touch-action: none; user-select: none;
}
.race button { cursor: pointer; font: inherit; }
.race button:focus-visible { outline: 3px solid var(--orange, #ff4f00); outline-offset: 2px; }
.race__icon { flex: none; height: 1.1rem; width: 1.1rem; }
.race .is-locked { opacity: .55; }

/* ---------- top: commands and the status line ---------- */
.race__head { left: var(--race-left); pointer-events: none; position: absolute; right: var(--race-right); top: var(--race-top); }
.race__top { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem .7rem; }
.race__bar { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.race__btn {
  align-items: center; background: var(--race-char); border: 2px solid rgba(240, 226, 191, .55); box-shadow: 3px 3px 0 var(--race-line);
  color: var(--race-bone); display: inline-flex; font-size: .62rem; font-weight: 900; gap: .4rem; justify-content: center; letter-spacing: .14em;
  min-height: var(--race-target); min-width: var(--race-target); padding: .4rem .7rem;
}
.race__btn--off { background: var(--race-bone); border-color: var(--race-line); color: var(--race-line); transform: rotate(-1deg); }
.race__btn--go { background: var(--race-orange); border-color: var(--race-line); color: var(--race-line); font-size: .72rem; padding-inline: .9rem; transform: rotate(1deg); }
.race__btn.is-alert { border-color: var(--race-orange); box-shadow: 3px 3px 0 var(--race-line), 0 0 0 2px var(--race-orange); color: var(--race-orange); }
.race__btn:active, .race__action:active, .race__toggle:active { box-shadow: 1px 1px 0 var(--race-line); translate: 2px 2px; }
@media (hover: hover) { .race__btn:hover, .race__action:hover, .race__toggle:hover { background: var(--orange, #ff4f00); border-color: var(--race-line); color: var(--race-line); } }
.race__btn.is-locked { border-style: dashed; }
.race__icon-play { display: none; }
.race[data-race-mode="paused"] .race__icon-play { display: inline; }
.race[data-race-mode="paused"] .race__icon-pause { display: none; }

.race__status {
  align-items: center; background: var(--race-char); border: 2px solid var(--race-line); box-shadow: 3px 3px 0 var(--race-line);
  display: inline-flex; flex-wrap: wrap; font-family: 'Courier New', monospace; font-size: .78rem; font-weight: 700; gap: .2rem .55rem;
  margin: 0; max-width: 100%; min-height: 2.5rem; min-width: 0; padding: .25rem .6rem; pointer-events: none; transform: rotate(.6deg);
}
.race__gear { background: var(--race-bone); border: 2px solid var(--race-line); color: var(--race-line); font-family: Arial, Helvetica, sans-serif; font-size: .95rem; font-weight: 900; line-height: 1; padding: .2rem .4rem; }
.race[data-race-gear="R"] .race__gear { background: var(--race-orange); }
.race__speed { align-items: baseline; display: inline-flex; gap: .25rem; }
.race__speed b { font-size: 1.15rem; min-width: 2.2ch; text-align: right; }
.race__speed small { font-size: .62rem; letter-spacing: .12em; opacity: .8; }
.race__chip {
  border: 1.5px solid rgba(240, 226, 191, .5); font-family: Arial, Helvetica, sans-serif; font-size: .55rem; font-weight: 900; letter-spacing: .12em;
  line-height: 1; padding: .22rem .35rem; white-space: nowrap;
}
.race__chip--auto { opacity: .6; }
.race__chip--auto.is-on { background: var(--race-green); border-color: var(--race-line); color: var(--race-line); opacity: 1; }
/* the drift chip fills with the drift's charge (D9: the exit boost); boost: all orange */
.race__chip--drift {
  --race-drift-level: 0;
  background: linear-gradient(90deg, var(--race-orange) calc(var(--race-drift-level) * 100%), transparent 0); border-color: var(--race-orange); color: var(--race-bone);
}
.race__chip--drift.is-boost { background: var(--race-orange); color: var(--race-line); }
.race__chip--limit { background: var(--race-bone); border-color: var(--race-line); color: var(--race-line); }
.race__arrow { align-items: center; color: var(--race-green); display: inline-flex; flex: none; gap: .2rem; white-space: nowrap; }
.race__arrow .race__icon { rotate: var(--race-arrow, 0deg); } /* (set on .race__arrow by the HUD: the icon inherits it) */
.race__arrow b { font-size: .72rem; }
.race__msg { color: var(--race-orange); letter-spacing: .06em; min-width: 0; }
.race__msg:empty { display: none; }
.race__msg[data-kind="wait"] { color: var(--race-green); }
.race__msg[data-kind="go"] { background: var(--race-green); color: var(--race-line); font-size: .95rem; padding: 0 .4rem; }
.race__msg[data-kind="flash"] { background: var(--race-orange); color: var(--race-line); padding: 0 .35rem; }
/* the race's own flashes: a lap (bone), FINAL LAP and a missed checkpoint (orange), WRONG WAY (brake red, while it holds) */
.race__msg[data-kind="lap"] { background: var(--race-bone); color: var(--race-line); padding: 0 .35rem; }
.race__msg:is([data-kind="final"], [data-kind="notice"]) { background: var(--race-orange); color: var(--race-line); padding: 0 .35rem; }
.race__msg[data-kind="alert"] { background: var(--race-brake); box-shadow: 0 0 0 2px var(--race-bone); color: var(--race-bone); font-size: .9rem; letter-spacing: .14em; padding: 0 .45rem; }

/* ---------- phase 2: LAP · POS · the clock in the status line, the countdown lamps beside it ---------- */
.race__race { align-items: baseline; display: inline-flex; gap: 0 .4rem; white-space: nowrap; }
.race__race i { font-style: normal; opacity: .45; }
.race__lap, .race__pos { color: var(--race-bone); letter-spacing: .04em; }
.race__clock { color: var(--race-green); font-size: .95rem; min-width: 6ch; }
.race__race.is-final .race__lap { color: var(--race-orange); }
.race__race.is-finished .race__clock { color: var(--race-bone); }
/* three lamps in a little housing inside the status line, beside the gear and the speed (on an upright phone they share
   its first row, so the countdown's line is never more than two rows): dark, red one by one (each light is held 0.8 s:
   nothing blinks), all green at GO. The glow is two sharp rings, never a blurred shadow: the first blurred shadow painted cost
   a 160-170 ms frame at light 1 (the GPU's first blur, measured in phase 2's gate) */
.race__lamps {
  --race-lamp: 1.35rem;
  align-items: center; background: #0d0b0a; border: 2px solid var(--race-line); box-shadow: inset 0 0 0 1px rgba(240, 226, 191, .18); display: inline-flex;
  flex: none; gap: .3rem; padding: .2rem .35rem; pointer-events: none; transform: rotate(-1.2deg);
}
.race__lamps i {
  background: radial-gradient(circle at 35% 30%, #4a2f2a, #1d1210 70%); border: 2px solid var(--race-line); border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); height: var(--race-lamp); scale: .86; transition: scale .18s ease-out, box-shadow .18s ease-out; width: var(--race-lamp);
}
.race__lamps[data-n="1"] i:nth-child(-n+1), .race__lamps[data-n="2"] i:nth-child(-n+2), .race__lamps[data-n="3"] i {
  background: radial-gradient(circle at 35% 30%, #ffc2ad, #ff3a1c 45%, #9c1508); scale: 1;
  box-shadow: 0 0 0 .14rem rgba(255, 58, 28, .55), 0 0 0 .3rem rgba(255, 58, 28, .2), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.race__lamps[data-go="true"] i {
  scale: 1; background: radial-gradient(circle at 35% 30%, #eaffd9, #7fdc4f 45%, #2c7417); box-shadow: 0 0 0 .14rem rgba(127, 220, 79, .6), 0 0 0 .32rem rgba(127, 220, 79, .22), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
/* the countdown's words for screen readers ("3", "2", "1", "GO") */
.race__sr { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

/* narrow screens: the bar keeps its icons, the words stay for screen readers (aria-label); TOW HOME stacks its two words
   and START drops its flag, so START still fits the first row on a 360 px phone (on a row of its own the status line
   below it reached the band on short upright phones: 375x667) */
@media (max-width: 34rem) {
  .race__bar { gap: .3rem; }
  .race__btn:not(.race__btn--off, .race__btn--go) .race__word { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .race__btn:not(.race__btn--off, .race__btn--go) { padding-inline: .4rem; }
  .race__btn--off, .race__btn--go { letter-spacing: .08em; padding-inline: .55rem; }
  .race__btn--off { gap: .3rem; line-height: 1.05; text-align: left; }
  .race__btn--off span { width: min-content; }
  .race__btn--go .race__icon { display: none; }
}

/* ---------- the road strip (js/race-strip.js): mandatory, below the band, never under a finger ---------- */
.race__strip {
  background: #0d0e0b; border: 2px solid var(--race-line); bottom: calc(var(--race-bottom) + var(--race-strip-lift));
  box-shadow: 3px 3px 0 var(--race-line), inset 0 0 0 2px rgba(240, 226, 191, .12); left: var(--race-left); pointer-events: none; position: absolute;
  width: var(--race-strip-w); z-index: 1;
  height: max(5rem, min(var(--race-strip-h), calc(100% - var(--race-band-bottom) - var(--race-bottom) - var(--race-strip-lift) - var(--race-strip-gap))));
}
.race__strip-map { display: block; height: 100%; pointer-events: none; width: 100%; }
.race[data-race-mode="paused"] .race__strip { opacity: .6; }

/* ---------- the minimap (phase 2): the whole loop, north up; never in the band, on the strip, the bar or a control ----------
   keys: bottom right, on the strip's baseline (above the key line); touch: the right thumb's column, just under the band
   (above the captions and the pedals); short landscape: see below (bottom centre, beside the strip) */
.race { --race-map: clamp(6rem, 11vw, 9.5rem); }
.race__map {
  background: #0d0e0b; border: 2px solid var(--race-line); box-shadow: 3px 3px 0 var(--race-line), inset 0 0 0 2px rgba(240, 226, 191, .12);
  height: var(--race-map); pointer-events: none; position: absolute; transform: rotate(.6deg); width: var(--race-map); z-index: 1;
}
.race__map-canvas { display: block; height: 100%; pointer-events: none; width: 100%; }
.race[data-race-mode="paused"] .race__map { opacity: .6; }
.race[data-race-controls="keys"] .race__map { bottom: calc(var(--race-bottom) + var(--race-strip-lift)); right: var(--race-right); }
.race[data-race-controls="touch"] { --race-map: clamp(4rem, 27vw, 7rem); }
.race[data-race-controls="touch"] .race__map { right: var(--race-right); top: calc(var(--race-band-bottom) + var(--race-strip-gap)); }

/* ---------- bottom: the phone controls ---------- */
.race__drive { align-items: flex-end; bottom: var(--race-bottom); display: none; gap: .75rem; justify-content: space-between; left: var(--race-left); position: absolute; right: var(--race-right); }
.race[data-race-controls="touch"] .race__drive { display: flex; }
.race[data-race-driving="false"] .race__drive { opacity: .5; }

/* left thumb: a bounded rail with a centre mark and a bowling-ball knob (the parking pad's, unchanged) */
.race__pad {
  background: linear-gradient(rgba(240, 226, 191, .07), rgba(240, 226, 191, 0) 60%), var(--race-char);
  border: 2px solid var(--race-line); border-radius: calc(var(--race-pad-h) / 2); box-shadow: 3px 3px 0 var(--race-line), inset 0 0 0 2px rgba(240, 226, 191, .16);
  flex: none; height: var(--race-pad-h); position: relative; width: var(--race-pad-w);
}
.race__pad-centre { background: rgba(240, 226, 191, .6); bottom: .55rem; left: 50%; position: absolute; top: .55rem; transform: translateX(-50%); width: 2px; }
.race__pad-end { color: rgba(240, 226, 191, .5); font-size: .7rem; position: absolute; top: 50%; transform: translateY(-50%); }
.race__pad-end--l { left: .7rem; } .race__pad-end--r { right: .7rem; }
.race__pad-label { color: var(--race-bone); font-size: .55rem; font-weight: 900; left: 0; letter-spacing: .2em; position: absolute; right: 0; text-align: center; text-shadow: 0 1px 2px #000; top: -1.1rem; }
.race__pad.is-stale .race__pad-label { visibility: hidden; }
.race__pad-knob {
  --race-steer: 0;
  background: radial-gradient(circle at 38% 34%, #1b1716 0 .2rem, transparent .21rem), radial-gradient(circle at 60% 30%, #1b1716 0 .2rem, transparent .21rem),
    radial-gradient(circle at 46% 54%, #1b1716 0 .24rem, transparent .25rem), radial-gradient(circle at 34% 28%, #6b5f57, #3a302b 45%, #201a17 75%);
  border: 2px solid var(--race-line); border-radius: 50%; box-shadow: 2px 2px 0 var(--race-line);
  height: var(--race-knob); left: calc(50% + var(--race-steer) * (50% - var(--race-knob) / 2)); pointer-events: none;
  position: absolute; top: 50%; transform: translate(-50%, -50%); width: var(--race-knob);
}
.race__pad.is-held { border-color: var(--race-bone); }
.race__pad.is-held .race__pad-knob { box-shadow: 0 0 0 3px rgba(231, 120, 43, .65); }

/* right thumb: BRAKE/DRIFT (and GAS beside it with auto-gas off); USE above them from P4 */
.race__right { align-items: end; display: grid; flex: none; gap: .5rem; justify-items: end; width: var(--race-col-w); }
.race__pedals { align-items: flex-end; display: flex; gap: .5rem; width: 100%; }
.race__pedal {
  align-content: center; border: 2px solid var(--race-line); border-radius: .35rem .35rem .6rem .6rem; box-shadow: 3px 3px 0 var(--race-line);
  display: grid; flex: 1 1 0; font-size: .7rem; font-weight: 900; gap: .25rem; justify-items: center; letter-spacing: .16em; min-width: var(--race-target); position: relative;
}
/* rubber ribs */
.race__pedal::before { background: repeating-linear-gradient(rgba(0, 0, 0, .22) 0 3px, transparent 3px 9px); border-radius: inherit; content: ''; inset: .5rem .45rem; opacity: .7; position: absolute; }
.race__pedal > span { position: relative; }
.race__pedal--combo { background: var(--race-brake); color: var(--race-bone); height: var(--race-combo-h); transform: rotate(-1.5deg); }
.race__pedal--gas { background: var(--race-orange); color: var(--race-line); height: var(--race-gas-h); transform: rotate(1deg); }
/* (auto-gas never pushes on the untimed drive to the grid, so GAS shows there whatever the setting: that drive is the
   player's own) */
.race[data-race-auto="on"]:not([data-race-mode="to-grid"]) .race__pedal--gas { display: none; }
/* BRAKE/DRIFT says what it does: both words, the live one lit (ready: a hold would drift now) */
.race__combo-brake { font-size: .78rem; }
.race__combo-drift { font-size: .62rem; opacity: .55; }
.race__pedal--combo[data-race-role="ready"] .race__combo-drift { color: var(--race-orange); opacity: 1; }
.race__pedal--combo[data-race-role="drift"] { background: var(--race-orange); color: var(--race-line); }
.race__pedal--combo[data-race-role="drift"] .race__combo-drift { font-size: .78rem; opacity: 1; }
.race__pedal--combo[data-race-role="drift"] .race__combo-brake { font-size: .62rem; opacity: .55; }
.race__pedal.is-held { box-shadow: 1px 1px 0 var(--race-line); filter: brightness(1.18); translate: 2px 3px; }
/* (phase 5: USE held brightens by its colour, never by a filter: no item element carries a filter, mask or conic gradient) */
.race__use.is-held { background: #fff8e2; box-shadow: 1px 1px 0 var(--race-line); translate: 2px 3px; }
.race__use.is-held[data-race-state="ready"] { background: #ff8e33; }
.race__use.is-held[data-race-state="arming"] { background: #ffd032; }
.race__pedal.is-overruled { opacity: .7; } /* pressed, but the brake wins */
.race__use {
  background: var(--race-bone); border: 2px solid var(--race-line); border-radius: 50%; box-shadow: 3px 3px 0 var(--race-line); color: var(--race-line);
  display: grid; font-size: .7rem; font-weight: 900; height: 3.75rem; letter-spacing: .12em; place-content: center; width: 3.75rem;
  flex: none; gap: .05rem; justify-items: center; position: relative;
}
.race__lift { display: none; font-size: .5rem; letter-spacing: .1em; }
.race .is-stale .race__lift { display: block; }
.race__pad .race__lift { color: var(--race-orange); left: 0; position: absolute; right: 0; text-align: center; text-shadow: 0 1px 2px #000; top: -1.15rem; }
.race .is-stale { outline: 2px dashed var(--race-orange); outline-offset: 2px; }

/* touch: the strip sits over the left thumb (the parking assist screen's place), as wide as the room beside the right
   thumb's column, and as tall as the room under the band */
.race[data-race-controls="touch"] {
  --race-strip-lift: calc(var(--race-pad-h) + 1.6rem); --race-strip-h: 19rem;
  --race-strip-w: min(16rem, calc(100% - var(--race-left) - var(--race-right) - var(--race-col-w) - .75rem));
}

/* ---------- keyboard players: one compact line of keys ---------- */
.race__keys {
  background: var(--race-char); border: 1px solid rgba(240, 226, 191, .3); bottom: var(--race-bottom); color: var(--race-bone); display: none;
  font-size: .6rem; font-weight: 900; left: var(--race-left); letter-spacing: .12em; line-height: 1.9; margin: 0; max-width: calc(100% - var(--race-left) - var(--race-right));
  overflow: hidden; padding: .3rem .6rem; pointer-events: none; position: absolute; text-overflow: ellipsis; white-space: nowrap;
} /* (one line, cut short on a narrow window rather than wrapping up over the strip: HELP lists every key) */
.race[data-race-controls="keys"] .race__keys { display: block; }
.race__keys i { font-style: normal; opacity: .5; padding: 0 .2rem; }
.race kbd { background: var(--race-bone); border: 1px solid var(--race-line); border-radius: 3px; box-shadow: 0 2px 0 var(--race-line); color: var(--race-line); font-family: inherit; font-size: .62rem; margin-right: .2rem; padding: 0 .3rem; }

/* ---------- phase 4: the items (RACING-PROGRESS.md P4.3 "HUD") ----------
   The held-item slot: touch, the USE button IS the slot (above BRAKE/DRIFT in the right thumb's column; in short landscape
   beside it in the bottom row); keys, a chip above the minimap at the bottom right. Each shows only its own item's picture
   (data-race-slot), an empty crate dimmed when there is none, the 0.5 s reveal (--race-reveal: a roll, none with reduced
   motion), ARMING… in amber for the dishes, and a draining ring (--race-ring) while the player's bumper (violet) or espresso
   (warm orange) runs. Nothing here blinks: every change is one step or one transition. */
.race:not([data-race-items="true"]) [data-race-items-only] { display: none; }
.race__item-icon { display: none; height: 1.45rem; width: 1.45rem; }
.race [data-race-slot="empty"] [data-icon="empty"], .race [data-race-slot="espresso"] [data-icon="espresso"], .race [data-race-slot="brick"] [data-icon="brick"],
.race [data-race-slot="bumper"] [data-icon="bumper"], .race [data-race-slot="dishes"] [data-icon="dishes"] { display: block; }
.race__use-icon, .race__slot-icon { display: grid; place-items: center; }
.race__use-icon .race__item-icon { rotate: calc((1 - var(--race-reveal, 1)) * -200deg); scale: calc(.35 + .65 * var(--race-reveal, 1)); }
.race__use-name { font-size: .5rem; letter-spacing: .08em; line-height: 1; white-space: nowrap; }
.race__use[data-race-slot="empty"] { border-style: dashed; color: rgba(23, 17, 15, .7); opacity: .6; }
.race__use[data-race-slot="espresso"] .race__item-icon, .race__slot[data-race-slot="espresso"] .race__item-icon { color: #c4561c; }
.race__use[data-race-slot="brick"] .race__item-icon, .race__slot[data-race-slot="brick"] .race__item-icon { color: #b8442a; }
.race__use[data-race-slot="bumper"] .race__item-icon, .race__slot[data-race-slot="bumper"] .race__item-icon { color: #7c4fd6; }
.race__use[data-race-slot="dishes"] .race__item-icon { color: #f7f1e3; } /* (the plate's dark edge is in its SVG: a CSS filter here cost a 0.9 s frame on the 4x CPU proxy, the first time it drew) */
.race__slot[data-race-slot="dishes"] .race__item-icon { color: #f7f1e3; }
.race__use[data-race-state="ready"] { background: var(--race-orange); }
.race__use[data-race-state="arming"] { background: #f2b02a; }
.race__use-ring, .race__slot-ring { display: none; pointer-events: none; position: absolute; }
/* (phase 5: the ring is an inline SVG circle round the button, its stroke draining with stroke-dasharray from 12 o'clock
   clockwise (js/race-hud.js writes it): the same place and weight as phase 4's ring, with no mask or conic gradient, whose
   first draw cost 174-181 ms on the 4x CPU proxy) */
.race__use-ring { height: calc(100% + .84rem); left: -.42rem; overflow: visible; rotate: -90deg; top: -.42rem; width: calc(100% + .84rem); }
.race__use-ring circle { fill: none; stroke-width: 6.4; }
.race__use-ring-track { stroke: rgba(185, 140, 255, .18); }
.race__use-ring-fill { stroke: #b98cff; stroke-dasharray: 0 100; }
.race__use:not([data-race-ring="none"]) .race__use-ring { display: block; }
.race__use[data-race-ring="espresso"] .race__use-ring-track { stroke: rgba(255, 173, 74, .18); }
.race__use[data-race-ring="espresso"] .race__use-ring-fill { stroke: #ffad4a; }
/* touch: above BRAKE/DRIFT (with manual gas the pedals split the column: USE stays over BRAKE/DRIFT, so the right thumb taps
   it after lifting off GAS: never a third touch) */
.race[data-race-auto="off"] .race__use, .race[data-race-mode="to-grid"] .race__use { justify-self: start; }
/* keys: the chip above the minimap at the bottom right (its room is kept whether the map shows or not) */
.race__slot {
  align-items: center; background: var(--race-char); border: 2px solid var(--race-line); bottom: calc(var(--race-bottom) + var(--race-strip-lift) + var(--race-map) + .6rem);
  box-shadow: 3px 3px 0 var(--race-line); color: var(--race-bone); display: none; font-size: .66rem; font-weight: 900; gap: .45rem; letter-spacing: .12em;
  margin: 0; min-height: 2.5rem; padding: .25rem .5rem .25rem .4rem; pointer-events: none; position: absolute; right: var(--race-right); transform: rotate(-.6deg); z-index: 1;
}
.race[data-race-controls="keys"] .race__slot { display: flex; }
.race__slot kbd { margin: 0; }
.race__slot-name { white-space: nowrap; }
.race__slot[data-race-slot="empty"] { color: rgba(240, 226, 191, .55); }
.race__slot[data-race-state="ready"] { border-color: var(--race-orange); box-shadow: 3px 3px 0 var(--race-line), 0 0 0 2px var(--race-orange); }
.race__slot[data-race-state="arming"] .race__slot-name { color: #f2b02a; }
.race__slot-ring { bottom: -.35rem; height: .2rem; left: .3rem; right: .3rem; }
.race__slot:not([data-race-ring="none"]) .race__slot-ring { display: block; }
.race__slot[data-race-ring="shield"] .race__slot-ring { background: linear-gradient(90deg, #b98cff calc(var(--race-ring, 0) * 100%), rgba(185, 140, 255, .2) 0); }
.race__slot[data-race-ring="espresso"] .race__slot-ring { background: linear-gradient(90deg, #ffad4a calc(var(--race-ring, 0) * 100%), rgba(255, 173, 74, .2) 0); }
/* the boost chip in its ESPRESSO state: warm orange, draining over the 2 s */
.race__chip--drift.is-espresso {
  background: linear-gradient(90deg, #ffad4a calc(var(--race-espresso, 0) * 100%), rgba(255, 173, 74, .25) 0) left bottom / 100% .22rem no-repeat, rgba(122, 58, 18, .9);
  border-color: #ffad4a; color: #ffd9a8; padding-bottom: .32rem;
}
/* phase 5: the TOW chip beside it while the player rides a slipstream: pale wind, its strength (--race-tow, 0..1 in 20ths) a
   bar along its foot as the ESPRESSO chip's; it comes and goes held (js/race-hud.js TOW), never a blink */
.race__chip--tow {
  background: linear-gradient(90deg, #eef6ff calc(var(--race-tow, 0) * 100%), rgba(238, 246, 255, .22) 0) left bottom / 100% .22rem no-repeat, rgba(26, 44, 60, .92);
  border-color: #cfe4ff; color: #eef6ff; padding-bottom: .32rem;
}
/* the KARMIC BUMPER in first person: a thin violet rim with a few sparkles along the top and bottom edges and four corner
   brackets: nothing in the band's rows, nothing over the windshield's middle, no tint, overlay, filter or blur (P4.3); it
   fades over its last half second (--race-shield) and pops once on a block (one transition: nothing repeats) */
.race__shield { display: contents; }
.race__shield-rim, .race__shield-corner { opacity: var(--race-shield, 1); pointer-events: none; position: absolute; z-index: 3; }
.race__shield-rim { height: .55rem; left: 0; right: 0; }
.race__shield-rim--top { background: linear-gradient(rgba(190, 150, 255, .95) 0 2px, transparent 2px); top: 0; }
.race__shield-rim--bottom { background: linear-gradient(transparent calc(100% - 2px), rgba(190, 150, 255, .95) 0); bottom: 0; }
.race__shield-rim b, .race__shield-corner b {
  background: #efe2ff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); height: .5rem; position: absolute; width: .5rem;
}
.race__shield-rim--top b { top: 0; } .race__shield-rim--bottom b { bottom: 0; }
.race__shield-rim b:nth-child(1) { left: 12%; } .race__shield-rim b:nth-child(2) { left: 31%; height: .35rem; width: .35rem; } .race__shield-rim b:nth-child(3) { left: 50%; }
.race__shield-rim b:nth-child(4) { left: 69%; height: .35rem; width: .35rem; } .race__shield-rim b:nth-child(5) { left: 88%; }
.race__shield-corner { border: 3px solid #b98cff; height: 2.4rem; width: 2.4rem; }
.race__shield-corner--tl { border-bottom: 0; border-right: 0; left: 0; top: 0; }
.race__shield-corner--tr { border-bottom: 0; border-left: 0; right: 0; top: 0; }
.race__shield-corner--bl { border-right: 0; border-top: 0; bottom: 0; left: 0; }
.race__shield-corner--br { border-left: 0; border-top: 0; bottom: 0; right: 0; }
.race__shield-corner b { height: .7rem; width: .7rem; }
.race__shield-corner--tl b { left: .35rem; top: .35rem; } .race__shield-corner--tr b { right: .35rem; top: .35rem; }
.race__shield-corner--bl b { bottom: .35rem; left: .35rem; } .race__shield-corner--br b { bottom: .35rem; right: .35rem; }
.race__shield[data-race-shield-state="pop"] :is(.race__shield-rim, .race__shield-corner) { opacity: 0; transition: opacity .5s ease-out, scale .5s ease-out; }
.race__shield[data-race-shield-state="pop"] .race__shield-corner { scale: 1.35; }
.race__shield[data-race-shield-state="pop"] b { scale: 1.8; transition: scale .5s ease-out; }
@starting-style { .race__shield[data-race-shield-state="pop"] :is(.race__shield-rim, .race__shield-corner) { opacity: 1; scale: 1; } }
/* the rivals' difficulty: three 48 px buttons; locked while a race clock runs (it then says so) */
.race__rivals {
  align-items: center; border-top: 1px dashed rgba(0, 0, 0, .35); display: grid; gap: .1rem .45rem; grid-template-areas: "label segs" "lock segs";
  grid-template-columns: minmax(0, 5.25rem) 1fr; padding-top: .5rem;
}
.race__rivals-label { align-self: end; font-size: .62rem; font-weight: 900; grid-area: label; letter-spacing: .12em; }
.race__rivals-label small { display: block; font-size: .56rem; letter-spacing: .08em; opacity: .7; }
.race__rivals-segs { grid-area: segs; }
.race__rivals-segs { display: grid; gap: .3rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.race__seg {
  background: transparent; border: 2px solid var(--race-line); box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); color: var(--race-ink); font-size: .62rem; font-weight: 900;
  letter-spacing: .04em; min-height: var(--race-target); min-width: 0; overflow: hidden; padding: .3rem 0; text-overflow: clip; white-space: nowrap;
}
.race__seg.is-on { background: var(--race-ink); color: var(--race-paper); }
.race__seg.is-locked { border-style: dashed; cursor: default; opacity: .6; }
.race__rivals-lock { align-self: start; color: var(--race-brake); font-size: .56rem; font-weight: 900; grid-area: lock; letter-spacing: .08em; line-height: 1.1; }
/* the results card's five standings: 1ST … 5TH, the name (YOU for the player), the time once finished, else RACING · LAP n/3 */
.race__standings { border-top: 1px dashed rgba(0, 0, 0, .35); display: grid; gap: .1rem; grid-area: standings; list-style: none; margin: 0; padding: .3rem 0 0; }
.race__standings li { align-items: baseline; column-gap: .45rem; display: grid; font-size: .7rem; font-weight: 900; grid-template-columns: 2.4em minmax(0, 1fr) auto; letter-spacing: .06em; }
.race__standings span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race__standings i { font-family: 'Courier New', monospace; font-size: .74rem; font-style: normal; letter-spacing: 0; white-space: nowrap; }
.race__standings li:not(.is-done) i { color: #6b5f4a; font-family: inherit; font-size: .62rem; letter-spacing: .06em; }
.race__standings li.is-me { background: var(--race-orange); box-shadow: 0 0 0 2px var(--race-orange); color: var(--race-line); }
.race__results .race__rivals { grid-area: rivals; }
/* narrow screens: the three words keep their room (NORMAL never cut) */
@media (max-width: 34rem) {
  .race__rivals { grid-template-columns: minmax(0, 4.5rem) 1fr; }
  .race__seg { font-size: .58rem; letter-spacing: 0; }
}

/* ---------- cards: pause (with the settings) and help: only ever over a paused race ---------- */
.race__card {
  background: var(--race-paper); box-shadow: 0 0 0 2.5px var(--race-line), .5rem .6rem 0 rgba(10, 8, 22, .82); color: var(--race-ink);
  display: grid; gap: .55rem; left: 50%; max-height: calc(100% - var(--race-top) - var(--race-bottom) - 3.75rem); overflow: auto; overscroll-behavior: contain;
  padding: .9rem 1rem 1rem; pointer-events: auto; position: absolute; width: min(21rem, calc(100% - var(--race-left) - var(--race-right))); z-index: 2;
}
.race__pause { top: 50%; transform: translate(-50%, -45%) rotate(-1deg); }
.race__help { top: calc(var(--race-top) + 3.6rem); max-height: calc(100% - var(--race-top) - 3.6rem - var(--race-bottom)); padding-top: 0; transform: translateX(-50%) rotate(.8deg); width: min(26rem, calc(100% - var(--race-left) - var(--race-right))); z-index: 3; }
.race__card-head { align-items: center; background: var(--race-paper); display: flex; gap: .75rem; justify-content: space-between; padding: .9rem 0 .35rem; position: sticky; top: 0; z-index: 1; }
.race__card-head .race__action { flex: none; padding-inline: .9rem; }
.race__card-title { font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; margin: 0; }
.race__card-title:focus { outline: none; }
.race__card-note { color: #4f4739; font-size: .74rem; font-weight: 700; margin: 0; }
.race__card-actions { display: grid; gap: .45rem; }
.race__action {
  background: var(--race-ink); border: 2px solid var(--race-line); box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); color: var(--race-paper);
  font-size: .7rem; font-weight: 900; letter-spacing: .16em; min-height: var(--race-target); padding: .55rem 1rem;
}
.race__action--go { background: var(--race-orange); color: var(--race-line); }
.race__action--off { background: transparent; color: var(--race-ink); }
/* (phase 6 repair) RESTART in the pause card: an ink action with the flag, after TOW HOME; the pause card's actions share one row
   per two or three (auto-fit: RESUME and TOW HOME as before when it is hidden) */
.race__action--retry { align-items: center; display: inline-flex; gap: .45rem; justify-content: center; }
.race__action--retry[hidden] { display: none; }
.race__action--retry .race__icon { height: 1rem; width: 1rem; }
.race__settings { border-top: 1px dashed rgba(0, 0, 0, .35); display: grid; gap: .45rem; grid-template-columns: 1fr 1fr; padding-top: .55rem; }
.race__toggle {
  align-items: center; background: transparent; border: 2px solid var(--race-line); box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); color: var(--race-ink); display: flex;
  font-size: .62rem; font-weight: 900; gap: .4rem; justify-content: space-between; letter-spacing: .08em; min-height: var(--race-target); padding: .4rem .6rem;
}
.race__toggle span { white-space: nowrap; }
.race__toggle b { background: var(--race-ink); color: var(--race-paper); font-size: .66rem; padding: .15rem .35rem; }
.race__toggle[aria-pressed="true"] b { background: var(--race-green); color: var(--race-line); }
.race__help-list { display: grid; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.race__help-list li { border-top: 1px dashed rgba(0, 0, 0, .35); font-size: .74rem; font-weight: 700; line-height: 1.35; padding-top: .35rem; }
.race__help-list b { display: block; font-size: .64rem; letter-spacing: .12em; }
.race__help-list .race__icon { height: .9rem; vertical-align: -.15rem; width: .9rem; }
.race[data-race-controls="touch"] .race__help-list[data-for="keys"], .race[data-race-controls="keys"] .race__help-list[data-for="touch"] { display: none; }

/* ---------- the results card (phase 2): only once the car has stopped; under the top row, over the stopped race ----------
   REMATCH first and big, TOW HOME beside or under it; the clerk's stamp lands on it once */
.race__results {
  /* --race-head-h: the top row's height as laid out (js/race-hud.js, from a ResizeObserver): the card starts under it */
  /* (phase 4: two columns under the standings, so REMATCH and TOW HOME stay on screen with the five rows: the laps beside the
     highlights, the buttons side by side; landscape puts the standings beside the figures) */
  column-gap: .9rem; gap: .45rem .9rem; grid-template-areas: "kicker kicker" "head head" "figures figures" "standings standings" "laps hl" "new new" "stored stored" "rivals rivals" "actions actions";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-height: calc(100% - var(--race-top) - var(--race-head-h, 3rem) - .6rem - var(--race-bottom)); top: calc(var(--race-top) + var(--race-head-h, 3rem) + .6rem);
  transform: translateX(-50%) rotate(-.6deg); width: min(24rem, calc(100% - var(--race-left) - var(--race-right)));
}
.race__results p { margin: 0; }
.race__results-kicker { color: #6b5f4a; font-size: .56rem; font-weight: 900; grid-area: kicker; letter-spacing: .16em; }
.race__results-head { align-items: center; display: flex; gap: .75rem; grid-area: head; justify-content: space-between; }
.race__results-title { font-size: clamp(1.45rem, 3.6vw, 1.9rem); }
.race__stamp {
  border: 3px solid currentColor; border-radius: .2rem;
  color: var(--race-brake); flex: none; font-size: .68rem; font-weight: 900; letter-spacing: .1em; line-height: 1.1; max-width: 11rem;
  opacity: .9; padding: .3rem .45rem; rotate: -7deg; text-align: center;
  transition: opacity .2s ease-out .15s, scale .34s cubic-bezier(.2, 1.6, .4, 1) .15s;
}
.race__stamp[data-stamp="first"] { color: #2f6b1f; }
.race__stamp[data-stamp="participated"] { color: var(--race-ink); }
/* the stamp lands as the card appears (a transition from its starting style: no keyframes, nothing repeats) */
@starting-style { .race__stamp { opacity: 0; scale: 1.8; } }
.race__figures { border-block: 1px dashed rgba(0, 0, 0, .35); display: grid; gap: .5rem; grid-area: figures; grid-template-columns: 1fr 1fr; margin: 0; padding: .4rem 0; }
.race__figures dt { font-size: .55rem; font-weight: 900; letter-spacing: .14em; }
.race__figures dd { font-family: 'Courier New', monospace; font-size: 1.1rem; font-weight: 700; margin: 0; white-space: nowrap; }
.race__figures small { font-family: Arial, Helvetica, sans-serif; font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.race__laplist, .race__highlights { display: grid; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.race__laplist { grid-area: laps; }
.race__laplist li { align-items: baseline; display: flex; font-size: .64rem; font-weight: 900; justify-content: space-between; letter-spacing: .12em; }
.race__laplist b { font-family: 'Courier New', monospace; font-size: .9rem; letter-spacing: 0; }
.race__laplist li.is-best b { background: var(--race-green); padding: 0 .25rem; }
.race__highlights { grid-area: hl; }
.race__highlights li { border-top: 1px dashed rgba(0, 0, 0, .3); font-size: .66rem; font-weight: 900; letter-spacing: .08em; padding-top: .2rem; }
.race__newbest { background: var(--race-orange); border: 2px solid var(--race-line); color: var(--race-line); font-size: .66rem; font-weight: 900; grid-area: new; justify-self: start; letter-spacing: .12em; padding: .15rem .45rem; rotate: .8deg; }
.race__stored { grid-area: stored; }
.race__results-actions { grid-area: actions; grid-template-columns: 1fr 1fr; }
.race__action--big { align-items: center; display: inline-flex; font-size: .86rem; gap: .5rem; justify-content: center; min-height: 3.5rem; }
.race__action--big .race__icon { height: 1.15rem; width: 1.15rem; }
.race__action.is-locked { border-style: dashed; cursor: default; }

/* the curtain: the tow home and the recovery fade (view.curtain 0..1) */
.race__curtain {
  --race-curtain: 0;
  background: #07070b; display: grid; inset: 0; opacity: var(--race-curtain); place-items: center; pointer-events: none; position: absolute; z-index: 4;
}
.race__curtain p { color: var(--race-bone); font-size: clamp(.9rem, 2.4vw, 1.3rem); font-weight: 900; letter-spacing: .14em; margin: 0; padding: 0 var(--race-left); text-align: center; }

/* ---------- landscape: lower and flatter ---------- */
@media (orientation: landscape) {
  .race {
    --race-pad-w: clamp(11rem, calc(30 * var(--race-vw)), 17rem); --race-pedal-w: clamp(4.25rem, calc(11 * var(--race-vw)), 5.5rem);
    --race-band-bottom: 54%;
  }
  .race[data-race-controls="touch"] { --race-strip-w: min(16rem, calc(30 * var(--race-vw))); }
  /* phase 4: the results in two columns, the five standings beside the figures, the rivals' difficulty beside REMATCH */
  .race .race__results {
    column-gap: 1rem; grid-template-areas: "kicker kicker" "head standings" "figures standings" "laps hl" "stored new" "rivals actions";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(44rem, calc(100% - var(--race-left) - var(--race-right)));
  }
  .race__results .race__rivals { border-top: 0; padding-top: 0; }
  .race__results .race__rivals-label small { display: none; }
  .race__results .race__newbest { align-self: start; }
}
/* short landscape phones (844x390, 915x412): one row on top that ends at 118 px or less (the bar, then the status
   line in the same row, its message two lines at most); the strip in the bottom centre, between the pad and the
   pedals, as tall as the room under the band */
@media (orientation: landscape) and (max-height: 500px) {
  .race {
    --race-band-top: 31%; --race-band-bottom: 58%;
    --race-pad-h: 4.25rem; --race-knob: 3.15rem; --race-combo-h: 5.5rem; --race-gas-h: 5.75rem;
    --race-strip-h: 11rem; --race-strip-gap: .5rem;
    /* the hub's row ends 2.75rem under its padding here (one-line title): the bar starts a hair below it and ends at
       about 114 px at 844x390 (110 at 740x360, whose band starts at 113) */
    --race-top: calc(env(safe-area-inset-top, 0px) + clamp(.75rem, 2vw, 1.25rem) + 2.95rem);
  }
  .race__top { flex-wrap: nowrap; gap: .5rem; }
  .race__btn:not(.race__btn--off, .race__btn--go) .race__word { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .race__btn:not(.race__btn--off, .race__btn--go) { padding-inline: .4rem; }
  .race__btn--off, .race__btn--go { letter-spacing: .08em; padding-inline: .55rem; }
  .race__bar { flex: none; flex-wrap: nowrap; }
  .race__status { flex: 0 1 auto; flex-wrap: nowrap; max-height: var(--race-target); min-height: 2.25rem; overflow: hidden; }
  .race__msg { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; font-size: .7rem; line-height: 1.15; overflow: hidden; }
  .race[data-race-controls="touch"] .race__strip {
    bottom: var(--race-bottom); left: calc(var(--race-left) + var(--race-pad-w) + .75rem); margin-inline: auto;
    right: calc(var(--race-right) + var(--race-col-w) + .75rem); width: auto; max-width: 15rem;
  }
  .race[data-race-controls="touch"] { --race-strip-lift: 0px; --race-strip-h: 11rem; }
  .race .race__pause { top: calc(var(--race-top) + 3.6rem); transform: translateX(-50%) rotate(-1deg); width: min(30rem, calc(100% - var(--race-left) - var(--race-right))); max-height: calc(100% - var(--race-top) - 3.6rem - var(--race-bottom)); }
  .race .race__pause .race__card-actions { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); } /* (phase 6 repair: RESUME · TOW HOME, + RESTART) */
  .race .race__help { width: min(46rem, calc(100% - var(--race-left) - var(--race-right))); }
  .race__help-list { column-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
  /* phase 2: the readout folds onto two lines (LAP · POS over the clock), so the one top row still ends at 118 px */
  .race__race { column-gap: .45rem; display: inline-grid; font-size: .7rem; grid-template-columns: auto auto; line-height: 1.15; }
  .race__race i { display: none; }
  .race__clock { font-size: .78rem; grid-column: 1 / -1; }
  .race__lamps { --race-lamp: 1.2rem; }
  /* the minimap: bottom centre, at the right end of the room between the pad and the pedals; the strip then centres in
     what is left (before the race, with no map, the strip keeps its phase 1 place) */
  .race[data-race-controls="touch"] { --race-map: 5.25rem; }
  .race[data-race-controls="touch"] .race__map { bottom: var(--race-bottom); right: calc(var(--race-right) + var(--race-col-w) + .75rem); top: auto; }
  .race[data-race-controls="touch"]:has(.race__map:not([hidden])) .race__strip { right: calc(var(--race-right) + var(--race-col-w) + .75rem + var(--race-map) + .6rem); }
  /* phase 4: USE beside BRAKE/DRIFT in the bottom row (no room above the pedals under the band): the right thumb's column
     grows by it, and the strip and the minimap move over (the strip narrows) */
  .race[data-race-controls="touch"][data-race-items="true"] { --race-col-w: calc(2 * var(--race-pedal-w) + .5rem + 3.75rem + .5rem); }
  .race[data-race-items="true"] .race__right { align-items: flex-end; display: flex; gap: .5rem; }
  .race[data-race-items="true"] .race__pedals { flex: 1 1 auto; width: auto; }
  .race[data-race-items="true"] .race__use { justify-self: auto; }
  /* the results: two columns, so the card fits the short height under the top row (phase 4: the five standings on the
     right, the rivals' difficulty beside REMATCH and TOW HOME; the laps and the highlights under the figures) */
  .race .race__results { padding: .45rem .85rem .5rem; row-gap: .2rem; }
  .race__standings { align-self: start; border-top: 0; gap: 0; padding-top: 0; }
  .race__standings li { line-height: 1.25; }
  .race__results .race__newbest { align-self: start; font-size: .6rem; padding: .05rem .4rem; }
  .race__results .race__stored { font-size: .64rem; }
  /* the pause card: its note goes, its rows tighten (RESUME and TOW HOME, the two settings, the rivals: no scrolling) */
  .race .race__pause { gap: .4rem; padding: .7rem .9rem .75rem; }
  .race .race__pause > .race__card-note { display: none; }
  .race .race__pause .race__settings { padding-top: .4rem; }
  .race .race__pause .race__rivals { padding-top: .4rem; }
  .race__laplist { gap: .05rem; line-height: 1.15; }
  .race__laplist b { font-size: .82rem; }
  .race__highlights { gap: .1rem; }
  .race__highlights li { font-size: .62rem; padding-top: .1rem; }
  /* a long message (a missed checkpoint, auto-gas waiting, the rollout) takes the readout's room while it shows: the one
     row keeps its height and nothing is cut (LAP, POS and the clock are on the meter too) */
  .race__status:has(.race__msg[data-long="true"]) .race__race { display: none; }
  /* (phase 5: with the TOW chip in the row too, any message takes the readout's room while it shows: BRICK BEHIND ◀ beside
     ESPRESSO and TOW is never cut) */
  .race__status:has(.race__chip--tow:not([hidden])):has(.race__msg:not(:empty)) .race__race { display: none; }
  .race__results-title { font-size: 1.2rem; }
  .race__stamp { font-size: .6rem; padding: .2rem .35rem; }
  .race__figures { padding: .25rem 0; }
  .race__figures dd { font-size: .95rem; }
  .race .race__results-actions { grid-template-columns: 1fr 1fr; }
  .race__action--big { min-height: var(--race-target); }
}
/* ---------- (phase 6 repair: D1.6) the rival edge chips: a racing rival within 45 m that the view shows less than 30 % of gets
   a chip at the edge it is past (its colour's dot, its name, its distance, an arrow), never in the keep-clear band: on touch
   layouts in two columns at the side edges under the band (the right one under the minimap; in short landscape both just under
   the band, above the pad and the pedals), with keys above the band at the side edges (the side windows, outside the tall
   rivals' columns); a rival behind joins the right column. Nothing moves: they simply show. */
.race__edges { inset: 0; pointer-events: none; position: absolute; }
.race__edge {
  --race-edge-i: 0;
  align-items: center; background: var(--race-char); border: 2px solid var(--race-line); box-shadow: 2px 2px 0 var(--race-line); color: var(--race-bone);
  display: inline-flex; font-family: Arial, Helvetica, sans-serif; font-size: .55rem; font-weight: 900; gap: .3rem; letter-spacing: .1em; line-height: 1;
  padding: .22rem .4rem; position: absolute; top: calc(var(--race-band-bottom) + .5rem + var(--race-edge-i) * 1.55rem); white-space: nowrap;
}
.race__edge[data-col="left"] { left: var(--race-left); }
.race__edge[data-col="right"] { right: var(--race-right); }
/* (touch: the right column under the minimap, which sits just under the band there; keys: both columns above the band) */
.race[data-race-controls="touch"] .race__edge[data-col="right"] { top: calc(var(--race-band-bottom) + var(--race-strip-gap) + var(--race-map) + .5rem + var(--race-edge-i) * 1.55rem); }
.race[data-race-controls="keys"] .race__edge { top: calc(var(--race-top) + 3.75rem + var(--race-edge-i) * 1.55rem); }
/* (phase 7 repair, a phase 6 follow-up) keys in a window too narrow for one top row (the status line wraps under the bar:
   data-race-head 'wrap', js/race-hud.js's head observer): the chips start under the whole top row as laid out (--race-head-h),
   never over the gear and the speed, one a column (the nearest): a second row would reach the rivals' tall band */
.race[data-race-controls="keys"][data-race-head="wrap"] .race__edge { top: calc(var(--race-top) + var(--race-head-h, 3rem) + .25rem); }
.race[data-race-controls="keys"][data-race-head="wrap"] .race__edge[data-i="1"] { display: none; }
.race__edge-dot { background: var(--race-edge-colour, var(--race-bone)); border: 1.5px solid var(--race-bone); border-radius: 50%; flex: none; height: .7rem; width: .7rem; }
.race__edge small { color: var(--race-green); font-family: 'Courier New', monospace; font-size: .62rem; letter-spacing: 0; }
.race__edge-arrow { font-style: normal; }
/* (a phone's right column, under the minimap, keeps right of the strip: a long name ends in an ellipsis; the dot and the distance stay) */
.race[data-race-controls="touch"] .race__edge[data-col="right"] { max-width: calc(100% - var(--race-left) - var(--race-strip-w) - var(--race-right) - .5rem); }
.race__edge b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* (phase 6 repair) short landscape while driving: the drawn rivals stand 2.2-3.4 m tall, and their
   tops at 15-30 m fall in the one top row's height (y 61-104 px at 844x390), between the left and right lane centres
   (x 238-535 px: 28-63 % of the width). Those centre columns stay free of the race's HUD: TOW HOME goes icon-only (48 px,
   like PAUSE, RECENTER and HELP; its words stay in the pause and results cards), so the bar ends by about a quarter of the
   width; the status line moves to the right edge and keeps the gear, the speed and LAP · POS · the clock (and a message, a
   drift, an espresso or a tow while they show, in the readout's room: the readout is on the left meter too), starting
   beyond about two thirds of the width. The AUTO-GAS chip waits in the pause card (its state is there; a stalled auto-gas
   still says so in the message). TOW HOME is icon-only from the countdown on (it never changes size at GO); the countdown
   keeps its centred status line (the lamps and how the start works need the room; the field stands still for its 3 s).
   Desktop and upright phones are unchanged. */
@media (orientation: landscape) and (max-height: 500px) {
  .race[data-race-mode="racing"] .race__top { justify-content: space-between; }
  /* RECENTER while racing shows only when a look drag holds the view (it lights then; C on keys), last in the bar so showing
     it slides nothing under a finger: the three others end by a quarter of the width, left of the tall rivals' columns */
  .race[data-race-mode="racing"] .race__bar [data-race-cmd="recenter"] { order: 9; }
  .race[data-race-mode="racing"] .race__bar [data-race-cmd="recenter"]:not(.is-alert) { display: none; }
  .race[data-race-controls] .race__edge[data-col] { top: calc(var(--race-band-bottom) + .5rem + var(--race-edge-i) * 1.55rem); } /* (no room above the band here; the minimap is at the bottom) */
  .race:is([data-race-mode="countdown"], [data-race-mode="racing"]) .race__btn--off { letter-spacing: 0; min-width: var(--race-target); padding-inline: .4rem; }
  .race:is([data-race-mode="countdown"], [data-race-mode="racing"]) .race__btn--off > span { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .race[data-race-mode="racing"] .race__status { margin-left: auto; max-width: 31%; }
  .race[data-race-mode="racing"] .race__chip--auto { display: none; }
  /* (and the finding's third remedy as well: the row's boxes go half see-through while racing, so a rival's top that a bend's
     look-ahead swings under the icon bar or the status line still shows through them) */
  .race[data-race-mode="racing"] .race__btn:not(.race__btn--off, .race__btn--go) { background: rgba(23, 17, 15, .5); }
  .race[data-race-mode="racing"] .race__btn--off { background: rgba(240, 226, 191, .62); }
  .race[data-race-mode="racing"] .race__status { background: rgba(23, 17, 15, .55); }
  .race[data-race-mode="racing"] .race__status:is(:has(:is(.race__chip--drift, .race__chip--tow):not([hidden])), :has(.race__msg:not(:empty))) .race__race { display: none; }
}
/* upright phones: the band sits higher (29.5-41.5% of the height) */
@media (orientation: portrait) {
  .race { --race-band-top: 29.5%; --race-band-bottom: 41.5%; }
  .race__lamps { --race-lamp: 1.1rem; gap: .25rem; padding: .15rem .3rem; }
}
/* narrow upright phones: a message (a lap, FINAL LAP, WRONG WAY, a missed checkpoint, GO!) takes the readout's row while it
   shows, so the status line stays two rows (on a 375x667 phone a third row reached the band); the clock is back as it goes */
@media (orientation: portrait) and (max-width: 34rem) {
  .race__status:has(.race__msg:not(:empty)) .race__race { display: none; }
  /* (phase 6 repair) while racing the two-row status line keeps a few px tighter, so it ends above the drawn rivals' 3.4 m tops at
     15 m on a 360 px phone too (js/race-view.js keepClear's tall band: 184 px at 360x800) */
  .race[data-race-mode="racing"] .race__top { row-gap: .15rem; }
  .race[data-race-mode="racing"] .race__status { padding-block: .15rem; }
}

/* ---------- the rest of the hub while a race runs ---------- */
/* races always run in the engine-on layout: canvas = window (its 30rem minimum is taller than a 390 px landscape phone) */
.hub:has(.race:not([hidden])) { min-height: 0; }
/* the keyboard strip of things and the e-mail line step aside; props are locked anyway */
.hub:has(.race:not([hidden])) :is(.hub__things, .hub__email) { display: none; }
/* phones put CLEAR VISUALS on a second row at the right (hub.css: 2.75rem wide, 3.85rem down): the top row keeps out of
   its column instead of going below it (below it the bar and the status line would reach the band) */
@media (max-width: 760px), (max-width: 1050px) and (orientation: portrait) {
  .hub:has([data-hub-clear]:not([hidden])) .race__head { right: calc(var(--race-right) + 3.25rem); }
}
/* captions (the hub's comic boxes) keep off the band and off the strip:
   - keys: the hub's own place (bottom centre), narrowed so it never reaches the strip at the left;
   - touch: the right thumb's column, just above BRAKE/DRIFT and GAS (in short landscape, the only room under the band
     that no control or the strip holds) */
.hub:has(.race[data-race-controls="keys"]:not([hidden])) .hub__subtitle {
  max-width: min(36rem, calc(100% - 2 * (max(var(--gutter, 1rem), calc(env(safe-area-inset-left, 0px) + .25rem)) + clamp(12rem, 16vw, 17rem) + .75rem)));
}
.hub:has(.race[data-race-controls="touch"]:not([hidden])) :is(.hub__subtitle, .hub__subtitle.is-on) {
  bottom: calc(max(.75rem, calc(env(safe-area-inset-bottom, 0px) + .25rem)) + 7.25rem + .75rem); left: auto;
  max-width: calc(2 * clamp(4.25rem, 20vw, 5.5rem) + .5rem); right: max(var(--gutter, 1rem), calc(env(safe-area-inset-right, 0px) + .25rem));
  text-align: left; transform: none;
}
/* phase 4: USE stands above BRAKE/DRIFT, so the captions sit above it (short landscape keeps them above the pedals: there
   USE is beside them) */
.hub:has(.race[data-race-controls="touch"][data-race-items="true"]:not([hidden])) :is(.hub__subtitle, .hub__subtitle.is-on) {
  bottom: calc(max(.75rem, calc(env(safe-area-inset-bottom, 0px) + .25rem)) + 7.25rem + .5rem + 3.75rem + .75rem);
}
@media (orientation: landscape) {
  .hub:has(.race[data-race-controls="touch"]:not([hidden])) :is(.hub__subtitle, .hub__subtitle.is-on) { max-width: min(22rem, calc(2 * clamp(4.25rem, 11vw, 5.5rem) + .5rem)); }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* just above the tallest pedal showing (GAS with auto-gas off, else BRAKE/DRIFT): the band ends right above */
  .hub:has(.race[data-race-controls="touch"]:not([hidden])) :is(.hub__subtitle, .hub__subtitle.is-on) {
    bottom: calc(max(.75rem, calc(env(safe-area-inset-bottom, 0px) + .25rem)) + 5.75rem + .375rem); font-size: .72rem; padding: .25rem .5rem;
  }
  .hub:has(.race[data-race-controls="touch"][data-race-items="true"]:not([hidden])) :is(.hub__subtitle, .hub__subtitle.is-on) {
    bottom: calc(max(.75rem, calc(env(safe-area-inset-bottom, 0px) + .25rem)) + 5.75rem + .375rem);
  }
  .hub:has(.race[data-race-controls="touch"][data-race-auto="on"]:not([hidden], [data-race-mode="to-grid"])) :is(.hub__subtitle, .hub__subtitle.is-on) {
    bottom: calc(max(.75rem, calc(env(safe-area-inset-bottom, 0px) + .25rem)) + 5.5rem + .375rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .race__pedal.is-held, .race__use.is-held, .race__btn:active, .race__action:active, .race__toggle:active, .race__seg:active { translate: none; }
  /* the lamps simply light, the stamp is simply there */
  .race__lamps i, .race__stamp { transition: none !important; }
  /* phase 4: no reveal roll (the item simply shows), the bumper's pop only fades (no growth) */
  .race__use-icon .race__item-icon { rotate: none; scale: none; }
  .race__shield[data-race-shield-state="pop"] :is(.race__shield-corner, b) { scale: none; }
}