:root{color-scheme:dark;--red:#ed243f;--cyan:#61f4df;--panel:rgba(7,10,13,.88);--line:rgba(255,255,255,.16)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05070a;color:#f6f7f8;font-family:Inter,Segoe UI,Arial,sans-serif}
#game-shell,#game-root{position:fixed;inset:0}
#game-root{background:radial-gradient(circle at 50% 45%,#26323b,#07090c);outline:none}
#game-root canvas{touch-action:none;cursor:grab}
body.camera-dragging #game-root canvas{cursor:grabbing}
#brand{position:fixed;left:16px;top:16px;z-index:50;display:flex;align-items:center;gap:10px;padding-right:14px;background:linear-gradient(90deg,rgba(5,8,11,.95),rgba(5,8,11,.72),transparent);text-transform:uppercase;letter-spacing:.14em}
#brand>b{display:grid;place-items:center;width:42px;height:42px;background:linear-gradient(145deg,#ff3851,#a90b24);font-size:27px;font-style:italic;transform:skew(-7deg);box-shadow:0 6px 18px rgba(0,0,0,.35)}
#brand span{display:flex;flex-direction:column;gap:3px}#brand strong{font-size:13px}#brand small{font-size:7px;color:#9ba8ad;letter-spacing:.2em}
#menu{position:fixed;top:16px;right:16px;z-index:50;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
button{min-height:38px;padding:0 13px;border:1px solid var(--line);border-left:2px solid var(--red);background:rgba(8,12,15,.9);color:#f7f8f8;font:700 10px Inter,Segoe UI,sans-serif;letter-spacing:.1em;cursor:pointer;touch-action:none;text-transform:uppercase}
button:hover{border-color:rgba(255,255,255,.42);background:rgba(22,27,31,.95)}button:disabled{opacity:.36;cursor:default}
#start{border-left-color:var(--cyan)}.icon-button{min-width:38px;width:38px;padding:0;border-left:1px solid var(--line);font-size:15px}.info-button{font-family:Georgia,serif;font-style:italic;text-transform:none}
body.hud-open #help-toggle,body.map-info-open #map-info-toggle{background:var(--red);border-color:var(--red)}
#telemetry{position:fixed;left:18px;bottom:18px;z-index:42;width:244px;padding:13px 16px 12px;border-left:2px solid var(--red);background:linear-gradient(120deg,rgba(5,9,12,.92),rgba(8,13,16,.76));box-shadow:0 8px 30px rgba(0,0,0,.28);backdrop-filter:blur(6px)}
.telemetry-mode{font-size:8px;letter-spacing:.14em;color:#cbd1d3}.telemetry-mode i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.speed-row{display:flex;align-items:flex-end;gap:7px;margin:6px 0 2px;font-style:italic}.speed-row span{font-size:49px;line-height:.98;font-weight:900;letter-spacing:-.06em}.speed-row small{padding-bottom:7px;color:#abb4b7;font-size:8px;text-transform:uppercase}
.speed-track{height:3px;background:rgba(255,255,255,.12);overflow:hidden}.speed-track i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--cyan),#fff,var(--red));transition:transform .08s linear}
.telemetry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.telemetry-grid div{border-top:1px solid var(--line);padding-top:7px}.telemetry-grid small{display:block;margin-bottom:3px;color:#778389;font-size:6px;letter-spacing:.12em}.telemetry-grid b{font-size:11px}
#controls-card{position:fixed;right:18px;bottom:18px;z-index:42;display:grid;gap:6px;min-width:154px;padding:11px 14px;border-right:2px solid var(--cyan);background:rgba(5,9,12,.82);text-align:right;backdrop-filter:blur(6px)}
#controls-card b{font-size:7px;letter-spacing:.16em;color:#899499}#controls-card span{font-size:8px;letter-spacing:.08em;color:#eef3f4}
#hud,#map-info{display:none;position:fixed;top:68px;right:16px;z-index:55;width:min(410px,calc(100vw - 32px));max-height:calc(100vh - 94px);padding:14px 16px;overflow:auto;border:1px solid rgba(255,255,255,.19);border-right:2px solid var(--cyan);background:rgba(4,8,11,.94);font:11px/1.62 Consolas,'Courier New',monospace;box-shadow:0 14px 40px rgba(0,0,0,.4);overscroll-behavior:contain}
body.hud-open #hud{display:block}body.map-info-open #map-info{display:block}
.hud-title,.map-info-title{margin-bottom:8px;color:#fff;font-weight:800;letter-spacing:.12em}.hud-title span{color:#7f8a8f;font-weight:400}#hud span{color:var(--cyan)}#hud hr{height:1px;margin:10px 0;border:0;background:var(--line)}
#map-info p{margin:8px 0;color:#d8dddf}#map-info a{color:var(--cyan);text-underline-offset:2px}
#error-box{position:fixed;left:50%;bottom:22px;z-index:100;transform:translateX(-50%);max-width:min(760px,92vw);padding:13px 17px;border:1px solid #ff5268;border-left:3px solid var(--red);background:rgba(35,3,9,.96);color:#ffe7eb;font:12px/1.45 Consolas,monospace;white-space:pre-wrap;cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.55)}
.player-ground-marker{width:28px;height:44px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.75))}.car-marker-body{position:absolute;inset:2px 4px;border:2px solid #ffdce2;border-radius:7px 7px 5px 5px;background:linear-gradient(90deg,#72091b 0 18%,#d61935 19% 81%,#72091b 82%);box-shadow:0 -3px 0 #f4ffff,0 0 9px rgba(237,36,63,.55)}.car-marker-body::before{content:'';position:absolute;left:4px;right:4px;top:7px;height:11px;border-radius:3px;background:linear-gradient(#8caeb8,#203943);border-bottom:2px solid #10171a}.car-marker-body::after{content:'';position:absolute;left:3px;right:3px;bottom:3px;height:4px;border-radius:2px;background:#ff3048;box-shadow:0 -31px 0 #efffff}.car-marker-body i{position:absolute;inset:7px -5px 5px;border-left:4px solid #101719;border-right:4px solid #101719;border-radius:2px}
#mobile-controls{display:none;position:fixed;inset:0;z-index:31;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}.mobile-zone{position:fixed;top:0;bottom:0;width:50%;pointer-events:auto;touch-action:none}#move-zone{left:0}#look-zone{right:0}.zone-hint{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));color:rgba(255,255,255,.25);font-size:9px;letter-spacing:.16em;pointer-events:none}#move-zone .zone-hint{left:max(26px,env(safe-area-inset-left))}#look-zone .zone-hint{right:max(26px,env(safe-area-inset-right))}
#joystick-base{position:fixed;left:92px;top:calc(100% - 104px);width:96px;height:96px;margin:-48px 0 0 -48px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(15,20,23,.28);opacity:.32;pointer-events:none;transition:opacity .1s}#joystick-stick{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px;border:1px solid rgba(255,255,255,.86);border-radius:50%;background:rgba(187,22,47,.75);box-shadow:0 2px 8px rgba(0,0,0,.34);will-change:transform}body.mobile-moving #joystick-base{opacity:.92}
@media(pointer:coarse){#mobile-controls{display:block}#controls-card{display:none}}
@media(max-width:800px){#brand{left:8px;top:8px}#brand>b{width:34px;height:34px;font-size:21px}#brand strong{font-size:9px}#brand small{font-size:6px}#menu{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));left:160px;gap:4px;flex-wrap:nowrap;overflow-x:auto}#menu button{min-height:34px;padding:0 7px;font-size:8px}.icon-button{min-width:32px!important;width:32px!important}#telemetry{left:10px;bottom:max(10px,env(safe-area-inset-bottom));width:190px;padding:10px 12px}.speed-row span{font-size:39px}.telemetry-grid small{font-size:5px}#hud,#map-info{top:54px;right:8px;left:8px;width:auto;max-height:calc(100dvh - 68px);font-size:10px}#controls-card{display:none}}
@media(max-width:520px){#brand span{display:none}#menu{left:54px}#stop,#mode{display:none}#telemetry{width:174px}.telemetry-mode{font-size:6px}}