#city-map { padding: clamp(64px, 8vw, 112px) 0; }
#city-map .section-header { margin-bottom: 2rem; }
.city-map-shell { border: 1px solid rgba(208,174,94,.32); background: #0d0f12; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 70px #0005; }
.city-map-stage { position: relative; min-width: 0; height: 560px; background: #090d12; }
.city-map-canvas { position: absolute; inset: 0; }
.city-map-message { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; color: #cbc2ad; background: radial-gradient(ellipse at center, #20251e, #090d12 75%); font-size: .95rem; line-height: 1.7; z-index: 1; }
#city-map[data-map-state="ready"] .city-map-message { position: absolute; inset: auto; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; margin: -1px; pointer-events: none; }
.city-map-badge { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid #b4aa8850; padding: 5px 7px; color: #a9a493; white-space: nowrap; }
.city-map-badge.is-active { color: #e0c47c; border-color: #c7a55270; }
.city-map-case-list { margin: 0; padding-left: 22px; }
.city-map-case-list li { padding: 12px 0 12px 4px; border-bottom: 1px solid #ffffff0b; font-size: .92rem; line-height: 1.5; }
.city-map-case-list li::marker { color: #baa267; font-size: .72rem; }
.city-map-case-list a { color: #e2d3a6; text-decoration: none; }
.city-map-case-list a:hover { color: #fff0bd; text-decoration: underline; }
.city-map-upcoming { font-size: .95rem; line-height: 1.8; margin-top: 24px; color: #b1aea5; }
.city-map-marker { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px; background: none; border: none; cursor: pointer; font-family: inherit; }
.city-map-marker img { width: 34px; height: 34px; object-fit: contain; background: #0a0c10e6; border: 1px solid #d7b76f; border-radius: 50%; padding: 5px; box-shadow: 0 2px 14px #000c; }
.city-map-marker span { position: absolute; top: 100%; opacity: 0; pointer-events: none; color: #d9d3c4; background: #0a0c10e8; padding: 3px 6px; border-radius: 2px; font-size: 10px; white-space: nowrap; }
.city-map-marker:hover, .city-map-marker:focus-visible, .city-map-marker[aria-pressed="true"] { z-index: 2; }
.city-map-marker:hover span, .city-map-marker:focus-visible span, .city-map-marker[aria-pressed="true"] span { opacity: 1; }
.city-map-marker.is-upcoming img { opacity: .67; border-color: #9b927b; }
.city-map-marker.is-active img { box-shadow: 0 0 14px #d4af5550, 0 3px 8px #000; }
.city-map-marker[aria-pressed="true"] img { border: 2px solid #f5d77d; background: #2c2617; }
.city-map-marker:focus-visible, .city-map-case-list a:focus-visible { outline: 2px solid #f3d17d; outline-offset: 4px; }
.city-map-shade { position: absolute; background: rgba(3, 8, 15, .48); pointer-events: none; }
.city-map-popup { min-width: 210px; max-width: 280px; padding: 0 4px 8px; color: #d4d0c7; font-family: Arial, sans-serif; }
.city-map-popup h3 { margin: 0 0 12px; font-family: 'Crimson Text', Georgia, serif; color: #f1ece1; font-size: 1.7rem; font-weight: 600; line-height: 1.2; }
.city-map-popup-label { margin: 22px 0 8px; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #aaa493; }
#city-map .gm-style-iw-c { background: #11151b; color: #d4d0c7; border: 1px solid #d0ae5e55; box-shadow: 0 8px 30px #0008; }
#city-map .gm-style-iw-d { max-height: 260px !important; overflow: auto !important; }
#city-map .gm-style-iw-tc::after { background: #11151b; }
#city-map .gm-style-iw-c .gm-ui-hover-effect > span { filter: brightness(0) invert(1); }
#city-map .gm-style-iw-c .gm-ui-hover-effect:focus-visible { outline: 2px solid #f3d17d; outline-offset: -4px; }
@media (max-width: 900px) {
    .city-map-stage { height: 420px; }
}