:root {
    color-scheme: light;
    --ink: #18241e;
    --line: #bdc6bc;
    --red: #c83235;
    --blue: #176eb2;
    font-family: Rally Mono, monospace;
    letter-spacing: 0;
    background: #e8ebe5;
    color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; background: repeating-linear-gradient(90deg, transparent 0 63px, #12281904 63px 64px); }
header { max-width: 1350px; margin: auto; padding: 16px 20px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
h1 { margin: 0; font-size: 22px; flex: 1; }
.track-select { display: flex; align-items: center; gap: 8px; font-size: 12px; }
select { font: inherit; color: inherit; padding: 8px; border: 1px solid var(--line); background: #f8faf6; border-radius: 4px; }
nav { display: flex; gap: 6px; }
button, nav a { width: 40px; height: 40px; display: grid; place-items: center; background: #f8faf6; border: 1px solid var(--line); border-radius: 4px; color: inherit; cursor: pointer; touch-action: none; user-select: none; }
button svg, nav a svg { width: 20px; height: 20px; pointer-events: none; }
button:hover:not(:disabled), button.held, nav a:hover { background: #cdd8cc; border-color: #526953; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, nav a:focus-visible, select:focus-visible, canvas:focus-visible { outline: 2px solid #e69810; outline-offset: 3px; }
#play { color: #fff; background: #28543c; }
#landscape-menu { display: none; }
main { padding: 12px 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
body[data-network] { --stage-reserve: 273px; }
.scoreboard, .pads { width: min(100%, 1350px, calc((100svh - var(--stage-reserve, 220px)) * 1.5)); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.scoreboard { font-size: 13px; flex-wrap: wrap; }
.scoreboard > div { display: flex; gap: 12px; align-items: center; }
.scoreboard img { width: 15px; height: 30px; object-fit: contain; }
output { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
#race-time { min-width: 9ch; text-align: right; }
.red { color: var(--red); }
.blue { color: var(--blue); }
.stage { position: relative; width: min(100%, 1350px, calc((100svh - var(--stage-reserve, 220px)) * 1.5)); aspect-ratio: 3 / 2; }
.race-layout, .scoreboard, .pads, .session-controls { width: min(100%, 1614px, calc((100svh - var(--stage-reserve, 220px)) * 1.5 + 264px)); }
.race-layout { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 16px; align-items: start; }
.race-layout .stage { width: 100%; min-width: 0; }
.race-layout[data-telemetry="false"] { grid-template-columns: minmax(0, 1fr); width: min(100%, 1350px, calc((100svh - var(--stage-reserve, 220px)) * 1.5)); }
.race-layout[data-telemetry="false"] .telemetry { display: none; }
.telemetry { min-width: 0; padding-left: 12px; border-left: 1px solid var(--line); font-size: 11px; }
.telemetry-heading { display: flex; align-items: center; gap: 6px; height: 34px; border-bottom: 2px solid var(--driver-color, var(--red)); }
.telemetry-heading label { font-size: 11px; }
.telemetry-heading select { min-width: 0; padding: 3px; font-size: 11px; max-width: 84px; }
.telemetry-state { margin-left: auto; font-size: 9px; color: #526953; }
.telemetry[data-stale="true"] .telemetry-state { color: #a81820; }
.telemetry[data-stale="true"] .telemetry-instruments { opacity: .5; }
.telemetry-instruments { display: grid; gap: 8px; }
.engine-instrument { position: relative; height: 110px; }
.engine-instrument svg { width: 100%; height: 106px; overflow: visible; }
.rpm-track { fill: none; stroke: #c3ccc2; stroke-width: 8; }
.rpm-redline { fill: none; stroke: #c83235; stroke-width: 8; }
.rpm-ticks line { stroke: var(--ink); stroke-width: 1.5; }
.rpm-ticks text, .rpm-unit { fill: var(--ink); text-anchor: middle; font-size: 10px; font-family: inherit; }
.rpm-unit { font-size: 8px; }
.rpm-needle { stroke: #c83235; stroke-width: 2.5; }
.rpm-hub { fill: var(--ink); }
.rpm-value { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 18px; line-height: 1; }
.gear-label { position: absolute; right: 3px; top: 44px; font-size: 10px; }
.gear-value { font-size: 16px; }
.tire-units { text-align: center; font-size: 10px; color: #526953; }
.chassis-diagram { position: relative; height: 240px; }
.chassis-diagram svg { width: 100%; height: 100%; }
.chassis-outline { fill: none; stroke: #718376; stroke-width: 1.5; stroke-linejoin: round; }
.diagram-wheel rect { fill: var(--slip-color, #368b50); stroke: var(--ink); stroke-width: 1; }
.diagram-wheel path { fill: none; stroke: #ffffff9c; stroke-width: 1; }
.wheel-readings { list-style: none; padding: 0; margin: 0; }
.wheel-reading { position: absolute; width: 33%; display: flex; flex-direction: column; gap: 1px; line-height: 15px; font-size: 12px; }
.wheel-fl { top: 16%; left: 0; }
.wheel-fr { top: 16%; right: 0; text-align: right; }
.wheel-rl { top: 60%; left: 0; }
.wheel-rr { top: 60%; right: 0; text-align: right; }
.wheel-name { color: #526953; font-size: 9px; }
.wheel-slip, .wheel-side { color: var(--slip-color, #368b50); }
.wheel-power { font-weight: bold; color: var(--ink); }
.wheel-load, .wheel-friction { color: var(--ink); font-size: 10px; white-space: nowrap; }
.telemetry-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px; font-size: 9px; }
.grip-key::before, .slip-key::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; background: currentColor; }
.grip-key { color: #368b50; }
.slip-key { color: #b22c28; }
.power-key { flex-basis: 100%; text-align: center; color: var(--ink); }
.gforce-instrument circle, .gforce-instrument path { fill: none; stroke: #acb9ad; stroke-width: 1; }
.gforce-instrument .gforce-vector { stroke: #147e83; stroke-width: 2; }
.gforce-instrument .gforce-dot { fill: #147e83; stroke: #f8faf6; stroke-width: 1.5; }
.gforce-readings { display: flex; justify-content: center; gap: 12px; padding: 2px 0 6px; font-size: 10px; }
.gforce-readings > span { display: flex; gap: 4px; color: #526953; }
.balance-readings { display: flex; justify-content: center; gap: 12px; padding-bottom: 6px; font-size: 10px; }
.balance-readings > span { display: flex; gap: 4px; color: #526953; }
#telemetry-toggle[aria-pressed="true"] { color: #21653b; border-color: #526953; background: #dce6d9; }
body[data-ready="locked"] .race-layout { width: min(100%, 600px); grid-template-columns: minmax(0, 1fr); }
body[data-ready="locked"] .telemetry { display: none; }
.session-controls { width: min(100%, 1350px, calc((100svh - var(--stage-reserve, 220px)) * 1.5)); height: 41px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
#race-phase { font-size: 13px; }
#start-race { display: flex; width: auto; height: 34px; padding: 4px 12px; gap: 6px; align-items: center; font: inherit; font-size: 12px; background: #d8ef68; }
.race-start { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.start-lights { display: flex; gap: 14px; padding: 12px 16px; border: 2px solid #647568; border-radius: 6px; background: #15201e; }
.start-lights span { width: 32px; aspect-ratio: 1; border-radius: 50%; background: #42322f; border: 2px solid #080f0c; }
.start-lights span[data-lit="true"] { background: #f83b3f; box-shadow: 0 0 12px #f83b3f80; }
.start-go { color: #e4ff6a; font-size: 64px; line-height: 1; text-shadow: 3px 3px 0 #1a2823, -2px -2px 0 #1a2823, 2px -2px 0 #1a2823, -2px 2px 0 #1a2823; }
canvas { width: 100%; height: 100%; display: block; background: #d6ded2; touch-action: none; }
#status, #result { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; padding: 24px; text-align: center; background: #edf1e5e8; font-size: 16px; overflow-wrap: anywhere; }
#result { background: #edf1e5c9; font-size: 24px; pointer-events: none; }
#unlock { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 16px max(16px, calc((100% - 320px) / 2)); background: #e8ebe5; }
#unlock h2 { margin: 0 0 12px; font-size: 18px; }
#unlock label { margin-bottom: 6px; font-size: 13px; }
.password-entry { display: flex; gap: 8px; }
#password { min-width: 0; flex: 1; height: 44px; border: 1px solid var(--line); border-radius: 4px; padding: 10px; font: inherit; font-size: 16px; background: #f8faf6; color: inherit; }
#password:focus-visible { outline: 2px solid #e69810; outline-offset: 2px; }
#unlock button { flex: 0 0 44px; height: 44px; background: #28543c; color: #fff; }
#unlock-error, #unlock-status { margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }
#unlock-error { color: #a81820; }
body[data-ready="locked"] .stage { width: min(100%, 600px); min-height: 220px; }
body[data-ready="locked"] :is(.scoreboard, .pads, .touch-controls) { display: none; }
.pad { display: flex; gap: 6px; }
.pad button { width: 44px; height: 44px; border-bottom: 3px solid currentColor; }
#add-player { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 12px; }
.touch-controls { display: none; }
.touch-controls, .touch-controls * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-controls[aria-disabled="true"] { opacity: .4; }
.touch-zone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 144px; min-width: 0; border: 1px solid #829581; border-radius: 6px; overflow: hidden; background: #f8faf6; }
.touch-zone > span { display: grid; place-items: center; min-height: 0; }
.touch-zone * { pointer-events: none; }
.touch-zone > span + span { border-left: 1px solid var(--line); }
.touch-zone svg { width: 30px; height: 30px; }
.touch-zone [data-active="true"] { background: #bfd0bb; box-shadow: inset 0 0 0 2px #526953; }
.pedals { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.pedals > span + span { border-left: 0; border-top: 1px solid var(--line); }
.pedals [data-touch-bit="4"] { background: #e1eee4; color: #28543c; }
.pedals [data-touch-bit="4"][data-active="true"] { background: #28543c; color: #fff; box-shadow: inset 0 0 0 2px #84ba8a; }
#connect[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); background: #e0edf7; }
body[data-network="host"] .pad.blue, body[data-network="guest"] .pad.red { display: none; }
body[data-network="guest"] .pads { justify-content: flex-end; }
#connection { width: min(420px, calc(100% - 24px)); max-height: calc(100svh - 24px); padding: 18px; border: 1px solid #829581; border-radius: 6px; background: #f3f6ef; color: var(--ink); overflow-y: auto; }
#connection::backdrop { background: #101c16a6; }
.connection-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.connection-heading h2 { margin: 0; font-size: 18px; }
.connection-heading button { flex: 0 0 40px; }
#connection-status { min-height: 36px; margin: 12px 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#connection-status.error, #qr-scan-status.error { color: #a81820; }
#connection-roster { list-style: none; padding: 0; margin: 12px 0; font-size: 12px; }
#connection-roster li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 28px; border-bottom: 1px solid var(--line); }
#connection-roster li > span:last-child { font-size: 11px; color: #526953; }
.player-swatch { width: 12px; height: 12px; border: 1px solid #526953; border-radius: 2px; }
.connection-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#connection button:not(#connection-close, #copy-code), .image-upload { width: auto; min-height: 44px; height: auto; padding: 10px 12px; display: flex; gap: 8px; align-items: center; justify-content: center; font: inherit; font-size: 12px; }
#host-game { background: #28543c; color: #fff; }
#pairing-qr { margin: 16px 0; text-align: center; }
#pairing-qr canvas { width: min(100%, 340px, calc(100svh - 100px)); height: auto; aspect-ratio: 1; margin: auto; background: #fff; }
#pairing-label { margin-top: 8px; font-size: 12px; }
#qr-scanner { position: relative; }
#connection.scanning > :is(#connection-status, #connection-roster, .connection-actions) { display: none; }
#qr-scan-status { position: sticky; top: 0; z-index: 1; margin: 8px 0; padding: 4px 0; background: #f3f6ef; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#qr-scan-detail { display: block; margin: 4px 0 8px; font-size: 11px; color: #526953; white-space: normal; overflow-wrap: anywhere; }
#qr-camera-choice { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; }
#qr-camera-select { min-width: 0; flex: 1; width: 100%; }
#qr-camera { display: block; width: min(100%, calc(100svh - 200px)); margin: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #18241e; border-radius: 4px; }
#stop-camera { margin-top: 8px; }
.image-upload { cursor: pointer; border: 1px solid var(--line); border-radius: 4px; background: #f8faf6; }
.image-upload svg { width: 20px; height: 20px; }
.image-upload:hover { background: #cdd8cc; }
#connection details { margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
#connection summary { cursor: pointer; padding: 4px 0; }
#connection details label { display: block; margin-top: 12px; }
#pairing-code { width: 100%; margin: 8px 0; padding: 8px; resize: vertical; min-height: 76px; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); overflow-wrap: anywhere; }
#disconnect-game { margin-top: 16px; color: #a81820; }
.account { position: relative; }
#account { width: auto; max-width: 22ch; min-width: 40px; padding: 0 10px; display: flex; gap: 6px; font: inherit; font-size: 12px; touch-action: manipulation; }
#account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#account[data-status="google"] { background: #d8ef68; }
#account:is([data-status="offline"], [data-status="unavailable"]) { color: #5d6b60; }
#account[data-status="unavailable"] { max-width: none; }
#account-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; padding: 4px; background: #f8faf6; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 4px 12px #18241e26; }
#account-menu button { width: auto; height: 40px; padding: 0 12px; display: flex; gap: 6px; font: inherit; font-size: 12px; white-space: nowrap; touch-action: manipulation; }
#auth-notice { max-width: 1350px; margin: 8px auto 0; padding: 6px 6px 6px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; border: 1px solid #526953; border-radius: 4px; background: #f8faf6; }
#auth-notice button { flex: 0 0 32px; width: 32px; height: 32px; touch-action: manipulation; }
@media (pointer: coarse), (max-width: 700px), (max-height: 500px) {
    header { flex-wrap: wrap; }
    .pads { display: none; }
    .touch-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; max-width: 950px; position: sticky; bottom: 0; z-index: 3; padding: 10px 8px max(12px, env(safe-area-inset-bottom)); background: #e8ebe5f5; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
    header { padding: 12px; gap: 10px; flex-wrap: wrap; }
    h1 { font-size: 18px; flex: 1; white-space: nowrap; }
    .track-select { order: 3; flex: 1 1 200px; min-width: 0; }
    .track-select select { flex: 1; }
    nav { gap: 4px; }
    nav button, nav a { width: 34px; height: 36px; }
    .account { order: 4; }
    #account, #account[data-status="unavailable"] { height: 36px; max-width: 16ch; padding: 0 8px; }
    #auth-notice { margin: 8px 8px 0; }
    main { padding: 10px 8px 16px; gap: 12px; }
    .stage, .scoreboard, .pads, .session-controls { width: 100%; }
    .scoreboard { font-size: 11px; gap: 8px; flex-wrap: wrap; }
    .scoreboard > div { gap: 6px; }
    .race-time, .best { flex: 1 0 calc(50% - 4px); justify-content: flex-end; }
    .pads { gap: 12px; }
    .pad { display: grid; grid-template-columns: repeat(2, 44px); gap: 6px; }
}
@media (max-width: 850px) {
    .race-layout, .race-layout[data-telemetry="false"] { grid-template-columns: minmax(0, 1fr); width: min(100%, 1350px, calc((100svh - var(--stage-reserve, 220px)) * 1.5)); gap: 10px; }
    .telemetry { width: 100%; border-left: 0; border-top: 1px solid var(--line); padding: 8px 0 0; }
    .telemetry-instruments { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4px 16px; align-items: center; max-width: 560px; margin: auto; }
    .engine-instrument { grid-column: 1; }
    .chassis-instrument { grid-column: 2; }
    .gear-label { top: 0; }
}
@media (max-width: 600px) and (orientation: portrait) {
    body:not([data-ready="locked"]) { height: 100svh; display: flex; flex-direction: column; }
    body:not([data-ready="locked"]) header { flex-shrink: 0; width: 100%; }
    body:not([data-ready="locked"]) main { flex: 1; min-height: 0; width: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
    body[data-network] main { grid-template-rows: auto auto minmax(0, 1fr) auto; }
    body:not([data-ready="locked"]) .race-layout { min-height: 0; max-height: 100%; overflow-y: auto; align-self: stretch; align-content: start; }
    body:not([data-ready="locked"]) .race-layout .stage { width: min(100%, max(204px, calc((100svh - 650px) * 1.5))); justify-self: center; }
    body:not([data-ready="locked"]) .touch-controls { position: static; }
    .track-select { order: 0; width: auto; margin-left: auto; }
    .track-select label { display: none; }
    .track-select select { width: 112px; min-width: 0; flex: initial; }
    nav { width: 100%; justify-content: flex-end; }
    .telemetry { padding-top: 6px; }
    .telemetry-heading { height: 30px; }
    .engine-instrument { height: 80px; }
    .engine-instrument svg { height: 82px; }
    .rpm-ticks text { font-size: 16px; }
    .rpm-unit { font-size: 13px; }
    .rpm-value { bottom: 0; font-size: 16px; }
    .gear-label { font-size: 9px; right: 0; }
    .gear-value { font-size: 12px; }
    .chassis-diagram { height: 154px; }
    .wheel-reading { font-size: 11px; line-height: 12px; gap: 0; }
    .wheel-load, .wheel-friction { font-size: 9px; }
    .wheel-fl, .wheel-fr { top: 8px; }
    .wheel-rl, .wheel-rr { top: 82px; }
    .telemetry-key { gap: 2px 5px; font-size: 8px; }
    .gforce-readings { gap: 8px; padding: 0 0 4px; font-size: 10px; }
    .balance-readings { gap: 8px; padding-bottom: 4px; font-size: 9px; }
}
@media (max-height: 500px) and (min-width: 601px) {
    header { padding: 6px 16px; }
    .stage, .scoreboard, .pads, .session-controls { width: min(100%, calc((100svh - 170px) * 1.5)); }
    .pads { width: min(100%, 900px); }
    main { padding: 6px; gap: 6px; }
}
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (pointer: coarse) {
    body:not([data-ready="locked"]) { height: 100svh; display: flex; flex-direction: column; }
    header { padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); gap: 12px; flex-wrap: wrap; }
    body:not([data-ready="locked"]) header { position: fixed; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); z-index: 5; width: 40px; padding: 0; border: 0; display: block; }
    body:not([data-ready="locked"]) header:not(.menu-open) > :not(#landscape-menu) { display: none; }
    body:not([data-ready="locked"]) #landscape-menu { display: grid; width: 40px; height: 40px; }
    body:not([data-ready="locked"]) header.menu-open { width: min(260px, calc(100vw - 16px)); max-height: calc(100svh - 180px); overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px; padding: 8px; background: #e8ebe5f2; border: 1px solid var(--line); }
    body:not([data-ready="locked"]) header.menu-open h1 { display: block; grid-column: 1; grid-row: 1; min-width: 0; align-self: center; }
    body:not([data-ready="locked"]) header.menu-open #landscape-menu { grid-column: 2; grid-row: 1; }
    body:not([data-ready="locked"]) header.menu-open .track-select { display: flex; grid-column: 1 / -1; }
    body:not([data-ready="locked"]) header.menu-open nav { display: flex; flex-wrap: wrap; grid-column: 1 / -1; }
    body:not([data-ready="locked"]) header.menu-open :is(button, a, select) { touch-action: pan-y; }
    h1 { font-size: 16px; min-width: 128px; }
    .track-select { order: 0; width: auto; }
    .track-select label { display: none; }
    .track-select select { width: 112px; font-size: 11px; }
    nav { gap: 4px; }
    nav button, nav a { width: 34px; height: 36px; }
    main { padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 4px; }
    body:not([data-ready="locked"]) main { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
    body:not([data-ready="locked"]) .scoreboard { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); z-index: 2; width: 112px; max-height: calc(100svh - 180px); overflow-y: auto; padding: 6px; flex-direction: column; align-items: stretch; gap: 6px; font-size: 10px; background: #e8ebe5b3; }
    .scoreboard > div { gap: 6px; }
    .scoreboard img { width: 12px; height: 24px; }
    body:not([data-ready="locked"]) .scoreboard > div { flex: 0 0 auto; }
    body:not([data-ready="locked"]) .scoreboard > :is(.race-time, .best) { flex-direction: column; align-items: flex-start; gap: 2px; }
    body:not([data-ready="locked"]) .race-layout { flex: 1; min-height: 0; width: 100%; container-type: size; grid-template-columns: minmax(0, 1fr); grid-template-rows: 100% auto; gap: 8px; justify-items: center; }
    body:not([data-ready="locked"]) .race-layout .stage { width: min(100cqw, 150cqh, 1350px); align-self: center; }
    body:not([data-ready="locked"]) .race-layout[data-telemetry="false"] { grid-template-rows: 100%; gap: 0; }
    body:not([data-ready="locked"]) .telemetry { position: fixed; top: max(56px, calc(env(safe-area-inset-top) + 56px)); left: max(8px, env(safe-area-inset-left)); z-index: 2; width: 156px; max-height: calc(100svh - 216px); overflow-y: auto; padding: 3px; border: 0; background: #e8ebe5bf; }
    .telemetry-heading { height: 18px; gap: 4px; }
    .telemetry-heading label, .telemetry-state { font-size: 8px; }
    .telemetry-heading select { width: 54px; max-width: 54px; height: 16px; padding: 0 1px; font-size: 9px; }
    .telemetry-instruments { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .engine-instrument, .chassis-instrument { grid-column: 1; }
    .engine-instrument { display: flex; align-items: center; justify-content: space-between; height: 16px; }
    .engine-instrument svg, .chassis-diagram > svg, .telemetry-key { display: none; }
    .rpm-value { position: static; transform: none; font-size: 12px; }
    .rpm-value::after { content: " RPM"; font-size: 8px; }
    .gear-label { position: static; font-size: 9px; }
    .gear-value { font-size: 12px; }
    .tire-units { font-size: 8px; line-height: 9px; }
    .chassis-diagram { height: auto; }
    .wheel-readings { display: grid; }
    .wheel-reading { position: static; width: auto; display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 2px; font-size: 8px; line-height: 10px; text-align: right; }
    .wheel-name { font-size: 8px; text-align: left; }
    .wheel-load { grid-column: 2 / 4; text-align: left; }
    .wheel-friction { grid-column: 4; text-align: right; }
    .wheel-load, .wheel-friction { font-size: 8px; }
    .gforce-readings { gap: 6px; padding: 2px 0 0; font-size: 8px; line-height: 10px; }
    .balance-readings { gap: 6px; padding: 2px 0 0; font-size: 8px; line-height: 10px; }
    body:not([data-ready="locked"]) .session-controls { position: fixed; top: max(8px, env(safe-area-inset-top)); left: max(56px, calc(env(safe-area-inset-left) + 56px)); z-index: 2; width: 220px; height: 40px; flex-direction: row; align-items: center; gap: 4px; padding: 4px; border: 0; background: #e8ebe5b3; }
    .session-controls #race-phase { font-size: 10px; }
    .session-controls #start-race { width: auto; flex: 0 0 auto; min-height: 32px; height: auto; padding: 4px 6px; gap: 4px; font-size: 10px; }
    .touch-controls { position: fixed; bottom: 0; left: 0; max-width: none; grid-template-columns: 160px minmax(0, 1fr) 160px; align-items: end; gap: 12px; padding: 8px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 0; background: transparent; pointer-events: none; }
    .touch-zone { background: #f8faf64d; }
    .touch-zone [data-active="true"] { background: #8eae8070; }
    .pedals [data-touch-bit="4"] { background: #28543c26; }
    .pedals [data-touch-bit="4"][data-active="true"] { background: #28543c80; }
    .touch-controls > * { pointer-events: auto; }
    .steering { grid-column: 1; grid-row: 1; }
    .pedals { grid-column: 3; grid-row: 1; }
}
@media (orientation: portrait) and (max-height: 600px) {
    .track-select { order: 0; width: auto; margin-left: auto; }
    .track-select label { display: none; }
    .track-select select { width: 112px; min-width: 0; flex: initial; }
    nav { width: 100%; justify-content: flex-end; }
    .scoreboard { font-size: 10px; gap: 4px 8px; }
    .scoreboard > div { gap: 4px; }
    .scoreboard img { width: 12px; height: 20px; }
    .stage { width: min(100%, calc((100svh - 344px) * 1.5)); }
    body[data-network] { height: 100svh; display: flex; flex-direction: column; }
    body[data-network] header { width: 100%; }
    body[data-network] main { flex: 1; min-height: 0; width: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 6px; padding-bottom: 0; }
    body[data-network] :is(.race-time, .best) { flex: 1 0 calc(50% - 4px); }
    body[data-network] .session-controls { height: 34px; padding-bottom: 0; border-bottom: 0; }
    body[data-network] .stage { width: auto; height: 100%; max-width: 100%; }
    body[data-network] .touch-controls { position: static; }
    .start-lights { gap: 8px; padding: 8px; }
    .start-lights span { width: 24px; }
    .start-go { font-size: 32px; }
}
.lap-submit { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); padding: 12px 14px; display: grid; gap: 8px; justify-items: center; text-align: center; font-size: 13px; background: #f8faf6f2; border: 1px solid #829581; border-radius: 6px; box-shadow: 0 4px 12px #18241e26; }
.lap-submit p { margin: 0; overflow-wrap: anywhere; }
.lap-submit label { display: flex; gap: 8px; align-items: center; }
.lap-submit input, #leaderboard-name { min-width: 0; padding: 6px 8px; font: inherit; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); }
#lap-submit-button { width: auto; min-height: 40px; padding: 8px 14px; font: inherit; font-size: 13px; }
#lap-submit-status:empty { display: none; }
#leaderboard { width: min(420px, calc(100% - 24px)); max-height: calc(100svh - 24px); padding: 18px; border: 1px solid #829581; border-radius: 6px; background: #f3f6ef; color: var(--ink); overflow-y: auto; }
#leaderboard::backdrop { background: #101c16a6; }
.board-tabs { display: flex; gap: 6px; margin: 12px 0; }
.board-tabs button { width: auto; flex: 1; min-height: 36px; font: inherit; font-size: 12px; }
.board-tabs button[aria-selected="true"] { background: #d8ef68; }
#leaderboard-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
#leaderboard-list li { display: grid; grid-template-columns: 2.5ch minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 30px; border-bottom: 1px solid var(--line); }
#leaderboard-list li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#leaderboard-list li.own { font-weight: bold; }
#leaderboard-status { min-height: 18px; margin: 10px 0; font-size: 12px; }
#leaderboard-rename label { display: block; font-size: 12px; margin-bottom: 6px; }
.rename-row { display: flex; gap: 8px; }
.rename-row input { flex: 1; }
.rename-row button { width: auto; padding: 0 12px; font: inherit; font-size: 12px; }