*{box-sizing:border-box}body{margin:0;background:#11131d;color:#fff4d9;font-family:monospace}header{max-width:1280px;margin:auto;padding:20px 24px;display:flex;justify-content:space-between;align-items:center}header b{letter-spacing:3px;font-size:15px}header span{color:#9c9ba9;font-size:11px;letter-spacing:2px}main{max-width:1280px;margin:auto;padding:0 24px}#cabinet{position:relative;overflow:hidden;border:1px solid #514452;box-shadow:0 20px 80px #0009;background:#242134;aspect-ratio:16/9}canvas{display:block;width:100%;height:100%;image-rendering:auto}#cabinet:after{display:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(#1a15202a,#191322b8);text-align:center;z-index:2}.panel{padding:25px;max-width:650px}.eyebrow{color:#ffdd86;letter-spacing:5px;font-size:12px}h1{font-size:clamp(26px,5vw,66px);font-style:italic;line-height:.95;margin:20px 0;color:#ffe4a3;text-shadow:4px 4px #bc3669,7px 7px #302539;letter-spacing:-3px}h1 em{color:#ff7794;font-size:.58em;letter-spacing:8px}p{line-height:1.7;color:#fff0d5}button{font-family:inherit;cursor:pointer;border:1px solid #666175;background:#242431;color:#fff4dd;padding:12px 18px;font-weight:bold}button:hover{background:#424050}#start{background:#ffce79;color:#24202b;border:0;box-shadow:4px 4px #b94a63;font-size:16px;margin:12px}.hidden{display:none!important}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0}.keys{color:#a8a5b2;font-size:12px}.keys strong{color:#fff0d6}footer{border-top:1px solid #302c3a;padding:20px 0;color:#777786;display:flex;justify-content:space-between;font-size:11px;line-height:1.6}.touch{display:none;gap:8px}.touch button{touch-action:none;min-width:55px;user-select:none} @media(pointer:coarse){.touch{display:flex}.keys{display:none}}@media(max-width:650px){header{padding:16px}header span{display:none}main{padding:0 8px}footer{display:block}#cabinet{aspect-ratio:4/3}.panel{padding:10px}h1{margin:12px 0}.panel p{font-size:11px}.toolbar{flex-wrap:wrap}button{padding:10px}.eyebrow{font-size:9px}}
.overlay{overflow:auto}.panel{width:620px;max-height:100%;padding:18px}h1{font-size:36px;margin:12px 0}.settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.settings label:first-child{grid-column:1/-1}.settings input,.settings select{display:block;width:100%;margin-top:5px;padding:10px;background:#191c30;color:#ffe4a3;border:1px solid #8e7991;font:inherit}.settings label{font-size:12px}.result{font-size:19px;line-height:1.7}#message{margin:8px 0}@media(max-width:650px){h1{font-size:24px}.settings{gap:6px}.settings input,.settings select{padding:6px}}#leaderboard{margin:16px 0;text-align:left}#leaderboard h2{font-size:15px;color:#ffce79}#rankingRows{max-height:170px;overflow:auto}#leaderboard table{width:100%;border-collapse:collapse;font-size:12px}#leaderboard td,#leaderboard th{padding:7px 4px;border-bottom:1px solid #ffffff22;text-align:left}#rankingNote{font-size:11px}#leaderboard p{font-size:12px}
/* Arcade race setup */
.overlay{background:linear-gradient(145deg,#16152aee,#291333e8 52%,#0d2633ed);align-items:flex-start;padding:18px}
.overlay .panel{width:900px;max-width:100%;max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;text-align:left;border:2px solid #ef99b1;background:linear-gradient(160deg,#292343f5,#12182bf5);box-shadow:6px 6px 0 #0a0d19,0 0 25px #ff528044;padding:22px}
.panel .eyebrow,.panel h1,.panel #message{grid-column:1/-1}.panel .eyebrow{color:#7ceee7;letter-spacing:3px;font-size:10px}
.panel h1{font-size:clamp(28px,4vw,46px);margin:0;line-height:1.05;color:#ffe88a;text-shadow:3px 3px #e94b83,5px 5px #0b0d1b;transform:skew(-5deg);letter-spacing:-1px}.panel h1 em{font-size:.46em;letter-spacing:6px;color:#77ede9}
.panel #message{font-size:12px;margin:0;color:#dddaeb}.panel .settings{grid-column:1;align-content:start;gap:12px}.settings label{color:#ffe18b;letter-spacing:1px;font-weight:bold}.settings input,.settings select{border:2px solid #6b7898;background:#0e1427;padding:11px;color:#f7f2dc;box-shadow:3px 3px #0005;border-radius:0}.settings input:focus,.settings select:focus{outline:2px solid #75eee2;outline-offset:2px}
.panel #leaderboard{grid-column:2;grid-row:4 / span 2;margin:0;padding:12px;background:#090e20b8;border:1px solid #68728d}.panel #leaderboard h2{margin:0;color:#7ceee7;font-size:14px;letter-spacing:2px}#rankingRows{max-height:175px}#rankingRows table{font-size:11px}#rankingRows th{color:#ffdf87}#rankingRows tr:nth-child(2){color:#ffe28d}.panel #start{grid-column:1;margin:0;padding:14px;background:#ffdc83;color:#261931;box-shadow:4px 4px #d54c7c;border:2px solid #fff0c3;letter-spacing:3px}.panel>p:last-child{grid-column:1/-1;color:#90a5bd}
@media(max-width:650px){.overlay{padding:8px}.overlay .panel{padding:12px;display:flex;flex-direction:column;gap:12px}.panel h1{font-size:30px}.panel .settings{display:grid}.panel #leaderboard{width:100%}#rankingRows{max-height:110px}}

@font-face{font-family:ArcadePixel;src:url(./arcade-font.034c77f1f05ec894.ttf) format('truetype');font-display:swap}
body,button,input,select{font-family:ArcadePixel,monospace;font-weight:400}
body{background:#10102b}header b{font-size:12px}header span{font-size:8px;line-height:1.8}
#titleScreen{position:absolute;inset:0;z-index:5;padding:0;border:0;background:#3333ee;display:block;width:100%;height:100%;cursor:pointer}
#titleScreen img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:pixelated}
#titleScreen:focus-visible{outline:4px solid #8cff95;outline-offset:-6px}
.overlay{background:linear-gradient(#121332c9,#161329ed),var(--menu-image) center/cover;padding:18px}
.overlay .panel{border:3px solid #77edbf;box-shadow:5px 5px #101024,8px 8px #ec74ad;background:#111731ee;gap:14px 24px}
.panel h1{font-family:ArcadePixel,monospace;font-style:normal;font-size:24px;line-height:1.5;letter-spacing:0;transform:none;color:#9affaf;text-shadow:2px 2px #dd71b5,4px 4px #080819}
.panel h1 em{font-style:normal;font-size:12px;letter-spacing:2px;color:#ffafd2}
.panel .eyebrow{font-size:8px;line-height:1.8;letter-spacing:1px}
.panel #message,.settings label,.settings input,.settings select{font-size:9px;line-height:1.9;letter-spacing:0}
.settings input,.settings select{min-height:40px;padding:8px;border:2px solid #83c8bc;color:#fff0cf}
.panel #leaderboard h2{font-size:11px;line-height:1.7;letter-spacing:0}
#leaderboard p,#rankingNote,#rankingRows table{font-size:8px;line-height:1.9}
#rankingRows{max-height:160px}.panel #start{font-size:12px;line-height:1.7;letter-spacing:1px;color:#102724;background:#91f0a6;border:3px solid #def7b3;box-shadow:4px 4px #dd78b0}
.keys,footer{font-size:8px;line-height:2}.toolbar button{font-size:9px;line-height:1.7;border:2px solid #85b6b2;box-shadow:3px 3px #05091c}
.panel>p:last-child{font-size:8px!important;line-height:2;letter-spacing:0!important}
button:focus-visible{outline:3px solid #ffe491;outline-offset:3px}
@media(max-width:650px){#cabinet{aspect-ratio:16/9;min-height:260px}.overlay{padding:8px}.overlay .panel{padding:12px}.panel h1{font-size:18px}.panel h1 em{font-size:9px}.toolbar{gap:14px}.toolbar button{font-size:8px}header b{font-size:10px}}
/* Mobile fullscreen controls: these live INSIDE #cabinet because #cabinet is the fullscreen element. */
#mobileOrientationGate{display:none;position:fixed;inset:0;z-index:99999;background:#08091df5;color:#fff2d0;align-items:center;justify-content:center;text-align:center;font-family:monospace;padding:24px;box-sizing:border-box;touch-action:none;}
#mobileOrientationGate .gateCard{border:3px solid #85b6b2;background:#111222;box-shadow:8px 8px #05091c;max-width:520px;padding:28px 24px;}
#mobileOrientationGate strong{display:block;font-size:clamp(24px,7vw,42px);letter-spacing:3px;margin-bottom:18px;}
#mobileOrientationGate span{display:block;font-size:clamp(13px,3.5vw,19px);line-height:1.6;color:#8ff0e8;}
#mobileOrientationGate button{margin-top:22px;padding:12px 18px;border:2px solid #85b6b2;background:#1b1d2d;color:#fff2d0;font:inherit;font-size:14px;letter-spacing:1px;}
@media(pointer:coarse) and (orientation:portrait){#mobileOrientationGate{display:flex!important;}}
@media(pointer:coarse) and (orientation:landscape){#mobileOrientationGate{display:none!important;}}
@media(pointer:fine){#mobileOrientationGate{display:none!important;}}
#mobileFsLayer{display:none;position:absolute;inset:0;z-index:1000;pointer-events:none;font-family:monospace;}
#mobileOrientationPrompt{display:none;position:absolute;inset:0;z-index:1200;align-items:center;justify-content:center;background:#08091ddd;pointer-events:auto;font-family:monospace;}
.mobileOrientationCard{margin:24px;padding:24px 20px;max-width:420px;text-align:center;border:2px solid #85b6b2;background:#101323;color:#fff4dd;box-shadow:6px 6px #05091c;display:flex;flex-direction:column;gap:12px;}
.mobileOrientationCard strong{font-size:20px;letter-spacing:2px;color:#7ceee7;}
.mobileOrientationCard span{font-size:13px;line-height:1.5;color:#fff4dd;}
@media (pointer:coarse) and (orientation:portrait){#cabinet:fullscreen #mobileOrientationPrompt{display:flex;}}
@media (pointer:coarse) and (orientation:landscape){#cabinet:fullscreen #mobileOrientationPrompt{display:none!important;}}
#cabinet:fullscreen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border:0;box-shadow:none;background:#000;}
#cabinet:fullscreen canvas{width:100%;height:100%;object-fit:contain;}
.mobileFsTop{position:absolute;left:12px;right:12px;top:10px;display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none;}
.mobileFsTop button,.mobileFsSteer button,.mobileFsDrive button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;border:2px solid #85b6b2;background:rgba(8,12,28,.58);color:#fff4dd;box-shadow:0 0 10px rgba(80,210,255,.28),3px 3px 0 rgba(5,9,28,.75);font-family:monospace;font-weight:bold;}
.mobileFsTop button{min-height:42px;padding:7px 12px;font-size:12px;}
#mobileFsSpotify{border-color:#7ceee7!important;color:#7ceee7!important;background:rgba(8,12,28,.55)!important;}
.mobileFsSteer,.mobileFsDrive{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:10px;pointer-events:none;}
.mobileFsSteer{left:18px}.mobileFsDrive{right:18px;flex-direction:column;align-items:center;}
.mobileFsSteer button{width:78px;height:78px;border-radius:50%;font-size:31px;background:rgba(7,12,30,.48);border-color:#39a9ff;box-shadow:0 0 16px rgba(57,169,255,.42),inset 0 0 14px rgba(50,100,255,.12);color:#8cc8ff;}
.mobileFsDrive button{width:86px;min-width:86px;height:70px;min-height:70px;border-radius:50%;font-size:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:rgba(8,12,28,.48);}
.mobileFsDrive button span{font-size:12px;letter-spacing:1px;}
#mobileFsNitro{border-color:#42a8ff!important;color:#55d9ff!important;background:rgba(8,30,58,.48)!important;box-shadow:0 0 18px rgba(42,164,255,.45),inset 0 0 16px rgba(42,164,255,.14)!important;}
.mobileFsDrive button[data-fs-key="ArrowUp"]{width:96px;height:96px;min-width:96px;min-height:96px;border-color:#34f0b1;color:#5dffc2;background:rgba(5,45,34,.44);box-shadow:0 0 20px rgba(52,240,177,.45),inset 0 0 18px rgba(52,240,177,.13);font-size:30px;}
.mobileFsDrive button[data-fs-key="ArrowDown"]{border-color:#ff3e68;color:#ff708d;background:rgba(58,8,24,.44);box-shadow:0 0 18px rgba(255,62,104,.42),inset 0 0 15px rgba(255,62,104,.12);}
@media(pointer:coarse){#cabinet:fullscreen #mobileFsLayer{display:block;}#cabinet:fullscreen .overlay{z-index:1100;} }
@media(pointer:fine){#cabinet:fullscreen #mobileFsLayer{display:none!important;}}

#mobileOrientationGate{display:none!important}#mobileOrientationGate.active{display:flex!important}
#cabinet.mobile-expanded{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;z-index:10000;border:0;background:#000}#cabinet.mobile-expanded canvas{object-fit:contain}body.mobile-playing{overflow:hidden}
#mobileFsLayer{font-family:ArcadePixel,monospace}#mobileFsLayer button{font-family:inherit}#mobileFsLayer[aria-hidden="false"]{display:block}#cabinet .overlay{z-index:1100}#cabinet #titleScreen{z-index:1200}
.mobileFsTop button{font-size:8px}.mobileFsSteer button{width:96px;height:96px;font-size:38px}.mobileFsDrive button{width:90px;min-width:90px;height:90px;min-height:90px;font-size:32px}.mobileFsDrive button span{font-size:10px}
.spotify-link{font-size:8px;line-height:1.8;color:#91f0a6;border:2px solid #91f0a6}.panel .spotify-link{grid-column:1/-1}
@media(pointer:coarse) and (orientation:landscape){.mobileFsSteer,.mobileFsDrive{top:50%;bottom:auto;transform:translateY(-50%)}.mobileFsDrive{flex-direction:row}.mobileFsTop{top:6px}.mobileFsTop button{min-height:32px;padding:6px}.overlay .panel{gap:8px 16px;padding:12px}.panel h1{font-size:18px}}
@media(pointer:coarse){.mobileFsSteer{left:max(10px,env(safe-area-inset-left))}.mobileFsDrive{right:max(10px,env(safe-area-inset-right))}.mobileFsSteer button:active,.mobileFsDrive button:active{background:#254664cc;box-shadow:inset 0 0 0 3px #e0ffed;transform:scale(.96)}}