/* Viewport-first layout for the existing vehicle playground. */
body.vehicle-track{height:100dvh;overflow:hidden;background:#111a16}
.vehicle-track>.play-header,.vehicle-track .play-title{display:none}
.vehicle-track .play-main{padding:0;margin:0;max-width:none;height:100dvh}
.vehicle-track .studio{display:block;min-height:0;height:100%;border:0;background:transparent}
.vehicle-track .viewport,.vehicle-track .viewport.track-expanded{position:relative;inset:auto;width:100%;height:100dvh;min-height:0;padding:0;border:0;border-radius:0;overflow:hidden}
.vehicle-track #gpu,.vehicle-track .viewport:fullscreen #gpu,.vehicle-track .viewport.track-expanded #gpu{display:block;width:100%;height:100dvh;min-height:0;aspect-ratio:auto;outline:none}
.vehicle-track .track-screen-hint,.vehicle-track .viewport:fullscreen .track-screen-hint,.vehicle-track .viewport.track-expanded .track-screen-hint{display:none}
.vehicle-track .track-topbar{position:absolute;z-index:5;top:max(16px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;pointer-events:none}
.track-topbar>a,.track-topbar>button{pointer-events:auto;display:flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border:1px solid #d1e6bb2b;border-radius:7px;background:#14221dd1;backdrop-filter:blur(12px);color:#dfe8d4;font:11px/1.2 system-ui,sans-serif;text-decoration:none;cursor:pointer}
.track-topbar>button:hover,.track-topbar>a:hover{border-color:#c6dfa275;background:#24392be6}.track-topbar>button[aria-expanded=true]{border-color:#c6dfa2;color:#d8edba}
.track-name{margin-right:auto;padding-left:8px;font:9px/1.2 ui-monospace,monospace;letter-spacing:2px;color:#e0e7d2;text-shadow:0 1px 6px #0009}
.vehicle-track .track-settings{position:absolute;z-index:10;top:62px;right:20px;width:320px;max-width:calc(100% - 40px);max-height:calc(100dvh - 84px);padding:20px;overflow:auto;background:#15231ff5;backdrop-filter:blur(20px);border:1px solid #cadbb53d;border-radius:12px;box-shadow:0 12px 45px #0005;scrollbar-width:thin}
.track-settings[hidden],.track-help[hidden]{display:none!important}
.track-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px}.track-drawer-head h2{font-size:19px;font-weight:500;margin:0;letter-spacing:-.4px}.track-drawer-head button{padding:0;width:30px;min-height:30px;border:1px solid #b8cca82e;border-radius:6px;background:transparent;font:22px/1 system-ui;color:#c3d1b4}
.vehicle-track .track-settings .toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}.track-settings .toolbar button,.track-settings .toolbar summary{min-height:32px;padding:7px 9px;font-size:10px;border-radius:5px;border-color:#a2ba8d36;background:#22362b}.track-settings .toolbar .more{position:relative}.track-settings .more-menu{right:auto;left:0;max-width:235px;z-index:12}
.vehicle-track .track-settings .controls{position:static;display:block;max-height:none;padding:0;border:0;background:transparent;overflow:visible}.track-settings .controls>h2{display:none}.track-settings .control{padding:13px 0;border-bottom:1px solid #afc49617}.track-settings .control label{color:#d0ddbf;font-size:11px}.track-settings .control small{font-size:10px;color:#90a186;line-height:1.5}.track-settings input,.track-settings select{accent-color:#c5dfa2}.track-settings .control input[type=number],.track-settings .control select{border-color:#9cb58b35;background:#0f1c17;color:#d6e5c7;border-radius:4px}.track-settings .about{margin:15px 0 0;max-width:none;font-size:11px}.track-settings .about p{font-size:11px;color:#a8b69d}.track-settings .data{display:block!important;margin:15px 0 0;padding:0;border:0;font-size:11px}.track-settings .data pre{max-height:260px;font-size:10px}.track-debug-toggle{display:flex;gap:8px;align-items:center;padding-top:18px;font-size:11px;color:#c4d2b8}
.vehicle-track .track-telemetry{display:none}.vehicle-track.track-debug .track-telemetry{display:block;top:70px;left:20px;max-width:min(360px,calc(100% - 40px));max-height:calc(100dvh - 150px);overflow:auto;padding:12px 15px;white-space:pre-line;background:#102019d9;border:1px solid #b4c79e35;border-radius:8px;color:#d8e7c9;font:10px/1.5 ui-monospace,monospace;scrollbar-width:thin;pointer-events:auto}
.vehicle-track .track-speedometer{position:absolute;z-index:2;bottom:max(24px,env(safe-area-inset-bottom));right:max(28px,env(safe-area-inset-right));display:flex;align-items:baseline;gap:8px;pointer-events:none;color:#f2f5e9;text-shadow:0 2px 10px #0009;font-variant-numeric:tabular-nums}.track-speedometer strong{font:300 48px/1 system-ui,sans-serif;letter-spacing:-2px}.track-speedometer span{font:11px ui-monospace,monospace;color:#dae4ca}
.track-help{position:absolute;z-index:8;top:70px;right:20px;max-width:calc(100% - 40px);width:310px;padding:20px;background:#15231ff2;backdrop-filter:blur(15px);border:1px solid #cadbb53d;border-radius:12px;max-height:calc(100dvh - 90px);overflow:auto}.track-help h2{margin:0 0 16px;font-size:18px;font-weight:500}.track-help dl{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:0 0 18px;font-size:11px}.track-help dt{color:#d4e7b9;font-family:ui-monospace,monospace}.track-help dd{margin:0;color:#a1b096}.track-help>button{width:100%;border-radius:6px;background:#c6dfa2;color:#152116;border:0;font-size:12px}
.vehicle-track .track-loading{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100% - 40px);margin:0;padding:10px 16px;background:#15231fe6;border:1px solid #cadbb52c;border-radius:8px;color:#dbe8c9;font-size:12px;text-align:center}.vehicle-track.track-ready:not(.track-failed) .track-loading{display:none}.vehicle-track.track-failed .track-loading{color:#ffd0bd;border-color:#dc8764}
.vehicle-track.track-hud-hidden .track-topbar,.vehicle-track.track-hud-hidden .track-speedometer,.vehicle-track.track-hud-hidden .track-telemetry,.vehicle-track.track-hud-hidden .suspension-overlay{display:none!important}
.vehicle-track.track-panel-open .track-speedometer{opacity:.3}
.track-settings :focus-visible,.track-topbar :focus-visible,.track-help :focus-visible{outline:2px solid #c6dfa2;outline-offset:3px}
@media(max-width:600px){.vehicle-track .track-topbar{top:12px;left:12px;right:12px;gap:6px}.track-topbar>a,.track-topbar>button{padding:8px 10px;min-height:36px;font-size:10px}.track-name{font-size:7px;letter-spacing:1px;padding-left:2px}.vehicle-track .track-settings,.vehicle-track .track-help{right:12px;top:60px;max-width:calc(100% - 24px);max-height:calc(100dvh - 76px);padding:18px}.vehicle-track.track-debug .track-telemetry{top:60px;left:12px;font-size:9px;max-width:calc(100% - 24px)}.track-speedometer strong{font-size:40px}.vehicle-track .track-speedometer{bottom:20px;right:20px}}
@media(max-width:360px){.track-name{display:none}.track-topbar>a{margin-right:auto}}