*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#02030b;color:#eff6ff;font-family:'Courier New',monospace}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #fff;outline-offset:5px}[hidden]{display:none!important}#cabinet{position:relative;width:100%;height:100%;min-height:420px;overflow:hidden;background:#030719}#game{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5}#splash{background:#020309;flex-direction:column;padding:16px;gap:18px}.cover{position:relative;width:min(calc(100vh - 114px),680px,94vw);aspect-ratio:1;box-shadow:0 0 90px #10225944}.cover>img{display:block;width:100%;height:100%;object-fit:contain}.start-panel{position:absolute;top:48%;width:100%;text-align:center}.primary{display:block;margin:0 auto;background:#e6f6ff;color:#071532;border:0;border-bottom:5px solid #39b7ef;padding:15px 48px;font-size:22px;font-weight:bold;letter-spacing:5px;box-shadow:6px 6px 0 #051a52}.primary:hover{background:#82e2ff;transform:translateY(-2px)}.start-panel p{font-size:12px;letter-spacing:1px;margin:13px 0 0;text-shadow:1px 2px 2px #000}.instructions{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;font-size:14px;color:#99acc8;max-width:650px}.instructions small{width:100%;text-align:center;font-size:12px;color:#75849e}kbd{display:inline-block;padding:3px 7px;border:1px solid #475572;color:#e4f2ff;margin-right:5px}#hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:24px 4%;background:linear-gradient(#020612e8,transparent);pointer-events:none}#hud span{display:block;font-size:13px;letter-spacing:2px;color:#8eb8d8}#hud strong{display:block;font-size:clamp(25px,4vw,48px);font-weight:900;letter-spacing:2px;text-shadow:3px 3px #0a1632}.right{text-align:right}.hud-title{text-align:center;font-size:14px;letter-spacing:5px;color:#b7d5ef;line-height:1.6}.hud-title b{font-size:18px;color:#68d8ff;letter-spacing:3px}#dashboard{position:absolute;bottom:0;left:0;right:0;height:100px;background:#030914ed;border-top:2px solid #264675;display:flex;align-items:center;gap:36px;padding:12px 4%}.speed{display:flex;align-items:baseline;gap:8px;min-width:156px}.speed strong{font-size:50px;letter-spacing:-3px;color:#ccefff}.speed span{font-size:12px;color:#8da5c4}.track{flex:1}.track-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;color:#8faccc}.track-line{height:5px;background:#1a2946;margin-top:11px;position:relative}#progress{height:100%;width:0;background:#56d6ff}#marker{position:absolute;top:-3px;left:0;width:5px;height:11px;background:#fff}.track p{font-size:11px;letter-spacing:1px;color:#7385a3;margin:12px 0 0}.track p span{color:#70cfff}.buttons{display:flex;gap:10px;align-items:center}.buttons button,.secondary{border:1px solid #355277;background:#071226;color:#b6d0ea;padding:12px;font-size:12px}.buttons button:hover,.secondary:hover{border-color:#77d9ff;color:white}#pause{font-size:20px;min-width:44px}#message{position:absolute;top:25%;left:0;right:0;text-align:center;color:#8ce9ff;font-size:clamp(20px,3vw,36px);font-weight:900;letter-spacing:4px;text-shadow:3px 3px #050920;pointer-events:none}#overlay{background:#010512b8;backdrop-filter:blur(4px)}.result{text-align:center;padding:32px;max-width:600px}.result>p:first-child{color:#67d5ff;font-size:14px;letter-spacing:5px}.result h1{font-size:clamp(30px,6vw,64px);line-height:1.1;margin:22px 0;letter-spacing:-2px}.result>p{line-height:1.7;color:#aabed8;font-size:16px}.result .primary{margin:28px auto 20px;font-size:18px}.result .secondary{margin:8px;padding:12px 24px}#touch{position:absolute;bottom:111px;left:12px;right:12px;display:flex;gap:10px;z-index:3}#touch button{padding:18px;background:#0c1c36bb;border:1px solid #4b699d;touch-action:none;user-select:none}#touch button:nth-child(3){margin-left:auto}@media(pointer:coarse){#touch:not([hidden]){display:flex}}@media(pointer:fine){#touch{display:none!important}}@media(max-width:600px){#hud{padding:18px 14px}.hud-title{display:none}#dashboard{gap:15px;padding:10px 14px;height:95px}.speed{min-width:86px;display:block}.speed strong{font-size:35px}.speed span{display:block;font-size:10px}.track p{font-size:9px;line-height:1.5}.buttons{flex-direction:column;gap:5px}.buttons button{padding:8px;font-size:10px}#pause{font-size:16px;padding:4px}.instructions{gap:10px;font-size:11px}.instructions small{font-size:11px}.track-label{font-size:9px}#stage{display:none}.cover{width:min(calc(100svh - 140px),94vw)}.start-panel .primary{padding:12px 34px;font-size:18px}.start-panel p{font-size:9px}#cabinet{min-height:360px}}@media(prefers-reduced-motion:reduce){.primary:hover{transform:none}}

@media(pointer:coarse){.instructions>span{display:none}.instructions small{font-size:12px}.instructions small::after{content:" · Hold the on-screen buttons to drive"}#touch button{min-width:58px;min-height:58px;border-bottom:4px solid #385679;border-radius:4px;font-weight:bold}#touch button:active{background:#28699a;color:white}#touch button:last-child{background:#12486ce0;border-color:#67c7e8}#touch button:nth-child(3){background:#48283de0}body{overscroll-behavior:none}}
@media(max-height:500px) and (orientation:landscape){#dashboard{height:70px}#touch{bottom:80px}#hud{padding:10px 3%}#hud strong{font-size:26px}.speed strong{font-size:34px}.track p{margin-top:8px}.cover{width:min(calc(100svh - 70px),80vw)}#splash{gap:8px;padding:7px}.instructions small{font-size:10px}.instructions>span{display:none}.start-panel p{font-size:9px}.start-panel .primary{font-size:16px;padding:9px 28px}.start-panel{top:48%}}

#message.countdown{top:29%;font-size:clamp(64px,13vw,116px);line-height:1;font-weight:900;letter-spacing:4px;color:#e3f6ff;text-shadow:5px 5px 0 #173d73,0 0 28px #3c9ddf80}

/* Mobile driving controls: hold with two fingers without selecting text. */
#touch,#touch *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;touch-action:none}

/* Artist branding, centred independently of the timer and distance widths. */
#hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;column-gap:16px}
#hud .hud-title{display:block;line-height:0;align-self:start;justify-self:center;width:clamp(150px,24vw,260px)}
.hud-title img{display:block;width:100%;height:auto;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
@media(max-width:600px) and (orientation:portrait),(pointer:coarse) and (orientation:portrait){
 #hud{grid-template-columns:1fr 1fr;row-gap:8px;padding-top:max(8px,env(safe-area-inset-top))}
 #hud .hud-title{grid-column:1 / -1;grid-row:1;width:clamp(160px,48vw,220px)}
 #hud>div:first-child{grid-column:1;grid-row:2}
 #hud>.right{grid-column:2;grid-row:2}
}
@media(max-height:500px) and (orientation:landscape){#hud .hud-title{width:clamp(130px,24vw,180px)}}

.result-actions{display:flex;justify-content:center;align-items:stretch;gap:12px;margin:24px 0 8px}
.result .result-actions .secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin:0;padding:14px 16px;min-height:48px;font-size:14px;line-height:1.4;text-decoration:none}
.result-actions svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.result .result-actions .listen-link{background:#102b42;border-color:#5fcdeb;color:#d5f5ff}
.result .result-actions .listen-link:hover{background:#18415d;border-color:#a4efff}
.result-actions a:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:600px){.result-actions{flex-direction:column}.result .result-actions .secondary{width:100%}}