:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#17130f;--cream:#fff4d0;--sand:#e9a63d;--orange:#f46a24;--acid:#f6ee5c;--cyan:#6df3de;--panel:#18120ddb;--line:#fff2cb29;font-family:Inter,system-ui,sans-serif}@font-face{font-family:Barlow Condensed;src:local(Impact);font-style:normal;font-weight:100 900}@font-face{font-family:Barlow Condensed;src:local(Impact);font-style:italic;font-weight:100 900}@font-face{font-family:Inter;src:local(Arial);font-style:normal;font-weight:100 900}*{box-sizing:border-box}html,body{background:var(--ink);width:100%;height:100%;color:var(--cream);margin:0;overflow:hidden}button,input{font:inherit}button{color:inherit}.hidden{display:none!important}#game-canvas{opacity:0;width:100%;height:100%;transition:opacity .5s;display:block;position:fixed;inset:0}body.racing #game-canvas{opacity:1}#ui-root{pointer-events:none;position:fixed;inset:0}.screen,.finish-screen,.loading-overlay{pointer-events:auto}.home-screen{background:radial-gradient(circle at 72% 29%,#ffec8c33,#0000 14%),linear-gradient(142deg,#f77320f5,#da5b1deb 42%,#4d2a1ff5);position:absolute;inset:0;overflow:hidden}.home-screen:before{content:"";opacity:.18;mix-blend-mode:overlay;background-image:linear-gradient(30deg,#0000 48%,#ffffff29 50%,#0000 52%);background-size:16px 16px;position:absolute;inset:0}.sun-disc{aspect-ratio:1;opacity:.9;background:#ffd768;border-radius:50%;width:min(43vw,620px);position:absolute;top:3vh;right:2vw;box-shadow:0 0 90px #ffbd4d}.home-shell{z-index:4;grid-template-columns:1.25fr .75fr;align-content:center;gap:clamp(35px,6vw,100px);width:min(1180px,92vw);height:100%;margin:0 auto;display:grid;position:relative}.hero{align-self:center}.eyebrow{letter-spacing:.24em;color:var(--acid);font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:800}.hero h1{letter-spacing:-.075em;text-shadow:7px 9px #451c1259;margin:8px 0 2px;font-family:Barlow Condensed,sans-serif;font-size:clamp(95px,14vw,205px);font-style:italic;font-weight:900;line-height:.72;transform:skew(-5deg)}.hero h1 span{color:#fff5d8}.hero h1 i{color:var(--acid);font-style:inherit}.hero p{max-width:510px;font-family:Barlow Condensed,sans-serif;font-size:clamp(20px,2.1vw,30px);font-weight:600;line-height:1.05}.glass-card{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(145deg,#1b1611f0,#130f0cd6);border:1px solid #fff4d02e;box-shadow:0 24px 65px #280f0957}.join-card{border-radius:10px;align-self:center;padding:30px;transform:rotate(1deg)}.join-card label{color:#d6c9a6;letter-spacing:.13em;margin:0 0 8px;font-family:Barlow Condensed;font-size:13px;font-weight:800;display:block}input{color:#fff;background:#ffffff12;border:1px solid #ffffff24;border-radius:5px;outline:none;width:100%;padding:15px 16px;font-weight:600;transition:all .2s}input:focus{border-color:var(--acid);box-shadow:0 0 0 3px #f6ee5c21}input::placeholder{color:#ffffff61}.primary-button,.secondary-button{cursor:pointer;letter-spacing:.06em;border:0;border-radius:5px;min-height:53px;font-family:Barlow Condensed;font-size:16px;font-weight:900;transition:transform .15s,filter .15s,opacity .15s}.primary-button{color:#1c1a0e;background:linear-gradient(100deg, var(--acid), #ffd65d);justify-content:space-between;align-items:center;width:100%;margin-top:14px;padding:0 19px;display:flex;box-shadow:0 9px 28px #f6ee5c33}.primary-button:hover:not(:disabled),.secondary-button:hover{filter:brightness(1.08);transform:translateY(-2px)}.primary-button:disabled{cursor:not-allowed;opacity:.35}.separator{color:#807568;letter-spacing:.1em;align-items:center;gap:10px;margin:21px 0 13px;font-family:Barlow Condensed;font-size:11px;font-weight:800;display:flex}.separator:before,.separator:after{content:"";background:#ffffff1c;flex:1;height:1px}.join-row{grid-template-columns:1fr 1.1fr;gap:9px;display:grid}#room-code{text-align:center;letter-spacing:.19em;text-transform:uppercase;font-family:Barlow Condensed;font-size:21px}.secondary-button{color:#fff;background:#523a2c}.form-error{color:#ff9b81;min-height:18px;margin:10px 0 -10px;font-size:12px}.feature-strip{gap:1px;display:flex;position:absolute;bottom:35px;left:0}.feature-strip div{background:#481e1438;border-left:1px solid #fff3;align-items:baseline;gap:8px;padding:9px 20px;display:flex}.feature-strip b{font-family:Barlow Condensed;font-size:27px}.feature-strip span{letter-spacing:.12em;font-family:Barlow Condensed;font-size:11px;font-weight:700}.dune{filter:blur(1px);background:#ffb34275;border-radius:50% 50% 0 0;position:absolute;transform:rotate(-7deg)}.dune-a{width:65vw;height:21vh;bottom:-13vh;right:-7vw}.dune-b{opacity:.55;width:50vw;height:17vh;bottom:-10vh;left:-12vw}.lobby-screen{background:radial-gradient(circle at 70% 0,#51402b 0,#1b1712 48%,#0e0c0a 100%);padding:24px 4vw 3vw;position:absolute;inset:0}.lobby-screen:before{content:"";opacity:.12;background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px);background-size:46px 46px;position:absolute;inset:0}.lobby-topbar{z-index:2;justify-content:space-between;align-items:center;height:52px;display:flex;position:relative}.lobby-status{align-items:center;gap:9px;display:flex}.leave-button{cursor:pointer;color:#8e867a;letter-spacing:.12em;background:0 0;border:0;font:800 11px Barlow Condensed}.leave-button:hover{color:var(--cream)}.mini-logo{letter-spacing:-.04em;font-family:Barlow Condensed;font-size:30px;font-style:italic;font-weight:900}.mini-logo i{color:var(--acid)}.connection-pill{border:1px solid var(--line);color:#bfb7a7;letter-spacing:.12em;border-radius:30px;padding:8px 12px;font:700 11px Barlow Condensed}.connection-pill span{background:#69e997;border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block;box-shadow:0 0 8px #69e997}.connection-pill.reconnecting span{background:#ffae4d;box-shadow:0 0 8px #ffae4d}.lobby-layout{z-index:2;grid-template-columns:minmax(260px,330px) 1fr;align-items:center;gap:clamp(28px,5vw,75px);max-width:1320px;height:calc(100% - 65px);margin:auto;display:grid;position:relative}.room-panel{border-radius:7px;padding:27px}.room-panel h2,.garage-heading h2{text-transform:uppercase;letter-spacing:-.04em;margin:8px 0 15px;font:italic 900 clamp(38px,5vw,67px)/.82 Barlow Condensed}.room-panel>p,.garage-heading p{color:#9e9485;font-size:13px}.room-code-button{cursor:pointer;background:#f6ee5c0f;border:1px dashed #f6ee5c80;border-radius:5px;width:100%;margin:13px 0 27px;padding:14px}.room-code-button span{color:var(--acid);letter-spacing:.22em;font:900 34px Barlow Condensed;display:block}.room-code-button small{color:#a9a171;letter-spacing:.16em;font:700 10px Barlow Condensed}.players-heading{border-bottom:1px solid var(--line);letter-spacing:.12em;color:#aaa08e;justify-content:space-between;padding-bottom:8px;font:800 12px Barlow Condensed;display:flex}.players-list{min-height:164px}.player-row{border-bottom:1px solid #ffffff0f;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:10px 0;display:grid}.player-color{background:var(--player-color);border:3px solid #ffffff2e;border-radius:50%;width:24px;height:24px}.player-row strong{font:800 15px Barlow Condensed}.player-row small{color:#80796d;font-size:10px}.player-row em{color:var(--acid);letter-spacing:.08em;font:800 10px Barlow Condensed}.player-row.offline{opacity:.4}.garage-panel{flex-direction:column;justify-content:center;align-self:stretch;min-width:0;display:flex}.garage-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px;display:flex}.garage-heading h2{margin-bottom:0}.garage-heading p{text-align:right;max-width:250px}.vehicle-grid{grid-template-columns:repeat(4,minmax(150px,1fr));gap:13px;display:grid}.vehicle-card{cursor:pointer;border:1px solid var(--line);text-align:left;background:linear-gradient(155deg,#ffffff14,#ffffff06);border-radius:7px;min-width:0;padding:0;transition:all .2s;overflow:hidden}.vehicle-card:hover:not(:disabled){border-color:#f6ee5c80;transform:translateY(-5px)}.vehicle-card.selected{border-color:var(--acid);box-shadow:0 0 0 2px #f6ee5c2e,0 18px 35px #0000004d}.vehicle-card:disabled{opacity:.25;filter:grayscale();cursor:not-allowed}.vehicle-art{background:radial-gradient(circle at 50% 42%,#f46a2457,#0000 47%),linear-gradient(#342a21,#17130f);height:clamp(125px,18vh,190px);position:relative;overflow:hidden}.vehicle-art:after{content:"";background:#0000008c;border-radius:50%;height:4px;position:absolute;bottom:25px;left:8%;right:8%;box-shadow:0 10px 14px #000}.vehicle-art span{display:block;position:absolute}.wheel{z-index:3;background:#9e6734;border:6px solid #10100f;border-radius:50%;width:29px;height:29px;bottom:28px}.w1{left:22%}.w2{right:20%}.body-shape{z-index:2;background:#e35a25;border-radius:38% 45% 18% 15%;height:38px;bottom:42px;left:18%;right:16%;transform:skew(-10deg);box-shadow:inset -8px -7px #43180f59}.pilot-dot{z-index:1;background:#2b211c;border-radius:50% 50% 30% 30%;width:30px;height:38px;bottom:68px;left:49%}.moto-art .body-shape,.scooter-art .body-shape{height:16px;bottom:47px;left:32%;right:29%}.moto-art .pilot-dot,.scooter-art .pilot-dot{bottom:59px;left:47%;transform:rotate(-18deg)}.scooter-art .body-shape{background:#54cabc;border-radius:4px}.kart-art .body-shape{background:#d89e36;height:26px;left:12%;right:11%}.vehicle-meta{padding:14px 14px 8px}.vehicle-meta strong{font:italic 900 19px Barlow Condensed;display:block}.vehicle-meta span{color:#8f8678;letter-spacing:.13em;font:700 10px Barlow Condensed}.stats{gap:4px;padding:2px 14px 15px;display:grid}.stats i{background:linear-gradient(90deg, var(--orange) var(--value), #ffffff14 var(--value));height:3px}.lobby-actions{justify-content:flex-end;align-items:center;gap:25px;margin-top:26px;display:flex}.lobby-actions p{color:#8d8578;font-size:12px}.start-button{width:min(320px,100%);margin:0}.race-hud{pointer-events:none;padding:max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));font-family:Barlow Condensed;position:absolute;inset:0}.hud-top,.hud-bottom{justify-content:space-between;align-items:flex-start;display:flex}.lap-card,.speedometer,.race-time{border-left:4px solid var(--acid);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(135deg,#130f0ce6,#130f0c80);padding:10px 17px;transform:skew(-4deg)}.lap-card small,.race-time small{color:#a99f8e;letter-spacing:.14em;font-weight:800;display:block}.lap-card strong{font-size:38px;line-height:.75}.lap-card strong i{color:#81796d;font-size:19px;font-style:normal}.race-rankings{gap:4px;min-width:250px;display:grid}.mini-rank{border-right:3px solid var(--player-color);background:#120e0bb8;grid-template-columns:22px 1fr auto;gap:8px;padding:6px 10px;font-size:13px;display:grid}.mini-rank b{color:var(--acid)}.icon-button{pointer-events:auto;cursor:pointer;background:#120e0bad;border:1px solid #fff3;border-radius:50%;width:42px;height:42px;font-size:20px}.countdown{place-items:center;display:grid;position:absolute;inset:0}.countdown span{color:var(--acid);text-shadow:10px 12px #1c0f0a8c;font:italic 900 clamp(120px,25vw,320px)/1 Barlow Condensed;animation:.65s both countdown-pop}@keyframes countdown-pop{0%{opacity:0;transform:scale(1.8)rotate(-8deg)}35%{opacity:1;transform:scale(.9)rotate(2deg)}to{opacity:1;transform:scale(1)}}.hud-bottom{left:max(24px, env(safe-area-inset-left));right:max(24px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));align-items:end;position:absolute}.speedometer{min-width:140px}.speedometer strong{font-size:52px;line-height:.7}.speedometer span{color:#9b9285;margin-left:7px;font-size:12px;font-weight:800}.speedometer i{color:var(--cyan);letter-spacing:.12em;font-style:normal;font-weight:900;display:none}.speedometer.boosting i{display:block}.control-help{color:#d0c6b4;opacity:.8;align-items:center;gap:5px;font-size:11px;display:flex}kbd{text-align:center;background:#0f0c0abf;border:1px solid #fff3;border-bottom-width:3px;border-radius:4px;min-width:23px;padding:4px 6px;font-family:inherit;font-weight:800}.control-help span{margin-right:7px}.race-time{border-left-color:var(--orange);text-align:right}.race-time strong{font-size:25px}.touch-controls{inset:auto 0 max(8px, env(safe-area-inset-bottom));padding:0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));pointer-events:none;justify-content:space-between;align-items:end;display:none;position:absolute}.touch-controls button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#110e0b9e;border:1px solid #ffffff40;font:900 13px Barlow Condensed}.touch-steer,.touch-pedals{gap:8px;display:flex}.touch-steer button{border-radius:50%;width:68px;height:68px;font-size:24px}.touch-pedals button{border-radius:45% 45% 18% 18%;width:72px;height:87px}#touch-gas{border-color:var(--acid);color:var(--acid);background:#f6ee5c61}.touch-drift{border-radius:50%;width:62px;height:62px}.touch-small{border-radius:50%;width:43px;height:43px}.finish-screen{background:radial-gradient(circle,#1f150e40,#090706cc);place-items:center;padding:20px;display:grid;position:absolute;inset:0}.finish-card{border-radius:8px;width:min(560px,94vw);padding:clamp(25px,4vw,45px)}.finish-card h2{margin:3px 0 25px;font:italic 900 clamp(46px,8vw,78px)/1 Barlow Condensed}.final-ranking{gap:8px;margin-bottom:22px;display:grid}.rank-row{border-left:4px solid var(--player-color);background:#ffffff0f;grid-template-columns:50px 18px 1fr auto;align-items:center;gap:12px;padding:11px 14px;animation:.35s both rank-in;display:grid}.rank-row:first-child{background:linear-gradient(90deg,#f6ee5c30,#ffffff0d)}.rank-row b{color:var(--acid);font:italic 900 28px Barlow Condensed}.rank-row i{background:var(--player-color);border-radius:50%;width:12px;height:12px}.rank-row strong{font:800 17px Barlow Condensed}.rank-row span{color:#cfc5b2;font-variant-numeric:tabular-nums}@keyframes rank-in{0%{opacity:0;transform:translate(25px)}}.loading-overlay{z-index:20;background:#17130f;place-content:center;justify-items:center;display:grid;position:absolute;inset:0}.loader-wheel{border:8px dashed var(--orange);border-radius:50%;width:60px;height:60px;margin-bottom:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay strong{font:italic 900 28px Barlow Condensed}.loading-overlay span{color:#82796c;margin-top:6px;font-size:12px}.toast{z-index:50;border:1px solid #ffffff26;border-left:4px solid var(--orange);pointer-events:none;background:#18120df0;border-radius:4px;max-width:min(480px,90vw);padding:12px 18px;font-size:13px;position:absolute;top:25px;left:50%;transform:translate(-50%);box-shadow:0 16px 45px #00000059}.portrait-warning{z-index:100;background:#17130f;place-content:center;justify-items:center;gap:7px;display:none;position:absolute;inset:0}.portrait-warning strong{color:var(--acid);font:italic 900 36px Barlow Condensed}.portrait-warning span{color:#9f9585}@media (max-width:950px){.home-shell{grid-template-columns:1fr .85fr;gap:25px}.hero h1{font-size:clamp(76px,13vw,125px)}.vehicle-grid{grid-template-columns:repeat(2,1fr)}.vehicle-art{height:125px}.garage-heading p{display:none}.room-panel h2{font-size:43px}}@media (hover:none),(pointer:coarse){.touch-controls{display:flex}.control-help{display:none}.race-time,.speedometer{margin-bottom:92px}}@media (max-width:720px) and (orientation:landscape){.home-shell{grid-template-columns:1fr 1fr;gap:18px;width:96vw}.hero .eyebrow,.hero p,.feature-strip{display:none}.hero h1{font-size:92px}.join-card{padding:16px}.primary-button{min-height:44px}.lobby-screen{padding:10px 2vw;overflow:auto}.lobby-topbar{height:38px}.lobby-layout{grid-template-columns:220px 1fr;gap:18px;height:auto}.room-panel{padding:15px}.room-panel h2{font-size:32px}.room-panel>p{display:none}.room-code-button{margin:8px 0 12px;padding:8px}.room-code-button span{font-size:24px}.players-list{min-height:115px}.player-row{padding:5px 0}.garage-heading{margin-bottom:8px}.garage-heading h2{font-size:36px}.vehicle-grid{grid-template-columns:repeat(4,1fr);gap:6px}.vehicle-art{height:85px}.vehicle-meta{padding:7px}.vehicle-meta strong{font-size:14px}.stats{display:none}.lobby-actions{margin-top:9px}}@media (orientation:portrait) and (max-width:800px){.portrait-warning{display:grid}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
