/* Driving information sits at the edges; the centre is reserved for the road. */
:root{--guide-height:0px;--drive-edge:max(14px,env(safe-area-inset-left))}
.is-driving header{height:60px;min-height:60px;padding:8px var(--drive-edge);align-items:center}
.is-driving header .brand{font-size:21px;line-height:.9;max-width:115px;flex-shrink:0}
.is-driving header .brand small{display:none}
#toggle-controls{display:none;min-height:44px;min-width:84px;font-size:10px;padding:8px}
.is-driving #toggle-controls{display:inline-flex;align-items:center;justify-content:center}
.is-driving #radio-mini.drive-radio{left:var(--drive-edge);bottom:max(8px,env(safe-area-inset-bottom));transform:none;transform-origin:bottom left}
.is-driving #vibe-hud{left:var(--drive-edge);bottom:calc(82px + var(--guide-height));transform:none;max-width:280px}
/* A fine dark edge keeps speed/units/gear readable over sunlit pavement. */
.is-driving .speed{bottom:calc(24px + var(--guide-height))!important;text-shadow:0 1px 2px #061019e6,0 0 1px #061019e6}
/* Reset belongs beneath the map, clear of speed, gear and the radio row. */
.is-driving #hud #recover{top:274px;bottom:auto!important;left:auto!important;right:max(14px,3vw);width:max-content;min-height:44px;transform:none}
.is-driving.tv-mode #hud #recover{top:calc(274px * var(--tv-scale) + 3vh);right:4vw;transform:scale(var(--tv-scale));transform-origin:top right}
.is-driving.bike-selected #bike-balance{bottom:calc(22px + var(--guide-height));width:240px}
.is-driving #bike-balance[data-state="grounded"]{display:none}
.is-driving.controller-active #vibe-hud{bottom:calc(82px + var(--guide-height))}
.is-driving.controller-active #recover{display:none}
.is-driving.driving-widgets-hidden #market-hud,
.is-driving.driving-widgets-hidden #vibe-hud{display:none!important}
/* The collectibles sit in the top bar beside the tools, where they block none of the road. The
   header is the one row everything competes for, so the chips shed their labels before the bar
   can crowd the wordmark, and step aside entirely on a genuinely tiny one. */
#collect-hud{margin-right:6px;flex:0 1 auto;min-width:0}
.is-driving #collect-hud .collect-chip{padding:4px 8px;gap:6px}
.is-driving #collect-hud b{font-size:17px}
@media(max-width:820px){.is-driving #collect-hud label{display:none}.is-driving #collect-hud .collect-chip{padding:4px 7px;gap:5px}}
@media(max-width:620px){.is-driving #collect-hud{display:none}}
#controls-visibility-note{font-size:12px;line-height:1.5;color:#c5d1d8;margin:12px 0}
@media(max-width:1000px),(max-height:600px){
 .is-driving header .tools>button{display:none!important}
 .is-driving header .tools>:is(#duber-chip,#open-phone,#open-map,#open-radio,#fullscreen,#pause,#toggle-controls):not([hidden]){display:inline-flex!important}
 .is-driving header .tools{max-width:calc(100% - 120px);gap:5px;flex-wrap:nowrap}
 .is-driving header .tools button{min-height:44px;padding:7px 9px}
 .is-driving #toggle-controls{font-size:9px;width:84px;white-space:normal;line-height:1.3}
 .is-driving :is(.score,.timer,.combo){display:none!important}
 .is-driving #navigation.street-sign-hud{left:var(--drive-edge);top:66px;transform:none;max-width:min(240px,56vw);padding:5px 10px;text-align:left;pointer-events:none;white-space:normal;border-width:1px;box-shadow:0 0 0 2px #14342dc9,0 3px 8px #0004}
 .is-driving #navigation :is(.street-sign-city,#street-sign-note){display:none}
 .is-driving #current-street{font-size:16px;line-height:1.15;overflow-wrap:anywhere}
 .is-driving .map{top:70px;right:max(14px,env(safe-area-inset-right));bottom:auto;width:90px;height:76px;transform:none;pointer-events:none}
 .is-driving .map canvas{width:90px;height:74px}
 .is-driving .map>span{display:none}
 .is-driving #vibe-hud,.is-driving.controller-active #vibe-hud{top:116px;bottom:auto!important;width:210px;max-width:210px;padding:7px 10px}
 .is-driving #open-vibes{min-height:30px;font-size:10px;gap:10px}
 .is-driving #vibe-count{font-size:12px}
 .is-driving #vibe-title,.is-driving #vibe-tip{display:none}
 .is-driving #vibe-status{font-size:11px;line-height:1.3}
 .is-driving #recover{display:none}
 .is-driving #radio-mini.drive-radio{left:50%;width:202px;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);grid-template-columns:1fr}
 .is-driving #radio-mini-open{display:none}
 .is-driving .speed{right:max(16px,env(safe-area-inset-right));bottom:calc(20px + var(--guide-height))!important;transform:none;pointer-events:none}
 .is-driving .speed>strong{font-size:38px}
 .is-driving .speed>small{max-width:150px;font-size:9px}
 .is-driving.bike-selected #bike-balance{bottom:calc(78px + var(--guide-height));width:195px;padding:8px 10px;font-size:10px}
 .is-driving.controller-active.bike-selected #bike-balance{bottom:calc(14px + var(--guide-height))}
 .is-driving #bike-balance-hint{display:none}
 .is-driving:has(#destination-hud:not([hidden])) #navigation{display:none}
 .is-driving #destination-hud{left:var(--drive-edge);top:70px;bottom:auto;width:min(360px,65vw);max-width:65vw;transform:none;padding:8px 10px}
 .is-driving #destination-name{font-size:17px}
 .is-driving #destination-turn{font-size:12px}
 .is-driving #destination-distance{font-size:11px}
 .is-driving:has(#destination-hud:not([hidden])) #vibe-hud{top:170px}
 .is-driving #collect-hud .collect-chip{padding:3px 7px;gap:5px}
 .is-driving #collect-hud b{font-size:15px}
 .is-driving #collect-hud label{font-size:8px;letter-spacing:.1em}
}
@media(pointer:coarse) and (orientation:landscape){
 .is-driving:not(.controller-active) .speed{bottom:195px!important;right:18px}
 .is-driving:not(.controller-active) .speed>strong{font-size:30px}
 .is-driving:not(.controller-active) .speed>small,.is-driving:not(.controller-active) .revbar{display:none}
 .is-driving:not(.controller-active) .map{display:none}
 .is-driving.driving-controls-hidden .speed{bottom:18px!important}
 .is-driving:has(#destination-hud:not([hidden])) #vibe-hud{top:auto;bottom:72px!important;left:50%;transform:translateX(-50%);width:195px}
}
@media(min-width:1900px){.is-driving #toggle-controls{font-size:14px;min-width:130px;min-height:56px}.is-driving #vibe-hud{bottom:calc(105px + var(--guide-height))}.is-driving.controller-active #vibe-hud{bottom:calc(105px + var(--guide-height))}}
/* Navigation already names the selected signal. Keep the separate card for
   the actual capture/celebration instead of repeating the destination. */
.is-driving:has(#destination-hud:not([hidden])):not(.vibe-focus) #vibe-hud{display:none!important}
@media(min-width:600px) and (max-height:500px) and (orientation:landscape){
 #dialog{padding:10px 20px}
 #dialog>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #dialog :is(.edition,h2,#resume){grid-column:1/-1}
 #dialog h2{font-size:24px;line-height:1.1;margin:0}
 #dialog .pause-instructions:not([open]){grid-column:auto;margin:0}
 #dialog .pause-instructions:not([open]) summary{border:1px solid #73839160;border-radius:4px;margin:0;padding:10px 7px;font-size:11px;line-height:1.3;min-height:44px}
 #dialog .secondary{font-size:11px;padding:8px 5px;margin:0}
 #dialog .pause-instructions[open]{grid-column:1/-1}
 .xbox-guide-visible #dialog{padding-bottom:calc(12px + var(--guide-height))}
}
/* The radio stays available independently of optional driving instructions. */
.is-driving #radio-mini.drive-radio:not([hidden]){display:grid;width:430px;max-width:calc(100vw - 28px);grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:4px 6px}
.is-driving #radio-mini-open{display:flex;gap:7px;min-height:44px}
.is-driving #radio-mini-open img{display:block!important;width:32px;height:32px;object-fit:cover}
.is-driving #radio-mini-title{font-size:12px;line-height:1.25;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1000px),(max-height:600px){
 .is-driving #radio-mini.drive-radio:not([hidden]){width:430px;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:4px 6px;bottom:max(8px,env(safe-area-inset-bottom));box-shadow:0 3px 12px #0005}
 .is-driving #radio-mini-open{min-height:44px;gap:7px}
 .is-driving #radio-mini-open img{width:28px;height:28px}
 .is-driving #radio-mini-title{font-size:11px}
 .is-driving.controller-active #radio-mini.drive-radio{left:50%;transform:translateX(-50%);bottom:max(8px,env(safe-area-inset-bottom))}
 .is-driving.bike-selected:not(.controller-active) #bike-balance{bottom:calc(104px + var(--guide-height))}
}
@media(min-width:1001px) and (min-height:601px){
 .is-driving #navigation.street-sign-hud{left:var(--drive-edge);top:68px;transform:none;width:max-content;max-width:260px;padding:5px 10px;text-align:left;pointer-events:none;white-space:normal;border-width:1px;box-shadow:0 0 0 2px #14342dc9,0 3px 8px #0004}
 .is-driving #navigation :is(.street-sign-city,#street-sign-note){display:none}
 .is-driving #current-street{font-size:clamp(18px,1.15vw,22px);line-height:1.15;overflow-wrap:anywhere}
 .is-driving #destination-hud{left:var(--drive-edge);top:68px;transform:none;width:340px;max-width:30vw}
 .is-driving .timer{top:126px}
}

/* Rider balance is communicated by the bike pose, without an overlay meter. */
#bike-balance{display:none!important}

/* One low radio row leaves the forward view open. Touch controls sit above it. */
.is-driving.xbox-connected #xbox-guide:not([hidden]){bottom:calc(64px + env(safe-area-inset-bottom))}
.is-driving.controller-active #vibe-hud{bottom:calc(76px + var(--guide-height))}
@media(pointer:coarse) and (orientation:landscape){
 .is-driving:not(.controller-active) #vibe-hud{left:auto;right:14px;top:60px}
 .is-driving:not(.controller-active) .controls{bottom:calc(70px + env(safe-area-inset-bottom))}
 .is-driving:not(.controller-active) .speed{bottom:max(14px,env(safe-area-inset-bottom))!important;right:14px}
 .is-driving:has(#destination-hud:not([hidden])) #vibe-hud{bottom:74px!important}
 .is-driving.controller-active:has(#destination-hud:not([hidden])) #vibe-hud{bottom:calc(76px + var(--guide-height))!important}
}
@media(max-width:680px){
 .is-driving #radio-mini.drive-radio:not([hidden]){width:calc(100vw - 100px);left:12px;max-width:430px;transform:none}
 .is-driving.controller-active #radio-mini.drive-radio{left:12px;transform:none}
 .is-driving #radio-mini-title{font-size:10px}
}

.is-driving.controller-active .speed{bottom:max(8px,env(safe-area-inset-bottom))!important}
.is-driving.controller-active .speed>strong{font-size:34px;line-height:1}
.is-driving.controller-active .speed>small{font-size:9px;line-height:1.1;margin-top:1px}
.is-driving.controller-active .speed .revbar{display:none}

#radio-mini-title .radio-title-track{display:flex;width:max-content;gap:32px;padding-right:32px}
#radio-mini-title .radio-title-track>span{flex:none}
#radio-mini-title.ticker-active .radio-title-track{animation:radio-title-ticker var(--radio-ticker-seconds,12s) linear infinite}
@keyframes radio-title-ticker{0%,12%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){#radio-mini-title.ticker-active .radio-title-track{animation:none}}
@media(min-width:1180px) and (min-height:500px){
 .is-driving.xbox-connected #xbox-guide:not([hidden]){left:14px;right:auto;bottom:max(8px,env(safe-area-inset-bottom));width:calc(100vw - 548px);min-height:70px;padding:5px 8px;gap:8px 14px;flex-wrap:nowrap;justify-content:flex-start;font-size:11px;background:#101b24dc;border:1px solid #9cafba40;border-radius:6px}
 .is-driving.controller-active #radio-mini.drive-radio:not([hidden]){left:auto;right:174px;bottom:calc(16px + env(safe-area-inset-bottom));width:348px;transform:none}
 .is-driving.controller-active .speed{right:14px;bottom:max(8px,env(safe-area-inset-bottom))!important;width:144px;min-height:70px;white-space:nowrap}
 .is-driving.controller-active .speed>strong{font-size:52px;font-variant-numeric:tabular-nums}
 .is-driving.controller-active .speed>span{font-size:12px;margin-left:8px}
 .is-driving.controller-active .speed>small{font-size:10px;margin-top:3px}
 .is-driving.controller-active #vibe-hud{bottom:78px}
}
#radio-mini[hidden] .radio-title-track{animation-play-state:paused}
@media(min-width:1900px) and (min-height:700px){
 .is-driving.xbox-connected #xbox-guide:not([hidden]){left:20px;bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 766px);min-height:86px;font-size:16px;gap:18px}
 .is-driving.controller-active #radio-mini.drive-radio:not([hidden]){right:226px;bottom:calc(20px + env(safe-area-inset-bottom));width:500px;padding:6px 8px}
 .is-driving.controller-active #radio-mini-open{min-height:56px}
 .is-driving.controller-active #radio-mini-open img{width:40px;height:40px}
 .is-driving.controller-active #radio-mini-title{font-size:15px}
 .is-driving.controller-active .speed{right:20px;bottom:max(12px,env(safe-area-inset-bottom))!important;width:186px;min-height:86px}
 .is-driving.controller-active .speed>strong{font-size:68px}
 .is-driving.controller-active .speed>small{font-size:11px}
 .is-driving.controller-active #vibe-hud{bottom:96px}
}

/* The two thumbs and the radio share the bottom edge, leaving the road open. */
.drive-radio-controls svg{display:block;width:22px;height:22px;margin:auto;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#drive-radio-play .radio-icon-pause{display:none}
#drive-radio-play[data-playing="true"] .radio-icon-play{display:none}
#drive-radio-play[data-playing="true"] .radio-icon-pause{display:block}
@media(pointer:coarse) and (orientation:landscape){
 .is-driving:not(.controller-active):not(.driving-controls-hidden){--touch-edge:max(14px,env(safe-area-inset-left),env(safe-area-inset-right));--touch-bottom:max(10px,env(safe-area-inset-bottom));--touch-radio-height:54px}
 .is-driving:not(.controller-active) .controls{left:var(--touch-edge,14px);right:var(--touch-edge,14px);bottom:var(--touch-bottom,10px);height:178px}
 .is-driving:not(.controller-active) .wheel-area,.is-driving:not(.controller-active) #wheel{width:158px}
 .is-driving:not(.controller-active) #wheel{height:158px}
 .is-driving:not(.controller-active) .wheel-area>span{display:block;min-height:16px;margin-top:4px;white-space:nowrap;font-size:9px;letter-spacing:.4px}
 .is-driving:not(.controller-active) .pedal-cluster{display:grid;grid-template-columns:54px 112px;grid-template-rows:44px 112px;gap:8px;padding:0;position:relative}
 .is-driving:not(.controller-active) .controls #gear{position:static;width:54px;height:44px;margin:0;min-height:44px;grid-column:1;grid-row:1}
 .is-driving:not(.controller-active) .controls .handbrake{position:static;width:112px;height:44px;margin:0;min-height:44px;grid-column:2;grid-row:1;font-size:10px;padding:4px}
 .is-driving:not(.controller-active) .controls #horn{top:52px;left:0;right:auto;width:76px;height:44px;min-height:44px;margin:0;font-size:10px}
 .is-driving:not(.controller-active) .controls .pedals{grid-column:1/-1;grid-row:2;align-items:end;gap:12px}
 .is-driving:not(.controller-active) .controls .pedals .brake-pedal{width:76px;height:60px}
 .is-driving:not(.controller-active) .controls .pedals .gas-pedal{width:86px;height:112px}
 .is-driving:not(.controller-active) .controls .pedals button>span{font-size:11px}
 .is-driving:not(.controller-active) .bike-weight-controls{display:none}
 .is-driving:not(.controller-active):not(.driving-controls-hidden) #radio-mini.drive-radio:not([hidden]){left:50%;right:auto;bottom:var(--touch-bottom);transform:translateX(-50%);width:max(200px,min(430px,calc(100vw - 388px - 2 * var(--touch-edge))));max-width:none;grid-template-columns:minmax(0,1fr) auto;gap:4px;padding:4px 6px}
 .is-driving:not(.controller-active):not(.driving-controls-hidden) #radio-mini-open{min-height:44px}
 .is-driving:not(.controller-active):not(.driving-controls-hidden) .speed{left:50%;right:auto;bottom:calc(var(--touch-bottom) + var(--touch-radio-height) + 8px)!important;transform:translateX(-50%);width:max-content;text-align:center}
 .is-driving:not(.controller-active):not(.driving-controls-hidden) .speed>strong{font-size:30px}
 .is-driving:not(.controller-active):not(.driving-controls-hidden) .speed>span{font-size:10px;margin-left:5px}
 .is-driving:not(.controller-active):not(.driving-controls-hidden) .speed>small,.is-driving:not(.controller-active) .revbar{display:none}
 .is-driving.driving-controls-hidden .speed{left:auto;right:14px;transform:none}
}
@media(pointer:coarse) and (orientation:landscape) and (max-width:800px){
 .is-driving:not(.controller-active):not(.driving-controls-hidden){--touch-radio-height:102px}
 .is-driving:not(.controller-active):not(.driving-controls-hidden) #radio-mini.drive-radio:not([hidden]){grid-template-columns:minmax(0,1fr);width:max(200px,calc(100vw - 388px - 2 * var(--touch-edge)))}
 .is-driving:not(.controller-active) #radio-mini .drive-radio-controls{justify-content:center}
 .is-driving:not(.controller-active) #radio-mini-open img{width:28px;height:28px}
}
@media(pointer:coarse) and (orientation:landscape) and (min-width:1100px) and (min-height:600px){
 .is-driving:not(.controller-active):not(.driving-controls-hidden){--touch-edge:max(24px,env(safe-area-inset-left),env(safe-area-inset-right));--touch-bottom:max(18px,env(safe-area-inset-bottom))}
}
/* Controller TV sizing is explicit above; avoid scaling its speed box twice. */
.is-driving.tv-mode.controller-active .speed{transform:none}
/* One size owns both the grid tracks and buttons; larger TV targets cannot overflow. */
.is-driving #radio-mini.drive-radio{--radio-button-size:44px;--radio-button-gap:3px;box-sizing:border-box}
.is-driving #radio-mini .drive-radio-controls{grid-template-columns:repeat(4,var(--radio-button-size));gap:var(--radio-button-gap);width:max-content;min-width:0;align-items:center}
.is-driving #radio-mini .drive-radio-controls button{box-sizing:border-box;width:var(--radio-button-size);min-width:var(--radio-button-size);max-width:var(--radio-button-size);height:var(--radio-button-size);min-height:var(--radio-button-size);margin:0}
@media(min-width:1900px) and (min-height:700px){
 .is-driving.controller-active #radio-mini.drive-radio{--radio-button-size:56px;--radio-button-gap:5px}
}

/* Keep map actions above the measured controller footer, including handhelds.
   Let the map shrink inside the remaining height instead of sizing to 100dvh. */
.driving-controls-hidden #xbox-guide{display:none!important}
.xbox-guide-visible #city-map{padding-bottom:calc(12px + max(64px,var(--guide-height)) + env(safe-area-inset-bottom))}
@media(orientation:landscape),(min-width:601px){
 #city-map:not([hidden]){display:flex;flex-direction:column}
 #city-map .map-heading{width:100%;flex:0 0 auto}
 #city-map .map-layout{width:100%;height:auto;flex:1 1 0;min-height:0}
 #city-map .map-stage{min-height:80px}
 #city-map .map-selection{flex:0 0 auto;max-height:65%;overflow:auto}
 #city-map .map-actions{position:sticky;bottom:0;background:#152b30;padding-top:3px}
}