:root{--ink:#f6f3ee;--ink-dim:#f6f3eeb3;--panel:#0e1117c7;--panel-solid:#12161d;--accent:#ffb347;--accent-2:#ff6a4d;--good:#73d18b;--bad:#ff5a5a;--police:#3d8bff;--font:"Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;--display:"Futura", "Avenir Next Condensed", "Arial Narrow", var(--font);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;background:#11151c;margin:0;overflow:hidden}#app,#app canvas{width:100%;height:100%;display:block;position:fixed;inset:0}#hud{pointer-events:none;z-index:2;position:fixed;inset:0}#hud *{pointer-events:auto}#hud .passive,#hud .passive *{pointer-events:none}button{font:inherit;color:var(--ink);cursor:pointer;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:10px;padding:8px 14px}button:hover{background:#ffffff2e}button.on,button.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#1a1208;border-color:#0000;font-weight:700}input,select{font:inherit;color:var(--ink);-webkit-user-select:text;user-select:text;background:#0006;border:1px solid #fff3;border-radius:10px;outline:none;padding:10px 14px}input:focus{border-color:var(--accent)}.menu{background:var(--panel);-webkit-backdrop-filter:blur(14px);border-radius:20px;flex-direction:column;gap:14px;width:min(560px,100vw - 32px);padding:22px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #00000073}.menu-compact{top:calc(12px + var(--safe-t));gap:8px;padding:12px;transform:translate(-50%)}.title{font-family:var(--display);letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:44px;font-weight:800}.presets{flex-wrap:wrap;gap:6px;display:flex}.presets button{padding:6px 10px;font-size:13px}.menu-row{flex-wrap:wrap;gap:8px;display:flex}.menu-row button{flex:1;min-width:120px;padding:12px}.quality{color:var(--ink-dim);flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;display:flex}.quality button{padding:4px 10px;font-size:13px}.search{position:relative}.search input{width:100%;font-size:17px}.search-busy{border:2px solid var(--accent);border-top-color:#0000;border-radius:50%;width:14px;height:14px;margin-top:-7px;animation:.8s linear infinite spin;position:absolute;top:50%;right:14px}@keyframes spin{to{transform:rotate(360deg)}}.search-results{background:var(--panel-solid);z-index:5;border-radius:12px;width:100%;max-height:50vh;margin:6px 0 0;padding:4px;list-style:none;position:absolute;overflow:auto}.search-results li{cursor:pointer;border-radius:8px;flex-direction:column;padding:8px 10px;display:flex}.search-results li:hover{background:#ffffff14}.search-results span{color:var(--ink-dim);font-size:12px}.stats{right:calc(8px + var(--safe-r));top:calc(8px + var(--safe-t));pointer-events:none;text-align:right;background:#00000080;border-radius:6px;padding:4px 8px;font:12px/1.4 ui-monospace,monospace;position:absolute}.credits{right:calc(6px + var(--safe-r));bottom:calc(4px + var(--safe-b));color:#ffffffbf;text-shadow:0 1px 2px #000;text-align:right;pointer-events:none;max-width:60vw;font-size:10px;position:absolute}.toasts{left:calc(14px + var(--safe-l));top:calc(14px + var(--safe-t));flex-direction:column;gap:8px;max-width:min(360px,70vw);display:flex;position:absolute}.toast{background:var(--panel);border-left:4px solid var(--accent);border-radius:8px;align-items:center;gap:10px;padding:10px 14px;font-size:14px;animation:.25s ease-out toast-in;display:flex}.toast-action{padding:4px 10px;font-size:13px}@keyframes toast-in{0%{opacity:0;transform:translate(-20px)}}.minimap-wrap{left:calc(18px + var(--safe-l));bottom:calc(18px + var(--safe-b));aspect-ratio:1.35;width:min(230px,32vw);position:absolute}.minimap-wrap .minimap.maplibregl-map,.minimap-wrap .minimap{filter:saturate(.85)brightness(.92);border:3px solid #0000008c;border-radius:22px;position:absolute;inset:0;overflow:hidden;box-shadow:0 6px 24px #0006}.minimap .maplibregl-canvas{outline:none}.minimap-arrow{filter:drop-shadow(0 1px 2px #000);border-bottom:16px solid #fff;border-left:7px solid #0000;border-right:7px solid #0000;width:0;height:0;margin:-9px 0 0 -7px;position:absolute;top:50%;left:50%}.route-km{color:var(--accent);background:#0009;border-radius:10px;padding:2px 8px;font-size:12px;font-weight:700;position:absolute;top:8px;right:8px}.wanted{justify-content:center;gap:2px;font-size:22px;display:flex;position:absolute;top:-28px;left:0;right:0}.wanted .star{color:#ffffff40;text-shadow:0 1px 3px #000}.wanted .star.on{color:#fff}.wanted.flash .star.on{animation:.5s steps(2,end) infinite flash}@keyframes flash{50%{color:var(--police)}}.place-name{right:calc(24px + var(--safe-r));bottom:calc(40px + var(--safe-b));text-align:right;text-shadow:0 2px 6px #000c;animation:6s ease-out forwards name-in;position:absolute}.place-name .district{font-family:var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);font-size:15px}.place-name .street{font-family:var(--display);letter-spacing:.03em;font-size:28px;font-weight:800}@keyframes name-in{0%{opacity:0;transform:translateY(8px)}8%{opacity:1;transform:none}75%{opacity:1}to{opacity:0}}.speedo{right:calc(24px + var(--safe-r));bottom:calc(110px + var(--safe-b));text-align:right;text-shadow:0 2px 6px #000c;position:absolute}.speedo .speed{font-family:var(--display);font-size:46px;font-weight:800;line-height:1}.speedo .unit{color:var(--ink-dim);letter-spacing:.1em;font-size:12px}.speedo .rpm{background:#fff3;border-radius:2px;width:120px;height:4px;margin:4px 0 0 auto;overflow:hidden}.speedo .rpm i{background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;display:block}.cam-name{left:50%;top:calc(12px + var(--safe-t));color:var(--ink-dim);text-shadow:0 1px 3px #000;font-size:12px;animation:3s forwards name-in;position:absolute;transform:translate(-50%)}.stuck{background:var(--panel);border-radius:12px;align-items:center;gap:10px;padding:10px 16px;display:flex;position:absolute;bottom:30%;left:50%;transform:translate(-50%)}.rotate{text-align:center;z-index:50;background:#0a0c10eb;justify-content:center;align-items:center;padding:24px;font-size:20px;display:flex;position:absolute;inset:0}.loading{text-align:center;width:min(420px,80vw);position:absolute;bottom:18%;left:50%;transform:translate(-50%)}.loading-text{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 4px #000;margin-bottom:8px;font-size:14px}.loading-bar{background:#ffffff2e;border-radius:2px;height:4px;overflow:hidden}.loading-bar i{background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;transition:width .3s;display:block}.touch{pointer-events:none;position:absolute;inset:0}.touch button{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}.touch-left{left:calc(14px + var(--safe-l));bottom:calc(14px + var(--safe-b));gap:12px;display:flex;position:absolute}.touch-right{right:calc(14px + var(--safe-r));bottom:calc(14px + var(--safe-b));align-items:flex-end;gap:10px;display:flex;position:absolute}.touch-top{right:calc(14px + var(--safe-r));top:calc(14px + var(--safe-t));gap:8px;display:flex;position:absolute}.tbtn{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#14181e73;border:2px solid #ffffff59;border-radius:18px;font-weight:800}.tbtn:active{background:#ffb3478c}.tbtn.steer{border-radius:50%;width:86px;height:86px;font-size:28px}.tbtn.pedal{width:82px;height:120px}.tbtn.gas{height:140px}.tbtn.small{border-radius:50%;width:64px;height:64px;font-size:14px}.tbtn.tiny{border-radius:12px;width:44px;height:44px;padding:0;font-size:18px}body:has(.touch) .minimap-wrap{left:50%;bottom:calc(10px + var(--safe-b));width:min(170px,28vw);transform:translate(-50%)}.tuning{background:var(--panel);border-radius:12px;width:300px;max-height:calc(100vh - 80px);padding:10px;font-size:12px;position:absolute;top:60px;right:10px;overflow:auto}.tuning-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.tuning-head button{padding:2px 8px;font-size:11px}.tuning label{grid-template-columns:100px 1fr 46px;align-items:center;gap:6px;display:grid}.tuning input{padding:0}.tuning em{text-align:right;color:var(--accent);font-style:normal}.pause{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:20;background:#080a0e8c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.pause-panel{background:var(--panel);border-radius:20px;flex-direction:column;gap:12px;width:min(560px,100vw - 32px);max-height:calc(100vh - 32px);padding:20px;display:flex;overflow:auto}.pause h2{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;margin:0}.pause h3{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em;margin:6px 0 0;font-size:13px}.field{align-items:center;gap:10px;font-size:14px;display:flex}.name-field{flex:1}.roster{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.roster li{background:#ffffff0d;border-radius:10px;align-items:center;gap:10px;padding:6px 10px;display:flex}.roster i{border-radius:50%;width:12px;height:12px}.rname{flex:1}.rname em{color:var(--accent);font-size:12px;font-style:normal}.rdist{color:var(--ink-dim);font-size:13px}.roster button{padding:4px 10px;font-size:13px}.hint{color:var(--ink-dim);margin:0;font-size:12px}.help summary{cursor:pointer;color:var(--ink-dim);font-size:13px}.help p{font-size:13px;line-height:1.5}.invited{background:#ffb34714;border:1px solid #ffb3474d;border-radius:12px;flex-direction:column;gap:8px;padding:10px;display:flex}.pausemap{z-index:25;background:#0d1015;position:absolute;inset:0}.pausemap .pausemap-map.maplibregl-map,.pausemap .pausemap-map{position:absolute;inset:0}.pausemap-bar{left:50%;top:calc(12px + var(--safe-t));background:var(--panel);border-radius:14px;flex-wrap:wrap;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 12px;display:flex;position:absolute;transform:translate(-50%)}.pausemap-pick{left:50%;bottom:calc(24px + var(--safe-b));background:var(--panel);border-radius:14px;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;display:flex;position:absolute;transform:translate(-50%)}.race-setup{border-top:1px solid #ffffff1a;flex-direction:column;gap:8px;padding-top:8px;display:flex}.race-setup h3{margin:0}.race-hud{right:calc(20px + var(--safe-r));top:calc(54px + var(--safe-t));text-align:right;text-shadow:0 2px 6px #000;font-family:var(--display);position:absolute}.race-hud .pos{font-size:44px;font-weight:800;line-height:1}.race-hud .cp{letter-spacing:.1em;color:var(--ink-dim);text-transform:uppercase;font-size:14px}.race-hud .time{font-variant-numeric:tabular-nums;color:var(--accent);font-size:22px}.countdown{font-family:var(--display);color:#fff;text-shadow:0 6px 30px #0009;font-size:120px;font-weight:900;animation:.9s ease-out pop;position:absolute;top:32%;left:50%;transform:translate(-50%,-50%)}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(1.6)}30%{opacity:1}}.race-lobby,.race-results{background:var(--panel);border-radius:16px;flex-direction:column;gap:10px;min-width:min(380px,90vw);padding:16px 20px;display:flex;position:absolute;top:20%;left:50%;transform:translate(-50%)}.race-results ol{margin:0;padding-left:20px}.race-results li{justify-content:space-between;gap:20px;padding:2px 0;display:flex}.garage .cars{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.garage .cars button{text-align:left;flex-direction:column;align-items:flex-start;gap:2px;display:flex}.garage .cars span{opacity:.8;font-size:12px;font-weight:400}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:2px solid #ffffff4d;border-radius:50%;width:34px;height:34px;padding:0}.swatch.on{box-shadow:0 0 0 3px var(--accent);border-color:#fff}.credit-list{color:var(--ink-dim);padding-left:18px;font-size:12px;line-height:1.5}.radio-name{left:50%;bottom:calc(14px + var(--safe-b));color:var(--ink-dim);text-shadow:0 1px 3px #000;font-size:12px;position:absolute;transform:translate(-50%)}