:root{--ink:#0b0a1a;--paper:#fff8ec;--orange:#ff8a1f;--gold:#ffd166;--red:#e63946;--blue:#2b56b8;--cyan:#6cf0ff;--green:#8de35a;--purple:#8a4bd6;--display:"Bangers", "Impact", "Arial Black", sans-serif;--body:"Nunito", "Segoe UI", system-ui, sans-serif;--hud:"Russo One", "Arial Black", sans-serif;--shadow-text:0 2px 0 #1a1030, 0 4px 10px #00000073;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}*{box-sizing:border-box}html,body{background:var(--ink);height:100%;color:var(--paper);font-family:var(--body);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;overflow:hidden}#app{position:fixed;inset:0}#game-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}#ui{pointer-events:none;position:absolute;inset:0}.layer{position:absolute;inset:0}.layer[hidden]{display:none!important}#menu{pointer-events:auto}#fade{opacity:1;pointer-events:none;background:#06050f;transition:opacity .35s;position:absolute;inset:0}button{font:inherit;color:inherit}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.display{font-family:var(--display);letter-spacing:.03em;text-shadow:var(--shadow-text)}.kicker{font-family:var(--hud);text-transform:uppercase;letter-spacing:.16em;color:var(--gold);font-size:.8rem}.title-screen{text-align:center;background:radial-gradient(at 50% 30%,#ff8a1f2e,#0000 55%),linear-gradient(#06050f1a,#06050fb3);grid-template-rows:1fr auto 1fr;place-items:center;padding:3vh 4vw;display:grid;position:absolute;inset:0}.logo{flex-direction:column;align-self:end;align-items:center;gap:0;animation:.7s cubic-bezier(.16,1,.3,1) both logo-in;display:flex}.logo .ki{font-family:var(--display);color:var(--orange);-webkit-text-stroke:3px #3a1400;text-shadow:0 6px #7a2e00,0 12px 30px #0009;font-size:clamp(5rem,17vw,12rem);line-height:.85;transform:rotate(-4deg)}.logo .kart{font-family:var(--display);color:#fff;-webkit-text-stroke:2px #10102a;text-shadow:0 5px 0 var(--blue), 0 10px 26px #0009;margin-top:-.2em;font-size:clamp(3.4rem,11vw,7.5rem);line-height:.9;transform:rotate(-4deg)}.logo .sub{font-family:var(--hud);letter-spacing:.35em;text-transform:uppercase;color:var(--gold);text-shadow:var(--shadow-text);margin-top:.6em;font-size:clamp(.8rem,2.4vw,1.2rem)}@keyframes logo-in{0%{opacity:0;transform:scale(.6)translateY(40px)}to{opacity:1;transform:none}}.press{font-family:var(--hud);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:var(--shadow-text);align-self:start;margin-top:2vh;font-size:clamp(.9rem,2.2vw,1.2rem);animation:1.4s ease-in-out infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}.colophon{bottom:calc(1rem + var(--safe-bottom));text-align:center;font-family:var(--hud);letter-spacing:.12em;opacity:.55;text-transform:uppercase;font-size:.72rem;position:absolute;left:0;right:0}.screen{padding:calc(1.2rem + var(--safe-top)) calc(1.5rem + var(--safe-right)) calc(1.2rem + var(--safe-bottom)) calc(1.5rem + var(--safe-left));background:linear-gradient(#06050f59,#06050fb3);flex-direction:column;gap:1rem;display:flex;position:absolute;inset:0}.screen-head{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.screen-head h1{font-family:var(--display);color:#fff;text-shadow:var(--shadow-text);-webkit-text-stroke:1px #10102a;margin:0;font-size:clamp(2.2rem,6vw,4rem);line-height:1}.screen-head h1 em{color:var(--orange);font-style:normal}.hint{font-family:var(--hud);letter-spacing:.1em;text-transform:uppercase;opacity:.75;font-size:.78rem}.hint kbd{font:inherit;background:#ffffff24;border:1px solid #ffffff40;border-radius:4px;padding:.1em .45em}.menu-list{flex-direction:column;align-items:stretch;gap:.6rem;width:min(420px,90vw);margin:0 auto;display:flex}.menu-btn{color:#fff;font-family:var(--display);letter-spacing:.04em;text-align:left;cursor:pointer;text-shadow:0 2px #00000080;background:#0c0a1ed1;border:2px solid #ffffff24;border-radius:12px;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.4rem;font-size:clamp(1.4rem,3.5vw,2rem);transition:transform .14s cubic-bezier(.25,1,.5,1),background .14s,border-color .14s;display:flex;position:relative;transform:skew(-6deg)}.menu-btn>*{transform:skew(6deg)}.menu-btn small{font-family:var(--hud);letter-spacing:.12em;text-transform:uppercase;opacity:.7;font-size:.7rem}.menu-btn.active,.menu-btn:hover{background:var(--orange);color:#1a0a00;text-shadow:none;border-color:#fff;transform:skew(-6deg)translate(8px)scale(1.03)}.menu-btn.active small,.menu-btn:hover small{opacity:.85}.menu-btn.disabled{opacity:.4;pointer-events:none}.menu-btn .val{font-family:var(--hud);letter-spacing:.08em;font-size:.95rem}.centered{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1.5rem;display:flex}.select-layout{flex:1;grid-template-columns:minmax(280px,1fr) minmax(0,1.1fr);gap:1.5rem;min-height:0;display:grid}.select-layout.reverse{grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr)}.preview-pane{pointer-events:none;flex-direction:column;justify-content:flex-end;min-height:0;display:flex;position:relative}.card-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));align-content:start;gap:.6rem;padding:4px;display:grid;overflow:auto}.card{aspect-ratio:1/1.15;cursor:pointer;background:#0c0a1ed9;border:3px solid #ffffff26;border-radius:12px;flex-direction:column;justify-content:flex-end;padding:.5rem;transition:transform .14s cubic-bezier(.25,1,.5,1),border-color .14s;display:flex;position:relative;overflow:hidden}.card .swatch{background:var(--c1);position:absolute;inset:0}.card .swatch:after{content:"";background:linear-gradient(160deg, var(--c2) 0 38%, transparent 38.5%), linear-gradient(180deg, transparent 55%, #000000bf);position:absolute;inset:0}.card .face{aspect-ratio:1;background:var(--skin);border-radius:50%;width:46%;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #00000059,inset 0 -10px #00000014}.card .face:before{content:"";background:var(--hair);clip-path:polygon(0 100%,10% 40%,22% 70%,35% 10%,50% 55%,62% 0,75% 60%,88% 25%,100% 100%);width:110%;height:60%;position:absolute;top:-18%;left:50%;transform:translate(-50%)}.card .face:after{content:"";width:40%;height:14%;box-shadow:-3px 0 0 -1px var(--eyes), 3px 0 0 -1px var(--eyes);border-radius:50%;position:absolute;top:45%;left:30%}.card .name{font-family:var(--display);letter-spacing:.04em;color:#fff;text-shadow:var(--shadow-text);font-size:1.15rem;line-height:1;position:relative}.card .tag{font-family:var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:.25rem;font-size:.6rem;position:relative}.card.active,.card:hover{border-color:var(--gold);z-index:1;transform:translateY(-4px)scale(1.04);box-shadow:0 10px 30px #00000073,0 0 0 3px #ffd16659}.card.vehicle .swatch{background:var(--c1)}.card.vehicle .icon{width:60%;height:40%;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.card.track{aspect-ratio:16/10}.card.track .swatch{background:linear-gradient(180deg, var(--c1), var(--c2))}.card.track svg{width:76%;height:54%;position:absolute;inset:12% 12% 34%}.card.track .name{font-size:1.3rem}.info-panel{pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0c0a1ed1;border:2px solid #ffffff24;border-radius:14px;padding:.9rem 1.1rem}.info-panel h2{font-family:var(--display);color:#fff;text-shadow:var(--shadow-text);margin:0;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1}.info-panel h2 span{color:var(--orange)}.info-panel .title{font-family:var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem;font-size:.72rem}.info-panel p{opacity:.9;max-width:44ch;margin:.5rem 0 0;font-size:.92rem;line-height:1.4}.stats{grid-template-columns:auto 1fr;align-items:center;gap:.3rem .8rem;margin-top:.7rem;display:grid}.stats .lbl{font-family:var(--hud);letter-spacing:.12em;text-transform:uppercase;opacity:.8;font-size:.68rem}.bar{background:#ffffff1f;border-radius:6px;height:10px;position:relative;overflow:hidden}.bar i{width:var(--w);background:linear-gradient(90deg, var(--gold), var(--orange));border-radius:6px;transition:width .24s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}.bar i.mod{background:var(--cyan)}.weight-tag{font-family:var(--hud);letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;background:#ffffff1f;border-radius:999px;margin-left:.6rem;padding:.15em .6em;font-size:.65rem;display:inline-block}.actions{flex-wrap:wrap;justify-content:flex-end;gap:.7rem;display:flex}.btn{font-family:var(--display);letter-spacing:.05em;color:#fff;cursor:pointer;text-shadow:0 2px #00000080;background:#0c0a1ed9;border:2px solid #fff3;border-radius:10px;padding:.55rem 1.4rem;font-size:1.35rem;transition:transform .14s,background .14s;transform:skew(-6deg)}.btn>span{display:inline-block;transform:skew(6deg)}.btn.primary{background:var(--orange);color:#1a0a00;text-shadow:none;border-color:#fff}.btn:hover,.btn.active{transform:skew(-6deg)scale(1.05)}.btn.primary.active,.btn.primary:hover{background:var(--gold)}.chips{flex-wrap:wrap;gap:.5rem;display:flex}.chip{font-family:var(--hud);letter-spacing:.1em;text-transform:uppercase;color:#fff;cursor:pointer;background:#0c0a1ecc;border:2px solid #fff3;border-radius:999px;padding:.4em .9em;font-size:.75rem}.chip.active{background:var(--gold);color:#1a0a00;border-color:#fff}#hud{font-family:var(--hud);color:#fff}.hud-top-left{top:calc(.9rem + var(--safe-top));left:calc(1rem + var(--safe-left));flex-direction:column;gap:.4rem;display:flex;position:absolute}.hud-lap{font-family:var(--display);letter-spacing:.04em;text-shadow:var(--shadow-text);font-size:clamp(1.6rem,4vw,2.6rem);line-height:1}.hud-lap small{font-family:var(--hud);letter-spacing:.15em;opacity:.85;margin-right:.3em;font-size:.5em}.hud-time{letter-spacing:.08em;text-shadow:var(--shadow-text);font-variant-numeric:tabular-nums;font-size:clamp(.85rem,2vw,1.15rem)}.hud-time span{opacity:.7;margin-left:.6em;font-size:.8em}.hud-item{top:calc(.8rem + var(--safe-top));aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#ffffff2e,#0c0a1ed9);border:3px solid #ffffff80;border-radius:18px;place-items:center;width:clamp(64px,9vw,96px);transition:transform .12s;display:grid;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #0006}.hud-item.rolling{animation:.12s linear infinite shake}.hud-item svg{filter:drop-shadow(0 3px 4px #00000080);width:70%;height:70%}.hud-item .uses{background:var(--gold);color:#1a0a00;border:2px solid #fff;border-radius:999px;padding:.1em .5em;font-size:.8rem;position:absolute;bottom:-6px;right:-6px}.hud-item .label{white-space:nowrap;letter-spacing:.12em;text-transform:uppercase;text-shadow:var(--shadow-text);opacity:.9;font-size:.7rem;position:absolute;top:105%;left:50%;transform:translate(-50%)}@keyframes shake{0%{transform:translate(-50%)rotate(-2deg)}50%{transform:translate(-50%)rotate(2deg)}to{transform:translate(-50%)rotate(-2deg)}}.hud-pos{left:calc(1rem + var(--safe-left));bottom:calc(.8rem + var(--safe-bottom));line-height:.85;font-family:var(--display);text-shadow:0 4px #1a1030,0 8px 24px #00000080;align-items:baseline;display:flex;position:absolute}.hud-pos .num{color:var(--gold);-webkit-text-stroke:2px #3a2000;font-size:clamp(4rem,12vw,8rem)}.hud-pos .suf{color:#fff;margin-left:.1em;font-size:clamp(1.6rem,4vw,2.6rem)}.hud-pos.p1 .num{color:var(--gold)}.hud-pos.p2 .num{color:#dfe6ff}.hud-pos.p3 .num{color:#ffb072}.hud-pos.rest .num{color:#fff}.hud-speed{right:calc(1rem + var(--safe-right));bottom:calc(.8rem + var(--safe-bottom) + 200px);text-align:right;letter-spacing:.08em;text-shadow:var(--shadow-text);font-variant-numeric:tabular-nums;font-size:clamp(.9rem,2vw,1.3rem);position:absolute}.hud-speed b{font-family:var(--display);color:#fff;-webkit-text-stroke:1px #10102a;font-size:2.1em}.minimap{right:calc(.6rem + var(--safe-right));bottom:calc(.6rem + var(--safe-bottom));opacity:.95;filter:drop-shadow(0 4px 10px #00000080);width:190px;height:190px;position:absolute}.hud-center{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.countdown{font-family:var(--display);color:var(--gold);-webkit-text-stroke:4px #3a1400;text-shadow:0 10px #7a2e00,0 20px 50px #0009;font-size:clamp(6rem,22vw,16rem);animation:.9s cubic-bezier(.16,1,.3,1) both pop}.countdown.go{color:var(--green);-webkit-text-stroke:4px #0f3a00;text-shadow:0 10px #2a6a00,0 20px 50px #0009}@keyframes pop{0%{opacity:0;transform:scale(2.4)}30%{opacity:1;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.message{text-align:center;font-family:var(--display);color:#fff;-webkit-text-stroke:2px #10102a;text-shadow:0 5px 0 var(--red), 0 12px 30px #0009;pointer-events:none;font-size:clamp(2.2rem,7vw,5rem);animation:2.2s cubic-bezier(.16,1,.3,1) both msg;position:absolute;top:24%;left:0;right:0}.message.gold{text-shadow:0 5px #a0600e,0 12px 30px #0009;color:var(--gold)}@keyframes msg{0%{opacity:0;transform:translateY(30px)scale(.6)}15%{opacity:1;transform:none}80%{opacity:1}to{opacity:0;transform:translateY(-20px)}}.flash{opacity:0;pointer-events:none;background:#fff;transition:opacity .12s;position:absolute;inset:0}.wrong-way{text-align:center;font-family:var(--display);color:var(--red);text-shadow:var(--shadow-text);font-size:clamp(1.8rem,5vw,3.2rem);animation:.8s ease-in-out infinite blink;position:absolute;top:40%;left:0;right:0}.drift-meter{left:50%;bottom:calc(9rem + var(--safe-bottom));opacity:0;background:#00000073;border-radius:6px;width:140px;height:8px;transition:opacity .15s;position:absolute;overflow:hidden;transform:translate(-50%)}.drift-meter i{width:var(--w);background:var(--col);position:absolute;inset:0}.drift-meter.on{opacity:1}.standings{right:calc(1rem + var(--safe-right));top:calc(.9rem + var(--safe-top));letter-spacing:.06em;flex-direction:column;gap:2px;font-size:.72rem;display:flex;position:absolute}.standings div{background:#0c0a1e8c;border-radius:6px;align-items:center;gap:.5rem;min-width:130px;padding:2px 8px;display:flex}.standings div.me{background:var(--orange);color:#1a0a00;font-weight:700}.standings i{background:var(--c);border:1px solid #00000080;border-radius:50%;width:10px;height:10px}.standings b{text-align:right;width:1.2em}.lap-splits{left:calc(1rem + var(--safe-left));top:calc(5.4rem + var(--safe-top));letter-spacing:.08em;opacity:.85;text-shadow:var(--shadow-text);font-variant-numeric:tabular-nums;flex-direction:column;gap:2px;font-size:.72rem;display:flex;position:absolute}.lap-splits .best{color:var(--green)}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#06050f9e;place-items:center;display:grid;position:absolute;inset:0}.panel{background:#0c0a1eeb;border:2px solid #ffffff29;border-radius:18px;min-width:min(560px,92vw);max-width:92vw;max-height:90vh;padding:1.4rem 1.6rem;overflow:auto;box-shadow:0 20px 60px #00000080}.panel h1{font-family:var(--display);text-shadow:var(--shadow-text);margin:0 0 .4rem;font-size:clamp(2rem,6vw,3.4rem);line-height:1}.panel h1 em{color:var(--orange);font-style:normal}.results{border-collapse:collapse;width:100%;font-family:var(--hud);margin:.6rem 0 1rem;font-size:.9rem}.results td,.results th{text-align:left;white-space:nowrap;border-bottom:1px solid #ffffff1a;padding:.35rem .5rem}.results th{letter-spacing:.15em;text-transform:uppercase;opacity:.6;font-size:.65rem}.results td.rank{font-family:var(--display);color:var(--gold);width:2.4rem;font-size:1.5rem}.results tr.me td{background:#ff8a1f2e}.results tr.me td.rank{color:#fff}.results td.num{text-align:right;font-variant-numeric:tabular-nums}.results i.dot{background:var(--c);vertical-align:middle;border:1px solid #00000080;border-radius:50%;width:12px;height:12px;margin-right:.5rem;display:inline-block}.results .pts{color:var(--gold);font-weight:700}.results .delta{color:var(--green);margin-left:.4rem;font-size:.75rem}.podium-msg{font-family:var(--display);color:var(--gold);text-shadow:var(--shadow-text);margin:0 0 .4rem;font-size:clamp(1.4rem,4vw,2.2rem)}.record{font-family:var(--hud);letter-spacing:.12em;text-transform:uppercase;background:var(--green);color:#0a2a00;vertical-align:middle;border-radius:999px;margin-left:.6rem;padding:.2em .7em;font-size:.7rem;display:inline-block}.help-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem 1.4rem;font-size:.92rem;line-height:1.45;display:grid}.help-grid h3{font-family:var(--hud);letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin:0 0 .3rem;font-size:.72rem}.help-grid p{margin:0 0 .4rem}.help-grid kbd{font:inherit;background:#ffffff24;border:1px solid #ffffff40;border-radius:4px;padding:.05em .45em;font-size:.85em}.item-help{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem;margin-top:.4rem;display:grid}.item-help div{background:#ffffff0f;border-radius:10px;align-items:center;gap:.6rem;padding:.4rem .6rem;font-size:.85rem;display:flex}.item-help svg{flex:none;width:36px;height:36px}.item-help b{font-family:var(--hud);letter-spacing:.08em;font-size:.75rem;display:block}#touch{pointer-events:none}.tc{pointer-events:auto;touch-action:none;font-family:var(--display);color:#fff;text-shadow:var(--shadow-text);-webkit-user-select:none;user-select:none;background:#0c0a1e73;border:2px solid #ffffff59;border-radius:50%;place-items:center;font-size:1.4rem;display:grid;position:absolute}.tc.pressed{background:#ff8a1fbf;border-color:#fff}.tc-left{left:calc(1rem + var(--safe-left));bottom:calc(1rem + var(--safe-bottom));width:84px;height:84px}.tc-right{left:calc(6.6rem + var(--safe-left));bottom:calc(1rem + var(--safe-bottom));width:84px;height:84px}.tc-gas{right:calc(1rem + var(--safe-right));bottom:calc(1rem + var(--safe-bottom));background:#8de35a59;width:96px;height:96px}.tc-brake{right:calc(7.4rem + var(--safe-right));bottom:calc(1rem + var(--safe-bottom));background:#e6394659;width:68px;height:68px}.tc-drift{right:calc(1.4rem + var(--safe-right));bottom:calc(7.6rem + var(--safe-bottom));background:#6cf0ff59;width:78px;height:78px}.tc-item{right:calc(7.2rem + var(--safe-right));bottom:calc(6.4rem + var(--safe-bottom));background:#ffd16659;width:68px;height:68px}.tc-pause{top:calc(.6rem + var(--safe-top));right:calc(.6rem + var(--safe-right));border-radius:12px;width:44px;height:44px;font-size:1rem}.touch-mode .minimap{width:110px;height:110px;right:calc(.6rem + var(--safe-right));top:calc(4.2rem + var(--safe-top));bottom:auto;left:auto;transform:none}.touch-mode .hud-pos{left:auto;right:calc(1rem + var(--safe-right));top:calc(11.5rem + var(--safe-top));bottom:auto}.touch-mode .hud-pos .num{font-size:clamp(3rem,12vw,5rem)}.touch-mode .hud-speed,.touch-mode .standings,.touch-mode .lap-splits{display:none}.touch-mode .drift-meter{bottom:calc(12rem + var(--safe-bottom))}@media (max-width:760px){.select-layout,.select-layout.reverse{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr}.select-layout .preview-pane{order:2}.card-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}.card .name{font-size:.9rem}.info-panel p{display:none}.screen{gap:.6rem}.menu-btn{padding:.6rem 1.1rem}.hud-speed{bottom:calc(.8rem + var(--safe-bottom) + 130px)}.minimap{width:120px;height:120px}.standings{display:none}}@media (prefers-reduced-motion:reduce){.logo,.press,.countdown,.message,.hud-item.rolling{animation:none}}