/* Handlebar dashboard. The old bottom meters stay in the DOM (game logic and tests read them) but are hidden. */
.hud .bottom.has-dash{justify-content:center;align-items:flex-end}
.hud .bottom.has-dash>.meters,.hud .bottom.has-dash>.speed{display:none}
.dash{width:min(760px,96vw);margin:0 auto calc(-1 * clamp(14px,2.2vw,30px));filter:drop-shadow(0 -6px 18px rgba(0,0,0,.55));text-shadow:none}
.dash svg{display:block;width:100%;height:auto;overflow:visible}
.dash .cowl{fill:url(#dashBody)}
.dash .cowl-rim{fill:none;stroke:url(#dashChrome);stroke-width:3}
.dash .bezel{fill:url(#dashChrome)}
.dash .face{fill:url(#dashFace);stroke:#1a1714;stroke-width:2}
.dash .tick{stroke:#2a241c;stroke-width:1.4}.dash .tick.big{stroke-width:2.6}
.dash .redline{fill:none;stroke:#c8321e;stroke-width:6}
.dash .num{font:700 10px/1 Impact,"Arial Narrow",sans-serif;fill:#221d16;text-anchor:middle}
.dash .unit{font:700 7px/1 Arial,sans-serif;letter-spacing:.12em;fill:#4a4134;text-anchor:middle}
.dash .needle{transition:transform .08s linear}.dash .needle path{fill:#d4361f;stroke:#5a1408;stroke-width:.8}
.dash .hub{fill:#1b1816;stroke:#8a8172;stroke-width:1.5}
.dash .pod rect{fill:#0b0d0a;stroke:#5b544a;stroke-width:2}
.dash .place{font:900 36px/1 Impact,"Arial Narrow",sans-serif;fill:var(--amber,#ffb21c);text-anchor:middle;paint-order:stroke;stroke:#3a2400;stroke-width:1}
.dash .podlabel{font:800 8px/1 Arial,sans-serif;letter-spacing:.24em;fill:#8a8172;text-anchor:middle}
.dash .km{font:900 15px/1 Impact,"Arial Narrow",sans-serif;fill:#efe6d0;text-anchor:middle;letter-spacing:.04em}
.dash .who{font:900 15px/1 Impact,"Arial Narrow",sans-serif;fill:#f1e7cf;letter-spacing:.03em}
.dash .rival .who,.dash .rival .barlabel{text-anchor:end}
.dash .barlabel{font:800 7px/1 Arial,sans-serif;letter-spacing:.16em;fill:#9c9382}
.dash .dtrack{fill:#2a2622;stroke:#000;stroke-width:1}
.dash .dfill{fill:#8fd14f}.dash .dfill[data-tone=warn]{fill:#f2b21c}.dash .dfill[data-tone=low]{fill:#e0381f}
.dash .dfill.bike{fill:#d9d2c2}.dash .dfill.bike[data-tone=warn]{fill:#f2b21c}.dash .dfill.bike[data-tone=low]{fill:#e0381f}
.dash .dlimit{fill:#3b1712;opacity:.85}
.dash .rival.empty{opacity:.45}
/* The top-centre rival chip duplicates the dashboard's rival readout. */
.hud .bottom.has-dash~#targetHud,body:has(.has-dash) #targetHud{display:none}
@media(pointer:coarse){.dash{width:min(440px,50vw);margin-bottom:0}}
@media(max-width:700px){.dash{width:min(520px,62vw)}}
/* Keep status callouts (slipstream, near miss) clear of the console. */
body:has(.has-dash) #status{bottom:calc(min(760px,96vw) * .23 + 12px)}
@media(pointer:coarse){body:has(.has-dash) #status{bottom:calc(min(440px,50vw) * .23 + 70px)}}
@media(max-width:700px) and (pointer:fine){body:has(.has-dash) #status{bottom:calc(min(520px,62vw) * .23 + 12px)}}
.dash .digits{font:900 14px/1 Impact,"Arial Narrow",sans-serif;fill:#1b1712;text-anchor:middle}


 .hud .bottom.has-dash{padding-bottom:0}
 /* Capped by window height so the console never reaches the rider: about a quarter of the screen tall. */
 .hud .bottom.has-dash .dash{width:min(92vw,100vh);max-width:none;margin-bottom:0;flex-shrink:0}
 .dash .who{font-size:18px}.dash .barlabel{font-size:8px;letter-spacing:.08em;fill:#d8cebc}
 .dash .digits{display:none}.dash .km{font-size:17px}.dash .podlabel{font-size:9px;fill:#d8cebc}
 .dash #dashCenterSpeed{font-size:30px;fill:#fff2d2}.dash #dashKm{font-size:12px}
 body:has(.has-dash) #status,body:has(.has-dash) #recoveryHud,body:has(.has-dash) #nitroHud{bottom:calc(min(92vw,100vh) * .2053 + 16px + env(safe-area-inset-bottom,0px))}
 @media(pointer:coarse){body:has(.has-dash) #status,body:has(.has-dash) #recoveryHud,body:has(.has-dash) #nitroHud{bottom:calc(min(92vw,100vh) * .2053 + 70px + env(safe-area-inset-bottom,0px))}}
 @media(orientation:landscape){
 body:has(.touch.custom-layout) .hud .bottom.has-dash .dash{width:min(calc(100vw - clamp(310px,100vh,400px)),var(--phone-dash-width,100vw));transform:translateX(var(--phone-dash-offset,0px))}
 body:has(.touch.custom-layout) .dash #dashCenterSpeed{font-size:34px}
 body:has(.touch.custom-layout) .dash .who{font-size:22px}
 body:has(.touch.custom-layout) #status,body:has(.touch.custom-layout) #recoveryHud,body:has(.touch.custom-layout) #nitroHud{bottom:calc((100vw - clamp(310px,100vh,400px)) * .2053 + 22px)}
 }
 
/* Desktop: sit flush on the bottom edge (cancel the HUD's edge padding). Phones keep their own spacing. */
@media(pointer:fine){.hud .bottom.has-dash .dash{margin-bottom:calc(-1 * clamp(14px,2.2vw,30px))}}