:root {
  color-scheme: dark;
  /* Shared layout; the approved arcade skin lives in arcade.css. */
  --void: #141619;
  --panel: #282b2e;
  --line: #747875;
  --ink: #101610;
  --silver: #f7f8ed;
  --muted: #cbd0ca;
  --amber: #ffda43;
  --action: #83df29;
  --mint: #64f0c5;
  --danger: #ff6aa6;
  --credit: #64f0c5;
  --display: "Exo 2", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font: 16px var(--display);
  color: var(--silver);
  background: var(--void);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, #3a3170, #14112b 75%); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, canvas:focus-visible, #stop-title:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
[hidden], .overlay [hidden] { display: none !important; }
.phone { position: relative; width: min(390px, 100vw, calc(100dvh * 390 / 844)); aspect-ratio: 390 / 844; overflow: hidden; isolation: isolate; container-type: inline-size; background: var(--void); border-radius: 24px; box-shadow: 0 0 0 1px #607b8240, 0 28px 100px #000b; }
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
/* Flight instruments stay compact, leaving the road to carry the action. */
header { isolation: isolate; position: absolute; inset: 0 0 auto; padding: 10px 16px 25px; background: none; pointer-events: none; }
header::before { content: ""; position: absolute; inset: 0; height: 180px; background: linear-gradient(#080f18fc 75%, #080f1800); z-index: -1; }
.title-row { display: flex; justify-content: space-between; align-items: center; height: 38px; margin-bottom: 8px; }
h1, .paddock-top > span { margin: 0; font: italic 900 19px "Avenir Next Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: -1px; color: var(--silver); }
h1::before, .paddock-top > span::before { content: '◢'; color: var(--amber); margin-right: 7px; font-style: normal; }
/* Help and pause sit together in the top bar. */
.title-actions { display: flex; gap: 8px; align-items: center; }
.help-button { pointer-events: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #172933; font-size: 20px; font-weight: 800; color: var(--amber); }
/* First-race coaching sits just above the wheel it's talking about. */
.coach { position: absolute; bottom: calc(100% - 4px); left: 16px; right: 16px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--amber); border-radius: 12px; background: #0c1924f2; box-shadow: 0 6px 20px #000a; }
.coach p { margin: 0; flex: 1; font-size: 16px; line-height: 1.35; font-weight: 600; }
.coach button { flex: none; min-height: 44px; padding: 0 10px; font-size: 14px; color: var(--muted); background: none; border: 1px solid #3c5664; border-radius: 6px; }
.help-page { padding: 24px 20px 28px; }
.help-page h2 { margin: 0 0 8px; font: italic 900 40px "Avenir Next Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; color: var(--amber); }
.help-page h3 { margin: 18px 0 4px; font-size: 16px; color: var(--amber); text-transform: uppercase; letter-spacing: .5px; }
.help-page p { margin: 0; font-size: 16px; line-height: 1.45; }
.help-actions { display: grid; gap: 10px; margin-top: 24px; }
.help-actions button { min-height: 48px; font-size: 16px; }
#help-tips[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); }
#pause { pointer-events: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #172933; font-size: 18px; }
.cockpit { display: grid; grid-template-columns: 1fr .8fr 1.25fr; gap: 12px; align-items: end; margin-bottom: 13px; }
.cockpit > div { display: grid; }
.cockpit span { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.cockpit strong { font: italic 800 43px "Avenir Next Condensed", "Arial Narrow", sans-serif; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
#position { color: var(--amber); }
.cockpit small { font: 500 16px "Avenir Next", sans-serif; color: var(--muted); }
#clock { font: 24px "SFMono-Regular", Consolas, monospace; letter-spacing: -1.8px; padding-bottom: 4px; }
.meters { display: flex; gap: 12px; }
.meters > div { flex: 1; min-width: 0; }
.meters label { display: flex; justify-content: space-between; color: var(--muted); text-transform: uppercase; font-size: 14px; margin-bottom: 5px; }
.meters b { color: var(--silver); font-size: 14px; font-weight: 600; }
.meter-shell { position: relative; height: 7px; }
.meter-shell::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),#080f18 calc(10% - 2px) 10%); pointer-events: none; }
meter { display: block; appearance: none; width: 100%; height: 7px; border: 0; border-radius: 0; background: #304450; }
meter::-webkit-meter-bar { height: 7px; background: #304450; border: 0; border-radius: 0; }
meter::-webkit-meter-inner-element { display: block; }
meter::-webkit-meter-optimum-value { background: var(--mint); }
#heat::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value { background: var(--amber); }
meter::-webkit-meter-even-less-good-value { background: var(--danger); }
.hot #heat-value, .damaged #hull-value, .dry #fuel-value { color: var(--danger); }
.bottom-deck { position: absolute; inset: auto 0 0; padding: 18px 14px 10px; background: linear-gradient(#080f1800, #080f18ea 50%); }
.wheel-control { position: relative; width: 100%; height: 134px; border: 0; background: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.wheel-art { width: calc(100% - 72px); margin-inline: 36px; height: 100%; display: block; overflow: hidden; pointer-events: none; }
.wheel-control:has(#steering:focus-visible) .wheel-art { filter: drop-shadow(0 0 4px var(--amber)); }
/* Keep the arrow art fixed while generous, stable hit areas reach the screen edges. */
.wheel-direction { position: absolute; z-index: 1; top: calc(46% - 32px); width: 84px; height: 92px; padding: 0; border: 0; background: none; touch-action: none; user-select: none; -webkit-user-select: none; opacity: .55; filter: drop-shadow(0 2px 3px #071127); transition: opacity .12s; }
.wheel-direction svg { position: absolute; top: 0; display: block; width: 64px; height: 64px; pointer-events: none; transition: transform .12s; }
.wheel-left svg { left: 10px; }.wheel-right svg { right: 10px; }
.wheel-direction.active { opacity: 1; filter: drop-shadow(0 0 8px #ffd071aa); }
.wheel-direction.active svg { transform: scale(1.12); }
.wheel-direction.nudge svg { animation: arrow-nudge 1s ease-in-out infinite; }
@keyframes arrow-nudge { 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .wheel-direction.nudge { opacity: 1; }.wheel-direction.nudge svg { animation: none; } }
.wheel-left { left: -14px; }.wheel-right { right: -14px; }
#steering { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; touch-action: none; }
#steering:active { cursor: grabbing; }
.utility { display: flex; justify-content: space-between; align-items: center; }
.utility button { background: transparent; border: 0; min-height: 44px; min-width: 44px; font-size: 26px; color: var(--muted); }
#trackpad { font-size: 14px; color: var(--silver); padding-inline: 12px; }
#trackpad-help { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
@media (hover: none), (pointer: coarse) { #trackpad, #trackpad-help { display: none; } }
/* Heat milestones: a quick coloured call-out under the gauges, orange through to red. */
.heat-toast { margin: 8px 0 0; text-align: center; font: italic 900 24px "Avenir Next Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 2px 6px #080f18, 0 0 2px #080f18; animation: heat-toast 1.8s ease-out both; }
@keyframes heat-toast { 0% { opacity: 0; transform: translateY(-6px) scale(.96); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .heat-toast { animation: none; } }
.heat-50 { color: #ffb347; } .heat-75 { color: #ff8c42; } .heat-85 { color: #ff5e3a; } .heat-95 { color: #ff2d2d; }
/* Pit clock: live time against par during a stop, then the result for a few seconds after. */
.pit-clock { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 8px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #080f18; }
.pit-clock span { color: var(--amber); font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.pit-clock strong { font: 24px "SFMono-Regular", Consolas, monospace; letter-spacing: -1px; }
#heat-warning { margin-top: 8px; padding: 0; color: #ff706b; background: transparent; border: 0; text-align: center; text-shadow: 0 1px 3px #080f18; }
#heat-warning strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: .5px; }
#heat-warning span { display: block; font-size: 14px; font-weight: 700; }
#heat-warning.cooling { color: #ff9187; background: transparent; }
#heat-frame { position: absolute; inset: 0; border: 4px solid #ff625e; box-shadow: inset 0 0 35px #f64a3e50; pointer-events: none; }
#countdown { position: absolute; top: 29%; width: 100%; text-align: center; font: italic 900 90px "Avenir Next Condensed", sans-serif; color: var(--amber); text-shadow: 0 4px 25px #000; pointer-events: none; }
/* A single paddock shell: identity, journey, artwork, decision, action. */
.overlay { position: absolute; inset: 0; z-index: 3; background: var(--void); overflow-y: auto; }
.paddock, .briefing { position: relative; min-height: 100%; padding: 22px 20px 20px; display: flex; flex-direction: column; background: radial-gradient(ellipse at 100% 20%, #26475070, transparent 55%), linear-gradient(150deg,#111f2c,#080f18 65%); }
.paddock::before, .briefing::before { content: ''; position: absolute; top: 0; left: 20px; width: 60px; height: 3px; background: var(--amber); box-shadow: 64px 0 #3d5664, 128px 0 #3d566440; }
.paddock-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.paddock-top > span { font-size: 20px; max-width: 65%; }
#stop-wallet { white-space: nowrap; background: #142e25; border: 1px solid #385d48; padding: 6px 9px; border-radius: 5px; font-size: 17px; }
.credits, .lineup-choice span.credits { color: var(--credit); font-weight: 800; white-space: nowrap; }
.paddock-top .credits { font: inherit; color: var(--credit); }
.stop-route { display: flex; gap: 5px; color: var(--muted); font-size: 14px; line-height: 1.4; margin: 15px 0 20px; }
.journey-step { flex: 1; border-top: 2px solid #344651; padding-top: 7px; }
.journey-step.current { color: var(--amber); border-color: var(--amber); }
.journey-step.done { color: var(--mint); border-color: #6caa9d; }
.stop-tagline { margin: 0 0 5px; color: var(--mint); font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
h2 { font: italic 900 clamp(36px,12cqw,48px)/.98 "Avenir Next Condensed", "Arial Narrow", sans-serif; letter-spacing: -1.7px; text-transform: uppercase; color: var(--silver); margin: 0 0 12px; }
.stop-art { min-height: 120px; height: 230px; margin: 8px -8px 16px; touch-action: pan-y; }
.stop-art svg { display: block; width: 100%; height: 100%; }
.stop-art.lineup { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; height: auto; min-height: 0; margin: 12px 0 14px; }
.lineup-choice { position: relative; min-width: 0; overflow: hidden; padding: 7px 6px 11px; background: linear-gradient(150deg,#243a46,#14232f 70%); border: 1px solid #4c6471; border-radius: 4px 16px 4px 4px; text-align: center; color: var(--silver); box-shadow: inset 0 1px #ffffff0d, 0 6px 16px #0003; }
.lineup-choice svg { width: 100%; height: 106px; filter: drop-shadow(0 8px 8px #0006); }
.lineup-choice strong, .lineup-choice span, .lineup-choice small { display: block; font-size: 14px; line-height: 1.35; }
.lineup-choice strong { font-size: 16px; font-weight: 700; }
.lineup-choice span { margin-top: 3px; }.lineup-choice span .credits { display: inline; }
.lineup-choice small { color: var(--muted); margin-top: 6px; border-top: 1px solid #607b822f; padding-top: 5px; }
.lineup-choice[aria-pressed="true"] { border-color: var(--amber); background: linear-gradient(145deg,#4b493a,#22313c 65%); box-shadow: inset 0 3px var(--amber), 0 0 20px #ffcf7910; }
.lineup-choice[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 7px; right: 9px; color: var(--amber); font-size: 16px; font-weight: 900; }
.lineup-choice:disabled { opacity: .5; }
.stop-info { background: #152531; border: 1px solid #3c5360; border-left: 3px solid var(--mint); border-radius: 3px 10px 10px 3px; padding: 11px 13px; margin: 0 0 14px; }
.stop-info p { font-size: 16px; line-height: 1.4; margin: 0; }
.stop-info .stop-notice:not(:empty) { margin-top: 5px; color: var(--muted); }
.stop-info p:empty, .stop-options:empty { display: none; }
.stop-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.stop-options button { flex: 1 1 40%; min-height: 48px; padding: 10px; font-size: 16px; background: #182b36; border: 1px solid #4c6572; border-radius: 5px; text-align: left; }
.stop-options button[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); background: #343a33; }
.stop-actions { margin-top: auto; padding-top: 12px; border-top: 1px solid #344651; }
.primary { width: 100%; min-height: 56px; background: var(--amber); color: #17232b; border: 1px solid #ffe5ad; border-radius: 4px 14px 4px 4px; font: italic 900 23px "Avenir Next Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .4px; box-shadow: inset 0 -4px #ba8f45, 0 4px 16px #0004; }
.primary:hover { background: #ffe0a3; }.primary:active { transform: translateY(1px); }
.primary.credit-action { background: #1e3d30; border-color: #5bba83; color: var(--silver); box-shadow: inset 0 -3px #10271b; }
.stop-secondary { display: block; width: 100%; min-height: 44px; margin-top: 5px; border: 0; background: none; color: var(--muted); font-size: 16px; }
.stop-secondary:hover { color: var(--silver); }
/* League badges introduce the content packages without a checkout simulation. */
.paddock[data-stage="leagues"] .paddock-top { margin-bottom: 25px; }
.paddock[data-stage="leagues"] .paddock-top > span { max-width: none; }
.paddock[data-stage="leagues"] .stop-art { display: grid; gap: 10px; height: auto; min-height: 0; margin: 16px 0; }
.league-card { display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 12px; border: 1px solid var(--line); border-radius: 5px 16px 5px 5px; background: linear-gradient(130deg,#233a46,#12202b); color: var(--muted); text-align: left; }
.league-card svg { width: 46px; height: 60px; flex-shrink: 0; }
.league-card .league-lock { width: 18px; height: 22px; }
.stop-tagline:empty { display: none; }
.league-card > span { flex: 1; }.league-card strong { display: block; font: italic 900 27px "Avenir Next Condensed",sans-serif; text-transform: uppercase; color: var(--silver); }
.league-card small { display: block; font-size: 14px; line-height: 1.3; margin-top: 4px; }
.league-card b { font-size: 14px; }.league-card[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); background: linear-gradient(130deg,#3b3c32,#182a35); }
.unlock-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.cash-price { color: var(--credit); font-size: 25px; white-space: nowrap; }
.unlock-detail { display: block; font-size: 14px; color: var(--muted); }
.paddock[data-stage="leagues"] .stop-notice { font-size: 14px; }
@media (max-height: 740px) { .paddock[data-stage="leagues"] .paddock-top { margin-bottom: 16px; }.league-card { min-height: 84px; padding: 9px; gap: 9px; }.league-card svg { width: 38px; height: 52px; }.league-card strong { font-size: 25px; } }
/* Between meetings is a set of destinations, not a form. */
.paddock[data-stage="route"] .stop-art { display: none; }
.paddock[data-stage="route"] .stop-info { margin-top: 12px; }
.paddock[data-stage="route"] .stop-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stop-options .destination { display: flex; flex-direction: column; align-items: flex-start; padding: 12px; min-height: 180px; background: linear-gradient(145deg,#25404a,#12222d); }
.destination svg { width: 100%; height: 100px; margin-bottom: 7px; }
.destination strong { font-size: 17px; }.destination small { font-size: 14px; color: var(--muted); margin-top: 3px; }
.paddock[data-stage="ready"] .stop-art { height: 220px; margin: 15px 0; background: linear-gradient(#2b465027 1px,transparent 1px),linear-gradient(90deg,#2b465027 1px,transparent 1px); background-size: 22px 22px; border: 1px solid #3c5360; border-radius: 8px; color: var(--mint); }
.paddock[data-stage="ready"] .stop-options button { font-size: 14px; text-align: center; }
.briefing { justify-content: center; }
.race-badge { font-size: 14px; color: var(--mint); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.briefing h2 { font-size: clamp(58px,22cqw,86px); margin: 28px 0; color: var(--amber); }
#overlay-copy { font-size: 17px; line-height: 1.5; margin: 0 0 24px; color: var(--muted); }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; }
.result-stats > div { padding: 14px 8px; background: #182b36; border: 1px solid var(--line); border-radius: 5px; }
.result-stats span { display: block; color: var(--muted); font-size: 14px; }
.result-stats strong { display: block; font: 700 22px "Avenir Next Condensed",sans-serif; margin-top: 4px; }
.result-reward { padding: 18px; border: 1px solid #47775a; background: #173126; margin-bottom: 24px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
/* Championship table on the results screen and in the paddock. */
.standings { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; font-variant-numeric: tabular-nums; }
.standings caption { text-align: left; color: var(--amber); font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 6px; }
.standings th { text-align: left; color: var(--muted); font-size: 14px; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid #2c4350; }
.standings td { padding: 5px 6px; border-bottom: 1px solid #1a2c38; }
.standings td:first-child, .standings th:first-child { width: 2.5em; }
.standings td:last-child, .standings th:last-child, .standings td:nth-child(3), .standings th:nth-child(3) { text-align: right; }
/* Ship icons and driver portraits on cards and paddock scenes. */
.card-art { display: block; width: 100%; height: 96px; margin: 4px 0 6px; }
.scene-art { display: block; width: 100%; height: 180px; margin: 8px auto; }
.racer-art { width: 40px; height: 40px; }
.standings .driver { display: flex; align-items: center; gap: 8px; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #1d3140; }
.avatar.you { display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #080f18; background: var(--amber); }
.standings small { color: var(--muted); font-size: 14px; font-weight: 500; }
.standings tr.you td { color: var(--amber); font-weight: 800; }
.season-awards { list-style: none; margin: -8px 0 20px; padding: 0; }
.season-awards li { display: flex; justify-content: space-between; padding: 8px 12px; margin-bottom: 6px; border: 1px solid #47775a; background: #173126; border-radius: 5px; font-size: 16px; }
.result-note { margin: -10px 0 22px; font-size: 16px; font-weight: 700; color: var(--amber); }
.result-reward small { display: block; font-size: 14px; color: var(--muted); margin-top: 5px; }
.crew-progress { width: 100%; display: flex; gap: 10px; padding: 8px 0; }
.crew-progress span { flex: 1; text-align: center; padding: 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.crew-progress .trained { color: var(--amber); background: #3a3b30; border-color: var(--amber); }
.result-reward strong { font-size: 30px; }.result-reward span { font-size: 16px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; border: 0 !important; min-height: 0 !important; }
/* ---- Polished arcade theme layer -------------------------------------------------------------
   Layered indigo panels with a fine edge rather than outlines and drop shadows; one tactile game
   button; tangerine rings for what's selected. */
h1, .paddock-top > span, h2, .help-page h2, .briefing h2, .league-card strong, .primary, #countdown, .heat-toast, .cockpit strong { font-family: var(--display); font-style: normal; text-transform: none; letter-spacing: -.2px; }
h1, .paddock-top > span { font-weight: 700; font-size: 19px; white-space: nowrap; }
.paddock-top > span.title-actions { max-width: none; }
h1::before, .paddock-top > span::before { content: none; }
h2 { font-weight: 800; font-size: clamp(30px,9.5cqw,40px); line-height: 1.04; }
.briefing h2 { font-size: clamp(52px,19cqw,74px); color: var(--amber); }
.cockpit span, .meters label, .stop-tagline, .standings caption, .race-badge, .pit-clock span, .help-page h3 { text-transform: none; letter-spacing: 0; }
.cockpit strong { font-weight: 800; }
#clock, .pit-clock strong { font-family: var(--display); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
header::before { background: linear-gradient(#1f1b3dfa 72%, #1f1b3d00); }
.bottom-deck { background: linear-gradient(#1f1b3d00, #1f1b3dee 50%); }
meter, meter::-webkit-meter-bar { background: #3d3672; border-radius: 3px; }
.meter-shell::after { background: repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--void) calc(10% - 2px) 10%); }
.overlay { background: var(--void); }
/* The paddock floor keeps a faint light-grid. */
.paddock, .briefing { background: linear-gradient(#ffffff08 1px, transparent 1px) 0 0/32px 32px, linear-gradient(90deg, #ffffff08 1px, transparent 1px) 0 0/32px 32px, var(--void); }
.paddock::before, .briefing::before { content: none; }
.paddock-top, .race-badge { border-color: #ffffff14; }
#stop-wallet { background: #ffffff0d; border: 1px solid #64f0c540; border-radius: 999px; padding: 5px 12px; }
.lineup-choice, .stop-options button, .league-card, .stop-info, .result-stats > div, .crew-progress span {
  background: var(--panel); border: 1px solid #ffffff14; box-shadow: inset 0 1px #ffffff0f; }
.lineup-choice, .stop-options button, .league-card, .result-stats > div { border-radius: 14px; }
.stop-info { border-radius: 12px; border-left: 1px solid #ffffff14; }
.help-button, #pause { background: #ffffff10; border: 1px solid #ffffff1f; }
/* Selected: a crisp tangerine ring and a slightly brighter panel. */
.lineup-choice[aria-pressed="true"], .stop-options button[aria-pressed="true"], .league-card[aria-pressed="true"] {
  background: #352e66; border-color: var(--action); color: var(--silver); box-shadow: 0 0 0 1px var(--action), inset 0 1px #ffffff14; }
.lineup-choice[aria-pressed="true"]::after { color: var(--action); }
.lineup-choice svg { filter: none; }
.journey-step { border-color: #ffffff1f; }
.journey-step.current { color: var(--silver); border-color: var(--action); }
.journey-step.done { color: var(--mint); border-color: var(--mint); }
/* The one tactile control: a game button with a pressable bottom edge. */
.primary { background: var(--action); color: var(--ink); border: 0; border-radius: 14px; font-weight: 800; font-size: 20px; box-shadow: inset 0 -4px #c8611f; }
.primary:hover { background: #ffa05c; }
.primary:active { transform: translateY(2px); box-shadow: inset 0 -2px #c8611f; }
.primary.credit-action { background: #183d39; color: var(--silver); border: 1px solid var(--mint); box-shadow: inset 0 -4px #102b28; }
.primary.credit-action:hover { background: #24534b; }
.primary:disabled { background: #4a4478; color: #cbc3ea; box-shadow: none; }
.stop-secondary { color: var(--muted); }
.help-button { color: var(--amber); }
.coach { background: var(--silver); color: var(--ink); border: 0; border-radius: 16px 16px 4px 16px; box-shadow: 0 6px 18px -8px #000c; }
.coach button { color: var(--ink); border: 1px solid #10161040; border-radius: 999px; font-weight: 600; }
.heat-toast { font-weight: 800; text-shadow: 0 2px 6px var(--void); }
.heat-50 { color: #ffd95e; } .heat-75 { color: #ffa24f; } .heat-85 { color: #ff7a5c; } .heat-95 { color: #ff5d8f; }
.result-reward, .season-awards li { background: #1f3b3a; border: 1px solid #64f0c550; border-radius: 12px; }
.standings th { border-color: #ffffff1f; } .standings td { border-color: #ffffff0d; }
.avatar { background: #3d3672; }
#countdown { font-weight: 800; color: var(--amber); text-shadow: 0 4px 20px #0008; }
#heat-frame { border-color: var(--danger); box-shadow: inset 0 0 35px #ff6aa650; }
.paddock[data-stage="ready"] .stop-art { border: 1px solid #ffffff14; border-radius: 14px; background: linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px); background-size: 22px 22px; }
@media (max-width: 430px) { .phone { border-radius: 0; } }
@media (max-height: 740px) {
  header { padding: 8px 13px 20px; }header::before { height: 163px; }.title-row { margin-bottom: 6px; }h1 { font-size: 18px; }.cockpit { gap: 8px; }.cockpit strong { font-size: 34px; }#clock { font-size: 22px; }.wheel-control { height: 112px; }
  .paddock,.briefing { padding: 14px 16px; }.paddock-top { padding-bottom: 8px; }.paddock-top > span { font-size: 18px; }
  .stop-route { margin: 10px 0 13px; }.journey-step { padding-top: 5px; }.stop-tagline { letter-spacing: .5px; }
  h2 { font-size: 35px; margin-bottom: 6px; }.lineup-choice { padding: 4px 5px 7px; }.lineup-choice svg { height: 56px; }.lineup-choice small { margin-top: 3px; padding-top: 3px; }
  .stop-art.lineup { margin: 8px 0 10px; gap: 8px; }.stop-info { padding: 8px 10px; margin-bottom: 10px; }.stop-info p { line-height: 1.3; }
  .stop-actions { padding-top: 9px; }.primary { min-height: 48px; font-size: 21px; }.stop-art { height: 180px; }
  .paddock[data-stage="ready"] .stop-art { height: 170px; }.stop-options .destination { min-height: 150px; }.destination svg { height: 70px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; animation: none !important; } }

/* One racing wordmark, at cabinet size beside the game and compact in the cockpit. */
.brand-wordmark, h1.brand-wordmark, .paddock-top > .brand-wordmark {
  display: flex; flex-direction: column; align-items: flex-start; flex: none; gap: 0;
  color: var(--silver); font-family: var(--display); font-style: italic; line-height: .95;
  letter-spacing: -1px; text-transform: uppercase; transform: skewX(-7deg); white-space: nowrap;
}
.brand-wordmark > span { font-size: 14px; font-weight: 600; letter-spacing: 3px; line-height: 1; }
.brand-wordmark > strong { font-size: 24px; font-weight: 800; letter-spacing: -1.3px; }
.brand-wordmark::after { content: ''; display: block; width: 100%; height: 3px; margin-top: 4px;
  background: linear-gradient(90deg,var(--action) 0 74%,transparent 74% 79%,var(--action) 79% 87%,transparent 87% 92%,var(--action) 92%); }
.brand-wordmark::before { content: none; }
.title-row { height: 46px; }
.title-actions { gap: 5px; }
.share-button, #share-close { width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff26; border-radius: 50%; background: #ffffff0c; color: var(--silver); font-size: 24px; }
.share-button { pointer-events: auto; }
.paddock-top #stop-wallet { padding: 5px 8px; }
.mobile-phone-hint { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.web-companion { position: fixed; width: 260px; right: calc(50% + 240px); top: 50%; transform: translateY(-50%); text-align: left; }
.brand-large > span { font-size: 28px; letter-spacing: 9px; }
.brand-large > strong { font-size: 53px; letter-spacing: -3px; }
.brand-large::after { height: 5px; margin-top: 10px; }
.web-companion > p { font-size: 17px; margin: 18px 0; color: var(--muted); }
.share-qr { background: #fff; padding: 0; width: 200px; max-width: 100%; line-height: 0; border-radius: 8px; overflow: hidden; }
.share-qr svg { display: block; width: 100%; height: auto; }
.web-companion .scan-label { color: var(--silver); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
[data-share-link] { color: var(--muted); font-size: 14px; display: block; overflow-wrap: anywhere; }
.share-more { margin-top: 14px; padding: 12px 0; border: 0; background: none; color: var(--action); font-size: 16px; }
#share-dialog { color: var(--silver); background: var(--void); width: min(360px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px; border: 1px solid var(--line); border-radius: 20px; overflow: auto; }
#share-dialog::backdrop { background: #0e0b22cf; }
.share-dialog-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
#share-dialog h2 { font-size: 32px; margin: 0; }
#share-dialog > p { font-size: 16px; color: var(--muted); }
#share-dialog .share-qr { margin: 20px auto; width: 240px; }
#share-dialog label { display: block; font-size: 14px; margin: 20px 0 6px; }
#share-address { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--silver); font-size: 16px; }
.share-actions { display: flex; gap: 10px; margin-top: 12px; }
.share-actions button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: var(--action); color: var(--ink); font-weight: 700; }
#share-status { min-height: 1.4em; margin-bottom: 0; }
@media (min-width: 1050px) { .mobile-phone-hint { display: none; } }
@media (max-width: 1049px) { .web-companion { display: none; } }
@media (max-width: 360px) { .paddock-top .brand-wordmark > strong { font-size: 21px; }.paddock-top .title-actions { gap: 3px; }.paddock-top #stop-wallet { padding: 5px; } }

/* Menus fit the available viewport; only their content scrolls, never the actions. */
.phone:has(.overlay:not([hidden])) { width: min(390px,100vw); height: min(844px,100dvh); aspect-ratio: auto; }
.overlay { overflow: hidden; }
.paddock, .briefing, .help-page { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.paddock-top { flex: none; }
.paddock-body, .briefing-body, .help-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 3px; }
.stop-actions, .briefing-actions, .help-actions { flex: none; margin-top: 0; padding-top: 12px; background: var(--void); }
.briefing { justify-content: flex-start; }
.briefing-actions .primary { width: 100%; }
.help-actions { gap: 6px; }
.paddock[data-stage="ready"] .stop-art { height: clamp(100px,20dvh,170px); min-height: 100px; }
@media (max-width: 600px) {
  .phone:has(.overlay:not([hidden])) { width: 100vw; height: 100dvh; border-radius: 0; }
  .paddock, .briefing, .help-page {
    padding-top: max(12px,env(safe-area-inset-top));
    padding-right: max(14px,env(safe-area-inset-right));
    padding-bottom: max(12px,env(safe-area-inset-bottom));
    padding-left: max(14px,env(safe-area-inset-left));
  }
  .paddock-top { flex-wrap: wrap; row-gap: 8px; }
  .paddock-top .title-actions { margin-left: auto; }
  .stop-actions .primary, .briefing-actions .primary { min-height: 48px; }
}


/* A single race instrument: big position, paired lap/clock, three clear reserves. */
#race-hud { padding: 8px 16px 18px; }
#race-hud::before { height: 100%; background: linear-gradient(#17152bf5 0%,#17152bf5 78%,#17152b00); }
#race-hud .title-row { height: 44px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #ffffff20; }
#race-hud .brand-wordmark > strong { font-size: 22px; }
#race-hud .brand-wordmark::after { height: 2px; margin-top: 3px; }
#race-hud .title-actions { gap: 2px; }
#race-hud .share-button, #race-hud .help-button { width: 40px; height: 40px; border: 0; background: transparent; color: #c2bdcf; }
#race-hud #pause { width: 42px; height: 38px; border: 1px solid #ffffff40; border-radius: 8px; background: #fff4e3; color: #17152b; font-weight: 800; }
#race-hud .cockpit { grid-template-columns: 1fr 1.3fr; gap: 18px; align-items: stretch; margin-bottom: 8px; }
#race-hud .cockpit span { font-size: 14px; font-weight: 600; color: #c2bdcf; text-transform: uppercase; letter-spacing: 1px; }
#race-hud .place { position: relative; padding-left: 10px; }
#race-hud .place::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 5px; width: 3px; background: var(--action); transform: skewY(-25deg); }
#race-hud #position { font-size: 54px; font-weight: 800; font-style: italic; letter-spacing: -3px; line-height: .95; color: var(--silver); }
#race-hud .cockpit small { font: 500 18px var(--display); letter-spacing: 0; color: #c2bdcf; }
#race-hud .race-detail { display: flex; flex-direction: column; justify-content: space-between; padding-left: 16px; border-left: 1px solid #ffffff20; }
#race-hud .lap-readout, #race-hud .time-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#race-hud #lap { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--amber); }
#race-hud #clock { font-size: 23px; font-weight: 500; line-height: 1.1; letter-spacing: -.5px; padding: 0; color: var(--silver); }
#race-hud .meters { gap: 12px; padding-top: 8px; border-top: 1px solid #ffffff20; }
#race-hud .meters label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .2px; color: #c2bdcf; margin-bottom: 6px; gap: 3px; }
#race-hud .meters b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
#race-hud .meter-shell, #race-hud meter, #race-hud meter::-webkit-meter-bar { height: 8px; border-radius: 0; background: #494454; }
#race-hud .meter-shell::after { background: repeating-linear-gradient(90deg,transparent 0 calc(20% - 2px),#17152b calc(20% - 2px) 20%); }
#heat::-webkit-meter-optimum-value { background: #ffbd66; }
#fuel::-webkit-meter-optimum-value { background: #88d5ff; }
#heat::-moz-meter-bar { background: #ffbd66; }
#hull::-moz-meter-bar { background: var(--mint); }
#fuel::-moz-meter-bar { background: #88d5ff; }
#race-hud.hot #heat-value, #race-hud.damaged #hull-value, #race-hud.dry #fuel-value { color: #ff827a; }
#race-hud.hot #heat::-webkit-meter-bar { outline: 1px solid #ff827a; }
@container (max-width: 320px) {
  #race-hud { padding-inline: 10px; }
  #race-hud .cockpit { gap: 10px; }
  #race-hud .race-detail { padding-left: 10px; }
  #race-hud #position { font-size: 52px; }
  #race-hud #clock { font-size: 20px; }
  #race-hud .meters { gap: 8px; }
  #race-hud .meters label { flex-direction: column; align-items: flex-start; }
}

@container (max-width: 280px) {
  #race-hud .brand-wordmark > strong { font-size: 18px; }
  #race-hud .share-button, #race-hud .help-button { width: 32px; height: 38px; }
  #race-hud #pause { width: 36px; }
  #race-hud #position { font-size: 44px; }
  #race-hud #lap { font-size: 28px; }
  #race-hud .time-readout > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #race-hud .time-readout { justify-content: flex-end; }
}

/* The collection: licensed artwork first, compact stat blocks underneath. */
.paddock:is([data-stage="fleet"],[data-stage="pilots"]) .stop-art { height: auto; min-height: 0; margin: 12px 0; }
.collection-league { margin-bottom: 24px; }
.collection-league h3 { margin: 0 0 12px; font-size: 26px; font-style: italic; color: #f4d36b; }
.collection-league + .collection-league { padding-top: 16px; border-top: 2px solid #76579a; }
.collection-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.collection-card { min-width: 0; overflow: hidden; padding: 12px 10px 0; background: #332249; border-radius: 18px 18px 6px 6px; text-align: left; }
.collection-portrait { display: flex; align-items: center; justify-content: center; height: 110px; margin-bottom: 10px; }
.stop-art .collection-art { width: 100%; max-width: 112px; height: 108px; filter: drop-shadow(0 6px 4px #14092380); }
.collection-card h4 { margin: 0; font-size: 19px; line-height: 1.15; color: #fff3ff; }
.collection-role { min-height: 36px; margin: 6px 0 10px; font-size: 14px; line-height: 1.3; color: #ddcce8; }
.collection-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 6px; margin: 0; }
.collection-card dt { font-size: 14px; color: #ddcce8; }
.collection-card dd { margin: 0; font-size: 23px; font-weight: 700; line-height: 1.2; color: #fff3ff; }
.collection-cost { margin: 12px 0; font-size: 16px; color: #ddcce8; }
.collection-status { margin: 0 -10px; padding: 8px 10px; font-size: 14px; line-height: 1.3; font-weight: 600; background: #231733; color: #ddcce8; }
.collection-status.available { color: #99f1bf; }
@container (max-width: 320px) {
  .collection-grid { gap: 8px; }
  .collection-card { padding-inline: 8px; }
  .collection-card h4 { font-size: 17px; }
  .collection-card dl { grid-template-columns: 1fr; gap: 5px; }
  .collection-card dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
  .collection-card dd { font-size: 20px; }
  .collection-status { margin-inline: -8px; }
}

.result-verdict { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 22px; }
.result-verdict > strong { font-size: 42px; font-weight: 800; color: #f4d36b; }
.result-verdict.dnf > strong { color: #ff9a91; }
.result-verdict > span { font-size: 16px; color: #e3d2ec; }
.race-classification .driver small { display: block; font-size: 14px; color: #ddcce8; }

/* Classification lands while the ship is still running out beyond the line. */
#finish-callout { position: absolute; z-index: 6; top: 28%; left: 5%; width: 90%; text-align: center; pointer-events: none; color: #fff6dc; text-shadow: 0 3px 3px #21152c, 0 0 18px #21152c; }
#finish-callout span { display: block; font-size: 16px; font-weight: 800; letter-spacing: .2em; }
#finish-place { display: block; font: 900 clamp(32px, 11cqw, 46px)/1.15 var(--display); color: var(--amber); }

.premium-series{display:grid;gap:8px;padding:10px;border:1px solid var(--amber);border-radius:16px;background:#ffffff05}.premium-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;color:var(--silver)}.premium-heading b{color:var(--credit);white-space:nowrap}.premium-series .league-card{width:100%}