/* Still Outside: readable controls, a street-sign HUD, and the driving title. */
#radio-panel{background:#080e15f8;color:#f8f5ed}
#radio-panel button{color:#f8f5ed;background:#1b2b3a;border:1px solid #718391;border-radius:6px;font-weight:700;font-size:1rem;min-height:48px;padding:10px 16px}
#radio-panel button:hover:not(:disabled){background:#2b465b;border-color:#e8f0f5}
#radio-panel button:active:not(:disabled){background:#365a72}
#radio-panel button:disabled{color:#aeb9c2;background:#17212b;border-color:#47525d;cursor:default}
#radio-panel button:focus-visible{outline:3px solid #ffb380;outline-offset:3px}
.radio-top>span,.radio-eyebrow{font-size:.875rem;line-height:1.5;color:#e7b598;letter-spacing:.12em}
.radio-info h2{font:800 clamp(26px,3vw,40px)/1.05 'Barlow Condensed',Impact,sans-serif;letter-spacing:0;margin:12px 0 24px;color:#fff}
#radio-track{font:800 clamp(24px,2.8vw,38px)/1.15 'Barlow Condensed',Impact,sans-serif;letter-spacing:.01em;color:#fff;margin:16px 0 8px;overflow-wrap:anywhere}
.radio-info p,#radio-artist{font-size:1rem;color:#d3dee5;line-height:1.5}
#radio-message{font-size:.875rem;color:#ffb78f;letter-spacing:.08em;min-height:22px}
#radio-time,.radio-volume,.radio-hint{font-size:.875rem;color:#c6d2db;line-height:1.5}
#radio-panel .radio-controls{grid-template-columns:minmax(80px,1fr) minmax(110px,1.8fr) minmax(80px,1fr);gap:10px}
#radio-panel .radio-controls button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:10px}
.radio-controls svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:2;flex:none}
.radio-controls span{font-size:.875rem;letter-spacing:.04em}
#radio-panel #radio-play{color:#171a1d;background:#fff2dc;border-color:#fff2dc;letter-spacing:.08em}
#radio-panel #radio-play:hover:not(:disabled){background:#ffd1ac;border-color:#ffd1ac}
#radio-panel #radio-tracklist{gap:0;border:1px solid #465968;border-radius:6px;max-height:clamp(190px,33vh,390px)}
#radio-panel #radio-tracklist button{color:#edf4f8;background:#12202c;border:0;border-bottom:1px solid #425362;border-radius:0;font-size:1rem;font-weight:500;line-height:1.4;min-height:52px;padding:12px 16px;text-align:left}
#radio-panel #radio-tracklist button:last-child{border-bottom:0}
#radio-panel #radio-tracklist button:hover{background:#263e51}
#radio-panel #radio-tracklist button[aria-current="true"]{color:#fff;background:#593a2c;font-weight:700;box-shadow:inset 4px 0 #ffac74}
#radio-panel #radio-album-count{color:#ffb78f;font-size:.875rem}
#radio-panel .spotify-link{font-size:1rem;color:#baf3ce}
#radio-mini{color:#fff}#radio-mini strong{font-size:.875rem}
.menu h1.game-title{font-size:clamp(54px,6.7vw,110px);line-height:.9;margin:24px 0 22px;letter-spacing:-.035em;max-width:640px}
.title-main{display:block;white-space:nowrap}.title-main em{display:block;font-style:italic}
.title-route{display:block;width:max-content;max-width:100%;border-top:2px solid #f07842;margin-top:16px;padding-top:12px;font:700 clamp(16px,1.8vw,25px)/1.1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.15em;color:#fff2df}
.title-route b{font-size:1.55em;letter-spacing:.025em;line-height:1.15}
.title-credit{display:block;margin-top:8px;color:#d8d0c4;font:italic 500 16px/1.3 'DM Sans',sans-serif;letter-spacing:0}
.title-credit strong{font:800 24px/1.2 'Barlow Condensed',Impact,sans-serif;color:#ffae7c;letter-spacing:.02em}
.menu-content>p{font-size:1rem;color:#d1d8e2}
#navigation.street-sign-hud{display:grid;gap:4px;left:50%;top:120px;transform:translateX(-50%);width:max-content;max-width:min(430px,46vw);padding:11px 23px 12px;border:2px solid #e6f0e5;border-radius:7px;background:#075342;color:#fff;box-shadow:0 0 0 4px #14342de8,0 10px 22px #0006;text-align:center;text-shadow:0 1px 1px #00291f;line-height:1.2;letter-spacing:0}
.street-sign-city{font-size:.75rem;letter-spacing:.16em;font-weight:700;color:#d7eee6}
#current-street{font:700 clamp(20px,2vw,30px)/1.05 'Barlow Condensed',Arial,sans-serif;letter-spacing:.055em;overflow-wrap:anywhere}
#street-sign-note{font-size:.875rem;color:#def0e7;line-height:1.3}
#time-of-day{min-width:62px;color:#fff4d9;background:#20303de8;border-color:#8d9ba4}
#time-of-day[aria-pressed="true"]{background:#172344;color:#e1e8ff;border-color:#8c9cc4}
@media(max-width:1000px){.brand small{max-width:160px;line-height:1.4;letter-spacing:.08em}.menu h1.game-title{font-size:70px}.title-route{font-size:17px}.title-credit strong{font-size:22px}.tools{flex-wrap:wrap;justify-content:flex-end;max-width:78%;gap:5px}.tools button{font-size:11px;min-height:40px}}
@media(max-width:700px){#radio-panel{padding:20px 16px}.radio-top>span{font-size:.875rem;letter-spacing:.04em}.radio-info h2{margin-bottom:18px}.radio-controls svg{width:19px;height:19px}.radio-controls span{font-size:.75rem}.menu h1.game-title{font-size:64px}.title-route{font-size:16px}#navigation.street-sign-hud{top:112px;max-width:60vw;padding:8px 14px}.street-sign-city{font-size:.625rem}#current-street{font-size:22px}#street-sign-note{font-size:.75rem}}
@media(max-height:600px) and (orientation:landscape){.menu h1.game-title{font-size:clamp(40px,7vw,65px);margin:12px 0}.title-main em{display:inline}.title-route{font-size:14px;margin-top:8px;padding-top:7px}.title-route br{display:none}.title-route b{font-size:1.25em;margin-left:6px}.title-credit{font-size:13px;margin-top:5px}.title-credit strong{font-size:19px}.menu-content{max-width:520px}.menu .edition{font-size:9px}.menu-content>p{display:none}.tools{max-width:81%;gap:4px}.tools button{min-height:38px;padding:7px 8px;font-size:10px}header .brand{font-size:18px;max-width:142px}.brand small{font-size:7px;white-space:nowrap}#navigation.street-sign-hud{top:72px;max-width:42vw;padding:7px 17px}.street-sign-city{font-size:.625rem}#current-street{font-size:22px}#street-sign-note{font-size:.75rem}.radio-top{margin-bottom:16px}.radio-info h2{font-size:26px;margin:8px 0 12px}#radio-track{font-size:26px}#radio-panel .radio-controls{margin:14px 0}#radio-panel .radio-controls button{min-height:48px}.radio-layout{grid-template-columns:.75fr 1fr}}
@media(min-width:1900px){#navigation.street-sign-hud{top:150px;max-width:600px;padding:14px 30px}.street-sign-city{font-size:1rem}#current-street{font-size:38px}#street-sign-note{font-size:1rem}}

#destination-hud{background:#075342;border:2px solid #e6f0e5;border-radius:7px;box-shadow:0 0 0 3px #14342de8,0 10px 22px #0006}#destination-arrow,#destination-name,#destination-turn,#cancel-destination{color:#fff}#destination-distance{color:#d7eee6}#destination-name{font:700 24px/1.15 "Barlow Condensed",Arial,sans-serif;letter-spacing:.03em}#pause-time-of-day{color:#f7efdc;border-color:#a0acbb}

@media (max-height:800px) and (min-height:601px){.menu{padding-top:108px;padding-bottom:58px;overflow-y:auto;align-items:flex-start}.menu h1.game-title{font-size:clamp(50px,6vw,82px);margin:16px 0}.title-route{font-size:17px;margin-top:10px;padding-top:8px}.menu .intro-tip{margin-top:10px}}

@media(max-height:600px) and (orientation:landscape){.menu{padding-top:82px;padding-bottom:44px;overflow-y:auto;align-items:flex-start}}

/* Driving transport stays on screen, including when autoplay needs a tap. */
#radio-mini.drive-radio{display:grid;gap:7px;left:50%;right:auto;top:auto;bottom:70px;transform:translateX(-50%);width:360px;padding:10px;border:1px solid #8295a1;border-top:3px solid #f07842;border-radius:10px;background:#0b151bf5;box-shadow:0 8px 30px #0007;z-index:9}
#radio-mini-open{display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:38px;padding:0;border:0;background:transparent;text-align:left;color:#fff}
#radio-mini-open img{border-radius:3px;flex:none}#radio-mini-open>span{flex:1;min-width:0;gap:3px}#radio-mini-open>b{font-size:22px;color:#ffb380}
#radio-mini strong{font-size:1rem;line-height:1.2}#radio-mini small{font-size:.75rem;letter-spacing:.015em;line-height:1.2;color:#e7c6ad}
.drive-radio-controls{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:5px}
.drive-radio-controls button{min-width:0;min-height:44px;padding:6px 3px;font-size:.875rem;font-weight:800;line-height:1.1;letter-spacing:0;color:#f8f5ed;background:#1b2b3a;border:1px solid #718391;border-radius:5px}
.drive-radio-controls button:hover{background:#304c61}.drive-radio-controls button:focus-visible,#radio-mini-open:focus-visible{outline:3px solid #ffb380;outline-offset:2px}
.drive-radio-controls button:disabled{color:#aeb9c2;background:#17212b;border-color:#47525d;cursor:default}
#drive-radio-play{color:#171a1d;background:#fff2dc;border-color:#fff2dc}#drive-radio-play:hover{background:#ffd1ac}
#drive-radio-shuffle{display:grid;place-content:center;gap:2px}#drive-radio-shuffle small{font-size:.75rem;color:inherit}
#drive-radio-shuffle[aria-pressed="true"],#radio-panel #radio-shuffle[aria-pressed="true"]{color:#171a1d;background:#ffb380;border-color:#ffb380}
#radio-mini.needs-play{border-top-color:#ffd1a4}#radio-mini.needs-play #radio-mini-state{color:#ffcb9f}
#radio-mini .drive-radio-help{display:block;text-align:center;color:#c6d2db;font-size:.75rem}.radio-pad-help{display:none}.controller-active .radio-pad-help{display:inline}.controller-active .radio-key-help{display:none}
#menu-radio-cue{display:block;margin-top:12px;padding:10px 12px;min-height:44px;max-width:430px;width:100%;font-size:.875rem;font-weight:700;text-align:left;border:1px solid #da976f;border-radius:5px;color:#ffdabd;background:#17232bea}
.radio-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}
#radio-panel .radio-toggles button{width:100%;margin:0;min-height:44px}
#radio-panel #radio-breaks[aria-pressed="true"]{color:#171a1d;background:#8fd6b4;border-color:#8fd6b4}
@media(max-width:520px){.radio-toggles{grid-template-columns:1fr}}
@media(pointer:coarse){#radio-mini .drive-radio-help{display:none}.controller-active #radio-mini .drive-radio-help{display:block}}
@media(max-height:600px) and (orientation:landscape){
 #radio-mini.drive-radio{width:min(320px,calc(100vw - 360px));bottom:42px;padding:6px;gap:5px}
 #radio-mini-open{min-height:32px;gap:7px}#radio-mini-open img{width:30px;height:30px}#radio-mini strong{font-size:.875rem}#radio-mini-open>b{display:none}
 #radio-mini .drive-radio-help{display:none}.drive-radio-controls{gap:4px;grid-template-columns:1fr 1fr 1fr 1.18fr}.drive-radio-controls button{padding:4px 2px}
 #vibe-hud{bottom:155px;padding:6px 9px}#vibe-title,#vibe-tip{display:none}
 .controller-active #vibe-hud{bottom:130px}
 #menu-radio-cue{margin-top:8px;min-height:36px;padding:7px 10px}
}
@media(max-height:380px) and (orientation:landscape){#navigation .street-sign-city,#street-sign-note{display:none}#navigation.street-sign-hud{top:66px}}
@media(max-width:600px) and (orientation:portrait){#radio-mini.drive-radio{width:calc(100vw - 40px);bottom:48px}}
.tv-mode #radio-mini.drive-radio{bottom:8vh;transform:translateX(-50%) scale(var(--tv-scale));transform-origin:bottom center}

/* A short radio strip leaves the middle of the windshield open. */
#radio-mini.drive-radio{grid-template-columns:minmax(88px,1fr) auto;gap:8px;width:350px;padding:5px 7px;bottom:max(14px,env(safe-area-inset-bottom));border-top-width:1px;border-left:3px solid #f07842;border-radius:7px}
#radio-mini-open{min-height:44px;gap:0}
#radio-mini-open img,#radio-mini-open>b,#radio-mini-state,#radio-mini .drive-radio-help,#drive-radio-shuffle-state{display:none!important}
#radio-mini strong{font-size:.875rem;line-height:1.3}
.drive-radio-controls{grid-template-columns:repeat(4,44px);gap:3px}
.drive-radio-controls button{width:44px;height:44px;min-height:44px;padding:5px;font-size:20px}
#drive-radio-shuffle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-driving #controller-status,.is-driving .keyboard{display:none!important}
.tv-mode #radio-mini.drive-radio{bottom:3vh}
@media(max-height:600px) and (orientation:landscape){#radio-mini.drive-radio{width:202px;grid-template-columns:1fr;bottom:max(12px,env(safe-area-inset-bottom))}#radio-mini-open{display:none}.drive-radio-controls{justify-content:center}}

/* Fullscreen leaves all driving controls available. MENU occupies the pause slot on touch. */
#menu .assist-toggle{position:static;left:auto;top:auto;width:auto}
#dialog{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#dialog>div{margin:auto;max-height:none}
@media(max-height:600px) and (orientation:landscape){
 #dialog{align-items:flex-start;padding:16px max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
 #dialog>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(620px,100%);max-width:620px;margin:auto;text-align:left}
 #dialog .edition,#dialog h2,#dialog #resume,#dialog #dialog-text{grid-column:1/-1}
 #dialog h2{font-size:30px;line-height:1.1;margin:3px 0 5px}
 #dialog #dialog-text{display:block;font-size:12px;line-height:1.45;margin:0 0 6px}
 #dialog .start,#dialog .secondary{width:100%;max-width:none;min-height:44px;padding:10px;margin:0;font-size:12px;line-height:1.3;letter-spacing:.02em}
 #dialog .edition{font-size:12px}
}
@media(pointer:coarse) and (orientation:landscape){
 header{height:auto;min-height:60px;align-items:flex-start}
 header .tools{max-width:calc(100% - 126px)}
 header .tools button{min-height:44px;letter-spacing:.02em}
}