/* Driving HUD: clear road view, fixed live mirrors, and distinct thumb controls. */
.side-mirror{position:absolute;top:126px;width:200px;border:2px solid #789399;border-radius:16px;overflow:hidden;box-shadow:0 4px 18px #06192070;pointer-events:none}
.mirror-left{left:max(24px,env(safe-area-inset-left))}.mirror-right{right:max(24px,env(safe-area-inset-right))}
.mirror-glass{height:118px;background:transparent}.mirror-label{display:flex;justify-content:space-between;gap:8px;padding:4px 9px;color:#f0e9d9;background:#122832;font-size:9px;letter-spacing:.09em;line-height:1.5}
.mirror-label span:first-child{font-weight:800;color:#f2c983}
body[data-show-mirrors=no] .side-mirrors{display:none}
.look-tools{width:max-content;max-width:50%;gap:6px;bottom:54px}
.look-tools button{min-height:44px;border-radius:9px;padding:8px 13px;touch-action:manipulation}
#mirror-toggle[aria-pressed=true]{background:#334e50;border-color:#9ab7ac;color:#ecf4e9}
.touch-pedals{display:grid;grid-template-columns:76px 76px;gap:7px 8px}
#touch-controls .touch-pedals button{width:100%;min-width:0;height:88px;min-height:0;gap:3px;border-radius:14px}
#touch-controls .touch-pedals .reverse-pedal{grid-column:1/-1;display:flex;flex-direction:row;gap:10px;height:44px;border-radius:10px;background:#243f4bef;border:1px solid #9bb6bd;color:#f0f6f4}
.reverse-pedal strong{border:1px solid #abc5c9;border-radius:4px;font-size:14px;padding:0 5px}.reverse-pedal span{font-size:12px}
.touch-pedals .brake-pedal{background:#713d36ed!important;border:2px solid #edaaa0!important}
.touch-pedals .brake-pedal[data-pressed=yes]{background:#f5beb1!important;color:#301e1a!important}
.pedal-icon{width:28px;height:17px;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}
#touch-controls .touch-steer-buttons button{width:66px;min-width:0;min-height:78px;border-radius:16px}
body[data-touch=yes] .speed-panel,body[data-touch=yes] .contact-panel{bottom:184px}
@media(max-width:700px){
 .topbar{top:max(12px,env(safe-area-inset-top))}.brand span{font-size:8px;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .topbar #sound-toggle{padding:9px 8px;font-size:11px}.topbar #pause{padding:9px 12px}
 .run-progress{top:60px;width:190px;font-size:10px}
 .side-mirror{top:85px;width:calc(50% - 19px);max-width:200px;border-radius:12px;border-width:1px}
 .mirror-left{left:max(12px,env(safe-area-inset-left))}.mirror-right{right:max(12px,env(safe-area-inset-right))}
 .mirror-glass{height:89px}.mirror-label{font-size:8px;padding:3px 7px;letter-spacing:.04em}
 .road-notice{top:201px;left:16px;right:16px;gap:8px}.road-notice strong{font-size:10px;letter-spacing:.04em}.road-notice p{font-size:11px;margin:0;max-width:90vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body[data-show-mirrors=no] .road-notice{top:88px}
 .look-tools,body[data-touch=yes] .look-tools{top:auto;bottom:169px;width:132px;max-width:132px;gap:4px}
 .look-tools button,body[data-touch=yes] .look-tools button{min-height:44px;font-size:10px;padding:7px 8px;border-radius:8px}
 #look-status{display:none}
 body[data-touch=yes] .speed-panel{bottom:169px;left:14px;min-width:64px;padding:0;border:0;background:none}
 body[data-touch=yes] .speed-row strong{font-size:32px}.speed-row{gap:5px}.speed-row>span{font-size:9px}.drive-label{font-size:8px}
 body[data-touch=yes] .contact-panel{right:14px;bottom:171px;gap:0}.contact-panel .wheel-diagram{display:none}.contact-panel strong{font-size:23px}.contact-panel span{font-size:8px;max-width:65px;line-height:1.3}
 #touch-controls{gap:10px;padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
 .touch-pedals{grid-template-columns:72px 72px}#touch-controls .touch-steer-buttons button{width:61px}
}
@media(max-width:360px){
 .touch-pedals{grid-template-columns:65px 65px}.touch-steer-buttons{gap:6px}#touch-controls .touch-steer-buttons button{width:54px}
 .mirror-glass{height:76px}.road-notice{top:188px}.brand{font-size:14px}.brand span{max-width:125px}.topbar #sound-toggle{font-size:10px;padding-inline:6px}
 .look-tools,body[data-touch=yes] .look-tools{width:123px;max-width:123px}.look-tools button,body[data-touch=yes] .look-tools button{padding-inline:6px}
}
@media(max-height:550px) and (min-width:600px){
 .topbar #editor-link,.topbar #course-link,.topbar #restart{display:none}.topbar{top:max(8px,env(safe-area-inset-top));left:16px;right:16px}.topbar #pause{min-height:44px}
 .side-mirror{top:68px;width:155px}.mirror-glass{height:80px}.mirror-left{left:16px}.mirror-right{right:16px}
 .road-notice,body[data-touch=yes] .road-notice,body[data-show-mirrors=no] .road-notice{top:60px;left:50%;right:auto;transform:translateX(-50%);width:290px;text-align:center}.road-rule{display:none}.road-notice p{font-size:11px}
 .look-tools,body[data-touch=yes] .look-tools{top:auto;bottom:17px;width:max-content;max-width:45%}.look-tools button{min-height:44px}
 #look-status{display:none}.run-progress{top:24px;left:50%;width:170px}
 body[data-touch=yes] .speed-panel{bottom:137px}body[data-touch=yes] .contact-panel{bottom:157px}
 .touch-pedals{grid-template-columns:72px 72px}#touch-controls .touch-pedals button{height:78px}#touch-controls .touch-pedals .reverse-pedal{height:44px}
}
.mirror-label{align-items:center;padding:0 8px;min-height:32px}.mirror-label button{border:0;background:transparent;color:#ecd5ac;font-size:10px;padding:8px 3px;min-height:32px}
.side-mirror.adjusting{border-color:#ffd083;box-shadow:0 0 0 2px #f9c87380}.side-mirror.adjusting .mirror-glass{cursor:move}
body[data-mirror-adjust=yes] .mirror-glass{pointer-events:auto;touch-action:none}
body[data-mirror-adjust=yes] #touch-controls,body[data-mirror-adjust=yes] .look-tools,body[data-mirror-adjust=yes] .controls,body[data-mirror-adjust=yes] .speed-panel,body[data-mirror-adjust=yes] .contact-panel{visibility:hidden}
.mirror-adjuster{pointer-events:auto;position:absolute;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,calc(100% - 24px));padding:17px;background:#0f2734f5;border:1px solid #9eac9d;border-radius:12px;box-shadow:0 12px 50px #06141b90;color:#f1ecdc;z-index:7}
.mirror-adjuster header{display:flex;justify-content:space-between;align-items:center;gap:15px}.mirror-adjuster header span{display:block;font-size:11px;color:#b2cbd2;margin-top:3px}.mirror-adjuster button{min-height:44px;border:1px solid #799298;background:#253e47;color:#e7f0ee;border-radius:6px;padding:8px 12px;font-size:12px}.mirror-adjuster #mirror-done{color:#152d34;background:#efc27b;border-color:#efc27b;font-weight:700}.mirror-side-choice{display:flex;gap:8px;margin:14px 0 8px}.mirror-side-choice [aria-pressed=true]{border-color:#ecc278;color:#ecc278}.mirror-side-choice #mirror-reset{margin-left:auto;background:transparent;font-size:11px}.mirror-sliders{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.mirror-sliders label{font-size:12px;display:block}.mirror-sliders output{float:right;color:#efce94;font-size:11px}.mirror-sliders input{width:100%;min-height:40px;margin:3px 0;accent-color:#edbe76;touch-action:pan-x}
@media(max-width:700px){.mirror-label{min-height:44px}.mirror-label button{min-height:44px;padding:8px}.road-notice{top:225px}.mirror-adjuster{bottom:max(12px,env(safe-area-inset-bottom));padding:14px}.mirror-sliders{gap:12px}}
@media(max-height:550px) and (min-width:600px){.mirror-adjuster{padding:10px 16px;bottom:10px;width:450px}.mirror-adjuster header span{font-size:10px}.mirror-side-choice{margin:5px 0}.mirror-sliders input{min-height:28px}.mirror-label button{min-height:32px}.road-notice{top:60px}}

body[data-touch=yes] .speed-caption{display:block;font-size:8px;letter-spacing:.035em;max-width:112px;line-height:1.3;margin-top:3px}
body[data-mode=infinity] .run-progress{width:min(290px,calc(100vw - 48px));gap:8px;font-size:12px}body[data-mode=infinity] .run-progress>span{white-space:nowrap}body[data-mode=infinity] .progress-track{min-width:24px}#route-info{overflow-wrap:anywhere}
.mission-hud{position:absolute;left:22px;top:165px;width:min(280px,38vw);padding:13px 16px;background:#0b202be8;border:1px solid #f5bc6455;border-radius:12px;display:grid;gap:8px;font-size:12px;pointer-events:auto}.mission-hud strong{color:#ffcc7b}.mission-hud progress{width:100%;height:6px;accent-color:#edba6a}.mission-hud button{background:#efbb6e;color:#17232a;border:0;border-radius:8px;min-height:44px;font-weight:700}.wind-hud{position:absolute;right:22px;top:110px;display:grid;padding:10px 15px;background:#122c40df;border-left:3px solid #ffbb6c;border-radius:8px;font-size:12px}.wind-hud strong{font-size:17px;color:#ffcf88}.wind-hud span{font-size:10px}.mission-hud span{line-height:1.4}
@media(max-width:700px){.mission-hud{left:10px;top:110px;width:185px;max-width:46vw;padding:9px;font-size:10px;gap:5px}.wind-hud{right:10px;top:110px;padding:8px;font-size:10px}.wind-hud strong{font-size:13px}.wind-hud span{display:none}}
@media(max-height:500px){.mission-hud{top:78px;left:10px;width:185px;padding:7px;font-size:10px;gap:3px}.mission-hud button{min-height:36px}.wind-hud{top:65px;right:12px}}
/* Mission cards sit below mirrors rather than covering their camera windows. */
body:not([data-show-mirrors=no]) .mission-hud{top:292px}
body:not([data-show-mirrors=no]) .wind-hud{top:292px}
@media(max-width:700px) and (min-height:551px){
 body:not([data-show-mirrors=no]) .mission-hud,body:not([data-show-mirrors=no]) .wind-hud{top:270px}
 body[data-show-mirrors=no] .mission-hud,body[data-show-mirrors=no] .wind-hud{top:130px}
 .mission-hud{max-height:calc(100dvh - 455px);overflow:auto}
}
@media(max-height:550px){
 .mission-hud,body:not([data-show-mirrors=no]) .mission-hud{left:50%;top:96px;transform:translateX(-50%);width:250px;max-width:calc(100vw - 350px);max-height:calc(100dvh - 165px);overflow:auto}
 .wind-hud,body:not([data-show-mirrors=no]) .wind-hud{top:182px;right:16px;padding:5px 8px}
 .wind-hud span{display:none}
}
body[data-mirror-adjust=yes] .mission-hud,body[data-mirror-adjust=yes] .wind-hud{visibility:hidden}

/* Mission instructions stay collapsed; the action remains reachable separately. */
#game-ui .mission-hud{width:min(245px,35vw);padding:8px 10px;gap:5px;max-height:none;overflow:visible}#mission-details summary{display:flex;gap:12px;align-items:center;justify-content:space-between;min-height:32px;cursor:pointer;list-style:none}#mission-details summary::-webkit-details-marker{display:none}.mission-hint{font-size:9px;color:#a4bbc6;white-space:nowrap}#mission-message{display:block;padding:10px 0 3px;font-size:11px;line-height:1.5;max-height:140px;overflow:auto}#game-ui .mission-action{position:absolute;pointer-events:auto;bottom:80px;left:50%;transform:translateX(-50%);min-height:48px;padding:12px 18px;max-width:220px;background:#f4bd68;color:#122530;border:1px solid #ffe0ac;border-radius:6px;font-size:13px;font-weight:800;touch-action:manipulation;z-index:8}#game-ui .mission-action:active{background:#ffe2a8}
@media(any-pointer:coarse),(max-width:700px){#game-ui .mission-hud,body:not([data-show-mirrors=no]) #game-ui .mission-hud,body[data-show-mirrors=no] #game-ui .mission-hud{top:64px;left:50%;transform:translateX(-50%);width:min(220px,60vw);max-width:none;padding:4px 9px;font-size:9px}#mission-details summary{min-height:28px;gap:8px}#game-ui .mission-hud progress{height:3px}#mission-message{font-size:10px;max-height:100px}#game-ui .mission-action{bottom:calc(132px + env(safe-area-inset-bottom));min-width:126px;max-width:180px;padding:12px;font-size:12px}.mission-hud:has(details[open]){box-shadow:0 12px 30px #0009}}
@media(max-height:500px) and (min-width:650px){#game-ui .mission-hud,body:not([data-show-mirrors=no]) #game-ui .mission-hud,body[data-show-mirrors=no] #game-ui .mission-hud{top:48px;left:50%;transform:translateX(-50%);width:210px;max-width:35vw}#game-ui .mission-action{bottom:calc(100px + env(safe-area-inset-bottom));min-height:44px;padding:10px 14px}#mission-message{max-height:85px}}

#game-ui .look-tools:has(#mission-action:not([hidden])){flex-wrap:wrap;gap:5px;max-width:180px}#game-ui .look-tools #mission-action{position:static;transform:none;left:auto;bottom:auto;flex:1 0 100%;width:100%;min-width:0;max-width:none;min-height:44px;padding:10px;font-size:12px}
@media(max-width:700px) and (min-height:501px){#game-ui .mission-hud,body:not([data-show-mirrors=no]) #game-ui .mission-hud{top:268px;left:16px;transform:none;width:210px}body[data-show-mirrors=no] #game-ui .mission-hud{top:130px}#game-ui .look-tools:has(#mission-action:not([hidden])){width:132px;max-width:132px}}body[data-show-look-tools=no] #game-ui .look-tools:has(#mission-action:not([hidden])){display:flex!important}body[data-show-look-tools=no] #game-ui .look-tools:has(#mission-action:not([hidden]))>button:not(#mission-action),body[data-show-look-tools=no] #game-ui .look-tools:has(#mission-action:not([hidden]))>#look-status{display:none}
.capture-studio{width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;overflow:auto;border:1px solid #58727c;border-radius:20px;background:#10242e;color:#ebf1f3;padding:24px;color-scheme:dark}.capture-studio::backdrop{background:#03101bdc}.capture-studio header{display:flex;justify-content:space-between;gap:12px}.capture-studio h2{font-size:clamp(22px,4vw,32px);margin:8px 0}.capture-studio p{line-height:1.6;color:#b8ced5}.capture-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.capture-studio button,.capture-studio a{display:inline-block;min-height:44px;padding:10px 14px;border:1px solid #56717c;border-radius:10px;background:#203d49;color:#edf4f5;font:inherit;cursor:pointer}.capture-studio button:disabled{opacity:.4;cursor:not-allowed}.capture-studio video{width:100%;max-height:330px;margin:12px 0;background:#000}.capture-studio textarea{display:block;box-sizing:border-box;width:100%;margin:10px 0;padding:12px;background:#091c27;color:#dbe9ee;border:1px solid #526b76;border-radius:10px;font:inherit}.capture-studio [hidden]{display:none!important}.recording-badge{position:fixed;z-index:80;top:max(70px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);border:1px solid #f9b2a3;border-radius:24px;background:#652c28;color:white;min-height:44px;padding:9px 18px;cursor:pointer}.recording-badge[hidden]{display:none}.capture-entry{width:100%;margin:10px 0;min-height:44px}.run-career{font-size:13px;color:#d6c4a3;line-height:1.5}
@media(max-width:480px){.capture-studio{padding:16px}.capture-actions{grid-template-columns:1fr}.recording-badge{top:58px;font-size:12px}}

@media(min-width:900px) and (pointer:fine){
 .side-mirror{width:min(var(--mirror-width,200px),calc((100vw - 64px)/2));top:116px}
 .mirror-glass{height:calc(var(--mirror-width,200px)*.59)}
 .mirror-left{left:max(16px,calc((100vw - 2*var(--mirror-width,200px) - (100vw - 2*var(--mirror-width,200px) - 48px)*var(--mirror-gap-factor,.9))/2))}
 .mirror-right{right:max(16px,calc((100vw - 2*var(--mirror-width,200px) - (100vw - 2*var(--mirror-width,200px) - 48px)*var(--mirror-gap-factor,.9))/2))}
 #game-ui .road-notice{top:auto;bottom:108px;left:50%;right:auto;transform:translateX(-50%);width:min(440px,45vw);text-align:center}
 body:not([data-show-mirrors=no]) #game-ui .mission-hud,body:not([data-show-mirrors=no]) #game-ui .wind-hud{top:calc(160px + var(--mirror-width,200px)*.59)}
}
#test-editor-return{pointer-events:auto;padding:10px 14px;border-radius:10px;background:#d6e3a5;color:#17281e;font-weight:700;text-decoration:none}

@media(any-pointer:coarse),(max-width:700px){#test-editor-return:not([hidden]){display:block!important;position:fixed;top:64px;right:12px;max-width:145px;font-size:11px;min-height:44px;z-index:15}}

@media(max-width:899px),(pointer:coarse){
 .side-mirror{width:calc(min(200px, 46vw)*var(--mobile-mirror-scale,.75));max-width:none}
 .mirror-glass{height:auto;aspect-ratio:1.7}
 .side-mirror header{padding:3px 6px;font-size:10px}
 .side-mirror button{min-width:36px;min-height:36px}
}
/* Lightweight route radar, separate from the WebGL mirror passes. */
#game-ui .driving-radar{position:absolute;right:max(18px,env(safe-area-inset-right));top:270px;width:154px;z-index:7;border:1px solid #9bb7b477;border-radius:14px;background:#102630db;overflow:hidden;pointer-events:auto;box-shadow:0 4px 16px #0003}
#game-ui .driving-radar button{display:block;width:100%;min-height:36px;background:transparent;border:0;color:#e5ece4;font:600 11px 'DM Sans',sans-serif;cursor:pointer}
#game-ui .driving-radar canvas{display:block;width:100%;height:auto;pointer-events:none}
#game-ui .driving-radar [hidden]{display:none!important}
#game-ui .radar-caption{display:block;text-align:center;font-size:9px;padding:5px;color:#c2d5d1}
#game-ui .driving-radar[data-collapsed=true]{width:88px}
body[data-mirror-adjust=yes] #game-ui .driving-radar{visibility:hidden}
@media(max-width:700px){#game-ui .driving-radar{top:auto;bottom:180px;right:max(12px,env(safe-area-inset-right));width:116px}#game-ui .driving-radar button{min-height:44px}}
@media(max-height:550px) and (min-width:600px){#game-ui .driving-radar{top:76px;bottom:auto;width:108px;right:16px}}