/* Shared UI type and color system. Menus, racing, Friends, and the lab use this
   scale. Do not shrink text to fit a phone: let its container wrap or scroll. */
@font-face {
  font-family: Silkscreen;
  src: url('../assets/fonts/Silkscreen-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --font-ui: Silkscreen, monospace;
  --pixel: var(--font-ui);
  --body: var(--font-ui);
  --text-caption: .75rem; /* 12px minimum for metadata and compact labels */
  --text-label: .875rem;
  --text-body: 1rem;
  --text-subheading: 1.125rem;
  --text-heading-sm: 1.25rem;
  --text-heading: 1.5rem;
  --text-title-sm: 1.75rem;
  --text-title: 2rem;
  --text-display-sm: 2.5rem;
  --text-display: 3rem;
  --text-display-lg: 3.75rem;
  --text-countdown: 5rem;
  --ink: #191d24;
  --surface: #303844;
  --panel: #242a32;
  --hover: #414c58;
  --selection: #464840;
  --shadow: #101318;
  --paper: #f3e6c5;
  --gold: #f2c94c;
  --muted: #c2c5be;
  --line: #929b9b;
  --divider: #626c73;
  --teal: #92cec1; /* readable text even on hover surfaces */
  --action: #d96836;
  --action-hover: #ed804a;
  --action-edge: #f6b28a;
  --action-shadow: #8f4027;
  --discount: #8ce8bb;
  --discount-surface: #203c36;
  --discount-ink: #12372c;
  font-synthesis: none;
}
body { font: var(--text-body)/1.5 var(--body); }
canvas { font: var(--text-caption)/1.5 var(--body); }
button, input, select { font: inherit; }
h1, h2, h3, .brand, .lab-header a, .primary, .secondary,
.mode-tabs button, .settings-tabs button, .control-layout button,
.lab button, .driving-modes strong {
  font-family: var(--pixel);
  font-weight: 400;
  font-synthesis: none;
}
button { line-height: 1.4; }
input, select, #career-entry input, .racer-setup-screen #career-entry input,
.net-field input, .net-field select, .friends-entry input {
  font: var(--text-body)/1.4 var(--body);
}
input::placeholder { color: var(--muted); opacity: 1; }
/* One font throughout; sizes and spacing distinguish the text roles. */
.eyebrow, .wallet span, .tile-number, .tile-status, .preview-label,
.course-facts span, .cup-progress small, .heat-progress span,
.career-brief p, .career-person p, .career-stats span, .team-badge small,
.team-footnote, .result-note, .finish-note, .lane-caption,
.race-reward>span, .race-reward small, .circuit-count,
.ride-preview p, .ride-number-entry label span, .paint-options span,
.upgrade-bars>span, .stock-count span, .upgrade button small,
.shop-price del, .upgrade-discount, .guide-caption, .guide-tip,
.driving-modes strong b, .control-layout legend, .driving-modes legend,
.settings-feedback h3, .net-field label, .net-seat small, .net-vehicle-rule,
.net-result small, .friends-entry label, .lab-readouts span, .lab-legend,
.pedal small, .speed-readout>span, .speed-readout i,
.wheel-drive, .track-caption, .footer {
  font-family: var(--body);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.5;
}
.course-description p, .seed-intro p, .seed-message,
.career-license p, .career-note, .career-goal p, .career-recap p,
.trophy-shelf p, .rival-card p, .career-news p, .career-wire p,
.team-intro p, .team-grid header p, .crew-quote, .crew-choice strong,
.sponsor-offer p, .active-deal p, .season-stakes,
.encounter-scene p, .encounter-choice .choice-effect,
.decision-receipt p, .decision-receipt>strong,
.shop-discount-banner p,
#help-dialog .guide-cards p,
#help-dialog .control-layout p, #help-dialog #feedback-status,
#help-dialog .settings-feedback #feedback-status, #settings-status,
.net-copy, .net-preview p, .net-roster .net-copy, .net-notice {
  font: var(--text-body)/1.5 var(--body);
}
#setup-hint { font: var(--text-body)/1.5 var(--body); }
.guide-cards p { overflow-wrap: anywhere; }
.lab-note { font: var(--text-caption)/1.5 var(--body); }
.primary, .secondary, .mode-tabs button, .settings-tabs button,
.control-layout button, .lab button { font-size: var(--text-label); }
.menu-heading h1, .multiplayer .net-menu h1 { font-size: var(--text-title); line-height: 1.25; }
.course-description h2, .garage-truck h2, .ride-preview h2 { font-size: var(--text-heading); line-height: 1.3; }
.track-tile strong, .heat-progress strong, .cup-progress h2,
.cup-progress>div, .career-selection .cup-progress h2,
.career-selection .cup-progress>div, .career-selection .heat-progress strong,
.vehicle-options strong, .ride-screen .vehicle-options strong {
  font-size: var(--text-caption); line-height: 1.5;
}
.shop-screen .upgrade h3,
.encounter-choice strong, .career-news h2 {
  font-size: var(--text-label); line-height: 1.5;
}
.season-strip .career-identity strong, .career-selection .career-identity strong {
  font: var(--text-label)/1.5 var(--pixel);
}
.track-tile .tile-number { font-size: var(--text-heading-sm); line-height: 1.2; }
.track-tile strong { min-width: 0; overflow-wrap: anywhere; }
.track-tile.selected .tile-number, .track-tile.selected strong { color: var(--gold); }
@media(min-width:721px) {
  .circuit-screen .track-grid:not(.cup-grid) {
    grid-template-columns: repeat(auto-fit,minmax(min(100%,11rem),1fr));
  }
  .track-tile { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 8px; align-content: start; align-items: center; }
  .track-tile strong { grid-column: 2; grid-row: 1; }
  .track-tile .course-map { grid-column: 1 / -1; grid-row: 2; }
}
.career-news p, .victory-screen .career-news p { font: var(--text-caption)/1.5 var(--body); overflow-wrap: anywhere; }
.team-badge b, .career-selection .team-badge b { font: var(--text-caption)/1.5 var(--body); }
.team-badge>span:last-child { padding-left: 8px; }
.race-metrics strong, .speed-readout>strong, .wallet strong, .net-code,
.career-stats strong, .shop-price, .stock-count {
  font-family: var(--pixel); font-weight: 400; font-variant-numeric: tabular-nums;
}
.net-heading { align-items: start; }
.net-room-code { padding: 12px 16px; background: var(--ink); border: 2px solid var(--gold); }
.net-room-code .eyebrow { margin-bottom: 8px; }
.net-code { display: block; font-size: var(--text-display); line-height: 1.1; letter-spacing: .1em; user-select: all; }
.net-preview { position: relative; }
.net-notice:empty { display: none; }
.net-field button { flex: 1; min-width: 0; }
.circuit-picker-screen .track-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap: 12px; flex: 1 0 auto; padding-bottom: 24px; }
.paint-options button[data-locked] { opacity: 1; cursor: not-allowed; }
.paint-options button[data-locked] i { display: grid; place-items: center; filter: saturate(.4); }
.paint-options button[data-locked] .button-icon { background: var(--ink); color: var(--paper); width: 24px; height: 24px; padding: 3px; z-index: 1; }
.paint-status { color: var(--gold); font-size: var(--text-caption); margin-top: 8px; }
.lab .primary { background: var(--action); color: var(--ink); border-color: var(--action-edge); }
.lab .primary:hover { background: var(--action-hover); }
.finish-order, .career-history, .net-result { font-variant-numeric: tabular-nums; }
.finish-order strong, .net-seat b { font: var(--text-label)/1.5 var(--body); }
.ride-preview h2, .ride-preview>.eyebrow { color: var(--paper); }
.shop-price del { opacity: 1; }
.shop-screen .upgrade-benefit { font: var(--text-caption)/1.5 var(--body); color: var(--muted); }
.shop-screen .upgrade-bars, .shop-screen .stock-count { margin-top: 8px; }
.garage-number { color: var(--muted); }
/* Text over scenery always gets an opaque contrast surface. */
.track-caption, .lab-readouts, .lab-legend,
.lab-note, #setup-hint {
  background: var(--ink); color: var(--paper); text-shadow: none;
  padding: 4px 8px;
}
.button-icon { width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; }
.button-label { min-width: 0; }
button:has(>.button-icon) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary .button-label, .secondary .button-label { font: inherit; }
.dialog-close .button-icon { width: 24px; height: 24px; }
.career-selection .season-stakes { font: var(--text-caption)/1.5 var(--body); }
.pause-settings { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.pause-settings #pause-controls { flex: 1; margin: 0; }
.pause-settings .pause-utilities { display: flex; }
.pause-settings .pause-utilities .header-actions { margin: 0; gap: 0; align-items: stretch; }
.pause-settings .pause-utilities #help-btn { display: none; }
.pause-settings .pause-utilities .icon-button { height: auto; align-self: stretch; }
.course-description h2 { margin-bottom: 0; }
.circuit-screen .course-detail { display: block; position: relative; min-height: 200px; }
.circuit-screen .preview-frame { width: 100%; height: 100%; min-height: 200px; }
.course-caption {
  position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 6px 8px; background: var(--ink);
}
.course-caption .preview-label { position: static; padding: 0; background: none; }
.course-caption h2 { margin: 0; font: var(--text-body)/1.5 var(--pixel); color: var(--paper); }
.course-caption .caption-divider { color: var(--muted); }
.menu-actions:has(#selection-ride) { grid-template-columns: auto minmax(0,1fr); }
.cockpit .pedal { width: 96px; height: auto; min-height: 76px; padding: 8px 6px; gap: 6px; flex-shrink: 0; }
.cockpit .pedal>* { flex-shrink: 0; }
.cockpit .pedal strong { display: flex; align-items: center; justify-content: center; gap: 4px; font: var(--text-caption)/1.5 var(--pixel); white-space: nowrap; }
.cockpit .nitro strong>span { margin-left: 0; flex-shrink: 0; }
.lab-header #copy-settings { max-width: none; font: var(--text-label)/1.4 var(--body); }
.lab-header>span { font: var(--text-caption)/1.5 var(--body); white-space: nowrap; }
#pad-message {
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(480px,calc(100% - 24px)); padding: 16px;
  background: var(--ink); border: 1px solid var(--line); text-shadow: none;
}
@media(max-width:720px), (max-height:560px) {
  .menu-heading h1, .multiplayer .net-menu h1 { font-size: var(--text-heading); }
  .course-description h2, .garage-truck h2 { font-size: var(--text-subheading); }
  .menu-actions:has(#selection-ride) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .menu-actions:has(#selection-ride) #start-race { grid-column: auto; }
  .menu-actions:has(#selection-ride) .secondary { flex-direction: row; align-self: stretch; }
  .career-selection .season-strip { flex-wrap: wrap; }
  .career-selection .career-identity { flex-basis: 100%; }
  .career-selection .team-badge { max-width: none; }
  .career-selection .season-badges { flex: 1; }
  .career-selection .season-badges>button { flex: 1; }
  .career-selection .heat-progress { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .career-selection .cup-progress>div { min-height: 28px; }
  .ride-screen .vehicle-options strong { font: var(--text-caption)/1.5 var(--body); }
  .ride-screen .paint-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .shop-screen .upgrade button { flex-wrap: wrap; }
  .shop-screen .upgrade button small { text-align: left; }
  .shop-screen .shop-body { grid-template-rows: min-content auto; min-height: 0; }
  .shop-screen .garage-number { display: none; }
  .shop-screen .garage-truck {
    grid-template-columns: 96px minmax(0,1fr); grid-template-rows: auto;
    align-items: center; gap: 12px; min-height: 100px; padding: 12px 16px 20px;
  }
  .shop-screen .garage-truck canvas { grid-column: 1; grid-row: 1; width: 96px; margin: 0; }
  .shop-screen .garage-truck h2 { display: none; }
  .shop-screen #shop-ride { grid-column: 2; grid-row: 1; align-self: center; margin: 0; padding: 12px; }
  .shop-screen .upgrades {
    grid-template-columns: 1fr; grid-template-rows: none;
    grid-auto-rows: min-content; align-content: start; gap: 8px;
  }
  .shop-screen .upgrade {
    grid-template-columns: 24px minmax(0,1fr) 112px; grid-template-rows: auto;
    gap: 10px; padding: 10px 12px; align-items: center;
  }
  .shop-screen .upgrade>svg { width: 24px; height: 26px; align-self: start; }
  .shop-screen .upgrade button {
    grid-column: 3; grid-row: 1; align-self: center;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 4px; min-height: 56px; padding: 6px;
  }
  .shop-screen .upgrade button small { text-align: center; }
  .shop-screen .menu-actions:has(#shop-team):not(:has(#back-results)) .primary { grid-column: auto; }
  .shop-screen .menu-actions:has(#shop-team):not(:has(#back-results)) button { min-width: 0; padding: 10px 8px; }
  #shop-ride { padding: 8px; }
  .race-hud { flex-wrap: wrap; }
  .track-title { min-width: 0; }
  .race-metrics { gap: 10px; }
  .race-metrics .eyebrow { font-size: var(--text-caption); }
  .cockpit .pedal strong, .cockpit .nitro strong>span { font-size: var(--text-caption); }
  .cockpit .pedal { width: 80px; min-height: 66px; padding: 6px; gap: 4px; }
}
@media(max-width:359px) {
  .ride-screen .paint-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shop-screen .upgrade { grid-template-columns: 20px minmax(0,1fr) 104px; gap: 8px; padding: 10px 8px; }
  .shop-screen .upgrade>svg { width: 20px; }
  .shop-screen .menu-actions:has(#shop-team):not(:has(#back-results)) button { flex-direction: column; }
}
@media(max-width:680px) {
  .circuit-picker-screen .track-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .net-heading { display: flex; flex-wrap: wrap; padding-right: 0; gap: 12px; }
  .net-heading>div:first-child { width: 100%; padding-right: 96px; }
  .net-room-code { width: 100%; min-width: 0; padding: 10px 14px; }
  .net-code { margin-top: 0; font-size: var(--text-display-sm); }
  .net-code[data-legacy] { font-size: var(--text-title); }
}
@media(max-width:760px) {
  .lab-readouts { top: 180px; }
  .lab-legend { top: 236px; }
  .lab-tools { top: 274px; }
  .lab-note { bottom: 148px; width: calc(100% - 24px); max-width: 400px; white-space: normal; text-align: center; }
}
@media(max-height:560px) and (orientation:landscape) {
  .menu-heading { padding-right: 112px; }
  .lab-readouts { top: 124px; }
  .lab-legend { top: 178px; }
  .lab-tools { top: 10px; }
  .lab-note { bottom: 0; }
}
@media(max-width:760px) and (max-height:650px) {
  #pad-message { top: auto; bottom: 96px; }
  #pad-message h1, #pad-message p, #pad-message small { display: none; }
  .lab-note { display: none; }
}

/* One Garage shell; shortcuts omit navigation when only one section applies. */
.garage-screen .garage-tabs { margin-bottom: 18px; }
.garage-screen .garage-tabs button { font-size: var(--text-label); min-height: 46px; }
.garage-screen .ride-preview>.eyebrow { right: 20px; overflow-wrap: anywhere; }
.garage-screen .ride-preview canvas { margin-top: 18px; }
.garage-screen .ride-body { padding-bottom: 24px; }
.garage-screen .ride-options { min-width: 0; }
.garage-driver { display: grid; gap: 20px; width: 100%; }
.garage-driver-row { display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: 14px; }
.garage-driver label { display: grid; gap: 8px; font-size: var(--text-label); }
.garage-driver input { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--paper); font: var(--text-body)/1.5 var(--body); }
.garage-driver #garage-number { text-align: center; }
.garage-screen[data-section=upgrades] .ride-body { align-items: start; margin-top: 0; }
.garage-screen[data-section=upgrades] .ride-options { justify-content: start; }
.garage-screen .menu-actions { flex-shrink: 0; }
.garage-screen #garage-done { margin-left: auto; min-width: 180px; }
@media(max-width:720px) {
  .garage-screen .garage-tabs button { font-size: var(--text-caption); padding: 10px 6px; }
  .garage-screen .ride-body { padding-bottom: 20px; }
  .garage-screen .ride-preview { min-height: 144px; padding: 14px 16px 20px; grid-template-columns: 112px minmax(0,1fr); }
  .garage-screen .ride-preview>.eyebrow { top: 10px; left: 16px; right: 16px; }
  .garage-screen .ride-preview canvas { width: 112px; max-width: 100%; margin-top: 16px; }
  .garage-screen .ride-preview h2 { font-size: var(--text-label); overflow-wrap: anywhere; }
  .garage-screen .ride-preview p { font-size: var(--text-caption); }
  .garage-driver-row { grid-template-columns: minmax(0,1fr) 88px; gap: 10px; }
  .garage-driver label { font-size: var(--text-caption); }
  /* iOS focus-zooms fields below 16px, even when native pinch zoom is disabled. */
  .garage-driver input { padding: 10px; }
  .garage-screen .menu-actions { flex-wrap: wrap; gap: 8px; }
  .garage-screen .menu-actions button { width: auto; flex: 1; min-width: 0; padding: 10px; }
}
.upgrade>svg { color: var(--teal); }
.cockpit svg.pedal-symbol { width: 28px; height: 28px; flex-shrink: 0; }

.garage-screen { scrollbar-gutter: stable; }

/* Menu titles share the utilities row; reserve its measured width for cash and controls. */
.menu-cash { display: none; }
body:is([data-state=ready],[data-state=results]) .menu-cash { display: grid; align-content: center; gap: 2px; min-height: 44px; padding: 2px 8px; text-align: right; }
.menu-cash span { font: var(--text-caption)/1.2 var(--body); color: var(--muted); }
.menu-cash strong { font: var(--text-label)/1.2 var(--body); color: var(--paper); white-space: nowrap; font-variant-numeric: tabular-nums; }
body:is([data-state=ready],[data-state=results]) .masthead { gap: 10px; }
.menu-screen { padding-top: 14px; }
.menu-screen .menu-heading { padding-top: 0; padding-right: calc(var(--menu-tools-width,184px) + 16px); min-height: 44px; margin-bottom: 18px; align-items: center; }
.menu-screen .menu-heading h1 { margin-top: 0; min-width: 0; overflow-wrap: anywhere; }
.menu-screen .menu-heading>div { min-width: 0; }
.multiplayer .net-menu { padding-top: 14px; }
.net-menu .net-heading { flex-shrink: 0; padding-top: 0; padding-right: calc(var(--menu-tools-width,184px) + 16px); min-height: 44px; }
.net-menu .net-heading>div:first-child { min-width: 0; }
.net-menu .net-heading h1 { overflow-wrap: anywhere; }
@media(max-width:720px) {
  .menu-screen, .multiplayer .net-menu { padding-top: 10px; }
  .menu-screen .menu-heading h1, .multiplayer .net-menu h1 { font-size: var(--text-heading-sm); }
  .menu-screen .menu-heading { margin-bottom: 14px; }
  .menu-cash strong { font-size: var(--text-label); }
}
.button-icon, .icon-button svg, .pause-button svg, .pedal-symbol { shape-rendering: crispEdges; }
/* Native 24px sizes keep the icon family's pixel grid uniform. */
.button-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.icon-button svg, .pause-button svg, .cockpit svg.pedal-symbol, .net-actions button svg { width: 24px; height: 24px; }
.shop-screen .upgrade>svg { width: 24px; height: 24px; }
.shop-discount-banner>.discount-icon { width: 24px; height: 24px; }
.upgrade-discount .discount-icon { width: 12px; height: 12px; }
.paint-options button[data-locked] .button-icon { padding: 0; }
@media(max-width:359px) {
  .shop-screen .upgrade { grid-template-columns: 24px minmax(0,1fr) 104px; }
  .menu-cash strong { font-size: var(--text-caption); }
}
.menu-screen .victory-heading { min-height: 44px; padding: 0 calc(var(--menu-tools-width,184px) + 16px) 0 0; text-align: left; justify-content: start; }
.menu-screen .victory-heading h1 { min-width: 0; overflow-wrap: anywhere; }
.victory-screen .checkers { position: absolute; inset: 0 0 auto; height: 4px; margin: 0; }
@media(max-width:900px) {
  .net-menu .net-heading { flex-wrap: wrap; padding-right: 0; }
  .net-menu .net-heading>div:first-child { width: 100%; min-height: 44px; padding-right: calc(var(--menu-tools-width,184px) + 16px); }
  .net-menu .net-room-code { width: 100%; text-align: left; }
}
@media(max-width:359px) {
  .menu-screen .menu-heading, .menu-screen .victory-heading, .net-menu .net-heading { padding-top: 54px; padding-right: 0; }
  .net-menu .net-heading>div:first-child { padding-right: 0; }
}

.season-strip { --season-action-height: 56px; }
.season-identity-row { display: flex; flex: 1; gap: 12px; align-items: center; min-width: 0; }
.season-identity-row .career-identity { flex: 1; min-width: 0; }
.season-identity-row #career-record, .season-strip .team-badge {
  height: var(--season-action-height); min-height: var(--season-action-height);
  padding: 6px 10px; background: var(--surface); border: 1px solid var(--line);
}
.season-identity-row #career-record { flex-shrink: 0; font-size: var(--text-caption); }
.season-strip .team-badge>span:last-child { gap: 2px; }
.season-identity-row #career-record:hover, .season-strip .team-badge:hover { background: var(--hover); }
@media(max-width:720px) {
  .career-selection .season-strip { --season-action-height: 48px; }
  .career-selection .season-identity-row { flex-basis: 100%; }
  .career-selection .season-identity-row .career-identity { flex-basis: auto; }
  .career-selection .season-identity-row #career-record, .career-selection .season-strip .team-badge { padding: 4px 6px; }
}

.season-result .victory-heading { grid-template-columns: minmax(0,1fr); }
.season-result .victory-heading h1 { grid-column: 1 / -1; overflow-wrap: anywhere; }

/* Team review shows the chosen benefits and sponsor contract without an intro. */
.team-screen .team-grid { flex: 0 0 auto; gap: 16px; }
.team-screen .team-grid>section { padding: 20px; }
.team-screen .team-grid header { margin-bottom: 12px; }
.team-screen .team-grid h2 { font: var(--text-caption)/1.5 var(--pixel); color: var(--muted); margin: 0; }
.team-screen .team-grid .crew-choice { padding: 0; border: 0; align-items: flex-start; }
.team-screen .team-grid .crew-portrait { width: 64px; height: 64px; }
.team-screen .team-grid .crew-choice h3, .team-screen .team-grid .active-deal h3 { font-size: var(--text-heading); margin: 0 0 8px; overflow-wrap: anywhere; }
.team-screen .team-grid .crew-choice strong, .team-screen .team-grid .active-deal p { font: var(--text-label)/1.5 var(--body); margin: 0; }
.team-screen .team-grid .active-deal { border: 0; padding: 0; background: none; }
.team-screen .team-grid .deal-meter { margin: 16px 0; }
.team-screen .team-grid .deal-meter progress { height: 10px; background: var(--divider); }
.team-screen .team-grid .deal-meter progress::-webkit-progress-bar { background: var(--divider); }
.season-options .crew-choice strong { margin: 8px 0 12px; }
@media(max-width:720px) {
  .team-screen .team-grid>section { padding: 16px; }
  .team-screen .team-grid .crew-portrait { width: 48px; height: 48px; }
  .team-screen .team-grid .crew-choice h3, .team-screen .team-grid .active-deal h3 { font-size: var(--text-heading-sm); }
}

/* Race-mode titles share the utilities row, with context beside its content. */
.career-selection .season-label { flex-shrink: 0; margin: 0 0 6px; }

/* One unlabelled input bar beneath the speedometer, shared by solo and friend races. */
#drive-meter { height: 6px; margin-top: 8px; min-width: 88px; background: var(--divider); }
#drive-fill { display: block; height: 100%; width: 0; background: var(--gold); }

/* Keep deal terms together and remove the scene and repeated instructions. */
.encounter-screen>.encounter-choices, .encounter-screen>.decision-receipt { width: 100%; max-width: 720px; margin: auto; }
.encounter-screen>.encounter-choices { gap: 12px; padding: 16px 0; }
.encounter-intro { margin: 0 0 4px; color: var(--paper); font: var(--text-body)/1.5 var(--body); }
.encounter-screen .encounter-choice { padding: 20px; }
.encounter-screen .encounter-choice strong { font-size: var(--text-label); margin-bottom: 8px; }
.encounter-screen .choice-effect { font: var(--text-body)/1.5 var(--body); }
.encounter-screen>.decision-receipt { padding: 24px; }
.encounter-screen .decision-receipt h2 { margin: 0 0 12px; font-size: var(--text-subheading); }
.encounter-screen .decision-receipt p { margin: 0; }
.encounter-screen .decision-receipt>strong, .decision-stock { display: block; margin-top: 16px; font: var(--text-caption)/1.5 var(--body); color: var(--teal); }
.shop-screen .shop-price { justify-content: center; text-align: center; }
.shop-screen .menu-actions:has(#back-results) { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-end; gap: 12px; }
.shop-screen .menu-actions:has(#back-results)>button { flex: 0 1 240px; width: auto; min-width: 0; min-height: 50px; padding: 10px 12px; }

.trophy-collection { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 12px 0 0; padding: 0 0 12px; }
.trophy-collection li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; }
.trophy-collection .trophy { position: static; display: block; width: 64px; height: 64px; margin: 0; }
.trophy-collection span { font: var(--text-caption)/1.5 var(--pixel); color: var(--gold); }
.trophy-collection small { font: var(--text-caption)/1.5 var(--body); color: var(--muted); }

.career-profile .career-recap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 16px; padding-top: 16px; }
.career-recap strong { color: var(--gold); font: var(--text-caption)/1.5 var(--pixel); }
.career-recap .recap-stats { color: var(--muted); font: var(--text-caption)/1.5 var(--body); }

.career-screen .menu-actions { justify-content: flex-end; }

.track-records { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 12px 14px; background: var(--panel); border-top: 1px solid var(--line); }
.track-records>div { display: grid; gap: 4px; min-width: 0; }
.track-records span, .track-records small, .record-note { font: var(--text-caption)/1.5 var(--body); color: var(--muted); }
.track-records strong { font: var(--text-body)/1.5 var(--pixel); color: var(--paper); font-variant-numeric: tabular-nums; }
.track-records small { color: var(--gold); }
.circuit-screen .course-detail:has(.track-records) { display: flex; flex-direction: column; }
.circuit-screen .course-detail:has(.track-records) .preview-frame { flex: 1; height: auto; }
.course-detail .track-records { flex-shrink: 0; }
.result-receipt .track-records { margin-top: 16px; padding: 12px 0 0; border-top-color: var(--divider); }
.record-note { margin: 10px 0 0; }

.settings-toggle { flex-shrink: 0; min-width: 72px; min-height: 44px; font: var(--text-caption) var(--pixel); border: 2px solid var(--line); background: var(--panel); color: var(--paper); }
.settings-toggle[aria-pressed=true] { border-color: var(--gold); color: var(--gold); }
.settings-feedback { padding: 16px 0; }
.settings-feedback>div { min-width: 0; }
.guide-cards h3 { font: var(--text-subheading)/1.5 var(--pixel); }
.driving-modes strong, .settings-feedback h3 { font: var(--text-body)/1.5 var(--pixel); }
.driving-modes small, .settings-feedback p, #help-dialog .settings-feedback #feedback-status { font: var(--text-label)/1.5 var(--body); }
.settings-feedback p { margin: 0; }

/* Searchable title-screen summary, with full instructions on a static page. */
.title-entry { max-width: 100%; }
.title-entry #enter-game { margin-inline: auto; }
.title-entry .game-summary { font: var(--text-caption)/1.5 var(--body); margin: 10px 0 0; }
.game-info-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; }
.game-info-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--paper); font: var(--text-caption)/1.5 var(--body); text-underline-offset: 4px; text-shadow: 1px 2px var(--shadow); }
.game-info-link:hover { color: var(--gold); }
.game-info-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Mobile store access stays secondary to immediate browser play. */
.store-downloads { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 12px; margin:4px 0 0; }
.store-downloads a { display:inline-flex; align-items:center; min-height:44px; }
.store-downloads img { display:block; width:156px; height:auto; }
.store-downloads .app-store-download img { width:120px; }
.store-downloads a:focus-visible { outline:2px solid var(--teal); }
.mode-tabs button { min-width:0; }
.derby-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; flex:1 0 auto; min-height:0; }
.derby-arena-preview { min-height:240px; background:#ad7a43; border:3px solid var(--line); overflow:hidden; }
#derby-preview { display:block; width:100%; height:100%; min-height:240px; }
.derby-rules { align-self:center; }
.derby-rules h2 { font:var(--text-heading)/1.4 var(--pixel); color:var(--gold); margin:10px 0; }
.derby-rules p,.derby-rules dd { font:var(--text-body)/1.5 var(--body); }
.derby-rules dl { margin:20px 0; }
.derby-rules dl>div { display:block; margin:16px 0; }
.derby-rules dt { font:var(--text-caption)/1.5 var(--pixel); color:var(--teal); margin-bottom:5px; }
.derby-rules dd { margin:4px 0 0; }
.derby-note { color:var(--muted); }
.derby-screen .menu-actions { margin-top:16px; }
.derby-health { display:block; width:100%; height:7px; accent-color:var(--teal); }
.derby-health[hidden] { display:none; }
.derby-health::-webkit-meter-bar { background:var(--ink); border:0; }
.derby-health::-webkit-meter-optimum-value { background:var(--teal); }
.derby .race-metrics>div:nth-child(2)>strong { white-space:nowrap; }
.derby-result h1 { font:var(--text-heading)/1.4 var(--pixel); color:var(--gold); margin:12px 0; overflow-wrap:anywhere; }
.derby-result>p { font:var(--text-body)/1.5 var(--body); }
.derby-finishers { list-style:none; margin:16px 0; padding:0; }
.derby-finishers li { display:flex; justify-content:space-between; gap:16px; border-left:5px solid var(--driver); padding:10px; margin:6px 0; background:var(--ink); font:var(--text-caption)/1.4 var(--pixel); }
.derby-finishers li strong { overflow-wrap:anywhere; }
.derby-finishers li span { white-space:nowrap; }
@media(max-width:720px) {
  .mode-tabs button { padding-inline:5px; font-size:var(--text-caption); }
  .derby-layout { grid-template-columns:1fr; gap:16px; }
  .derby-arena-preview { height:230px; min-height:230px; }
  #derby-preview { height:100%; min-height:0; }
  .derby-rules dl { margin:12px 0; }
  .derby-rules dl>div { margin:12px 0; }
  .derby-screen .menu-actions .primary { width:100%; }
  .derby .race-metrics { gap:8px; }
  .derby .race-metrics .eyebrow { font-size:var(--text-caption); }
}
@media(orientation:landscape) and (max-height:600px) {
  .store-downloads { margin:0; gap:4px 8px; }
  .store-downloads img { width:130px; }
  .store-downloads .app-store-download img { width:100px; }
  .derby-layout { grid-template-columns:1fr 1fr; }
  .derby-arena-preview { height:auto; min-height:240px; }
  .derby-rules dl { margin:8px 0; }
  .derby-rules dl>div { margin:8px 0; }
}
@media(orientation:landscape) and (max-height:600px) {
  .derby-arena-preview { height:180px; min-height:180px; }
  #derby-preview { height:100%; min-height:0; }
}
/* The arena fits between the corner controls, so it can use the whole stage. */
.derby #gameCanvas { height:100%; }

.derby-scoreboard { position:absolute; top:12px; right:12px; z-index:3; width:180px; padding:10px 12px; color:var(--paper); border:2px solid var(--line); background:var(--ink); pointer-events:none; }
.derby-scoreboard[hidden] { display:none; }
.derby-scoreboard>div { display:flex; justify-content:space-between; gap:14px; }
.derby-scoreboard span { font:var(--text-caption)/1.3 var(--pixel); color:var(--muted); }
.derby-scoreboard strong { display:block; margin-top:4px; font:var(--text-heading-sm)/1.2 var(--pixel); color:var(--gold); }
.derby-scoreboard p { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:8px 0 0; font:var(--text-caption)/1.3 var(--pixel); }
.derby-finishers li span { display:flex; flex-direction:column; text-align:right; }
.derby-finishers li small { font:var(--text-caption)/1.3 var(--body); color:var(--muted); margin-top:3px; }
@media(max-width:720px) {
  .derby-scoreboard { top:58px; width:158px; padding:8px 10px; }
}
@media(orientation:landscape) and (max-height:600px) {
  .derby-scoreboard { width:160px; padding:8px 10px; }
}