@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--lime:#d7ff43;--muted:#a8b2b4}*{box-sizing:border-box}body{margin:0;background:#101317;color:#fff;font-family:Barlow,Arial,sans-serif;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:none}button:focus-visible,a:focus-visible{outline:3px solid var(--lime);outline-offset:4px}#game{height:100svh;min-height:360px;position:relative;overflow:hidden;background:#72b9ca}canvas{width:100%;height:100%;display:block}header{position:absolute;top:0;left:0;width:100%;padding:25px 36px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#0b161c9c,transparent);z-index:3}.brand{font-style:italic;font-size:35px;font-weight:900;letter-spacing:-2px;color:#fff;text-decoration:none;line-height:.8}.brand span{display:block;font-size:8px;font-style:normal;letter-spacing:3px;margin-top:10px}.top-actions{display:flex;gap:12px;align-items:center}.top-actions button{background:#15232b80;border:1px solid #ffffff38;border-radius:5px;padding:9px 12px}.live{font-size:10px;letter-spacing:2px;color:var(--lime);margin-right:20px}.hud{position:absolute;top:113px;left:36px;display:flex;gap:30px}.hud small,.gear small,.boost-status small{display:block;font-size:10px;letter-spacing:2px;color:#d0dcdd;margin-bottom:5px}.hud strong{font-family:'Barlow Condensed',Arial,sans-serif;font-size:38px;line-height:1}.hud strong span{font-size:18px;color:#ccd4d4}.hud .time strong{font-size:29px}.circuit{position:absolute;right:36px;top:118px;text-align:right}.eyebrow{font-size:10px;letter-spacing:2.4px;color:var(--lime);font-weight:700}.circuit svg{display:block;width:160px;height:100px;margin-left:auto}.circuit path{fill:none;stroke:#ffffff65;stroke-width:5;stroke-linejoin:round}.circuit circle{fill:var(--lime);stroke:#1c363a;stroke-width:2}.circuit>span:last-child{font-size:9px;letter-spacing:2px}.telemetry{position:absolute;bottom:74px;left:50%;transform:translateX(-50%);display:flex;gap:22px;align-items:center;text-shadow:0 2px 15px #000}.gear{border-left:2px solid var(--lime);padding-left:12px}.gear b{font-size:36px}.speed strong{font-family:'Barlow Condensed',Arial,sans-serif;font-size:76px;line-height:.95;font-style:italic;font-weight:800}.speed>span{font-size:10px;margin-left:8px}.rev{height:4px;background:#ffffff40;margin-top:9px}.rev i{height:100%;display:block;background:var(--lime);width:0}.boost-status{width:90px}.boost-status>div{height:5px;background:#ffffff30;margin:9px 0}.boost-status i{height:100%;display:block;background:var(--lime)}.boost-status>span{font-size:8px;letter-spacing:1px;color:#c0cbcb}footer{position:absolute;bottom:0;width:100%;padding:17px 36px;background:#10171bec;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:#d0d8d8}footer b{color:#718085;font-weight:500;margin:0 5px}.controls{position:absolute;bottom:76px;left:28px;right:28px;display:flex;justify-content:space-between;pointer-events:none}.controls>div{display:flex;gap:10px;align-items:end}.controls button{pointer-events:auto;height:62px;min-width:62px;border-radius:12px;border:1px solid #ffffff50;background:#101b256e;backdrop-filter:blur(10px);font-size:12px;font-weight:700;user-select:none;-webkit-user-select:none}.controls .gas{height:85px;background:#d7ff43dd;color:#182215;border:0}.controls .boost{color:var(--lime)}.controls button.active{background:#fff;color:#111;transform:translateY(2px)}.overlay{position:absolute;inset:0;z-index:5;background:linear-gradient(90deg,#091216ed 0%,#091216c9 38%,#09121615 100%);display:flex;align-items:center;padding:80px max(7vw,30px) 40px}.intro h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(70px,9vw,132px);font-weight:900;line-height:.86;letter-spacing:-2px;margin:23px 0}.intro h1 em{color:var(--lime);font-style:italic}.intro p,.panel p{color:#bdc8cc;font-size:15px;line-height:1.65}.race-details{display:flex;gap:30px;margin:24px 0;font-size:9px;letter-spacing:1px;color:#bac5c7}.race-details b{display:block;color:white;font-size:25px;margin-bottom:3px}.primary{display:flex;align-items:center;justify-content:space-between;gap:50px;width:100%;background:var(--lime);color:#172016;border:0;border-radius:3px;padding:18px 22px;font-size:12px;font-weight:800;letter-spacing:1px}.primary:hover{background:#e5ff80}.primary span{font-size:22px}.auto{display:flex;gap:8px;align-items:center;font-size:12px;color:#c5d0d2;margin-top:17px}.auto input{accent-color:var(--lime);width:16px;height:16px}.intro .help{font-size:11px;color:#97a6ab;line-height:1.8}.edition{position:absolute;right:36px;bottom:70px;font-size:13px;font-weight:700;letter-spacing:2px;text-align:right}.edition span{font-size:8px;color:#b1c2c6}#best{font-size:11px;color:var(--lime)}.hidden{display:none}.panel{max-width:380px;margin:auto;width:100%;padding:30px;background:#121d22f5;border:1px solid #ffffff20;border-radius:12px}.panel h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:48px;margin:15px 0}.secondary{width:100%;padding:13px;background:none;border:1px solid #ffffff40;margin-top:12px}#notice{position:absolute;top:31%;width:100%;text-align:center;font-size:36px;font-weight:800;font-style:italic;text-shadow:0 3px 20px #000;color:var(--lime)}
@media(max-width:700px){header{padding:20px}.brand{font-size:29px}.live{display:none}.hud{top:95px;left:20px;gap:20px}.hud strong{font-size:30px}.hud .time strong{font-size:24px}.circuit{right:15px;top:161px}.circuit svg{width:100px;height:65px}.circuit .eyebrow{font-size:7px;letter-spacing:1px}.circuit>span:last-child{display:none}.telemetry{bottom:174px;gap:14px}.speed strong{font-size:62px}.controls{left:15px;right:15px;bottom:65px}.controls>div{gap:7px}.controls button{min-width:53px;height:64px;font-size:10px}.controls .gas{height:85px}.controls .boost{min-width:47px}.boost-status{width:70px}footer{padding:15px;font-size:7px}.keyboard-hint{display:none}.overlay{padding:90px 28px 30px;background:linear-gradient(90deg,#091216ed,#09121680)}.intro h1{font-size:84px}.intro>.eyebrow{font-size:8px;letter-spacing:1.5px}.intro p{font-size:13px}.edition{display:none}.race-details{margin:20px 0}.intro .help{font-size:10px}.primary{padding:15px 20px}}
@media(max-height:600px){header{padding:12px 22px}.hud{top:75px}.circuit{top:80px}.intro h1{font-size:65px;margin:14px 0}.intro p{margin:8px 0}.race-details{margin:12px 0;position:absolute;left:55%;top:42%}.intro .help{display:none}.intro>.eyebrow{font-size:8px}.overlay{padding-top:60px}.telemetry{bottom:58px}.controls{bottom:52px}.intro{max-width:340px}.edition{bottom:55px}}
@media(max-width:700px) and (min-height:601px){.telemetry{bottom:265px;background:#14202790;padding:10px 14px;border-radius:10px}.speed strong{font-size:48px}}
.circuit svg{width:180px;height:112px;filter:drop-shadow(0 2px 5px #10212b80)}
.circuit #mapDot{fill:var(--lime);stroke:white;stroke-width:1.8}
.circuit>span.map-legend{display:block;font-size:9px;letter-spacing:1px;color:#e1e8e9}
.map-legend b{color:var(--lime);font-size:13px;margin-right:3px}.map-legend i{color:#ed8c83;font-size:12px;font-style:normal;margin:0 3px 0 10px}
.boost-status{transition:filter .2s}.boost-status.engaged{filter:drop-shadow(0 0 7px #d7ff4380)}.boost-status.engaged>span{color:var(--lime)}
@media(max-width:700px){.circuit svg{width:132px;height:82px}.circuit .map-legend{font-size:7px}.circuit{top:153px}}
@media(max-height:600px){.telemetry{top:72px;bottom:auto;gap:12px}.speed strong{font-size:38px}.gear b{font-size:23px}.gear small,.boost-status small{font-size:8px}.boost-status{width:68px}.speed>span{font-size:8px}.rev{margin-top:4px}.keyboard-hint{display:none}.circuit svg{height:80px;width:135px}.circuit{top:75px}.circuit .eyebrow{font-size:8px}}
/* Keep touch steering from selecting page text or opening iOS callouts. */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.brand{letter-spacing:-1.6px}.brand span{letter-spacing:2px}
.intro h1{font-size:clamp(70px,8.3vw,120px)}
@media(max-width:700px){.intro h1{font-size:76px}.brand{font-size:28px}.brand span{font-size:7px;letter-spacing:1.6px}}
@media(max-height:600px){.intro h1{font-size:62px}}