.viewport { position: relative; isolation: isolate; background: #aec2b7; }
#game { image-rendering: auto !important; cursor: crosshair; touch-action: none; display: block; }
.world3d-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.world3d-label,.world3d-float { position: absolute; top: 0; left: 0; white-space: nowrap; font: 500 11px/1.5 Tahoma,sans-serif; color: #f7f3dc; background: #142c2bc9; border: 1px solid #e6e0b221; padding: 2px 7px; border-radius: 4px; box-shadow: 0 2px 6px #18312c20; }
.world3d-label.local { color: #fff3b9; border-color: #e8d49a70; font-weight: bold; }
.world3d-label.ally { color: #a4f2c4; }
.world3d-label.enemy { color: #ffc1ad; background: #4a211fca; border-color: #cb8c6344; font-size: 10px; }
.world3d-label.station { background: #29392de3; color: #f8ddb0; }
.world3d-label.objective { background: #314b3be8; color: #fff0b9; border-color: #d8bb6699; font-size: 11px; }
.world3d-label.resource { font-size: 10px; background: #22382bb8; }
.world3d-float { border: 0; background: transparent; font-size: 15px; font-weight: bold; text-shadow: 0 2px 3px #10251e; box-shadow: none; }
.world3d-label[hidden],.world3d-float[hidden] { display: none; }
.world3d-caption { position: absolute; top: 16px; left: 18px; color: #f8f3d8; background: #1d392dc9; border: 1px solid #d7d3ab45; padding: 6px 10px; border-radius: 4px; z-index: 3; font: 600 10px/1.5 Tahoma,sans-serif; letter-spacing: 1.6px; pointer-events: none; }
.world3d-caption>span:last-child { display: block; letter-spacing: .2px; opacity: .65; font-size: 10px; margin-top: 2px; }
.live-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #a5e1a9; margin-right: 5px; box-shadow: 0 0 8px #a5e1a970; }
.camera-tools { position: absolute; top: 16px; right: 16px; z-index: 4; display: flex; gap: 3px; padding: 3px; background: #19352cd4; border: 1px solid #d7d3ab45; border-radius: 5px; }
.camera-tools button { min-width: 30px; min-height: 30px; padding: 2px 7px; margin: 0; background: transparent; border: 0; border-radius: 3px; color: #f5e9c8; font-size: 20px; line-height: 1; }
.camera-tools button:hover,.camera-tools button:focus-visible { background: #c5b87c36; }
.zombie-adventure .viewport .map-home { left: 135px; right: auto; z-index: 4; }
.zombie-adventure .viewport .map-cart { z-index: 4; }
.camera-hint { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: 70%; white-space: nowrap; color: #eee9ca; font: 10px/1.5 Tahoma,sans-serif; padding: 5px 9px; border-radius: 4px; background: #142e27c7; pointer-events: none; }
.radar3d { position: absolute; z-index: 3; bottom: 14px; right: 14px; width: 112px; border: 1px solid #d7d3ab55; border-radius: 5px; background: #17372ae8; padding: 6px; pointer-events: none; }
.radar3d svg { width: 100%; display: block; }
.radar3d span { display: block; font: 9px Tahoma,sans-serif; color: #e5dcbc; text-align: center; padding-top: 4px; }
.render-status { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; background: #132a27e6; color: #f6e6bd; padding: 30px; text-align: center; }
.render-status[hidden] { display: none; }
.viewport.under-attack::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; box-shadow: inset 0 0 80px #d35a3d70; animation: warning3d 1s ease-in-out infinite alternate; }
@keyframes warning3d { to { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .viewport.under-attack::after { animation: none; } }
@media (max-width: 640px) { .world3d-caption { top: 10px; left: 10px; padding: 4px 7px; } .world3d-caption>span:last-child { display: none; } .camera-tools { top: 10px; right: 10px; } .camera-tools button { min-width: 28px; } .camera-hint { display: none; } .radar3d { width: 75px; bottom: 10px; right: 10px; } .world3d-label { font-size: 10px; padding: 1px 4px; } }
@media (max-width: 640px) { .zombie-adventure .viewport .map-home,.zombie-adventure .viewport .map-cart { top: auto; bottom: 10px; } .zombie-adventure .viewport .map-home { left: 104px; } }