:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f4e9;background:#0c1c1b;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}.hidden{display:none!important}.app{height:100dvh;display:flex;flex-direction:column;padding:16px 20px 10px;gap:12px;max-width:1800px;margin:auto}.topbar{height:48px;flex:none;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:baseline;gap:2px;font-size:20px;font-weight:1000;letter-spacing:-1.3px;line-height:1}.brand-mark{align-self:center;display:inline-grid;place-items:center;margin-right:8px;width:28px;height:28px;border-radius:9px;background:#f8c847;color:#102622;font-size:20px;transform:rotate(-12deg)}.brand-accent{color:#f7c843}.brand small{font-size:9px;font-weight:800;letter-spacing:2.2px;margin-left:12px;color:#8daba0}.top-right{display:flex;align-items:center;gap:18px}.pill{font-size:11px;font-weight:800;letter-spacing:.08em;color:#bed5c8;border:1px solid #35544c;border-radius:50px;padding:9px 13px;background:#19312d}.dot{display:inline-block;width:7px;height:7px;background:#f18b72;border-radius:50%;margin-right:6px}.dot.online{background:#a9db83;box-shadow:0 0 12px #a9db83}.text-button{background:none;border:0;color:#e6dcc9;font-size:12px;text-decoration:underline;text-underline-offset:4px}.stage{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:22px;background:#537b55;border:1px solid #72906e;box-shadow:0 20px 60px #0006}#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}.stage-vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#071b1acc 0%,#09231b73 30%,transparent 58%),linear-gradient(0deg,#061a1a69,transparent 24%)}.panel{position:absolute;z-index:4;width:min(430px,calc(100% - 32px));left:clamp(18px,5vw,84px);top:50%;transform:translateY(-50%);padding:30px 32px;background:#0e2724ef;border:1px solid #52746a;box-shadow:0 28px 70px #06171499;border-radius:20px;backdrop-filter:blur(18px)}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2.6px;color:#ecc464;display:flex;align-items:center;gap:9px}.eyebrow-line{width:22px;height:2px;background:#ecc464}.panel h1,.panel h2{font-weight:1000;letter-spacing:-.065em;line-height:1.04;margin:19px 0 16px}.panel h1{font-size:clamp(38px,4vw,58px)}.panel h1 em{font-style:normal;color:#f5c94a}.panel h2{font-size:44px}.intro,.panel-copy{color:#b2c7b9;line-height:1.55;font-size:13px;margin:0 0 24px;max-width:355px}.input-label,.micro-label{display:block;color:#a9c3b4;font-weight:900;font-size:10px;letter-spacing:1.8px;margin-bottom:8px}.field{width:100%;height:45px;border:1px solid #52766a;border-radius:9px;background:#173933;color:#fff8e9;padding:0 14px;outline:none;font-weight:700}.field:focus{border-color:#f5cd61;box-shadow:0 0 0 3px #f5cd6130}.field::placeholder{color:#7fa298}.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.btn{height:46px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;border-radius:9px;padding:0 15px;font-weight:900;font-size:13px;white-space:nowrap}.btn span{font-size:18px;font-weight:500}.btn-primary{background:#f5c84b;color:#142822;box-shadow:0 4px 0 #b18b30}.btn-primary:hover{background:#ffe075}.btn-secondary{background:#29584c;color:#eff8e6;border:1px solid #528775}.btn-secondary:hover{background:#35735e}.join-row{display:grid;grid-template-columns:1fr 115px;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid #36584c}.code-field{text-transform:uppercase;letter-spacing:2px}.btn-join{background:#e6efe2;color:#16332b}.home-foot{display:flex;justify-content:space-between;margin-top:22px;color:#829f91;font-size:9px;font-weight:900;letter-spacing:1.3px}.room-code-wrap{display:flex;justify-content:space-between;align-items:end;gap:8px;padding:16px 18px;background:#193b34;border:1px dashed #8ca887;border-radius:12px;margin-bottom:20px}.room-code-wrap strong{display:block;font-size:29px;letter-spacing:6px;color:#f7d475}.copy-button{padding:0 0 3px;background:none;border:0;color:#f6d87b;text-align:right;text-decoration:underline;text-underline-offset:4px;font-size:11px;font-weight:800}.roster-heading{display:flex;justify-content:space-between;color:#a5c2b2;font-size:10px;font-weight:900;letter-spacing:1.7px;margin-bottom:9px}.roster{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:170px;overflow:auto;margin-bottom:20px}.racer{display:flex;align-items:center;gap:8px;padding:8px;background:#1a3c35;border-radius:8px;font-size:12px;font-weight:800;min-width:0}.racer-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.racer small{margin-left:auto;color:#e6ca7b;font-size:9px}.racer-swatch{width:14px;height:14px;border:2px solid #fff9;border-radius:5px;flex:none}.full{width:100%}.waiting{text-align:center;margin:12px 0 0;color:#d7c687;font-size:12px}.countdown{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a1e1b66;text-shadow:0 5px 30px #091d1a}.countdown span,.countdown small{font-size:14px;font-weight:900;letter-spacing:5px}.countdown strong{font-size:clamp(120px,24vw,260px);line-height:.95;color:#f8cb4a;font-weight:1000;letter-spacing:-.09em}.countdown small{font-size:10px;margin-top:16px}.race-hud{position:absolute;z-index:3;inset:20px 22px auto;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.hud-left,.hud-right{display:flex;align-items:center;gap:13px;background:#0c2826dc;border:1px solid #7897849c;border-radius:13px;padding:10px 14px;box-shadow:0 8px 26px #10251e5c}.hud-label{font-size:10px;letter-spacing:1.2px;font-weight:900;color:#b1c9b9}.hud-left strong{font-size:25px;line-height:1}.hud-left strong span{font-size:13px;color:#a8bfb0}.hud-sep{width:1px;height:26px;background:#6e8778}.speed{display:flex;align-items:baseline;gap:4px}.speed strong{font-size:28px;min-width:53px;text-align:right}.speed span{font-size:9px;font-weight:900;color:#aac7b3}.item-button{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:48px;border-radius:9px;border:1px solid #f6cf6b;background:#f7cd5a;color:#15342b}.item-button span{font-size:22px;line-height:1}.item-button small{font-size:8px;font-weight:1000}.spectate-banner{position:absolute;top:73px;left:50%;transform:translateX(-50%);background:#f5c84b;color:#1a322a;border-radius:100px;padding:8px 15px;font-size:11px;font-weight:1000;white-space:nowrap}.spectate-banner span{font-weight:700;margin-left:8px}.result-panel .results{display:flex;flex-direction:column;gap:5px;margin-bottom:20px;max-height:260px;overflow:auto}.result-row{display:grid;grid-template-columns:30px 16px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 10px;background:#1a3d36;border-radius:8px;font-size:12px;font-weight:800}.result-row:first-child{background:#725c2d;color:#fff2cf}.result-row strong{font-size:17px}.result-row .result-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-row .result-time{color:#c3d3c1;font-variant-numeric:tabular-nums}.touch-controls{position:absolute;z-index:3;left:15px;right:15px;bottom:18px;display:flex;justify-content:space-between;pointer-events:none}.touch-steer,.touch-drive{display:flex;align-items:end;gap:9px}.control{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:64px;height:64px;border-radius:18px;border:2px solid #fff8;background:#173d36c9;color:white;font-size:23px;font-weight:1000;box-shadow:0 5px 0 #071d19aa}.control:active,.control.active{transform:translateY(3px);box-shadow:0 2px 0 #071d19aa;background:#356b54}.control.gas{height:82px;width:82px;background:#efc54d;color:#1b322a;font-size:16px}.control.brake{font-size:13px}.toast{position:absolute;z-index:8;bottom:25px;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:9px;background:#172c27;color:#fff3cf;box-shadow:0 9px 32px #0008;font-size:12px;font-weight:800;text-align:center;max-width:90%}.stage-corner{position:absolute;right:20px;bottom:17px;font-size:9px;letter-spacing:1.7px;font-weight:900;color:#eef5daaa;pointer-events:none}.stage-corner span{color:#f5c943}.footer{display:flex;justify-content:space-between;gap:10px;flex:none;color:#93a99b;font-size:10px;font-weight:800;letter-spacing:.09em;padding:0 2px}.footer kbd{border:1px solid #476157;border-radius:4px;padding:1px 3px;font-size:9px}
@media (max-width:700px){.app{padding:8px 8px 6px;gap:7px}.topbar{height:42px}.brand{font-size:16px}.brand small{display:none}.brand-mark{width:24px;height:24px;font-size:16px}.pill{font-size:9px;padding:6px 8px}.top-right{gap:7px}.text-button{font-size:10px}.stage{border-radius:15px}.stage-vignette{background:linear-gradient(0deg,#071d1a7d,transparent 45%)}.panel{left:50%;top:47%;transform:translate(-50%,-50%);padding:23px 20px;width:min(400px,calc(100% - 25px));max-height:calc(100% - 28px);overflow:auto}.panel h1{font-size:clamp(38px,10vw,48px)}.panel h2{font-size:36px}.intro,.panel-copy{font-size:12px;margin-bottom:17px}.home-foot{margin-top:14px}.race-hud{inset:10px 9px auto}.hud-left,.hud-right{gap:6px;padding:7px 8px}.hud-left strong{font-size:19px}.hud-label{font-size:8px}.hud-sep{height:21px}.speed strong{font-size:21px;min-width:39px}.speed span{font-size:7px}.item-button{width:44px;height:40px}.item-button span{font-size:17px}.spectate-banner{top:57px;font-size:10px}.control{width:58px;height:58px}.control.gas{width:74px;height:74px}.stage-corner{display:none}.footer{font-size:8px;justify-content:center;text-align:center}.footer span:last-child{display:none}}
@media (max-height:620px){.home-panel{top:50%;padding-top:16px;padding-bottom:16px}.home-panel h1{font-size:36px;margin:10px 0}.home-panel .intro{margin-bottom:10px}.home-foot{display:none}.stage-corner{display:none}}

.leaderboard{position:absolute;z-index:3;top:108px;left:22px;width:268px;padding:10px;background:#0c2826e8;border:1px solid #7897849c;border-radius:13px;box-shadow:0 8px 26px #10251e5c;pointer-events:none}
.leaderboard-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 3px 8px;color:#f6d677;font-size:9px;letter-spacing:1.2px}
.leaderboard-heading span{color:#a9c3b4;font-size:8px;white-space:nowrap}
.leaderboard-heading time{margin-left:4px;color:#e9f1df;font-size:9px;letter-spacing:0;font-variant-numeric:tabular-nums}
.leaderboard-rows{display:grid;gap:4px}
.leaderboard-row{display:grid;grid-template-columns:20px 9px minmax(0,1fr) 32px 37px;align-items:center;gap:5px;min-height:28px;padding:4px 6px;background:#1a3c35d9;border:1px solid transparent;border-radius:6px;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums}
.leaderboard-row.is-you{background:#385837f0;border-color:#f5c84b}
.leaderboard-place{color:#f5d678;font-size:11px}
.leaderboard-swatch{width:9px;height:9px;border-radius:3px;border:1px solid #fff9}
.leaderboard-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaderboard-lap,.leaderboard-speed{text-align:right;white-space:nowrap}
.leaderboard-lap{color:#f9e4a0}
.leaderboard-speed{color:#abc9b6;font-size:9px}
.leaderboard-row.is-finished .leaderboard-speed{color:#f5d678}
@media (max-width:700px){.leaderboard{top:94px;left:9px;width:min(248px,calc(100% - 18px));padding:7px}.leaderboard-heading{margin-bottom:5px}.leaderboard-rows{gap:2px}.leaderboard-row{min-height:26px;padding:3px 5px;font-size:9px}}