.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-artwork{opacity:1;transition:opacity .6s ease}.metro-pin-artwork--fading{opacity:0}.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:calc(-1 * var(--space-sm));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:column;width:200px;background:hsla(0,0%,100%,.96);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-md);overflow:hidden;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);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-thumbnail{width:100%;height:100px;overflow:hidden;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:var(--space-3xs);padding:var(--space-xs) var(--space-sm) var(--space-sm)}.map-tooltip-name{font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:600;color:var(--color-text-primary);line-height:var(--leading-tight)}.map-tooltip-tagline{font-size:var(--text-label-md);color:var(--color-text-secondary);line-height:var(--leading-normal)}.map-tooltip-meta{display:flex;align-items:center;gap:var(--space-2xs)}.map-tooltip-rank{font-weight:500}.map-tooltip-divider,.map-tooltip-rank{font-size:var(--text-label-md);color:var(--ds-text-muted)}.map-tooltip-divider{opacity:.5}.map-tooltip-pop,.map-tooltip-screens{font-size:var(--text-label-md);color:var(--ds-text-muted);font-weight:500}.metros-map-legend-overlay{position:absolute;bottom:var(--space-md);left:var(--space-md);background:hsla(0,0%,100%,.92);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);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:var(--space-3xs) var(--space-xs);margin:calc(-1 * var(--space-3xs)) calc(-1 * var(--space-xs));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:calc(var(--space-3xs) - 1px) calc(var(--space-xs) - 1px)}.map-legend-item--dimmed{opacity:.4}.map-legend-item svg{flex-shrink:0;width:var(--space-lg);height:var(--space-lg);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-link{text-decoration:none;color:inherit}.map-legend-see-all{font-size:var(--text-label-md);font-weight:500;color:var(--color-accent-primary);margin-left:var(--space-2xs)}.map-legend-link:hover .map-legend-see-all{text-decoration:underline}.map-legend-sublabel{font-size:var(--text-label-sm);color:var(--ds-text-muted)}.map-legend-artwork{width:var(--space-lg);height:var(--space-lg);border-radius:var(--space-3xs);overflow:hidden;flex-shrink:0;transition:opacity .6s ease}.map-legend-artwork--fading{opacity:0}.map-legend-artwork-img{width:100%;height:100%;object-fit:cover;display:block}.map-legend-show-name{font-weight:600;transition:opacity .6s ease}.map-legend-show-name--fading{opacity:0}.map-legend-metro-count{color:var(--ds-text-muted)}.map-legend-show-name+.map-legend-metro-count:before{content:"·";margin:0 var(--space-2xs);color:var(--ds-text-muted);opacity:.5}.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:var(--space-lg);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:var(--space-sm);left:var(--space-sm);padding:var(--space-xs) var(--space-sm)}.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)}.map-legend-see-all{display:none}}.route-line{pointer-events:none}.route-line--completed{opacity:1;animation:routeLineFadeIn .6s ease both}.route-line--active{animation:routeLineFadeIn .4s ease both}@keyframes routeLineFadeIn{0%{opacity:0}to{opacity:1}}.metro-pin--route-background{opacity:.06;pointer-events:none;animation:none;cursor:default}.metro-pin--route-background .metro-pin-glow,.metro-pin--route-background .metro-pin-icon{animation:none}.metro-pin--route-inactive{opacity:.25;pointer-events:none;animation:none;cursor:default}.metro-pin--route-inactive .metro-pin-glow,.metro-pin--route-inactive .metro-pin-icon{animation:none}.metro-pin--route-active{opacity:1;pointer-events:none;animation:routePulse .8s ease-out both;cursor:default}.metro-pin--route-active .metro-pin-glow{animation:none}.metro-pin--route-visited{opacity:1;pointer-events:none;animation:none;cursor:default}.metro-pin--route-visited .metro-pin-glow{animation:none}@keyframes routePulse{0%{transform:scale(1);filter:brightness(1)}40%{transform:scale(1.4);filter:brightness(1.3)}to{transform:scale(1);filter:brightness(1)}}@media (prefers-reduced-motion:reduce){.metro-pin,.metro-pin--route-active,.metro-pin-glow,.metro-pin-icon{animation-duration:.01ms!important}}