.map { position: relative; overflow: hidden; background: #a5a88c; user-select: none; -webkit-user-select: none; }
.map:focus-visible { box-shadow: inset 0 0 0 3px var(--brass-glint); border-radius: 0; }
.map.dragging { cursor: grabbing; }
.map-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.map-img { position: relative; width: 4096px; height: 3072px; max-width: none; pointer-events: none; }
.map-surround { position: absolute; max-width: none; pointer-events: none; }
.map-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.map-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px rgba(30, 18, 6, .38); }

.leg, .leg-case { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.leg.ghost { stroke: rgba(58, 36, 16, .28); stroke-width: 2; stroke-dasharray: 2 7; }
.leg-case { stroke: rgba(253, 248, 234, .92); stroke-width: 8; }
.route-done { filter: drop-shadow(0 1px 1.2px rgba(40, 20, 4, .35)); }
.leg.done, .leg.draw { stroke: var(--map-route); stroke-width: 3.6; }
.leg.sail { stroke: var(--map-sea-route); stroke-dasharray: 11 7; }

.leg.teleport { stroke: var(--map-magic-route); stroke-width: 4.2; stroke-dasharray: .5 7.5; }
.leg-case.teleport, .leg-case.time { stroke: var(--map-magic-thread); stroke-width: 7.5; stroke-dasharray: none; opacity: 1; }
.leg.time { stroke: var(--map-magic-route); stroke-width: 3.4; stroke-dasharray: 12 6 1 6; }

.leg.past { opacity: .4; stroke-width: 2.6; }
.leg-case.past { opacity: .45; stroke-width: 6; }
.leg-case.past.teleport, .leg-case.past.time { opacity: .5; stroke-width: 6; }
.leg, .leg-case { transition: opacity .5s ease; }

.pin { display: none; }
.pin.visited, .map.all-pins .pin { display: inline; }
.pin-ring { fill: var(--map-halo); stroke: var(--map-ink); stroke-width: 1.4; transition: fill .3s; }
.pin-dot { fill: var(--map-ink); }
.pin-label {
  font-family: var(--f-display-sc); font-size: 17px; fill: var(--map-label);
  paint-order: stroke; stroke: var(--map-halo); stroke-width: 5px; stroke-linejoin: round;
  opacity: 0; transition: opacity .3s;
}
.pin.current .pin-ring { fill: #f6dfa6; stroke: #7a4a0c; stroke-width: 2.4; }
.pin.current .pin-dot { fill: #7a4a0c; }
.pin.current .pin-label, .pin.labelled .pin-label, .pin:hover .pin-label, .pin:focus .pin-label { opacity: 1; }
.pin:focus { outline: none; }
.pin:focus-visible .pin-ring { stroke: #7a4a0c; stroke-width: 3; }
.pin-ripple { fill: none; stroke: #7a4a0c; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ripple 1.6s cubic-bezier(.2,.7,.2,1) 1 forwards; }
@keyframes ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }

.pin.vault .pin-ring { fill: #fff3d0; stroke: #7a4a0c; stroke-width: 2; }
.pin.vault .pin-dot { fill: #186a78; }
.pin.plane { display: none !important; }

.party-token, .moored-ship { filter: drop-shadow(0 2px 3px rgba(20, 10, 0, .5)); }

.tok-disc { fill: #2a1d12; stroke: #d9a64e; stroke-width: 1.6; }

.tok-rim { fill: #a4161a; stroke: #1b0a06; stroke-width: 1.2; }

.tok-pulse { fill: none; stroke: #c1121f; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: tok-pulse 2.6s ease-out infinite; }
@keyframes tok-pulse { 0% { opacity: .75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .tok-pulse { animation: none; } }
.tok-fig { fill: #f4e6c4; stroke: #2a1d12; stroke-width: .9; paint-order: stroke; }
.tok-fig.back { fill: #cdb98f; }

.moor-rim { fill: #2a1d12; stroke: #d9a64e; stroke-width: 1.8; }