@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600;700;800&display=swap');
:root{--red:#f23446;--cream:#fff5e5;--dark:#171b1e}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#181d22;color:var(--cream);font-family:Barlow,Arial,sans-serif;overscroll-behavior:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffd486;outline-offset:5px}.hidden{display:none!important}#world,.shade{position:fixed;inset:0;width:100%;height:100%}.shade{pointer-events:none;background:linear-gradient(90deg,rgba(15,22,26,.91),rgba(15,22,26,.52) 35%,transparent 68%),linear-gradient(0deg,rgba(15,22,26,.7),transparent 35%)}body.playing .shade{background:linear-gradient(180deg,#131b2455,transparent 25%,transparent 75%,#131b2466)}header{position:absolute;z-index:5;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:32px 4.5%;padding-top:max(25px,env(safe-area-inset-top));gap:16px}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--cream);font-size:24px;font-weight:800;font-style:italic;letter-spacing:1px}.brand-icon{display:grid;place-items:center;background:var(--red);width:34px;height:35px;transform:skew(-10deg);font-size:28px}.brand-tag{font-size:9px;font-style:normal;letter-spacing:2px;width:40px;border-left:1px solid #ffffff50;padding-left:10px;line-height:1.6;margin-left:5px}.header-right{display:flex;gap:20px;align-items:center}.prototype{font-size:10px;letter-spacing:2px;color:#ffffff90}.icon-button{background:#15202766;border:1px solid #ffffff30;color:var(--cream);padding:11px 13px;font-size:10px;letter-spacing:1px;border-radius:3px}.menu{position:absolute;z-index:2;left:7%;top:24%;max-width:580px}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:700;color:#efb990;display:flex;align-items:center;gap:10px}.eyebrow>span{height:2px;width:26px;background:var(--red)}h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:clamp(50px,6.5vw,100px);font-weight:800;line-height:.94;letter-spacing:-1px;margin:24px 0}h1 em{color:var(--red);font-style:italic}.menu p{font-size:15px;line-height:1.7;color:#c1c5c5;margin:0 0 27px}.primary{display:flex;justify-content:space-between;align-items:center;gap:40px;background:var(--red);border:0;color:#fff;font-size:13px;font-weight:800;letter-spacing:1.7px;padding:20px 26px;min-width:250px;box-shadow:0 7px 30px #ed244329;transition:background .2s,transform .2s}.primary:hover{background:#ff4758;transform:translateY(-2px)}.primary:disabled{opacity:.6;cursor:wait}.primary span{font-size:25px;line-height:.5}.menu-controls{font-size:9px;letter-spacing:1px;color:#929c9e;margin-top:20px;display:flex;align-items:center;gap:8px}.menu-controls b{color:#d5dad6;font-size:9px}.menu-controls i{height:10px;width:1px;background:#798181;margin:0 5px}.track-card{position:absolute;right:5%;bottom:12%;width:340px;border-left:3px solid var(--red);padding:23px 25px;background:#152028bc;backdrop-filter:blur(14px)}.track-label{letter-spacing:3px;font-size:10px;color:#e3b288}.track-card h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:38px;font-weight:700;letter-spacing:1px;margin:8px 0 14px}.track-info{display:flex;gap:16px;font-size:9px;color:#bec5c4;letter-spacing:1px}.track-bottom{border-top:1px solid #ffffff20;padding-top:17px;margin-top:18px;font-size:8px;letter-spacing:1.3px;display:flex;align-items:center;gap:8px}.live-dot{width:5px;height:5px;background:var(--red);border-radius:50%}footer{position:absolute;bottom:30px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;font-size:9px;color:#ffffff65;letter-spacing:2px}.race-stats{position:absolute;top:110px;left:4.5%;display:flex;gap:28px}.race-stats label{display:block;font-size:9px;letter-spacing:2px;color:#fff9}.race-stats strong{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:42px;font-weight:700}.race-stats strong span{font-family:Barlow,sans-serif;font-size:14px;color:#ffffff80;margin-left:7px}#time{font-size:27px;padding-top:9px;font-variant-numeric:tabular-nums}.speed-panel{position:absolute;right:5%;bottom:100px;width:175px}.speed-panel>div:first-child{display:flex;align-items:baseline;gap:8px}#speed{font-family:'Barlow Condensed',Impact,sans-serif;font-size:78px;font-style:italic;line-height:1.05}.speed-panel span{font-size:10px;letter-spacing:1px}.boost-label{display:flex;justify-content:space-between;margin:8px 0}.boost-track{height:6px;background:#ffffff28;transform:skew(-15deg)}#boost-fill{height:100%;width:100%;background:var(--red)}.speed-panel small{display:block;font-size:8px;margin-top:10px;letter-spacing:1px;color:#fff9}.map-panel{position:absolute;right:4.5%;top:100px;text-align:center;background:#17222a66;border:1px solid #ffffff10;border-radius:8px;padding:5px}.map-panel canvas{width:135px;height:135px;display:block}.map-panel span{font-size:8px;letter-spacing:2px;display:block;padding-bottom:8px}.keyboard-help{position:absolute;bottom:30px;left:4.5%;font-size:9px;letter-spacing:1px;color:#fff8}.keyboard-help span{margin:0 15px}.touch-controls{display:none;position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));justify-content:space-between;pointer-events:none}.touch-controls>div{display:flex;gap:14px;align-items:end}.touch-controls button{pointer-events:auto;width:66px;height:66px;border-radius:50%;border:1px solid #ffffff66;background:#17263099;color:white;font-size:22px;touch-action:none;user-select:none;-webkit-user-select:none;backdrop-filter:blur(8px)}.touch-controls button.active{background:#ffffff77;transform:scale(.94)}.touch-controls .drift{font-size:11px;font-weight:800;width:59px;height:59px}.touch-controls .turbo{background:#ee3049cc;width:77px;height:77px;font-size:11px;font-weight:800;border-color:#ff8690}.turbo span{display:block;font-size:25px}#countdown{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-family:'Barlow Condensed',Impact,sans-serif;font-size:130px;font-style:italic;text-shadow:0 6px 30px #0006;color:#fff0d5;pointer-events:none}.dialog{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#111d28bd;backdrop-filter:blur(10px)}.dialog-card{padding:38px;width:min(410px,90%);background:#19242a;border:1px solid #ffffff20;border-top:3px solid var(--red)}.dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:50px;line-height:1;margin:18px 0}.dialog p{color:#c1c5c5;font-size:14px;line-height:1.6;white-space:pre-line}.dialog button{width:100%;margin-top:10px}.secondary{padding:15px;background:transparent;border:1px solid #ffffff40;color:white;font-size:11px;letter-spacing:1px;font-weight:700}.text-button{background:none;border:0;color:#a7b2b3;padding:10px;font-size:10px;letter-spacing:1px}#rotate-hint{display:none;position:absolute;bottom:15px;left:15px;right:15px;background:#17242ef2;z-index:25;padding:13px 16px;align-items:center;gap:15px;font-size:28px;border:1px solid #ffffff30;border-radius:6px}#rotate-hint span{font-size:12px;line-height:1.4}#rotate-hint button{margin-left:auto;background:none;border:0;color:white;font-size:25px}body.turbo-on #world{filter:saturate(1.18)}
@media(pointer:coarse),(max-width:900px){.touch-controls{display:flex}.keyboard-help{display:none}.speed-panel{right:27px;bottom:120px;width:130px}#speed{font-size:57px}header{padding:18px 24px}.prototype{display:none}.brand{font-size:20px}.brand-icon{width:29px;height:30px}.race-stats{top:74px;left:25px;gap:20px}.race-stats strong{font-size:34px}.map-panel{top:72px;right:24px}.map-panel canvas{width:100px;height:100px}.map-panel span{font-size:7px}.menu{left:6%;top:23%}h1{font-size:57px}.menu p{font-size:13px;margin-bottom:20px}.track-card{width:290px;right:5%;bottom:12%}.track-info{font-size:8px;gap:9px}footer{bottom:20px;font-size:8px}.primary{padding:18px 22px}.menu-controls{margin-top:15px}}
@media(max-height:560px) and (orientation:landscape){header{padding:14px 24px}.menu{top:23%}h1{font-size:clamp(35px,8vh,55px);margin:13px 0}.menu p{font-size:12px;line-height:1.4;margin-bottom:15px}.primary{padding:14px 18px;font-size:11px;min-width:220px}.menu-controls{font-size:8px;margin-top:11px}.track-card{width:270px;padding:17px 20px;bottom:14%}.track-card h2{font-size:30px}.track-bottom{padding-top:12px;margin-top:12px}footer{bottom:14px}.race-stats{top:67px}.race-stats strong{font-size:31px}.map-panel{top:65px}.map-panel canvas{width:80px;height:80px}.speed-panel{bottom:105px;width:115px}.speed-panel small{display:none}#speed{font-size:48px}.touch-controls button{width:58px;height:58px}.touch-controls .turbo{width:66px;height:66px}.touch-controls .drift{width:52px;height:52px}.dialog-card{padding:22px;max-width:380px}.dialog h2{font-size:35px;margin:12px 0}.dialog p{margin:10px 0}.dialog button{margin-top:6px}.eyebrow{font-size:9px}}
@media(orientation:portrait) and (max-width:700px){#rotate-hint:not(.hidden){display:flex}header{padding:20px}.brand-tag{display:none}.menu{top:20%;left:7%}h1{font-size:clamp(48px,13vw,78px)}.track-card{bottom:110px;left:7%;right:auto;width:86%;padding:17px 20px}.track-card h2{font-size:30px}.track-bottom{display:none}footer{display:none}.menu p{font-size:14px}.race-stats{top:85px;left:20px;gap:15px}.time-stat{display:none}.map-panel{top:85px;right:20px}.speed-panel{bottom:180px}.touch-controls{bottom:90px}.touch-controls>div{gap:8px}.touch-controls button{width:55px;height:55px}.touch-controls .turbo{width:64px;height:64px}.touch-controls .drift{width:50px;height:50px}}
.shop-entry{display:flex;align-items:center;gap:7px;max-width:300px;margin-top:13px;color:#edbf64;text-decoration:none;font-size:11px;letter-spacing:1px}.shop-entry>span:last-child{margin-left:auto;font-size:9px;color:#d6e1e4}.coin-badge{border:1px solid #edbf64;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;font-weight:800;font-style:italic}.playing header a[href="garage.html"]{display:none}@media(max-height:560px) and (orientation:landscape){.menu-controls{margin-top:8px}.shop-entry{margin-top:9px}.menu{top:21%}.menu p{margin-bottom:11px}h1{margin:10px 0}.menu .eyebrow{font-size:8px}.menu-controls{display:none}}@media(max-width:600px){header .header-right{gap:8px}header .brand-tag{display:none}header .icon-button{padding:9px;font-size:8px}header .brand{font-size:18px}}
/* Branding */
.brand-logo{display:block;width:180px;height:120px;object-fit:contain;filter:drop-shadow(0 3px 12px #0008)}
@media(pointer:coarse),(max-width:900px){.brand-logo{width:145px;height:96px}}
@media(max-width:600px){.brand-logo{width:112px;height:76px}}
.challenge-status{display:block;margin-top:11px;width:max-content;max-width:190px;padding:7px 9px;border-left:2px solid #65f1df;background:#17252bd9;color:#b9fff6;font-size:8px;font-weight:800;letter-spacing:1px;line-height:1.35;text-shadow:0 1px 5px #000}
.challenge-status.impact{border-color:#ff4659;background:#3a1820e8;color:#ffe2d5}
@media(max-width:900px){.challenge-status{max-width:145px;font-size:7px;padding:6px 7px;margin-top:8px}}
.playing .brand-logo{width:86px;height:58px}
@media(max-width:900px){.playing .brand-logo{width:72px;height:50px}}
.account-screen,.room-screen{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:max(22px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom));overflow:auto;background:linear-gradient(120deg,#101820ef,#171d22f2 58%,#361d24ed);backdrop-filter:blur(12px)}
.account-card,.room-panel{width:min(520px,100%);padding:clamp(24px,5vw,42px);border:1px solid #ffffff20;border-top:3px solid var(--red);background:#141d22f5;box-shadow:0 24px 80px #0008}
.account-logo{width:125px;height:94px;object-fit:contain;display:block;margin:-12px 0 10px -8px}
.account-card h1,.room-panel h2{font-size:clamp(43px,8vw,66px);margin:12px 0}
.account-card>p,.room-panel>p{max-width:420px;color:#c1c5c5;line-height:1.55;font-size:14px}
.account-card form{display:grid;gap:10px;margin-top:24px}
.account-card label,.room-list-heading{font-size:9px;font-weight:800;letter-spacing:2px;color:#d6c8b8}
.account-card input,.room-create input{width:100%;height:46px;padding:0 13px;background:#0c1317;border:1px solid #ffffff28;color:#fff5e5;font:inherit;border-radius:2px;outline:none}
.account-card input:focus,.room-create input:focus{border-color:#f23446}
.account-card form button{margin-top:8px}
.account-card>.text-button{margin-top:8px;padding-left:0;color:#f2c9a4}
.account-card>small{display:block;color:#899398;font-size:10px;line-height:1.5;margin-top:12px}
.account-status{min-height:18px;margin:9px 0 0!important;color:#ffd18c!important;font-size:12px!important}
.room-panel{width:min(780px,100%);max-height:calc(100svh - 44px);overflow:auto}
.room-screen button{pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.room-heading-actions button,.room-list-heading button{min-height:42px}
.room-heading,.room-list-heading,.room-create,.room-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.room-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.room-heading h2{margin:12px 0 5px}.room-heading>.text-button{color:#d8c6b9;font-size:9px}
.room-create{margin:20px 0}.room-create .primary{min-width:174px;padding:13px 16px}
.room-setting,.host-bot-controls{display:flex;align-items:center;gap:9px;color:#b8c5c5;font-size:10px;letter-spacing:1px}.room-setting select,.host-bot-controls select{height:42px;padding:0 10px;background:#0c1317;border:1px solid #ffffff28;color:#fff5e5;font:inherit;border-radius:2px}.host-bot-controls{margin:0 0 14px;padding:12px;background:#090f12;flex-wrap:wrap}.host-bot-controls button{padding:10px 12px;font-size:9px}
.room-list-heading{padding:10px 0;border-bottom:1px solid #ffffff20}.room-list-heading button{background:none;border:0;color:#f2c9a4;font-size:9px;letter-spacing:1px}
.rooms-list{display:grid;gap:8px;max-height:185px;overflow:auto;padding:10px 0}
.room-entry{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 14px;background:#ffffff0b;border:1px solid #ffffff18}
.room-entry strong,.room-entry span{display:block}.room-entry strong{font-size:13px}.room-entry span{margin-top:4px;color:#aab4b4;font-size:10px;letter-spacing:1px}
.room-entry button{border:1px solid #ed334c;color:#fff;background:#ed334c;padding:10px 15px;font-size:9px;font-weight:800;letter-spacing:1px}
.rooms-empty{padding:24px 10px;text-align:center;color:#aab4b4;font-size:12px}
.selected-room{margin-top:16px;padding:17px;background:#0f181d;border:1px solid #65f1df55}
.selected-room h3{margin:6px 0;font-size:22px}.selected-room #room-count{font-size:10px;letter-spacing:1px;color:#b8c5c5}
.room-players{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.room-player{padding:7px 10px;border:1px solid #ffffff22;color:#e7eee8;font-size:10px}.room-player.ready{border-color:#65f1df;color:#b9fff6}
.room-actions{justify-content:flex-end;flex-wrap:wrap}.room-actions button{font-size:9px;padding:13px 15px}.room-actions .primary{min-width:210px}.room-actions button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:600px){.account-logo{width:105px;height:78px}.room-panel{padding:22px}.room-create{align-items:stretch;flex-direction:column}.room-create .primary{width:100%}.room-actions{display:grid;grid-template-columns:1fr 1fr}.room-actions .primary{grid-column:1/-1;width:100%}.room-actions .secondary{width:100%}}