:root{--fg: #f6f3ee;--dim: rgba(246, 243, 238, .55);--accent: #ff3b2f;--accent2: #ffc53d;--glass: rgba(12, 12, 16, .42);--line: rgba(255, 255, 255, .14);--hud-font: "Chakra Petch", "Arial Narrow", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#0b0b0d;color:var(--fg);font-family:Inter,system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}canvas#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}.hidden{display:none!important}#hud{position:fixed;inset:0;z-index:6;pointer-events:none;font-family:var(--hud-font)}#hud button,#stick{pointer-events:auto}#bReset,#bRedraw{position:absolute;top:max(16px,env(safe-area-inset-top));left:16px;z-index:6;pointer-events:auto;font-family:var(--hud-font);font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--fg);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#bRedraw{top:calc(max(16px,env(safe-area-inset-top)) + 40px)}#tally{position:absolute;top:max(16px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;gap:14px;align-items:baseline;padding:5px 12px;background:var(--glass);border:1px solid var(--line);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:12px;white-space:nowrap;color:#7fb0ff}#tally i{font-style:normal;font-size:10px;letter-spacing:.16em;color:var(--dim)}#tally b{font-variant-numeric:tabular-nums}#tally span+span b{color:var(--fg)}#drift{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 36px);left:50%;transform:translate(-50%);text-align:center;min-width:240px}#chainPts{font-size:54px;font-weight:700;font-style:italic;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:#11141b;text-shadow:0 0 2px rgba(255,255,255,.9),0 0 12px rgba(255,255,255,.55);transition:color .2s,transform .12s}#chainPts.live{color:#0f2f86}#chainPts.lost{color:#b3150c}#driftRow{display:flex;justify-content:center;gap:14px;margin-top:4px;font-size:18px;font-weight:700}#mult{color:#b3150c;text-shadow:0 0 2px rgba(255,255,255,.9),0 0 10px rgba(255,255,255,.5)}#angle{color:var(--fg);min-width:48px}#chainBar{width:220px;height:4px;margin:8px auto 6px;background:#11141b47;border-radius:2px;overflow:hidden}#chainBar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2))}#coneProg{min-height:16px;font-size:13px;font-weight:700;letter-spacing:.16em;color:#ff8a3d;margin-bottom:4px}#totals{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 40px);right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:10px;letter-spacing:.14em;color:#11141bb8;text-shadow:0 0 2px rgba(255,255,255,.85),0 0 8px rgba(255,255,255,.5)}#totals b{color:#11141b;font-size:15px;letter-spacing:.02em;margin-left:4px;font-variant-numeric:tabular-nums}#buttons{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:46vw}#buttons button{font-family:var(--hud-font);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--fg);background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#buttons button:hover{border-color:#ffffff59}#buttons button.off{color:var(--dim)}#popups{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);width:90vw;display:flex;flex-direction:column;align-items:center;gap:6px}.pop{font-size:30px;font-weight:700;font-style:italic;letter-spacing:.04em;text-shadow:0 2px 20px rgba(0,0,0,.55);animation:pop .2s ease-out;white-space:nowrap;transition:opacity .16s ease-in,transform .16s ease-in}.pop.out{opacity:0;transform:translateY(-10px)}.pop small{display:block;font-size:15px;font-style:normal;letter-spacing:.2em;color:var(--dim);text-align:center}.pop.good{color:var(--accent2)}.pop.bad{color:#ff5a4f}.pop.info{color:var(--fg);font-size:22px}@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.85)}60%{opacity:1;transform:translateY(0) scale(1.06)}to{transform:scale(1)}}#speedo{position:absolute;right:18px;bottom:max(18px,env(safe-area-inset-bottom));text-align:right;min-width:170px}#rpmBar{height:6px;background:#ffffff24;border-radius:3px;overflow:hidden;margin-bottom:6px}#rpmBar i{display:block;height:100%;width:10%;background:linear-gradient(90deg,#fff 0%,#fff 70%,var(--accent2) 82%,var(--accent) 94%);transition:width .05s linear}#rpmBar.limit i{filter:brightness(1.6)}#spdRow{display:flex;justify-content:flex-end;align-items:baseline;gap:6px}#speed{font-size:58px;font-weight:700;font-style:italic;line-height:.9;font-variant-numeric:tabular-nums;text-shadow:0 2px 16px rgba(0,0,0,.45)}.unit{font-size:12px;letter-spacing:.2em;color:var(--dim)}#gear{position:absolute;left:0;bottom:2px;font-size:30px;font-weight:700;color:var(--accent2);width:40px;height:40px;border:2px solid var(--line);border-radius:50%;display:grid;place-items:center}#stick{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);width:170px;height:170px;border-radius:50%;touch-action:none;cursor:grab;opacity:.82;transition:opacity .2s}#stick.active{opacity:1}#stickRing{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:radial-gradient(circle,#00000026,#00000059 70%);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}#stickRing:before,#stickRing:after{content:"";position:absolute;background:#ffffff1f}#stickRing:before{left:50%;top:12%;bottom:12%;width:1px}#stickRing:after{top:50%;left:12%;right:12%;height:1px}#stickLbl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:8px 0;font-size:10px;letter-spacing:.2em;color:var(--dim);pointer-events:none}#knob{position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,#d9d6d0 40%,#8d8a86);box-shadow:0 6px 18px #00000073,inset 0 -3px 6px #00000040;pointer-events:none}#stick.active #stickRing{border-color:#ffc53db3}#title{position:fixed;inset:0;touch-action:none;cursor:grab;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:max(28px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#05050800 0% 62%,#050508b3)}.brand{text-align:center}.kicker{font-family:var(--hud-font);letter-spacing:.34em;font-size:12px;color:var(--dim)}h1{font-family:var(--hud-font);font-style:italic;font-size:clamp(54px,11vw,120px);margin:4px 0 0;line-height:.9;letter-spacing:-.01em}h1 span{color:var(--accent);margin-left:.12em}.tag{margin:10px 0 0;color:var(--dim);font-size:15px}.garage{text-align:center;margin-top:auto;margin-bottom:18px}.paintName{font-family:var(--hud-font);font-weight:700;letter-spacing:.2em;font-size:13px;margin-bottom:10px;text-transform:uppercase}#swatches{display:flex;gap:12px;justify-content:center;padding:6px 0}.sw{width:30px;height:30px;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px #ffffff2e;transition:box-shadow .15s}.sw.sel{box-shadow:0 0 0 3px #0b0d12,0 0 0 5px #fff}#go{display:block;margin:26px auto 0;min-width:min(320px,calc(100vw - 48px));font-family:var(--hud-font);font-weight:700;font-style:italic;font-size:30px;letter-spacing:.26em;color:#fff;background:#3d8bff;border:0;border-radius:999px;padding:20px 56px;cursor:pointer;box-shadow:0 12px 34px #00000073,0 0 28px #3d8bff59}#go:hover{background:#8ff6ff}#go:disabled{opacity:.5;cursor:wait}.help{margin-top:16px;text-align:center;font-size:13px;color:var(--dim);line-height:1.6;max-width:640px}.help b{color:var(--fg);font-weight:600}.help .hint{margin-top:6px;color:var(--accent2)}#loading{position:absolute;bottom:8px;font-size:12px;color:var(--dim)}#pause{position:fixed;inset:0;z-index:10;display:grid;place-content:center;text-align:center;background:#000000a8;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);font-family:var(--hud-font);font-size:42px;font-weight:700;font-style:italic;letter-spacing:.2em}#pause small{font-size:13px;letter-spacing:.2em;color:var(--dim);font-style:normal;font-weight:500}@media(max-width:720px){#chainPts{font-size:40px}#drift{top:calc(max(16px,env(safe-area-inset-top)) + 84px);min-width:0}#tally{gap:10px;padding:4px 10px;font-size:11px}#totals{right:10px;top:calc(max(16px,env(safe-area-inset-top)) + 34px)}.pop{font-size:24px}#speed{font-size:36px}#speedo{min-width:112px;right:12px;bottom:auto;top:calc(max(16px,env(safe-area-inset-top)) + 124px)}#gear{font-size:18px;width:28px;height:28px}#stick{width:150px;height:150px}#buttons{right:10px}#buttons button{padding:6px 8px;font-size:10px}.help{font-size:12px}}@media(max-height:520px){#stick{width:128px;height:128px;bottom:10px}#knob{width:50px;height:50px}#chainPts{font-size:38px}#speed{font-size:40px}#drift{top:44px}.help{display:none}.garage{margin-bottom:10px}}#buttons button.on{color:#fff;background:#3d8bff;border-color:#3d8bff}#hud.drawing #drift,#hud.drawing #speedo,#hud.drawing #popups,#hud.drawing #stick,#hud.drawing #tally,#hud.drawing #totals{display:none}#drawUI{position:fixed;inset:0;z-index:5;font-family:var(--hud-font)}#drawLayer{position:absolute;inset:0;cursor:crosshair;touch-action:none}.drawBar{position:absolute;top:max(16px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;gap:16px;align-items:baseline;padding:10px 18px;background:var(--glass);border:1px solid var(--line);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:15px;letter-spacing:.08em;white-space:nowrap;pointer-events:none;max-width:calc(100vw - 32px)}.drawBar b{color:#3d8bff;font-variant-numeric:tabular-nums}.drawBtns{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:10px}.drawBtns button{font-family:var(--hud-font);font-weight:700;font-size:15px;letter-spacing:.16em;color:var(--fg);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:12px 20px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}.drawBtns #dGo{color:#fff;background:#3d8bff;border-color:#3d8bff}#dAuto{position:absolute;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 62px);left:50%;transform:translate(-50%);font-family:var(--hud-font);font-weight:700;font-size:12px;letter-spacing:.16em;color:#fff;white-space:nowrap;background:#3d8bff2e;border:1px solid rgba(61,139,255,.7);border-radius:999px;padding:9px 18px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#dAuto:active{background:#3d8bff66}.drawBtns #dGo:disabled{opacity:.35;cursor:not-allowed}#pedals{position:absolute;inset:auto 0 max(18px,env(safe-area-inset-bottom)) 0;display:flex;justify-content:space-between;padding:0 18px;pointer-events:none}#hud.dpad #pGas{display:none}#hud.dpad #pedals{padding:0 14px}#hud.dpad #pedals #pBrake{width:96px;height:112px;font-size:16px}#hud.dpad #pedals #pBrake small{display:none}#pedals button{pointer-events:auto;touch-action:none;width:108px;height:126px;border-radius:22px;border:2px solid rgba(255,255,255,.22);background:linear-gradient(180deg,#14141a8c,#08080cb3);color:var(--fg);font-family:var(--hud-font);font-weight:700;font-size:17px;letter-spacing:.18em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;transition:transform .06s,background .06s,border-color .06s}#pedals button small{font-size:10px;letter-spacing:.2em;color:var(--dim);font-weight:500}#pedals #pGas{width:124px;height:150px}#pedals #pGas.down{transform:scale(.96) translateY(3px);background:linear-gradient(180deg,#3d8bff8c,#123a96b3);border-color:#3d8bff}#pedals #pBrake.down{transform:scale(.96) translateY(3px);background:linear-gradient(180deg,#ff5a4f8c,#8c1e18b3);border-color:#ff5a4f}#hud.lineDrive #speedo{bottom:max(214px,calc(env(safe-area-inset-bottom) + 196px))}@media(max-width:720px){#pedals button{width:88px;height:106px;font-size:14px}#pedals #pGas{width:100px;height:124px}.drawBar{font-size:12px;padding:8px 14px;top:calc(max(16px,env(safe-area-inset-top)) + 76px)}.drawBtns button{font-size:13px;padding:10px 14px}#hud.lineDrive #speedo{bottom:auto}}#cars{display:flex;gap:12px;justify-content:center;margin-bottom:22px;transition:opacity .3s}#cars.loading{opacity:.45;pointer-events:none}.carChip{font-family:var(--hud-font);font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:14px 26px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.carChip.sel{color:#111;background:var(--fg);border-color:var(--fg)}#credits{margin:28px auto 0;padding:0 16px;font-family:Inter,sans-serif;font-size:11px;font-style:normal;font-weight:400;letter-spacing:.02em;color:#f6f3ee8c;text-align:center;max-width:640px}#credits a{color:inherit}#loading{left:10px}@media(max-width:720px){#hud.dpad #pedals #pBrake{width:86px;height:100px;font-size:14px}}#meter{position:absolute;left:50%;transform:translate(-50%);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 162px);width:min(320px,calc(100vw - 40px));pointer-events:none;font-family:var(--hud-font)}#meter svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}#meter path{fill:none}#meter .mTrack{stroke:#0c0c108c;stroke-width:14;stroke-linecap:round}#meter .mFill{stroke:#f6f3ee38;stroke-width:8}#meter .mWarn{stroke:#ffaa3c73;stroke-width:8}#meter .mSweet{stroke:#ffc62ecc;stroke-width:8;transition:stroke .15s}#meter .mSweet.hot{stroke:#ffe27a;filter:drop-shadow(0 0 5px rgba(255,210,80,.9))}#meter .mTick{stroke:#ffffff59;stroke-width:2;stroke-linecap:round}#meter .mNeedle line{stroke:var(--fg);stroke-width:3;stroke-linecap:round}#meter .mNeedle circle{fill:var(--fg)}#meter .mNum{fill:var(--fg);font-size:34px;font-weight:700;font-style:italic;text-anchor:middle;font-variant-numeric:tabular-nums}#meter .mLbl{fill:var(--dim);font-size:11px;font-weight:700;letter-spacing:.22em;text-anchor:middle}#meter[data-zone=idle]{opacity:.6}#meter[data-zone=sweet] .mNeedle line,#meter[data-zone=sweet] .mNeedle circle{stroke:#ffe27a;fill:#ffe27a}#meter[data-zone=sweet] .mNum,#meter[data-zone=sweet] .mLbl{fill:#ffe27a}#meter[data-zone=warn] .mLbl{fill:#ffaa3c}#meter[data-zone=spin] .mNeedle line,#meter[data-zone=spin] .mNeedle circle{stroke:#ff5a4f;fill:#ff5a4f}#meter[data-zone=spin] .mNum,#meter[data-zone=spin] .mLbl{fill:#ff5a4f}#hud.drawing #meter,#hud.noMeter #meter{display:none}#hud.dpad #meter{width:230px;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 178px)}@media(max-width:720px){#hud.dpad #meter{width:200px;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 158px)}}@media(max-height:520px){#hud.dpad #meter{width:150px;bottom:146px}}#levels{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.lvlChip{font-family:var(--hud-font);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--dim);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.lvlChip.sel{color:#fff;background:#3d8bff;border-color:#3d8bff}#drawWarn{position:absolute;left:50%;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 70px);transform:translate(-50%);max-width:calc(100vw - 32px);padding:12px 20px;border-radius:14px;text-align:center;pointer-events:none;font-family:var(--hud-font);font-weight:700;font-size:16px;letter-spacing:.06em;color:#1c1300;background:#ffc62e;box-shadow:0 8px 26px #00000073}#drawWarn.pulse{animation:warnPulse .5s ease-out 2}@keyframes warnPulse{0%{transform:translate(-50%) scale(1)}40%{transform:translate(-50%) scale(1.07)}to{transform:translate(-50%) scale(1)}}@media(max-width:720px){#drawWarn{font-size:13px;padding:10px 14px}}@media(max-width:720px){#hud:not(.dpad) #meter{width:min(300px,calc(100vw - 40px));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 134px)}}#bSound{display:inline-flex;align-items:center;justify-content:center}#bSound svg{display:block}#bSound .x,#bSound.off .w{display:none}#bSound.off .x{display:inline}#speedo{display:none!important}#titleOpts{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;display:flex;flex-direction:column;gap:10px;align-items:stretch}.toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:#08090d8c;border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:196px}.toggle .knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#3d8bff;box-shadow:0 0 14px #3d8bff73;transition:transform .22s cubic-bezier(.3,.8,.3,1)}.toggle.alt .knob{transform:translate(100%)}.tgOpt{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:8px 12px;border-radius:999px;font-family:var(--hud-font);font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--dim);transition:color .2s}.tgOpt.on{color:#fff}@media(max-width:720px){.toggle{min-width:170px}.tgOpt{padding:7px 8px;font-size:10px}}.toggle.hidden{display:none}.carChip .carTag{display:block;margin-top:3px;font-size:10px;font-style:normal;letter-spacing:.24em;opacity:.6}#recap{position:fixed;inset:0;z-index:12;display:grid;place-items:center;padding:16px;background:#04060c8c;font-family:var(--hud-font);animation:rcFade .35s ease-out}@keyframes rcFade{0%{opacity:0}}@keyframes rcPop{0%{transform:translateY(14px) scale(.96);opacity:0}}.rcCard{width:min(380px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:22px 20px 18px;border-radius:22px;text-align:center;background:#0c0e14d1;border:1px solid rgba(61,139,255,.45);box-shadow:0 18px 60px #00000080,0 0 40px #3d8bff2e;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:rcPop .4s cubic-bezier(.2,1.3,.4,1)}#rcTitle{font-weight:700;font-style:italic;font-size:22px;letter-spacing:.12em;color:#fff}#rcStars{margin:8px 0 2px;font-size:30px;letter-spacing:.12em}#rcStars i{font-style:normal;color:#ffffff24;transition:color .3s}#rcStars i.on{color:#3d8bff;text-shadow:0 0 14px rgba(61,139,255,.8)}.rcPct{display:flex;flex-direction:column;align-items:center;margin:2px 0 14px}.rcPct b{font-size:58px;line-height:1;font-weight:700;font-style:italic;color:#fff;font-variant-numeric:tabular-nums}.rcPct span{margin-top:4px;font-size:12px;letter-spacing:.28em;color:#3d8bff;font-weight:700}#rcGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}#rcGrid div{padding:8px 10px;border-radius:12px;background:#ffffff0d;border:1px solid var(--line);text-align:left}#rcGrid small{display:block;font-size:10px;letter-spacing:.18em;color:var(--dim)}#rcGrid b{font-size:17px;color:#fff;font-variant-numeric:tabular-nums}.rcBtns{display:flex;gap:10px;justify-content:center}.rcBtns button{font-family:var(--hud-font);font-weight:700;font-size:14px;letter-spacing:.16em;color:var(--fg);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:12px 20px;cursor:pointer;white-space:nowrap}.rcBtns #rcGo{color:#fff;background:#3d8bff;border-color:#3d8bff;flex:1}
