.city-map-3d{perspective:1000px;background:radial-gradient(circle at 50% 35%,#17353a,#05090d 72%);cursor:grab}.city-map-3d.dragging{cursor:grabbing}.city3d-scene{position:absolute;inset:-13%;z-index:0;transform-style:preserve-3d;transition:opacity .35s;overflow:hidden}.city3d-scene:after{content:"";position:absolute;inset:-30%;z-index:8;background:repeating-linear-gradient(105deg,transparent 0 18px,#a5e9eb18 19px 20px,transparent 21px 38px);background-size:170% 170%;animation:cityRain 1.8s linear infinite;pointer-events:none}.city3d-world{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--camera-x,53deg)) rotateZ(var(--camera-z,-2deg)) scale(var(--camera-scale,1.05));transform-origin:50% 52%;transition:transform .18s ease-out}.dragging .city3d-world{transition:none}.city3d-world>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.08) brightness(.58);box-shadow:0 35px 90px #000;transform:translateZ(-3px)}.city3d-buildings{position:absolute;inset:0;transform-style:preserve-3d}.city3d-building{--h:32px;position:absolute;width:var(--w,18px);height:var(--d,16px);background:linear-gradient(135deg,#263b42,#111d22);border:1px solid #52707840;transform-style:preserve-3d;transform:translate3d(-50%,-50%,var(--h));box-shadow:0 0 12px #f3ba5030}.city3d-building:before,.city3d-building:after{content:"";position:absolute;transform-origin:bottom;background:linear-gradient(180deg,#24343a,#071014);border:1px solid #384d5445}.city3d-building:before{left:-1px;bottom:-1px;width:100%;height:var(--h);transform:rotateX(-90deg)}.city3d-building:after{right:-1px;top:0;width:var(--h);height:100%;transform-origin:right center;transform:rotateY(90deg);background:linear-gradient(90deg,#1b2c31,#081116)}.city3d-building i{position:absolute;inset:3px;background:repeating-linear-gradient(90deg,#eab759c9 0 2px,transparent 2px 6px),repeating-linear-gradient(0deg,transparent 0 4px,#eab75945 4px 5px);opacity:var(--lit,.45);box-shadow:0 0 10px #eab75955}.city3d-building.landmark{background:linear-gradient(135deg,#476a6c,#152629);box-shadow:0 0 20px #54d5c568}.city3d-building.landmark i{background:#54d5c580;opacity:.55}.city3d-river-glow{position:absolute;left:10%;right:6%;top:48%;height:12%;background:linear-gradient(90deg,transparent,#55d5d342,transparent);filter:blur(18px);transform:translateZ(2px);animation:riverPulse 5s ease-in-out infinite}.city2d-fallback{opacity:0!important;pointer-events:none}.city-map-3d.mode-2d .city3d-scene{opacity:0;pointer-events:none}.city-map-3d.mode-2d .city2d-fallback{opacity:1!important}.city-map-3d.mode-2d{cursor:default}.city3d-controls{position:absolute;right:18px;top:18px;z-index:7;display:flex;padding:3px;background:#071016dc;border:1px solid #34454d;backdrop-filter:blur(10px)}.city3d-controls button{min-width:38px;height:30px;border:0;background:transparent;color:#7f9299;font-size:.65rem;font-weight:800;cursor:pointer}.city3d-controls button.active{background:#18322f;color:#64d9cd;box-shadow:inset 0 0 0 1px #40756e}.city3d-hint{position:absolute;z-index:6;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 10px;background:#071016b8;color:#8ba0a6;font-size:.56rem;letter-spacing:.08em;pointer-events:none;opacity:.78}.city-map-3d .map-coordinates{top:58px}.city-map-3d .map-marker{transition:transform .15s,border-color .2s}.city-map-3d:not(.mode-2d) .map-marker{box-shadow:0 18px 28px #000a}.city-map-3d:after{content:"LIVE 3D";position:absolute;z-index:6;left:18px;top:18px;padding:5px 8px;border:1px solid #438079;background:#09201ecc;color:#65d8cc;font:800 .52rem Inter;letter-spacing:.13em}.city-map-3d.mode-2d:after{content:"TACTICAL 2D";border-color:#806b42;background:#211a0dcc;color:#dbb66b}@keyframes riverPulse{50%{opacity:.4;transform:translateZ(3px) scaleY(1.2)}}@keyframes cityRain{to{background-position:-90px 180px}}
@media(max-width:760px){.city3d-scene{inset:-5% -40%}.city3d-world{--camera-x:56deg;--camera-scale:1}.city3d-hint{display:none}.city3d-controls{right:10px;top:10px}.city-map-3d:after{left:10px;top:10px}.city-map-3d .map-coordinates{display:none}}
@media(prefers-reduced-motion:reduce){.city3d-world,.city3d-river-glow,.city3d-scene:after{transition:none;animation:none}.city3d-hint{display:none}}