/* Gold waypoints: a slow invitation, never a flashing scene overlay. */
.city-header{padding:18px 30px;align-items:center}
.city-header .brand{display:block;width:245px;line-height:0;filter:drop-shadow(0 3px 8px #04040a)}
.city-header .brand img{display:block;width:100%;height:auto}
.city-header .brand:hover{filter:drop-shadow(0 3px 10px #ad78ff55)}
.city-hotspots button{--beacon:#f1c978;--delay:0s;padding:7px;border-radius:14px;isolation:isolate}
.city-hotspots button[data-feature="2"]{--beacon:#c9a4ff;--delay:.65s}
.city-hotspots button[data-feature="3"]{--beacon:#f6c16e;--delay:1.3s}
.city-hotspots button[data-feature="4"]{--beacon:#79eddb;--delay:1.95s}
.city-hotspots button::before{content:"";position:absolute;inset:5px;border:1px solid var(--beacon);border-radius:16px;transform:rotate(45deg);opacity:.25;z-index:-1;animation:beacon-signal 3.8s ease-out var(--delay) infinite;pointer-events:none}
.city-hotspots button::after{content:"";position:absolute;right:6px;top:5px;width:5px;height:5px;background:#fff1c4;transform:rotate(45deg);box-shadow:0 0 9px var(--beacon);pointer-events:none}
.city-hotspots b{position:relative;isolation:isolate;width:44px;height:49px;border:0;border-radius:0;clip-path:polygon(18% 0,82% 0,100% 17%,100% 83%,82% 100%,18% 100%,0 83%,0 17%);background:linear-gradient(140deg,#fff0cb,var(--beacon) 28%,#6e533e 55%,var(--beacon));color:#fff3d9;font:600 16px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1px;backdrop-filter:none;box-shadow:none;text-shadow:0 1px 5px #000;transition:transform .22s,color .22s}
.city-hotspots b::before{content:"";position:absolute;inset:1px;clip-path:inherit;background:linear-gradient(150deg,#39303d,#111523 48%,#1e2030);z-index:-1}
.city-hotspots b::after{content:"";position:absolute;left:11px;right:11px;bottom:8px;height:2px;background:var(--beacon);opacity:.75;box-shadow:0 0 9px var(--beacon);animation:beacon-glint 3.8s ease-in-out var(--delay) infinite}
.city-hotspots button:hover b,.city-hotspots button:focus-visible b{background:linear-gradient(140deg,#fff6df,var(--beacon),#fff0be);box-shadow:none;color:#fff;transform:translateY(-3px)}
.city-hotspots button:hover b::before,.city-hotspots button:focus-visible b::before{background:linear-gradient(145deg,#67523f,#272239 62%,#151c2a)}
.city-hotspots button:hover::before,.city-hotspots button:focus-visible::before{animation:none;opacity:.65;transform:rotate(45deg) scale(1.16)}
.city-hotspots button:active b{transform:translateY(0) scale(.95)}
.city-hotspots button span{top:72px;padding:8px 13px;border-color:color-mix(in srgb,var(--beacon) 45%,transparent);border-radius:8px;background:#0e1221f5;color:#fff2d8;font-size:11px;font-weight:500;letter-spacing:.2px;box-shadow:0 6px 18px #0006}
.city-hotspots button span::after{content:" ↗";color:var(--beacon);margin-left:5px}
.city-hotspots button:focus-visible{outline:2px solid #fff0c7;outline-offset:9px}
@keyframes beacon-signal{0%,15%{opacity:.05;transform:rotate(45deg) scale(.91)}45%{opacity:.48}85%,100%{opacity:0;transform:rotate(45deg) scale(1.5)}}
@keyframes beacon-glint{0%,100%{opacity:.4}45%{opacity:1}}
@media(max-width:767px){
 .city-header{padding:13px 17px}.city-header .brand{width:170px;max-width:46vw}
 .city-hotspots{width:calc(100% - 36px);max-width:370px;justify-content:space-around;gap:6px;padding:13px 8px 31px;border:1px solid #e9c07625;border-radius:18px;background:linear-gradient(130deg,#171a2bed,#0a0e1ce8)}
 .city-hotspots button{padding:5px}.city-hotspots b{width:40px;height:44px;font-size:15px}
 .city-hotspots button span{display:block;top:59px;left:50%;transform:translateX(-50%)!important;opacity:1;background:none;border:0;box-shadow:none;padding:0;font-size:8px;color:#e1d8c7;letter-spacing:0}
 .city-hotspots button span::after{display:none}
 .city-hotspots button::before{inset:8px;animation-name:beacon-signal-mobile}
}
@keyframes beacon-signal-mobile{0%,15%{opacity:.05;transform:rotate(45deg) scale(.85)}45%{opacity:.38}85%,100%{opacity:0;transform:rotate(45deg) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.city-hotspots button::before{animation:none;opacity:.25;transform:rotate(45deg)}.city-hotspots b::after{animation:none}}
.paused .city-hotspots button::before{opacity:.25;transform:rotate(45deg)}