:root{--accent:#ff4d1f;--accent2:#ffb300;--cyan:#5ee7ff;--bg:#07080c;--panel:#0a0c12b8;--panel-border:#ffffff14;--text:#eef1f6;--muted:#98a0ad;--font-display:"Orbitron", "Rajdhani", sans-serif;--font-ui:"Rajdhani", system-ui, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font-ui);margin:0;overflow:hidden}#app,#app canvas{width:100vw;height:100vh;display:block;position:fixed;inset:0}button{font-family:inherit}.hidden{display:none!important}.screen{z-index:20;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0000008c}.brand{font-family:var(--font-display);letter-spacing:.08em;align-items:baseline;gap:.25em;font-size:clamp(42px,7vw,92px);font-weight:900;line-height:1;display:flex}.brand.small{font-size:clamp(28px,3.4vw,44px)}.brand-apex{color:#fff;text-shadow:0 0 24px #ffffff59}.brand-drift{color:var(--accent);text-shadow:0 0 32px #ff4d1f8c;font-style:italic}#loading{background:radial-gradient(at 50% 40%,#1a1d28 0%,#07080c 70%);flex-direction:column;gap:28px}.loading-bar{background:#ffffff14;border-radius:3px;width:min(520px,70vw);height:6px;overflow:hidden}#loading-fill{background:linear-gradient(90deg, var(--accent), var(--accent2));width:0%;height:100%;box-shadow:0 0 16px var(--accent);transition:width .2s}.loading-text{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:13px}#menu{pointer-events:none;justify-content:flex-start;align-items:stretch}.menu-bg{pointer-events:none;background:linear-gradient(90deg,#05060ae6 0%,#05060ab8 38%,#05060a00 62%);position:absolute;inset:0}.menu-panel{pointer-events:auto;flex-direction:column;gap:12px;width:min(560px,46vw);min-width:420px;height:100%;padding:22px 26px 26px;display:flex;position:relative}.menu-head{flex:none}.menu-sub{color:var(--muted);letter-spacing:.28em;margin-top:2px;font-size:11px}.tabs{border-bottom:1px solid var(--panel-border);flex:none;gap:4px;display:flex}.tabs button{color:var(--muted);letter-spacing:.04em;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-bottom:2px solid #0000;flex:1;padding:9px 2px;font-size:12px;font-weight:700;transition:color .15s,border-color .15s}.tabs button:hover{color:var(--text)}.tabs button.active{color:#fff;border-bottom-color:var(--accent)}.tab-body{flex:auto;min-height:0;display:flex}.tab{flex:1;min-height:0;overflow:auto}.card{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px;flex-direction:column;gap:10px;padding:14px 16px;display:flex}.card h3{font-family:var(--font-display);letter-spacing:.24em;color:var(--accent2);margin:4px 0 0;font-size:11px;font-weight:700}.seg{gap:6px;display:flex}.seg.wrap{flex-wrap:wrap}.seg button{color:var(--text);cursor:pointer;letter-spacing:.02em;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:9px;flex:1;justify-content:center;align-items:center;gap:6px;padding:9px 8px;font-size:14px;font-weight:600;transition:all .15s;display:flex}.seg button:hover{background:#ffffff1c;border-color:#ffffff40}.seg button.active,.vehicle-grid button.active{background:linear-gradient(#ff4d1ff2,#d2320cf2);border-color:#ff8c5ab3;box-shadow:0 0 18px #ff4d1f59}.seg.compact button{padding:7px 6px;font-size:13px}.seg.wrap button{flex:30%}.vehicle-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.vehicle-grid button{color:var(--text);cursor:pointer;text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:9px;align-items:center;gap:7px;min-width:0;padding:7px 8px;transition:all .15s;display:flex}.vehicle-grid button:hover{background:#ffffff1c}.vehicle-grid .ico{flex:none;font-size:18px}.vehicle-grid .vn{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:700;line-height:1.15;overflow:hidden}.vehicle-grid .vy{color:var(--muted);letter-spacing:.06em;white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.vehicle-grid button.active .vy{color:#fffc}.track-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.track-grid button{color:var(--text);cursor:pointer;text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;flex-direction:column;gap:6px;min-width:0;padding:8px;transition:all .15s;display:flex}.track-grid button:hover{background:#ffffff1c}.track-grid button.active{background:linear-gradient(#ff4d1f8c,#d2320c8c);border-color:#ff8c5ab3;box-shadow:0 0 18px #ff4d1f4d}.track-grid canvas{background:#00000047;border-radius:7px;width:100%;height:auto;display:block}.track-grid .tmeta{width:100%;min-width:0}.track-grid .tn{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;line-height:1.2;overflow:hidden}.track-grid .tl{color:var(--muted);letter-spacing:.04em;white-space:nowrap;justify-content:space-between;gap:8px;font-size:11px;display:flex;overflow:hidden}.track-grid .tl .mono{color:var(--text)}.track-grid button.active .tl{color:#fffc}.music-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;display:grid}.music-list button{color:var(--text);cursor:pointer;text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;gap:1px;min-width:0;padding:6px 8px;transition:all .15s;display:flex}.music-list button:hover{background:#ffffff1c}.music-list button.active{background:linear-gradient(#ff4d1ff2,#d2320cf2);border-color:#ff8c5ab3;box-shadow:0 0 14px #ff4d1f59}.music-list .mt{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:700;overflow:hidden}.music-list .ma{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.music-list button.active .ma{color:#fffc}.music-list button.active .mt:before{content:"▶ "}.row{align-items:center;gap:12px;display:flex}.row label{width:74px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;flex:none;font-size:12px;line-height:1.2}.row .seg{flex:1}.hint{color:var(--muted);font-size:12.5px}.stats{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stat{background:#ffffff0a;border-radius:8px;padding:7px 10px}.stat .v{font-family:var(--font-display);color:#fff;font-size:16px}.stat .k{color:var(--muted);letter-spacing:.15em;text-transform:uppercase;font-size:10px}input[type=range]{width:100%;accent-color:var(--accent);flex:1}.time-label{text-align:right;width:54px;font-size:16px}.dialog h2.win{color:#ffd54a;text-shadow:0 0 18px #ffc83ccc,0 0 40px #ff781e80;animation:1.1s ease-in-out infinite alternate winPulse}@keyframes winPulse{0%{letter-spacing:.1em;transform:scale(1)}to{letter-spacing:.16em;transform:scale(1.08)}}.menu-actions{flex:none;align-items:center;gap:18px;padding-top:4px;display:flex}button.primary{color:#fff;font-family:var(--font-display);letter-spacing:.16em;cursor:pointer;white-space:nowrap;background:linear-gradient(#ff6a3d,#e2380c);border:0;border-radius:12px;padding:15px 30px;font-size:17px;font-weight:900;transition:transform .12s,box-shadow .12s;box-shadow:0 8px 30px #ff4d1f73}button.primary:hover{transform:translateY(-1px);box-shadow:0 12px 36px #ff4d1f99}.controls-hint{color:var(--muted);font-size:11.5px;line-height:1.5}.controls-hint b{color:#fff;background:#ffffff14;border-radius:4px;padding:1px 5px}.swatches{flex-wrap:wrap;flex:1;gap:6px;display:flex}.swatch-btn{cursor:pointer;border:2px solid #ffffff26;border-radius:50%;width:24px;height:24px;padding:0;transition:transform .12s}.swatch-btn:hover{transform:scale(1.12)}.swatch-btn.active{box-shadow:0 0 0 2px var(--accent);border-color:#fff}input.text,select.select{color:var(--text);background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;flex:1;padding:8px 10px;font-family:inherit;font-size:15px;font-weight:600}select.select option{color:#fff;background:#14161c}.flag-preview{text-align:center;width:34px;font-size:26px;line-height:1}.spinner{border:4px solid #ffffff1f;border-top-color:var(--accent);border-radius:50%;width:44px;height:44px;margin:0 auto 14px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.dialog.center{text-align:center;align-items:center;min-width:280px}.results .fl,.results-flag{margin-right:6px}.records-table{font-size:12.5px}.records-table table{border-collapse:collapse;width:100%}.records-table th{text-align:left;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--panel-border);padding:4px 6px;font-size:10px}.records-table td{white-space:nowrap;border-bottom:1px solid #ffffff0d;padding:4px 6px}.records-table td.pos{font-family:var(--font-display);color:var(--accent2);width:26px}.records-table .cond{color:var(--muted)}.small-btn{color:var(--muted);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;padding:6px 10px;font-size:12px}.small-btn:hover{color:#fff}.made-by{color:var(--muted);letter-spacing:.08em;pointer-events:none;font-size:12px;position:absolute;bottom:10px;right:18px}#menu .made-by{bottom:4px;left:26px;right:auto}.dialog{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:18px;flex-direction:column;gap:12px;min-width:340px;padding:30px 36px;display:flex}.dialog.wide{min-width:min(820px,92vw)}.dialog h2{font-family:var(--font-display);letter-spacing:.2em;margin:0 0 10px;font-size:26px}.dialog button{color:var(--text);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:10px;padding:12px;font-size:16px;font-weight:600}.dialog button:hover{background:#ffffff1f}.dialog button.primary{background:linear-gradient(#ff6a3d,#e2380c);border:0}.dialog-actions{justify-content:flex-end;gap:12px;margin-top:10px;display:flex}.results{border-collapse:collapse;width:100%;font-size:15px}.results th{text-align:left;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--panel-border);padding:6px 10px;font-size:11px}.results td{font-variant-numeric:tabular-nums;border-bottom:1px solid #ffffff0d;padding:8px 10px}.results tr.player td{color:#fff;background:#ff4d1f24}.results td.pos{font-family:var(--font-display);width:44px;font-weight:700}.results .best{color:#b46cff;font-weight:700}.results .fastest{color:var(--accent2)}.results .swatch{vertical-align:middle;border-radius:50%;width:10px;height:10px;margin-right:8px;display:inline-block}.results .dnf{color:var(--muted)}.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.02em;font-family:Share Tech Mono,ui-monospace,Menlo,monospace}#hud{pointer-events:none;z-index:10;font-family:var(--font-ui);position:fixed;inset:0}.hud-top{align-items:stretch;gap:14px;display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%)}.hud-block{border:1px solid var(--panel-border);text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-sizing:border-box;background:#06080c9e;border-radius:12px;width:104px;padding:8px 16px}.hud-block.timer{width:232px}.hud-block.total{width:150px}.hud-block .label{letter-spacing:.28em;color:var(--muted);font-size:10px}.hud-block .big{font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1.1}.hud-block .sub{color:var(--muted);font-size:14px}.hud-block.timer .big,.hud-block.total .big{font-size:26px;font-weight:400}.hud-block .row-small{color:var(--muted);justify-content:center;gap:14px;margin-top:2px;font-size:12px;display:flex}.hud-block .row-small b{color:#fff;margin-left:4px}.hud-block.position .big{color:var(--accent2);font-size:40px}.standings{flex-direction:column;gap:4px;min-width:210px;display:flex;position:absolute;top:18px;left:18px}.standings .st{border:1px solid var(--panel-border);background:#06080c8c;border-radius:8px;grid-template-columns:22px 12px 22px 1fr 58px;align-items:center;gap:8px;padding:5px 10px;font-size:14px;font-weight:600;transition:transform .2s;display:grid}.standings .st.me{background:#ff4d1f47;border-color:#ff785080}.standings .st .p{font-family:var(--font-display);color:var(--accent2);font-size:13px}.standings .st .sw{border-radius:50%;width:10px;height:10px}.standings .st .gap{color:var(--muted);text-align:right;font-family:Share Tech Mono,monospace;font-size:12px}.standings .st .fl{font-size:15px;line-height:1}#minimap{border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#06080c80;border-radius:12px;width:210px;height:258px;position:absolute;top:18px;right:18px}.hud-bottom{align-items:flex-end;gap:20px;display:flex;position:absolute;bottom:16px;right:24px}.gauge-wrap{width:260px;height:260px;position:relative}#speedo{width:260px;height:260px}.gauge-readout{text-align:center;position:absolute;top:118px;left:0;right:0}.gauge-readout .speed{font-family:"Share Tech Mono", var(--font-display);color:#fff;text-shadow:0 0 18px #5ee7ff80;text-align:center;min-width:3ch;font-size:54px;font-weight:400;display:inline-block}.gauge-readout .units{letter-spacing:.3em;color:var(--muted);margin-top:-4px;font-size:12px;display:block}.gear{text-align:center;font-family:var(--font-display);color:var(--accent2);font-size:26px;font-weight:700;position:absolute;top:196px;left:0;right:0}.msg{font-family:var(--font-display);letter-spacing:.18em;color:#fff;text-shadow:0 2px 20px #000000b3;opacity:0;margin-bottom:40px;font-size:22px;transition:opacity .3s}.msg.show{opacity:1}.drift{font-family:var(--font-display);letter-spacing:.2em;color:var(--accent2);text-shadow:0 0 20px #ffb30099;opacity:0;font-size:22px;transition:opacity .2s;position:absolute;bottom:120px;left:50%;transform:translate(-50%)}.drift.show{opacity:1}.wrongway{font-family:var(--font-display);color:#ff3b3b;letter-spacing:.3em;text-shadow:0 0 30px #ff3b3bb3;font-size:40px;font-weight:900;animation:.6s steps(2,end) infinite blink;position:absolute;top:32%;left:50%;transform:translate(-50%)}@keyframes blink{50%{opacity:.2}}.countdown{font-family:var(--font-display);color:#fff;text-shadow:0 0 60px #ffffff80,0 0 120px #ff4d1f99;justify-content:center;align-items:center;font-size:clamp(120px,22vw,260px);font-weight:900;display:flex;position:absolute;inset:0}.countdown.go{color:#5cff7a;text-shadow:0 0 60px #5cff7acc}.countdown .num{animation:.9s ease-out pop}@keyframes pop{0%{opacity:0;transform:scale(1.6)}20%{opacity:1;transform:scale(1)}to{opacity:.85;transform:scale(.9)}}@media (max-width:1100px){.hud-block.total{display:none}.hud-top{gap:8px}.hud-block{width:88px;padding:6px 8px}.hud-block.timer{width:200px}}@media (max-width:900px){.menu-panel{width:100%;min-width:0;padding:14px}.menu-bg{background:#05060acc}.standings{display:none}#minimap{width:140px;height:172px}.gauge-wrap,#speedo{width:200px;height:200px}.gauge-readout{top:88px}.gauge-readout .speed{font-size:40px}.gear{top:150px}}
