:root{--ink:#0b0c0f;--ink-2:#14161b;--paper:#f4efe6;--muted:#a7a39b;--accent:#ff5a1f;--accent-2:#ffd166;--good:#3ddc84;--bad:#ff4d4d;--ghost:#7fe8ff;--glass:#0c0d1194;--glass-strong:#0c0d11d1;--line:#ffffff17;--display:"Barlow Condensed", "Arial Narrow", sans-serif;--body:"Manrope", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{background:#000;height:100%;margin:0;overflow:hidden}body{font-family:var(--body);color:var(--paper);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}#view{outline:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui .screen{pointer-events:auto;animation:.5s cubic-bezier(.2,.8,.2,1) both screenIn;position:absolute;inset:0}#ui .screen.passive{pointer-events:none}@keyframes screenIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.glass{background:var(--glass);-webkit-backdrop-filter:blur(16px)saturate(1.2);border:1px solid var(--line);border-radius:14px}.vignette:before{content:"";pointer-events:none;background:linear-gradient(90deg,#000000b8 0%,#00000040 45%,#0000 70%);position:absolute;inset:0}.brand{position:absolute;top:clamp(20px,6vh,64px);left:clamp(20px,5vw,72px)}.brand .kicker{font:600 13px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}.brand h1{font:italic 800 clamp(54px, 8vw, 116px)/.86 var(--display);letter-spacing:-.01em;text-transform:uppercase;text-shadow:0 8px 40px #00000080;margin:10px 0 0}.brand h1 span{color:var(--accent)}.brand .tag{font:500 15px/1.4 var(--body);color:var(--muted);max-width:34ch;margin-top:12px}.menu{flex-direction:column;gap:4px;display:flex;position:absolute;bottom:clamp(90px,14vh,150px);left:clamp(20px,5vw,72px)}.menu button{all:unset;cursor:pointer;font:italic 700 clamp(30px, 3.6vw, 46px)/1.05 var(--display);text-transform:uppercase;color:#f4efe68c;align-items:baseline;gap:16px;padding:6px 18px 6px 0;transition:color .2s,transform .25s cubic-bezier(.2,.8,.2,1);display:flex;position:relative}.menu button .idx{font:600 12px/1 var(--mono);color:#f4efe659;width:22px}.menu button .hint{font:500 13px/1 var(--body);text-transform:none;color:var(--muted);opacity:0;font-style:normal;transition:opacity .2s}.menu button.focus,.menu button:hover{color:var(--paper);transform:translate(14px)}.menu button.focus:before,.menu button:hover:before{content:"";background:var(--accent);width:14px;height:4px;position:absolute;top:50%;left:-26px;transform:translateY(-50%)skew(-20deg)}.menu button.focus .hint,.menu button:hover .hint{opacity:1}.kings{width:min(380px,40vw);padding:18px 20px;position:absolute;top:clamp(20px,6vh,64px);right:clamp(20px,4vw,56px)}.kings h3,.panel h3{font:700 12px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--accent-2);margin:0 0 12px}.king{border-top:1px solid var(--line);grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;display:grid}.king:first-of-type{border-top:0}.king .t{font:italic 700 20px/1 var(--display);text-transform:uppercase}.king .n{font:600 14px/1.2 var(--body);color:var(--muted)}.king .time{font:700 22px/1 var(--mono);color:var(--paper);grid-row:span 2;align-self:center}.crown{color:var(--accent-2)}.footer{font:500 13px var(--body);color:var(--muted);background:linear-gradient(#0000,#0009);justify-content:space-between;align-items:center;padding:14px clamp(20px,5vw,72px);display:flex;position:absolute;bottom:0;left:0;right:0}.keys{flex-wrap:wrap;gap:18px;display:flex}kbd{font:600 11px/1 var(--mono);color:var(--paper);background:#ffffff0f;border:1px solid #ffffff40;border-radius:5px;margin-right:6px;padding:4px 6px}.dot{background:var(--muted);border-radius:50%;width:8px;height:8px;margin-right:8px;display:inline-block}.dot.on{background:var(--good);box-shadow:0 0 10px var(--good)}.title-bar{position:absolute;top:clamp(20px,5vh,52px);left:clamp(20px,5vw,72px)}.title-bar .kicker{font:600 12px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}.title-bar h2{font:italic 800 clamp(40px, 5vw, 72px)/.9 var(--display);text-transform:uppercase;margin:8px 0 0}.btn{all:unset;cursor:pointer;font:italic 700 20px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;border:1px solid var(--line);background:#ffffff14;border-radius:10px;align-items:center;gap:10px;padding:12px 22px;transition:background .2s,transform .2s;display:inline-flex}.btn:hover,.btn.focus{background:#ffffff29;transform:translateY(-1px)}.btn.primary{background:var(--accent);color:#140a05;border-color:#0000}.btn.primary:hover,.btn.primary.focus{background:#ff7440}.tracks{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,2vw,28px);display:grid;position:absolute;inset:24vh clamp(20px,5vw,72px) 110px}.track-card{cursor:pointer;border:1px solid var(--line);background:#111 50%/cover no-repeat;border-radius:16px;flex-direction:column;justify-content:flex-end;min-height:300px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;display:flex;position:relative;overflow:hidden}.track-card:after{content:"";background:linear-gradient(#05060800 30%,#05060866 55%,#050608f2 100%);position:absolute;inset:0}.track-card>*{z-index:1;position:relative}.track-card.focus,.track-card:hover{border-color:var(--accent);box-shadow:0 24px 60px #00000080, 0 0 0 1px var(--accent);transform:translateY(-8px)scale(1.01)}.track-card .body{padding:20px 22px 22px}.track-card .no{font:600 12px/1 var(--mono);color:var(--accent)}.track-card h4{font:italic 800 clamp(30px, 3vw, 44px)/.95 var(--display);text-transform:uppercase;margin:8px 0 2px}.track-card .sub{font:500 14px var(--body);color:var(--muted)}.track-card .stats{font:600 12px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;gap:18px;margin-top:14px;display:flex}.track-card .stats b{font:700 18px/1.1 var(--mono);color:var(--paper);letter-spacing:0;display:block}.track-card .rec{border-top:1px solid var(--line);font:600 13px var(--body);color:var(--muted);justify-content:space-between;margin-top:14px;padding-top:12px;display:flex}.track-card .rec b{font:700 15px var(--mono);color:var(--accent-2)}.track-card svg.profile{width:100%;height:38px;margin-top:10px}.garage-panel{flex-direction:column;gap:16px;width:min(420px,42vw);padding:22px;display:flex;position:absolute;top:clamp(16px,4vh,40px);bottom:clamp(16px,4vh,40px);right:clamp(16px,3vw,44px);overflow:auto}.tabs{gap:6px;display:flex}.tabs button{all:unset;cursor:pointer;font:italic 700 17px/1 var(--display);text-transform:uppercase;color:var(--muted);border-radius:8px;padding:8px 12px}.tabs button.on{color:var(--paper);background:#ffffff1a}.options{grid-template-columns:1fr 1fr;gap:8px;display:grid}.opt{all:unset;cursor:pointer;border:1px solid var(--line);background:#ffffff08;border-radius:10px;padding:12px 14px;transition:border-color .2s,background .2s}.opt b{font:italic 700 20px/1 var(--display);text-transform:uppercase;display:block}.opt span{font:500 12px/1.35 var(--body);color:var(--muted);margin-top:4px;display:block}.opt.on{border-color:var(--accent);background:#ff5a1f1a}.opt:hover,.opt.focus{border-color:#ffffff59}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{all:unset;cursor:pointer;border:2px solid #ffffff26;border-radius:50%;width:30px;height:30px;box-shadow:inset 0 0 0 2px #00000040}.swatch.on{border-color:var(--paper);transform:scale(1.12)}.label{font:700 11px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px}.statbars{background:#0000004d;border-radius:12px;gap:9px;padding:14px 16px;display:grid}.statbar{font:600 12px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);grid-template-columns:90px 1fr 54px;align-items:center;gap:10px;display:grid}.statbar .track{background:#ffffff14;border-radius:3px;height:6px;overflow:hidden}.statbar .fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:3px;height:100%;transition:width .45s cubic-bezier(.2,.8,.2,1)}.statbar .v{font:700 12px var(--mono);color:var(--paper);text-align:right}input[type=range]{width:100%;accent-color:var(--accent)}input[type=text]{border:1px solid var(--line);width:100%;color:var(--paper);font:italic 700 30px var(--display);text-transform:uppercase;background:#0006;border-radius:10px;outline:none;padding:14px 16px}input[type=text]:focus{border-color:var(--accent)}.garage-name{pointer-events:none;background:radial-gradient(80% 90% at 0 100%,#050608d9 0%,#05060880 45%,#05060800 75%);width:60vw;padding:160px clamp(20px,5vw,72px) clamp(70px,10vh,110px);position:absolute;bottom:0;left:0}.garage-name .kicker{font:600 12px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}.garage-name h2{font:italic 800 clamp(48px, 6vw, 92px)/.9 var(--display);text-transform:uppercase;margin:8px 0 4px}.garage-name p{color:var(--muted);font:500 16px var(--body);margin:0}.hud{pointer-events:none;font-family:var(--display);position:absolute;inset:0}.hud .timer{text-align:center;position:absolute;top:22px;left:50%;transform:translate(-50%)}.hud .timer .t{font:700 clamp(30px, 3.4vw, 46px)/1 var(--mono);letter-spacing:-.02em;text-shadow:0 2px 18px #0009}.hud .timer .split{font:700 18px/1 var(--mono);opacity:0;background:#00000080;border-radius:8px;margin-top:8px;padding:5px 12px;transition:opacity .3s;display:inline-block}.hud .timer .split.show{opacity:1}.hud .timer .split.good{color:var(--good)}.hud .timer .split.bad{color:var(--bad)}.hud .speedo{width:220px;height:220px;position:absolute;bottom:clamp(18px,4vh,40px);right:clamp(18px,3vw,44px)}.hud .speedo svg{width:100%;height:100%;overflow:visible}.hud .speedo .num{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.hud .speedo .num b{font:italic 800 74px/.85 var(--display);text-shadow:0 2px 20px #00000080}.hud .speedo .num span{font:700 13px/1 var(--body);letter-spacing:.3em;color:var(--muted);margin-top:4px}.hud .speedo .gforce{font:700 11px var(--mono);color:var(--muted);position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.hud .boostbox{text-align:right;width:220px;position:absolute;bottom:calc(clamp(18px,4vh,40px) + 232px);right:clamp(18px,3vw,44px)}.hud .boostbox .bar{background:#0a0b0e8c;border:1px solid #ffffff1a;border-radius:6px;height:8px;overflow:hidden}.hud .boostbox .bar i{background:linear-gradient(90deg,#7fe8ff,#ff5aa8);width:0;height:100%;transition:width .12s linear;display:block}.hud .boostbox .bar.full{box-shadow:0 0 18px #ff5aa8a6}.hud .boostbox .bar.on i{background:linear-gradient(90deg,#ffd166,#ff5a1f)}.hud .boostbox .lbl{font:700 11px var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px}.hud .boostbox .lbl kbd{font:700 11px var(--mono);color:var(--paper);background:#ffffff1f;border-radius:4px;padding:1px 5px}.hud .boostbox .drift{font:italic 800 30px/1 var(--display);color:#ff5aa8;text-shadow:0 2px 16px #0009;opacity:0;margin-bottom:8px;transition:opacity .2s,transform .2s;transform:translateY(6px)}.hud .boostbox .drift b{color:var(--paper)}.hud .boostbox .drift.show{opacity:1;transform:none}.hud .profile{width:min(360px,34vw);padding:12px 14px;position:absolute;top:22px;left:clamp(18px,3vw,44px)}.hud .profile .name{font:italic 700 18px/1 var(--display);text-transform:uppercase;justify-content:space-between;display:flex}.hud .profile .name span{font:600 12px var(--mono);color:var(--muted);font-style:normal}.hud .profile svg{width:100%;height:46px;margin-top:8px}.hud .minimap{border-radius:50%;width:200px;height:200px;position:absolute;bottom:clamp(18px,4vh,40px);left:clamp(18px,3vw,44px);overflow:hidden}.hud .minimap canvas{width:100%;height:100%}.hud .center{text-align:center;position:absolute;top:34%;left:0;right:0}.hud .count{font:italic 800 min(26vw, 260px)/.8 var(--display);color:var(--paper);text-shadow:0 10px 60px #0009;animation:.9s cubic-bezier(.2,.8,.2,1) both pop}.hud .count.go{color:var(--accent)}@keyframes pop{0%{opacity:0;transform:scale(1.6)}25%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(.92)}}.hud .push{font:italic 700 22px var(--display);text-transform:uppercase;border-radius:12px;align-items:center;gap:14px;margin-top:18px;padding:12px 18px;display:inline-flex}.hud .push .pips{gap:5px;display:flex}.hud .push .pips i{background:#ffffff26;border-radius:3px;width:14px;height:22px;transform:skew(-14deg)}.hud .push .pips i.on{background:var(--accent);box-shadow:0 0 12px var(--accent)}.hud .msg{font:italic 800 42px var(--display);text-transform:uppercase;text-shadow:0 4px 30px #0009;opacity:0;transition:opacity .3s;position:absolute;top:20%;left:50%;transform:translate(-50%)}.hud .msg.show{opacity:1}.hud .cam{font:600 12px var(--body);color:var(--muted);letter-spacing:.15em;text-transform:uppercase;position:absolute;top:22px;right:clamp(18px,3vw,44px)}.results{width:min(560px,90vw);padding:28px 30px;position:absolute;top:50%;left:clamp(20px,5vw,72px);transform:translateY(-50%)}.results .kicker{font:600 12px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}.results .big{font:700 clamp(56px, 7vw, 88px)/.95 var(--mono);letter-spacing:-.03em;margin:10px 0 0}.results .delta{font:700 20px var(--mono);margin-top:6px}.results .delta.good{color:var(--good)}.results .delta.bad{color:var(--bad)}.results .pb{background:var(--accent-2);color:#1a1406;font:italic 800 18px var(--display);text-transform:uppercase;border-radius:8px;margin-top:12px;padding:6px 12px;display:inline-block}.results table{border-collapse:collapse;width:100%;font:600 14px var(--body);margin-top:18px}.results td{border-top:1px solid var(--line);color:var(--muted);padding:8px 0}.results td:last-child{text-align:right;font:700 15px var(--mono);color:var(--paper)}.results .rank{font:italic 700 22px var(--display);text-transform:uppercase;align-items:baseline;gap:12px;margin-top:16px;display:flex}.results .rank b{font:italic 800 48px var(--display);color:var(--accent-2)}.actions{flex-wrap:wrap;gap:10px;margin-top:22px;display:flex}.board{grid-template-columns:260px 1fr;gap:24px;display:grid;position:absolute;inset:20vh clamp(20px,5vw,72px) 90px}.board .side{flex-direction:column;gap:8px;display:flex}.board .list{padding:8px 0;overflow:auto}.board .row{border-top:1px solid var(--line);font:600 15px var(--body);grid-template-columns:64px 1fr 160px 150px auto;align-items:center;padding:11px 22px;display:grid}.board .row:first-child{border-top:0}.board .row .r{font:italic 800 26px var(--display);color:var(--muted)}.board .row.top1 .r{color:var(--accent-2)}.board .row.top2 .r{color:#d9d9d9}.board .row.top3 .r{color:#d08b4a}.board .row .tm{font:700 17px var(--mono);text-align:right}.board .row .veh{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:13px}.board .row.mine{background:#ff5a1f1f}.board .empty{text-align:center;color:var(--muted);padding:40px}.center-panel{width:min(520px,92vw);padding:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.center-panel h2{font:italic 800 48px/.9 var(--display);text-transform:uppercase;margin:0 0 18px}.setting{border-top:1px solid var(--line);font:600 14px var(--body);grid-template-columns:1fr 1.2fr;align-items:center;gap:12px;padding:10px 0;display:grid}.seg{background:#00000059;border-radius:10px;gap:4px;padding:4px;display:flex}.seg button{all:unset;cursor:pointer;text-align:center;font:italic 700 15px var(--display);text-transform:uppercase;color:var(--muted);border-radius:7px;flex:1;padding:8px 6px}.seg button.on{background:var(--accent);color:#140a05}.loading{background:radial-gradient(at 30% 40%,#1d1410 0%,#07080a 70%);flex-direction:column;justify-content:flex-end;padding:clamp(24px,6vw,80px);display:flex;position:absolute;inset:0}.loading .bar{background:#ffffff1a;border-radius:2px;max-width:520px;height:3px;margin-top:18px;overflow:hidden}.loading .bar i{background:var(--accent);width:0;height:100%;transition:width .2s;display:block}.loading .tip{color:var(--muted);font:500 14px var(--body);max-width:520px;margin-top:14px}.toast{font:600 14px var(--body);pointer-events:none;border-radius:10px;padding:12px 18px;animation:.3s both screenIn;position:absolute;bottom:80px;left:50%;transform:translate(-50%)}.no-webgpu{text-align:center;justify-content:center;align-items:center;padding:32px;display:flex;position:absolute;inset:0}@media (max-width:900px){.tracks{grid-template-columns:1fr;top:18vh;overflow:auto}.track-card{min-height:220px}.kings{display:none}.board{grid-template-columns:1fr}.board .row{grid-template-columns:48px 1fr 110px}.board .row .veh,.hud .minimap{display:none}.hud .speedo{width:160px;height:160px}.hud .boostbox{width:160px;bottom:calc(clamp(18px,4vh,40px) + 170px)}.hud .speedo .num b{font-size:54px}.garage-panel{width:auto;height:52vh;top:auto;left:16px;right:16px}.garage-name{top:16px;bottom:auto}}.perf{z-index:50;color:#cfe;font:600 12px var(--mono,monospace);pointer-events:none;background:#0009;border-radius:6px;padding:5px 10px;position:fixed;bottom:8px;left:50%;transform:translate(-50%)}.career{grid-template-columns:minmax(200px,260px) 1fr;gap:22px;display:grid;position:absolute;inset:22vh clamp(20px,5vw,72px) 100px}.career .side{flex-direction:column;gap:8px;display:flex}.career .side .opt span{font:600 12px var(--mono);color:var(--accent);margin-top:4px;display:block}.career .events{border:1px solid var(--line);background:#111 50%/cover;border-radius:16px;grid-template-columns:1fr 1fr;align-content:start;gap:14px;padding:18px;display:grid;overflow:auto}.career .event{text-align:left;border:1px solid var(--line);color:var(--paper);cursor:pointer;background:#0a0b0e99;border-radius:12px;gap:14px;padding:16px;transition:border-color .2s,transform .2s;display:flex}.career .event.focus,.career .event:hover{border-color:var(--accent);transform:translateY(-2px)}.career .event b{font:italic 800 26px/1 var(--display);text-transform:uppercase;display:block}.career .event .txt>span{font:500 13px/1.4 var(--body);color:var(--muted);margin-top:6px;display:block}.career .event .tg{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.career .event .tg span{font:600 11px var(--mono);color:var(--muted);background:#ffffff0f;border-radius:5px;padding:3px 7px}.career .event .tg span.got{color:#111}.career .event .tg span.m1.got{background:#c98a4b}.career .event .tg span.m2.got{background:#c9ced6}.career .event .tg span.m3.got{background:#f2c14e}.career .event .tg span.m4.got{background:#a8f0ff}.career .event .best{font:600 12px var(--mono);color:var(--paper);margin-top:8px}.medal{font:italic 800 22px var(--display);text-transform:uppercase;align-items:center;gap:10px;display:flex}.medal i{background:#ffffff14;border:2px solid #ffffff26;border-radius:50%;flex:none;width:34px;height:34px}.medal.m1 i{background:radial-gradient(circle at 35% 30%,#f3c08a,#9a5a24);border-color:#e0a066}.medal.m2 i{background:radial-gradient(circle at 35% 30%,#fff,#8c939c);border-color:#d6dbe2}.medal.m3 i{background:radial-gradient(circle at 35% 30%,#fff1b0,#c98f12);border-color:#f2c14e;box-shadow:0 0 18px #f2c14e80}.medal.m4 i{background:radial-gradient(circle at 35% 30%,#fff,#5fc8de);border-color:#a8f0ff;box-shadow:0 0 22px #a8f0ff99}.medal span{font:600 12px var(--mono);color:var(--accent);text-transform:none;margin-left:6px}.results .medal{margin-top:14px}.results .evres{font:700 20px var(--mono);margin-top:6px}.results .targets{font:600 12px var(--mono);color:var(--muted);margin-top:6px}.opt.locked,.seg button.locked{opacity:.45}.hud .pos{text-align:right;font-family:var(--display);position:absolute;top:22px;right:clamp(18px,3vw,44px)}.hud .pos small{font:700 11px var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:block}.hud .pos b{font:italic 800 64px/.9 var(--display)}.hud .pos span{font:italic 800 28px var(--display);color:var(--muted)}.hud .gdelta{font:700 22px var(--mono);opacity:0;background:#00000073;border-radius:8px;padding:4px 10px;position:absolute;top:96px;left:50%;transform:translate(-50%)}.hud .gdelta.show{opacity:1}.hud .gdelta.good{color:var(--good)}.hud .gdelta.bad{color:var(--bad)}@media (max-width:760px){.career,.career .events{grid-template-columns:1fr}}.board .row .ghostbtn{border:1px solid var(--line);color:#7fe8ff;font:700 11px var(--body);cursor:pointer;background:#7fe8ff1a;border-radius:6px;margin-left:10px;padding:3px 9px}.board .row .ghostbtn:hover,.board .row .ghostbtn.focus{border-color:#7fe8ff}
