/* =============================================================================
   RACINGVERSE — UI design system
   =============================================================================
   Art direction: a stylised motorsport DASHBOARD to match the stylised 3D
   diorama. Near-black panels, off-white type, ONE accent (racing amber). Red
   and green exist only to say "bad" and "good". Bold condensed type, data in
   tabular numerals, small angled corners, thin lines — no glow, no neon.

   1. Tokens          5. Panels, cards, tabs, lists   9. Career / garage / map
   2. Base            6. Notifications, dialog, tips  10. Results
   3. Race HUD        7. Main menu + quick race       11. Responsive
   4. Buttons, icons  8. Car select
   ============================================================================= */

/* ------------------------------------------------------------------ 1. TOKENS */
:root {
  /* colour */
  --ui-bg: #0b0d10;
  --ui-panel: rgba(16, 18, 22, 0.9);
  --ui-panel-solid: #14171b;
  --ui-panel-light: rgba(30, 33, 39, 0.92);
  --ui-panel-lighter: rgba(44, 48, 56, 0.95);
  --ui-border: rgba(255, 255, 255, 0.09);
  --ui-border-strong: rgba(255, 255, 255, 0.2);
  --ui-text: #f2efe9;
  --ui-text-muted: #a4a9b1;
  --ui-text-dim: #6e737b;
  --ui-accent: #f2b233;
  --ui-accent-ink: #181305;
  --ui-accent-soft: rgba(242, 178, 51, 0.14);
  --ui-danger: #e2634f;
  --ui-danger-soft: rgba(226, 99, 79, 0.14);
  --ui-success: #6fc47d;
  --ui-success-soft: rgba(111, 196, 125, 0.14);

  /* spacing scale: 4 8 12 16 24 32 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* type: one family, several weights */
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  --body: 'Barlow', 'Segoe UI', Arial, sans-serif;

  /* shape + depth */
  --corner: 8px;                                   /* the angled corner */
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 0.14s;
  --margin: clamp(12px, 1.8vw, 24px);              /* HUD safe margin from the window edge */

  /* aliases used by older rules */
  --ink: var(--ui-bg); --panel: var(--ui-panel); --panel-edge: var(--ui-border);
  --text: var(--ui-text); --muted: var(--ui-text-muted); --accent: var(--ui-accent);
  --red: var(--ui-danger); --green: var(--ui-success);
}

/* ------------------------------------------------------------------- 2. BASE */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font: inherit; color: inherit; }

#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* A soft vignette over the world (under every panel): one gradient, no cost. */
#app::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 46%, transparent 58%, rgba(10, 14, 20, 0.2) 100%);
}

.hidden { display: none !important; }
.neg { color: var(--ui-danger); }
.pos { color: var(--ui-success); }

/* Type roles ------------------------------------------------------------ */
.h1 { font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.h2 { font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(26px, 2.6vw, 34px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.kicker, .label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ui-accent);
}
.label { margin: var(--s4) 0 var(--s2); color: var(--ui-text-muted); display: flex; align-items: center; gap: var(--s2); }
.label::after { content: ''; flex: 1; height: 1px; background: var(--ui-border); }
.keys { font-size: 13px; color: var(--ui-text-muted); }
.data, .num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  margin-right: 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  color: var(--ui-text);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--ui-border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
}

/* Screen enter: every overlay and view fades/slides in when it is shown. */
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.overlay:not(.hidden) > * { animation: screen-in 0.24s var(--ease) both; }
.view:not(.hidden) { animation: screen-in 0.2s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Keyboard focus: a clear accent outline on everything clickable. */
:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }

/* Full-window cross-fade used for hard cuts (menu → race, race → results). */
#fade { position: fixed; inset: 0; z-index: 90; background: var(--ui-bg); opacity: 0; pointer-events: none; transition: opacity 0.16s ease; }
#fade.on { opacity: 1; pointer-events: all; }

/* ----------------------------------------------------------------- 3. RACE HUD */
/* Compact: position top-left, lap + time top-centre, lap data top-right, speed
   and surface bottom-right. Everything sits on the screen edge, clear of the
   car and the track centre. */
#hud { position: fixed; inset: 0; pointer-events: none; }

.hud-block {
  position: absolute;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  padding: var(--s2) var(--s4) var(--s2) var(--s4);
}
.hud-tl {
  top: var(--margin); left: var(--margin);
  min-width: 124px;
  box-shadow: inset 4px 0 0 var(--ui-accent);
  padding-left: var(--s4);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.hud-tc {
  position: absolute; top: var(--margin); left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 2px;
}
.hud-tc .hud-block { position: relative; text-align: center; }
.hud-lapbox { clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); padding-left: var(--s5); }
.hud-timebox { clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-right: var(--s5); box-shadow: inset 0 -3px 0 var(--ui-accent); }
.hud-tr { top: var(--margin); right: var(--margin); padding: var(--s2) var(--s4) var(--s2) var(--s5); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); box-shadow: inset -4px 0 0 var(--ui-accent); }

.hud-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ui-text-muted);
}
.hud-posnum { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 64px; line-height: 0.95; font-variant-numeric: tabular-nums; }
.hud-p { font-size: 34px; color: var(--ui-accent); margin-right: 2px; vertical-align: 0.5em; }
.hud-of { font-size: 26px; font-weight: 700; color: var(--ui-text-muted); margin-left: var(--s1); }
.hud-lapnum { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.hud-lapnum .hud-of { font-size: 22px; }
.hud-time { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 6.4ch; }

.hud-rows { font-family: var(--display); font-size: 17px; letter-spacing: 0.06em; }
.hud-rows div { display: flex; justify-content: space-between; gap: var(--s4); line-height: 1.35; }
.hud-rows span { color: var(--ui-text-muted); font-weight: 700; }
.hud-rows b { font-variant-numeric: tabular-nums; font-weight: 700; }
.hud-rows b.warn { color: var(--ui-accent); }
.hud-rows b.bad { color: var(--ui-danger); }

/* Joker lap: one small chip under the timer; lights up while on the joker road. */
.hud-joker {
  position: absolute; top: calc(var(--margin) + 72px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: var(--s2);
  padding: 3px var(--s4) 4px;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.12em; font-size: 14px;
  background: var(--ui-panel); border: 1px solid var(--ui-border);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
  transition: background var(--fast), color var(--fast);
}
.hj-name { color: var(--ui-text-muted); }
.hud-joker b { color: var(--ui-accent); font-weight: 800; }
.hud-joker b.done { color: var(--ui-success); }
.hj-pen { color: var(--ui-text-dim); font-size: 12px; }
.hud-joker.on-route { background: var(--ui-accent); border-color: var(--ui-accent); }
.hud-joker.on-route .hj-name, .hud-joker.on-route b, .hud-joker.on-route .hj-pen { color: var(--ui-accent-ink); }
.hud-joker.on-route .hj-pen { display: none; }
.hud-joker.on-route::after { content: 'ON JOKER ROUTE'; color: var(--ui-accent-ink); font-size: 12px; }

/* Ovals: draft meter, fuel and pit state (same spot as the joker chip — never both). */
.hud-oval {
  position: absolute; top: calc(var(--margin) + 72px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s4);
  padding: 3px var(--s4) 4px;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.12em; font-size: 14px;
  background: var(--ui-panel); border: 1px solid var(--ui-border);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}
.ho-cell { display: flex; align-items: center; gap: var(--s2); color: var(--ui-text-muted); white-space: nowrap; }
.ho-cell b { color: var(--ui-text); font-weight: 800; min-width: 3.5em; }
.ho-cell b.warn { color: var(--ui-accent); }
.ho-cell b.bad { color: var(--ui-danger); }
.ho-bar { display: block; width: 72px; height: 7px; background: rgba(255, 255, 255, 0.12); position: relative; }
.ho-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ui-accent); }

/* Pit stop panel (js/ui/PitHUD.js): right side, below the lap times — reads only, never takes the controls */
.pit-panel {
  position: absolute; top: calc(var(--margin) + 96px); right: var(--margin); width: min(330px, 36vw); min-width: 280px;
  padding: var(--s2) var(--s3) var(--s2); background: var(--ui-panel); border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-accent); font-family: var(--display); letter-spacing: 0.08em; pointer-events: none;
}
.pit-panel.locked { border-left-color: var(--ui-success); }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); font-size: 15px; }
.pp-head b { font-weight: 800; font-style: italic; letter-spacing: 0.1em; }
.pp-state { color: var(--ui-accent); font-weight: 800; font-size: 13px; }
.pit-panel.locked .pp-state { color: var(--ui-success); }
.pit-panel.hold { border-left-color: var(--ui-danger); }
.pit-panel.hold .pp-state { color: var(--ui-danger); }
.pp-sub { color: var(--ui-text-muted); font-size: 12px; margin: 2px 0 var(--s1); }
.pp-rows { display: grid; gap: 2px; }
.pp-row { display: grid; grid-template-columns: 20px 66px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.pp-row kbd, .pp-keys kbd { font: inherit; font-size: 11px; font-weight: 800; text-align: center; padding: 0 4px; border: 1px solid var(--ui-border); color: var(--ui-text-muted); }
.pp-l { color: var(--ui-text-muted); }
.pp-row b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.pp-t, .pp-c { color: var(--ui-text-muted); font-variant-numeric: tabular-nums; text-align: right; min-width: 40px; }
.pp-row.off b { color: var(--ui-text-dim); }
.pp-note { padding-left: 26px; font-size: 11px; color: var(--ui-text-muted); letter-spacing: 0.06em; }
.pp-note.good { color: var(--ui-success); } .pp-note.warn { color: var(--ui-accent); }
.pp-note b { font-weight: 800; }
.pp-crew { margin-top: 3px; font-size: 11px; color: var(--ui-text-dim); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-crew b { color: var(--ui-text-muted); font-weight: 800; }
.pp-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s2); margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid var(--ui-border); font-size: 12px; color: var(--ui-text-muted); }
.pp-tot b { color: var(--ui-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-keys { margin-top: var(--s1); font-size: 11px; color: var(--ui-text-dim); }

/* Wheel-change minigame (js/ui/PitGame.js): a focused panel on the left — the car itself stays in view; the race HUD stays */
.pit-game {
  position: absolute; left: var(--margin); top: calc(var(--margin) + 104px); width: min(340px, 46vw); min-width: 260px;
  padding: var(--s2) var(--s3) var(--s3); background: var(--ui-panel); border: 1px solid var(--ui-border); border-top: 3px solid var(--ui-accent);
  font-family: var(--display); letter-spacing: 0.08em; user-select: none;
}
.pit-game.done { border-top-color: var(--ui-success); }
.pit-game .pg-head { display: flex; align-items: baseline; gap: var(--s2); font-size: 13px; color: var(--ui-text-muted); }
.pit-game .pg-head b { font-size: 16px; font-weight: 800; font-style: italic; color: var(--ui-text); }
.pit-game .pg-time { margin-left: auto; font-weight: 800; color: var(--ui-text); font-variant-numeric: tabular-nums; }
/* the car from above: body in the middle, a wheel at each corner (front = up) */
.pg-car { position: relative; height: 150px; margin: var(--s2) auto; width: 150px; }
.pg-body { position: absolute; left: 42px; right: 42px; top: 8px; bottom: 8px; background: #3a3e45; border: 2px solid #555b64; border-radius: 18px 18px 10px 10px; }
.pg-wheel { position: absolute; width: 30px; height: 46px; display: grid; place-items: end center; padding-bottom: 2px;
  background: #1b1d21; border: 2px solid #4a4f57; border-radius: 6px; overflow: hidden; font-size: 10px; font-weight: 800; color: var(--ui-text-dim); }
.pg-wheel > i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--p, 0%); background: rgba(242, 178, 51, 0.55); }
.pg-wheel > span { position: relative; }
.pg-wheel.w-FL { left: 6px; top: 10px; } .pg-wheel.w-FR { right: 6px; top: 10px; }
.pg-wheel.w-RL { left: 6px; bottom: 10px; } .pg-wheel.w-RR { right: 6px; bottom: 10px; }
.pg-wheel.s-off { background: transparent; border-style: dashed; }            /* old wheel off: an empty hub */
.pg-wheel.s-loose { background: #2a2d33; border-color: var(--ui-accent); }    /* new wheel on, nut loose */
.pg-wheel.s-done { background: #23272d; border-color: var(--ui-success); color: var(--ui-success); }
.pg-wheel.cur { box-shadow: 0 0 0 3px rgba(242, 178, 51, 0.7); color: var(--ui-text); }
.pg-prompt { text-align: center; font-size: 14px; color: var(--ui-text-muted); min-height: 20px; }
.pg-prompt b { color: var(--ui-text); font-weight: 800; }
.pg-prompt .bad, .pg-prompt.jam b, .pg-prompt.wrong b { color: var(--ui-danger); }
.pg-prompt .warn, .pg-prompt.stuck b { color: var(--ui-accent); }
.pg-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin-top: var(--s2); }
.pg-act { font: inherit; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; padding: 7px 4px; cursor: pointer;
  color: var(--ui-text-muted); background: var(--ui-panel-lighter); border: 1px solid var(--ui-border); }
.pg-act kbd { font: inherit; font-size: 11px; margin-right: 5px; padding: 0 4px; border: 1px solid var(--ui-border); }
.pg-act.want { color: var(--ui-accent-ink); background: var(--ui-accent); border-color: var(--ui-accent); }
.pg-act.want kbd { border-color: var(--ui-accent-ink); }
.pit-game.done .pg-acts { visibility: hidden; }
.pg-acts.one { grid-template-columns: 1fr; }
.pg-done { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s2); font-size: 12px; color: var(--ui-text-muted); padding: 2px 0; border-bottom: 1px solid var(--ui-border); }
.pg-done b { color: var(--ui-success); font-variant-numeric: tabular-nums; }
.pg-next { margin-top: var(--s1); font-size: 11px; color: var(--ui-text-dim); text-align: center; }
/* refuel: the tank against its target line */
.pf-bar { position: relative; height: 22px; margin: var(--s3) 0 var(--s2); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--ui-border); }
.pf-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(242, 178, 51, 0.75); }
.pf-fill.over { background: rgba(214, 69, 58, 0.75); }
.pf-zone { position: absolute; top: 0; bottom: 0; background: rgba(88, 178, 104, 0.35); }
.pf-target { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #fff; }
.pf-room { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ui-danger); }
/* repairs: the alignment needle sweeping its bar */
.pr-bar { position: relative; height: 22px; margin: var(--s3) 0 var(--s2); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--ui-border); }
.pr-win { position: absolute; top: 0; bottom: 0; background: rgba(88, 178, 104, 0.55); }
.pr-needle { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; background: var(--ui-text); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6); }
.pr-needle.on { background: var(--ui-success); }
/* while it runs, the stopping gauge isn't needed */
.pit-game:not(.hidden) ~ .pit-gauge { display: none; }

/* Release board: the crew's lollipop on its stand — red HOLD, green GO */
.pit-release {
  position: absolute; left: 50%; bottom: calc(var(--margin) + 70px); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 2px; padding: var(--s2) var(--s5); pointer-events: none;
  font-family: var(--display); letter-spacing: 0.1em; border: 2px solid rgba(0, 0, 0, 0.5);
}
.pit-release b { font-size: 42px; font-weight: 800; font-style: italic; line-height: 1; }
.pit-release span { font-size: 12px; font-weight: 700; }
.pit-release.hold { background: #b8322a; color: #fff; }
.pit-release.go { background: #2f8f4e; color: #fff; }
.pit-release.held { background: #e0a220; color: #1a1a1a; }
.pp-warn { color: var(--ui-danger); font-weight: 800; }

/* Precision-stop gauge: bottom centre, the car against its mark */
.pit-gauge {
  position: absolute; bottom: calc(var(--margin) + 64px); left: 50%; transform: translateX(-50%); width: min(460px, 80vw);
  display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s3); align-items: center; padding: var(--s2) var(--s3);
  background: var(--ui-panel); border: 1px solid var(--ui-border); font-family: var(--display); font-weight: 800; letter-spacing: 0.1em; pointer-events: none;
}
.pg-label { color: var(--ui-accent); font-size: 14px; }
.pg-bar { position: relative; height: 14px; background: rgba(255, 255, 255, 0.08); }
.pg-zone { position: absolute; top: 0; bottom: 0; }
.pg-zone.over { background: rgba(214, 69, 58, 0.45); }
.pg-zone.poor { background: rgba(242, 178, 51, 0.25); }
.pg-zone.good { background: rgba(242, 178, 51, 0.55); }
.pg-zone.perfect { background: var(--ui-success); }
.pg-line { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #fff; }
.pg-mark { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; background: var(--ui-text); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6); }
.pg-dist { grid-column: 1 / span 2; text-align: center; font-size: 13px; color: var(--ui-text-muted); }

/* Career screen: oval car setup (segmented choices) */
.setup-rows { display: grid; gap: var(--s1); margin-bottom: var(--s2); }
.setup-row { display: grid; grid-template-columns: 96px auto 1fr; align-items: center; gap: var(--s2); }
.sr-label { font-family: var(--display); font-weight: 700; letter-spacing: 0.1em; font-size: 13px; color: var(--ui-text-muted); }
.sr-text { font-size: 13px; color: var(--ui-text-dim); }
.sr-note { font-style: normal; font-weight: 600; letter-spacing: 0.04em; color: var(--ui-text-dim); margin-left: var(--s2); text-transform: none; }
.seg { display: flex; gap: 2px; }
.seg-btn { min-width: 72px; }
.seg-btn.on { background: var(--ui-accent); color: var(--ui-accent-ink); border-color: var(--ui-accent); }

.hud-br {
  position: absolute; bottom: var(--margin); right: var(--margin);
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.hud-speedbox {
  background: var(--ui-panel); border: 1px solid var(--ui-border);
  padding: 2px var(--s4) 4px var(--s5);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset -4px 0 0 var(--ui-accent);
  display: flex; align-items: baseline; gap: var(--s2);
}
.hud-speed { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.hud-unit { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; color: var(--ui-text-muted); }
.hud-surface {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 2px var(--s3);
  background: var(--ui-panel); border: 1px solid var(--ui-border);
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.16em;
}
.hud-surface .dot { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.35); }
.hud-surface.flash { animation: surface-flash 0.7s var(--ease); }
@keyframes surface-flash {
  0% { background: var(--ui-accent); color: var(--ui-accent-ink); transform: translateY(-3px); }
  100% { background: var(--ui-panel); color: var(--ui-text); transform: none; }
}

.hud-bl {
  position: absolute; left: var(--margin); bottom: var(--margin);
  font-family: var(--display); font-size: 14px; letter-spacing: 0.08em;
  color: rgba(242, 239, 233, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  animation: hint-fade 1.2s ease 12s forwards;
}
@keyframes hint-fade { to { opacity: 0; } }

#debug-panel {
  position: absolute; left: var(--margin); top: 130px; min-width: 250px;
  padding: var(--s2) var(--s3) var(--s3);
  background: rgba(10, 12, 16, 0.84); border: 1px solid var(--ui-border); border-left: 3px solid var(--ui-accent);
}
.debug-title { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: 0.18em; color: var(--ui-accent); }
.debug-title span { font-weight: 600; letter-spacing: 0.06em; color: var(--ui-text-muted); margin-left: var(--s2); }
#debug-text { margin: 6px 0 0; font-family: Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.45; white-space: pre; }

.banner {
  position: absolute; top: 26%; left: 50%; transform: translateX(-50%);
  background: var(--ui-danger); color: #fff;
  font-family: var(--display); font-weight: 800; font-style: italic; font-size: 36px; letter-spacing: 0.12em;
  padding: 4px 32px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  animation: blink 0.9s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.6; } }

/* In-race message (lap, split, joker): a small panel, not a banner across the track. */
#toast {
  position: absolute; top: calc(var(--margin) + 104px); left: 50%; transform: translateX(-50%);
  min-width: 220px; text-align: center;
  padding: var(--s2) var(--s5) var(--s3);
  background: var(--ui-panel); border: 1px solid var(--ui-border);
  box-shadow: inset 0 3px 0 var(--ui-accent), var(--shadow-sm);
}
#toast-title { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 34px; letter-spacing: 0.06em; line-height: 1.05; }
#toast-sub { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.1em; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
#toast.pop { animation: toast-in 0.28s var(--ease); }
@keyframes toast-in { from { transform: translateX(-50%) translateY(-8px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* Finish: position first, then the numbers that matter. */
#finish {
  position: absolute; top: 24%; left: 50%; transform: translateX(-50%);
  text-align: center; min-width: 300px;
  padding: var(--s3) var(--s6) var(--s4);
  background: var(--ui-panel); border: 1px solid var(--ui-border);
  box-shadow: inset 0 4px 0 var(--ui-accent), var(--shadow);
  animation: finish-in 0.32s var(--ease);
}
@keyframes finish-in { from { transform: translateX(-50%) scale(0.92); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.fin-kicker { font-family: var(--display); font-weight: 700; letter-spacing: 0.4em; font-size: 14px; color: var(--ui-accent); }
.fin-pos { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 92px; line-height: 0.95; }
.fin-line { margin-top: var(--s2); font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.1em; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.fin-line b { color: var(--ui-text); font-weight: 700; }
.fin-line em { font-style: normal; color: var(--ui-accent); }

/* ------------------------------------------------------------- COUNTDOWN */
#countdown { position: fixed; top: 18%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
#countdown .lights { display: inline-flex; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--ui-panel); border: 1px solid var(--ui-border); }
#countdown .light { width: 26px; height: 26px; border-radius: 50%; background: #2a2020; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); transition: background 0.08s; }
#countdown .light.red { background: #e03a2b; }
#countdown .light.green { background: var(--ui-accent); }
#countdown-text {
  margin-top: var(--s2);
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 110px; line-height: 1; letter-spacing: 0.04em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}
#countdown-text:not(.go):not(.ready) { font-variant-numeric: tabular-nums; }
#countdown-text.ready { font-size: 44px; letter-spacing: 0.16em; }
#countdown-text.go { color: var(--ui-accent); }
#countdown-text.beat { animation: beat 0.45s var(--ease); }
@keyframes beat { from { transform: scale(1.35); opacity: 0.1; } to { transform: scale(1); opacity: 1; } }

/* ------------------------------------------------- 4. BUTTONS, ICONS, CHIPS */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
i[data-ico] { display: inline-flex; font-style: normal; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%;
  margin: var(--s3) 0 0;
  padding: var(--s3) var(--s5);
  font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; letter-spacing: 0.08em; line-height: 1.1;
  text-transform: uppercase;
  color: var(--ui-text);
  background: var(--ui-panel-lighter);
  border: 1px solid var(--ui-border-strong);
  cursor: pointer;
  clip-path: polygon(var(--corner) 0, 100% 0, calc(100% - var(--corner)) 100%, 0 100%);
  transition: background var(--fast), color var(--fast), filter var(--fast), transform var(--fast);
}
.btn:hover:not(:disabled):not([aria-disabled='true']) { background: rgba(70, 76, 88, 0.95); filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.88); }
.btn.primary { background: var(--ui-accent); color: var(--ui-accent-ink); border-color: var(--ui-accent); }
.btn.primary:hover:not(:disabled):not([aria-disabled='true']) { background: #ffc54f; filter: none; }
.btn.tertiary { background: transparent; color: var(--ui-text-muted); border-color: var(--ui-border); font-size: 18px; }
.btn.tertiary:hover:not(:disabled) { color: var(--ui-text); background: rgba(255, 255, 255, 0.07); }
.btn.big { font-size: 28px; padding: var(--s4) var(--s5); }
.btn.small { width: auto; margin: 0; padding: 6px var(--s3); font-size: 15px; }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: 0.5; cursor: not-allowed; transform: none; filter: none;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, 0.18) 6px 12px);
}
.btn.primary:disabled, .btn.primary[aria-disabled='true'] { background-color: #6b5622; color: #d9cfae; border-color: transparent; }
.btn[aria-disabled='true'] { cursor: pointer; }   /* clickable: it explains why it can't be used */

.link-btn { background: none; border: none; color: var(--ui-text-muted); font-family: var(--display); font-weight: 700; letter-spacing: 0.12em; font-size: 13px; cursor: pointer; padding: var(--s1) var(--s2); transition: color var(--fast); }
.link-btn:hover, .link-btn:focus-visible { color: var(--ui-accent); }
.link-btn.danger:hover, .link-btn.danger:focus-visible { color: var(--ui-danger); }

/* Wide, selectable row used for menu navigation and pick rows. */
.nav-btn {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--s3);
  width: 100%; margin-top: var(--s2);
  padding: var(--s3) var(--s4) var(--s3) var(--s3);
  text-align: left;
  background: var(--ui-panel); border: 1px solid var(--ui-border);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--corner)) 0, 100% var(--corner), 100% 100%, 0 100%);
  transition: background var(--fast), transform var(--fast), border-color var(--fast);
}
.nav-btn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; transition: background var(--fast); }
.nav-btn:hover, .nav-btn:focus-visible { background: var(--ui-panel-lighter); transform: translateX(4px); outline: none; border-color: var(--ui-border-strong); }
.nav-btn:hover::before, .nav-btn:focus-visible::before { background: var(--ui-accent); }
.nav-btn:active { transform: translateX(4px) translateY(1px); filter: brightness(0.9); }
.nav-ico { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); font-size: 24px; }
.nav-ico .ico { width: 26px; height: 26px; }
.nav-text { display: flex; flex-direction: column; min-width: 0; }
.nav-text b { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 26px; line-height: 1; letter-spacing: 0.06em; }
.nav-text small { margin-top: 3px; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: var(--ui-text-muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-text small.neg { color: var(--ui-danger); }
.nav-go { color: var(--ui-text-dim); transition: color var(--fast), transform var(--fast); }
.nav-btn:hover .nav-go, .nav-btn:focus-visible .nav-go { color: var(--ui-accent); transform: translateX(3px); }
.nav-btn.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); padding-top: var(--s4); padding-bottom: var(--s4); }
.nav-btn.primary .nav-ico { background: rgba(0, 0, 0, 0.14); }
.nav-btn.primary .nav-text b { font-size: 32px; }
.nav-btn.primary .nav-text small { color: rgba(24, 19, 5, 0.75); }
.nav-btn.primary .nav-go { color: var(--ui-accent-ink); }
.nav-btn.primary::before { background: var(--ui-accent-ink); width: 5px; }
.nav-btn.primary:hover, .nav-btn.primary:focus-visible { background: #ffc54f; }

.pick-row {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3);
  width: 100%; margin-top: var(--s2);
  padding: var(--s2) var(--s3) var(--s2) var(--s3);
  text-align: left;
  background: var(--ui-panel-light); border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-accent);
  cursor: pointer;
  transition: background var(--fast);
}
.pick-row:hover, .pick-row:focus-visible { background: var(--ui-panel-lighter); }
.pr-label { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; color: var(--ui-text-muted); width: 70px; }
.pr-main { display: flex; flex-direction: column; min-width: 0; }
.pr-go { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; color: var(--ui-text-muted); white-space: nowrap; }
.pick-row:hover .pr-go { color: var(--ui-accent); }
.cp-class { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; color: var(--ui-accent); text-transform: uppercase; }
.cp-name { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.dp-name { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.dp-blurb { font-size: 13px; line-height: 1.3; color: var(--ui-text-muted); }

/* Pills: state labels (always text + a shape, never colour alone). */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--ui-border-strong); color: var(--ui-text-muted);
}
.pill .ico { width: 13px; height: 13px; }
.pill.accent { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.pill.good { color: var(--ui-success); border-color: rgba(111, 196, 125, 0.5); }
.pill.bad { color: var(--ui-danger); border-color: rgba(226, 99, 79, 0.5); }
.pill.lock { border-style: dashed; }

/* ---------------------------------------- 5. PANELS, CARDS, TABS, LISTS */
.panel {
  position: relative;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  box-shadow: var(--shadow);
}
.panel::before { content: ''; position: absolute; left: -1px; top: -1px; width: 56px; height: 3px; background: var(--ui-accent); }

.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.3) 0%, rgba(8, 10, 14, 0.7) 100%);
}

.screen-card {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(20, 23, 27, 0.97);
  border: 1px solid var(--ui-border);
  box-shadow: var(--shadow);
  padding: var(--s4) var(--s5) var(--s3);
  max-width: calc(100vw - 2 * var(--s4));
}
.screen-card::before { content: ''; position: absolute; left: -1px; top: -1px; width: 72px; height: 3px; background: var(--ui-accent); }
.screen-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); }
.career-head #btn-career-back { margin: 0; }
.career-head .car-title { margin-right: auto; }
/* controller focus inside the career / garage detail panels */
.pad-nav .career-detail button:focus-visible, .pad-nav #garage-info button:focus-visible,
.pad-nav .career-detail button:focus, .pad-nav #garage-info button:focus { outline: 3px solid #fff; outline-offset: -3px; }

.card { background: var(--ui-panel-light); border: 1px solid var(--ui-border); padding: var(--s3) var(--s4); }

.stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: 4px 0; border-bottom: 1px solid var(--ui-border); font-size: 14px; }
.stat-row span { color: var(--ui-text-muted); }
.stat-row b { font-family: var(--display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* Data grid: label over value, timing-board style. */
.data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px; background: var(--ui-border); border: 1px solid var(--ui-border); margin: var(--s3) 0; }
.data-grid > div { background: var(--ui-panel-solid); padding: 6px var(--s3) 7px; min-width: 0; }
.data-grid span { display: block; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; color: var(--ui-text-muted); text-transform: uppercase; }
.data-grid b { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; }
#event-stats > div:first-child { grid-column: span 2; }
.data-grid b.accent { color: var(--ui-accent); }
.data-grid b.neg { color: var(--ui-danger); }
.data-grid b.pos { color: var(--ui-success); }

/* Tabs (disciplines, tiers) */
.disc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
.disc-tab, .career-tier {
  padding: 6px var(--s1) 7px;
  font-family: var(--display); color: var(--ui-text); text-align: center;
  background: var(--ui-panel-light);
  border: 1px solid var(--ui-border);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.disc-tab:hover, .career-tier:hover { background: var(--ui-panel-lighter); }
.disc-tab.selected, .career-tier.selected { background: var(--ui-panel-lighter); border-bottom-color: var(--ui-accent); }
.dt-name, .ct-name { display: block; font-weight: 800; font-style: italic; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
.dt-sub, .ct-sub { display: block; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; color: var(--ui-text-muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-tab.locked { opacity: 0.4; cursor: not-allowed; border-style: dashed; }
.disc-desc { margin: var(--s2) 2px 0; min-height: 34px; font-size: 13px; line-height: 1.35; color: var(--ui-text-muted); }

/* Scrolling lists share one scrollbar look. */
.track-list, .car-list, .career-list, .career-detail, .career-finance, .results-card, .title-card {
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* List rows (tracks, cars, championships, owned cars) */
.track-item, .car-item, .champ-item {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); row-gap: 1px;
  flex: none; width: 100%;
  padding: 6px var(--s3) 7px var(--s3);
  text-align: left;
  font-family: var(--display); color: var(--ui-text);
  background: var(--ui-panel-light);
  border: 1px solid var(--ui-border);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.track-item:hover, .car-item:hover, .champ-item:hover { background: var(--ui-panel-lighter); }
.track-item.selected, .car-item.selected, .champ-item.selected { background: var(--ui-accent-soft); border-left-color: var(--ui-accent); border-color: rgba(242, 178, 51, 0.35); border-left-color: var(--ui-accent); }

.track-list { display: flex; flex-direction: column; gap: var(--s1); overflow-y: auto; padding-right: 2px; min-height: 0; flex: 1; }
.ti-name { font-weight: 800; font-style: italic; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.ti-laps { font-weight: 700; font-size: 13px; letter-spacing: 0.12em; color: var(--ui-accent); align-self: center; }
.ti-meta { grid-column: 1 / span 2; font-weight: 600; font-size: 13px; letter-spacing: 0.03em; color: var(--ui-text-muted); }

/* Quick-race set-up view */
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s5); flex: 1; min-height: 0; }
.setup-left { display: flex; flex-direction: column; min-height: 0; }
.setup-left .label:first-child { margin-top: 0; }
.setup-right { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-right: 2px; }
.event { display: block; padding: var(--s3) var(--s4) var(--s3); border-left: 3px solid var(--ui-accent); }
.event-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.event-name { font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(26px, 2.6vw, 32px); line-height: 1; text-transform: uppercase; margin-top: 3px; }
.event-laps { text-align: right; font-family: var(--display); line-height: 1; }
.event-laps b { display: block; font-weight: 800; font-style: italic; font-size: 44px; font-variant-numeric: tabular-nums; }
.event-laps span { font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--ui-text-muted); }
.event-map { height: clamp(100px, 18vh, 160px); margin-top: var(--s2); background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.05), transparent 75%); border: 1px solid var(--ui-border); }
.event-desc { font-size: 14px; line-height: 1.4; color: var(--ui-text); }
.event-meta { margin-top: var(--s2); font-family: var(--display); font-weight: 600; letter-spacing: 0.08em; font-size: 13px; color: var(--ui-text-muted); text-transform: uppercase; }
.event-best { margin-top: var(--s1); font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.event-best:empty { display: none; }
.setup-right .btn.big { margin-top: var(--s3); flex: none; }

/* Track map (SVG from UI.js trackMapSVG) */
.tmap { width: 100%; height: 100%; display: block; }
.tm-casing { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.tm-road { fill: none; stroke: #d8d3c6; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.tm-joker { fill: none; stroke: var(--ui-accent); stroke-width: 3; stroke-dasharray: 5 4; stroke-linecap: round; }
.tm-sector { stroke: var(--ui-bg); stroke-width: 2.4; }
.tm-start rect { fill: var(--ui-accent); stroke: var(--ui-bg); stroke-width: 2; }
.tm-label { font-family: var(--display); font-weight: 800; font-size: 13px; fill: var(--ui-accent); }

/* ---------------------------------------------------------- 6. NOTIFY / DIALOG / TIPS */
#notify { position: fixed; right: var(--margin); bottom: 150px; z-index: 70; display: flex; flex-direction: column; gap: var(--s2); align-items: flex-end; pointer-events: none; }
.note {
  display: flex; align-items: flex-start; gap: var(--s3);
  min-width: 220px; max-width: 340px;
  padding: var(--s2) var(--s4) var(--s2) var(--s3);
  background: var(--ui-panel-solid); border: 1px solid var(--ui-border-strong); border-left: 3px solid var(--ui-accent);
  box-shadow: var(--shadow-sm);
  pointer-events: auto; cursor: pointer;
  animation: note-in 0.26s var(--ease);
  transition: opacity 0.25s, transform 0.25s;
}
.note.out { opacity: 0; transform: translateX(16px); }
.note .ico { width: 22px; height: 22px; margin-top: 2px; color: var(--ui-accent); }
.note b { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.15; }
.note span { display: block; font-size: 13px; line-height: 1.3; color: var(--ui-text-muted); }
.note-good { border-left-color: var(--ui-success); } .note-good .ico { color: var(--ui-success); }
.note-warn { border-left-color: var(--ui-accent); }
.note-bad { border-left-color: var(--ui-danger); } .note-bad .ico { color: var(--ui-danger); }
@keyframes note-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

#dialog { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(6, 8, 11, 0.62); opacity: 0; transition: opacity 0.16s; }
#dialog.shown { opacity: 1; }
.dialog-card { width: min(420px, calc(100vw - 32px)); padding: var(--s5) var(--s5) var(--s4); background: var(--ui-panel-solid); }
.dialog-card.danger::before { background: var(--ui-danger); }
.dialog-title { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 30px; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; margin: var(--s1) 0 var(--s3); }
.dialog-note { margin-top: var(--s3); font-size: 13px; line-height: 1.4; color: var(--ui-text-muted); }
.dialog-actions { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s3); margin-top: var(--s4); }
.dialog-actions .btn { margin: 0; }
.dialog-card.danger .btn.primary { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }

/* Tooltips: [data-tip] shows a short explanation on hover or keyboard focus. */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  width: max-content; max-width: 230px;
  padding: 6px 10px;
  font-family: var(--body); font-weight: 500; font-size: 12.5px; line-height: 1.35; letter-spacing: 0; text-transform: none; text-align: left;
  color: var(--ui-text); background: #07090c; border: 1px solid var(--ui-border-strong);
  box-shadow: var(--shadow-sm);
  display: none; pointer-events: none;     /* display:none so a hidden tip never widens a scrolling panel */
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { display: block; animation: tip-in 0.14s ease; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* Tips near the right edge open leftwards. */
.data-grid > div:nth-last-child(-n+2) [data-tip]::after, .car-bars .bar-row:nth-child(even) [data-tip]::after { left: auto; right: 0; }

/* ----------------------------------------------------------- 7. MAIN MENU */
#title-screen {
  justify-content: flex-start;
  padding-left: max(var(--s5), 6vw);
  background: linear-gradient(90deg, rgba(8, 10, 14, 0.78) 0%, rgba(8, 10, 14, 0.3) 52%, rgba(8, 10, 14, 0) 100%);
}
#title-screen[data-view='setup'], #title-screen[data-view='options'], #title-screen[data-view='drift'] { padding-left: 0; justify-content: center; background: rgba(8, 10, 14, 0.5); }
.menu-shell { display: flex; flex-direction: column; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 24px); }
#title-screen[data-view='setup'] .menu-shell, #title-screen[data-view='drift'] .menu-shell { width: min(1080px, calc(100vw - 32px)); height: min(720px, calc(100vh - 24px)); }
#title-screen[data-view='options'] .menu-shell { width: min(900px, calc(100vw - 32px)); }

/* While a full screen (cars, career, garage, map) is open, the menu behind it is hidden. */
#title-screen:has(~ #car-screen:not(.hidden), ~ #career-screen:not(.hidden), ~ #garage-screen:not(.hidden), ~ #map-screen:not(.hidden)) .menu-shell { visibility: hidden; }

.brand { margin-bottom: var(--s5); }
#title-screen:not([data-view='main']) .brand { display: none; }
.logo { font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(54px, 8vw, 92px); line-height: 0.88; letter-spacing: 0.01em; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); }
.logo-b { color: var(--ui-accent); }
.tagline { margin-top: var(--s3); display: flex; align-items: center; gap: var(--s3); font-family: var(--display); font-weight: 700; letter-spacing: 0.34em; color: var(--ui-text-muted); font-size: 14px; }
.tagline::before { content: ''; width: 42px; height: 4px; background: repeating-linear-gradient(90deg, var(--ui-accent) 0 8px, transparent 8px 12px); }

#view-main { display: flex; flex-direction: column; }
.menu-foot { margin-top: var(--s4); font-size: 13px; color: var(--ui-text-dim); }

#view-setup, #view-options, #view-drift { display: flex; flex-direction: column; min-height: 0; padding: var(--s4) var(--s5) var(--s4); background: rgba(18, 20, 24, 0.94); }
#view-options { max-height: calc(100vh - 32px); overflow-y: auto; }
.view-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); margin-bottom: var(--s3); }
.view-head .btn { margin: 0; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.opt-col .label:first-child { margin-top: 0; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); font-size: 14px; color: var(--ui-text-muted); }

/* Compat: older title-card rules still referenced by the loading/error screens */
.menu-card { width: min(380px, calc(100vw - 32px)); text-align: center; padding: var(--s5) var(--s6) var(--s5); }
.menu-title { margin-bottom: var(--s3); }
.menu-card p { color: var(--ui-text-muted); }
.menu-card .hint { font-size: 13px; }

/* Loading: brand + a thin bar, nothing heavy. */
#loading { background: var(--ui-bg); z-index: 100; }
.loading-box { width: min(340px, 80vw); text-align: left; }
.loading-box .logo { font-size: clamp(48px, 9vw, 72px); }
.loading-track { width: 100%; margin-top: var(--s4); }
.loading-track path { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.loading-bar { margin-top: var(--s3); height: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.loading-bar i { display: block; height: 100%; width: 40%; background: var(--ui-accent); animation: load-run 1.1s ease-in-out infinite; }
@keyframes load-run { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.loading-text { margin-top: var(--s2); font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.3em; color: var(--ui-text-muted); }

/* --------------------------------------------------------- 8. CAR SELECT */
#car-screen { background: rgba(8, 10, 14, 0.62); }
.car-card { width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.car-title { line-height: 1; }
.car-body { display: grid; grid-template-columns: 300px 1fr; gap: var(--s5); min-height: 0; flex: 1; }
.car-list { display: flex; flex-direction: column; gap: var(--s1); overflow-y: auto; min-height: 0; padding-right: 2px; }
.car-item { padding: 5px var(--s3) 6px; }
.car-item.current .ci-class::after { content: ' · CURRENT'; color: var(--ui-success); }
.ci-class { font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--ui-text-muted); text-transform: uppercase; }
.ci-class em { font-style: normal; color: var(--ui-accent); }
.ci-price { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.ci-name { grid-column: 1 / span 2; font-weight: 800; font-style: italic; font-size: 19px; line-height: 1.05; text-transform: uppercase; }
/* Quick Race: only owned cars can be chosen */
.car-item.owned .ci-price { color: var(--ui-success); }
.car-item.locked .ci-name { color: var(--ui-text-muted); }
.car-item.locked .ci-price { color: var(--ui-text-muted); }
.ci-lock { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
#btn-car-choose.is-locked { opacity: 0.55; }
.car-pick.not-owned .cp-name { color: var(--ui-text-muted); }
.car-pick.not-owned .cp-class::after { content: ' · NOT OWNED'; color: var(--ui-danger); }
.car-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
#car-preview, #garage-preview { display: block; width: 100%; background: radial-gradient(ellipse at 50% 42%, #3d434c 0%, #1b1e23 78%); border: 1px solid var(--ui-border); }
#car-preview { height: clamp(150px, 28vh, 240px); flex: none; }
.car-info { margin: var(--s3) 0 var(--s2); }
.car-name { font-size: clamp(28px, 3vw, 36px); }
.car-specs { margin-top: 3px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; }
.car-desc { margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--ui-text-muted); min-height: 38px; }
.car-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--s5); }
.bar-row { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center; font-family: var(--display); }
.bar-label { font-weight: 700; font-size: 13px; letter-spacing: 0.12em; color: var(--ui-text-muted); }
.bar, .gr-meter { height: 10px; background: rgba(255, 255, 255, 0.08); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); position: relative; }
.bar-fill { display: block; height: 100%; width: 0; background: var(--ui-accent); transition: width 0.28s var(--ease); }
.bar .tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ui-text); opacity: 0.85; }
.bar-value { grid-column: 2; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.bar-value:empty { display: none; }
.car-buttons { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s3); margin-top: var(--s3); }
.car-buttons .btn { margin-top: 0; }

/* ----------------------------------------- 9. CAREER / GARAGE / MAP */
#career-screen, #garage-screen, #map-screen { background: rgba(8, 10, 14, 0.58); }
.career-card { width: min(1180px, calc(100vw - 32px)); height: min(780px, calc(100vh - 32px)); }

/* Wallet: CASH and REP are always the first, biggest numbers, same place on every screen. */
.wallet { display: flex; align-items: stretch; gap: var(--s2); flex-wrap: wrap; font-family: var(--display); }
.wallet > div { display: flex; flex-direction: column; align-items: flex-start; padding: 3px var(--s3) 4px; background: var(--ui-panel-light); border: 1px solid var(--ui-border); min-width: 82px; }
.wallet span { font-weight: 700; font-size: 11px; letter-spacing: 0.2em; color: var(--ui-text-muted); }
.wallet b { font-weight: 800; font-style: italic; font-size: 22px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wallet .w-money { border-left: 3px solid var(--ui-accent); min-width: 140px; }
.wallet .w-money b { font-size: 30px; color: var(--ui-text); }
.wallet .w-money b.neg { color: var(--ui-danger); }
.wallet .w-rep { min-width: 100px; }
.wallet .w-rep b { font-size: 30px; }
.wallet .w-sm b { font-size: 20px; }

/* Progress: milestone ladder toward the next licence */
.cr-progress { margin: var(--s2) 0 var(--s1); }
.ladder { position: relative; height: 46px; margin: 0 56px; font-family: var(--display); }
.ladder .lad-bar { position: absolute; left: 0; right: 0; top: 7px; height: 6px; background: rgba(255, 255, 255, 0.09); }
.ladder .lad-fill { position: absolute; inset: 0 auto 0 0; background: var(--ui-accent); transition: width 0.5s var(--ease); }
.lad-mark { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; }
.lad-mark i { width: 20px; height: 20px; display: grid; place-items: center; background: var(--ui-panel-solid); border: 2px solid var(--ui-border-strong); transform: rotate(45deg) scale(0.8); }
.lad-mark i .ico { width: 13px; height: 13px; transform: rotate(-45deg); }
.lad-mark.done i { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.lad-mark.here i { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.lad-mark span { margin-top: 2px; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--ui-text-muted); text-transform: uppercase; line-height: 1.1; }
.lad-mark.done span, .lad-mark.here span { color: var(--ui-text); }
.lad-mark small { font-size: 11px; color: var(--ui-text-dim); font-weight: 600; letter-spacing: 0.06em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lad-mark.here small { color: var(--ui-accent); }

.cr-next { margin: var(--s1) 0 var(--s2); font-size: 13px; line-height: 1.4; color: var(--ui-text-muted); }
.cr-next b { font-family: var(--display); font-weight: 700; letter-spacing: 0.14em; font-size: 12px; color: var(--ui-accent); margin-right: var(--s2); }
.cr-next .ok { color: var(--ui-success); }
.cr-next .no { color: var(--ui-text); }

.career-tiers { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1); margin: var(--s1) 0 var(--s3); }
.career-tier.future { opacity: 0.55; border-style: dashed; }

.career-body { display: grid; grid-template-columns: 330px 1fr; gap: var(--s4); flex: 1; min-height: 0; }
.career-list { display: flex; flex-direction: column; gap: var(--s1); overflow-y: auto; min-height: 0; padding-right: 2px; }
.career-detail { overflow-y: auto; min-height: 0; padding-right: var(--s1); position: relative; }

/* Championship rows */
.champ-item { padding: 7px var(--s3) 7px var(--s3); row-gap: 2px; }
.champ-item.st-active { border-left-color: var(--ui-accent); }
.champ-item.st-open { border-left-color: rgba(255, 255, 255, 0.45); }
.champ-item.st-done, .champ-item.st-finished { border-left-color: var(--ui-success); }
.champ-item.st-locked, .champ-item.st-future { background: rgba(20, 22, 26, 0.7); border-style: dashed; border-left-style: solid; border-left-color: #3b3f46; }
.champ-item.st-locked .chi-name, .champ-item.st-future .chi-name, .champ-item.st-locked .chi-meta, .champ-item.st-future .chi-meta { color: var(--ui-text-dim); }
.chi-name { font-weight: 800; font-style: italic; font-size: 18px; line-height: 1.1; text-transform: uppercase; }
.chi-state { align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; color: var(--ui-text-muted); border: 1px solid var(--ui-border-strong); white-space: nowrap; }
.chi-state .ico { width: 12px; height: 12px; }
.st-open .chi-state { color: var(--ui-text); }
.st-active .chi-state { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.st-done .chi-state, .st-finished .chi-state { color: var(--ui-success); border-color: rgba(111, 196, 125, 0.5); }
.st-locked .chi-state, .st-future .chi-state { border-style: dashed; color: var(--ui-text-dim); }
.chi-meta { grid-column: 1 / span 2; font-weight: 600; font-size: 12px; letter-spacing: 0.05em; color: var(--ui-text-muted); }
.chi-meta b.good { color: var(--ui-success); } .chi-meta b.warn { color: var(--ui-accent); } .chi-meta b.bad { color: var(--ui-danger); }
.chi-nums { grid-column: 1 / span 2; display: flex; gap: var(--s3); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.chi-nums b { color: var(--ui-text); font-weight: 700; margin-left: 3px; }
.chi-why { color: #e8a39b; }
.champ-group { flex: none; margin: var(--s2) 0 0; padding: 0 2px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--ui-accent); text-transform: uppercase; }
.champ-group:first-child { margin-top: 0; }
.champ-note { flex: none; padding: var(--s2) var(--s3); font-size: 13px; line-height: 1.4; color: var(--ui-text-muted); border: 1px dashed var(--ui-border-strong); }

/* Detail panel */
.cd-kicker { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; color: var(--ui-accent); text-transform: uppercase; }
.cd-name { font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(28px, 3vw, 36px); line-height: 1; text-transform: uppercase; }
.cd-desc { margin: 6px 0 var(--s2); font-size: 14px; line-height: 1.4; color: var(--ui-text-muted); }
.cd-desc .no { color: #e8a39b; }
.cd-row { font-size: 13.5px; line-height: 1.5; padding: 2px 0; }
.cd-row b { font-family: var(--display); font-weight: 700; letter-spacing: 0.14em; font-size: 12px; color: var(--ui-text-muted); margin-right: var(--s2); }
.cd-row i { font-style: normal; font-weight: 700; color: var(--ui-text-muted); }
.cd-row .ok, .cr-next .ok { color: var(--ui-success); }
.cd-row .no { color: #e8a39b; }
.cd-sec { margin: var(--s3) 0 var(--s1); display: flex; align-items: center; gap: var(--s2); font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--ui-accent); }
.cd-sec::after { content: ''; flex: 1; height: 1px; background: var(--ui-border); }
.cd-stats { margin: var(--s2) 0 var(--s2); grid-template-columns: repeat(3, 1fr); }
.cd-more { margin-top: var(--s2); border-top: 1px solid var(--ui-border); }
.cd-more > summary { list-style: none; cursor: pointer; padding: var(--s2) 0; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--ui-text-muted); display: flex; align-items: center; gap: var(--s2); }
.cd-more > summary::-webkit-details-marker { display: none; }
.cd-more > summary::before { content: '▸'; color: var(--ui-accent); transition: transform var(--fast); }
.cd-more[open] > summary::before { transform: rotate(90deg); }
.cd-more > summary:hover { color: var(--ui-text); }

.lockbox { display: flex; align-items: flex-start; gap: var(--s3); margin: var(--s3) 0; padding: var(--s3) var(--s4); border: 1px dashed var(--ui-border-strong); background: rgba(255, 255, 255, 0.03); }
.lockbox .ico { width: 26px; height: 26px; color: var(--ui-text-muted); margin-top: 2px; }
.lockbox b { display: block; font-family: var(--display); font-weight: 800; letter-spacing: 0.14em; font-size: 15px; }
.lockbox span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ui-text-muted); }

.cd-path { line-height: 1.9; }
.cd-path .ps { display: inline-block; padding: 0 6px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--ui-border-strong); }
.cd-path .ps-done { color: var(--ui-success); border-color: rgba(111, 196, 125, 0.4); }
.cd-path .ps-active { color: var(--ui-accent-ink); background: var(--ui-accent); border-color: var(--ui-accent); }
.cd-path .ps-open { color: var(--ui-text); }
.cd-path .ps-locked { color: var(--ui-text-dim); border-style: dashed; }
.cd-path .ps.here { box-shadow: inset 0 -3px 0 var(--ui-accent); }
.cd-path .ps-arrow { margin: 0 4px; color: var(--ui-text-muted); }
.cd-path .ps-note { color: var(--ui-text-muted); font-size: 12px; }

.cd-rounds .rd { display: grid; grid-template-columns: 30px 1fr auto auto auto; gap: var(--s2); align-items: baseline; padding: 3px 6px; font-family: var(--display); font-size: 15px; border-bottom: 1px solid var(--ui-border); }
.rd.next { background: var(--ui-accent-soft); box-shadow: inset 3px 0 0 var(--ui-accent); }
.rd-n { color: var(--ui-text-muted); font-weight: 700; }
.rd-track { font-weight: 700; text-transform: uppercase; }
.rd-laps { color: var(--ui-text-muted); font-size: 13px; }
.rd-res { font-weight: 800; font-style: italic; }
.rd-res.p1 { color: var(--ui-accent); }
.rd-pts { color: var(--ui-text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.rd-next { color: var(--ui-accent); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; }

/* Standings tables (career, results) */
.cd-standings .sd, .rc-standings .sd { display: grid; grid-template-columns: 32px 1fr 52px; gap: var(--s2); padding: 3px 6px; font-family: var(--display); font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--ui-border); font-variant-numeric: tabular-nums; }
.sd span:last-child { text-align: right; }
.sd span:first-child { color: var(--ui-text-muted); }
.sd.me { background: var(--ui-accent-soft); box-shadow: inset 3px 0 0 var(--ui-accent); color: var(--ui-accent); }
.sd.head { font-size: 11px; letter-spacing: 0.18em; color: var(--ui-text-muted); border-bottom: 1px solid var(--ui-border-strong); }

/* Car chooser inside the career detail */
.cd-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s1); }
.cp-car {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--s2); padding: 5px var(--s3) 6px; text-align: left;
  font-family: var(--display); color: var(--ui-text); background: var(--ui-panel-light);
  border: 1px solid var(--ui-border); border-left: 3px solid transparent; cursor: pointer; transition: background var(--fast);
}
.cp-car:hover:not(:disabled), .cp-car:focus-visible { background: var(--ui-panel-lighter); }
.cp-car.selected { border-left-color: var(--ui-accent); background: var(--ui-accent-soft); }
.cp-car:disabled, .cp-car.is-short { opacity: 0.6; border-style: dashed; border-left-style: solid; }
.cp-car:disabled { cursor: not-allowed; }
.cpc-class { font-weight: 700; font-size: 11px; letter-spacing: 0.12em; color: var(--ui-text-muted); text-transform: uppercase; }
.cpc-tag { font-weight: 700; font-size: 11px; letter-spacing: 0.08em; color: var(--ui-accent); }
.cp-car.buy .cpc-tag { color: var(--ui-success); }
.cpc-name { grid-column: 1 / span 2; font-weight: 800; font-style: italic; font-size: 16px; text-transform: uppercase; }
.cpc-buy { grid-column: 1 / span 2; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; color: var(--ui-success); text-transform: uppercase; }
.cpc-buy:hover { text-decoration: underline; }

/* Medals (time attack) */
.medal-gold { --medal: #e8c25a; } .medal-silver { --medal: #c9ced6; } .medal-bronze { --medal: #c98a55; }
.rd-medal { font-weight: 800; font-style: italic; color: var(--medal); }
#hud-target-row span, #hud-target-row b { color: var(--medal); }
#hud-target-row.done b { color: var(--ui-success); }

/* The main action stays visible at the bottom of the detail panel. */
.cd-actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); margin-top: var(--s3); position: sticky; bottom: 0; padding: var(--s2) 0 var(--s1); background: linear-gradient(180deg, transparent, rgba(20, 23, 27, 0.97) 28%); z-index: 2; }
.cd-actions .btn { margin-top: 0; font-size: 20px; padding: var(--s3) var(--s4); }
.cd-actions .btn:only-child { grid-column: 1 / span 2; }
.career-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--ui-border); font-size: 12px; color: var(--ui-text-muted); flex-wrap: wrap; }
.foot-links { display: flex; gap: var(--s2); flex-wrap: wrap; }
.cr-save { font-size: 12px; color: var(--ui-text-dim); }

/* Money: budget, results breakdown, finances */
#cr-money.neg, .career-btn-sub.neg { color: var(--ui-danger); }
.cd-budget, .rc-breakdown { display: flex; flex-direction: column; gap: 1px; }
.bg-line, .rcb-line { display: flex; justify-content: space-between; gap: var(--s3); padding: 3px var(--s2); font-size: 13px; background: rgba(255, 255, 255, 0.03); }
.bg-line i, .rcb-line i, .fin-row i, .fin-season i { font-style: normal; color: var(--ui-text-muted); font-size: 12px; }
.bg-line b, .rcb-line b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bg-line b.neg, .rcb-line.neg b { color: var(--ui-danger); }
.bg-line b.pos, .rcb-line.pos b { color: var(--ui-success); }
.bg-line.note span { color: var(--ui-text-muted); }
.bg-line.total, .rcb-line.net { background: rgba(255, 255, 255, 0.08); font-family: var(--display); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.bg-line.total.loss b, .rcb-line.net.neg b { color: var(--ui-danger); }
.bg-line.total.gain b, .rcb-line.net.pos b { color: var(--ui-success); }
.bg-rent { margin-top: 6px; padding: 6px var(--s2); font-size: 13px; line-height: 1.4; border-left: 3px solid var(--ui-accent); background: var(--ui-accent-soft); }
.bg-rent b { font-family: var(--display); letter-spacing: 0.14em; font-size: 12px; color: var(--ui-accent); margin-right: 6px; }
.career-finance { flex: 1; min-height: 0; overflow-y: auto; margin-top: var(--s2); padding-right: var(--s1); }
.fin-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.fin-tiles div { padding: var(--s2) var(--s3); background: var(--ui-panel-light); border-left: 3px solid var(--ui-border-strong); font-family: var(--display); }
.fin-tiles div.neg { border-left-color: var(--ui-danger); }
.fin-tiles span { display: block; font-weight: 700; font-size: 12px; letter-spacing: 0.18em; color: var(--ui-text-muted); }
.fin-tiles b { font-weight: 800; font-style: italic; font-size: 26px; font-variant-numeric: tabular-nums; }
.fin-tip { margin-top: var(--s2); padding: 6px var(--s3); font-size: 13px; border-left: 3px solid var(--ui-accent); background: var(--ui-accent-soft); }
.fin-tip b { font-family: var(--display); letter-spacing: 0.14em; font-size: 12px; color: var(--ui-accent); margin-right: 6px; }
.fin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.fin-cat { display: grid; grid-template-columns: 140px 1fr 90px; gap: var(--s2); align-items: center; padding: 2px 0; font-size: 13px; }
.fin-cat i { height: 8px; background: var(--ui-success); }
.fin-cat.neg i { background: #b8574c; }
.fin-cat b { text-align: right; font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; }
.fin-season, .fin-row { display: grid; gap: var(--s3); align-items: baseline; padding: 3px var(--s2); font-size: 13px; background: rgba(255, 255, 255, 0.03); margin-bottom: 1px; }
.fin-season { grid-template-columns: 1fr 110px 110px 110px; }
.fin-row { grid-template-columns: 50px 1fr 1fr 100px; }
.fin-season b, .fin-row b { text-align: right; font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; }
.fr-n { color: var(--ui-text-muted); }

/* Bankruptcy */
.bust-title { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 54px; line-height: 1; color: var(--ui-danger); letter-spacing: 0.02em; }
.bust-debt { margin: 6px 0 var(--s3); font-family: var(--display); font-size: 22px; letter-spacing: 0.06em; }
.bust-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: var(--s3) 0; }
.bust-stats div { padding: 6px var(--s3); background: rgba(255, 255, 255, 0.04); border-left: 3px solid var(--ui-danger); }
.bust-stats span { display: block; font-size: 11px; letter-spacing: 0.14em; opacity: 0.7; }
.bust-stats b { font-family: var(--display); font-size: 20px; }

/* Garage */
#garage-preview { height: clamp(150px, 26vh, 230px); }
.garage-detail { overflow-x: hidden; }
.garage-detail .cd-actions { grid-template-columns: 1fr auto; position: static; background: none; padding: 0; margin-top: var(--s2); }
.garage-detail .cd-actions .btn { font-size: 16px; padding: var(--s2) var(--s3); }
.gr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); margin-top: var(--s3); }
.gr-meter { height: 18px; }
.gr-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ui-success); }
.gr-meter i.warn { background: var(--ui-accent); }
.gr-meter i.bad { background: #b8574c; }
.gr-meter b { position: absolute; right: var(--s2); top: 0; font-family: var(--display); font-size: 14px; line-height: 18px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.gr-tyres { display: flex; flex-direction: column; gap: 3px; }
.gr-tyre { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; padding: 4px var(--s2); background: rgba(255, 255, 255, 0.03); font-size: 13px; }
.gr-tyre.current { border-left: 3px solid var(--ui-accent); }
.gr-tyre b { font-family: var(--display); letter-spacing: 0.1em; font-size: 14px; }
.gr-tyre i, .gr-sub { font-style: normal; color: var(--ui-text-muted); font-size: 12px; letter-spacing: 0; }
.gr-tyre .btn.small { font-size: 13px; padding: 5px var(--s3); white-space: nowrap; }
.pips { display: inline-flex; gap: 4px; }
.pip { width: 12px; height: 12px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; }
.pip.on { background: var(--ui-accent); border-color: var(--ui-accent); }

/* Upgrade cards: icon · name + level pips · effect now / next · buy */
.gr-ups { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s2); }
.up-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--ui-panel-light); border: 1px solid var(--ui-border); }
.up-card.maxed { border-color: rgba(242, 178, 51, 0.4); }
.up-top { display: flex; align-items: center; gap: var(--s3); }
.up-ico { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: var(--ui-accent); flex: none; }
.up-ico .ico { width: 24px; height: 24px; }
.up-name { flex: 1; min-width: 0; }
.up-name b { display: block; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 20px; letter-spacing: 0.06em; line-height: 1.05; }
.up-lvl { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--ui-text-muted); }
.up-fx { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ui-border); }
.up-fx div { background: var(--ui-panel-solid); padding: 3px var(--s2) 4px; }
.up-fx span { display: block; font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.18em; color: var(--ui-text-muted); }
.up-fx b { font-family: var(--display); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.up-fx .nx b { color: var(--ui-accent); }
.up-text { font-size: 12.5px; line-height: 1.35; color: var(--ui-text-muted); }
.up-card .btn { margin: 0; font-size: 15px; padding: 7px var(--s3); }

.gr-perfs { display: flex; flex-direction: column; gap: 1px; }
.gr-perf { display: grid; grid-template-columns: 1fr 100px 100px; gap: var(--s2); padding: 3px var(--s2); font-size: 13px; background: rgba(255, 255, 255, 0.03); }
.gr-perf span:first-child { color: var(--ui-text-muted); font-family: var(--display); letter-spacing: 0.12em; }
.gr-perf b { font-family: var(--display); font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.gr-perf span:nth-child(2) { text-align: right; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }

/* Career map */
.map-card { width: calc(100vw - 32px); height: calc(100vh - 32px); max-width: 1500px; padding: var(--s4) var(--s5) var(--s3); }
.map-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.map-legend { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; }
.map-legend .lg { padding: 2px var(--s2); border: 1px solid var(--ui-border-strong); border-left: 4px solid; }
.lg.st-open { border-left-color: var(--ui-text); }
.lg.st-active { border-left-color: var(--ui-accent); color: var(--ui-accent); }
.lg.st-done { border-left-color: var(--ui-success); color: var(--ui-success); }
.lg.st-locked { border-style: dashed; border-left-style: solid; border-left-color: #555a63; color: var(--ui-text-muted); }
.lg-line { color: var(--ui-text-muted); padding-left: 30px; position: relative; text-transform: uppercase; }
.lg-line::before { content: ''; position: absolute; left: 2px; top: 50%; width: 22px; border-top: 2px solid #8a8f98; }
.lg-line.podium::before { border-top-style: dashed; }
.map-tools { margin-left: auto; display: flex; gap: 6px; }
.map-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: var(--s3); margin-top: var(--s3); }
.map-canvas { position: relative; min-height: 0; overflow: hidden; background: #0e1013; border: 1px solid var(--ui-border); cursor: grab; touch-action: none; user-select: none; }
.map-canvas.dragging { cursor: grabbing; }
.map-canvas svg { display: block; width: 100%; height: 100%; }
.map-detail { padding: 2px var(--s1) 0 0; }
.mpd-state { margin: var(--s1) 0 2px; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: 0.12em; color: var(--ui-text-muted); }
.mpd-state.st-open { color: var(--ui-text); } .mpd-state.st-active { color: var(--ui-accent); } .mpd-state.st-done { color: var(--ui-success); } .mpd-state.st-locked { color: #e8a39b; }
.mpd-why { margin: 6px 0; padding: 6px var(--s2); font-size: 13px; line-height: 1.4; color: #f0c2bb; background: var(--ui-danger-soft); border-left: 3px solid var(--ui-danger); }
.mpd-why b { font-family: var(--display); letter-spacing: 0.14em; font-size: 12px; margin-right: 6px; color: #e8a39b; }
.mpd-actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); margin-top: var(--s3); }
.mpd-actions .btn { margin: 0; font-size: 18px; padding: 10px var(--s3); }
.mpd-actions .btn:only-child { grid-column: 1 / span 2; }
.mp-band { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.06); }
.mp-band.future { fill: rgba(255, 255, 255, 0.01); stroke-dasharray: 6 5; }
.mp-tier { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 22px; fill: var(--ui-text); letter-spacing: 0.04em; }
.mp-tier-sub { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; fill: var(--ui-success); }
.mp-tier-sub.no { fill: #e8a39b; }
.mp-band.future + .mp-tier, .mp-band.future + .mp-tier + .mp-tier-sub { fill: #6e737b; }
.mp-beyond { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; fill: #6e737b; }
.mp-lane { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.mp-lane-label { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; fill: var(--ui-text-muted); }
.mp-edge { fill: none; stroke: #4a4f57; stroke-width: 2; }
.mp-edge.podium { stroke-dasharray: 6 5; }
.mp-edge.lit { stroke: var(--ui-success); }
.mp-edge.future { stroke: #33373d; }
.mp-edge.hl { stroke: var(--ui-accent); stroke-width: 3; }
.mp-node { cursor: pointer; }
.mp-box { fill: #1e2127; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.mp-bar { fill: #d6d2c8; }
.mp-name { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 14px; fill: var(--ui-text); letter-spacing: 0.02em; }
.mp-sub { font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; fill: var(--ui-text-muted); }
.mp-node:hover .mp-box { fill: #262a31; }
.st-active .mp-box { fill: #2b2617; stroke: var(--ui-accent); }
.st-active .mp-bar, .st-active .mp-sub { fill: var(--ui-accent); }
.st-done .mp-bar, .st-done .mp-sub { fill: var(--ui-success); }
.st-done .mp-box { stroke: rgba(111, 196, 125, 0.45); }
.st-locked .mp-box { fill: #17191d; stroke-dasharray: 4 3; }
.st-locked .mp-bar { fill: #4b5058; }
.st-locked .mp-name { fill: #8b9098; }
.st-future .mp-box { fill: #141619; stroke: rgba(255, 255, 255, 0.08); stroke-dasharray: 3 4; }
.st-future .mp-bar { fill: #33373d; }
.st-future .mp-name, .st-future .mp-sub { fill: #5d6269; }
.mp-node.selected .mp-box { stroke: var(--ui-accent); stroke-width: 2.5; }

/* ------------------------------------------------------------- 10. RESULTS */
#results { background: rgba(8, 10, 14, 0.55); }
.results-card { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: var(--s5) var(--s5) var(--s4); background: rgba(18, 20, 24, 0.97); }
.results-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s3); }
#results-headline { font-size: clamp(40px, 5.4vw, 64px); }
#results-sub { font-family: var(--display); font-weight: 600; letter-spacing: 0.1em; font-size: 14px; color: var(--ui-text-muted); text-transform: uppercase; margin-top: var(--s1); }
.results-summary { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tile { min-width: 96px; padding: 5px var(--s3) 6px; background: var(--ui-panel-light); border: 1px solid var(--ui-border); border-top: 3px solid var(--ui-border-strong); font-family: var(--display); }
.tile span { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.2em; color: var(--ui-text-muted); }
.tile b { display: block; font-weight: 800; font-style: italic; font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tile.hero { border-top-color: var(--ui-accent); }
.tile.hero b { color: var(--ui-accent); font-size: 40px; }
.tile.money b { color: var(--ui-success); }
.tile.money b.neg { color: var(--ui-danger); }

.results-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s5); }
.results-cols:has(.results-career.hidden) { grid-template-columns: 1fr; }
.results-table { width: 100%; border-collapse: collapse; font-family: var(--display); font-size: 19px; margin-bottom: var(--s3); }
.results-table th { text-align: left; font-size: 12px; letter-spacing: 0.18em; color: var(--ui-text-muted); font-weight: 700; padding: 0 var(--s2) 6px; border-bottom: 1px solid var(--ui-border-strong); }
.results-table td { padding: 6px var(--s2); border-bottom: 1px solid var(--ui-border); font-variant-numeric: tabular-nums; }
.results-table td.p { font-weight: 800; font-style: italic; font-size: 24px; width: 52px; color: var(--ui-text-muted); }
.results-table td.n { font-weight: 700; letter-spacing: 0.04em; }
.results-table .traits { display: block; margin: 1px 0 0 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--ui-text-muted); }
.results-table td.g, .results-table td.b { color: var(--ui-text-muted); }
.results-table tr.me td { background: var(--ui-accent-soft); }
.results-table tr.me td:first-child { box-shadow: inset 3px 0 0 var(--ui-accent); }
.results-table tr.me td.p { color: var(--ui-accent); }
.results-table tr.me td.n { color: var(--ui-text); }
.results-table .running { color: var(--ui-text-muted); font-size: 16px; letter-spacing: 0.08em; }
.results-table .pen { margin-left: var(--s2); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--ui-danger); }
.swatch { display: inline-block; width: 10px; height: 18px; margin-right: 10px; vertical-align: -2px; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.results-buttons { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s3); margin-top: var(--s2); }
.results-buttons.single { grid-template-columns: 1fr; }
.results-buttons .btn { margin-top: 0; }
.results-buttons .btn:last-child:not(.primary) { }

.results-career { padding: var(--s3) var(--s4); background: var(--ui-panel-light); border-left: 3px solid var(--ui-accent); align-self: start; }
.rc-rewards { font-family: var(--display); font-size: 18px; letter-spacing: 0.04em; }
.rc-gains { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s2) 0; }
.rc-gain { padding: 2px var(--s3); font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; background: var(--ui-accent-soft); border: 1px solid rgba(242, 178, 51, 0.4); color: var(--ui-accent); font-variant-numeric: tabular-nums; animation: gain-in 0.4s var(--ease) both; }
.rc-gain:nth-child(2) { animation-delay: 0.12s; } .rc-gain:nth-child(3) { animation-delay: 0.24s; } .rc-gain:nth-child(4) { animation-delay: 0.36s; }
@keyframes gain-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rc-season { margin-top: 3px; font-style: normal; font-size: 15px; }
.rc-season b.neg { color: var(--ui-danger); }
.rc-breakdown { margin-bottom: 6px; }
.rc-breakdown .rcb-line { font-family: var(--body); }
.rc-milestone { margin: 0 0 var(--s3); padding: var(--s3); background: var(--ui-accent); color: var(--ui-accent-ink); }
.rcm-title { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 28px; line-height: 1; letter-spacing: 0.02em; }
.rcm-sub { margin-top: var(--s1); font-size: 13px; font-weight: 600; line-height: 1.35; }
.rc-milestone.bust { background: var(--ui-danger); color: #fff; }
.rc-milestone.debt { background: var(--ui-danger-soft); color: #e8a39b; border-left: 3px solid var(--ui-danger); }
.rc-milestone.debt .rcm-title { font-size: 20px; }
.rc-final { margin-top: var(--s1); font-family: var(--display); font-weight: 800; font-style: italic; font-size: 26px; color: var(--ui-accent); }
.rc-final span { font-style: normal; font-size: 15px; color: var(--ui-text); margin-left: var(--s2); }
.rc-title { margin: var(--s3) 0 3px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--ui-text-muted); }
.rc-title:empty { display: none; }
.rc-unlocks { margin-top: var(--s2); font-family: var(--display); font-size: 15px; letter-spacing: 0.06em; color: var(--ui-success); }
.rc-unlocks b { color: var(--ui-text); }
.rc-wear { margin-top: var(--s1); font-size: 13px; color: var(--ui-text-muted); }
.rc-wear b { color: var(--ui-text); }
.rc-wear b.neg { color: var(--ui-danger); }

/* ------------------------------------------------------ 10b. ENDLESS DRIFT */
/* Same tokens and panels as the race HUD: dark panels, one amber accent, bold
   condensed type. While drifting, the lap/position blocks are replaced by the
   score block (top left), the multiplier and feedback (top centre), the drift
   rows (top right) and the angle gauge (bottom centre); speed and surface stay
   bottom right. */
#drift-hud { position: absolute; inset: 0; pointer-events: none; }
#hud.drift-mode .hud-tl, #hud.drift-mode .hud-tc, #hud.drift-mode .hud-tr, #hud.drift-mode .hud-joker,
#hud.drift-mode .hud-bl, #hud.drift-mode #toast, #hud.drift-mode #finish { display: none !important; }

.dh-score {
  top: var(--margin); left: var(--margin); min-width: 230px;
  box-shadow: inset 4px 0 0 var(--ui-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.dh-scorenum { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 54px; line-height: 0.98; font-variant-numeric: tabular-nums; }
.dh-scorenum.pulse { animation: dh-pulse 0.45s var(--ease); }
@keyframes dh-pulse { 0% { transform: scale(1.12); color: var(--ui-accent); } 100% { transform: none; } }
.dh-sub { display: flex; justify-content: space-between; gap: var(--s4); font-family: var(--display); font-size: 15px; letter-spacing: 0.08em; }
.dh-sub span { color: var(--ui-text-muted); font-weight: 700; }
.dh-sub b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dh-sub b.good { color: var(--ui-success); }
.dh-sub b.bad { color: var(--ui-danger); }
/* career drift rounds: lap / time / target or gap / proximity under the score */
.dh-event { margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.12); }

.dh-center {
  position: absolute; top: var(--margin); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s1);
  width: min(380px, 33vw);
}
.dh-mult { position: relative; text-align: center; padding: 4px var(--s5) 6px; box-shadow: inset 0 -3px 0 var(--ui-accent); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); }
.dh-multnum { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 46px; line-height: 0.95; font-variant-numeric: tabular-nums; }
.dh-x { font-size: 28px; color: var(--ui-accent); margin-right: 2px; vertical-align: 0.35em; }
.dh-mult[data-tier='warm'] .dh-multnum b { color: #ffd277; }
.dh-mult[data-tier='hot'] .dh-multnum b { color: var(--ui-accent); }
.dh-mult[data-tier='max'] { box-shadow: inset 0 -3px 0 var(--ui-accent), 0 0 0 2px var(--ui-accent); }
.dh-mult[data-tier='max'] .dh-multnum b { color: var(--ui-accent); }
.dh-mult.pulse { animation: dh-pulse 0.4s var(--ease); }
.dh-link { position: relative; width: 78%; height: 5px; background: rgba(255, 255, 255, 0.1); overflow: hidden; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.dh-link i { display: block; height: 100%; width: 0; background: var(--ui-text-muted); transition: width 0.1s linear; }
.dh-link[data-mode='on'] i { background: var(--ui-success); }
.dh-link[data-mode='wait'] i { background: var(--ui-accent); }
.dh-status { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.24em; color: var(--ui-text-muted); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.dh-status[data-state='on'] { color: var(--ui-success); }
.dh-status[data-state='wait'] { color: var(--ui-accent); }
.dh-status[data-state='bad'] { color: var(--ui-danger); }

/* Feedback feed: small lines that scale in and fade, newest on top, at most four. */
#dh-feed { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: var(--s2); min-height: 120px; }
.dh-pop {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: 2px var(--s4) 3px;
  font-family: var(--display); font-weight: 800; font-style: italic; letter-spacing: 0.08em;
  background: rgba(16, 18, 22, 0.78); border-left: 3px solid var(--ui-text-muted);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: dh-pop 2.4s var(--ease) both;
}
.dh-pop b { font-size: 22px; font-weight: 800; }
.dh-pop span { font-size: 18px; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.dh-pop.k-bonus { border-left-color: var(--ui-accent); }
.dh-pop.k-big { border-left-color: var(--ui-accent); background: rgba(16, 18, 22, 0.88); }
.dh-pop.k-big b { font-size: 30px; color: var(--ui-accent); }
.dh-pop.k-bank { border-left-color: var(--ui-success); }
.dh-pop.k-bank span { color: var(--ui-success); }
.dh-pop.k-bad { border-left-color: var(--ui-danger); }
.dh-pop.k-bad b, .dh-pop.k-bad span { color: var(--ui-danger); }
@keyframes dh-pop {
  0% { opacity: 0; transform: translateY(-6px) scale(0.86); }
  9% { opacity: 1; transform: scale(1.06); }
  16% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(4px); }
}

.dh-rows { top: var(--margin); right: var(--margin); min-width: 230px; padding: var(--s2) var(--s4) var(--s2) var(--s5); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); box-shadow: inset -4px 0 0 var(--ui-accent); }
#dh-damage.warn { color: var(--ui-accent); }
#dh-damage.bad { color: var(--ui-danger); }

.dh-anglebox { position: absolute; bottom: var(--margin); left: 50%; transform: translateX(-50%); width: min(260px, 26vw); text-align: center; }
.dh-angle-row { display: flex; justify-content: center; align-items: baseline; gap: var(--s3); font-family: var(--display); }
.dh-angle-row b { font-weight: 800; font-style: italic; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: left; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.dh-anglebar { height: 6px; margin-top: 2px; background: rgba(255, 255, 255, 0.14); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.dh-anglebar i { display: block; height: 100%; width: 0; background: var(--ui-text-muted); transition: width 0.06s linear; }
.dh-anglebox[data-mode='on'] .dh-anglebar i { background: var(--ui-accent); }
.dh-hint { position: absolute; left: var(--margin); bottom: var(--margin); max-width: 30vw; font-family: var(--display); font-size: 14px; letter-spacing: 0.06em; line-height: 1.35; color: rgba(242, 239, 233, 0.78); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); animation: hint-fade 1.2s ease 16s forwards; }

/* Run-complete card */
#drift-results { background: rgba(8, 10, 14, 0.55); z-index: 40; }
.drift-card { width: min(760px, calc(100vw - 32px)); }
.drift-card .results-top { margin-bottom: var(--s2); }
.dr-hero { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin: var(--s2) 0 var(--s3); padding: var(--s3) var(--s4); background: var(--ui-panel-light); border-left: 4px solid var(--ui-accent); }
.dr-label { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.22em; color: var(--ui-text-muted); }
.dr-hero b { font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(48px, 7vw, 76px); line-height: 0.95; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
.dr-newtag { margin-left: auto; padding: 2px var(--s3); font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: 0.16em; background: var(--ui-accent); color: var(--ui-accent-ink); animation: dh-pulse 0.6s var(--ease) 0.4s both; }
#dr-sub { font-family: var(--display); font-weight: 600; letter-spacing: 0.1em; font-size: 14px; color: var(--ui-text-muted); text-transform: uppercase; margin-top: var(--s1); }
.dr-tiles { margin-bottom: var(--s4); }
.dr-tiles .tile { flex: 1 1 150px; }
.dr-tiles .tile.new { border-top-color: var(--ui-accent); }
.dr-tiles .tile.new b { color: var(--ui-accent); }

/* Set-up view */
.drift-rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2); font-size: 13.5px; line-height: 1.4; color: var(--ui-text-muted); }
.drift-rules li { padding-left: var(--s3); border-left: 2px solid var(--ui-border-strong); }
.drift-rules b { display: block; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; color: var(--ui-accent); }
#drift-stats > div:first-child { grid-column: span 2; }

/* -------------------------------------------------------- DRAG RACING */
/* The drag HUD (js/drag/DragHUD.js) replaces the race blocks: the tree and the
   phase prompt (top centre), the two timing slips (top left / right), the
   strip progress (under the tree) and the tachometer (bottom centre). */
#drag-hud { position: absolute; inset: 0; pointer-events: none; }
#hud.drag-mode .hud-tl, #hud.drag-mode .hud-tc, #hud.drag-mode .hud-tr, #hud.drag-mode .hud-joker,
#hud.drag-mode .hud-bl, #hud.drag-mode .hud-br, #hud.drag-mode #toast, #hud.drag-mode #finish, #hud.drag-mode #wrong-way { display: none !important; }

.dg-top { position: absolute; top: var(--margin); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.dg-tree { position: relative; display: flex; gap: 14px; padding: 8px 14px; box-shadow: inset 0 -3px 0 var(--ui-accent); }
.dg-lane { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dg-lane i { display: block; width: 22px; height: 22px; border-radius: 50%; background: #2a2620; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5); }
.dg-lane i[data-b='pre'], .dg-lane i[data-b='stage'] { width: 26px; height: 9px; border-radius: 4px; }
.dg-lane i.am { background: #3b2a12; }
.dg-lane i.gr { background: #12301a; }
.dg-lane i.rd { background: #341414; }
.dg-lane i.on { background: #fff3c4; box-shadow: 0 0 10px #fff3c4; }
.dg-lane i.am.on { background: #ffb21e; box-shadow: 0 0 14px #ffb21e; }
.dg-lane i.gr.on { background: #4dff63; box-shadow: 0 0 16px #4dff63; }
.dg-lane i.rd.on { background: #ff3324; box-shadow: 0 0 16px #ff3324; }
.dg-msg { text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); }
.dg-phase { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 34px; letter-spacing: 0.06em; line-height: 1; }
.dg-phase.good { color: var(--ui-success); }
.dg-phase.bad { color: var(--ui-danger); }
.dg-phase.warn { color: var(--ui-accent); }
.dg-hint { margin-top: 4px; max-width: 460px; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; color: rgba(242, 239, 233, 0.86); }
.dg-hint kbd { font-size: 12px; }

.dg-slip { top: var(--margin); min-width: 220px; padding: var(--s2) var(--s4); font-family: var(--display); }
.dg-me { left: var(--margin); box-shadow: inset 4px 0 0 var(--ui-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.dg-opp { right: var(--margin); box-shadow: inset -4px 0 0 var(--ui-text-muted); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
.dg-slip .dg-name { font-weight: 800; font-style: italic; font-size: 18px; letter-spacing: 0.06em; display: flex; justify-content: space-between; gap: var(--s3); }
.dg-slip .dg-name small { font-size: 12px; letter-spacing: 0.18em; color: var(--ui-text-muted); font-style: normal; align-self: center; }
.dg-slip .dg-et { font-weight: 800; font-style: italic; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.dg-slip .dg-row { display: flex; justify-content: space-between; gap: var(--s4); font-size: 14px; letter-spacing: 0.08em; }
.dg-slip .dg-row span { color: var(--ui-text-muted); font-weight: 700; }
.dg-slip .dg-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-slip .bad { color: var(--ui-danger); }
.dg-slip .good { color: var(--ui-success); }
.dg-slip .warn { color: var(--ui-accent); }

.dg-progress { position: absolute; top: calc(var(--margin) + 262px); left: 50%; transform: translateX(-50%); width: min(420px, 40vw); height: 14px; }
.dg-progress .dg-track { position: absolute; left: 0; right: 0; top: 6px; height: 3px; background: rgba(255, 255, 255, 0.25); }
.dg-progress b { position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ui-text-muted); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.dg-progress b.me { background: var(--ui-accent); }
.dg-progress .dg-fin { position: absolute; right: -2px; top: -2px; width: 4px; height: 18px; background: #fff; }

.dg-tach { position: absolute; bottom: var(--margin); left: 50%; transform: translateX(-50%); width: min(560px, 52vw); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s4); padding: var(--s2) var(--s4); box-shadow: inset 0 -3px 0 var(--ui-accent); }
.dg-gearbox { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; }
.dg-gearbox b { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 52px; line-height: 0.9; }
.dg-tachbar { position: relative; height: 18px; margin-top: 6px; background: rgba(255, 255, 255, 0.1); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.dg-tachbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fa0b0 0%, #e9e4d8 70%, var(--ui-accent) 88%, var(--ui-danger) 100%); }
.dg-tachbar.shift i { background: var(--ui-success); }
.dg-tachbar.limit i { background: var(--ui-danger); }
.dg-tachbar span { position: absolute; top: -3px; bottom: -3px; width: 3px; }
#dg-launchmark { background: #6fc4ff; }
#dg-shiftmark { background: var(--ui-success); }
.dg-readouts { display: flex; align-items: baseline; gap: var(--s3); font-family: var(--display); font-size: 14px; letter-spacing: 0.08em; }
#dg-rpmnum { color: var(--ui-text-muted); font-variant-numeric: tabular-nums; min-width: 86px; }
#dg-flags { flex: 1; font-weight: 800; letter-spacing: 0.18em; color: var(--ui-danger); }
#dg-flags.good { color: var(--ui-success); }
#dg-speed { font-weight: 800; font-style: italic; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }

/* Race result card */
#drag-results { background: rgba(8, 10, 14, 0.55); z-index: 40; }
.drag-card { width: min(860px, calc(100vw - 32px)); }
#dgr-sub { font-family: var(--display); font-weight: 600; letter-spacing: 0.1em; font-size: 14px; color: var(--ui-text-muted); text-transform: uppercase; margin-top: var(--s1); }
#dgr-head.win { color: var(--ui-accent); }
#dgr-head.lose { color: var(--ui-text); }
#dgr-head.red { color: var(--ui-danger); }
.dgr-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s4); margin: var(--s3) 0 var(--s4); }
.dgr-slip { width: 100%; border-collapse: collapse; font-family: var(--display); }
.dgr-slip th { text-align: right; font-weight: 800; font-style: italic; font-size: 18px; letter-spacing: 0.06em; padding: 4px var(--s2) 6px; border-bottom: 2px solid var(--ui-border-strong); }
.dgr-slip th:first-child { text-align: left; }
.dgr-slip th.win { color: var(--ui-accent); }
.dgr-slip td { padding: 5px var(--s2); font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--ui-border); }
.dgr-slip td:first-child { text-align: left; color: var(--ui-text-muted); font-weight: 700; letter-spacing: 0.1em; font-size: 13px; }
.dgr-slip tr.key td { font-size: 20px; font-weight: 800; }
.dgr-slip td.better { color: var(--ui-success); }
.dgr-slip td.bad { color: var(--ui-danger); }
.dgr-side { display: flex; flex-direction: column; gap: var(--s2); }
.dgr-side .tile { flex: none; }

/* Drag tuning screen */
#drag-tune { z-index: 45; }
.drag-tune-card { width: min(980px, calc(100vw - 32px)); }
.dt-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s5); }
.dt-side { display: flex; flex-direction: column; gap: var(--s2); }
.dt-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; }
.dt-actions .btn.primary { flex: 1 1 100%; margin: var(--s2) 0 0; }
.drag-setup .seg-row.focus > span { color: var(--ui-accent); }
.drag-setup .seg-row.focus { box-shadow: inset 3px 0 0 var(--ui-accent); padding-left: 6px; }
.drag-setup .stepper .btn.small { padding: 3px 10px; min-width: 34px; }
.drag-setup .segs { display: flex; flex-wrap: wrap; gap: 4px; }
.drag-setup .segs .btn.small { font-size: 13px; padding: 4px 10px; }
.dt-note-line { font-size: 12.5px; color: var(--ui-text-muted); line-height: 1.4; }
@media (max-width: 860px) { .dt-body { grid-template-columns: 1fr; } }

/* Drag setup (career screen / tuning) */
.drag-setup .seg-row { display: grid; grid-template-columns: 112px 1fr; gap: var(--s2); align-items: center; margin-bottom: 4px; }
.drag-setup .seg-row > span { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--ui-text-muted); }
.drag-setup .stepper { display: flex; align-items: center; gap: 6px; }
.drag-setup .stepper b { min-width: 72px; text-align: center; font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.drag-predict { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: var(--s2) 0; }
.drag-predict > div { padding: 4px 8px; background: var(--ui-panel-light); font-family: var(--display); }
.drag-predict span { display: block; font-size: 11px; letter-spacing: 0.14em; color: var(--ui-text-muted); font-weight: 700; }
.drag-predict b { font-size: 18px; font-variant-numeric: tabular-nums; }
.drag-predict i { font-style: normal; font-size: 12px; margin-left: 4px; }
.drag-predict i.better { color: var(--ui-success); }
.drag-predict i.worse { color: var(--ui-danger); }

/* -------------------------------------------------------- 11. RESPONSIVE */
/* 1280x720 / 1366x768 laptops: tighter vertical rhythm. */
@media (max-height: 800px) {
  .screen-card { padding-top: var(--s3); }
  .career-card { height: calc(100vh - 24px); }
  .brand { margin-bottom: var(--s4); }
  .nav-btn { padding-top: var(--s2); padding-bottom: var(--s2); }
  .nav-btn.primary { padding-top: var(--s3); padding-bottom: var(--s3); }
  .hud-posnum { font-size: 56px; }
  #countdown-text { font-size: 92px; }
}
@media (max-height: 640px) {
  .logo { font-size: 52px; }
  .tagline, .menu-foot { display: none; }
  .wallet .w-sm { display: none; }
  .event-map { height: 80px; }
}
/* Big monitors: the HUD, countdown and notifications scale up so they read from the same distance. */
@media (min-height: 1000px) and (min-width: 1700px) {
  #hud, #countdown, #notify { zoom: 1.25; }
}
@media (min-height: 1300px) {
  #hud, #countdown, #notify { zoom: 1.5; }
}
/* Ultrawide: keep the HUD on the 16:9 safe area instead of the far edges. */
@media (min-aspect-ratio: 21/9) {
  :root { --margin: 2.5vw; }
}
@media (max-width: 1100px) {
  .career-body { grid-template-columns: 280px 1fr; }
}
@media (max-width: 860px) {
  #view-setup, #view-drift { overflow-y: auto; }
  .setup-grid { display: block; flex: none; }
  .setup-right { overflow: visible; margin-top: var(--s3); }
  .track-list { max-height: 200px; flex: none; }
}
@media (max-width: 900px) {
  #title-screen { justify-content: center; padding-left: 0; background: rgba(8, 10, 14, 0.5); }
  .car-body { grid-template-columns: 1fr; overflow-y: auto; }
  .car-list { max-height: 150px; }
  .car-bars { grid-template-columns: 1fr; }
  #car-preview { height: 170px; }
  .map-body { grid-template-columns: 1fr; grid-template-rows: 1fr 40%; }
  .map-legend { display: none; }
  .opt-grid { grid-template-columns: 1fr; }
  .results-cols { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .fin-tiles { grid-template-columns: 1fr 1fr; }
  .fin-cols { grid-template-columns: 1fr; }
  .fin-season { grid-template-columns: 1fr 80px 80px 80px; }
  .career-body { grid-template-columns: 1fr; overflow-y: auto; }
  .career-list { max-height: 170px; }
  .career-tiers { grid-template-columns: repeat(4, 1fr); }
  .wallet b { font-size: 18px; }
  #garage-preview { height: 150px; }
}
@media (max-width: 720px) {
  .hud-posnum { font-size: 44px; }
  .hud-lapnum, .hud-time { font-size: 28px; }
  .hud-tr .hud-rows { font-size: 14px; }
  .hud-bl, .hud-joker, .dh-hint { display: none; }
  .dh-scorenum { font-size: 38px; }
  .dh-score, .dh-rows { min-width: 0; }
  .logo { font-size: 54px; }
  .results-card { padding: var(--s4); }
  .results-table { font-size: 16px; }
  .results-table th:nth-child(4), .results-table td.g { display: none; }
  .controls { grid-template-columns: 1fr; }
}