/* Touch and compact controller share a legible three-part header. No desktop override. */
@media (max-width:600px), (max-width:980px) and (max-height:560px), (pointer:coarse) and (max-width:1100px){
 html.phone-hud-ready.is-driving{--web-left:max(8px,env(safe-area-inset-left));--web-right:max(8px,env(safe-area-inset-right));--web-bottom:max(8px,env(safe-area-inset-bottom));--web-top:env(safe-area-inset-top,0px);--web-header:calc(116px + var(--web-top));--web-map:104px;--web-map-h:68px;--web-thumb:138px}
 html.phone-hud-ready.is-driving header{position:fixed!important;left:var(--web-left)!important;right:var(--web-right)!important;top:var(--web-top)!important;width:auto!important;height:116px!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important}
 html.phone-hud-ready.is-driving header .drive-top-row{display:flex!important;align-items:center!important;min-height:42px!important;overflow:visible!important;gap:5px!important;flex:none!important}
 html.phone-hud-ready.is-driving header .drive-top-row .brand{display:block!important;flex:0 0 42px!important;width:42px!important;font-size:12px!important;line-height:1!important;margin:0!important}
 html.phone-hud-ready.is-driving header .brand :is(small,p){display:none!important}
 html.phone-hud-ready.is-driving header #player-hud#player-hud{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;flex:1!important;width:auto!important;max-width:none!important;min-width:0!important;padding:2px!important}
 html.phone-hud-ready.is-driving header #player-hud#player-hud .player-stat{display:flex!important;min-width:0!important;min-height:36px!important;padding:0 3px!important;gap:1px!important;overflow:hidden!important}
 html.phone-hud-ready.is-driving header #player-hud#player-hud .player-stat small{font-size:7px!important}
 html.phone-hud-ready.is-driving header #player-hud#player-hud .player-stat strong{font-size:12px!important;overflow:hidden;text-overflow:ellipsis}
 html.phone-hud-ready.is-driving header #player-hud#player-hud .player-stat svg{display:none!important}
 html.phone-hud-ready.is-driving header #navigation#navigation{position:fixed!important;top:calc(var(--web-top) + 92px)!important;left:var(--web-left)!important;right:var(--web-right)!important;bottom:auto!important;min-height:22px!important;height:22px!important;max-width:none!important;width:auto!important;padding:2px 8px!important;transform:none!important}
 html.phone-hud-ready.is-driving header #navigation strong{font-size:10px!important}
 html.phone-hud-ready.is-driving header .tools{display:grid!important;grid-template-columns:repeat(6,minmax(44px,1fr))!important;gap:2px!important;width:100%!important;min-width:0!important;margin:0!important;overflow:hidden!important}
 html.phone-hud-ready.is-driving header .tools>:is(#duber-chip,#open-phone,#fullscreen,#open-radio,#toggle-controls,#pause):not([hidden]){height:44px!important;min-height:44px!important;min-width:44px!important;width:auto!important;padding:3px!important;font-size:8px!important;margin:0!important}
 html.phone-hud-ready.is-driving header .tools #duber-chip{max-width:none!important}
 html.phone-hud-ready.is-driving header .tools #duber-chip :is(.duber-chip-status,.duber-chip-icon){display:none!important}
 html.phone-hud-ready.is-driving :is(#drive-direction,#drive-destination-label){display:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .controls{position:fixed!important;left:var(--web-left)!important;right:var(--web-right)!important;bottom:var(--web-bottom)!important;top:auto!important;height:130px!important;pointer-events:none!important;z-index:35!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .controls .wheel-area{position:absolute!important;left:0!important;bottom:0!important;width:124px!important;height:124px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud #wheel{width:124px!important;height:124px!important;touch-action:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .wheel-area>span{display:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .pedal-cluster{position:absolute!important;right:0!important;bottom:0!important;width:138px!important;display:grid!important;grid-template-columns:44px 86px!important;grid-template-rows:44px 78px!important;gap:6px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .controls :is(#gear,.handbrake){position:static!important;min-height:44px!important;height:44px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .controls #horn{display:none!important} /* Horn remains available in controls/keyboard; don't put it over brake. */
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .controls .pedals{position:static!important;grid-column:1/-1!important;grid-row:2!important;display:flex!important;gap:6px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .controls .pedals button{width:64px!important;height:78px!important;min-height:44px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .map{position:fixed!important;top:calc(var(--web-header) + 6px)!important;left:var(--web-left)!important;bottom:auto!important;right:auto!important;width:var(--web-map)!important;height:var(--web-map-h)!important;--gps-width:var(--web-map)!important;transform:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud>.speed{position:fixed!important;top:calc(var(--web-header) + var(--web-map-h) + 8px)!important;left:var(--web-left)!important;bottom:auto!important;right:auto!important;width:var(--web-map)!important;min-height:26px!important;height:26px!important;padding:3px 7px!important;box-sizing:border-box!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud>.speed strong{font-size:19px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) .drive-left-stack.drive-left-stack{display:none!important} /* Lifetime Vibes stays in persistent stats; navigation occupies this column. */
 html.phone-hud-ready.is-driving:not(.controller-active) #destination-hud#destination-hud:not([hidden]){display:flex!important;position:fixed!important;left:var(--web-left)!important;right:auto!important;top:calc(var(--web-header) + var(--web-map-h) + 38px)!important;bottom:auto!important;width:var(--web-map)!important;max-height:70px!important;min-height:44px!important;padding:3px!important;gap:3px!important;box-sizing:border-box!important;transform:none!important;overflow:auto!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #destination-hud#destination-hud :is(strong,span,small){font-size:9px!important;line-height:1.15!important;overflow-wrap:anywhere}
 html.phone-hud-ready.is-driving:not(.controller-active) #destination-hud#destination-hud>div{min-width:0!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #destination-hud #destination-arrow{display:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #destination-hud #cancel-destination{min-width:44px!important;width:44px!important;min-height:44px!important;padding:0!important}
 html.phone-hud-ready.is-driving:not(.controller-active) .drive-right-stack.drive-right-stack{position:fixed!important;top:calc(var(--web-header) + 6px)!important;right:var(--web-right)!important;bottom:auto!important;width:132px!important;max-height:82px!important;overflow:auto!important;left:auto!important;transform:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #market-hud#market-hud .market-portfolio{padding:4px!important;min-height:72px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #market-hud#market-hud .market-minimize{min-height:44px!important;min-width:44px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #market-hud#market-hud .market-value .pv-number{font-size:17px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #market-hud#market-hud .market-gain{display:block!important;font-size:8px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #market-hud#market-hud :is(.market-graph,.market-periods,.market-symbols,.market-stamp,.market-picker){display:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) :is(#duber-card#duber-card,#duber-progress#duber-progress):not([hidden]){position:fixed!important;top:calc(var(--web-header) + 94px)!important;right:var(--web-right)!important;left:calc(var(--web-left) + var(--web-map) + 8px)!important;bottom:auto!important;width:auto!important;max-height:142px!important;padding:5px!important;overflow:auto!important;transform:none!important;box-sizing:border-box!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #duber-card#duber-card :is(.duber-meta,.duber-reason,.duber-kicker,.duber-key,.duber-leg small){display:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #duber-card#duber-card .duber-head{padding:0!important;gap:4px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #duber-card#duber-card .duber-fare{font-size:18px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #duber-card#duber-card .duber-legs{padding:2px 0!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #duber-card#duber-card .duber-leg{padding:1px!important;font-size:10px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #duber-card#duber-card .duber-leg strong{font-size:10px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #duber-card#duber-card .duber-actions{display:flex!important;gap:5px!important;margin:0!important;padding:3px 0 0!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #duber-card#duber-card .duber-actions button{min-height:44px!important;height:44px!important;min-width:44px!important;flex:1!important;font-size:10px!important;padding:4px!important}
 html.phone-hud-ready.is-driving:not(.controller-active):has(#hud .map) #radio-mini#radio-mini.drive-radio:not([hidden]){display:flex!important;position:fixed!important;left:var(--web-left)!important;right:var(--web-right)!important;bottom:calc(var(--web-bottom) + var(--web-thumb))!important;top:auto!important;width:auto!important;max-width:none!important;height:44px!important;min-height:44px!important;padding:2px 6px!important;box-sizing:border-box!important;transform:none!important;overflow:hidden!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #radio-mini#radio-mini #radio-mini-open{flex:1!important;min-width:0!important;overflow:hidden!important;height:40px!important;padding:0!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #radio-mini#radio-mini #radio-mini-title{font-size:10px!important;white-space:nowrap!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #radio-mini#radio-mini img{width:24px!important;height:24px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #radio-mini#radio-mini .drive-radio-controls{display:flex!important;flex:none!important;gap:0!important;padding:0!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #radio-mini#radio-mini .drive-radio-controls button{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:10px!important;border:0!important;background:transparent!important;box-shadow:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #radio-mini#radio-mini :is(.drive-radio-help,#radio-mini-state,#drive-radio-shuffle-state){display:none!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud #recover{left:calc(var(--web-left) + 130px)!important;bottom:var(--web-bottom)!important;top:auto!important;min-height:44px!important;max-width:80px!important;font-size:8px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .bike-weight-controls{bottom:calc(var(--web-bottom) + 132px)!important;left:var(--web-left)!important;right:var(--web-right)!important}
 html.phone-hud-ready.is-driving:not(.controller-active) :is(#market-hud[hidden],#duber-card[hidden],#duber-progress[hidden],#destination-hud[hidden]){display:none!important}
}
@media (orientation:landscape) and (max-height:560px){
 html.phone-hud-ready.is-driving{--web-header:calc(90px + var(--web-top));--web-map:112px;--web-map-h:60px}
 html.phone-hud-ready.is-driving header{height:90px!important}
 html.phone-hud-ready.is-driving header #navigation#navigation{left:calc(var(--web-left) + 270px)!important;top:calc(var(--web-top) + 8px)!important;right:var(--web-right)!important;width:auto!important}
 html.phone-hud-ready.is-driving header #player-hud#player-hud{max-width:210px!important}
 html.phone-hud-ready.is-driving header .tools{align-self:flex-end!important;width:280px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #destination-hud#destination-hud:not([hidden]){max-height:44px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) :is(#duber-card#duber-card,#duber-progress#duber-progress):not([hidden]){top:calc(var(--web-header) + 6px)!important;left:calc(var(--web-left) + 124px)!important;right:calc(var(--web-right) + 140px)!important;max-height:132px!important}
 html.phone-hud-ready.is-driving:not(.controller-active):has(#hud .map) #radio-mini#radio-mini.drive-radio:not([hidden]){left:calc(var(--web-left) + 132px)!important;right:calc(var(--web-right) + 146px)!important;bottom:var(--web-bottom)!important}
}
@media (max-width:600px), (max-width:980px) and (max-height:560px), (pointer:coarse) and (max-width:1100px){
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud #recover{left:calc(50% - 38px)!important;bottom:calc(var(--web-bottom) + 48px)!important;max-width:76px!important;min-height:44px!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .controls #horn{display:block!important;position:fixed!important;left:calc(50% - 22px)!important;right:auto!important;top:auto!important;bottom:calc(var(--web-bottom) + 96px)!important;width:44px!important;min-height:44px!important;height:44px!important}
}
@media (orientation:portrait){
 /* Gameplay keeps its existing landscape gate; garage and phone remain scrollable. */
 html:not(.is-driving) #menu{max-height:100dvh!important;overflow-y:auto!important;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)!important;box-sizing:border-box!important}
 html #display-settings>div{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overflow-y:auto!important;box-sizing:border-box!important}
}
@media (max-width:600px), (max-width:980px) and (max-height:560px), (pointer:coarse) and (max-width:1100px){
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .controls{display:flex!important}
 html.phone-hud-ready.is-driving:not(.controller-active) #radio-mini#radio-mini .drive-radio-controls svg{width:20px!important;height:20px!important}
}
@media (max-width:600px), (max-width:980px) and (max-height:560px), (pointer:coarse) and (max-width:1100px){
 html.phone-hud-ready.is-driving header #navigation#navigation{display:flex!important;align-items:center!important}
 html.phone-hud-ready.is-driving:not(.controller-active):has(#hud .map) #radio-mini#radio-mini.drive-radio:not([hidden]){height:48px!important;min-height:48px!important}
 html.phone-hud-ready.is-driving header #player-hud#player-hud .player-stat>span{min-width:0!important;display:flex!important;flex-direction:column!important}
}
@media (orientation:landscape) and (min-width:560px) and (max-height:560px){
 html.phone-hud-ready.is-driving{--web-header:calc(72px + var(--web-top))}
 html.phone-hud-ready.is-driving header{display:flex!important;flex-direction:row!important;align-items:flex-start!important;height:72px!important;gap:6px!important}
 html.phone-hud-ready.is-driving header .drive-top-row{flex:1!important;min-width:0!important;height:44px!important}
 html.phone-hud-ready.is-driving header .tools{align-self:flex-start!important;width:280px!important;flex:0 0 280px!important}
 html.phone-hud-ready.is-driving header #navigation#navigation{top:calc(var(--web-top) + 46px)!important;left:var(--web-left)!important;right:auto!important;width:min(290px,45vw)!important;height:22px!important}
 html.phone-hud-ready.is-driving header #player-hud#player-hud{max-width:240px!important}
}

@media (orientation:landscape) and (max-height:340px){
 html.phone-hud-ready.is-driving{--web-map-h:44px}
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud .controls .wheel-area,
 html.phone-hud-ready.is-driving:not(.controller-active) #hud#hud #wheel{width:112px!important;height:112px!important}
}

@media (max-width:600px), (max-width:980px) and (max-height:560px), (pointer:coarse) and (max-width:1100px){
 html.phone-hud-ready.is-driving header .tools #open-radio{font-size:0!important;overflow:hidden!important}
 html.phone-hud-ready.is-driving header .tools #open-radio::after{content:"RADIO";font-size:8px;letter-spacing:.08em}
}

@media (max-width:600px), (max-width:980px) and (max-height:560px), (pointer:coarse) and (max-width:1100px){
 html.phone-hud-ready.is-driving header{background:transparent!important;box-shadow:none!important}
}