:root { color-scheme: dark; font: 14px/1.5 system-ui, sans-serif; color: #edf5f7; background: #0a121b; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { text-shadow: 0 1px 3px #000, 0 0 2px #000, 1px 0 1px #000, -1px 0 1px #000; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.viewport { position: fixed; inset: 0; overflow: hidden; background: #152632; }
canvas { display: block; width: 100%; height: 100%; outline-offset: -4px; }
.interface { position: fixed; inset: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.interface :is(button, input, select, summary, label, a), dialog { pointer-events: auto; }
.overlay { pointer-events: none; max-width: 480px; }
.overlay:has(#status:empty) { display: none; }
#status { font-size: 12px; }
.menu-stack { width: min(480px, 100%); min-height: 0; overflow: auto; scrollbar-width: thin; }
.menu-stack:has(details[open]), .panel-content { pointer-events: auto; }
.panel-content { max-height: min(50dvh, 480px); overflow: auto; scrollbar-width: thin; padding: 4px 8px 4px 0; }
.meters { position: absolute; inset: auto max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; text-shadow: 0 1px 2px #000; }
.meters[hidden] { display: none; }
.heat-twin { display: flex; align-items: flex-end; margin: 0; width: var(--hud-w, 96px); gap: calc(var(--hud-w, 96px) * 13 / 67); --edge: #5ad46a; --fill: rgba(90,212,106,.32); }
.heat-twin .engine[data-stage="1"] { --edge: #f0d34a; --fill: rgba(240,211,74,.34); }
.heat-twin .engine[data-stage="2"] { --edge: #ff4a3a; --fill: rgba(255,74,58,.38); }
.heat-twin .engine { display: block; flex: 1; min-width: 0; box-sizing: border-box; aspect-ratio: 27 / 62; border: 2px solid #7fe3e8; border-radius: 3px; background: var(--fill); box-shadow: 0 0 6px #7fe3e8aa, inset 0 0 8px rgba(255,255,255,.2); }
.heat-twin svg { display: block; width: 100%; height: 100%; padding: 3% 5%; box-sizing: border-box; fill: var(--edge); stroke: #0a1a12; stroke-width: 1; opacity: 1; filter: brightness(1.25); }
.heat-twin .engine[data-hot=true] { animation: engine-blink .3s steps(2) infinite; }
@keyframes engine-blink { 50% { opacity: .3; } }
.speed-dial { position: relative; width: var(--hud-w, 96px); aspect-ratio: 71 / 59; margin: 0; --arc: #b04ad8; --lamp: #4cff5c; }
.speed-dial[data-stage="1"] { --arc: #ffb34d; }
.speed-dial[data-stage="2"] { --arc: #ff4a3a; --lamp: #ff3a2a; }
.speed-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.speed-dial .rim { fill: #0c2a3a; stroke: #3fd0d8; stroke-width: 9; }
.speed-dial .track { fill: none; stroke: rgba(180,230,240,.22); stroke-width: 15; stroke-linecap: round; }
.speed-dial .heat { fill: none; stroke: var(--arc); stroke-width: 15; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke .15s; }
.speed-dial .light { fill: var(--lamp); stroke: #05140a; stroke-width: 1.5; }
.speed-dial[data-hot=true] .rim, .speed-dial[data-hot=true] .light { animation: engine-blink .3s steps(2) infinite; }
.speed-dial strong { position: absolute; left: 34%; top: 64%; transform: translate(-50%, -50%); font-size: calc(var(--hud-w, 96px) * .25); font-style: italic; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #bff4ff; -webkit-text-stroke: 1px #06242e; text-shadow: 0 2px 0 #06242e; }
.speed-dial span { display: none; }
.state-note { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; text-align: center; font-size: 11px; letter-spacing: .7px; color: #edf5f7; white-space: nowrap; }
.state-note strong { color: #ffb34d; margin-right: 6px; }
#boost-bar { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 30px; display: flex; align-items: center; gap: 6px; padding: 3px 8px; border: 2px solid #7fe3e8; border-radius: 4px; background: #0c2a3a; box-shadow: 0 0 6px #7fe3e8aa, inset 0 0 8px rgba(255,255,255,.15); color: #bff4ff; font-size: 11px; font-weight: 800; font-style: italic; letter-spacing: .7px; white-space: nowrap; pointer-events: none; }
#boost-bar[hidden] { display: none; }
#boost-bar .bb-track { display: block; width: clamp(70px, 9vw, 120px); height: 9px; background: rgba(180,230,240,.22); border-radius: 5px; overflow: hidden; }
#boost-bar .bb-track b { display: block; height: 100%; background: #b04ad8; border-radius: 5px; }
#boost-bar[data-low=true] .bb-track b { background: #ff4a3a; }
#boost-bar[data-low=true] { animation: engine-blink .6s steps(2) infinite; }
#boost-bar output { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.meters[data-held=false]:not([data-flight=true]) .state-note { visibility: hidden; }
.meters[data-sprites=true] .heat-twin, .meters[data-sprites=true] .speed-dial { visibility: hidden; }
#swe1r-heat { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); width: var(--hud-w, 96px); height: auto; pointer-events: none; }
#swe1r-hud { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); width: var(--hud-w, 96px); height: auto; pointer-events: none; }
.meters[data-held=true] #drive-state { color: #ffb34d; }
.toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; max-width: 100%; }
button, .button { position: relative; padding: 7px 10px; background: rgba(0,0,0,.2); border: 1px solid #d7edf780; border-radius: 4px; color: #edf5f7; cursor: pointer; font: inherit; text-shadow: inherit; }
button:hover, .button:hover { border-color: #fff; text-decoration: underline; }
button[aria-pressed=true] { border-color: #86e4de; text-decoration: underline; }
button:disabled { color: #94a0a6; border-color: #60707a; cursor: wait; }
:is(button, input, select, summary, canvas):focus-visible, .button:focus-within { outline: 2px solid #86e4de; outline-offset: 2px; }
canvas:focus-visible { outline-offset: -3px; }
input[type=file] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
#offline { margin-left: auto; color: #8ea6b1; font-size: 12px; }
.controls { margin: 10px 0; font-size: 12px; }
kbd { font: 11px system-ui; border: 1px solid #35515e; padding: 2px 5px; border-radius: 4px; }
#welcome { position: absolute; inset: 30% 24px auto; max-width: 440px; pointer-events: none; }
#place { color: #b8eeeb; font-weight: 650; font-size: 12px; letter-spacing: 1px; }
#resident { font-size: 14px; }
#coordinates { font-size: 11px; color: #b8cbd2; }
.primary { border-color: #86e4de; color: #b8ffed; }
footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; font-size: 11px; }
footer button { font-size: 11px; padding: 5px 8px; }
footer #offline { margin-left: 0; }
#error, #problems { color: #ffe1b5; overflow-wrap: anywhere; }
#error { max-height: 20dvh; overflow: auto; pointer-events: auto; }
#problems { white-space: pre-wrap; font-size: 11px; }
summary { cursor: pointer; width: fit-content; max-width: 100%; }
details { margin: 0 0 8px; }
.sound-control { display: flex; align-items: center; gap: 5px; }
.preferences { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; }
.preferences label { display: flex; gap: 8px; align-items: center; }
select, input[type=number] { background: rgba(0,0,0,.2); color: #edf5f7; border: 1px solid #d7edf780; border-radius: 4px; padding: 6px; font: inherit; text-shadow: inherit; }
option { background: #0a121b; }
dialog { width: min(740px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; background: transparent; color: #edf5f7; border: 0; padding: 16px; text-shadow: inherit; }
dialog::backdrop { background: transparent; }
#map-panel { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; background: transparent; position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
#map-stage { position: relative; width: min(80vw, calc(80dvh * var(--map-aspect, 1.6))); aspect-ratio: var(--map-aspect, 1.6); margin: auto; top: 50%; transform: translateY(-50%); }
#map-canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
#map-close { position: absolute; top: 8px; right: 8px; pointer-events: auto; }
#map-status { position: absolute; bottom: 8px; left: 8px; margin: 0; padding: 2px 8px; }
.map-icon { position: absolute; transform: translate(-50%, -50%); min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; border: 2px solid #ffd36b; background: rgba(120,20,20,.9); color: #fff; font-size: 12px; white-space: nowrap; cursor: pointer; pointer-events: auto; }
.map-icon:focus-visible { outline: 3px solid #fff; }
.map-track { position: absolute; transform: translate(-50%, -100%); color: #ffb62e; font-size: 20px; line-height: 1; text-shadow: 0 0 4px #000, 0 0 8px #f90; pointer-events: none; }
#map-you { position: absolute; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 22px solid #4df; transform-origin: 50% 70%; pointer-events: none; }
dialog h2 { color: #ffb34d; margin-top: 0; }
#tuning-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
#tuning-fields label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#tuning-fields input { width: 110px; min-width: 0; }
#tuning-status { color: #ffb34d; min-height: 1.5em; }
#sound-status { font-size: 12px; }
.overlay, #welcome, #error, .sound-control, #sound-status:not(:empty), summary, .panel-content, dialog { background: rgba(0,0,0,.2); }
.panel-content :is(button, .button, select, input[type=number]), dialog :is(button, .button, select, input[type=number]) { background: transparent; }
[hidden] { display: none !important; }
#loading-screen { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: max(24px, env(safe-area-inset-top)); background: radial-gradient(ellipse at 50% 35%, #263137, #090d12 75%); text-align: center; }
#loading-screen[open] { display: grid; place-items: center; }
#loading-screen::backdrop { background: #090d12; }
#loading-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.loading-bar { position: relative; }
#loading-bar-art { display: block; width: 100%; height: auto; }
.has-loading-bar #loading-progress { position: absolute; opacity: 0; }
.has-loading-art .loading-frame { position: relative; align-self: end; width: min(900px, 100%); padding: 12px 24px; border: 0; box-shadow: none; background: #090d12dd; }
.has-loading-art .loading-kicker { display: none; }
.has-loading-art #loading-title { font-size: 22px; margin: 0 0 12px; }
.has-loading-art #loading-tip { margin-top: 12px; }
#loading-warning:empty { display: none; }
#loading-warning { color: #f0d48a; font-size: 12px; }
.loading-frame { width: min(680px, 100%); padding: 48px clamp(16px, 5vw, 64px); border-block: 2px solid #9c7b41; box-shadow: 0 1px #dac18a, 0 -1px #40351f; }
.loading-kicker { color: #dac18a; letter-spacing: .25em; text-transform: uppercase; font-size: 12px; }
#loading-title { color: #ead5a4; font: 38px/1.2 Georgia, serif; margin: 24px 0 36px; }
#loading-stage { min-height: 3em; color: #f2e9d8; }
#loading-progress { display: block; width: 100%; height: 22px; padding: 3px; border: 1px solid #ac8a4c; border-radius: 3px; background: #101216; accent-color: #c8a454; }
#loading-progress::-webkit-progress-bar { background: #101216; }
#loading-progress::-webkit-progress-value { background: linear-gradient(#f0d48a, #9b702e); }
#loading-count { min-height: 1.5em; color: #dac18a; font-variant-numeric: tabular-nums; }
#loading-tip { margin: 36px 0 0; font-size: 12px; color: #bfc7ca; }
@media (max-width: 700px) { .meters { gap: 8px; padding: 8px; } .meters span { font-size: 9px; } #tuning-fields { grid-template-columns: 1fr; } }
#race-prompt { position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%); padding: 8px 16px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,200,60,.8); border-radius: 6px; color: #ffd36a; font-weight: 600; pointer-events: none; }
#race-countdown { position: fixed; inset: 18% 0 auto 0; text-align: center; font-size: 112px; font-weight: 800; color: #fff; text-shadow: 0 0 12px #000, 0 0 3px #000; pointer-events: none; }
#race-countdown canvas { display: block; margin: 0 auto; width: 160px; height: 160px; image-rendering: pixelated; }
#race-prompt[hidden], #race-countdown[hidden] { display: none; }
#race-hud { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: min(100vw, 900px); text-align: center; color: #f4fbff; pointer-events: none; }
#race-hud .rh-band { display: block; width: 100%; height: clamp(44px, 7vw, 78px); fill: rgba(14,86,112,.78); stroke: #7fe3f2; stroke-width: 1.5px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
#race-hud .rh-row { position: absolute; top: 0; left: 0; right: 0; height: clamp(38px, 6vw, 66px); display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: start; padding: 0 clamp(8px, 3vw, 28px); }
#race-hud .rh-cell { display: flex; flex-direction: column; align-items: center; line-height: 1; padding-top: 3px; }
#race-hud .rh-cell b { font-size: clamp(16px, 3.2vw, 34px); font-style: italic; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #03202a, 0 0 4px #03202a; }
#race-hud .rh-time b { font-size: clamp(21px, 4.6vw, 48px); color: #fff; }
#race-hud .rh-cell small { margin-top: 2px; font-size: clamp(8px, 1.3vw, 14px); letter-spacing: .22em; color: #9fe9f5; }
#race-hud .rh-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; margin-top: 6px; font-size: 12px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#race-hud .rh-sub > :empty { display: none; }
@media (max-width: 1100px) { #race-hud { top: 26px; } }
#race-laps { font-size: 14px; font-variant-numeric: tabular-nums; }
#race-laps:empty, #race-banner { position: fixed; inset: 30% 0 auto 0; text-align: center; font-size: 64px; font-weight: 800; letter-spacing: .12em; color: #ffd27a; text-shadow: 0 0 14px #000, 0 0 3px #000; pointer-events: none; }
#race-banner[hidden] { display: none; }



#race-delta { font-weight: 700; color: #ff6b6b; }
#race-delta[data-ahead=true] { color: #6bff9a; }
#race-arrow { display: inline-block; font-size: 22px; line-height: 1; color: #ffd36a; text-shadow: 0 0 4px rgba(0,0,0,.8); }
#race-arrow[data-behind=true] { color: #ff6b6b; animation: engine-blink .6s steps(2) infinite; }
#race-range { font-variant-numeric: tabular-nums; color: #bff4ff; }
#race-board { position: fixed; right: 16px; top: 120px; min-width: 210px; padding: 10px 14px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,200,60,.8); border-radius: 6px; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
#race-board strong { display: block; margin-bottom: 4px; color: #ffd36a; }
#race-board .this { color: #6bff9a; font-weight: 700; }
#race-hud[hidden], #race-board[hidden], #race-arrow[hidden] { display: none; }
#race-menu { min-width: 240px; padding: 16px 20px; background: #1a1209; border: 3px double #c8a24a; border-radius: 6px; color: #ffd36a; }
#race-menu::backdrop { background: rgba(0,0,0,.55); }
#race-menu h2 { margin: 0 0 12px; font-size: 1.1rem; text-align: center; }
#race-menu button { display: block; width: 100%; margin: 6px 0; padding: 8px; background: #3a2810; color: #ffd36a; border: 1px solid #c8a24a; border-radius: 4px; font: inherit; cursor: pointer; }
#race-menu button:hover, #race-menu button:focus-visible { background: #5a3d18; }
#race-menu button[hidden] { display: none; }

#track-editor { position: fixed; inset: 0; z-index: 30; pointer-events: auto; }
#te-canvas { position: absolute; inset: 0; width: 100%; height: 100%; outline: none; cursor: crosshair; }
#te-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 8px; background: rgba(26,18,9,.9); border: 2px solid #c8a24a; border-radius: 6px; }
#te-bar button, #te-panel button { background: #3a2a12; color: #ffd36a; border: 1px solid #c8a24a; border-radius: 4px; padding: 5px 9px; cursor: pointer; }
#te-bar button[aria-pressed="true"], #te-panel button[aria-pressed="true"] { background: #c8a24a; color: #1a1209; }
.te-gap { width: 14px; }
#te-panel { position: absolute; top: 64px; right: 10px; bottom: 10px; width: 250px; overflow: auto; padding: 10px; background: rgba(26,18,9,.9); border: 2px solid #c8a24a; border-radius: 6px; color: #ffd36a; font-size: .85rem; }
#te-panel label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
#te-panel input, #te-panel select { width: 130px; background: #120c05; color: #ffd36a; border: 1px solid #7a622b; padding: 3px; }
#te-panel ol { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
#te-panel ol button { width: 100%; text-align: left; }
#te-panel fieldset { border: 1px solid #7a622b; margin: 6px 0; }
#te-status[data-bad="true"] { color: #ff7a7a; }

/* Esc / Game Menu: sections that used to sit on screen */
#menu-hint { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); margin: 0; font-size: 11px; letter-spacing: 1px; color: #c9bb94; opacity: .7; pointer-events: none; }
#welcome { pointer-events: auto; }
#welcome[hidden] { display: none; }
#menu-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
#race-menu #menu-tabs button { display: inline-block; width: auto; margin: 0; padding: 5px 10px; font-size: 12px; }
#race-menu #menu-tabs button[aria-selected=true] { background: #5a3d18; text-decoration: underline; }
.menu-page { min-width: min(460px, 86vw); max-height: 62dvh; overflow: auto; scrollbar-width: thin; }
.menu-page[hidden] { display: none; }
.menu-page fieldset { border: 1px solid #c8a24a66; border-radius: 4px; margin: 0 0 10px; padding: 6px 10px 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.menu-page legend { color: #ffb34d; padding: 0 6px; font-size: 12px; letter-spacing: 1px; }
.menu-page fieldset label { display: flex; gap: 6px; align-items: center; }
#race-menu .menu-page fieldset button, #race-menu .menu-page .toolbar button, #race-menu #data-folder button { display: inline-block; width: auto; margin: 0; }
#race-menu .menu-page footer button { width: auto; display: inline-block; }
#race-menu .menu-page :is(select, input[type=range]) { background: #3a2810; color: #ffd36a; border-color: #c8a24a; }
#race-menu :is(p, pre) { color: #e8d9aa; }
#data-folder { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* Entry panel and menu theme: original stone, parchment and gold drawn in CSS only, no game art or fonts. */
:root { --gold: #d9b45a; --gold-dim: #8a6b2c; --ink: #1a120a; --parch: #e9d9ae; --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif; }
.viewport:has(#welcome:not([hidden])) {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,170,60,.16), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.75), transparent 60%),
    linear-gradient(#2b2420, #14100d 70%, #0b0907);
}
#welcome { position: absolute; inset: auto; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); max-width: none; padding: 34px 40px 28px; text-align: center; font-family: var(--serif); color: var(--parch);
  background: linear-gradient(rgba(58,44,26,.94), rgba(30,21,12,.96)); border: 2px solid var(--gold-dim); outline: 1px solid var(--gold); outline-offset: -9px; border-radius: 3px;
  box-shadow: 0 0 0 5px #120c07, 0 0 0 6px var(--gold-dim), 0 22px 60px rgba(0,0,0,.8), inset 0 0 60px rgba(0,0,0,.55); text-shadow: 0 1px 2px #000; }
#welcome::before, #welcome::after { content: "\2756"; position: absolute; top: 8px; color: var(--gold); font-size: 16px; line-height: 1; }
#welcome::before { left: 12px; } #welcome::after { right: 12px; }
#welcome-title { margin: 0; font: 700 clamp(30px, 6vw, 44px)/1.1 var(--serif); letter-spacing: 3px; text-transform: uppercase; background: linear-gradient(#fff3c4, #e0b64e 55%, #8b6420); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 2px #000); }
.welcome-tag { margin: 6px 0 18px; font-style: italic; letter-spacing: 1px; color: #c9b27a; }
.welcome-tag::after { content: ""; display: block; height: 10px; margin: 14px auto 0; width: 70%; background: linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold) 50%, var(--gold-dim) 70%, transparent) center / 100% 1px no-repeat; }
#welcome-actions { display: grid; gap: 10px; justify-items: center; }
#welcome #select { width: 100%; padding: 14px 18px; font: 700 18px/1.2 var(--serif); letter-spacing: 1px; color: #3b2606; text-shadow: 0 1px 0 rgba(255,235,170,.6); border: 2px solid #5b3d10; border-radius: 4px;
  background: linear-gradient(#f4d77c, #d3a13a 48%, #b07f22 52%, #cf9f3a); box-shadow: inset 0 1px 0 #fff0b8, inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px var(--gold), 0 3px 8px rgba(0,0,0,.6); }
#welcome #select:hover:not(:disabled), #welcome #select:focus-visible { filter: brightness(1.12); text-decoration: none; }
#welcome #select:disabled { filter: grayscale(.8) brightness(.7); cursor: wait; }
#folder-extras { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#swe1r-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 8px 0; font: 13px var(--serif); color: var(--gold-dim); }
#swe1r-row button { font: 13px var(--serif); color: var(--gold); background: rgba(0,0,0,.35); border: 1px solid var(--gold-dim); border-radius: 3px; }
#swe1r-status[data-ok="1"] { color: #9fd89f; }
#folder-extras button, #data-folder button { font: 13px var(--serif); color: var(--gold); background: rgba(0,0,0,.35); border: 1px solid var(--gold-dim); border-radius: 3px; }
#folder-extras button:hover, #data-folder button:hover { border-color: var(--gold); color: #fff3c4; text-decoration: none; }
.welcome-help { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: #bda878; }
.welcome-help strong { color: var(--gold); }
#welcome :focus-visible { outline: 2px solid #fff3c4; outline-offset: 3px; }
#race-menu, #race-menu :is(h2, button, legend, label, select, p, pre, summary) { font-family: var(--serif); }
#race-menu { background: linear-gradient(#2b2013, #17100a); border: 2px solid var(--gold-dim); outline: 1px solid var(--gold); outline-offset: -7px; box-shadow: 0 0 0 4px #120c07, 0 0 0 5px var(--gold-dim), 0 18px 50px rgba(0,0,0,.75); padding: 22px 26px; }
#race-menu h2 { color: var(--gold); letter-spacing: 3px; text-transform: uppercase; font-size: 1.2rem; }
#race-menu button { background: linear-gradient(#4a3417, #2e200e); border-color: var(--gold-dim); color: var(--gold); }
#race-menu button:hover, #race-menu button:focus-visible { background: linear-gradient(#6a4a1e, #43300f); border-color: var(--gold); color: #fff3c4; text-decoration: none; }
#race-menu #menu-tabs button[aria-selected=true] { background: linear-gradient(#7a5622, #4d3511); color: #fff3c4; }
#menu-hint { font-family: var(--serif); color: var(--gold); }

.welcome-note { margin: 0.9rem 0 0; font-size: 0.72rem; line-height: 1.4; opacity: 0.7; }

#garage { min-width: min(640px, 92vw); padding: 18px 22px; background: linear-gradient(#2b2013, #17100a); border: 2px solid #c8a24a; border-radius: 6px; color: #e8d9aa; font-family: Georgia, serif; }
#garage::backdrop { background: rgba(0,0,0,.55); }
#garage h2 { color: #ffd36a; text-align: center; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 10px; }
#garage h3 { margin: 10px 0 4px; color: #ffd36a; font-size: .9rem; }
#garage button { background: linear-gradient(#4a3417, #2e200e); color: #ffd36a; border: 1px solid #a98836; border-radius: 4px; padding: 6px 12px; font: inherit; cursor: pointer; }
#garage button:hover, #garage button:focus-visible { background: linear-gradient(#6a4a1e, #43300f); color: #fff3c4; }
#garage [aria-selected=true], #garage [aria-checked=true] { outline: 2px solid #ffd36a; }
#garage button[disabled] { opacity: .4; cursor: not-allowed; }
#garage-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
#garage-skins { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; align-content: start; text-align: center; }
#garage-stats div { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; margin: 3px 0; }
#garage-stats i { display: block; height: 8px; background: #ffd36a; border-radius: 4px; }
#garage-races { margin: 0; padding-left: 18px; }
#garage footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
#garage-hint { font-size: .75rem; opacity: .7; margin: 8px 0 0; }#hit-flash { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(220,20,20,.85) 100%); }
#hit-flash[hidden] { display: none; }
#boost-fx { position: fixed; inset: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(160,220,255,.5) 0 .6deg, transparent .6deg 7deg); -webkit-mask-image: radial-gradient(ellipse at center, transparent 45%, #000 100%); mask-image: radial-gradient(ellipse at center, transparent 45%, #000 100%); }
#boost-fx[hidden] { display: none; }
details.welcome-help summary { cursor: pointer; } details.welcome-help p { margin: 8px 0 0; } .welcome-help a { color: var(--gold); }

#time-hud { position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 14px; align-items: center; font-size: 13px; pointer-events: none; }
#time-hud label { pointer-events: auto; background: rgba(0,0,0,.2); padding: 0 8px; border-radius: 4px; }
#ist-clock { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
#launch-tools{position:absolute;left:10px;bottom:10px;background:rgba(26,18,9,.9);color:#ffd36a;border:2px solid #c8a24a;border-radius:6px;padding:12px;z-index:5;width:280px;font-size:.85rem}
#launch-tools label{display:block;margin:4px 0}

/* Flight instruments (flight-hud.js): right edge, stacked above the SWE1R dial; the dial is ~0.83 x --hud-w tall. Clears the race board (top), boost bar (bottom centre) and gate guide (top centre). */
#flight-hud { --fh-gold: #d9b24a; --fh-w: clamp(84px, calc(var(--hud-w, 96px) * .62), 132px); position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--hud-w, 96px) * .84 + 14px); width: var(--fh-w); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; font-family: 'WoW Friz', 'Friz Quadrata TT', var(--serif, Georgia, serif); text-shadow: 0 1px 2px #000; z-index: 5; }
#flight-hud[hidden], #flight-hud[data-fly="true"] { display: none; }
#flight-hud .fh-compass { position: relative; width: var(--fh-w); height: var(--fh-w); border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(24,26,34,.82) 0 62%, rgba(10,10,14,.7) 100%); }
#flight-hud .fh-card { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--fh-gold); box-shadow: inset 0 0 0 1px #5a4513, 0 0 0 1px #000; box-sizing: border-box; will-change: transform; }
#flight-hud[data-art="ring"] .fh-card { border: 0; box-shadow: none; }
#flight-hud .fh-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
#flight-hud .fh-card svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
#flight-hud .fh-arrow { fill: #ffd36a; stroke: #2a1d06; stroke-width: 2; stroke-linejoin: round; }
#flight-hud[data-overhead="true"] .fh-arrow { opacity: 0; }
#flight-hud[data-overhead="true"] .fh-compass::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12%; height: 12%; margin: -6%; border-radius: 50%; background: #ffd36a; box-shadow: 0 0 0 2px #2a1d06; }
#flight-hud .fh-fwd { position: absolute; top: -5px; left: 50%; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-top: 8px solid #6fe3ff; border-bottom: 0; filter: drop-shadow(0 1px 1px #000); }
#flight-hud .fh-drum { --n: 5; display: flex; gap: 1px; padding: 3px 4px; box-sizing: border-box; font-size: clamp(13px, calc(var(--hud-w, 96px) * .085), 20px); background: rgba(10,8,5,.82); border: 2px solid var(--fh-gold); border-radius: 4px; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #000; }
#flight-hud .fh-wheel { position: relative; display: block; width: .72em; height: 1.3em; overflow: hidden; background: linear-gradient(rgba(0,0,0,.55), rgba(255,255,255,.04) 40%, rgba(255,255,255,.04) 60%, rgba(0,0,0,.55)); }
#flight-hud .fh-wheel b { display: block; will-change: transform; }
#flight-hud .fh-wheel i { display: block; height: 1.3em; line-height: 1.3em; text-align: center; font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
#flight-hud .fh-rate { padding: 1px 7px; border-radius: 3px; background: rgba(0,0,0,.5); font-size: clamp(12px, calc(var(--hud-w, 96px) * .07), 16px); font-variant-numeric: tabular-nums; white-space: nowrap; }
#flight-hud .fh-rate[data-sign="up"] { color: #6fe3ff; }
#flight-hud .fh-rate[data-sign="down"] { color: #ff9a4d; }
#flight-hud .fh-rate[data-sign="zero"] { color: #d9d2bd; }