/* Driving HUD. Loaded last so desktop, touch and landscape share one layout. */
#game-ui{--hud-edge:max(14px,env(safe-area-inset-left));--hud-top:max(12px,env(safe-area-inset-top));--hud-ink:#f6ebd4;--hud-gold:#f2bf70;--hud-glass:transparent}
#game-ui .drive-topbar{top:var(--hud-top);left:var(--hud-edge);right:max(14px,env(safe-area-inset-right));height:44px;display:flex;justify-content:flex-end;gap:10px;align-items:center;text-shadow:none}
#game-ui .drive-topbar .run-progress{position:static;inset:auto;transform:none;display:flex;align-items:center;gap:10px;width:190px;max-width:calc(100vw - 86px);height:28px;margin:0;padding:0;background:var(--hud-glass);border:0;border-radius:0;box-shadow:none;color:var(--hud-ink);font-size:10px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.04em}
#game-ui .run-progress>span{white-space:nowrap;flex-shrink:0}
#game-ui .progress-track{height:2px;flex:1;min-width:20px;background:#ffffff24;border-radius:0;overflow:hidden;transform:none}
#game-ui #progress{height:100%;background:var(--hud-gold);box-shadow:none}
#game-ui .drive-topbar #pause,#game-ui .look-tools>button:not(#mission-action){width:44px;height:44px;min-height:44px;min-width:44px;display:grid;place-items:center;padding:12px;border:0;border-radius:0;background:var(--hud-glass);color:var(--hud-ink);box-shadow:none;touch-action:manipulation}
#game-ui .drive-topbar #pause{border:0}
#game-ui .hud-icon img,#game-ui .look-tools>button img{width:20px;height:20px;display:block;pointer-events:none}
#game-ui .drive-topbar #pause:hover,#game-ui .look-tools>button:not(#mission-action):hover{background:#10202b55}
#game-ui .look-tools #mirror-toggle[aria-pressed=false]{opacity:.45}
#game-ui .look-tools #mirror-toggle[aria-pressed=true]{border:0}
#game-ui .road-notice{position:absolute;top:var(--hud-top);bottom:auto;left:var(--hud-edge);right:auto;transform:none;display:block;width:max-content;max-width:min(340px,calc(100vw - 90px));margin:0;padding:0;background:var(--hud-glass);border:0;border-radius:0;text-align:left;text-shadow:none;pointer-events:auto}
#game-ui .road-notice summary{display:flex;align-items:center;gap:7px;min-height:28px;padding:4px 0;cursor:pointer;list-style:none}
#game-ui .road-notice summary::-webkit-details-marker{display:none}
#game-ui .road-notice strong{font-size:10px;line-height:1.3;letter-spacing:.055em;color:#e3e9e5;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#game-ui .notice-mark{display:grid;place-items:center;flex:0 0 15px;width:15px;height:15px;border:1px solid #9fb5bd;color:#c4d1d4;font-size:10px;font-weight:800;border-radius:50%;line-height:1}
#game-ui .notice-expand{font-size:13px;line-height:1;color:#c2cfce;margin-left:auto}
#game-ui .road-notice[open] .notice-expand{transform:rotate(180deg)}
#game-ui .road-notice p{margin:0;padding:0 10px 9px 31px;white-space:normal;max-width:100%;font-size:11px;line-height:1.4;color:#d3dedc}
#game-ui .road-notice[data-warning=yes]{border:0}
#game-ui .road-notice[data-warning=yes] strong,#game-ui .road-notice[data-warning=yes] .notice-mark{color:var(--hud-gold);border-color:var(--hud-gold)}
#game-ui .speed-panel{left:var(--hud-edge);right:auto;top:auto;bottom:calc(44px + env(safe-area-inset-bottom));min-width:0;width:max-content;max-width:125px;display:grid;grid-template-columns:14px auto;align-items:center;column-gap:6px;row-gap:2px;padding:0;background:var(--hud-glass);border:0;border-radius:0;box-shadow:none;text-shadow:none}
#game-ui #gear{grid-column:1;grid-row:1;display:grid;place-items:center;width:14px;height:22px;border:0;border-radius:0;color:var(--hud-gold);font-size:11px;font-weight:700;line-height:1}
#game-ui .speed-row{display:flex;align-items:baseline;gap:6px;margin:0;padding:0;line-height:1}
#game-ui .speed-row strong{font-size:28px;line-height:1;font-weight:750;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--hud-ink)}
#game-ui .speed-row>span{font-size:10px;line-height:1;color:#b8c9cb}
#game-ui .speed-caption{display:block;grid-column:2;font-size:8px;line-height:1.4;letter-spacing:.08em;margin:0;padding:0;color:#afc4c5;max-width:105px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#game-ui .look-tools,#game-ui .look-tools:has(#mission-action:not([hidden])){position:absolute;top:50%;bottom:auto;left:auto;right:max(14px,env(safe-area-inset-right));transform:translateY(-50%);display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-end;gap:0;width:44px;max-width:44px;margin:0;padding:0;z-index:8}
#game-ui #look-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:-1px}
#game-ui .look-tools #mission-action{position:absolute;right:54px;left:auto;top:0;bottom:auto;transform:none;flex:none;width:max-content;max-width:160px;min-width:0;min-height:44px;padding:9px 12px;font-size:11px;line-height:1.3}
#game-ui #test-editor-return{position:absolute;top:calc(var(--hud-top) + 100px);left:var(--hud-edge);padding:6px 9px;background:var(--hud-glass);font-size:10px;border-radius:4px;color:var(--hud-ink);text-decoration:none}
/* Preserve the existing HUD visibility preferences. */
body[data-show-progress=no] #game-ui .run-progress,body[data-show-hazards=no] #game-ui .road-notice,body[data-show-look-tools=no] #game-ui .look-tools{display:none}
body[data-show-look-tools=no] #game-ui .look-tools:has(#mission-action:not([hidden])){display:flex}
body[data-touch=yes] #game-ui .speed-panel{left:50%;transform:translateX(-50%);bottom:calc(145px + env(safe-area-inset-bottom));padding:0;column-gap:5px}
body[data-touch=yes] #game-ui .speed-row strong{font-size:26px}
@media(max-width:700px){
 #game-ui .drive-topbar{justify-content:flex-end;gap:4px}
 #game-ui .drive-topbar .run-progress{width:180px;max-width:calc(100vw - 86px);font-size:10px;gap:7px;padding:0}
 #game-ui .road-notice{max-width:calc(100vw - 90px)}
 #game-ui .road-notice strong{font-size:9px}
 #game-ui .road-notice summary{min-height:28px}
}
@media(max-height:550px){
 body[data-touch=yes] #game-ui .speed-panel{left:50%;bottom:calc(14px + env(safe-area-inset-bottom))}
 #game-ui .road-notice{max-width:min(300px,40vw)}
 #game-ui .look-tools,#game-ui .look-tools:has(#mission-action:not([hidden])){top:43%}
}
@media(max-width:700px) and (min-height:551px){
 #game-ui .side-mirror{top:calc(var(--hud-top) + 78px)}
}
@media(max-height:550px) and (min-width:600px){
 #game-ui .road-notice{left:var(--hud-edge);transform:none;max-width:min(300px,40vw)}
}

/* Bare instruments: readable against scenery without covering it with cards. */
#game-ui .run-progress,#game-ui .speed-panel,#game-ui .road-notice{filter:drop-shadow(0 1px 2px #000);text-shadow:0 1px 3px #000}
#game-ui .hud-icon img,#game-ui .look-tools>button img{filter:drop-shadow(0 1px 2px #000)}
#game-ui .speed-caption,#game-ui .controls{display:none}
#game-ui .road-notice:not([data-warning=yes]):not([open]) strong,#game-ui .road-notice:not([data-warning=yes]):not([open]) .notice-expand{display:none}
#game-ui .road-notice:not([data-warning=yes]) .notice-mark{font-size:0}
#game-ui .road-notice:not([data-warning=yes]) .notice-mark:after{content:'i';font-size:10px}
#game-ui .road-notice summary{box-sizing:border-box;min-width:44px;min-height:44px}
#game-ui .road-notice[open]{background:#10202bbd;padding:0 8px;border-radius:3px}
#game-ui .road-notice p{padding:0 0 7px;max-width:240px}
#game-ui .contact-panel{background:none;border:0;box-shadow:none;padding:0;right:max(14px,env(safe-area-inset-right));bottom:calc(40px + env(safe-area-inset-bottom))}
#game-ui .contact-panel .wheel-diagram,#game-ui .contact-panel strong{display:none}
#game-ui .contact-panel:not(:has(#stability[data-warning=yes])){display:none}
#game-ui .contact-panel #stability{font-size:9px;text-shadow:0 1px 3px #000}
body[data-touch=yes] #game-ui .contact-panel{bottom:calc(145px + env(safe-area-inset-bottom))}
#game-ui .side-mirror{border-width:1px;border-radius:5px;box-shadow:none}
#game-ui .mirror-label{background:#10202b80}
#game-ui .driving-radar{width:100px;border:0;border-radius:4px;box-shadow:none;background:#10202b80}
#game-ui .driving-radar .radar-caption{display:none}
#game-ui .driving-radar button{font-size:9px;min-height:28px}
#game-ui .driving-radar[data-collapsed=true]{width:70px}
@media(max-height:550px){body[data-touch=yes] #game-ui .contact-panel{bottom:calc(145px + env(safe-area-inset-bottom))}}
/* Light navigation layout: no map card, tilt, blur or moving elevation projection. */
#game-ui{--rail-top:max(240px,calc(50% - 115px));--map-bottom:70px}
#game-ui .road-notice,#game-ui .road-notice[open]{top:var(--hud-top);left:var(--hud-edge);transform:none;background:transparent;padding:0;max-width:min(280px,calc(100vw - 84px));text-shadow:0 1px 3px #000}
#game-ui .road-notice summary{justify-content:flex-start;gap:6px}
#game-ui .road-notice strong,#game-ui .road-notice:not([data-warning=yes]):not([open]) strong{display:block;flex:0 1 auto;line-height:1.4}
#game-ui .road-notice .notice-expand,#game-ui .road-notice:not([data-warning=yes]):not([open]) .notice-expand{position:relative;display:block;flex:0 0 12px;width:12px;height:12px;margin:0;font-size:0;transform:rotate(0);transition:transform .2s ease}
#game-ui .notice-expand:before{content:'';position:absolute;left:3px;top:4px;width:6px;height:6px;border-top:1.5px solid currentColor;border-left:1.5px solid currentColor;transform:rotate(45deg)}
#game-ui .road-notice[open] .notice-expand{transform:rotate(180deg)}
#game-ui .run-progress,body[data-mode=infinity] #game-ui .run-progress{position:absolute;top:var(--rail-top);right:max(14px,env(safe-area-inset-right));left:auto;bottom:auto;transform:none;display:flex;flex-direction:column;align-items:center;gap:5px;width:44px;max-width:70px;height:126px;margin:0;padding:0;background:none;border:0;font-size:9px;line-height:1.2}
#game-ui .progress-track{position:relative;order:1;flex:1;width:2px;min-width:2px;min-height:24px;overflow:visible;background:#ffffff35}
#game-ui .progress-track:before{content:'';position:absolute;left:-3px;top:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid var(--hud-gold)}
#game-ui #progress{position:absolute;bottom:0;left:0;width:100%;height:0}
#game-ui #distance{order:0;font-size:9px}
#game-ui #timer{order:2;font-size:8px}
body[data-mode=infinity] #game-ui #timer{white-space:normal;text-align:center;font-size:7px;max-width:60px}
#game-ui .look-tools,#game-ui .look-tools:has(#mission-action:not([hidden])){top:calc(var(--rail-top) + 132px);left:auto;right:max(14px,env(safe-area-inset-right));bottom:auto;transform:none;align-items:flex-end}
#game-ui .look-tools #mission-action{left:auto;right:50px}
body[data-show-progress=no] #game-ui .look-tools{top:var(--rail-top)}
#game-ui .driving-radar,body[data-touch=yes] #game-ui .driving-radar{top:auto;bottom:calc(var(--map-bottom) + env(safe-area-inset-bottom));left:var(--hud-edge);right:auto;width:78px;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:.65}
#game-ui .driving-radar:hover,#game-ui .driving-radar:focus-within{opacity:.9}
#game-ui .driving-radar button{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;min-height:44px;width:100%;padding:0;background:none;border:0;touch-action:manipulation}
#game-ui .driving-radar button img{width:14px;height:14px}
#game-ui .driving-radar[data-collapsed=true],body[data-touch=yes] #game-ui .driving-radar[data-collapsed=true]{width:44px;height:44px}
#game-ui .driving-radar .radar-caption{display:none}
#game-ui .speed-panel,body[data-touch=yes] #game-ui .speed-panel{left:var(--hud-edge);right:auto;top:auto;bottom:calc(var(--map-bottom) - 32px + env(safe-area-inset-bottom));transform:none}
body[data-touch=yes] #game-ui{--map-bottom:195px}
/* A small trace stays above either steering buttons or the optional steering wheel. */
@media(max-height:550px){
 #game-ui{--rail-top:186px}
 #game-ui .run-progress{height:66px}
 #game-ui .look-tools,#game-ui .look-tools:has(#mission-action:not([hidden])){top:calc(var(--rail-top) + 70px);flex-direction:row;width:88px;max-width:88px}
 #game-ui .look-tools #mission-action{right:94px}
}
@media(max-height:480px){
 #game-ui{--rail-top:54px}
 #game-ui .run-progress{height:58px}
 #game-ui .look-tools,#game-ui .look-tools:has(#mission-action:not([hidden])){top:116px}
 #game-ui .side-mirror{top:58px;width:min(120px,calc(35vw - 40px))}
 #game-ui .mirror-left{left:100px}#game-ui .mirror-right{right:100px}
 #game-ui .mirror-glass{height:60px;aspect-ratio:auto}
 #game-ui .driving-radar,body[data-touch=yes] #game-ui .driving-radar{width:64px}
}
@media(prefers-reduced-motion:reduce){#game-ui .road-notice .notice-expand{transition:none}}
/* Touch controls: compact glass surfaces without blur or continuous animation. */
#game-ui #touch-controls{gap:12px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
#game-ui #touch-controls .touch-steer-buttons{display:flex;gap:8px;align-items:flex-end}
#game-ui #touch-controls button{color:#e9eee8;background:linear-gradient(155deg,#273943b3,#101e28d9);border:1px solid #d5e3df45;border-radius:16px;box-shadow:inset 0 1px 0 #ffffff12,0 3px 10px #06101826;padding:10px;touch-action:none;transition:background-color .1s,border-color .1s,transform .08s;user-select:none;-webkit-user-select:none}
#game-ui #touch-controls .touch-steer-buttons button{display:grid;place-items:center;width:62px;height:66px;min-width:54px;min-height:60px;border-radius:18px}
#game-ui .drive-control-icon{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;flex-shrink:0}
#game-ui #touch-controls .touch-steer-buttons .drive-control-icon{width:28px;height:28px}
#game-ui #touch-controls .touch-pedals{display:grid;grid-template-columns:68px 68px;gap:7px}
#game-ui #touch-controls .touch-pedals button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:78px;min-width:0;min-height:0;padding:9px;border-width:1px!important;border-radius:16px}
#game-ui #touch-controls .touch-pedals strong{padding:0;border:0;font-size:9px;line-height:1;letter-spacing:.1em;font-weight:700;pointer-events:none}
#game-ui #touch-controls .touch-pedals .reverse-pedal{grid-column:1/-1;flex-direction:row;gap:8px;height:38px;min-height:38px;border-radius:12px;background:#142630b0;color:#bdcdce;border-color:#c9dad42e}
#game-ui #touch-controls .reverse-pedal .drive-control-icon{width:17px;height:17px}
#game-ui #touch-controls .touch-pedals .brake-pedal{background:linear-gradient(155deg,#463534b8,#221e27d4)!important;border-color:#d3a69a66!important;color:#edc5b8}
#game-ui #touch-controls .touch-pedals .gas-pedal{background:linear-gradient(155deg,#4b4534b8,#252c2bd4)!important;border-color:#eac68688!important;color:#f2d498}
#game-ui #touch-controls button[data-pressed=yes]{background:#e8bd76!important;border-color:#ffe5b6!important;color:#17242b!important;transform:translateY(2px);box-shadow:inset 0 2px 6px #0002}
#game-ui #touch-controls .touch-pedals .brake-pedal[data-pressed=yes]{background:#dfaa99!important;border-color:#f5d2c6!important;color:#291d1d!important}
#game-ui #touch-controls .touch-pedals .reverse-pedal[data-pressed=yes]{background:#c3d3ce!important;color:#18282e!important}
#game-ui #touch-controls button:focus-visible{outline:2px solid #f2cd8f;outline-offset:3px}
@media(max-width:380px){#game-ui #touch-controls .touch-pedals{grid-template-columns:60px 60px}#game-ui #touch-controls .touch-steer-buttons button{width:54px;height:62px}#game-ui #touch-controls .touch-steer-buttons{gap:6px}}
@media(max-height:480px){#game-ui #touch-controls .touch-pedals button{height:66px}#game-ui #touch-controls .touch-pedals .reverse-pedal{height:36px;min-height:36px}#game-ui #touch-controls .touch-steer-buttons button{height:60px}}
@media(prefers-reduced-motion:reduce){#game-ui #touch-controls button{transition:none}}
#game-ui #touch-controls[data-steering=wheel] .touch-steer-buttons{display:none}
#game-ui #touch-controls .touch-pedals .gas-pedal[data-pressed=yes]{background:#e8bd76!important;border-color:#ffe5b6!important;color:#17242b!important}

/* Clearer thin route; keep the map's footprint unchanged. */
#game-ui .driving-radar,body[data-touch=yes] #game-ui .driving-radar{opacity:.78}
#game-ui .driving-radar:hover,#game-ui .driving-radar:focus-within{opacity:.95}
/* Speed is a single quiet line beneath the map. */
#game-ui .speed-panel,body[data-touch=yes] #game-ui .speed-panel{display:block;width:max-content;min-width:0;max-width:110px;padding:0;margin:0;background:none;border:0;box-shadow:none;filter:none;text-shadow:0 1px 3px #0009}
#game-ui .speed-panel #gear,#game-ui .speed-panel .speed-caption{display:none}
#game-ui .speed-panel .speed-row{display:flex;align-items:baseline;gap:4px;line-height:1;padding:0;margin:0}
#game-ui .speed-panel .speed-row strong,body[data-touch=yes] #game-ui .speed-panel .speed-row strong{font-size:21px;font-weight:600;line-height:1;letter-spacing:-.025em;color:#edf0e7}
#game-ui .speed-panel .speed-row>span{font-size:8px;font-weight:400;line-height:1;color:#c3ceca;letter-spacing:0}

/* Softer route text and compact, unboxed weather warnings. */
#game-ui .road-notice,#game-ui .road-notice[open]{text-shadow:0 1px 2.5px #000c;filter:drop-shadow(0 1px 1.5px #0008)}
#game-ui .wind-hud,body:not([data-show-mirrors=no]) #game-ui .wind-hud,body[data-show-mirrors=no] #game-ui .wind-hud{top:calc(var(--hud-top) + 48px);right:max(14px,env(safe-area-inset-right));left:auto;bottom:auto;transform:none;display:block;width:max-content;max-width:min(170px,45vw);padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:0 1px 2px #000b;line-height:1.3}
#game-ui .wind-hud strong{font-size:10px;font-weight:600;letter-spacing:.015em;color:#f1ce91}
#game-ui .wind-hud>span{display:none}

/* One left edge and an explicit steering clearance for the map/speed stack. */
#game-ui{--driving-left:max(16px,env(safe-area-inset-left));--map-size:92px;--map-base:max(28px,env(safe-area-inset-bottom))}
#game-ui #touch-controls{padding-left:var(--driving-left)}
body[data-touch=yes] #game-ui{--map-base:calc(66px + max(18px,env(safe-area-inset-bottom)) + 14px)}
body[data-touch=yes] #game-ui:has(#touch-controls[data-steering=wheel]){--map-base:calc(140px + max(18px,env(safe-area-inset-bottom)) + 14px)}
#game-ui .driving-radar,body[data-touch=yes] #game-ui .driving-radar{left:var(--driving-left);right:auto;top:auto;bottom:var(--map-base);width:var(--map-size);height:var(--map-size)}
#game-ui .driving-radar[data-collapsed=true],body[data-touch=yes] #game-ui .driving-radar[data-collapsed=true]{width:44px;height:44px}
#game-ui .speed-panel,body[data-touch=yes] #game-ui .speed-panel{left:var(--driving-left);right:auto;top:auto;bottom:calc(var(--map-base) + var(--map-size) + 7px);transform:none}
#game-ui:has(.driving-radar[data-collapsed=true]) .speed-panel{bottom:calc(var(--map-base) + 51px)}
#game-ui:not(:has(.driving-radar)) .speed-panel{bottom:var(--map-base)}
@media(max-width:700px){body[data-touch=yes] #game-ui:has(#touch-controls[data-steering=wheel]){--map-base:calc(130px + max(18px,env(safe-area-inset-bottom)) + 14px)}}
@media(max-width:380px){body[data-touch=yes] #game-ui{--map-base:calc(62px + max(18px,env(safe-area-inset-bottom)) + 14px)}}
@media(max-height:520px) and (min-width:600px){body[data-touch=yes] #game-ui:has(#touch-controls[data-steering=wheel]){--map-base:calc(118px + max(18px,env(safe-area-inset-bottom)) + 12px)}}
@media(max-height:480px){#game-ui{--map-size:78px}body[data-touch=yes] #game-ui{--map-base:calc(60px + max(18px,env(safe-area-inset-bottom)) + 12px)}}