/* ATHENS STREET RACERS UI kit: the "head unit" design language (design spec: the in-car infotainment / cluster screens).
   Design tokens + components; src/ui/components.js builds the markup, src/menu.css lays out the menu screens.
   Sizes are rem so the whole UI scales with the viewport (html font-size below); the race HUD (style.css) stays px.
   Palette: piano-black glass, cool blue-grey type, ONE ambient accent (ice) for focus / selection / fills.
   Red is a warning colour (redline, destructive) and the brand mark; the primary action is a lit ice-white pill. */
:root {
  /* head-unit palette */
  --hu-bezel: #030507; --hu-screen: #070a0e;
  --hu-glass: rgba(15, 20, 27, .68); --hu-glass-hi: rgba(30, 39, 50, .8); --hu-glass-solid: rgba(12, 16, 22, .94);
  --hu-blur: blur(22px) saturate(1.4);
  --hu-hair: rgba(190, 215, 235, .10); --hu-hair-2: rgba(190, 215, 235, .2);
  --hu-sheen: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 34%);
  --hu-text: #f1f5f8; --hu-text-2: #a9b6c1; --hu-text-3: #6c7a87; --hu-text-4: #47535e;
  --hu-ice: #6fd0ff; --hu-ice-d: #2b8fd8; --hu-ice-glow: rgba(111, 208, 255, .32); --hu-ice-tint: rgba(111, 208, 255, .13);
  --hu-red: #ff3b2f;
  --hu-lit: linear-gradient(180deg, #fff, #dce6ed); --hu-lit-fg: #061018;
  --tt-red: #ff453a; --tt-amber: #ffb21a; --tt-green: #38e07b; --tt-blue: #4a9dff; --tt-white: #e8eef2; --hud: #bff4ff;
  --hu-shadow: 0 1.2rem 3rem rgba(0,0,0,.45);
  --hu-edge: inset 0 1px 0 rgba(255,255,255,.06);
  /* legacy names, used across modules: mapped onto the head-unit palette so every panel speaks the same language */
  --c-bg: #05070a; --c-bg-2: #0a0e13;
  --c-surface: var(--hu-glass-solid); --c-surface-2: rgba(22, 29, 37, .9); --c-surface-3: rgba(255,255,255,.07); --c-surface-hi: rgba(255,255,255,.12);
  --c-line: var(--hu-hair); --c-line-2: var(--hu-hair-2);
  --c-text: var(--hu-text); --c-text-2: var(--hu-text-2); --c-text-3: var(--hu-text-3); --c-text-4: var(--hu-text-4);
  --c-accent: var(--hu-ice); --c-accent-hi: #9adfff; --c-accent-lo: var(--hu-ice-d); --c-accent-tint: var(--hu-ice-tint);
  --c-cyan: var(--hu-ice); --c-gold: #ffc94a; --c-good: var(--tt-green); --c-bad: #ff6b61; --c-warn: var(--tt-amber);
  --c-scrim: rgba(3, 5, 7, .8);
  /* spacing (4-pt) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  /* type: Barlow for text and titles, Barlow Condensed for captions, values and keys. Upright, light, evenly tracked. */
  --f-cond: "Barlow Condensed", "Arial Narrow", sans-serif; --f-sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --t-2xs: .6875rem; --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: 2.5rem;
  --t-display: clamp(2.6rem, 3.6rem, 10vw);
  --track-caps: .16em; --track-kick: .2em;
  /* shape */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 18px; --r-pill: 999px;
  --notch: 0px;
  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1); --dur: .18s;
  /* focus: the ambient edge light */
  --focus-ring: 0 0 0 1.5px var(--hu-ice), 0 0 0 5px rgba(111,208,255,.16);
  --pad-screen-x: clamp(1rem, 4.6vw, 6rem); --pad-screen-y: clamp(.5rem, 2.4vh, 2rem);
}
/* 1rem: 14px at 1280x720, 19px at 1920x1080, 22px at 2560x1440, 12px on phones */
html { font-size: clamp(12px, calc(5px + .6vmin + .4vw), 22px); }

.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; fill: currentColor; }
.ico--lg { width: 1.6em; height: 1.6em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* glass: the one surface recipe (panels, tiles, rows over the 3D scene) */
.glass { 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); }

/* ---------------------------------------------------------------- typography helpers */
.kick { font-family: var(--f-cond); font-weight: 600; letter-spacing: var(--track-kick); font-size: var(--t-xs); color: var(--c-text-3); text-transform: uppercase; }
.kick em, .kick .acc { font-style: normal; color: var(--c-accent); }
.label { font-family: var(--f-cond); font-weight: 600; letter-spacing: var(--track-caps); font-size: var(--t-xs); color: var(--c-text-3); text-transform: uppercase; }
.title-xl { margin: 0; font-family: var(--f-sans); font-weight: 400; font-size: var(--t-3xl); line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.muted { color: var(--c-text-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- button: pills. primary = the lit ice-white pill */
.btn { --btn-bg: rgba(255,255,255,.07); --btn-fg: var(--c-text); --btn-bd: var(--hu-hair-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 2.75rem; padding: 0 var(--s-5);
  font-family: var(--f-cond); font-weight: 600; font-size: var(--t-md); letter-spacing: .14em; line-height: 1; text-transform: uppercase; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: var(--r-pill); cursor: pointer; user-select: none;
  transition: background var(--dur), color var(--dur), box-shadow var(--dur), border-color var(--dur), transform var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; }
.btn .ico { width: 1.1em; height: 1.1em; }
.btn--primary { --btn-bg: var(--hu-lit); --btn-fg: var(--hu-lit-fg); --btn-bd: transparent; font-weight: 700; box-shadow: 0 .4rem 1.6rem rgba(111,208,255,.18); }
.btn--secondary { --btn-bg: rgba(255,255,255,.07); --btn-bd: var(--hu-hair-2); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-text-2); --btn-bd: transparent; }
.btn--sm { min-height: 2.25rem; padding: 0 var(--s-4); font-size: var(--t-sm); }
.btn--lg { min-height: 3.25rem; padding: 0 var(--s-6); font-size: var(--t-lg); letter-spacing: .18em; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 2.75rem; }
.btn--icon.btn--sm { width: 2.25rem; }
.btn:hover { --btn-bg: rgba(255,255,255,.13); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: linear-gradient(180deg, #fff, #eaf3f8); --btn-fg: var(--hu-lit-fg); }
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.07); }
.btn.focus, .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); --btn-bd: transparent; }
.btn--primary.focus, .btn--primary:focus-visible { box-shadow: var(--focus-ring), 0 .5rem 2rem rgba(111,208,255,.35); }
.btn:active { transform: scale(.98); }
.btn.off, .btn:disabled, .btn[aria-disabled=true] { opacity: .38; pointer-events: none; }
.btn__sub { font-family: var(--f-cond); font-style: normal; font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--track-caps); color: inherit; opacity: .7; }

/* app-icon plate: the rounded square behind every option / tile icon */
.option__ico, .mode-tile__ico, .modal__ico { display: grid; place-items: center; border-radius: 30%; color: var(--c-text);
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px var(--hu-hair-2), inset 0 1px 0 rgba(255,255,255,.1); transition: background var(--dur), color var(--dur), box-shadow var(--dur); }

/* the big menu option: a glass row with an app icon, a title and a description */
.option { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3); min-height: 3.75rem;
  background: rgba(255,255,255,.035); border: 1px solid transparent; border-radius: var(--r-3); cursor: pointer; transition: background var(--dur), border-color var(--dur), box-shadow var(--dur); }
.option__ico { width: 2.6rem; height: 2.6rem; }
.option__ico .ico { width: 1.3rem; height: 1.3rem; }
.option__title { display: block; font-family: var(--f-sans); font-weight: 600; font-size: var(--t-lg); line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; }
.option__desc { display: block; margin-top: .2rem; font-family: var(--f-sans); font-weight: 500; font-size: var(--t-sm); color: var(--c-text-3); }
.option__go { color: var(--c-text-4); transition: transform var(--dur) var(--ease), color var(--dur); }
.option:hover { background: rgba(255,255,255,.07); }
.option.focus { background: linear-gradient(90deg, rgba(111,208,255,.16), rgba(111,208,255,.03)), var(--hu-glass-hi); border-color: rgba(111,208,255,.55); box-shadow: 0 0 0 4px rgba(111,208,255,.1), var(--hu-shadow); }
.option.focus .option__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); }
.option.focus .option__desc { color: var(--c-text-2); }
.option.focus .option__go { color: #fff; transform: translateX(3px); }
.option.off { opacity: .38; pointer-events: none; }

/* ---------------------------------------------------------------- panel / card */
.panel { position: relative; background: var(--hu-sheen), var(--hu-glass); -webkit-backdrop-filter: var(--hu-blur); backdrop-filter: var(--hu-blur); border: 1px solid var(--hu-hair); border-radius: var(--r-4);
  box-shadow: var(--hu-shadow), var(--hu-edge); padding: var(--s-5); min-width: 0; }
.panel--notch { }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-3); }
.panel__title { margin: 0; display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--track-kick); color: var(--c-text-3); text-transform: uppercase; }
.panel__title .ico { color: var(--c-text-2); }

.card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--hu-sheen), rgba(18, 24, 32, .78); border: 1px solid var(--hu-hair); border-radius: var(--r-4); overflow: hidden; cursor: pointer;
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.35), var(--hu-edge); transition: transform .22s var(--ease), box-shadow .22s, border-color .22s, background .22s; }
.card__media { position: relative; aspect-ratio: 5 / 3; background: radial-gradient(90% 80% at 50% 70%, #2a3540, #0e141a 80%); overflow: hidden; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.card__badge { position: absolute; top: var(--s-3); right: var(--s-3); }
.card__body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4) var(--s-4); flex: 1; }
.card__title { margin: 0; font-family: var(--f-sans); font-weight: 600; font-size: var(--t-lg); line-height: 1.15; letter-spacing: .03em; }
.card__text { margin: 0; font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--track-caps); color: var(--c-text-3); text-transform: uppercase; }
.card__foot { margin-top: auto; padding-top: var(--s-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-family: var(--f-cond); font-weight: 600; font-size: var(--t-sm); letter-spacing: .06em; color: var(--c-text-2); }
.card:hover { border-color: var(--hu-hair-2); background: var(--hu-sheen), rgba(28, 36, 46, .82); }
.card.focus { border-color: rgba(111,208,255,.8); box-shadow: 0 0 0 4px rgba(111,208,255,.14), 0 1.2rem 2.6rem rgba(0,0,0,.5); }
.card::after { content: ""; position: absolute; left: 50%; bottom: .4rem; width: 1.6rem; height: 3px; margin-left: -.8rem; border-radius: 3px; background: var(--hu-ice); box-shadow: 0 0 8px var(--hu-ice);
  opacity: 0; transform: scaleX(.2); transition: opacity var(--dur) var(--ease), transform .24s var(--ease); pointer-events: none; }
.card.selected::after { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- badge / chip / keycap */
.badge { display: inline-flex; align-items: center; gap: .35em; padding: .3em .7em; border-radius: var(--r-pill); font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--track-caps); line-height: 1.1;
  background: rgba(255,255,255,.09); color: var(--c-text-2); text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--hu-hair); }
.badge--accent { background: var(--hu-ice-tint); color: var(--hu-ice); } .badge--gold { background: rgba(255,201,74,.14); color: var(--c-gold); }
.badge--cyan { background: var(--hu-ice-tint); color: var(--hu-ice); } .badge--warn { background: rgba(255,178,26,.14); color: var(--c-warn); }
.badge--dark { background: rgba(3,5,7,.72); color: var(--c-text-2); }
.t-sprint { color: var(--c-accent); } .t-timetrial { color: var(--c-cyan); } .t-pursuit { color: var(--c-gold); }

.kbd { display: inline-flex; align-items: center; justify-content: center; gap: .2em; min-width: 1.75em; height: 1.75em; padding: 0 .45em; border-radius: .45em;
  font-family: var(--f-cond); font-weight: 700; font-size: var(--t-sm); letter-spacing: .04em; line-height: 1; font-style: normal;
  color: var(--c-text); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px var(--hu-hair-2), inset 0 -1px 0 rgba(0,0,0,.4); white-space: nowrap; }
.kbd .ico { width: 1em; height: 1em; }
.kbd--pad { border-radius: var(--r-pill); min-width: 1.75em; padding: 0 .4em; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.kbd--pad.pa { background: transparent; box-shadow: inset 0 0 0 1.5px #3ddc84; color: #3ddc84; } .kbd--pad.pb { background: transparent; box-shadow: inset 0 0 0 1.5px #ff6b61; color: #ff6b61; }
.kbd--pad.px { background: transparent; box-shadow: inset 0 0 0 1.5px #4a9dff; color: #4a9dff; } .kbd--pad.py { background: transparent; box-shadow: inset 0 0 0 1.5px #ffc94a; color: #ffc94a; }
.kbd--empty { color: var(--c-text-4); background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-2); }

/* key hints (the soft-key bar): device-aware (body[data-input] = keyboard | gamepad | touch) */
.hints { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-6); font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--track-caps); color: var(--c-text-3); text-transform: uppercase; }
.hint { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.hint__keys { display: inline-flex; gap: .2em; }
.hint .kbd { font-size: var(--t-xs); }
.hint .on-pad { display: none; }
body[data-input=gamepad] .hint .on-key { display: none; } body[data-input=gamepad] .hint .on-pad { display: inline-flex; }
body[data-input=gamepad] .hint.no-pad { display: none; }
body[data-input=touch] .hints { visibility: hidden; }

/* ---------------------------------------------------------------- form fields (a list row: label left, control right) */
.field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; gap: var(--s-1) var(--s-5); min-height: 3.4rem; padding: var(--s-2) var(--s-4);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-2); cursor: pointer; transition: background var(--dur), border-color var(--dur), box-shadow var(--dur); }
.field + .field::before { content: ""; position: absolute; left: var(--s-4); right: var(--s-4); top: -2px; height: 1px; background: var(--hu-hair); pointer-events: none; }
.field + .field { margin-top: 2px; }
.field.focus::before, .field.focus + .field::before { opacity: 0; }
.field__label { display: flex; align-items: center; gap: var(--s-3); min-width: 0; font-family: var(--f-sans); font-weight: 500; font-size: var(--t-md); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text); }
.field__label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field__label .ico { color: var(--c-text-3); }
.field__note { grid-column: 1 / -1; margin-top: -.1rem; font-family: var(--f-sans); font-weight: 500; font-size: var(--t-xs); letter-spacing: .02em; color: var(--c-text-3); text-transform: none; }
.field__note.warn { color: var(--c-warn); }
.field__note .ico { vertical-align: -.15em; }
.field__ctl { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.field:hover { background: rgba(255,255,255,.04); }
.field.focus { background: linear-gradient(90deg, rgba(111,208,255,.15), rgba(111,208,255,.03)); border-color: rgba(111,208,255,.5); }
.field::after { content: ""; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--hu-ice); box-shadow: 0 0 10px var(--hu-ice);
  opacity: 0; transform: scaleY(.3); transition: opacity var(--dur) var(--ease), transform .22s var(--ease); pointer-events: none; }
.field.focus::after { opacity: 1; transform: none; }
.field.focus .field__label .ico { color: var(--hu-ice); }
.field.locked { opacity: .42; pointer-events: none; }
.field--stack { grid-template-columns: 1fr; }
.field--stack .field__ctl { justify-content: stretch; }
.group + .group { margin-top: var(--s-5); }
.group__title { margin: 0 0 var(--s-2); padding: 0 var(--s-4); display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--track-kick); color: var(--c-text-3); text-transform: uppercase; }
.group__title .ico { color: var(--c-text-3); }

/* ---------------------------------------------------------------- slider (custom track / thumb / value) */
.slider { --v: 0.5; display: flex; align-items: center; gap: var(--s-4); width: clamp(9rem, 24vw, 19rem); touch-action: none; cursor: pointer; outline: none; }
.slider__track { position: relative; flex: 1; height: 2rem; }
.slider__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(255,255,255,.14); }
.slider__fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: calc(var(--v) * 100%); border-radius: 4px; background: linear-gradient(90deg, var(--hu-ice-d), var(--hu-ice)); box-shadow: 0 0 10px rgba(111,208,255,.45); }
.slider__thumb { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 1.25rem; height: 1.25rem; margin: -.625rem 0 0 -.625rem; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.6); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.slider__val { min-width: 3.2em; text-align: right; font-family: var(--f-cond); font-weight: 600; font-size: var(--t-lg); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--c-text); }
.focus .slider__thumb, .slider:focus-visible .slider__thumb, .slider.dragging .slider__thumb { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(111,208,255,.25), 0 2px 8px rgba(0,0,0,.6); }
.slider:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-2); }

/* ---------------------------------------------------------------- toggle / switch */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; outline: none; }
.switch__track { position: relative; width: 3.1rem; height: 1.75rem; border-radius: var(--r-pill); background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px var(--hu-hair); transition: background var(--dur), box-shadow var(--dur); flex: none; }
.switch__knob { position: absolute; top: .2rem; left: .2rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: transform .22s var(--ease); }
.switch__txt { min-width: 2.4em; font-family: var(--f-cond); font-weight: 600; font-size: var(--t-sm); letter-spacing: var(--track-caps); color: var(--c-text-3); }
.switch.on .switch__track { background: linear-gradient(180deg, var(--hu-ice), var(--hu-ice-d)); box-shadow: 0 0 12px rgba(111,208,255,.35); }
.switch.on .switch__knob { transform: translateX(1.35rem); }
.switch.on .switch__txt { color: var(--c-text); }
.switch:focus-visible .switch__track { box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------- segmented control (pill group; the choice is lit white) */
.seg { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px var(--hu-hair); max-width: 100%; }
.seg__opt { display: inline-flex; align-items: center; gap: .35em; min-height: 2.15rem; padding: 0 var(--s-4); border-radius: var(--r-pill); font-family: var(--f-cond); font-weight: 600; font-size: var(--t-sm); letter-spacing: .14em;
  color: var(--c-text-3); cursor: pointer; white-space: nowrap; text-transform: uppercase; transition: background var(--dur), color var(--dur), box-shadow var(--dur); }
.seg { position: relative; isolation: isolate; }
.seg__opt { position: relative; z-index: 1; }
@media (hover: hover) { .seg__opt:not(.on):hover { color: #fff; } }
.seg__opt.on { color: var(--hu-lit-fg); }
/* selection: one lit pill slides to the chosen option (components.js indicators) */
.sel-ind { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; opacity: 0; pointer-events: none; border-radius: var(--r-pill);
  transition: transform .28s var(--ease), width .28s var(--ease), height .28s var(--ease), opacity .18s, background var(--dur), box-shadow var(--dur); }
.seg > .sel-ind { background: var(--hu-lit); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.focus .seg > .sel-ind { box-shadow: 0 0 0 1.5px var(--hu-ice), 0 0 14px rgba(111,208,255,.35); }
.seg__opt .ico { width: 1em; height: 1em; }
.seg__opt.dflt::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; margin-left: .15em; }

/* ---------------------------------------------------------------- stepper  (‹ value ›) */
.stepper { display: inline-flex; align-items: center; gap: var(--s-1); padding: 3px; border-radius: var(--r-pill); background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px var(--hu-hair); }
.stepper__btn { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--c-text-2); cursor: pointer; transition: background var(--dur), color var(--dur); }
.stepper__btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.stepper__btn.off { opacity: .25; pointer-events: none; }
.stepper__val { min-width: 6.5rem; padding: 0 var(--s-2); text-align: center; font-family: var(--f-cond); font-weight: 600; font-size: var(--t-lg); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; text-transform: uppercase; }
.focus .stepper__btn { background: var(--hu-ice-tint); color: var(--hu-ice); }

/* ---------------------------------------------------------------- select (custom dropdown) */
.select { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-width: 11rem; max-width: 100%; min-height: 2.5rem; padding: 0 var(--s-3) 0 var(--s-4);
  border-radius: var(--r-pill); background: rgba(0,0,0,.32); border: 1px solid var(--hu-hair-2); font-family: var(--f-cond); font-weight: 600; font-size: var(--t-sm); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; outline: none; color: #fff; }
.select__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select .ico { color: var(--c-text-3); transition: transform var(--dur); }
.select.open .ico { transform: rotate(180deg); }
.focus .select, .select:focus-visible { border-color: rgba(111,208,255,.7); }
.select:focus-visible { box-shadow: var(--focus-ring); }
.listbox { position: fixed; z-index: 140; min-width: 10rem; max-height: min(22rem, 60vh); overflow-y: auto; padding: var(--s-1); border-radius: var(--r-3);
  background: var(--hu-sheen), rgba(14, 19, 26, .96); -webkit-backdrop-filter: var(--hu-blur); backdrop-filter: var(--hu-blur); border: 1px solid var(--hu-hair-2); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.6);
  font-family: var(--f-cond); font-weight: 600; font-size: var(--t-sm); letter-spacing: .12em; color: var(--c-text-2); text-transform: uppercase; animation: ui-pop .16s var(--ease) both; }
.listbox__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 2.4rem; padding: 0 var(--s-3); border-radius: var(--r-2); cursor: pointer; white-space: nowrap; }
.listbox__opt .ico { visibility: hidden; color: var(--hu-ice); }
.listbox__opt.sel { color: #fff; }
.listbox__opt.sel .ico { visibility: visible; }
.listbox__opt.hi { background: var(--hu-ice-tint); color: #fff; box-shadow: inset 0 0 0 1px rgba(111,208,255,.45); }
.listbox__opt.dis { opacity: .35; pointer-events: none; }
.listbox.is-closing { animation: ui-fold .14s var(--ease) both; }
@keyframes ui-fold { to { opacity: 0; } }
.listbox__opt { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
ui-select { display: inline-flex; } ui-select > option { display: none; }
ui-select.off { opacity: .45; pointer-events: none; }

/* ---------------------------------------------------------------- text field */
.textfield, .ui-text { box-sizing: border-box; width: 100%; min-height: 2.75rem; padding: 0 var(--s-4); border-radius: var(--r-2); border: 1px solid var(--hu-hair-2); background: rgba(0,0,0,.35); color: #fff;
  font: 500 var(--t-md) var(--f-sans); letter-spacing: .04em; outline: none; transition: border-color var(--dur), box-shadow var(--dur); appearance: none; -webkit-appearance: none; }
.textfield::placeholder, .ui-text::placeholder { color: var(--c-text-4); }
.textfield:focus, .ui-text:focus { border-color: rgba(111,208,255,.8); box-shadow: 0 0 0 4px rgba(111,208,255,.14); }

/* ---------------------------------------------------------------- tabs (a pill bar; menu.css turns Settings' into a rail) */
.tabs { display: flex; gap: var(--s-1); padding: 3px; border-radius: var(--r-pill); background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px var(--hu-hair); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.4rem; padding: 0 var(--s-4); border-radius: var(--r-pill); font-family: var(--f-sans); font-weight: 600; font-size: var(--t-sm); letter-spacing: .08em;
  color: var(--c-text-3); cursor: pointer; white-space: nowrap; text-transform: uppercase; transition: background var(--dur), color var(--dur); }
@media (hover: hover) { .tab:not(.on):hover { color: var(--c-text); } }
.tab.on { color: #fff; }
.tabs { position: relative; isolation: isolate; } .tab { z-index: 1; }
.tabs > .sel-ind { background: rgba(255,255,255,.1); }
.tabs.focus > .sel-ind { background: var(--hu-ice-tint); }
.tab.on .ico { color: var(--hu-ice); }
.tabs.focus { box-shadow: inset 0 0 0 1px rgba(111,208,255,.6), 0 0 0 4px rgba(111,208,255,.12); }
.tabs__hint { display: inline-flex; align-items: center; color: var(--c-text-4); padding: 0 var(--s-1); }
body[data-input=touch] .tabs__hint, body[data-input=keyboard] .tabs__hint.on-pad, body:not([data-input]) .tabs__hint.on-pad, body[data-input=gamepad] .tabs__hint.on-key { display: none; }

/* ---------------------------------------------------------------- stat tile (a cluster readout) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s-2); }
.stat-tile { display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: var(--s-3) var(--s-4); background: rgba(255,255,255,.04); border-radius: var(--r-3); box-shadow: inset 0 0 0 1px var(--hu-hair); }
.stat-tile__k { display: flex; align-items: center; gap: .4em; font-family: var(--f-cond); font-weight: 600; font-size: var(--t-2xs); letter-spacing: var(--track-caps); color: var(--c-text-3); text-transform: uppercase; white-space: nowrap; }
.stat-tile__v { font-family: var(--f-sans); font-weight: 400; font-size: var(--t-xl); line-height: 1.05; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.stat-tile--hi .stat-tile__v { color: var(--c-gold); }
.stat-tile--good .stat-tile__v { color: var(--c-good); } .stat-tile--bad .stat-tile__v { color: var(--c-bad); }
.stat-tile--accent { box-shadow: inset 0 0 0 1px rgba(111,208,255,.4); }

/* ---------------------------------------------------------------- medal */
.medal { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 50%; vertical-align: middle; flex: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 2px rgba(0,0,0,.35); }
.medal.gold { background: radial-gradient(circle at 35% 30%, #fff6c4, #ffc21a 45%, #c58a00); }
.medal.silver { background: radial-gradient(circle at 35% 30%, #fff, #c9d1da 45%, #7d8794); }
.medal.bronze { background: radial-gradient(circle at 35% 30%, #ffe0c2, #d0813f 45%, #8a4b1b); }
.medal.none { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px rgba(255,255,255,.16); }
.medal.big { width: 2.6rem; height: 2.6rem; }

/* ---------------------------------------------------------------- progress / spinner */
.progress { position: relative; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.progress__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: 3px; background: linear-gradient(90deg, var(--hu-ice-d), var(--hu-ice)); box-shadow: 0 0 10px var(--hu-ice); transition: width .35s var(--ease); }
.progress--indeterminate .progress__fill { width: 35%; animation: ui-indet 1.1s ease-in-out infinite; }
@keyframes ui-indet { from { left: -35%; } to { left: 100%; } }
.spinner { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.16); border-top-color: var(--hu-ice); animation: ui-spin .8s linear infinite; flex: none; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- modal / prompt: a glass sheet */
#ui-layer { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.modal-scrim { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-4); background: rgba(3,5,7,.55); pointer-events: auto; animation: ui-fade .18s ease both; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal { width: min(30rem, 100%); max-height: calc(100% - 2rem); overflow-y: auto; padding: var(--s-5); border-radius: var(--r-4);
  background: var(--hu-sheen), rgba(14, 19, 26, .9); -webkit-backdrop-filter: var(--hu-blur); backdrop-filter: var(--hu-blur); border: 1px solid var(--hu-hair-2);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.6), var(--hu-edge); animation: ui-pop .24s var(--ease) both; font-family: var(--f-sans); color: #fff; }
.modal__head { display: flex; align-items: center; gap: var(--s-3); }
.modal__ico { width: 2.75rem; height: 2.75rem; flex: none; }
.modal__ico .ico { width: 1.4rem; height: 1.4rem; }
.modal__title { margin: 0; font-weight: 500; font-size: var(--t-xl); line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; }
.modal__body { margin: var(--s-3) 0 0; font-family: var(--f-sans); font-weight: 500; font-size: var(--t-md); line-height: 1.5; color: var(--c-text-2); }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-5); }
.modal__actions .btn { flex: 1 1 auto; }
.modal__foot { margin-top: var(--s-3); }
.modal__foot .hints { justify-content: flex-end; font-size: var(--t-2xs); }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-pop { from { opacity: 0; } } /* panels and dialogs fade in place: no scale-in, no bounce */

/* ---------------------------------------------------------------- toast (menus: an infotainment notification pill) */
.toasts { position: fixed; z-index: 160; top: max(1rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: grid; gap: var(--s-2); justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 2rem); }
.toast { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2); border-radius: var(--r-pill);
  background: var(--hu-sheen), rgba(14, 19, 26, .92); -webkit-backdrop-filter: var(--hu-blur); backdrop-filter: var(--hu-blur); border: 1px solid var(--hu-hair-2);
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.5); font-family: var(--f-sans); font-weight: 500; font-size: var(--t-sm); letter-spacing: .06em; color: #fff; text-transform: uppercase; animation: ui-toast .25s var(--ease) both; }
.toast .ico { width: 1.9rem; height: 1.9rem; padding: .4rem; border-radius: 50%; background: var(--hu-ice-tint); color: var(--hu-ice); box-sizing: border-box; }
.toast--good .ico { background: rgba(56,224,123,.14); color: var(--tt-green); }
.toast--bad .ico { background: rgba(255,69,58,.14); color: var(--tt-red); }
.toast.out { animation: ui-toast-out .3s ease both; }
@keyframes ui-toast { from { opacity: 0; transform: translateY(-10px); } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateY(-10px); } }

/* ---------------------------------------------------------------- scroll areas */
.scroll-y { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
/* focus scrolls an item in with room for its 4px ring, so a scroll container never cuts the ring or border */
:where(.scroll-y, .scroll-x, .mode-grid, .scr__body) .mi { scroll-margin: 8px; }
.scroll-y::-webkit-scrollbar, .scroll-x::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-y::-webkit-scrollbar-thumb, .scroll-x::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.scroll-x { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }

/* native controls hidden behind an enhanced component (kept for state + accessibility) */
.ui-native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; overflow: hidden !important; margin: 0 !important; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------------------------------------------------------------- list row / chip / text field */
.list-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); min-height: 3.4rem; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-3); background: rgba(255,255,255,.035); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); }
.list-row:not(:has(.list-row__ico)) { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (hover: hover) { .list-row:hover { background: rgba(255,255,255,.06); } }
.list-row.focus { background: linear-gradient(90deg, rgba(111,208,255,.15), rgba(111,208,255,.03)); border-color: rgba(111,208,255,.5); }
.list-row::after { content: ""; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--hu-ice); box-shadow: 0 0 10px var(--hu-ice);
  opacity: 0; transform: scaleY(.3); transition: opacity var(--dur) var(--ease), transform .22s var(--ease); pointer-events: none; }
.list-row.focus::after { opacity: 1; transform: none; }
.list-row.off { opacity: .45; pointer-events: none; }
.list-row__ico .ico { width: 1.2rem; height: 1.2rem; color: var(--c-text-3); }
.list-row.focus .list-row__ico .ico { color: var(--hu-ice); }
.list-row__main { min-width: 0; display: grid; gap: .15rem; }
.list-row__main b { font: 500 var(--t-lg) var(--f-sans); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__main span { font: 500 var(--t-sm) var(--f-sans); color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__meta { display: flex; gap: var(--s-1); }
.list-row__go { color: var(--c-text-4, #5d6773); transition: transform var(--dur) var(--ease), color var(--dur); }
.list-row.focus .list-row__go { color: #fff; transform: translateX(3px); }
.chip { display: inline-flex; align-items: center; gap: .4em; height: 1.9rem; padding: 0 .85em; border-radius: var(--r-pill); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--hu-hair);
  font: 600 var(--t-xs) var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2); white-space: nowrap; transition: background var(--dur), color var(--dur), box-shadow var(--dur); }
.chip .ico { width: .95em; height: .95em; }
.chip--accent { background: var(--hu-ice-tint); color: var(--hu-ice); } .chip--good { background: rgba(56,224,123,.12); color: var(--tt-green, #38e07b); }
.chip--warn { background: rgba(255,178,26,.13); color: var(--c-warn); } .chip--bad { background: rgba(255,69,58,.12); color: #ff8a80; } .chip--gold { background: rgba(255,201,74,.14); color: var(--c-gold); }
.text-field .field__ctl { flex: 1 1 auto; }
.text-field__input { box-sizing: border-box; width: min(18rem, 100%); min-height: 2.6rem; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--hu-hair-2); background: rgba(0,0,0,.35);
  color: var(--hu-text); font: 500 var(--t-md) var(--f-sans); letter-spacing: .06em; outline: none; appearance: none; transition: border-color var(--dur), box-shadow var(--dur); }
.text-field__input:focus { border-color: rgba(111,208,255,.8); box-shadow: 0 0 0 4px rgba(111,208,255,.14); }
.text-field__input::placeholder { color: var(--c-text-4, #5d6773); }