/* A compact, flow-based HUD. No independently positioned status labels. */
.motion-tuning{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}.motion-tuning label{display:flex;align-items:center;gap:8px;font-size:14px}.motion-tuning select{min-height:44px;padding:8px;background:#fff;border:1px solid #7040ab;border-radius:10px;color:#43215f}.motion-tuning input{width:22px;height:22px;accent-color:#7040ab}
#motion-test{padding:12px;background:#f1e9fa;border-radius:14px;color:#43215f}#motion-test>div{display:flex;gap:12px;align-items:center}#motion-test meter{width:100%;height:24px}#motion-diagnostic{display:block;min-height:32px;font-size:13px;line-height:1.4;margin-top:8px}#motion-standalone{display:block;margin:12px 0;padding:14px;background:#7040ab;color:#fff;border-radius:12px;text-align:center}#motion-standalone[hidden]{display:none}
body.racing #hud .race-top{inset:10px 12px auto!important;width:auto!important;max-width:none!important;min-height:58px!important;box-sizing:border-box;gap:clamp(8px,2vw,20px)!important;padding:6px 10px!important}
#hud .race-top>.position,#hud .race-top>.laps,#hud .race-top>.timing{position:static!important;transform:none!important;width:auto!important;min-width:0;margin:0!important;padding:0!important;flex:none}
#hud .race-top small,#hud .race-top .laps>span,#hud .race-top .timing>span{letter-spacing:.3px!important;line-height:1.2!important;white-space:nowrap}
#hud .race-top .position>b{font-size:32px!important}#hud .race-top .laps b,#hud .race-top .timing b{font-size:20px!important;font-variant-numeric:tabular-nums;white-space:nowrap}
#hud #motion-quick{position:static!important;inset:auto!important;transform:none!important;min-width:44px;max-width:none;margin-left:auto;padding:8px!important;font-size:11px;white-space:nowrap}
#hud .race-top #pause{margin-left:0!important;min-width:44px;min-height:44px}
#hud #flight-height{position:static!important;inset:auto!important;display:block;font-size:12px;line-height:1.3;padding:4px 0 0;background:none!important;white-space:nowrap}
#hud #flight-height[hidden]{display:none!important}
#touch #flight-controls kbd{display:none!important}#touch #flight-controls button{gap:1px!important}
#hud #flight-height{font-size:11px!important;white-space:normal;overflow-wrap:anywhere}
body.racing #race-mode,body.racing #guidance-badge,body.racing #toast{display:none!important}
#hud .minimap{top:80px!important;width:90px!important;height:65px!important}#hud .minimap canvas{width:90px!important;height:65px!important}
#hud #race-condition:not([hidden]){top:80px!important;width:max-content;max-width:calc(100% - 32px)!important;padding:8px 12px!important;box-sizing:border-box}
#hud #warning-title{font-size:16px!important;line-height:1.2}#hud #warning-detail{display:none}#hud #warning-distance{font-size:16px!important}
#hud .speedbox{width:104px!important;padding:8px 10px!important;box-sizing:border-box}#hud .speedbox>b{font-size:32px!important}#hud .speedbox small{letter-spacing:0!important}
body.racing #hud .race-bottom{bottom:172px!important}
@media(max-width:900px),(max-height:620px){#hud .minimap,#hud .race-top .timing{display:none!important}}
@media(max-width:430px){body.racing #hud .race-top{gap:8px!important;left:8px!important;right:8px!important;padding:6px 8px!important}#hud .race-top .position small{display:none}#hud .race-top .position>b{font-size:27px!important}#hud .race-top .laps b{font-size:18px!important}#hud .race-top .laps>span{font-size:8px!important}#hud #motion-quick{font-size:10px;max-width:80px;white-space:normal}#hud .race-top .position{gap:3px!important}}
@media(max-height:500px){body.racing #hud .race-bottom{bottom:110px!important}#hud .speedbox{width:90px!important}#hud .speedbox>b{font-size:26px!important}#hud .speedbox small{display:none}#hud #flight-height{font-size:11px}#hud #race-condition:not([hidden]){max-width:50%!important}#hud #motion-quick{max-width:110px}.practising #hud #motion-quick{display:none}}
body.motion-ready #touch .steering-controls{display:none!important}body.motion-ready #touch{justify-content:space-between!important}
/* Change ink and background together: an active steering arrow must never
   fade through dark ink on a dark background. Keep the small physical press. */
#touch button{transition-property:transform}
/* Narrow portal frames need actual content rows, not a 70px row containing
   both a 64px start button and a 65px track card. Scrolling beats overlap. */
@media(max-width:600px){
 body.racing #hud .race-bottom{bottom:172px!important}
 body.live-garage #menu{grid-template-rows:auto minmax(360px,1fr) auto auto!important;overflow:auto!important}
 #garage-stage{display:grid;grid-template-rows:minmax(170px,1fr) auto;min-height:360px!important}
 #garage-stage #garage-canvas{position:relative;width:100%!important;height:100%!important;min-height:170px!important;grid-row:1}
 #garage-stage #garage-caption{position:static!important;grid-row:2;height:auto!important;min-height:0;margin:0!important;padding:8px 0!important;width:auto!important}
 #garage-stage #garage-partner{top:30px;bottom:auto!important;height:110px!important;max-height:110px!important}
 #garage-stage .car-nav{top:60px!important}
 #car-dots{display:grid!important;grid-template-columns:repeat(5,44px);gap:6px!important;justify-content:center}
 #car-dots button{width:44px!important;height:44px!important}
 #garage-launch{min-height:130px;flex:none;align-self:start;margin:0!important}
 #garage-foot{position:static!important}
}

/* Keep the car and road clear on narrow portrait screens. The speed panel
   shares the upper HUD row with warnings, away from the driving controls. */
@media(max-width:600px) and (orientation:portrait){
 body.racing:not(.practising) #hud .race-bottom{top:80px;bottom:auto!important;right:12px}
 body.racing:not(.practising) #hud .speedbox{width:90px!important}
 body.racing:not(.practising) #hud #race-condition:not([hidden]){left:12px!important;transform:none;max-width:calc(100% - 126px)!important}
}

/* A fixed pedal must not overflow the narrower Kids grid column. */
.touch-ui #touch .pedal-controls button{max-width:100%}