html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071018;color:#dffcff;font-family:Consolas,'Courier New',monospace}
#game-shell,#game-root{position:fixed;inset:0}
#game-root{background:radial-gradient(circle at center,#18303c,#071018);outline:none}
#game-root canvas{touch-action:none;cursor:grab}
body.camera-dragging #game-root canvas{cursor:grabbing}
#hud{display:none;position:fixed;top:64px;right:16px;z-index:45;width:min(390px,calc(100vw - 32px));max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);box-sizing:border-box;overflow:auto;padding:12px 14px;border:1px solid rgba(0,255,255,.75);background:rgba(0,13,22,.94);line-height:1.55;font-size:13px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.hud-open #hud{display:block}
.hud-title{margin-bottom:7px;color:#00ffff;font-weight:700}.hud-title span{font-weight:400}
#hud-map,#hud-mode{color:#8cecf0}
#menu{position:fixed;top:16px;right:16px;z-index:50;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
button{padding:10px 14px;border:1px solid #00dfe8;background:rgba(0,20,28,.92);color:#aefcff;font:600 13px Consolas,monospace;cursor:pointer;touch-action:none}
button:hover{background:rgba(0,45,57,.96)}button:disabled{opacity:.38;cursor:default}
.icon-button{width:34px;height:34px;padding:0;border-radius:50%;font-size:17px;line-height:32px;text-align:center}
body.hud-open #help-toggle{background:#00dfe8;color:#00151b}
#error-box{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:100;max-width:min(780px,90vw);padding:12px 16px;border:1px solid #ff5a5a;background:rgba(35,0,0,.94);color:#ffd7d7;white-space:pre-wrap;cursor:pointer}
.enemy-marker{width:30px;height:34px;z-index:45;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.72))}
.enemy-sprite{position:absolute;left:4px;top:3px;width:22px;height:27px;border:2px solid #3d0808;border-radius:48% 48% 38% 38%;background:linear-gradient(145deg,#ff6969,#a91526 58%,#590712);box-shadow:0 0 10px rgba(255,36,61,.78);transform:translateZ(0)}
.enemy-sprite::before,.enemy-sprite::after{content:'';position:absolute;top:7px;width:5px;height:5px;border-radius:50%;background:#fff4b8;box-shadow:0 0 4px #ffdd3d}
.enemy-sprite::before{left:4px}.enemy-sprite::after{right:4px}
.enemy-sprite i{position:absolute;left:50%;bottom:-7px;width:7px;height:10px;border-radius:0 0 4px 4px;background:#700916;transform:translateX(-50%)}
.player-ground-marker{width:28px;height:44px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.7))}
.car-marker-body{position:absolute;inset:2px 4px;border:2px solid #d8fff3;border-radius:7px 7px 5px 5px;background:linear-gradient(90deg,#087b55 0 18%,#20e296 19% 81%,#087b55 82%);box-shadow:0 0 9px rgba(0,255,157,.54)}
.car-marker-body::before{content:'';position:absolute;left:4px;right:4px;top:7px;height:11px;border-radius:3px;background:linear-gradient(#b9f5ff,#397e8a);border-bottom:2px solid #06373c}
.car-marker-body::after{content:'';position:absolute;left:3px;right:3px;bottom:3px;height:4px;border-radius:2px;background:#b8fff0;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(34px,env(safe-area-inset-bottom));color:rgba(210,253,255,.22);font-size:10px;letter-spacing:.16em;pointer-events:none}
#move-zone .zone-hint{left:max(28px,env(safe-area-inset-left))}#look-zone .zone-hint{right:max(28px,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(186,251,255,.7);border-radius:50%;background:rgba(0,30,39,.22);box-shadow:inset 0 0 18px rgba(0,229,239,.12);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(212,254,255,.86);border-radius:50%;background:rgba(0,82,92,.7);box-shadow:0 2px 8px rgba(0,0,0,.34);will-change:transform}
body.mobile-moving #joystick-base{opacity:.92}
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{z-index:12}
@media(pointer:coarse){#mobile-controls{display:block}}
@media(max-width:720px){#hud{top:calc(env(safe-area-inset-top) + 56px);right:10px;left:10px;width:auto;max-height:calc(100vh - 72px);max-height:calc(100dvh - env(safe-area-inset-top) - 72px);font-size:11px}#menu{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));left:auto;gap:5px;flex-wrap:nowrap}#menu button{min-height:34px;padding:7px 8px;font-size:10px}.icon-button{min-width:32px!important;width:32px!important;height:32px!important;padding:0!important;font-size:16px!important}}