.map-surface { position: relative; width: 100%; }
.map-viewport { position: relative; width: 100%; aspect-ratio: 1882 / 836; overflow: hidden; touch-action: none; user-select: none; border-radius: 6px; }
.map-stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.map-stage > img { display: block; width: 100%; height: 100%; pointer-events: none; }
.map-points { position: absolute; inset: 0; pointer-events: none; }
.map-point { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; box-sizing: border-box; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%,-50%) scale(calc(1 / var(--map-zoom, 1))); pointer-events: auto; cursor: pointer; }
.map-point > span { width: 12px; height: 12px; box-sizing: border-box; background: #ffdb67; border: 1px solid #fff0b2; border-radius: 50%; box-shadow: 0 0 7px 3px #e4b52d80; }
.map-point:focus-visible, .map-point.is-selected { outline: 2px solid #fff; outline-offset: -5px; z-index: 3; }
.map-controls { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.map-controls[hidden] { display: none; }
.map-controls button { min-width: 44px; min-height: 44px; padding: 8px 14px; color: #e8f3ff; border: 1px solid #6387ae; background: #071329; border-radius: 6px; font: inherit; cursor: pointer; }
.map-controls button:disabled { opacity: .45; cursor: default; }
.map-controls button:focus-visible, .map-viewport:focus-visible { outline: 2px solid #76caff; outline-offset: 2px; }