.city-compass, .city-compass * { box-sizing: border-box; }

.city-compass__trigger {
    position: fixed;
    z-index: 9000;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: clamp(68px, 9vw, 100px);
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid #e3bc6e;
    border-radius: 50%;
    background: radial-gradient(circle, #704823, #21140d);
    box-shadow: 0 8px 25px #0008;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 160ms ease;
}

body.city-entered .city-compass__trigger { opacity: 1; pointer-events: auto; }
.city-compass__trigger:hover, .city-compass__trigger:focus-visible { transform: scale(1.06); outline: 3px solid #f0cf80; outline-offset: 3px; }
.city-compass__canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.city-compass__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #e7bd68; font-size: 34px; }
.city-compass__fallback[hidden] { display: none; }

.city-map[hidden] { display: none; }
.city-map { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 10px; opacity: 0; transition: opacity 180ms ease; }
.city-map.is-open { opacity: 1; }
.city-map__backdrop { position: absolute; inset: 0; background: #120a06e8; backdrop-filter: blur(7px); }
.city-map__dialog {
    position: relative;
    width: min(94vw, 94vh, 900px);
    max-height: 96vh;
    display: grid;
    justify-items: center;
    padding: clamp(10px, 2vw, 20px);
    border: 2px solid #b88947;
    border-radius: 16px;
    color: #351d0e;
    background: linear-gradient(135deg, #cda766, #ecd195 48%, #b8894e);
    box-shadow: 0 24px 80px #000c, inset 0 0 28px #6a3c1b70;
}
.city-map__dialog h2 { margin: 0 55px 10px; font: 800 clamp(20px, 3vw, 34px)/1 Georgia, serif; text-align: center; }
.city-map__close { position: absolute; z-index: 3; top: 8px; right: 8px; width: 42px; height: 42px; border: 2px solid #75421f; border-radius: 50%; color: #f4d89e; background: #4b2915; font: 700 29px/1 Georgia, serif; cursor: pointer; }
.city-map__square { position: relative; width: 100%; max-width: min(78vh, 800px); aspect-ratio: 1; overflow: hidden; border: 1px solid #633719; box-shadow: 0 8px 22px #3b1d0b66; }
.city-map__square > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.city-map__destinations { position: absolute; inset: 0; }
.city-map__destination {
    position: absolute;
    left: calc(var(--x) - var(--w) / 2);
    top: calc(var(--y) - var(--h) / 2);
    width: var(--w);
    height: var(--h);
    padding: 0;
    border: 0;
    border-radius: 45%;
    background: transparent;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.city-map__destination:hover, .city-map__destination:focus-visible { background: #edc66a4d; transform: scale(1.06); outline: 3px solid #f5d17c; outline-offset: 1px; }
.city-map__status { margin: 8px 0 0; font: 800 clamp(14px, 2vw, 19px)/1 Georgia, serif; text-align: center; }
.city-map__two-d { margin-top: 9px; padding: 8px 16px; border-radius: 999px; color: #f4d99d; background: #3b2112; font: 800 14px Georgia, serif; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .city-compass *, .city-map { transition: none !important; animation: none !important; }
}