/* Menus (src/menu.js): head-unit screen layouts built from the UI kit (src/ui/ui.css). The race HUD rules follow at the end.
   Every C.screen shares one frame: status bar (fixed Back slot · breadcrumbs · driver + clock), a title row aligned with the
   content grid, the body, and a soft-key bar of device-aware hints. */
#ui { position: fixed; inset: 0; z-index: 12; display: none; font-family: var(--f-sans); color: var(--hu-text); }
body.ui-open #ui { display: block; }
body.ui-open #hud { opacity: 0 !important; }
body.ui-open #keys, body.ui-open #credit { opacity: 0; }
#ui .mi { cursor: pointer; }
/* the screen sits on the live road view: dimmed, with a cool vignette like a screen bezel */
#ui.s-mode, #ui.s-maps, #ui.s-setup, #ui.s-settings, #ui.s-results, #ui.s-roamConditions, #ui.s-roamLandmarks {
  background: radial-gradient(140% 100% at 50% 0%, rgba(8,12,17,.72), rgba(3,5,7,.9) 70%), linear-gradient(180deg, rgba(3,5,7,.4), rgba(3,5,7,.7)); }
#ui.s-pause { background: linear-gradient(90deg, rgba(3,5,7,.78), rgba(3,5,7,.35) 46%, rgba(3,5,7,.1)); }
#ui.s-car { background: radial-gradient(120% 90% at 32% 42%, #18222c, #070a0e 72%); }
#ui.s-title { background: linear-gradient(90deg, rgba(3,5,7,.9) 0%, rgba(3,5,7,.55) 38%, rgba(3,5,7,.25) 70%, rgba(3,5,7,.55)), linear-gradient(0deg, rgba(3,5,7,.8), transparent 34%), linear-gradient(180deg, rgba(3,5,7,.6), transparent 18%); }

/* ---------------------------------------------------------------- the screen frame */
.scr { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--s-3);
  padding: max(var(--pad-screen-y), env(safe-area-inset-top)) max(var(--pad-screen-x), env(safe-area-inset-right)) max(calc(var(--pad-screen-y) * .5), env(safe-area-inset-bottom)) max(var(--pad-screen-x), env(safe-area-inset-left));
 }
/* a screen without a title row keeps its body in the body row, so the soft-key bar stays at the bottom (Results) */
:where(.scr > .scr__head:not(:has(.scr__title, .scr__headr, [data-menu-feedback]))) ~ .scr__body { grid-row: 3; }
:where(.scr > .scr__head:not(:has(.scr__title, .scr__headr, [data-menu-feedback]))) ~ .scr__foot { grid-row: 4; }
/* a new screen settles in with a short, calm fade: no slide, no scale, no spring. It starts half-lit rather than
   transparent, and the dimmed backdrop lives on #ui, so the road view never flashes through between screens. */
#ui.is-entering .scr { animation: hu-enter .16s ease-out both; }
@keyframes hu-enter { from { opacity: .5; } }
#ui.is-settling *, #ui.is-settling *::before, #ui.is-settling *::after { transition: none !important; }
/* status bar: Back owns the first slot; titles never share its row */
.hu-status { display: flex; align-items: center; gap: var(--s-3); min-width: 0; min-height: 2.75rem; }
.hu-status .scr__back { flex: none; gap: var(--s-2); padding: 0 var(--s-4) 0 .3rem; min-height: 2.5rem; color: var(--hu-text-2); font-weight: 600; letter-spacing: .16em; }
.hu-status .scr__back .ico { box-sizing: border-box; width: 2rem; height: 2rem; padding: .45rem; border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--hu-hair-2); }
.hu-status .scr__back:hover { color: #fff; } .hu-status .scr__back:hover .ico { background: rgba(255,255,255,.14); }
.hu-status .scr__back + .hu-crumb { padding-left: var(--s-3); border-left: 1px solid var(--hu-hair-2); }
.hu-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.6; }
.hu-status__r { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); flex: none; }
.hu-driver { display: inline-flex; align-items: center; gap: var(--s-2); height: 1.9rem; padding: 0 var(--s-3) 0 .2rem; border-radius: var(--r-pill); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--hu-hair);
  font: 600 var(--t-xs) var(--f-cond); letter-spacing: .14em; color: var(--hu-text-2); }
.hu-driver .ico { box-sizing: border-box; width: 1.5rem; height: 1.5rem; padding: .3rem; border-radius: 50%; background: linear-gradient(135deg, var(--hu-ice), var(--hu-ice-d)); color: var(--hu-lit-fg); }
.hu-clock { font: 400 var(--t-lg) var(--f-sans); letter-spacing: .06em; color: var(--hu-text); font-variant-numeric: tabular-nums; }
/* title row */
.scr__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-5); min-width: 0; flex-wrap: wrap; }
.scr__head:not(:has(.scr__title, .scr__headr, [data-menu-feedback])) { display: none; }
.scr__titles { min-width: 0; }
.scr__headr { min-width: 0; display: flex; justify-content: flex-end; }
.scr__title { margin: 0; font-family: var(--f-sans); font-weight: 400; font-size: var(--t-2xl); line-height: 1.1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr__body { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.scr__body > * { min-height: 0; }
/* soft-key bar */
.scr__foot { display: flex; align-items: center; justify-content: center; gap: var(--s-4); min-height: 2.4rem; border-top: 1px solid rgba(190,215,235,.07); padding-top: var(--s-1); }
.empty { padding: var(--s-6); text-align: center; color: var(--c-text-3); letter-spacing: .2em; font: 600 var(--t-sm) var(--f-cond); }
.group__note { margin: var(--s-2) var(--s-4) 0; font-family: var(--f-sans); font-size: var(--t-sm); color: var(--c-text-3); line-height: 1.5; }
.field-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.ico--route { width: 1em; height: 1em; color: var(--c-accent); vertical-align: -.12em; }
.menu-feedback { flex-basis: 100%; }

/* ---------------------------------------------------------------- wordmark (the one italic in the UI: the brand) */
.wordmark { display: inline-flex; flex-direction: column; font-family: var(--f-cond); font-style: italic; font-weight: 900; line-height: .84; letter-spacing: -.005em; text-transform: uppercase; }
.wordmark b:first-child { font-size: 1em; background: linear-gradient(180deg, #fff 55%, #b9c2cc); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.wordmark b:last-child { display: inline-flex; align-items: center; gap: .35em; margin-top: .14em; font-size: .37em; letter-spacing: .12em; color: #dfe7ed; }
.wordmark b:last-child::before { content: ""; width: 1.4em; height: .2em; background: var(--hu-red); transform: skewX(-24deg); }
.wordmark--sm { font-size: 2.3rem; }

/* ---------------------------------------------------------------- home (title): brand on the left, an infotainment tile grid */
.scr--title { grid-template-rows: auto minmax(0, 1fr) auto; }
.home { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.5fr); gap: var(--s-6); align-items: center; min-height: 0; }
.home__brand { align-self: center; min-width: 0; }
.title__mark { display: flex; align-items: center; gap: .16em; margin: 0; font-size: min(5rem, 15vw, 13vh); line-height: 1; }
.brand-mark { flex: none; display: block; width: 1.18em; height: 1.18em; border-radius: 24%; box-shadow: 0 .08em .3em rgba(0,0,0,.5); }
.ld-brand { display: flex; align-items: center; gap: .6rem; }
.ld-brand .brand-mark { width: 2.6rem; height: 2.6rem; }
.title__tag { margin: var(--s-4) 0 0; max-width: 24rem; font-family: var(--f-sans); font-weight: 500; font-size: var(--t-md); line-height: 1.5; color: var(--c-text-2); }
.title__menu { display: grid; gap: var(--s-3); }
.home__tiles { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, minmax(9rem, 1fr)); height: min(100%, 34rem); align-self: center; }
.home__tiles .option { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--s-1); min-height: 0; padding: var(--s-5); border-radius: var(--r-4);
  background: var(--hu-sheen), var(--hu-glass); -webkit-backdrop-filter: var(--hu-blur); backdrop-filter: var(--hu-blur); border: 1px solid var(--hu-hair); box-shadow: var(--hu-shadow), var(--hu-edge); overflow: hidden; }
.home__tiles .option > span:nth-child(2) { margin-top: auto; }
.home__tiles .option__ico { width: 3rem; height: 3rem; margin-bottom: var(--s-3); }
.home__tiles .option__ico .ico { width: 1.45rem; height: 1.45rem; }
.home__tiles .option__title { font-size: var(--t-lg); letter-spacing: .08em; }
.home__tiles .option__desc { font-size: var(--t-xs); line-height: 1.4; }
.home__tiles .option__go { display: none; }
.home__tiles .option:hover { background: var(--hu-sheen), var(--hu-glass-hi); }
.home__tiles .option.focus { border-color: rgba(111,208,255,.8); box-shadow: 0 0 0 4px rgba(111,208,255,.14), 0 1.4rem 3rem rgba(0,0,0,.5), var(--hu-edge); background: linear-gradient(180deg, rgba(111,208,255,.15), rgba(111,208,255,.02) 60%), var(--hu-glass-hi); }
.home__tiles .option { transition: border-color .22s, box-shadow .22s, background .22s; }
/* the PLAY tile: tall, with a glowing route line like the navigation screen */
.home__tiles .option:first-child { grid-row: 1 / 3; padding: var(--s-6); }
.home__tiles .option:first-child::before { content: ""; position: absolute; inset: 8% -12% 30% 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cpath d='M10 175C55 160 66 112 108 102s62 18 84-22 54-46 98-52' fill='none' stroke='%236fd0ff' stroke-opacity='.22' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M10 175C55 160 66 112 108 102s62 18 84-22 54-46 98-52' fill='none' stroke='%236fd0ff' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='175' r='6' fill='%23fff'/%3E%3Ccircle cx='290' cy='28' r='6' fill='none' stroke='%23fff' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .55; pointer-events: none; transition: opacity .22s; }
.home__tiles .option:first-child.focus::before { opacity: 1; filter: drop-shadow(0 0 6px rgba(111,208,255,.6)); }
/* Keep the route decoration behind a local text scrim, including when PLAY is focused. */
.home__tiles .option:first-child > span:nth-child(2) { align-self: stretch; position: relative; z-index: 1; isolation: isolate; }
.home__tiles .option:first-child > span:nth-child(2)::before { content: ""; position: absolute; inset: -1.5rem calc(-1 * var(--s-6)) -12rem; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,16,24,0), rgba(9,16,24,.94) 3rem); }
.home__tiles .option:first-child .option__ico, .home__tiles .option:first-child::after { position: relative; z-index: 1; }
.home__tiles .option:first-child .option__title { font-weight: 400; font-size: var(--t-3xl); letter-spacing: .1em; }
.home__tiles .option:first-child .option__desc { font-size: var(--t-sm); }
.home__tiles .option:first-child::after { content: "START  ›"; display: inline-flex; align-items: center; height: 2.6rem; margin-top: var(--s-4); padding: 0 var(--s-5); border-radius: var(--r-pill); white-space: pre;
  background: var(--hu-lit); color: var(--hu-lit-fg); font: 700 var(--t-sm) var(--f-cond); letter-spacing: .18em; box-shadow: 0 .4rem 1.6rem rgba(111,208,255,.22); }
.home__tiles .option.focus .option__ico { background: linear-gradient(180deg, #9ae0ff, var(--hu-ice-d)); color: var(--hu-lit-fg); }

/* ---------------------------------------------------------------- mode select: two app cards */
.mode-select { flex: 1; display: flex; flex-direction: column; gap: var(--s-4); min-height: 0; }
.mode-select > .field { align-self: flex-start; min-width: min(30rem, 100%); background: var(--hu-sheen), var(--hu-glass); border: 1px solid var(--hu-hair); border-radius: var(--r-pill); padding-inline: var(--s-5) var(--s-2); }
.mode-select > .field.focus { border-color: rgba(111,208,255,.6); }
.mode-select > .field.focus::after { display: none; }
.mode-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--s-4); min-height: 0; max-height: calc(28rem + 12px); overflow-y: auto;
  padding: 6px; margin: -6px; } /* room inside the scroll box for the focus ring: a lit tile is never cropped */
.mode-select > .field { flex: none; }
.mode-tile { position: relative; display: flex; flex-direction: column; gap: var(--s-2); min-height: 12rem; padding: var(--s-6); border-radius: var(--r-4); overflow: hidden;
  background: var(--hu-sheen), var(--hu-glass); -webkit-backdrop-filter: var(--hu-blur); backdrop-filter: var(--hu-blur); border: 1px solid var(--hu-hair); box-shadow: var(--hu-shadow), var(--hu-edge);
  transition: transform .22s var(--ease), border-color .22s, background .22s, box-shadow .22s; }
.mode-tile__ico { width: 3.4rem; height: 3.4rem; margin-bottom: auto; }
.mode-tile__ico .ico { width: 1.6rem; height: 1.6rem; }
.mode-tile__title { margin-top: var(--s-5); font-weight: 400; font-size: var(--t-3xl); line-height: 1; letter-spacing: .1em; }
.mode-tile__desc { max-width: 26rem; font-family: var(--f-sans); font-weight: 500; font-size: var(--t-sm); line-height: 1.5; color: var(--c-text-3); }
.mode-tile::before { content: ""; position: absolute; right: -8%; top: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(111,208,255,.14), transparent 65%); opacity: 0; transition: opacity .22s; pointer-events: none; }
.mode-tile:hover { background: var(--hu-sheen), var(--hu-glass-hi); }
.mode-tile.focus { border-color: rgba(111,208,255,.8); background: linear-gradient(180deg, rgba(111,208,255,.14), rgba(111,208,255,.02) 60%), var(--hu-glass-hi); box-shadow: 0 0 0 4px rgba(111,208,255,.14), 0 1.4rem 3rem rgba(0,0,0,.5); }
.mode-tile.focus::before { opacity: 1; }
.mode-tile.focus .mode-tile__ico { background: linear-gradient(180deg, #9ae0ff, var(--hu-ice-d)); color: var(--hu-lit-fg); box-shadow: 0 .3rem 1rem rgba(111,208,255,.35); }
.mode-tile.focus .mode-tile__desc { color: var(--c-text-2); }

/* the session summary (race setup): a navigation destination card */
.evs__top { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-height: 1.6rem; }
.evs__kick { font: 600 var(--t-xs) var(--f-cond); letter-spacing: var(--track-kick); color: var(--hu-ice); text-transform: uppercase; }
.evs__name { margin: var(--s-1) 0 0; font-family: var(--f-sans); font-weight: 400; font-size: var(--t-2xl); line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; }
/* the route reads in full (it wraps, never ellipsises) under the title, like a navigation destination */
.evs__route { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-2) 0 0; font: 500 var(--t-md) / 1.35 var(--f-sans); letter-spacing: .04em; color: var(--c-text-2); text-transform: uppercase; }
.evs__route > .ico { flex: none; width: 1.05em; height: 1.05em; margin-top: .15em; color: var(--c-text-3); }
.evs__route .ico--route { vertical-align: -.15em; color: var(--hu-ice); }
.evs__facts { margin-top: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evs__facts .stat-tile:nth-child(odd):last-child { grid-column: 1 / -1; }
.evs__facts .stat-tile__v { font-size: var(--t-lg); white-space: normal; } /* a long value wraps, never ellipsises */
/* personal bests: one quiet line under the facts, only when a time exists */
.evs__best { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--hu-hair);
  font: 600 var(--t-xs) var(--f-cond); letter-spacing: var(--track-caps); color: var(--c-text-3); text-transform: uppercase; }
.evs__best > .ico { width: 1rem; height: 1rem; color: var(--c-gold); }
.evs__best b { margin-left: .3em; font: 500 var(--t-md) var(--f-sans); letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- race setup */
.setup-layout { flex: 1; display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.3fr); gap: var(--s-5); min-height: 0; }
.setup__event { min-height: 0; align-self: start; max-height: 100%; }
.setup__form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; align-self: start; padding: var(--s-4) var(--s-4) var(--s-5); }
.setup__form .panel__head { padding: 0 var(--s-4); }
.setup__fields { min-height: 0; flex: 0 1 auto; margin: 0 calc(var(--s-2) * -1); padding: 2px var(--s-2); }
.setup__fields > .btn--ghost { margin: var(--s-2) var(--s-2); }
.setup__go { margin-top: var(--s-4); padding: 0 var(--s-2); }

/* ---------------------------------------------------------------- settings: a rail of sections + a glass list */
.scr--settings { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: var(--s-5);
  grid-template-areas: "status status" "title title" "rail body" "foot foot"; }
.scr--settings > .hu-status { grid-area: status; } .scr--settings > .scr__foot { grid-area: foot; } .scr--settings > .scr__body { grid-area: body; }
.scr--settings > .scr__head { display: contents; }
.scr--settings .scr__titles { grid-area: title; }
.scr--settings .scr__headr { grid-area: rail; align-self: start; justify-content: stretch; min-height: 0; }
.scr--settings [data-menu-feedback] { grid-area: title; justify-self: end; align-self: center; margin: 0; }
.scr--settings .tabs { flex-direction: column; gap: 2px; width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.scr--settings .tabs__hint { display: none; }
.scr--settings .tab { justify-content: flex-start; gap: var(--s-3); min-height: 3rem; padding: 0 var(--s-4); border-radius: var(--r-3); font-size: var(--t-md); letter-spacing: .08em; color: var(--c-text-2); }
.scr--settings .tab .ico { width: 1.25rem; height: 1.25rem; color: var(--c-text-3); }
/* hover only brightens the label; the one selected item is the glass indicator that slides along the rail */
@media (hover: hover) { .scr--settings .tab:not(.on):hover { color: var(--c-text); } .scr--settings .tab:not(.on):hover .ico { color: var(--c-text-2); } }
.scr--settings .tab.on { color: #fff; }
.scr--settings .tabs > .sel-ind { border-radius: var(--r-3); background: var(--hu-sheen), rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--hu-hair); }
.scr--settings .tabs > .sel-ind::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 3px; border-radius: 3px; background: var(--hu-ice); box-shadow: 0 0 10px var(--hu-ice); }
.scr--settings .tab.on .ico { color: var(--hu-ice); }
.scr--settings .tabs.focus { box-shadow: none; }
.scr--settings .tabs.focus > .sel-ind { background: linear-gradient(90deg, rgba(111,208,255,.18), rgba(111,208,255,.04)); box-shadow: inset 0 0 0 1px rgba(111,208,255,.55); }
.scr--settings .scr__body { align-items: stretch; }
.set-panel { width: min(56rem, 100%); min-height: 0; padding: var(--s-4) var(--s-4) var(--s-5); }
.set-panel .group + .group { margin-top: var(--s-5); padding-top: var(--s-1); }
.bind-head { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 9rem; gap: var(--s-3); margin: var(--s-5) 0 calc(var(--s-3) * -1); padding: 0 var(--s-4); font: 600 var(--t-xs) var(--f-cond); letter-spacing: .18em; color: var(--c-text-3); }
.bind-head span { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
.bind__cols { display: grid; grid-template-columns: 9rem 9rem; gap: var(--s-3); }
.bind__chip { display: flex; align-items: center; justify-content: center; gap: .25em; min-height: 2.4rem; padding: 0 var(--s-2); border-radius: var(--r-pill); background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px var(--hu-hair); border: 1px solid transparent; cursor: pointer; }
.bind__chip:hover { border-color: var(--c-line-2); }
.bind__chip.na { cursor: default; background: transparent; box-shadow: none; }
.bind__chip em { font-style: normal; font-weight: 600; font-size: var(--t-xs); letter-spacing: .14em; color: var(--tt-amber); animation: bindBlink 1s steps(2) infinite; }
.bind__chip.wait { border-color: var(--tt-amber); }
#ui[data-bindcol="0"] .bind.focus [data-bind=keyboard], #ui[data-bindcol="1"] .bind.focus [data-bind=gamepad] { border-color: rgba(111,208,255,.8); background: var(--hu-ice-tint); }
@keyframes bindBlink { 50% { opacity: .4; } }
.bind .field__label { font-size: var(--t-md); }

/* ---------------------------------------------------------------- pause: a quick-settings sheet over the frozen road view */
.scr--pause { grid-template-rows: minmax(0, 1fr) auto; }
.pause-card { align-self: stretch; justify-self: start; width: min(26rem, 100%); max-height: 100%; overflow-y: auto; padding: var(--s-6) var(--s-4) var(--s-4); border-radius: var(--r-4); }
.pause-card > .kick { padding: 0 var(--s-3); }
.pause-card .title-xl { margin-top: var(--s-2); padding: 0 var(--s-3); font-size: var(--t-2xl); letter-spacing: .14em; }
.pause__sub { margin-top: var(--s-2); padding: 0 var(--s-3); display: flex; align-items: center; gap: var(--s-2); font: 500 var(--t-lg) var(--f-sans); letter-spacing: .06em; color: var(--tt-amber); font-variant-numeric: tabular-nums; }
.pause__list { margin-top: var(--s-5); display: grid; gap: 2px; }
.pause__list .option { padding-block: var(--s-2); min-height: 3.25rem; background: transparent; }
.pause__list .option:hover { background: rgba(255,255,255,.06); }
.pause__list .option.focus { background: linear-gradient(90deg, rgba(111,208,255,.16), rgba(111,208,255,.03)); }
.pause__list .option__ico { width: 2.2rem; height: 2.2rem; }
.pause__list .option__ico .ico { width: 1.1rem; height: 1.1rem; }
.pause__list .option__title { font-size: var(--t-md); }
.scr--pause > .scr__foot { justify-content: flex-start; padding-left: var(--s-3); border-top: 0; }

/* ---------------------------------------------------------------- results: the trip computer */
.res-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .85fr); gap: var(--s-6); min-height: 0; }
.res-main { min-height: 0; overflow-y: auto; align-self: start; padding-top: var(--s-2); }
.res-title { margin: 0; font-family: var(--f-sans); font-weight: 300; font-size: var(--t-display); line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.is-win .res-title { color: #fff; text-shadow: 0 0 28px rgba(111,208,255,.35); }
.is-lose .res-title { color: var(--hu-text-2); }
.res-sub { margin: var(--s-3) 0 0; font-family: var(--f-sans); font-weight: 500; font-size: var(--t-lg); letter-spacing: .02em; color: var(--c-text-2); }
.res-sub b { color: #fff; font-weight: 600; }
.res-stats { margin-top: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.res-stats .stat-tile { padding: var(--s-4); }
.res-stats .stat-tile__v { font-size: var(--t-2xl); font-weight: 300; }
.res-actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.res-side { min-height: 0; display: grid; gap: var(--s-3); align-content: start; }
.res-side .panel { padding: var(--s-4) var(--s-4) var(--s-3); }
.r-table { width: 100%; border-collapse: collapse; font: 500 var(--t-md) var(--f-sans); letter-spacing: .03em; }
.r-table td { padding: .55rem .35rem; border-bottom: 1px solid var(--hu-hair); vertical-align: baseline; }
.r-table tr:last-child td { border-bottom: 0; }
.r-table td:last-child { text-align: right; font-family: var(--f-cond); font-weight: 600; font-variant-numeric: tabular-nums; }
.r-table td small { margin-left: .6em; font: 600 var(--t-2xs) var(--f-cond); letter-spacing: .12em; color: var(--c-text-3); text-transform: uppercase; }
.r-table .r-pos { width: 2.8em; font-family: var(--f-cond); font-weight: 600; color: var(--c-text-3); }
.r-table tr.me td { color: #fff; background: var(--hu-ice-tint); } .r-table tr.me .r-pos { color: var(--hu-ice); }
.r-table tr.me td:first-child { border-radius: var(--r-1) 0 0 var(--r-1); } .r-table tr.me td:last-child { border-radius: 0 var(--r-1) var(--r-1) 0; }
.r-table .good { color: var(--c-good); } .r-table .bad { color: var(--c-bad); } .r-table .run { color: var(--c-text-3); font-size: var(--t-sm); letter-spacing: .12em; }

/* ---------------------------------------------------------------- car detail: studio + vehicle info */
.car-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr); gap: var(--s-5); min-height: 0; }
.car-stage { position: relative; min-width: 0; min-height: 0; border-radius: var(--r-4); background: radial-gradient(ellipse at 50% 64%, #34414c, #121a22 72%); box-shadow: inset 0 0 0 1px var(--hu-hair), var(--hu-shadow); overflow: hidden; }
.car-stage canvas { display: block; width: 100%; height: 100%; }
.car-stage__count { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 1; display: flex; align-items: center; gap: var(--s-2); }
.car-info { align-self: center; min-width: 0; max-height: 100%; overflow-y: auto; }
.car-specs { margin-top: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.car-paints { margin-top: var(--s-5); }
.car-paints__row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.car-paints .paint { width: 2rem; height: 2rem; border-radius: 50%; background: var(--paint); box-shadow: inset 0 -3px 6px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.2); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.car-paints .paint.selected { box-shadow: inset 0 -3px 6px rgba(0,0,0,.35), 0 0 0 2px #0b1016, 0 0 0 4px #fff; }
.car-paints .paint.focus, .car-decals .paint.focus { transform: scale(1.12); box-shadow: inset 0 -3px 6px rgba(0,0,0,.35), 0 0 0 2px #0b1016, 0 0 0 4px var(--hu-ice), 0 0 14px rgba(111,208,255,.5); }
.car-paint-name { margin-top: var(--s-2); min-height: 1.2em; font-family: var(--f-sans); font-size: var(--t-xs); color: var(--c-text-3); }
.car-actions { margin-top: var(--s-5); display: grid; gap: var(--s-2); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .home { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-content: center; }
  .home__brand .title__mark { font-size: min(3.6rem, 12vw, 9vh); }
  .home__tiles { height: auto; grid-template-rows: repeat(2, minmax(7.5rem, auto)); }
}
@media (max-width: 860px) {
  .scr__headr { justify-content: flex-start; }
  .setup-layout, .res-layout, .car-layout { grid-template-columns: minmax(0, 1fr); }
  .scr--setup .scr__body, .scr--results .scr__body, .scr--car .scr__body { overflow-y: auto; padding: 6px; margin: -6px; } /* room for focus rings */
  .setup-layout, .res-layout, .car-layout { display: flex; flex-direction: column; flex: none; }
  .setup__event, .setup__form .setup__fields, .res-main, .res-side, .car-info { max-height: none; overflow: visible; }
  .setup__event { box-sizing: border-box; width: 100%; } /* stacked: the summary spans the column like the form under it */
  .car-stage { flex: none; height: max(12rem, 34vh); }
  /* settings: the rail becomes a scrolling tab strip above the list */
  .scr--settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "status" "title" "rail" "body" "foot"; }
  .scr--settings .tabs { flex-direction: row; overflow-x: auto; gap: var(--s-1); }
  .scr--settings .tab { flex: none; min-height: 2.5rem; border-radius: var(--r-pill); font-size: var(--t-sm); }
  .scr--settings .tabs > .sel-ind { border-radius: var(--r-pill); }
  .scr--settings .tabs > .sel-ind::before { left: 22%; right: 22%; top: auto; bottom: 0; width: auto; height: 2px; }
  .set-panel { padding: var(--s-3) var(--s-2) var(--s-4); }
  .pause-card { justify-self: stretch; width: 100%; }
}
@media (max-width: 560px) {
  .scr__back span { display: none; } .hu-status .scr__back { padding: 0; min-width: 2.5rem; }
  .hu-driver { display: none; }
  .scr__title { font-size: var(--t-xl); }
  .home__tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: var(--s-2); }
  .home__tiles .option { padding: var(--s-4); min-height: 6.5rem; }
  .home__tiles .option:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 11rem; padding: var(--s-5); }
  .home__tiles .option__ico { width: 2.4rem; height: 2.4rem; margin-bottom: var(--s-2); }
  .home__tiles .option__desc { display: none; }
  .home__tiles .option:first-child .option__desc { display: block; }
  .home__tiles .option:first-child::after { display: none; }
  .title__tag { display: none; }
  .mode-grid { flex: none; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--s-2); max-height: none; }
  .mode-tile { min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-4); padding: var(--s-4); }
  .mode-tile__ico { grid-row: 1 / 3; margin: 0; }
  .mode-tile__title { margin: 0; font-size: var(--t-xl); align-self: end; }
  .mode-select > .field { min-width: 0; align-self: stretch; border-radius: var(--r-3); }
  .field { grid-template-columns: minmax(0, 1fr); }
  .field__ctl { justify-content: flex-start; }
  .seg { justify-content: flex-start; }
  .slider { width: 100%; }
  .bind-head { display: none; }
  .bind.field { grid-template-columns: minmax(0, 1fr) auto; }
  .bind__cols { grid-template-columns: 5.6rem 5.6rem; gap: var(--s-1); }
  .bind__chip .kbd + .kbd { display: none; } /* one binding per device on phones */
  .bind__chip .kbd { max-width: 100%; overflow: hidden; }
  .scr--settings .tab .ico { display: none; }
  .res-title { font-size: var(--t-3xl); }
  .evs__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* short landscape (phones sideways, small laptops) */
@media (max-height: 500px) {
  .scr { gap: var(--s-2); }
  .hu-status { min-height: 2.25rem; }
  .hu-status .scr__back { min-height: 2.1rem; } .hu-status .scr__back .ico { width: 1.7rem; height: 1.7rem; padding: .38rem; }
  .scr__title { font-size: var(--t-xl); }
  .scr__foot { min-height: 1.8rem; }
  .home { grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.6fr); gap: var(--s-4); }
  .title__mark { font-size: min(3.4rem, 16vh); }
  .title__tag { display: none; }
  .home__tiles { height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .home__tiles .option { padding: var(--s-3); }
  .home__tiles .option:first-child { padding: var(--s-4); }
  .home__tiles .option__ico { width: 2.1rem; height: 2.1rem; margin-bottom: var(--s-1); }
  .home__tiles .option__desc { display: none; }
  .home__tiles .option:first-child .option__title { font-size: var(--t-2xl); }
  .home__tiles .option:first-child::after { height: 2.1rem; margin-top: var(--s-2); }
  .option__ico { width: 2.1rem; height: 2.1rem; }
  .mode-grid { gap: var(--s-2); }
  .mode-tile { min-height: 0; padding: var(--s-4); }
  .mode-tile__ico { width: 2.4rem; height: 2.4rem; margin-bottom: var(--s-2); }
  .mode-tile__title { margin-top: 0; font-size: var(--t-xl); }
  .mode-tile__desc { font-size: var(--t-xs); }
  .res-title { font-size: var(--t-3xl); }
  .car-stage { height: auto; }
  .car-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); flex: 1; min-height: 0; }
  .car-info { align-self: stretch; }
  .seg__opt { min-height: 1.9rem; padding: 0 var(--s-3); font-size: var(--t-xs); letter-spacing: .08em; }
  .field { min-height: 2.6rem; }
  .car-layout > .car-stage { height: auto; }
  .scr--car .scr__body { overflow: hidden; }
  .car-info { max-height: 100%; overflow-y: auto; }
  .scr--settings { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "status status" "title title" "rail body" "foot foot"; }
  .scr--settings .tabs { flex-direction: column; overflow: visible; }
  .scr--settings .tab { min-height: 2.3rem; border-radius: var(--r-2); }
  .scr--settings .tabs > .sel-ind { border-radius: var(--r-2); }
  .scr--settings .tabs > .sel-ind::before { left: 0; right: auto; top: 26%; bottom: 26%; width: 3px; height: auto; }
  .scr--settings .scr__headr { overflow-y: auto; max-height: 100%; }
  .pause-card { padding: var(--s-3); width: min(36rem, 100%); justify-self: start; }
  .pause__list .option { grid-template-columns: auto 1fr; min-height: 2.6rem; } .pause__list .option__go { display: none; }
  .pause__list .option__title { white-space: nowrap; }
  .pause__list { margin-top: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 500px) and (max-width: 860px) {
  .setup-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); flex: 1; }
  .scr--setup .scr__body { overflow: hidden; }
  .setup__event, .setup__form .setup__fields { max-height: 100%; overflow-y: auto; }
  .setup__form { min-height: 0; }
  .res-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); flex: 1; }
  .scr--results .scr__body { overflow: hidden; }
  .res-main, .res-side { max-height: 100%; overflow-y: auto; }
}
/* track select on phones: the destination card stacks under the map, so the body scrolls */
@media (max-width: 560px), (max-height: 500px) { #ui.s-maps .scr__body { overflow-y: auto; overscroll-behavior: contain; } }
@media (min-width: 2200px) { .home__tiles { height: min(100%, 38rem); } }
@media (prefers-reduced-transparency: reduce) { .panel, .card, .mode-tile, .home__tiles .option, .modal, .listbox { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--hu-glass-solid); } }

/* ---------------------------------------------------------------- event HUD */
#evBox { position: absolute; right: 28px; top: 130px; min-width: 190px; padding: 10px 16px 10px; background: var(--panel); border-right: 4px solid var(--cyan); font-family: var(--cond); text-align: right; opacity: 0; transition: opacity .3s; }
#evBox.on { opacity: 1; }
#evBox .e-k { font-weight: 700; font-size: 13px; letter-spacing: .2em; color: #8f99a6; }
#evBox b { display: block; font-style: italic; font-weight: 900; font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; }
#evBox b.good { color: #5dff8a; } #evBox b.bad { color: #ff6b61; } #evBox b.sc { color: var(--gold); }
#evBox small { display: block; margin-top: 4px; font-weight: 700; font-size: 12px; letter-spacing: .16em; color: #c3cbd4; }
/* Solo timing retains the best-split gap while position is reserved for races. */
body[data-mode=timetrial] #posBox .pos, body[data-mode=pursuit] #posBox .pos,
body[data-mode=timetrial] #rRival, body[data-mode=pursuit] #rRival { display:none; }
body[data-mode=pursuit] #posBox .row.rv { display:none; }
.pop.split { background: rgba(8,10,14,.85); padding: 6px 22px; font-size: 40px; }
.pop.split.good small { color: #5dff8a; } .pop.split.bad small { color: #ff6b61; }
#wrongWay { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; white-space: nowrap; font-family: var(--cond); opacity: 0; pointer-events: none; }
#wrongWay.on { opacity: 1; animation: wwBlink .7s steps(2) infinite; }
#wrongWay b { display: block; font-style: italic; font-weight: 900; font-size: 84px; line-height: 1; color: #fff; background: var(--red); padding: 4px 34px; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
#wrongWay span { display: block; margin-top: 6px; font-weight: 800; letter-spacing: .3em; font-size: 16px; text-shadow: 0 2px 6px #000; }
@keyframes wwBlink { 50% { opacity: .35; } }


@media (max-width: 800px) {
  #evBox { top: auto; bottom: 200px; right: 12px; min-width: 150px; }
  #evBox b { font-size: 26px; }
}

/* the floating MULTIPLAYER button and GRAPHICS select now live in the menus (title -> Multiplayer, Settings -> Graphics):
   keep them off the race HUD and out of the way of the menus */
body.counting #mp-toggle, body.racing #mp-toggle, body.ui-open #mp-toggle, body.menu #mp-toggle,
#graphics-quality { display: none !important; }

/* short / narrow screens: the route bar sits between the (moved) minimap and the right-hand widgets, district
   names dropped (the ticks stay) so nothing runs under the minimap */
@media (max-height: 480px), (max-width: 700px) {
  #hud #routeBox { left: 118px; right: 118px; width: auto; transform: none; }
  #hud #rticks .l { display: none; }
  #hud #routeBox .rt { font-size: 12px; overflow: hidden; }
  #hud #rRoad, #hud #routeBox .sep { display: none; }
}

@media (max-width: 700px) {
  #wrongWay { top: 30%; }
  #wrongWay b { font-size: 40px; padding: 2px 18px; }
  #wrongWay span { font-size: 11px; }
}

/* event / district banner: at <=1100px wide style.css drops the route bar to top:130px, right where the banner's 17%
   sits — push the banner below the route bar (and the split box), smaller on short screens */
@media (max-width: 1100px) {
  #banner { top: 200px; padding: 8px 56px 10px 36px; }
  #wrongWay { top: 29%; }
  #banner .b1 { font-size: 50px; }
}
@media (max-height: 480px) {
  #banner { top: 150px; padding: 5px 34px 6px 22px; border-left-width: 5px; }
  #wrongWay { top: 140px; white-space: nowrap; }
  #wrongWay b { font-size: 44px; padding: 2px 22px; }
  #wrongWay span { font-size: 11px; margin-top: 3px; }
  #banner .b1 { font-size: 32px; }
  #banner .b2 { font-size: 11px; letter-spacing: .14em; }
}


/* A quieter race HUD: timing, one slim progress bar, instruments and the map. */
#hud #routeBox { top: 32px; left: 42%; right: 5%; width: auto; transform: none; }
#hud #routeBox .rt, #hud #rticks, #hud #rMe, #hud #rRival, #hud #rbar .flag,
#hud #sigBox, #hud #penRow, body.racing #credit { display:none; }
#hud #rbar { height:4px; margin:0; background:rgba(255,255,255,.2); }
body.circuit-race #routeBox { display:none; }
#hud #mapBox { width:180px; height:180px; bottom:22px; }
/* M: the big map (src/hud.js toggleBigMap) grows from the same corner, on every layout */
body #hud #mapBox.is-big { width: min(62vmin, 560px) !important; height: min(62vmin, 560px) !important; z-index: 3; }
#hud #dialBox { width:270px; height:270px; }
#hud #mapLabel { font-size:11px; letter-spacing:.08em; }
#hud #posBox .pos { padding:10px 28px 8px 18px; }
#hud #posN { font-size:64px; }
#hud #posSuf { font-size:22px; margin-top:7px; }
#hud #posBox .of { font-size:20px; margin-top:35px; }
#hud #posBox .rows { padding:8px 20px; }
#hud .row b { font-size:24px; }
#hud #keys { font-size:11px; }

@media (max-width:700px) {
  #hud #routeBox { top:111px; left:20px; right:20px; }
  #hud #posBox { left:16px; top:20px; }
  #hud #mapBox { left:16px; width:124px; height:124px; bottom:24px; }
  #hud #dialBox { right:0; bottom:0; width:210px; height:210px; }
  #hud #posBox .rows { min-width:160px; padding:8px 18px; }
  #hud .row .k { font-size:11px; }
  #hud .row b { font-size:22px; }
}

/* touch driving (src/input.css lifts the dial above the pedals and moves the minimap up): the lean-HUD #hud rules above
   are more specific, so restate the touch placement at the same specificity, and keep the route bar clear of the map */
body.touch-driving #hud #mapBox { top: 105px; bottom: auto; left: 10px; width: 100px; height: 100px; }
body.touch-driving #hud #dialBox { right: 10px; bottom: 128px; width: 160px; height: 160px; }
@media (max-width: 700px) { body.touch-driving #hud #routeBox { left: 122px; right: 16px; } }
@media (max-height: 480px) {
  body.touch-driving #hud #mapBox { top: 90px; width: 84px; height: 84px; }
  body.touch-driving #hud #dialBox { width: 125px; height: 125px; bottom: 120px; }
}

/* ---------------------------------------------------------------- HUD widgets on the UI kit (behaviour stays in main.js / hud.js) */
/* the non-modal tow offer (main.js offerTow) */
body .tow-prompt { top: 22%; width: min(26rem, calc(100vw - 32px)); padding: var(--s-4) var(--s-5) var(--s-4); border: 1px solid var(--c-line-2); border-top: 3px solid var(--c-gold); border-radius: var(--r-3);
  background: rgba(16,22,28,.95); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.55); font: 500 var(--t-sm)/1.45 var(--f-sans); color: #fff; animation: ui-pop .22s var(--ease) both; }
body .tow-prompt strong { display: flex; align-items: center; gap: var(--s-2); font: italic 900 var(--t-xl)/1 var(--f-cond); letter-spacing: .03em; }
body .tow-prompt strong::before { content: ""; flex: none; width: 1.1em; height: 1.1em; background: var(--c-gold); -webkit-mask: url(../assets/icons/truck.svg) center / contain no-repeat; mask: url(../assets/icons/truck.svg) center / contain no-repeat; }
body .tow-prompt p { margin: var(--s-2) 0 var(--s-3); color: var(--c-text-2); }
body .tow-actions { gap: var(--s-2); }
body .tow-actions button { flex: 1 1 auto; min-height: 2.6rem; padding: 0 var(--s-4); border: 1px solid var(--c-line-2); border-radius: var(--r-2); background: var(--c-surface-3); color: #fff; font: 800 var(--t-md)/1 var(--f-cond); letter-spacing: .08em; }
body .tow-actions button:first-child { background: var(--c-gold); border-color: transparent; color: var(--c-bg); }
body .tow-actions button:hover { filter: brightness(1.12); }
body .tow-actions button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* racer tags (hud.js RacerMarkers): a readable pill with the player's colour, an icon chevron. hud.js scales the tag with
   distance (0.7 .. 1.05); the base size keeps the far end at a legible ~13 px */
body .racer-marker { font: 800 19px var(--f-cond); letter-spacing: .06em; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
body .racer-marker .racer-name { display: inline-flex; align-items: center; gap: .4em; max-width: 12em; padding: .22em .75em .22em .55em; border-radius: var(--r-pill);
  background: rgba(8,10,14,.88); border: 2px solid var(--racer-color, #fff); box-shadow: none; color: #fff; text-transform: uppercase; line-height: 1.1; }
/* hud.js sizes .ai / .edge names in px at (0,3,0): restate at higher specificity so the tag size follows the marker */
body .racer-marker .racer-name, body .racer-marker.ai .racer-name, body .racer-marker.edge .racer-name { font-size: inherit; }
body .racer-marker .racer-name::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--racer-color, #fff); }
body .racer-marker.ai { font-size: 16px; }
body .racer-marker.ai .racer-name, body .racer-marker.ai.edge .racer-name { padding: .18em .6em .18em .45em; border-width: 1.5px; }
body .racer-marker.edge { font-size: 16px; }
body .racer-marker .racer-chevron { width: 1.2em; height: 1.2em; margin: .05em auto 0; font-size: inherit; color: transparent; background: var(--racer-color, #fff);
  -webkit-mask: url(../assets/icons/caret-down.svg) center / contain no-repeat; mask: url(../assets/icons/caret-down.svg) center / contain no-repeat; }
body .racer-marker.edge .racer-chevron { -webkit-mask-image: url(../assets/icons/caret-right.svg); mask-image: url(../assets/icons/caret-right.svg); }
/* the floating multiplayer button never shows over the loading or title screens */
#loading.open ~ #mp-toggle, body:not(.loaded) #mp-toggle, body[data-ui=title] #mp-toggle { display: none !important; }

/* The garage catalogue: a scrollable grid with one renderer shared by its thumbnails. */
.scr--catalog .scr__body { gap: var(--s-3); overflow: hidden; }
.catalog-toolbar { display: grid; grid-template-columns: minmax(10rem,1.4fr) repeat(4,minmax(8rem,1fr)); gap: .65rem; flex: none; }
.catalog-toolbar .field { display: block; padding: .45rem .7rem .55rem; min-height: 0; background: var(--hu-sheen), var(--hu-glass); border: 1px solid var(--hu-hair); border-radius: var(--r-3); }
.catalog-toolbar .field::before, .catalog-toolbar .field::after { display: none; }
.catalog-toolbar .field.focus { border-color: rgba(111,208,255,.6); }
.catalog-toolbar .select { width: 100%; min-height: 2.2rem; }
.catalog-toolbar .field__label { display: block; margin: 0 0 .3rem .3rem; font: 600 .68rem var(--f-cond); letter-spacing: .18em; color: var(--c-text-3); }
.catalog-toolbar .field__ctl { width: 100%; }
.catalog-search { display: flex; align-items: center; gap: .6rem; align-self: end; min-height: 2.9rem; background: var(--hu-sheen), var(--hu-glass); padding: 0 1rem; border: 1px solid var(--hu-hair); border-radius: var(--r-pill); color: var(--c-text-3); }
.catalog-search input { appearance: none; width: 100%; min-width: 0; border: 0; background: transparent; color: white; font: 500 .9rem var(--f-sans); letter-spacing: .06em; outline: none; }
.catalog-search input::placeholder { color: var(--c-text-3); }
.catalog-search:focus-within { border-color: transparent; box-shadow: var(--focus-ring); }
.car-grid { flex: 1; grid-auto-rows: max-content; display: grid; grid-template-columns: repeat(auto-fill,minmax(15rem,1fr)); align-content: start; gap: 1rem; padding: 6px 6px 1rem; margin-inline: -3px; min-height: 0; }
.car-group { grid-column: 1 / -1; display: flex; align-items: center; gap: .7rem; margin: .7rem 0 -.3rem; font: 600 var(--t-xs) var(--f-cond); letter-spacing: .22em; color: var(--hu-text-2); }
.car-group:first-child { margin-top: 0; }
.car-grid .car-card { scroll-margin-top: 2.4rem; } /* focusing a card keeps its class header in view */
.car-group span { color: var(--hu-text-3); letter-spacing: .1em; }
.car-group::after { content: ""; flex: 1; height: 1px; background: var(--hu-hair); }
.car-card .card__media { flex: none; min-height: 6rem; aspect-ratio: 2; background: #141b23; }
.car-card .card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, rgba(10,14,19,.65), transparent); pointer-events: none; }
.car-card .card__media img { width: 100%; height: 100%; object-fit: contain; }
.car-card .card__title { font-size: 1.05rem; }
.car-card .card__text { font-size: .7rem; }
.car-card .card__foot { justify-content: flex-start; font-size: .85rem; gap: .9rem; flex-wrap: wrap; }
.car-card .card__foot b { font-weight: 600; color: #fff; }
.car-card.off { opacity: .38; cursor: default; }
.car-description { color: var(--c-text-2); font: 500 .9rem/1.5 var(--f-sans); margin: 0; }
.car-transmission { color: var(--c-text-3); margin: .6rem 0 0; }
.car-stage__count { display: flex; flex-wrap: wrap; gap: .5rem; }
.car-decals { padding: 1rem 0; border-top: 1px solid var(--c-line); }
.car-decals .field { padding: .5rem 0; }
.car-decals .field__label { min-width: 4rem; }
.car-decals .car-paints__row { margin: .6rem 0; }
.decal-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0; }
.decal-layers { display: grid; gap: .25rem; }
.decal-layers .btn { justify-content: space-between; font-size: .75rem; white-space: normal; }
.scr--car .car-info { overflow-y: auto; }
@media (max-width: 900px) { .catalog-toolbar { grid-template-columns: repeat(4,minmax(0,1fr)); } .catalog-search { grid-column: 1 / -1; } }
@media (max-width: 560px) { .catalog-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; } .car-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; } .car-card .card__body { padding: .6rem; } .car-card .card__title { font-size: 1rem; } .car-card .card__text { font-size: .65rem; } .car-card .card__foot { font-size: .7rem; gap: .25rem; } }
@media (max-height: 500px) { .catalog-toolbar { grid-template-columns: minmax(8rem,1.2fr) repeat(4,minmax(0,1fr)); } .catalog-search { grid-column: auto; } .catalog-toolbar .field__label { display: none; } .car-grid { grid-template-columns: repeat(auto-fill,minmax(11rem,1fr)); } .scr--car .car-layout { align-items: stretch; } }

/* Binding-aware controls stay compact at race start, and can be expanded in pause. */
.driving-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; }
.driving-controls > span { display: inline-flex; align-items: center; gap: .4rem; }
.driving-controls b { font: 700 .7rem var(--f-cond); letter-spacing: .05em; color: #d2dbe5; }
.pause-controls { margin-top: .7rem; padding-top: .5rem; border-top: 1px solid var(--c-line); }
.pause-controls .driving-controls { padding: .5rem; }
.pause-card { max-height: 100%; overflow-y: auto; }
#drivingHints { position: fixed; z-index: 24; left: 50%; bottom: 1.5rem; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 3rem); display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; border: 1px solid var(--c-line-2); border-radius: var(--r-3); background: #0b1119ed; color: white; }
#drivingHints[hidden], #drivingTip[hidden] { display: none; }
#drivingTip { position: fixed; z-index: 24; bottom: 4.5rem; left: 50%; transform: translateX(-50%); width: min(34rem,calc(100vw - 2rem)); padding: .8rem 1rem; display: flex; align-items: center; gap: .7rem; border: 1px solid var(--c-line-2); border-left: 3px solid var(--c-cyan); border-radius: var(--r-2); background: #0b1119ed; color: white; font: 600 .85rem/1.4 var(--f-sans); }
#drivingTip .btn { flex: none; }
body.ui-open #drivingHints, body.ui-open #drivingTip { display: none; }
@media (max-width: 650px), (max-height: 500px) { #drivingHints { bottom: 8.7rem; max-width: calc(100vw - 1.5rem); padding: .5rem; } #drivingHints .driving-controls { gap: .3rem .6rem; } #drivingHints .driving-controls > span:last-child { display: none; } #drivingTip { bottom: 9rem; font-size: .8rem; } .driving-dismiss { padding-inline: .4rem; } }

/* The binding-aware strip replaces the legacy hardcoded driving footer. */
#keys { display: none; }
body.touch-driving #drivingHints { bottom: 8.7rem; }
body.touch-driving #drivingTip { bottom: 10rem; }
/* Condition appears only when the physics reports wear, heat, a stall or failure. */
body #engineHud { position: absolute; right: 0; top: -.7rem; display: flex; align-items: center; gap: .5rem; width: 12rem; padding: .55rem .65rem .8rem; border: 1px solid #ffd06480; border-radius: var(--r-2); background: #0b1119ed; color: #ffd064; font: 800 .7rem var(--f-cond); letter-spacing: .05em; overflow: hidden; }
body #engineHud[hidden] { display: none; }
body #engineHud[data-tone=bad] { color: #ff7e74; border-color: #ff7e7480; }
#engineHud b,#engineHud small { display: block; }
#engineHud small { margin-top: .2rem; color: #e4ebf3; letter-spacing: .02em; font-size: .65rem; }
#engineHud > i { position: absolute; bottom: 0; left: 0; height: 3px; width: calc(var(--health)*100%); background: currentColor; }
.car-actions { display: grid; gap: .5rem; }

/* The limit sign sits beside the dial (the gear and mode live on the cluster itself). */
body #limitSign { left: calc(-2.625rem - 42px); bottom: calc(16px + 3.9rem - 32px); width: 60px; height: 60px; border-width: 7.5px; }

@media(max-width:500px) { body.touch-driving #hud #dialBox { bottom: calc(208px + env(safe-area-inset-bottom)); } }

/* Keep district captions inside the touch minimap's bottom-left cut corner. */
body.touch-driving #hud #mapLabel { left: 18px; right: 4px; bottom: 12px; padding: 2px 0; font-size: 9px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.car-stage { touch-action: none; cursor: grab; }
.car-stage.dragging { cursor: grabbing; }
.car-stage__hint { position: absolute; left: 1rem; bottom: 1rem; pointer-events: none; color: var(--c-text-3); font: 600 .7rem var(--f-cond); letter-spacing: .16em; }

#race-settings { position: fixed; right: 12px; top: 14px; z-index: 48; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 10px; color: white; background: #151d27; border: 1px solid #ffffff55; border-radius: 6px; font: 800 12px var(--f-cond); cursor: pointer; }
#race-settings .ico { width: 18px; height: 18px; }
#race-settings:focus-visible { outline: 2px solid #ffc21a; }
body:not(.racing):not(.counting) #race-settings,body.ui-open #race-settings,body:has(#multiplayer:not([hidden])) #race-settings { display: none; }
body #mp-toggle { right: 118px; top: 14px; }
body.racing #hud #routeBox { right: 285px; }
@media(max-width:700px),(max-height:480px) { #race-settings,body #mp-toggle { top: 76px; } }
@media(max-width:700px) { body.racing #hud #routeBox { top: 128px; right: 16px; } }


body[data-mode="taxi"] #hud #routeBox,body[data-mode="getaway"] #hud #routeBox { display: none; }
#evBox:has(.objective-card) { top: 22px; left: 320px; right: auto; width: 320px; transform: none; padding: 0; background: none; clip-path: none; text-align: left; }
.objective-card { color: white; background: #0b131eee; border: 1px solid #ffffff25; border-left: 3px solid #ffc21a; border-radius: 7px; padding: 12px; font-family: var(--f-cond); }
.objective-card[data-phase="dropoff"] { border-left-color: #62e9bf; }
.objective-card header { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: #ffc21a; }
.objective-card header strong { margin-left: auto; color: white; font-size: 20px; font-variant-numeric: tabular-nums; }
.objective-card header small { color: #94a8b9; font-size: 11px; }
.objective-body { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; margin: 8px 0; }
.objective-arrow { color: #ffc21a; background: #ffc21a12; border-radius: 6px; padding: 5px; }
.objective-card[data-phase="dropoff"] .objective-arrow { color: #62e9bf; }
.objective-arrow svg { display: block; width: 32px; height: 32px; }
.objective-distance { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.objective-body h3 { font-size: 16px; line-height: 1.1; margin: 4px 0; }
.objective-body p { color: #b3c4d2; font-size: 12px; margin: 0; }
.objective-card footer { color: #d0dde6; font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.objective-hold { height: 4px; margin-top: 8px; background: #ffffff18; }
.objective-hold i { display: block; height: 100%; background: #62e9bf; }
@media(max-height:480px) { #evBox:has(.objective-card) { top: 8px; left: 228px; width: 300px; } .objective-card { padding: 8px; } }
@media(max-width:500px) { #evBox:has(.objective-card) { top: 128px; left: 122px; width: calc(100vw - 134px); } .objective-card { padding: 9px; } .objective-card header { gap: 6px; font-size: 11px; } .objective-card header small { display: none; } .objective-body h3 { font-size: 14px; } body[data-mode="taxi"] #input-toast,body[data-mode="getaway"] #input-toast { top: 316px; } }

/* Every detached race widget follows the same menu visibility policy as the main HUD. */
body.ui-open :is(#hud,#driving-feedback,#mp-board,#racer-markers,#drivingHints,#drivingTip,#tow-prompt,#police-hud),
body:has(#multiplayer:not([hidden])) :is(#hud,#driving-feedback,#mp-board,#racer-markers,#drivingHints,#drivingTip,#tow-prompt,#police-hud),
body:has(#loading.open) :is(#hud,#driving-feedback,#mp-board,#racer-markers,#drivingHints,#drivingTip,#tow-prompt,#police-hud) { visibility: hidden !important; pointer-events: none !important; }

#checkpoint-banner{position:absolute;top:94px;left:50%;transform:translateX(-50%);width:330px;padding:9px 14px;background:#311d16ed;border-left:3px solid #ffb277;box-sizing:border-box;color:#fff;font-family:var(--font-ui,sans-serif);pointer-events:none}
#checkpoint-banner b{display:block;font-size:16px;letter-spacing:.08em;color:#ffb277}#checkpoint-banner span{font-size:11px;letter-spacing:.07em}#checkpoint-banner[hidden]{display:none}
@media(max-height:480px){#checkpoint-banner{left:228px;top:82px;transform:none;width:300px;padding:7px 10px}}
@media(max-width:500px){#checkpoint-banner{left:122px;top:140px;transform:none;width:calc(100vw - 134px)}body[data-mode=taxi] #checkpoint-banner,body[data-mode=getaway] #checkpoint-banner{top:290px}#checkpoint-banner b{font-size:14px}}


.graphics-live-note{font:500 var(--t-xs)/1.5 var(--f-sans);color:var(--c-text-3);margin:var(--s-2) var(--s-4) 0}.graphics-quality .seg{flex-wrap:wrap}#render-resolution,#pixel-ratio-cap{display:none!important}

/* Settings → Driver: the local name, edited like a car's profile name (it is also the plate) */
#driver-name { display: block; box-sizing: border-box; width: min(100%, 26rem); min-height: 3.2rem; padding: 0 1.1rem; margin: .4rem var(--s-4) .6rem; border: 1px solid var(--hu-hair-2); border-radius: var(--r-3); background: rgba(0,0,0,.35); color: #fff; font: 500 1.35rem var(--f-cond); letter-spacing: .24em; text-transform: uppercase; outline: none; transition: border-color var(--dur), box-shadow var(--dur); }
#driver-name:focus { border-color: rgba(111,208,255,.8); box-shadow: 0 0 0 4px rgba(111,208,255,.14); }
label.group__note { display: block; }
.set-panel .group > .option { margin: var(--s-2) var(--s-4) 0; width: min(100% - 2rem, 26rem); }