.metros-map-container{width:100%;max-width:900px;margin:0 auto}.metros-map-wrapper{position:relative;background:var(--color-bg-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/10}.metros-map-svg{width:100%;height:100%}.metros-map-state{fill:hsla(0,0%,100%,.8);stroke:rgba(0,0,0,.12);stroke-width:.5;outline:none;transition:fill .15s ease}.metros-map-state:hover{fill:var(--color-white)}.metro-pin{animation:pinFadeIn .6s ease-out both;transition:transform .25s cubic-bezier(.34,1.56,.64,1);will-change:transform}.metro-pin,.metro-pin-hitarea{cursor:pointer}.metro-pin-glow{opacity:.2;transition:opacity .2s ease;animation:pinGlow 2.5s ease-in-out infinite;will-change:opacity}.metro-pin-glow,.metro-pin-icon{pointer-events:none}.metro-pin:hover{transform:scale(1.15)}.metro-pin:hover .metro-pin-glow{opacity:.4;animation:none}.metro-pin--filtered{opacity:.15;pointer-events:none}.metro-pin--filtered .metro-pin-glow,.metro-pin--filtered .metro-pin-icon{animation:none}@keyframes pinFadeIn{0%{opacity:0}to{opacity:1}}.metro-pin--west{animation-delay:0s}.metro-pin--central{animation-delay:.3s}.metro-pin--east{animation-delay:.6s}@keyframes pinGlow{0%,to{opacity:.15}50%{opacity:.25}}.metro-pin:nth-child(10n+1){animation-delay:0s}.metro-pin:nth-child(10n+2){animation-delay:.03s}.metro-pin:nth-child(10n+3){animation-delay:.06s}.metro-pin:nth-child(10n+4){animation-delay:.09s}.metro-pin:nth-child(10n+5){animation-delay:.12s}.metro-pin:nth-child(10n+6){animation-delay:.15s}.metro-pin:nth-child(10n+7){animation-delay:.18s}.metro-pin:nth-child(10n+8){animation-delay:.21s}.metro-pin:nth-child(10n+9){animation-delay:.24s}.metro-pin:nth-child(10n+10){animation-delay:.27s}.metro-pin:nth-child(5n) .metro-pin-glow{animation-delay:0s}.metro-pin:nth-child(5n+1) .metro-pin-glow{animation-delay:.5s}.metro-pin:nth-child(5n+2) .metro-pin-glow{animation-delay:1s}.metro-pin:nth-child(5n+3) .metro-pin-glow{animation-delay:1.5s}.metro-pin:nth-child(5n+4) .metro-pin-glow{animation-delay:2s}.map-tooltip-html{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;z-index:100;animation:tooltipFadeIn .15s ease}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%,-100%) translateY(4px)}to{opacity:1;transform:translate(-50%,-100%) translateY(0)}}.map-tooltip-link{text-decoration:none;color:inherit;cursor:pointer}.map-tooltip-content{display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px 12px 8px 8px;background:hsla(0,0%,100%,.96);border:1px solid rgba(0,0,0,.08);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;transition:border-color .15s ease,box-shadow .15s ease}.map-tooltip-link:hover .map-tooltip-content{border-color:rgba(var(--accent-rgb),.3);box-shadow:0 4px 12px rgba(0,0,0,.12),0 0 0 1px rgba(var(--accent-rgb),.15)}.map-tooltip-chevron{width:16px;height:16px;color:var(--ds-text-muted);flex-shrink:0;opacity:.5;transition:opacity .15s ease,transform .15s ease}.map-tooltip-link:hover .map-tooltip-chevron{opacity:1;transform:translateX(1px);color:rgba(var(--accent-rgb),.8)}.map-tooltip-thumbnail{width:40px;height:40px;border-radius:6px;overflow:hidden;flex-shrink:0;background:rgba(0,0,0,.04)}.map-tooltip-thumbnail img{width:100%;height:100%;object-fit:cover}.map-tooltip-info{display:flex;flex-direction:column;gap:2px}.map-tooltip-name{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-text-primary);line-height:1.2}.map-tooltip-meta{display:flex;align-items:center;gap:6px}.map-tooltip-rank{font-weight:500}.map-tooltip-divider,.map-tooltip-rank{font-size:12px;color:var(--ds-text-muted)}.map-tooltip-divider{opacity:.5}.map-tooltip-pop,.map-tooltip-screens{font-size:12px;color:var(--ds-text-muted);font-weight:500}.metros-map-legend-overlay{position:absolute;bottom:16px;left:16px;background:hsla(0,0%,100%,.92);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-md);padding:12px 16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.08);z-index:10}.metros-map-footer{justify-content:flex-end;padding:var(--space-md) 0;gap:var(--space-md)}.map-legend,.metros-map-footer{display:flex;align-items:center}.map-legend{gap:var(--space-lg)}.map-legend-item{display:flex;align-items:center;gap:var(--space-sm);padding:4px 8px;margin:-4px -8px;border-radius:var(--radius-sm);transition:all .2s ease}.map-legend-item:hover{background:rgba(0,0,0,.03)}.map-legend-item--active{background:var(--color-accent-soft);border:1px solid var(--color-accent-border-medium);padding:3px 7px}.map-legend-item--dimmed{opacity:.4}.map-legend-item svg{flex-shrink:0;width:24px;height:24px;transition:transform .2s ease}.map-legend-item--active svg{transform:scale(1.1)}.map-legend-label{font-size:var(--text-body-sm);color:var(--ds-text-primary);font-weight:500}.map-legend-sublabel{font-size:var(--text-label-sm);color:var(--ds-text-muted)}.metros-map-count{font-size:var(--text-body-sm);color:var(--ds-text-secondary);margin:0}.metros-map-loading{opacity:.7}.metros-map-skeleton{display:flex;flex-direction:column;gap:var(--space-md)}.skeleton-map{aspect-ratio:16/10;border:1px solid var(--ds-border-subtle);border-radius:var(--radius-md)}.skeleton-legend,.skeleton-map{background:var(--ds-bg-elevated);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-legend{height:24px;width:200px;border-radius:var(--radius-sm)}@keyframes skeleton-pulse{0%,to{opacity:.4}50%{opacity:.8}}.metros-map-error{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:var(--ds-bg-elevated);border:1px solid var(--ds-border-subtle);border-radius:var(--radius-md);color:var(--ds-text-muted)}@media (max-width:768px){.metros-map-legend-overlay{bottom:12px;left:12px;padding:10px 12px}.metros-map-footer{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.map-legend{gap:var(--space-md)}.map-legend-item svg{width:20px;height:20px}.map-legend-sublabel{display:none}.metro-pin-hitarea{r:24}.metro-tooltip{display:none}}@media (max-width:480px){.map-legend{gap:var(--space-sm)}.map-legend-label{font-size:var(--text-label-md)}}@media (prefers-reduced-motion:reduce){.metro-pin,.metro-pin-glow,.metro-pin-icon{animation-duration:.01ms!important}}