:root{--accent:#ffd400;--panel:#0e1422b8;--panel-border:#ffffff24}*{box-sizing:border-box}html,body{color:#fff;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;background:#0b0e14;width:100%;height:100%;margin:0;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;position:fixed;inset:0;overflow:hidden}#app{position:fixed;inset:0}canvas{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;display:block}.hidden{display:none!important}.hud{pointer-events:none;z-index:10;position:fixed;inset:0}.hud-top{gap:12px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.panel{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;flex-direction:column;align-items:center;min-width:78px;padding:8px 16px;display:flex;box-shadow:0 6px 20px #00000059}.panel .label{letter-spacing:2px;opacity:.7;font-size:11px}.panel span:last-child{font-size:26px;font-weight:800;line-height:1.1}.panel small{opacity:.7;font-size:14px}.pos span:last-child{color:var(--accent)}.minimap{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;width:168px;height:168px;position:absolute;top:16px;right:16px}.speedo{background:var(--panel);border:1px solid var(--panel-border);text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;padding:10px 22px;position:absolute;bottom:22px;right:26px}.speedo span{color:var(--accent);font-size:44px;font-weight:800}.speedo small{letter-spacing:2px;opacity:.7;font-size:12px;display:block}@media (pointer:coarse){.speedo{top:190px;bottom:auto;right:16px}}.wrongway{letter-spacing:2px;color:#fff;text-shadow:0 2px 8px #0009;white-space:nowrap;background:#c81414d9;border:2px solid #fff;border-radius:14px;padding:12px 30px;font-size:clamp(22px,4vw,40px);font-weight:900;animation:.7s step-end infinite wwblink;position:absolute;top:26%;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #b4000080}@keyframes wwblink{50%{opacity:.35}}.countdown{color:#fff;text-shadow:0 0 30px #0009;opacity:0;justify-content:center;align-items:center;font-size:22vmin;font-weight:900;display:flex;position:absolute;inset:0}.countdown.show{animation:.8s ease-out pop}.countdown.go{color:var(--accent);animation:.7s ease-out pop}@keyframes pop{0%{opacity:0;transform:scale(2.4)}25%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(.8)}}.screen{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-align:center;background:radial-gradient(at 50% 30%,#2846788c,#0000 60%),linear-gradient(#080c14d1,#080c14eb);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.screen-inner{padding:30px}.start h1{letter-spacing:4px;text-shadow:0 8px 30px #00000080;margin:0;font-size:clamp(48px,10vw,110px);font-weight:900}.start h1 span{color:var(--accent)}.tagline{opacity:.85;letter-spacing:1px;margin:8px 0 28px;font-size:18px}.controls{opacity:.6;margin-top:22px;font-size:14px}.btn{pointer-events:auto;cursor:pointer;font:inherit;letter-spacing:2px;color:#1a1300;background:var(--accent);border:none;border-radius:40px;padding:16px 42px;font-size:22px;font-weight:800;transition:transform .12s,box-shadow .12s;box-shadow:0 10px 30px #ffd40059}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px #ffd40080}.btn:active{transform:translateY(1px)}.results h2{letter-spacing:3px;margin:0 0 18px;font-size:46px}.results table{border-collapse:collapse;min-width:340px;margin:0 auto 26px;font-size:18px}.results td{text-align:left;border-bottom:1px solid #ffffff1f;padding:9px 16px}.results td:first-child{width:40px;color:var(--accent);font-weight:800}.results td:last-child{text-align:right;font-variant-numeric:tabular-nums}.results tr.you{background:#ffd40024}.touch{z-index:15;pointer-events:none;touch-action:none;position:fixed;inset:0}.joystick{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:30px;left:22px}.joy-track{pointer-events:auto;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);touch-action:none;background:#10162480;border:2px solid #ffffff47;border-radius:46px;width:210px;height:92px;position:relative;box-shadow:inset 0 2px 10px #0006}.joy-arrow{color:#fff6;pointer-events:none;font-size:34px;font-weight:900;position:absolute;top:50%;transform:translateY(-50%)}.joy-arrow.l{left:16px}.joy-arrow.r{right:16px}.joy-knob{background:radial-gradient(circle at 38% 32%, #fff7cf, var(--accent) 70%);color:#5a4400;border:2px solid #00000040;border-radius:50%;justify-content:center;align-items:center;width:76px;height:76px;font-size:30px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px 16px #00000073}.joy-label{letter-spacing:3px;opacity:.65;pointer-events:none;font-size:12px}.pedals{flex-direction:column;align-items:flex-end;gap:14px;display:flex;position:absolute;bottom:26px;right:22px}.pedal{pointer-events:auto;color:#fff;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid #ffffff4d;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-weight:800;display:flex;box-shadow:0 6px 18px #0006}.pedal .ic{font-size:26px;line-height:1}.pedal .lbl{letter-spacing:1px;font-size:11px}.pedal.gas{background:#2eaa5099;width:104px;height:104px}.pedal.brake{background:#d23c3299;width:88px;height:88px}.pedal.drift{background:#ffc8006b;width:78px;height:78px}.pedal:active{filter:brightness(1.4);transform:scale(.95)}.menu{z-index:18;pointer-events:none;position:fixed;inset:0}.menu>*{pointer-events:auto}.menu-logo{pointer-events:none;filter:drop-shadow(0 10px 26px #0000008c);width:clamp(150px,19vw,250px);height:auto;position:absolute;top:-6px;left:14px}.menu-name{letter-spacing:1px;background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;border-radius:30px;padding:8px 22px;font-size:22px;font-weight:800;position:absolute;bottom:64px;left:50%;transform:translate(-50%)}.menu-hint{opacity:.6;pointer-events:none;margin:0;font-size:13px;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.menu-btn{cursor:pointer;font:inherit;color:#fff;background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;transition:transform .12s,background .12s,box-shadow .12s;box-shadow:0 8px 24px #00000059}.menu-btn:hover{background:#1e2a42d9;transform:translateY(-2px)}.menu-btn:active{transform:translateY(1px)}.menu-btn.settings{flex-direction:column;align-items:center;gap:2px;padding:10px 16px;font-size:26px;font-weight:800;display:flex;position:absolute;top:22px;right:22px}.menu-btn.settings small{letter-spacing:1px;opacity:.85;font-size:13px}.menu-left{flex-direction:column;gap:18px;display:flex;position:absolute;top:50%;left:26px;transform:translateY(-50%)}.menu-btn.block{flex-direction:column;justify-content:center;align-items:center;gap:10px;width:168px;height:132px;font-size:44px;display:flex}.menu-btn.block span{letter-spacing:1px;font-size:22px;font-weight:800}.menu-btn.play{letter-spacing:2px;color:#1a1300;background:var(--accent);border:none;border-radius:22px;padding:22px 46px;font-size:30px;font-weight:900;position:absolute;bottom:96px;right:30px;box-shadow:0 12px 32px #ffd40066}.menu-btn.play:hover{background:#ffe04d;box-shadow:0 16px 40px #ffd4008c}.menu-btn.play b{font-size:26px}.modal{z-index:24;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#060a1299;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-box{border:1px solid var(--panel-border);text-align:center;background:linear-gradient(#182032f5,#0e1422f5);border-radius:20px;min-width:320px;padding:28px 34px;box-shadow:0 24px 60px #00000080}.modal-box h3{letter-spacing:3px;margin:0 0 20px;font-size:26px}.garage-row{justify-content:center;align-items:center;gap:18px;display:flex}.garage-name{min-width:150px;color:var(--accent);font-size:24px;font-weight:800}.garage-count{opacity:.7;letter-spacing:1px;margin:10px 0 22px}.arrow{cursor:pointer;border:1px solid var(--panel-border);color:#fff;background:#ffffff14;border-radius:50%;width:56px;height:56px;font-size:22px}.arrow:hover{background:var(--accent);color:#1a1300}.setting-row{justify-content:space-between;align-items:center;gap:26px;margin:14px 0;font-size:18px;display:flex}.toggle,.laps button{cursor:pointer;font:inherit;border:1px solid var(--panel-border);color:#fff;background:#ffffff14;border-radius:12px;padding:8px 16px;font-weight:700}.toggle.off{opacity:.55}.laps{gap:8px;display:flex}.laps button.on{background:var(--accent);color:#1a1300;border-color:var(--accent)}.shop-msg{opacity:.85;max-width:280px;margin:0 auto 22px;font-size:16px;line-height:1.5}.modal-box .btn{margin-top:8px;padding:12px 32px;font-size:18px}.btn:disabled,.btn.small:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.7);box-shadow:none}.btn:disabled:hover{transform:none}.reward{color:var(--accent);margin:4px 0 22px;font-size:26px;font-weight:800}.reward small{color:#fff;opacity:.7;font-size:15px;font-weight:600}.screen.garage{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(#060a1200 32%,#060a1240 58%,#060a12eb 100%);display:block}.garage-title{letter-spacing:4px;margin:0;font-size:34px;position:absolute;top:22px;left:50%;transform:translate(-50%)}.g-arrow{border:1px solid var(--panel-border);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#141c2c99;border-radius:50%;width:66px;height:66px;font-size:38px;line-height:1;position:absolute;top:46%;transform:translateY(-50%)}.g-arrow:hover{background:var(--accent);color:#1a1300}.g-arrow.prev{left:20px}.g-arrow.next{right:20px}.garage-panel{text-align:center;border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0c121ec7;border-radius:20px;width:min(440px,90vw);padding:20px 24px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);box-shadow:0 16px 44px #00000080}.g-name{color:var(--accent);letter-spacing:1px;font-size:30px;font-weight:900}.g-stats{opacity:.85;margin:8px 0;font-size:15px}.g-stats b{color:#fff}.g-status{margin-bottom:16px;font-size:16px;font-weight:700}.g-status.owned{color:#5fd07a}.g-status.locked{color:#ff9a5a}.g-hint{opacity:.7;font-size:13px;font-weight:500}.g-actions{justify-content:center;gap:12px;display:flex}.btn.ghost{color:#fff;box-shadow:none;background:#ffffff1a}.garage-panel .btn{padding:12px 30px;font-size:18px}.screen.shop{overflow-y:auto}.shop-inner{width:min(520px,92vw);max-height:90vh;overflow-y:auto}.shop-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.shop-head h2{letter-spacing:3px;margin:0;font-size:38px}.ticket-count{color:var(--accent);background:#ffd4001f;border:1px solid #ffd40059;border-radius:30px;padding:8px 18px;font-size:22px;font-weight:800}.shop-section{text-align:left;border:1px solid var(--panel-border);background:#0c121e99;border-radius:16px;margin-top:22px;padding:16px 18px}.shop-section h3{letter-spacing:2px;opacity:.8;margin:0 0 12px;font-size:16px}.shop-row{border-bottom:1px solid #ffffff14;align-items:center;gap:12px;padding:10px 4px;display:flex}.shop-row:last-child{border-bottom:none}.s-name{flex:1;font-size:18px;font-weight:800}.s-stat{opacity:.6;font-size:13px}.owned-tag{color:#5fd07a;font-size:14px;font-weight:700}.owned-tag.free{color:#8fb6ff}.btn.small{letter-spacing:.5px;cursor:pointer;background:var(--accent);color:#1a1300;border:none;border-radius:12px;padding:8px 16px;font-size:15px;font-weight:800}.redeem-row{gap:10px;display:flex}.code-input{font:inherit;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--panel-border);color:#fff;background:#ffffff14;border-radius:12px;flex:1;min-width:0;padding:10px 14px;font-weight:700}.code-input::placeholder{color:#fff6;letter-spacing:1px}.redeem-msg{min-height:18px;margin:10px 2px 0;font-size:14px;font-weight:600}.redeem-msg.ok{color:#5fd07a}.redeem-msg.err{color:#ff7a6a}.shop-inner .btn.close{margin-top:22px;padding:12px 36px;font-size:18px}
