:root {
  color-scheme: light;
  --paper: #edf0e7; --ink: #22312c; --muted: #69776b; --line: #22312c24;
  --accent: #d3ed72; --warning: #edb270; --danger: #fa927d;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink); background: #bde5f2; font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { overscroll-behavior: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #658c36; outline-offset: 4px; }
[hidden] { display: none !important; }
#game, #viewport, .crash-fade, .impact-flash { position: fixed; inset: 0; }
#viewport canvas { display: block; width: 100%; height: 100%; }
.right-mirror-label { position: fixed; z-index: 4; height: 18px; padding: 2px 7px; color: #edf3eb; background: #172b30; font-size: 9px; line-height: 14px; letter-spacing: .04em; pointer-events: none; }
.crash-fade, .impact-flash { pointer-events: none; opacity: 0; }
.crash-fade { background: #080e13; z-index: 3; }
.impact-flash { background: #f4d9bd; z-index: 2; }
.topbar { position: absolute; top: 24px; left: 32px; right: 32px; display: flex; justify-content: space-between; align-items: center; z-index: 8; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 10px; pointer-events: auto; background: var(--paper); padding: 7px 10px 7px 7px; }
.brand-symbol { width: 33px; height: 33px; display: grid; place-items: center; background: var(--ink); color: var(--accent); }
.brand-symbol svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.brand strong { display: block; font-size: 12px; font-weight: 750; letter-spacing: .16em; }
.brand div>span { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .12em; }
.top-actions { display: flex; gap: 3px; pointer-events: auto; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 62px; height: 34px; padding: 0 10px; border: 0; border-radius: 0; background: #edf0e7df; color: var(--ink); transition: background .15s; }
.icon-button span { font-size: 11px; }
.icon-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:hover { background: var(--accent); }
.overlay { position: absolute; inset: 0; z-index: 6; padding: 85px 32px 32px; background: linear-gradient(90deg,#20332e15,transparent 52%); }
.welcome-panel { width: 100%; height: 100%; display: grid; grid-template-columns: 370px minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: 24px; }
.menu-sheet { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; min-height: 0; padding: 31px 30px 20px; background: #edf0e7; overflow: auto; scrollbar-width: thin; scrollbar-color: #82947744 transparent; }
.journey-intro { flex-shrink: 0; }
.panel-kicker { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 650; letter-spacing: .12em; color: #667863; }
.status-dot { width: 5px; height: 5px; background: #638343; border-radius: 50%; }
h1 { margin: 24px 0 19px; font-size: 49px; font-weight: 650; line-height: 1.12; letter-spacing: -.045em; }
h1 em { font-style: normal; font-weight: 450; }
#panelDescription { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.menu-overview { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; padding: 17px 0; margin-top: 24px; border-top: 1px solid var(--line); }
.menu-overview span { display: block; font-size: 9px; color: var(--muted); margin-bottom: 6px; }
.menu-overview strong { font-size: 12px; font-weight: 600; }
.drive-console { margin-top: auto; padding-top: 19px; flex-shrink: 0; }
.console-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; color: var(--muted); }
.console-eyebrow { font-size: 8px; letter-spacing: .12em; }
.console-heading h2 { font-size: 10px; font-weight: 500; margin: 0; }
.start-button { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 51px; padding: 14px 17px; border: 0; border-radius: 0; background: var(--accent); color: var(--ink); transition: background .15s; }
.start-button>span:first-child { font-size: 15px; font-weight: 650; text-align: left; flex: 1; }
.start-button .start-key { font: 9px ui-monospace, SFMono-Regular, monospace; border: 1px solid #22312c50; padding: 3px 5px; }
.start-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.start-button:hover { background: #bddb5b; }
.menu-actions { display: flex; flex-direction: column; margin-top: 13px; }
.menu-actions button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 43px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.menu-actions button>span:first-child { font-size: 14px; }
.menu-actions button>span:last-child { font: 8px ui-monospace, SFMono-Regular, monospace; color: var(--muted); }
.menu-actions i { font-style: normal; font-size: 15px; margin-left: 16px; }
.menu-actions button:hover { color: #567935; padding-left: 7px; }
.text-button { display: block; width: 100%; margin: 13px 0 0; padding: 10px 0; color: var(--muted); border: 0; background: transparent; font-size: 11px; text-align: left; }
.text-button:before { content: "←"; margin-right: 10px; }
.text-button:hover { color: var(--ink); }
.panel-footer { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--muted); margin: 19px 0 0; line-height: 1.7; }
.panel-footer i { font-style: normal; margin: 0 3px; }
kbd { display: inline-flex; align-items: center; justify-content: center; padding: 2px 4px; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid currentColor; border-radius: 2px; margin-right: 3px; opacity: .85; }
.sheet-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 13px; margin-top: 22px; font: 8px ui-monospace, SFMono-Regular, monospace; letter-spacing: .05em; color: var(--muted); flex-shrink: 0; }
.sheet-bottom svg { width: 30px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1; }
.preferences { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--muted); margin: 0 0 18px; }
.preferences label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.preferences input { width: 13px; height: 13px; margin: 0; accent-color: #6e8e42; }
.preferences>span { font-size: 8px; }
.departure-choices { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 28px; }
.departure-choices>span { font-size: 10px; color: var(--muted); }
.departure-choices select { width: 100%; border: 0; border-bottom: 1px solid #22312c77; border-radius: 0; color: var(--ink); background: #e0e6d7; padding: 14px 10px; font-size: 12px; }
.departure-choices small { font-size: 9px; color: var(--muted); line-height: 1.6; }
.garage-dock { grid-column: 2; grid-row: 2; padding: 23px 25px 19px; background: #edf0e7; min-width: 0; }
.garage-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.garage-heading h2 { font-size: 14px; font-weight: 600; margin: 0; }
.garage-heading>span { font: 8px ui-monospace, SFMono-Regular, monospace; letter-spacing: .04em; color: var(--muted); }
.vehicle-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 0; margin: 0; border: 0; }
.vehicle-choice { position: relative; cursor: pointer; min-width: 0; }
.vehicle-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vehicle-card { display: flex; flex-direction: column; position: relative; min-height: 173px; padding: 13px 12px; border: 1px solid #22312c26; color: var(--ink); background: #dfe5d82e; transition: background .15s, border-color .15s; }
.vehicle-index { font: 8px ui-monospace, SFMono-Regular, monospace; letter-spacing: .025em; color: var(--muted); }
.vehicle-card>.vehicle-art { display: block; margin: 5px -5px 3px; }
.vehicle-art svg { width: 100%; height: 80px; display: block; }
.vehicle-copy { display: flex; flex-direction: column; gap: 6px; }
.vehicle-copy strong { font-size: 15px; font-weight: 600; }
.vehicle-copy>span { font-size: 11px; color: var(--muted); line-height: 1.4; }
.selection-mark { display: none; position: absolute; bottom: 25px; right: 13px; font-size: 12px; font-style: normal; color: var(--accent); }
.vehicle-choice input:checked+.vehicle-card { color: #f1f3eb; background: #253730; border-color: #253730; }
.vehicle-choice input:checked+.vehicle-card .vehicle-index, .vehicle-choice input:checked+.vehicle-card .vehicle-copy>span { color: #c3cebd; }
.vehicle-choice input:checked+.vehicle-card .selection-mark { display: block; }
.vehicle-choice input:focus-visible+.vehicle-card { outline: 2px solid #7c9c45; outline-offset: 3px; }
.vehicle-choice:hover .vehicle-card { border-color: #7b965b; }
.vehicle-details { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; font-size: 10px; color: var(--muted); }
.vehicle-details p { margin: 0; }
.vehicle-details>div { display: flex; gap: 16px; font-size: 10px; }
.vehicle-details strong { font-size: 10px; font-weight: 600; margin-left: 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.scene-caption { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; display: flex; align-items: center; gap: 18px; color: #f5f7ef; padding: 24px 28px; margin: 0 0 20px; text-shadow: 0 2px 15px #10252bbb; background: linear-gradient(90deg,transparent,#20332e55); }
.scene-caption>span { font-size: 39px; font-weight: 300; letter-spacing: -.03em; }
.scene-caption>div { display: flex; flex-direction: column; gap: 9px; }
.scene-caption strong { font-size: 18px; font-weight: 500; }
.scene-caption div>span { font: 9px ui-monospace, SFMono-Regular, monospace; letter-spacing: .1em; }
.scene-caption>i { width: 56px; height: 1px; background: #f6f8ee8a; margin-left: 15px; }
#routePreview { grid-column: 2; grid-row: 1 / -1; justify-self: center; align-self: center; width: min(480px,100%); background: #edf0e7; padding: 24px 32px; }
.route-preview-heading { display: flex; flex-direction: column; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.route-preview-heading>span { font: 9px ui-monospace,SFMono-Regular,monospace; color: var(--muted); letter-spacing: .1em; }
.route-preview-heading strong { font-size: 18px; font-weight: 500; }
#routeDiagram svg { width: 100%; max-height: 400px; display: block; margin-top: 12px; color: #314738; }
.route-line { stroke: #667c63; stroke-width: 3; }
.route-hazard { color: #ba7047; }
.route-checkpoint { fill: #edf0e7; stroke: #607854; stroke-width: 2; }
.route-endpoint { fill: #304b34; }
.route-label-line { stroke: #82907a; stroke-width: 1; }
.route-label { fill: #4e6550; font: 13px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.route-position-halo { fill: #d3ed7266; stroke: #486138; stroke-width: 1.5; }
.route-position-core { fill: #263d28; }
.route-legend { display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 9px; color: var(--muted); }
.route-legend span { display: flex; align-items: center; gap: 6px; }
.route-legend i { width: 6px; height: 6px; border: 1px solid #607854; border-radius: 50%; }
.route-legend span:last-child i { border: 0; border-radius: 0; background: #ba7047; transform: rotate(45deg); }
.controls-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 10px; margin-top: 24px; }
.controls-guide>div { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; }
.controls-guide kbd { font-size: 10px; padding: 4px 6px; }
.controls-guide span { font-size: 10px; color: var(--muted); }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 19px 10px; padding: 20px 0; margin-top: 23px; border-top: 1px solid var(--line); }
.summary span { display: block; font-size: 9px; color: var(--muted); margin-bottom: 8px; }
.summary strong { font-size: 23px; font-weight: 450; font-variant-numeric: tabular-nums; }
.summary>div:last-child strong { font-size: 12px; }
.wreck-damage { display: grid; grid-template-columns: 1fr auto; gap: 10px; border-top: 1px solid #bd5b4733; padding: 13px 0 19px; color: #a3523f; font-size: 11px; }
.wreck-damage strong { font-size: 22px; font-weight: 500; }
.wreck-damage small { grid-column: 1 / -1; font-size: 10px; }
.hud { color: #f4f7ec; pointer-events: none; }
.journey-rail { position: absolute; top: 91px; left: 32px; width: 236px; padding: 13px 15px; background: linear-gradient(110deg,#163139d9,#16313999); border-top: 2px solid #d3ed72; }
.route-heading { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; letter-spacing: .06em; }
.vehicle-name { color: #dce5d7; font-size: 9px; }
.journey-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; gap: 10px; font-variant-numeric: tabular-nums; }
.journey-row strong { font-size: 22px; font-weight: 500; }
.journey-row>span { font: 10px ui-monospace,SFMono-Regular,monospace; }
.journey-track { height: 2px; margin: 12px 0 9px; background: #f5f8ea55; }
.journey-track i { display: block; height: 100%; width: 1%; background: var(--accent); }
.safe-point { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: #edf2e5; }
.safe-point strong { font-size: 10px; font-weight: 500; }
.mountain-progress { display: grid; gap: 5px; padding-top: 10px; margin-top: 10px; border-top: 1px solid #edf2e533; font-size: 9px; }
.mountain-progress strong { font-size: 10px; font-weight: 500; }.mountain-progress>span { color: #d7e1c9; }
.mountain-progress button { appearance: none; background: transparent; border: 0; pointer-events: auto; padding: 6px 0; text-align: left; font-size: 9px; border-top: 1px solid #edf2e522; color: #d3ed72; }
#summaryCheckpoint { font-size: 12px; }#summaryMountain { font-size: 14px; }
.condition-cluster { position: absolute; left: 32px; bottom: 85px; width: 230px; padding: 14px 16px; background: #162c30c9; border-left: 2px solid #d3ed72; font-size: 10px; }
.damage-heading { display: flex; justify-content: space-between; align-items: center; gap: 9px; color: #e3eadd; font-size: 9px; }
.damage-heading strong { font-variant-numeric: tabular-nums; font-weight: 500; }
.damage-track { height: 3px; background: #ffffff22; margin-top: 9px; }
.damage-track i { display: block; height: 100%; background: var(--accent); transition: width .18s; }
.damage-track[data-level="warning"] i { background: var(--warning); }
.damage-track[data-level="critical"] i { background: var(--danger); }
.performance-hint, .handling-hint, .repair-hint { display: block; font-size: 9px; line-height: 1.65; font-variant-numeric: tabular-nums; margin-top: 8px; color: #dde6d5; }
.handling-hint { color: #f2c38d; margin-top: 2px; }
.repair-hint { color: #adbfae; font-size: 8px; margin-top: 5px; }
.engine-warning { display: flex; align-items: center; gap: 7px; color: var(--warning); font-size: 9px; padding-top: 8px; border-top: 1px solid #f1bd7133; margin-top: 8px; }
.engine-warning svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.engine-warning[data-severity="critical"], .engine-warning[data-severity="disabled"] { color: var(--danger); }
.engine-warning[data-lit="false"] svg { opacity: .25; }
.live-speed { position: absolute; right: 32px; bottom: 78px; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 13px; padding: 10px 0 10px 14px; min-width: 140px; background: linear-gradient(90deg,transparent,#10272a70); text-shadow: 0 2px 14px #0b2029; }
.gear { font: 10px ui-monospace,SFMono-Regular,monospace; color: var(--accent); align-self: center; }
.speed-reading { display: flex; align-items: baseline; gap: 6px; }
.live-speed output { font-size: 53px; font-weight: 350; letter-spacing: -.065em; font-variant-numeric: tabular-nums; line-height: 1; }
.speed-reading>span { font-size: 9px; }
#driveStatus { grid-column: 1 / -1; font-size: 8px; color: #d4dece; text-align: right; margin-top: 9px; }
.hazard-alert { position: absolute; top: 93px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-left: 3px solid var(--accent); color: #f0f4e9; background: #152c30d9; font-size: 11px; line-height: 1.6; max-width: 430px; }
.hazard-alert.danger { border-color: var(--danger); color: #ffc6b8; }
.toast { position: absolute; top: 57%; left: 50%; transform: translate(-50%,-50%); padding: 12px 20px; font-size: 12px; line-height: 1.6; color: #f2f7e6; background: #1c3533ed; border-left: 3px solid var(--accent); z-index: 5; max-width: 80%; text-align: center; }
.keyboard-hint { position: absolute; left: 32px; right: 32px; bottom: max(25px,env(safe-area-inset-bottom)); display: flex; gap: 17px; color: #e1e9dc; font-size: 9px; z-index: 4; text-shadow: 0 1px 8px #102832; }
.keyboard-hint>span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.keyboard-hint kbd { font-size: 8px; background: #10282b88; color: #f5f8ec; border-color: #f4f6df55; padding: 3px 5px; }
.touch-controls { position: absolute; bottom: max(22px,env(safe-area-inset-bottom)); left: 18px; right: 18px; display: none; justify-content: space-between; z-index: 5; }
.touch-controls>div { display: flex; gap: 7px; }
.touch-controls button { height: 54px; min-width: 54px; border: 1px solid #f0f6e344; border-radius: 3px; background: #193735db; color: #f1f6e9; touch-action: none; user-select: none; font-size: 12px; }
.touch-controls button.active { background: var(--accent); color: var(--ink); }
.fatal { position: absolute; inset: 0; z-index: 20; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
.fatal h2 { font-size: 22px; }
.fatal p { font-size: 13px; color: var(--muted); }
.fatal button { margin-top: 20px; background: var(--accent); border: 0; padding: 12px 25px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#game[data-panel="none"] .brand { color: #f3f7ea; text-shadow: 0 1px 12px #0b2530; background: transparent; padding: 0; }
#game[data-panel="none"] .brand div>span { display: none; }
#game[data-panel="none"] .brand-symbol { width: 27px; height: 27px; background: #172f3280; }
#game[data-panel="none"] .icon-button { background: #173032aa; color: #edf3e6; }
#game[data-panel="none"] .icon-button:hover { background: #344c3b; }
#game:not([data-panel="none"]) .hud, #game:not([data-panel="none"]) .keyboard-hint, #game:not([data-panel="none"]) .touch-controls, #game:not([data-panel="none"]) .toast { visibility: hidden; }
#game:not([data-panel="help"]) .controls-guide { display: none; }
#game:not([data-panel="welcome"]) .menu-overview { display: none; }
#game:not([data-panel="welcome"]):not([data-panel="pause"]) .menu-actions { display: none; }
#game:not([data-panel="welcome"]):not([data-panel="pause"]) .scene-caption { display: none; }
#game:not([data-panel="welcome"]) h1 { font-size: 39px; }
#game[data-panel="welcome"] .preferences, #game[data-panel="pause"] .preferences, #game[data-panel="wreck"] .preferences, #game[data-panel="finish"] .preferences { display: none; }
#game[data-panel="garage"] .preferences { display: none; }
#game[data-panel="wreck"] .start-button { background: #f0c1ad; }
#game[data-panel="wreck"] .status-dot { background: #bd6b52; }
#game[data-damage="healthy"] .condition-cluster { display: none; }
@media (min-width: 1700px) { .overlay { padding: 96px 42px 42px; }.topbar { left: 42px; right: 42px; top: 29px; }.welcome-panel { grid-template-columns: 410px minmax(0,1fr); gap: 30px; }.menu-sheet { padding: 40px 36px 24px; }h1 { font-size: 59px; margin-top: 29px; }#panelDescription { font-size: 13px; }.menu-actions button { height: 49px; }.start-button { min-height: 56px; }.garage-dock { padding: 27px 30px 23px; }.vehicle-art svg { height: 100px; }.vehicle-card { min-height: 204px; }.vehicle-copy strong { font-size: 17px; }.journey-rail { left: 42px; top: 97px; }.condition-cluster { left: 42px; }.keyboard-hint { left: 42px; right: 42px; }.live-speed { right: 42px; } }
@media (max-width: 1100px) and (min-width: 821px) { .welcome-panel { grid-template-columns: 320px minmax(0,1fr); gap: 18px; }.menu-sheet { padding: 26px 24px 20px; }h1 { font-size: 43px; }.garage-dock { padding: 20px 16px; }.vehicle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.vehicle-card { min-height: 140px; }.vehicle-art svg { height: 62px; }.vehicle-details { display: block; }.vehicle-details>div { margin-top: 10px; }.keyboard-hint { gap: 11px; font-size: 8px; }.keyboard-hint>span:nth-last-child(-n+2) { display: none; } }
@media (max-width: 820px) { .topbar { left: 22px; right: 22px; top: 21px; }.brand strong { font-size: 10px; }.brand div>span { font-size: 8px; }.icon-button { min-width: 34px; padding: 0 8px; }.icon-button span { display: none; }.overlay { padding: 78px 22px 22px; overflow: auto; background: linear-gradient(90deg,#233d3433,transparent); }.welcome-panel { display: flex; flex-direction: column; gap: 0; height: auto; min-height: 100%; max-width: 540px; margin: 0 auto; background: #edf0e7; }.menu-sheet { display: contents; }.journey-intro { order: 1; padding: 28px 28px 0; }h1 { font-size: 42px; margin: 18px 0 16px; }.menu-overview { margin-top: 20px; }.drive-console { order: 3; padding: 25px 28px 0; margin: auto 0 0; }.sheet-bottom { order: 4; margin: 22px 28px 0; padding: 14px 0 18px; }.garage-dock { order: 2; padding: 25px 28px 0; background: transparent; }.garage-heading>span { font-size: 7px; }.vehicle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.vehicle-card { min-height: 152px; }.vehicle-art svg { height: 72px; }.vehicle-details { display: block; font-size: 10px; }.vehicle-details>div { margin-top: 11px; }.scene-caption { display: none; }#routePreview { order: 2; width: 100%; max-width: 430px; padding: 25px 28px 0; background: transparent; align-self: center; }#routeDiagram svg { max-height: 300px; }.route-preview-heading strong { font-size: 14px; }.route-legend { padding-bottom: 0; }.route-preview-heading>span { font-size: 8px; }.route-preview-heading { padding-top: 4px; }.journey-rail { left: 22px; top: 82px; width: 198px; }.journey-row strong { font-size: 20px; }.route-heading { font-size: 8px; }.live-speed { right: 22px; bottom: 92px; }.condition-cluster { left: 22px; bottom: 95px; width: 213px; }.keyboard-hint { left: 22px; right: 22px; bottom: 24px; flex-wrap: wrap; gap: 9px 15px; font-size: 8px; }.hazard-alert { top: 83px; left: auto; right: 22px; transform: none; max-width: calc(100% - 250px); padding: 9px 12px; font-size: 10px; } }
@media (max-width: 480px) { .topbar { left: 16px; right: 16px; top: 17px; }.brand-symbol { width: 29px; height: 29px; }.brand strong { font-size: 9px; letter-spacing: .12em; }.brand div>span { font-size: 7px; }.top-actions { gap: 2px; }.icon-button { min-width: 28px; width: 28px; height: 31px; padding: 0; }.overlay { padding: 69px 16px 16px; }.journey-intro { padding: 24px 23px 0; }h1 { font-size: 39px; }.panel-kicker { font-size: 8px; }#panelDescription { font-size: 11px; }.drive-console { padding: 21px 23px 0; }.sheet-bottom { margin-left: 23px; margin-right: 23px; }.garage-dock { padding: 23px 23px 0; }.garage-heading { display: block; }.garage-heading>span { display: block; margin-top: 7px; }.vehicle-card { min-height: 141px; padding: 11px 9px; }.vehicle-art svg { height: 61px; }.vehicle-copy strong { font-size: 13px; }.vehicle-copy>span { font-size: 10px; }.vehicle-details>div { gap: 12px; }.vehicle-details strong { display: block; margin: 5px 0 0; }#game:not([data-panel="welcome"]) h1 { font-size: 32px; }.journey-rail { left: 16px; top: 74px; width: 171px; padding: 11px 12px; }.journey-row strong { font-size: 18px; }.journey-row>span { font-size: 9px; }.safe-point,.safe-point strong,.vehicle-name,.route-heading { font-size: 8px; }.condition-cluster { left: 16px; bottom: 115px; width: 195px; padding: 11px 12px; }.live-speed { right: 16px; bottom: 115px; min-width: 118px; gap: 8px; }.live-speed output { font-size: 43px; }.gear { font-size: 9px; }.hazard-alert { right: 16px; top: 74px; max-width: calc(100% - 219px); font-size: 9px; }.keyboard-hint { left: 16px; right: 16px; font-size: 7px; gap: 8px 11px; }.keyboard-hint>span:nth-last-child(-n+2) { display: none; }.toast { font-size: 11px; padding: 10px 13px; }.summary strong { font-size: 21px; } }
@media (max-height: 700px) and (min-width: 821px) { .overlay { padding-top: 77px; padding-bottom: 24px; }.menu-sheet { padding-top: 23px; }h1 { font-size: 41px; margin: 17px 0 14px; }#game:not([data-panel="welcome"]) h1 { font-size: 32px; }.menu-overview { margin-top: 15px; padding: 13px 0; }.drive-console { padding-top: 15px; }.menu-actions button { height: 35px; }.start-button { min-height: 44px; }.panel-footer { margin-top: 13px; }.sheet-bottom { margin-top: 15px; }.garage-dock { padding: 17px 20px; }.vehicle-card { min-height: 146px; }.vehicle-art svg { height: 64px; }.controls-guide { gap: 11px; margin-top: 16px; }.preferences { margin-bottom: 13px; }.summary { padding: 13px 0; margin-top: 14px; gap: 13px 10px; }.summary strong { font-size: 20px; }#routeDiagram svg { max-height: 300px; } }
@media (pointer: coarse) { .touch-controls:not([hidden]) { display: flex; }.keyboard-hint { display: none !important; }.condition-cluster, .live-speed { bottom: 99px; } }
@media (prefers-reduced-motion: reduce) { button, .vehicle-card, .damage-track i { transition: none; } }
@media (max-width: 820px) {
  #game[data-panel="garage"] h1 br, #game[data-panel="garage"] h1 em, #game[data-panel="garage"] #panelDescription { display: none; }
  #game[data-panel="route"] .drive-console { order: 2; }
  #game[data-panel="route"] #routePreview { order: 3; padding-bottom: 20px; }
}

/* Live navigation keeps the road central; the full itinerary pauses off-road. */
.stage-navigation { margin-top: 10px; border-top: 1px solid #d8e6ce33; padding-top: 10px; }
.stage-heading,.stage-remaining,.stage-next { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stage-heading strong { font-size: 12px; font-weight: 550; }.stage-heading>span { font: 8px ui-monospace,SFMono-Regular,monospace; color: #c3d4bc; }
.stage-remaining { margin-top: 8px; }.stage-remaining>span,.stage-next>span { font-size: 9px; color: #c3d4bc; white-space: nowrap; }.stage-remaining strong { font-size: 21px; font-weight: 450; font-variant-numeric: tabular-nums; color: var(--accent); }
.stage-track { height: 3px; margin: 7px 0 9px; background: #dce9ce28; }.stage-track i { display: block; height: 100%; background: var(--accent); }
.stage-next strong { font-size: 10px; font-weight: 450; }.next-route-event { margin-top: 8px; font-size: 9px; line-height: 1.65; color: #e3eccc; }
.hud-roadbook-button { pointer-events: auto; display: flex; align-items: center; gap: 6px; width: 100%; margin: 8px 0 0; padding: 6px 0 0; border: 0; border-top: 1px solid #d8e6ce25; color: #f0f5e7; background: transparent; text-align: left; font-size: 9px; }.hud-roadbook-button kbd { margin-left: auto; font-size: 8px; color: inherit; background: transparent; border-color: #d8e6ce66; }.hud-roadbook-button:hover { color: var(--accent); }
.roadbook-dock { grid-column: 2; grid-row: 1 / -1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 27px 30px; background: var(--paper); scrollbar-width: thin; scrollbar-color: #82947766 transparent; }
.roadbook-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.roadbook-heading>div>span { font: 9px ui-monospace,SFMono-Regular,monospace; letter-spacing: .12em; color: var(--muted); }.roadbook-heading h2 { margin: 10px 0 0; font-size: 23px; font-weight: 500; letter-spacing: -.025em; }.roadbook-heading>button { border: 0; padding: 9px 0; background: transparent; color: var(--ink); font-size: 11px; white-space: nowrap; }
#roadbookContent { display: grid; grid-template-columns: minmax(185px,.8fr) minmax(0,1.2fr); gap: 22px; padding-top: 22px; }
.roadbook-list { display: flex; flex-direction: column; gap: 7px; }.roadbook-stage { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }.roadbook-stage:hover { border-color: #7d935f; }.roadbook-stage.is-selected { color: #eef3e6; background: #293d32; border-color: #293d32; }.roadbook-stage-number { font: 10px ui-monospace,SFMono-Regular,monospace; opacity: .6; }.roadbook-stage-copy { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }.roadbook-stage-name { font-size: 12px; font-weight: 550; }.roadbook-stage-meta { font-size: 9px; opacity: .7; }.roadbook-stage-status { width: 42px; font-size: 8px; line-height: 1.5; text-align: right; opacity: .7; }.roadbook-stage.is-current .roadbook-stage-status { color: #59772d; opacity: 1; }.roadbook-stage.is-current.is-selected .roadbook-stage-status { color: var(--accent); }
.roadbook-detail { min-width: 0; }.roadbook-detail-heading>span { color: var(--muted); font-size: 10px; }.roadbook-detail h3 { margin: 8px 0 13px; font-size: 24px; font-weight: 550; letter-spacing: -.03em; }.roadbook-detail p,.roadbook-collection>p,.roadbook-bends>p,.roadbook-help { color: var(--muted); font-size: 11px; line-height: 1.8; margin: 10px 0; }
.roadbook-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 19px 0 15px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.roadbook-metrics dt { font-size: 9px; color: var(--muted); }.roadbook-metrics dd { margin: 9px 0 0; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.roadbook-stage-progress label { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); }.roadbook-dock progress { display: block; width: 100%; height: 4px; margin: 9px 0 15px; accent-color: #638343; border: 0; background: #22312c16; }.roadbook-dock progress::-webkit-progress-bar { background: #22312c16; }.roadbook-dock progress::-webkit-progress-value { background: #638343; }.roadbook-next { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 11px; }.roadbook-next>span { color: var(--muted); }.roadbook-next>strong { text-align: right; font-weight: 550; }.roadbook-next>small { grid-column: 1 / -1; text-align: right; color: var(--muted); font-size: 9px; }
.roadbook-depart { width: 100%; padding: 12px 13px; display: flex; justify-content: space-between; border: 0; color: var(--ink); background: var(--accent); font-size: 11px; }.roadbook-depart:hover { background: #c6e260; }
.roadbook-collection,.roadbook-bends,.roadbook-help { grid-column: 1 / -1; }.roadbook-collection,.roadbook-bends { padding-top: 19px; border-top: 1px solid var(--line); }.roadbook-collection>h3,.roadbook-bends>h3 { display: flex; justify-content: space-between; margin: 0; font-size: 13px; font-weight: 550; }.roadbook-collection>h3>span,.roadbook-bends>h3>span { font: 12px ui-monospace,SFMono-Regular,monospace; color: var(--muted); }.roadbook-views { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }.roadbook-view { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 13px; border: 1px solid var(--line); }.roadbook-view-state { font-size: 8px; color: var(--muted); }.roadbook-view>strong { font-size: 12px; font-weight: 550; }.roadbook-view>span:last-child { color: var(--muted); font-size: 9px; line-height: 1.6; }.roadbook-view.is-collected { background: #d3ed7244; border-color: #819d5377; }.roadbook-view.is-collected .roadbook-view-state { color: #486528; }.roadbook-help { margin: 0; padding-top: 3px; }
#game[data-panel="roadbook"] .preferences { display: none; }
@media (max-width: 1100px) and (min-width: 821px) { .roadbook-dock { padding: 22px 20px; }#roadbookContent { grid-template-columns: 1fr; }.roadbook-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.roadbook-heading { display: block; }.roadbook-heading>button { margin-top: 8px; }.roadbook-views { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .roadbook-dock { order: 2; overflow: visible; padding: 23px 28px 0; }.roadbook-heading { display: block; padding-bottom: 14px; }.roadbook-heading h2 { font-size: 20px; }.roadbook-heading>button { margin-top: 8px; }#roadbookContent { grid-template-columns: 1fr; gap: 20px; padding-top: 15px; }.roadbook-views { grid-template-columns: 1fr; }.roadbook-list { gap: 6px; }.roadbook-stage { padding: 11px 12px; }.roadbook-metrics dd { font-size: 17px; }#game[data-panel="roadbook"] h1 br,#game[data-panel="roadbook"] h1 em { display: none; }#game[data-panel="roadbook"] .drive-console { padding-bottom: 5px; } }
@media (max-width: 480px) { .roadbook-dock { padding: 20px 23px 0; }.roadbook-heading h2 { font-size: 18px; }.roadbook-metrics { gap: 5px; }.roadbook-metrics dd { font-size: 16px; }.stage-navigation { margin-top: 8px; padding-top: 8px; }.stage-heading strong { font-size: 10px; }.stage-heading>span { font-size: 7px; }.stage-remaining strong { font-size: 18px; }.stage-remaining>span,.stage-next>span { font-size: 8px; }.stage-next strong { font-size: 9px; }.next-route-event,.hud-roadbook-button { font-size: 8px; } }

.minimap-panel { position: absolute; top: 91px; right: 32px; width: 212px; height: 196px; padding: 0; border: 1px solid #c5d9be42; border-top: 2px solid #d3ed72; border-radius: 0; background: #132e34e8; color: #e8f1df; pointer-events: auto; overflow: hidden; text-align: left; }
.minimap-panel:disabled { opacity: 1; }.minimap-panel:hover { border-color: #d3ed72; }.minimap-heading { position: absolute; top: 9px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 10px; }.minimap-heading strong { font-weight: 500; }.minimap-heading>span { color: var(--accent); }
#minimapCanvas>.minimap-svg { position: absolute; left: 5px; top: 24px; width: calc(100% - 10px); height: 148px; display: block; }.minimap-legend { position: absolute; left: 12px; right: 12px; bottom: 9px; display: flex; align-items: center; gap: 4px; font-size: 8px; color: #cbd9c5; }.minimap-legend .map-key:not(:first-child) { margin-left: 5px; }
.map-key { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border: 1.5px solid currentColor; vertical-align: middle; }.map-key.car { color: #9abe3e; background: #d7ec58; border-color: #526943; clip-path: polygon(50% 0,100% 100%,50% 73%,0 100%); width: 9px; height: 10px; }.map-key.safe { color: #b5a67f; border-radius: 2px; }.map-key.vista { color: #b88335; transform: rotate(45deg); }.map-key.bend { color: #b67f43; border-radius: 50%; background: currentColor; width: 5px; height: 5px; }.minimap-legend .map-key.car { background: #b2f2de; }.minimap-legend .map-key.vista { color: #dab9f2; }.minimap-legend .map-key.bend { color: #f3c986; }
.roadbook-view-switch { display: flex; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }.roadbook-view-switch>button { border: 1px solid var(--line); padding: 9px 14px; background: transparent; color: var(--muted); font-size: 11px; }.roadbook-view-switch>button[aria-pressed="true"] { border-color: #293d32; background: #293d32; color: #eef3e6; }
.roadbook-map-panel { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(200px,1fr); gap: 24px; padding-top: 20px; }.roadbook-map-chart { min-width: 0; padding: 0 12px 12px; background: #e2e8dd; border: 1px solid #22312c14; }.route-map-full { display: block; width: 100%; height: min(54vh,510px); color: #3c5143; }.route-map-stage,.route-map-checkpoint,.route-map-vista,.route-map-bend { cursor: pointer; outline: none; }.route-map-stage.is-selected .route-map-stage-halo { stroke: #b0ca6c70; }.route-map-stage.is-selected .route-map-road { stroke-width: 5.5; }.route-map-stage:focus-visible .route-map-stage-halo,.route-map-stage:hover .route-map-stage-halo { stroke: #8fa95980; }.route-map-checkpoint:hover .route-map-checkpoint-dot,.route-map-checkpoint:focus-visible .route-map-checkpoint-dot { stroke: #162f25; stroke-width: 3; }.route-map-vista:hover .route-map-vista-diamond,.route-map-vista:focus-visible .route-map-vista-diamond { stroke: #745018; stroke-width: 3; }.route-map-vista.is-collected .route-map-vista-diamond { fill: #c8df98; stroke: #5e8232; }.route-map-vista.is-collected .route-map-vista-core { fill: #52752c; }.route-map-bend:hover .route-map-bend-dot,.route-map-bend:focus-visible .route-map-bend-dot { r: 4; fill: #71451e; }.route-map-bend-label { font-family: ui-monospace,SFMono-Regular,monospace; }
.map-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 16px; font-size: 9px; color: #5b6f59; }.map-legend>span { display: flex; align-items: center; gap: 5px; }.map-legend .map-key.safe { color: #395f50; border-radius: 50%; }.map-orientation { margin: 10px 0 0; text-align: center; font-size: 9px; line-height: 1.6; color: var(--muted); }
.roadbook-map-info { min-width: 0; }.map-stage-relation { font-size: 10px; color: var(--muted); }.roadbook-map-info>h3 { font-size: 23px; font-weight: 550; letter-spacing: -.03em; margin: 10px 0 14px; }.roadbook-map-info>p { font-size: 11px; color: var(--muted); line-height: 1.8; }.map-stage-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px 0; margin: 20px 0 14px; border-block: 1px solid var(--line); }.map-stage-metrics dt { font-size: 9px; color: var(--muted); }.map-stage-metrics dd { margin: 9px 0 0; font-size: 21px; font-variant-numeric: tabular-nums; }.map-stage-next { display: flex; justify-content: space-between; gap: 6px; }.map-stage-next strong { font-weight: 500; color: var(--ink); text-align: right; }
.map-view-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 3px 0; color: #5b6f59; font-size: 9px; }.map-view-controls>button { border: 1px solid #667b4d55; padding: 6px 9px; background: #edf0e7; color: #3c5143; font-size: 9px; }.map-view-controls>button:hover { background: #d3ed72; }
.map-back-button { display: none; border: 0; background: transparent; color: #567536; padding: 0 0 16px; font-size: 11px; }
.map-point-info { display: flex; flex-direction: column; gap: 9px; margin: 18px 0; padding: 14px; background: #d3ed723d; border-left: 2px solid #789c43; font-size: 10px; color: var(--muted); line-height: 1.6; }.map-point-info strong { font-size: 14px; font-weight: 550; color: var(--ink); }.map-stage-buttons { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; }.map-stage-buttons button { border: 1px solid var(--line); padding: 9px 11px; background: transparent; color: var(--ink); text-align: left; font-size: 10px; }.map-stage-buttons button[aria-pressed="true"] { border-color: #667b4d; background: #d3ed7255; }.map-interaction-hint { margin-top: 13px; font-size: 9px !important; }
@media (min-width: 821px) { .hazard-alert { left: auto; right: 264px; transform: none; max-width: max(180px,calc(100% - 580px)); } }
@media (min-width: 1700px) { .minimap-panel { right: 42px; } }
@media (max-width: 1100px) and (min-width: 821px) { .roadbook-map-panel { grid-template-columns: 1fr; }.route-map-full { height: 380px; }.roadbook-map-info { padding-bottom: 10px; }.map-stage-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.hazard-alert { max-width: 240px; right: 260px; } }
@media (max-width: 820px) { .minimap-panel { right: 32px; width: 170px; height: 156px; }#minimapCanvas>.minimap-svg { top: 22px; height: 115px; }.minimap-heading { top: 7px; font-size: 9px; }.minimap-legend { left: 8px; right: 8px; bottom: 6px; gap: 3px; font-size: 7px; }.minimap-legend .map-key:not(:first-child) { margin-left: 2px; }.minimap-legend .map-key { width: 5px; height: 5px; }.hazard-alert { right: 32px; max-width: 170px; }.roadbook-map-panel { grid-template-columns: 1fr; gap: 22px; padding-top: 17px; }.route-map-full { height: 420px; }.map-stage-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.roadbook-view-switch>button { font-size: 10px; padding: 9px 11px; } }
@media (max-width: 480px) { .minimap-panel { right: 16px; width: 116px; height: 104px; }.minimap-heading { top: 6px; left: 8px; right: 8px; font-size: 8px; }#minimapCanvas>.minimap-svg { top: 18px; left: 1px; width: calc(100% - 2px); height: 81px; }.minimap-legend { display: none; }.hazard-alert { right: 16px; max-width: 116px; }.minimap-range { font-size: 10px; }.roadbook-view-switch { gap: 3px; }.roadbook-view-switch>button { padding: 8px; font-size: 9px; }.roadbook-map-chart { padding: 0 6px 12px; }.route-map-full { height: 350px; }.map-legend { gap: 8px 11px; font-size: 8px; }.map-orientation { font-size: 8px; }.roadbook-map-info>h3 { font-size: 21px; }.map-stage-metrics dd { font-size: 20px; } }
@media (max-width: 480px) { .route-map-bend-label { font-size: 17px; } }
@media (max-width: 820px) { .map-back-button { display: block; }.roadbook-map-info { scroll-margin-top: 78px; } }

.destination-guidance { position: absolute; right: 32px; width: 212px; padding: 11px 12px 12px; background: #152f35ed; border-left: 2px solid #ffc58a; color: #edf3e6; pointer-events: auto; }
.destination-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #f5c89e; font-size: 9px; }.destination-heading button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid #d7e3cd33; color: #c9d8c5; background: transparent; font-size: 15px; line-height: 1; }.destination-heading button:hover { color: #fff; border-color: #ffc58a; }.destination-name { display: block; margin-top: 7px; font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }.destination-distance { display: flex; justify-content: space-between; align-items: baseline; gap: 7px; margin-top: 7px; }.destination-distance>span { font-size: 9px; color: #bfd0c2; }.destination-distance>strong { font-size: 23px; font-weight: 450; font-variant-numeric: tabular-nums; color: #ffc58a; }.destination-instruction { display: flex; align-items: center; gap: 8px; padding-top: 10px; margin-top: 9px; border-top: 1px solid #c6dac42e; }.destination-instruction>span { color: #ffc58a; font-size: 22px; line-height: 1; }.destination-instruction>strong { font-size: 11px; font-weight: 500; line-height: 1.6; }.destination-advice { display: block; margin: 6px 0 0; color: #bfd0c2; font-size: 9px; line-height: 1.6; }.destination-guidance[data-status="arrived"] { border-color: #d3ed72; }.destination-guidance[data-status="arrived"] .destination-distance>strong,.destination-guidance[data-status="arrived"] .destination-instruction>span,.destination-guidance[data-status="arrived"] .destination-heading { color: #d3ed72; }
.roadbook-destination { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 16px; padding: 12px 14px; background: #e7ddc4; border-left: 3px solid #b88335; }.roadbook-destination>div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 13px; }.roadbook-destination span,.roadbook-destination small { font-size: 10px; color: #776849; }.roadbook-destination strong { font-size: 13px; font-weight: 550; }.roadbook-destination>div:last-child { display: flex; gap: 6px; flex-shrink: 0; }.roadbook-destination button { border: 1px solid #8d795444; padding: 7px 9px; background: transparent; color: #5f523b; font-size: 10px; }.roadbook-destination button:hover { background: #f4efdf; }
.map-destination-actions { margin: -5px 0 18px; }.map-destination-actions>button { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; padding: 12px 13px; background: var(--accent); color: var(--ink); font-size: 11px; }.map-destination-actions>button:disabled { opacity: 1; background: #d4dfc5; color: #61734f; }.map-destination-actions small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.6; }.route-map-checkpoint.is-destination .route-map-checkpoint-dot { stroke: #b97231; stroke-width: 3; }.route-map-vista.is-destination .route-map-vista-diamond { stroke: #b97231; stroke-width: 3; }
@media (min-width: 1700px) { .destination-guidance { right: 42px; } }
@media (max-width: 820px) { .destination-guidance { right: 32px; width: 170px; padding: 10px 11px; }.destination-name { font-size: 11px; }.destination-distance>strong { font-size: 21px; }.destination-instruction>strong { font-size: 10px; }.destination-advice { font-size: 8px; }.roadbook-destination { display: block; padding: 12px; }.roadbook-destination>div:last-child { margin-top: 10px; }.roadbook-destination>div:first-child { gap: 7px 10px; } }
@media (max-width: 480px) { .destination-guidance { right: 16px; width: 116px; padding: 8px; }.destination-heading { font-size: 8px; }.destination-heading button { width: 17px; height: 17px; font-size: 13px; }.destination-name { margin-top: 6px; font-size: 10px; line-height: 1.6; }.destination-distance { margin-top: 5px; }.destination-distance>span { font-size: 8px; }.destination-distance>strong { font-size: 18px; }.destination-instruction { gap: 5px; padding-top: 7px; margin-top: 7px; }.destination-instruction>span { font-size: 18px; }.destination-instruction>strong { font-size: 9px; }.destination-advice { font-size: 8px; }.roadbook-destination strong { font-size: 12px; } }
@media (max-width: 820px) {
  .journey-rail>.destination-guidance { position: static; width: auto; padding: 10px 0 7px; margin-top: 10px; border: 0; border-top: 1px solid #eac8a044; background: transparent; }
  .hud.has-destination .stage-navigation,.hud.has-destination .mountain-progress { display: none; }
  .journey-rail>.destination-guidance .destination-heading button { width: 20px; height: 20px; }.journey-rail>.destination-guidance .destination-name { font-size: 11px; }.journey-rail>.destination-guidance .destination-instruction>strong { font-size: 10px; }
}
@media (max-width: 580px) { .minimap-panel { width: 116px; height: 104px; }.minimap-heading { top: 6px; left: 8px; right: 8px; font-size: 8px; }#minimapCanvas>.minimap-svg { top: 18px; left: 1px; width: calc(100% - 2px); height: 81px; }.minimap-legend { display: none; } }

/* Compact environment controls share the existing pause/menu interaction. */
.environment-controls{display:grid;gap:14px;margin:18px 0}.environment-controls[hidden]{display:none}
.environment-controls label{display:grid;gap:7px;font-size:12px;color:var(--muted,#5e6c61)}
.environment-controls select{width:100%;border:1px solid #bec8b5;background:#f6f6ed;color:#26372d;padding:11px 10px;font:inherit;border-radius:0}
.environment-equipment{display:grid;grid-template-columns:1fr 1fr;gap:12px}.environment-preview{font-size:12px;line-height:1.8;margin:0;color:#3e5546}.environment-controls small{font-size:11px;line-height:1.7;color:#71806f}
.environment-hud{display:block;width:100%;border:0;background:none;color:#d4e1c4;text-align:left;padding:3px 0 8px;font-size:10px;cursor:pointer;letter-spacing:.03em}
[data-panel="environment"] .preferences{display:none}[data-panel="environment"] .drive-console{max-height:78vh;overflow:auto}
@media(max-width:580px){.environment-hud{font-size:9px;line-height:1.5;padding-bottom:6px}.environment-controls{gap:10px;margin:12px 0}.environment-controls select{padding:9px 8px}.top-actions .icon-button{min-width:29px;padding-left:6px;padding-right:6px}}

/* Driving information stays near the edges; the physical instruments own speed. */
.hud .live-speed { display: none; }
#keyboardHint { display: none; }
.hud .journey-rail { width: 210px; padding: 12px 14px; border-top-width: 1px; background: #152a2fc9; }
.hud .journey-row strong { font-size: 23px; }
.hud .journey-row>span,.hud .route-heading,.hud .journey-track,.hud .stage-track,.hud .safe-point,.hud .hud-roadbook-button { display: none; }
.hud .stage-navigation { padding-top: 8px; margin-top: 5px; border-top: 1px solid #e3edcf33; }
.hud .stage-heading { margin-bottom: 8px; }
.hud .stage-heading strong { font-size: 12px; }
.hud .stage-remaining strong { font-size: 18px; }
.hud .stage-next { margin-top: 10px; }
.hud .next-route-event { font-size: 10px; }
.hud .environment-hud { font-size: 10px; padding-bottom: 2px; }
.hud .condition-cluster { bottom: 102px; }
#displayButton[aria-pressed="true"] { background: var(--accent); color: #22312c; }
#game[data-immersive="true"] .journey-rail,
#game[data-immersive="true"] .minimap-panel,
#game[data-immersive="true"] .destination-guidance { display: none; }
#game[data-immersive="true"] .hazard-alert { left: 50%; right: auto !important; top: 89px !important; transform: translateX(-50%); width: max-content; max-width: min(520px,calc(100% - 32px)); }
.immersive-context { position: absolute; left: 32px; bottom: max(28px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; gap: 7px 18px; max-width: min(420px,calc(100% - 64px)); padding: 11px 14px; border: 1px solid #dbe6cf30; background: #172e30d9; color: #f0f5e9; pointer-events: auto; text-align: left; }
.immersive-context>span { font-size: 11px; }.immersive-context>strong { font-size: 12px; font-weight: 500; }.immersive-context>small { grid-column: 1 / -1; color: #cbdbb5; font-size: 9px; }
.continue-journey { display: grid; gap: 8px; padding: 15px 14px; margin: 0 0 15px; border: 1px solid #8ba27650; border-left: 3px solid #839b4c; background: #dce5ce66; }
.continue-journey>span { font-size: 10px; color: #61734d; }.continue-journey>strong { font-size: 16px; font-weight: 550; }.continue-journey>small { font-size: 11px; line-height: 1.7; color: #61705e; }
.save-status { font-size: 11px; line-height: 1.7; color: #69776b; margin: 10px 0; }.save-status[data-status="unavailable"] { color: #905b37; }
.new-journey-button { width: 100%; text-align: left; margin-top: 12px; padding: 10px 0; }
.new-journey-button::before { content: none; }
@media(min-width:1700px){.immersive-context{left:42px}}
@media(max-width:820px){.hud .journey-rail{width:185px;left:22px}.hud .journey-row strong{font-size:20px}.hud .stage-remaining strong{font-size:16px}.immersive-context{left:22px}.hud .condition-cluster{bottom:112px}}
@media(max-width:580px){.brand div{display:none}.hud .journey-rail{width:164px;left:16px;padding:10px}.hud .journey-row strong{font-size:18px}.hud .stage-next,.hud .next-route-event{display:none}.hud .stage-heading strong{font-size:11px}.hud .environment-hud{font-size:9px}.hud .condition-cluster{width:188px;bottom:160px}.immersive-context{left:16px;bottom:88px;max-width:calc(100% - 32px);gap:5px 12px;padding:8px 10px}.immersive-context>span,.immersive-context>strong{font-size:10px}#game[data-immersive="true"] .hazard-alert{top:73px!important;font-size:11px}}
@media(pointer:coarse){.immersive-context{bottom:89px}.hud .condition-cluster{bottom:164px}}
@media(max-width:820px){#game[data-immersive="true"] .minimap-panel{display:block}#game[data-immersive="true"] .hazard-alert{left:22px;transform:none;max-width:calc(100% - 248px)}}
@media(max-width:580px){#game[data-immersive="true"] .hazard-alert{left:16px;max-width:calc(100% - 164px)}}

/* The radio and passport share the roadbook's quiet paper-and-ink palette. */
.audio-controls{display:grid;gap:16px;margin:16px 0 22px}.radio-station{position:relative;overflow:hidden;padding:20px 18px;background:#20352f;color:#f0f2e6;border-bottom:3px solid #b9d574}.radio-station>span{display:block;color:#b9ceaa;font-size:9px;letter-spacing:.17em}.radio-station>strong{display:block;font-size:28px;letter-spacing:-.04em;font-weight:500;margin:15px 0 8px}.radio-station>small{display:block;max-width:230px;color:#c0d0ba;font-size:11px;line-height:1.8}.radio-equalizer{display:flex;align-items:center;gap:4px;height:29px;margin-top:14px}.radio-equalizer i{width:3px;background:#d3ed72;height:11px;opacity:.5}.radio-equalizer i:nth-child(3n){height:25px}.radio-equalizer i:nth-child(3n+1){height:16px}.audio-controls[data-playing="true"] .radio-equalizer i{animation:radio-pulse 1.7s ease-in-out infinite alternate;opacity:.9}.audio-controls[data-playing="true"] .radio-equalizer i:nth-child(2n){animation-delay:-.8s}.audio-controls[data-playing="true"] .radio-equalizer i:nth-child(3n){animation-delay:-1.3s}
@keyframes radio-pulse{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.audio-switch{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.audio-switch small{display:block;color:var(--muted);font-size:10px;line-height:1.7;margin-top:4px}.audio-switch input{width:18px;height:18px;accent-color:#6a813f;flex-shrink:0}.audio-slider{display:grid;gap:10px}.audio-slider>span{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.audio-slider output{font-variant-numeric:tabular-nums;color:var(--ink)}.audio-slider input{width:100%;height:18px;margin:0;accent-color:#74894e}.audio-preview-button{display:flex;justify-content:space-between;align-items:center;border:1px solid #8ca06b70;padding:11px 13px;background:#e1e7d3;color:#304630;font-size:12px}.audio-preview-button:hover{background:#d3ed72}#audioPreviewStatus{font-size:10px;line-height:1.7;color:var(--muted);margin:0}
[data-panel="audio"] .preferences{display:none}[data-panel="audio"] .drive-console{overflow:auto;max-height:78vh}
.journey-challenge{display:grid;gap:7px;width:100%;margin:12px 0 0;padding:11px 0 0;text-align:left;border:0;border-top:1px solid #e3edcf33;background:transparent;color:#edf3e6;pointer-events:auto}.journey-challenge>span:first-child{display:flex;justify-content:space-between;color:#becfb1;font-size:9px;letter-spacing:.04em}.journey-challenge i{font-style:normal}.journey-challenge strong{font-size:11px;font-weight:500}.journey-challenge small{font-size:9px;line-height:1.6;color:#c8d7c0}.challenge-track{height:2px;background:#e3edcf22}.challenge-track i{display:block;height:100%;width:0;background:#d3ed72;transition:width .3s}.journey-challenge[data-complete="true"] strong{color:#d3ed72}#game[data-immersive="true"] .journey-challenge{display:none}
.journey-passport{margin-top:22px;padding:24px 0 4px;border-top:1px solid var(--line)}.journey-passport header{display:flex;justify-content:space-between;align-items:center;gap:14px}.journey-passport header span{font-size:9px;letter-spacing:.15em;color:#718060}.journey-passport h3{font-size:24px;font-weight:500;letter-spacing:-.04em;margin:9px 0}.journey-passport header>strong{font-size:24px;font-weight:400;color:#7a8d4f;font-variant-numeric:tabular-nums}.journey-passport>p{font-size:11px;line-height:1.8;color:var(--muted);margin:4px 0 18px}.passport-entries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.passport-entry{position:relative;display:grid;gap:8px;min-width:0;padding:15px 13px;border:1px solid #7d916333;background:#e8ecdf}.passport-entry>span{font-size:9px;color:#7a876f;letter-spacing:.05em}.passport-entry strong{font-size:12px;font-weight:550;line-height:1.6}.passport-entry small{font-size:10px;line-height:1.7;color:var(--muted)}.passport-entry em{font-style:normal;font-size:9px;color:#81906f}.passport-entry[data-earned="true"]{border-color:#829b4f88;background:#e0e8d0}.passport-entry[data-earned="true"]>span{color:#5d7732}.passport-entry[data-current="true"]{box-shadow:inset 3px 0 #819a50}.passport-entry[data-earned="true"] em{color:#56782f}
@media(max-width:1100px){.passport-entries{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.audio-controls{gap:14px}.radio-station{padding:17px 14px}.radio-station>strong{font-size:25px}.passport-entries{grid-template-columns:1fr}.journey-passport h3{font-size:21px}.passport-entry{padding:12px}.journey-challenge small{font-size:9px}.top-actions{gap:2px}.top-actions .icon-button{min-width:28px;padding-inline:5px}}
@media(prefers-reduced-motion:reduce){.audio-controls .radio-equalizer i{animation:none!important}.challenge-track i{transition:none}}
@media(min-width:821px){#audioControls{grid-column:2;grid-row:1 / -1;width:min(480px,100%);align-self:start;justify-self:start;max-height:100%;overflow:auto;margin:0;padding:22px 24px;background:var(--paper);scrollbar-width:thin;scrollbar-color:#82947755 transparent;gap:12px}[data-panel="audio"] .drive-console{max-height:none;overflow:visible}#audioControls .radio-station{padding:16px}#audioControls .radio-station>strong{font-size:25px;margin:10px 0 6px}#audioControls .radio-equalizer{height:22px;margin-top:8px}#audioControls .audio-slider{gap:6px}}
@media(max-width:820px){#audioControls{order:2;margin:0;padding:22px 28px 0}[data-panel="audio"] .drive-console{max-height:none;overflow:visible}[data-panel="audio"] .console-heading{display:none}}
.passport-entry>button{justify-self:start;border:0;background:transparent;color:#637d3d;font-size:10px;padding:4px 0;margin-top:3px}.passport-entry>button:hover{color:#263c20;text-decoration:underline}
@keyframes radio-pulse{from{transform:scaleY(calc(.2 + var(--radio-power,.4)*.2))}to{transform:scaleY(calc(.35 + var(--radio-power,.4)*.65))}}

.traffic-status { margin-top: 10px; color: #dce7d5; font-size: 9px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.traffic-status.close { color: #f4c185; }

/* Driving settings share the roadbook's quiet paper layout. */
.settings-dock{grid-column:2;grid-row:1 / -1;align-self:start;width:min(680px,100%);max-height:100%;overflow:auto;background:var(--paper);padding:28px;scrollbar-width:thin;scrollbar-color:#82947755 transparent}
.settings-dock header>span{font-size:9px;letter-spacing:.16em;color:var(--muted)}.settings-dock h2{font-size:27px;letter-spacing:-.04em;font-weight:500;margin:12px 0 24px}.settings-tabs{display:flex;gap:4px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:22px}.settings-tabs button{padding:10px 12px;background:transparent;border:1px solid var(--line);color:var(--ink);font-size:12px}.settings-tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.settings-dock p,.settings-dock small{font-size:12px;line-height:1.9;color:var(--muted)}.settings-dock h3{font-size:19px;font-weight:550}.settings-dock button:not([data-settings-tab]){color:var(--ink);border:1px solid var(--line);background:#f5f6ef;padding:10px 13px;font-size:12px}.settings-dock button:hover{background:var(--accent)}.driving-settings-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:15px}.driving-settings-heading>span{font-size:10px;color:var(--muted)}.control-bindings{display:grid;grid-template-columns:1fr 1fr;gap:7px}.control-binding{display:flex;align-items:center;justify-content:space-between;background:#22312c05;padding:8px 10px;gap:12px;font-size:12px}.control-binding button{min-width:64px}.control-binding button[aria-pressed=true]{outline:2px solid #658c36}.control-range{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:12px;margin-top:23px}.control-range input{grid-column:1 / -1;width:100%;accent-color:#57793d}.control-settings-actions,.backup-actions{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}.control-message{min-height:20px}.quality-setting-label{display:block;font-size:17px;font-weight:600;margin-bottom:15px}#renderQualitySelect{width:100%;padding:13px;background:#f5f6ef;border:1px solid var(--line);color:var(--ink)}.quality-setting-description{max-width:420px}.backup-preview{padding:17px;border:1px solid #7d9663;margin-top:18px;background:#e3e9d8}.backup-preview strong{font-size:14px}.backup-preview small{display:block}.backup-preview [data-backup=confirm]{background:var(--accent)!important}.preparation-status{font-size:11px;color:var(--muted);padding:13px 0;line-height:1.6}.preparation-status progress{display:block;width:100%;height:4px;margin-top:10px;accent-color:#5f7f43}.preparation-status button{margin-top:8px;border:0;background:transparent;text-decoration:underline;color:var(--ink)}
#game[data-panel=settings] .preferences,#game[data-panel=settings] #menuSettingsButton{display:none}
.driving-tutorial{position:fixed;z-index:5;left:50%;bottom:100px;transform:translateX(-50%);width:min(400px,calc(100% - 48px));padding:18px 20px;background:#edf0e7f5;color:var(--ink);box-shadow:0 4px 25px #0a191d25;border-left:3px solid #a4bf57}.tutorial-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);margin-bottom:10px}.tutorial-heading button{border:0;background:transparent;color:var(--muted);font-size:11px;padding:4px}.driving-tutorial>strong{font-size:19px;font-weight:550}.driving-tutorial p{font-size:12px;line-height:1.8;margin:10px 0}.driving-tutorial small{display:block;font-size:10px;line-height:1.7;color:var(--muted)}.tutorial-progress{height:3px;background:#22312c12;margin-top:14px}.tutorial-progress span{display:block;height:100%;background:#6b8a38;width:0}#game:not([data-panel=none]) .driving-tutorial{display:none}
@media(max-width:820px){.settings-dock{order:2;width:100%;max-height:none;padding:22px 28px 0;background:transparent}.settings-tabs{flex-wrap:wrap}.settings-tabs button{font-size:11px;padding:9px}.driving-tutorial{bottom:265px;width:min(355px,calc(100% - 36px));padding:13px 15px}.driving-tutorial p{margin:7px 0}.driving-tutorial small{display:none}.driving-tutorial>strong{font-size:16px}}
@media(max-width:480px){.settings-dock{padding-inline:23px}.control-bindings{grid-template-columns:1fr}.driving-settings-heading{display:block}.driving-settings-heading>span{display:block;margin-top:8px}.top-actions .icon-button{width:26px;min-width:26px}.topbar{gap:8px}.driving-tutorial{bottom:260px;left:16px;transform:none;width:calc(100% - 164px);font-size:10px}.driving-tutorial p{font-size:10px}.tutorial-heading{font-size:8px}.driving-tutorial>strong{font-size:13px}}
.road-event-hud{position:fixed;z-index:4;top:89px;left:50%;transform:translateX(-50%);width:350px;padding:12px 16px;background:#edf0e7f5;color:var(--ink);border-top:3px solid #c4ae69;pointer-events:none}.road-event-hud>span{display:block;font-size:10px;color:var(--muted);margin-bottom:7px}.road-event-hud>strong{font-size:14px;font-weight:600}.road-event-hud p{font-size:11px;line-height:1.7;margin:7px 0 0}.road-event-hud[data-signal=red]{border-color:#d36f50}.road-event-hud[data-signal=green]{border-color:#739b54}#game:not([data-panel=none]) .road-event-hud{display:none}@media(max-width:1100px){.road-event-hud{top:auto;bottom:81px;width:min(350px,calc(100% - 500px))}}@media(max-width:820px){.road-event-hud{left:22px;bottom:225px;transform:none;width:185px;padding:10px 12px}.road-event-hud>strong{font-size:12px}.road-event-hud p{font-size:10px}.driving-tutorial:not([hidden])~.road-event-hud{bottom:420px}}@media(max-width:580px){.road-event-hud{left:16px;bottom:302px;width:164px;padding:9px}.road-event-hud>span{font-size:9px}.road-event-hud p{font-size:9px}.driving-tutorial:not([hidden])~.road-event-hud{bottom:420px}}

/* Temporary road conditions share the route geometry and remain distinct from destinations. */
.minimap-legend { flex-wrap: wrap; gap: 3px 8px; bottom: 6px; }
.minimap-legend>span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.minimap-legend .map-key { margin: 0; }
.map-key.construction { color: #cb8138; width: 11px; height: 7px; border-radius: 1px; background: repeating-linear-gradient(120deg,currentColor 0 2px,transparent 2px 4px); }
.map-key.breakdown { color: #3c8ca0; width: 11px; height: 7px; border-radius: 3px 3px 1px 1px; box-shadow: 2px 3px 0 -1px currentColor,-2px 3px 0 -1px currentColor; }
.minimap-legend .map-key.construction { color: #ffc78b; }.minimap-legend .map-key.breakdown { color: #8cdded; }
.route-map-road-event { cursor: pointer; }.route-map-road-event:focus { outline: none; }
.route-map-road-event:focus-visible,.route-map-road-event.is-selected { filter: drop-shadow(0 0 3px #a5672e); }
.route-map-road-event.is-behind,.route-map-road-event.is-cleared { opacity: .6; }
.roadbook-road-events { margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--line); }
.roadbook-road-events>h3 { display: flex; justify-content: space-between; font-size: 13px; }
.roadbook-road-events>p { font-size: 10px; color: var(--muted); line-height: 1.7; }
.roadbook-road-event-list { display: grid; gap: 8px; }
.roadbook-road-event { text-align: left; display: grid; gap: 6px; padding: 13px; border: 1px solid var(--line); border-left: 3px solid #c59052; color: var(--ink); background: #eceee3; }
.roadbook-road-event--breakdown { border-left-color: #518d9b; }
.roadbook-road-event:hover,.roadbook-road-event.is-selected { background: #e2e8d3; }.roadbook-road-event:focus-visible { outline: 2px solid #627545; outline-offset: 2px; }
.roadbook-road-event strong { font-size: 12px; font-weight: 550; }.roadbook-road-event span { font-size: 11px; }.roadbook-road-event small { color: var(--muted); line-height: 1.6; font-size: 9px; }
.road-event-detail { border-left: 3px solid #c59052; padding: 0 0 0 13px; }.road-event-detail--breakdown { border-left-color: #518d9b; }
.road-event-detail-heading>span { font-size: 10px; color: var(--muted); }.road-event-detail-heading>h3 { margin: 8px 0 13px; font-size: 18px; font-weight: 500; }
.road-event-detail p { font-size: 11px; line-height: 1.8; }.road-event-detail dl { font-size: 11px; line-height: 1.8; }.road-event-detail dt { color: var(--muted); }.road-event-detail dd { margin-left: 0; margin-bottom: 10px; }
#voiceStatus { font-size: 10px; line-height: 1.7; color: var(--muted); margin: 0; }
@media(min-width:821px) { .minimap-panel { height: 208px; } }

@media(min-width:581px) and (max-width:820px) { .minimap-panel { height: 168px; } }

.audio-preview-select { display: grid; gap: 8px; font-size: 11px; color: var(--muted); }.audio-preview-select select { width: 100%; padding: 10px 12px; background: #f5f6ef; color: var(--ink); border: 1px solid var(--line); font-size: 12px; }