html,body { height:auto; min-height:100%; overflow:auto; overscroll-behavior:auto; }
body { --turbo-cyan:#3df2ff; --turbo-pink:#ff2e88; --turbo-yellow:#ffd438; background:#070814; color:#f3f4fb; user-select:text; font-family:'Outfit',sans-serif; }
[hidden] { display:none !important; }
a { text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
:focus-visible { outline:2px solid var(--turbo-cyan); outline-offset:5px; }
.page-skip { position:fixed; top:12px; left:16px; padding:12px; background:var(--turbo-yellow); color:#070814; z-index:100; transform:translateY(-160%); }
.page-skip:focus { transform:none; }
.arcade-header { max-width:1440px; margin:auto; padding:22px 5%; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ffffff16; }
.arcade-header img { width:145px; height:52px; object-fit:contain; }
.arcade-header>a:last-child { color:#c4bfd3; font-size:14px; }
.arcade-header span { margin-left:24px; color:var(--turbo-cyan); }
.arcade-hero { position:relative; max-width:1600px; min-height:680px; margin:auto; overflow:hidden; background:#090919; }
.hero-night { position:absolute; inset:0; background:linear-gradient(90deg,#070814 0%,#070814dc 29%,#07081450 49%,#07081400 68%),url('./assets/turbo-banner-world.webp') 67% center / cover; }
.hero-racer { position:absolute; z-index:1; display:block; width:61%; height:auto; right:0; top:185px; pointer-events:none; filter:drop-shadow(0 18px 18px #03031680); }
.arcade-copy { position:relative; z-index:2; padding:55px max(5%,calc((100% - 1296px)/2)) 75px; max-width:900px; }
.arcade-kicker { margin:0 0 20px; color:#aeb9cf; font:11px/1.5 'Share Tech Mono',monospace; letter-spacing:.14em; }
.arcade-kicker i { display:inline-block; width:6px; height:6px; margin-right:10px; background:var(--turbo-yellow); box-shadow:0 0 12px #ffd43880; }
#garage h1 { margin:0 0 22px; line-height:1; }
#garage h1 img { display:block; width:min(450px,100%); height:auto; margin-left:-8px; filter:drop-shadow(0 8px 28px #db1ea94a); }
.arcade-tagline { margin:0 0 20px; font:400 clamp(27px,2.8vw,39px)/1.2 'Audiowide',sans-serif; letter-spacing:-.045em; }
.arcade-tagline em { font-style:normal; color:#fff; background:linear-gradient(180deg,#fff 5%,#c0edff 40%,#272471 47%,#fd75c3 72%,#fff 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.arcade-intro { max-width:400px; font-size:17px; line-height:1.65; color:#d1cadf; }
.arcade-actions { display:flex; align-items:center; gap:30px; margin-top:28px; }
.race-button { display:inline-flex; min-height:58px; padding:16px 24px; align-items:center; justify-content:space-between; gap:42px; border:1px solid #cbffff; border-radius:12px 4px 12px 4px; color:#06111c; background:linear-gradient(#d5ffff,#6ee1e8); font-size:16px; font-weight:600; box-shadow:inset 0 2px 0 #fff9,inset 0 -4px 0 #24677966,0 4px 0 #1d3a4b,0 0 32px #3df2ff22; transition:filter .2s,transform .2s; }
.race-button:hover { filter:brightness(1.12); transform:translateY(-2px); }
.race-button:disabled { opacity:.6; cursor:wait; }
.score-link { font-size:14px; border-bottom:1px solid #ffffff50; padding:8px 0; }
.score-link span { color:#fa75be; margin-left:12px; }
.play-note { margin-top:22px; font:10px/1.5 'Share Tech Mono',monospace; letter-spacing:.07em; color:#b5aec7; }
.play-note b { margin:0 10px; color:#fa75be; }
.best-readout { position:absolute; z-index:2; right:6%; top:48px; border-left:2px solid #ff75bb; padding:3px 0 3px 18px; background:#0a07152b; text-shadow:0 2px 15px #080713; }
.best-readout span,.best-readout small { display:block; color:#d1c6e1; font:10px/1.6 'Share Tech Mono',monospace; letter-spacing:.1em; }
.best-readout strong { display:block; font:34px/1.4 'Audiowide',sans-serif; color:#f5e9ff; font-variant-numeric:tabular-nums; }
.best-readout small { font-size:10px; letter-spacing:0; }
.hero-coordinate { position:absolute; bottom:28px; right:6%; color:#c3b5d4; font:10px 'Share Tech Mono',monospace; letter-spacing:.12em; }
.launch-status { max-width:430px; color:#ffb9d6; font-size:14px; }
.launch-status:empty { display:none; }
.arcade-ticker { display:flex; gap:34px; align-items:center; justify-content:center; padding:18px 5%; border-top:1px solid #ff2e8844; border-bottom:1px solid #3df2ff33; background:linear-gradient(90deg,#151022,#0a1525,#151022); color:#bdc7db; font:11px 'Share Tech Mono',monospace; letter-spacing:.1em; }
.arcade-ticker i { width:4px; height:4px; background:var(--turbo-yellow); box-shadow:0 0 8px #ffd43888; transform:rotate(45deg); }
.arcade-lower { max-width:1440px; padding:64px 5% 56px; margin:auto; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:start; gap:44px 48px; }
.score-panel h2,.how-panel h2,.forms-guide h2 { width:fit-content; margin:0; font:400 clamp(27px,2.6vw,35px)/1.2 'Audiowide',sans-serif; letter-spacing:-.04em; color:#f3f4fb; }
.score-panel h2,.how-panel h2 { background:linear-gradient(180deg,#fff 10%,#d1f5ff 44%,#6e709c 49%,#ead2eb 68%,#fff 93%); background-clip:text; -webkit-text-fill-color:transparent; }
.score-panel { min-width:0; padding:26px; border:1px solid #73748c70; border-top-color:#b2c4df80; border-radius:22px 5px 22px 5px; background:radial-gradient(ellipse at 0 0,#ff2e8814,transparent 65%),linear-gradient(145deg,#232237,#101420 55%,#111223); box-shadow:inset 0 1px 0 #ffffff1f,0 8px 0 #030510,0 18px 50px #0004; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.panel-heading .arcade-kicker { margin-bottom:10px; color:#bdc8dd; font-size:10px; }
.refresh-scores { display:flex; gap:7px; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px; color:#b5f6ff; border:1px solid #7c95b655; border-radius:7px 2px 7px 2px; background:#040b193d; font-size:12px; }
.refresh-scores svg { width:18px; height:18px; }
.refresh-scores:hover { border-color:var(--turbo-cyan); background:#3df2ff0d; }
.refresh-scores:disabled { opacity:.5; cursor:wait; }
.score-screen { position:relative; display:flex; flex-direction:column; min-height:420px; margin-top:24px; border:1px solid #3df2ff45; border-radius:8px; background:radial-gradient(ellipse at 50% 0,#13293e80,transparent 80%),#060b16; box-shadow:0 0 0 4px #030711,0 0 0 5px #555b7055,inset 0 0 30px #0009; overflow:hidden; }
.score-screen::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px); }
.screen-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:66px; padding:15px 18px; border-bottom:1px solid #5b8ea833; }
.screen-heading img { width:116px; height:auto; }
.screen-heading>span { color:#c0d5e8; font:10px 'Share Tech Mono',monospace; white-space:nowrap; }
.screen-heading b { color:#ff71ad; margin-inline:5px; }
.score-columns,.score-list li { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:12px; align-items:center; }
.score-columns { padding:15px 18px 12px; color:#8da8bf; font:9px 'Share Tech Mono',monospace; letter-spacing:.08em; border-bottom:1px solid #5b8ea833; }
.score-columns>span:last-child { text-align:right; }
.score-list { margin:0; padding:0 18px; list-style:none; }
.score-list:empty { display:none; }
.score-list li { padding:17px 0; border-bottom:1px solid #5b8ea82a; color:#e4effa; font:15px 'Share Tech Mono',monospace; font-variant-numeric:tabular-nums; }
.score-list li:last-child { border-bottom:0; }
.score-list .rank { color:#90a8c0; font-size:12px; }
.score-list strong { color:#e2f7ff; font-size:17px; font-weight:400; }
.score-list li:first-child .rank,.score-list li:first-child strong { color:var(--turbo-yellow); }
.score-status { margin:0; padding:24px 20px; color:#c4d4e7; font-size:15px; line-height:1.6; }
.score-status:empty { display:none; }
.score-empty { display:flex; flex:1; min-height:260px; flex-direction:column; align-items:center; justify-content:center; padding:20px 24px 35px; text-align:center; }
.guide-car { display:block; width:min(240px,100%); height:125px; object-fit:contain; filter:drop-shadow(0 8px 18px #3df2ff22); }
.score-empty p { margin:10px 0 8px; color:#e5effa; font-size:18px; font-weight:500; }
.score-empty>span:last-child { max-width:240px; color:#a9bed3; font-size:14px; line-height:1.5; }
.score-screen-footer { display:flex; align-items:center; gap:8px; margin-top:auto; padding:13px 17px; border-top:1px solid #5b8ea833; color:#8baac1; font:9px 'Share Tech Mono',monospace; letter-spacing:.05em; }
.score-screen-footer>span:last-child { margin-left:auto; }
.screen-led { width:4px; height:4px; background:var(--turbo-cyan); box-shadow:0 0 7px #3df2ff88; }
[data-board-state="offline"] .screen-led { background:var(--turbo-yellow); box-shadow:none; }
.score-footnote { margin:22px 1px 0; color:#b5bfd1; font-size:13px; line-height:1.7; }
.guide-heading { margin:3px 0 24px; }
.guide-heading .arcade-kicker { margin-bottom:10px; color:#b3c5db; font-size:10px; }
.platform-controls { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-bottom:23px; border-bottom:1px solid #6d7d9b44; }
.platform-controls h3 { margin:0 0 16px; color:#e9f3ff; font-size:16px; font-weight:500; }
.platform-controls dl { margin:0; display:grid; gap:12px; }
.platform-controls dl>div { display:grid; grid-template-columns:43px minmax(0,1fr); gap:10px; align-items:baseline; }
.platform-controls dt { color:#aabbd2; font-size:13px; }
.platform-controls dd { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0; color:#d5deed; font-size:14px; line-height:1.5; }
.platform-controls dd>span { margin-inline:2px; color:#93a2bb; font-size:12px; }
.platform-controls kbd { display:inline-flex; align-items:center; justify-content:center; min-width:25px; min-height:27px; padding:2px 5px; border:1px solid #9ca7bd70; border-bottom-width:3px; border-radius:4px; background:linear-gradient(#30374a,#192133); color:#e7f8ff; font:13px 'Share Tech Mono',monospace; box-shadow:0 2px 0 #0005; }
.platform-controls .key-space { min-width:85px; }
.pickup-guide { display:grid; gap:20px; margin-block:24px; }
.pickup-row { display:flex; align-items:center; gap:16px; }
.pickup-icon { flex:0 0 48px; width:48px; height:52px; display:grid; place-items:center; }
.pickup-icon svg { width:29px; height:38px; overflow:visible; image-rendering:pixelated; }
.pickup-bolt svg { filter:drop-shadow(0 0 10px #ffd43833); }
.pickup-bolt .o { fill:#714012; } .pickup-bolt .f { fill:#ffd438; } .pickup-bolt .s { fill:#c27a14; } .pickup-bolt .h { fill:#fff4b0; } .pickup-bolt .d { fill:#402b16; }
.pickup-heart svg { width:36px; height:32px; filter:drop-shadow(0 0 10px #ff2e882e); }
.pickup-heart .o { fill:#75071b; } .pickup-heart .f { fill:#ff2648; } .pickup-heart .h { fill:#ff8d9d; }
.pickup-row h3 { margin:0 0 4px; color:#f0f4ff; font-size:16px; font-weight:500; }
.pickup-row p { margin:0; color:#b9c6db; font-size:14px; line-height:1.55; max-width:390px; }
.boost-guide { border-left:2px solid var(--turbo-cyan); padding:1px 0 1px 18px; background:linear-gradient(90deg,#3df2ff05,transparent); }
.boost-guide h3 { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 10px; font:13px/1.5 'Audiowide',sans-serif; color:#d9faff; }
.boost-guide h3>span { color:#779bb8; }
.boost-guide p { margin:0; color:#b9c6db; font-size:14px; line-height:1.65; }
.boost-guide .multiplier-note { margin-top:12px; color:#adbad0; }
.multiplier-note b { color:#e8d9a2; font-weight:500; }
.forms-guide { grid-column:1/-1; display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr); gap:40px; align-items:center; padding:32px 0 10px; border-top:1px solid #6d7d9b44; }
.forms-copy .arcade-kicker { margin-bottom:10px; color:#b3c5db; font-size:10px; }
.forms-guide h2 { font-size:23px; color:#e9effb; }
.forms-copy>p:last-child { max-width:365px; margin:12px 0 0; color:#b9c6db; font-size:14px; line-height:1.65; }
.form-lineup { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.form-lineup li { display:grid; place-items:center; min-width:0; padding-block:12px; border-bottom:1px solid #ff2e8844; background:radial-gradient(ellipse at 50% 100%,#ff2e880d,transparent 70%); }
.form-lineup li:nth-child(even) { border-color:#3df2ff44; background:radial-gradient(ellipse at 50% 100%,#3df2ff0b,transparent 70%); }
.form-lineup img { display:block; width:100%; height:74px; object-fit:contain; filter:drop-shadow(0 4px 14px #0007); }
.arcade-footer { max-width:1440px; padding:25px 5% 35px; margin:auto; display:flex; gap:24px; justify-content:space-between; border-top:1px solid #6d7d9b33; color:#acbad0; font-size:12px; }
.arcade-footer b { margin-inline:8px; color:#ff75bb; font-weight:400; }
.arcade-footer a { color:#d5e4f5; }
body.playing { height:100dvh; overflow:hidden; overscroll-behavior:none; user-select:none; }
#game-shell { position:fixed; inset:0; z-index:50; background:#07040f; }
#game-loading { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#07040f; color:#c6bcd8; font:13px 'Share Tech Mono',monospace; }
#game-loading img { width:min(70vw,340px); height:auto; }
#game-loading .loadline { width:180px; height:2px; background:#3b2a51; margin-top:15px; }
#game-loading .loadline i { display:block; height:100%; width:8%; background:#6cf4ff; transition:width .25s; }
.leaderboard { z-index:100; }
.no-script { padding:30px; color:#ffcae4; }
@media(min-width:1600px) { .arcade-hero { border-inline:1px solid #ffffff18; } }
@media(max-width:1100px) { .arcade-lower { gap:36px; } .score-panel { padding:22px; } .refresh-scores span { display:none; } .platform-controls { gap:16px; } }
@media(max-width:1000px) { .arcade-lower { grid-template-columns:1fr; max-width:820px; padding-block:44px; } .score-screen { min-height:380px; } .score-empty { min-height:220px; } .refresh-scores span { display:inline; } .forms-guide { grid-template-columns:1fr; gap:22px; } .forms-copy>p:last-child { max-width:550px; } }
@media(max-width:900px) { .arcade-hero { min-height:700px; } .hero-night { background-position:67% center; } .arcade-copy { padding-top:45px; max-width:650px; } .best-readout { top:auto; bottom:30px; right:6%; } .best-readout strong { font-size:25px; } .hero-coordinate { display:none; } .arcade-ticker { gap:18px; font-size:10px; } }
@media(max-width:600px) { .hero-racer { top:auto; bottom:110px; right:2%; width:96%; } .hero-night { background-image:linear-gradient(180deg,#070814 0%,#070814 42%,#07081466 62%,#07081400 78%,#070814cc 100%),url('./assets/turbo-banner-world-960.webp'); } .arcade-header { padding:14px 6%; } .arcade-header img { width:120px; height:43px; } .arcade-hero { min-height:980px; } .hero-night { background:linear-gradient(180deg,#070814 0%,#070814 42%,#07081499 55%,#07081400 72%,#070814cc 100%),url('./assets/turbo-banner-world-960.webp') 65% bottom / auto 540px no-repeat; } .arcade-copy { padding:32px 6% 0; } #garage h1 img { width:330px; } .arcade-tagline { font-size:28px; } .arcade-intro { font-size:16px; max-width:335px; } .arcade-actions { gap:23px; } .race-button { gap:28px; padding:16px 20px; } .play-note { font-size:9px; } .play-note b { margin:0 5px; } .best-readout { top:auto; bottom:24px; left:6%; right:auto; } .arcade-ticker { display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:center; font-size:9px; padding-block:18px; } .arcade-ticker i { display:none; } .arcade-lower { padding:30px 5% 36px; gap:36px; } .score-panel { padding:22px 18px; } .score-panel h2,.how-panel h2 { font-size:27px; } .refresh-scores { padding:8px; } .refresh-scores span { display:none; } .screen-heading { padding-inline:14px; } .screen-heading img { width:100px; } .score-columns,.score-list { padding-inline:14px; } .score-columns,.score-list li { column-gap:8px; grid-template-columns:28px minmax(0,1fr) auto; } .score-list strong { font-size:15px; } .platform-controls { grid-template-columns:1fr 1fr; gap:20px; } .platform-controls dl>div { grid-template-columns:1fr; gap:5px; } .platform-controls dd { min-height:30px; font-size:13px; } .platform-controls dt { font-size:12px; } .platform-controls kbd { min-width:23px; padding-inline:4px; } .platform-controls dd>span { font-size:10px; margin:0; } .pickup-row { gap:12px; } .boost-guide { padding-left:14px; } .boost-guide h3 { font-size:12px; gap:8px; } .forms-guide { padding-top:25px; } .forms-guide h2 { font-size:23px; } .form-lineup { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px; } .form-lineup img { height:68px; } .arcade-footer { padding:24px 6%; flex-direction:column; gap:12px; } }
@media(max-width:360px) { .platform-controls { grid-template-columns:1fr; } .platform-controls dl>div { grid-template-columns:43px minmax(0,1fr); } .arcade-actions { gap:16px; } .race-button { gap:18px; padding-inline:16px; } .score-link { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
