@font-face{font-family:HUD;src:url('./fonts/Kanit-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:block}
:root{--hud-white:#fff;--hud-gold:#ffce40;--hud-cyan:#00e8c6;--hud-green:#48eb7c;--hud-amber:#ffb020;--hud-red:#ff4660;--hud-ink:#070c1a;--hud-shadow:#000;--o:1px;--hud-outline:calc(var(--o)*-1) 0 0 var(--hud-ink),var(--o) 0 0 var(--hud-ink),0 calc(var(--o)*-1) 0 var(--hud-ink),0 var(--o) 0 var(--hud-ink),calc(var(--o)*-1) calc(var(--o)*-1) 0 var(--hud-ink),var(--o) calc(var(--o)*-1) 0 var(--hud-ink),calc(var(--o)*-1) var(--o) 0 var(--hud-ink),var(--o) var(--o) 0 var(--hud-ink)}
.font-pending .stage{visibility:hidden}
html body,.stage *{font-family:HUD,sans-serif!important;font-style:italic!important;font-weight:900!important;font-synthesis:none;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
.stage{color:var(--hud-white);user-select:none}
.stage p,.stage h1,.stage h2,.stage strong,.stage .eyebrow,.stage .tag,.stage .notice,.stage label,.stage .build{--o:1px;text-shadow:var(--hud-outline)}
.stage button{color:var(--hud-white);--o:1px;text-shadow:var(--hud-outline)}
.stage select{color:var(--hud-white)}
#start-screen .brand,#start-screen .brand span{color:var(--hud-white);--o:2px;text-shadow:var(--hud-outline)}
#start-screen .eyebrow,#result-screen .eyebrow{color:var(--hud-cyan)}
#records-button,#record-result,#ending-finish{color:var(--hud-gold)}
#records-panel{font-family:HUD,sans-serif;font-style:italic;font-weight:900;color:var(--hud-white)}
#records-panel p{line-height:1.6;font-size:13px}#records-panel button{font:inherit}
.race-instruments{color:var(--hud-white);text-shadow:none}
.race-clock>span{color:#c6daf0;--o:1px;text-shadow:var(--hud-outline)}
.race-clock strong{--o:1px;color:var(--hud-white);text-shadow:var(--hud-outline),2px 2px 0 var(--hud-shadow);letter-spacing:-.01em;white-space:nowrap;font-size:34px;width:max-content;line-height:1.15}
.race-clock .time-alert{color:var(--hud-red);--o:1px;text-shadow:var(--hud-outline)}
.race-route>span{color:var(--hud-cyan);--o:1px;text-shadow:var(--hud-outline);font-size:12px;white-space:nowrap}
.dial b{color:var(--hud-gold);font-size:26px;top:70%;text-shadow:none}
.dial small{color:#c6daf0;font-size:9px;text-shadow:none}
.dial svg text{font-size:8px;letter-spacing:-.02em;text-shadow:none}
.race-clock .num-digit,.race-clock .num-mark,.num-digit,.num-mark{display:inline-block!important;font-size:inherit!important;color:inherit!important;line-height:inherit!important;text-align:center;vertical-align:baseline}
.num-digit{width:.68em}.num-mark{width:.27em}
#split-delta{--o:2px;top:38%!important;white-space:nowrap;text-shadow:var(--hud-outline);color:var(--hud-white);opacity:0;pointer-events:none}
#split-delta .delta__label{display:block;color:var(--hud-cyan);font-size:14px;line-height:1.4;text-shadow:var(--hud-outline)}
#split-delta .delta__number{font-size:clamp(36px,10vw,48px);line-height:1.15;text-shadow:var(--hud-outline),4px 4px 0 var(--hud-shadow);white-space:nowrap}
#split-delta .delta__arrow{display:inline-block;transform:skewX(-11deg);margin-right:.08em;font-size:inherit;vertical-align:baseline}
#split-delta .delta__value{display:inline-block;font-size:inherit}
#split-delta[data-kind=faster]{color:var(--hud-green)}#split-delta[data-kind=slower]{color:var(--hud-amber)}#split-delta[data-kind=loss]{color:var(--hud-red)}#split-delta[data-kind=equal]{color:var(--hud-white)}
#split-delta.is-on{animation:split-pop 1.57s linear both;will-change:transform,opacity}
@keyframes split-pop{0%{opacity:0;transform:scale(1.15);animation-timing-function:ease-out}7.64%{opacity:1;transform:scale(1)}84.08%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
#opening strong{color:var(--hud-white);--o:3px;text-shadow:var(--hud-outline)}
#ending-finish{--o:2px;text-shadow:var(--hud-outline)}
.ending-result #result-screen{text-shadow:none}.ending-result #result-screen h2{color:var(--hud-gold)}
.pause-controls{max-width:100%;flex-wrap:wrap}.pause-controls button{font-size:12px}.pause-controls .pause-label{font-size:11px}
@media(max-width:350px),(max-height:620px){.race-clock strong{font-size:30px}.dial b{font-size:23px}.race-route>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){#split-delta.is-on{animation-name:split-fade}@keyframes split-fade{0%,84.08%{opacity:1}100%{opacity:0}}}
/* UI symbols are geometry, so no second font is needed for missing glyphs. */
.pause-icon{display:inline-block;width:12px;height:18px;border-left:4px solid currentColor;border-right:4px solid currentColor;vertical-align:middle}
.route-line .finish-flag{top:-8px;right:-10px;width:12px;height:16px;border-left:2px solid #fff1d0}
.finish-flag:after{content:'';position:absolute;top:0;left:0;width:10px;height:9px;background:#fff1d0;clip-path:polygon(0 0,100% 20%,100% 80%,0 100%)}
/* Larger gold speed readout; white elapsed time retains its current position. */
.dial b{top:66%;font-size:26px;line-height:1}.dial small{top:87%;font-size:7px;line-height:1}
@media(max-width:350px),(max-height:620px){.dial b{font-size:23px}.dial small{font-size:6px}}

#split-delta .delta__label .delta__versus{display:inline;color:var(--hud-white);font-size:inherit;text-transform:none}

/* Unboxed racing rank: colored lettering and a short speed underline. */
.finish-grade{display:inline-block;position:relative;min-width:1.6em;padding:0 .08em .12em;background:none;border:0;border-radius:0;font:italic 900 24px HUD,sans-serif!important;text-align:center;text-shadow:0 2px 2px #102438,0 0 8px #10243899;line-height:1!important;box-sizing:border-box}
.finish-grade:after{content:"";position:absolute;left:18%;right:10%;bottom:0;height:2px;background:currentColor;transform:skewX(-24deg);opacity:.8}