@font-face { font-family: Satoshi; src: url('../fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Gambarino; src: url('../fonts/Gambarino-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font: 13px/1.4 Satoshi, sans-serif; color: #000100; }
body { display: flex; flex-direction: column; background: #9b7aa6; }
#browser-screen { position: relative; flex: 1; min-height: 0; }
#map-svg { width: 100%; height: 100%; display: block; }
#map-svg:focus { outline: none; }
.water { fill: #a8c8d8; }
.road { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s; }
.pin { opacity: .3; }
.pin.is-target { opacity: 1; cursor: pointer; }
.pin.is-target:focus, .cluster-marker:focus { outline: none; }
.pin.is-target:focus-visible path, .cluster-marker:focus-visible circle { stroke: #81d83d; stroke-width: 1.5; }
.pin.is-target:hover path { fill: #333; }
.pin--selected { visibility: hidden; }
.cluster-marker { cursor: pointer; }
.cluster-marker:hover circle { fill: #333; }
#place-popup { position: absolute; z-index: 2; width: min(240px, calc(100% - 32px)); padding: 18px 20px 38px; background: #1a1a1a; color: #faf7f2; clip-path: polygon(0 0,100% 0,100% 85%,50% 100%,0 85%); }
.popup-name { margin: 0 0 8px; font: 22px/1.15 Gambarino, serif; }
.popup-rating { color: #b9a1c2; margin-bottom: 8px; }
.popup-note { margin: 0; font-size: 14px; }
.popup-link { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none; color: #ffffff80; font: 11px/1.4 Satoshi, sans-serif; cursor: pointer; }
.popup-link:hover, .popup-link:focus-visible { color: #fff; }
.popup-link:active { opacity: .5; }
#map-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 20px; background: #faf7f2eb; text-align: center; max-width: calc(100% - 32px); width: max-content; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .road { transition: none; } }