.the-map-pane {
position: fixed;
inset: 0;
display: none; align-items: center;
justify-content: center;
z-index: 99999;
} .the-map-pane.open {
display: flex;
} .the-map-backdrop {
position: absolute;
inset: 0;
background: rgba(12,12,14,0.6);
backdrop-filter: blur(2px);
cursor: pointer;
} .the-map-window {
position: relative;
max-width: 70vw;
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
overflow: hidden;
z-index: 2;
} .the-map-inner {
display: flex;
gap: 12px;
padding: 12px;
box-sizing: border-box;
align-items: flex-start;
} .the-map-close {
position: absolute;
right: 8px;
top: 8px;
border: 0;
background: transparent;
font-size: 20px;
line-height: 1;
padding: 6px 10px;
cursor: pointer;
z-index: 3;
} .the-map-image-container {
position: relative;
max-width: 60vw;
overflow: auto;
background-color: #000;
} .the-map-base-image {
display: block;
width: 100%;
height: auto;
user-select: none;
} .the-map-city-overlays,
.the-map-markers-layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
} .the-map-city-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
opacity: 0.95;
transition: opacity 200ms ease, filter 200ms ease;
} .the-map-city-overlay.current {
filter: drop-shadow(0 0 6px rgba(255,255,255,0.25)) saturate(120%) brightness(1.05);
z-index: 3;
} .the-map-markers-layer { z-index: 4; pointer-events: none; } .the-map-marker {
position: absolute;
transform: translate(-10%, -45%);
pointer-events: auto;
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
} .the-map-marker .marker-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(220,50,50,0.95);
box-shadow: 0 0 6px rgba(0,0,0,0.6);
display: inline-block;
} .the-map-marker .marker-label {
background: rgba(255,255,255,0.92);
padding: 4px 8px;
border-radius: 6px;
color: #111;
pointer-events: none;
} .the-map-legend { width: 220px; flex: 0 0 220px; overflow:auto; }
.the-map-legend-inner { padding: 12px; font-size: 14px; }
.legend-item { margin-bottom: 6px; display:flex; align-items:center; gap:8px; }
.legend-item .swatch { display:inline-block; width:14px; height:14px; border-radius:3px; border:1px solid rgba(0,0,0,0.15); }
.legend-item .swatch.revealed { background: rgba(120,200,120,0.95); }
.legend-item .swatch.current { background: rgba(80,160,255,0.95); } html.the-map-modal-open {
overflow: hidden;
touch-action: none;
}