.map-layout { display: grid; gap: var(--space-3); }
@media (min-width: 980px) {
  .map-layout { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr); align-items: start; }
}

.map-stage {
  position: relative;
  background: #121816;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  touch-action: none;
  min-height: 320px;
}
.map-stage svg.realm { width: 100%; height: auto; display: block; min-height: 360px; }
.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.map-toolbar .tool { background: var(--bg-raised); }
.map-help { color: var(--text-soft); font-size: 0.95rem; margin: 8px 0 0; }

.pin { cursor: pointer; }
.pin .hit { fill: transparent; stroke: transparent; }
.pin circle.mark { fill: var(--bg); stroke: var(--accent-2-text); stroke-width: 1.6; }
.pin.is-on circle.mark { fill: var(--accent-fill); stroke: var(--on-accent); }
.sea-label, .region-label {
  font-family: Outfit, "Segoe UI", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pin.is-dim { opacity: 0.22; }
.pin.is-veiled text.name { font-size: 0; }
.route {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8 6;
}
.route.animate {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: route-draw 1400ms var(--ease) forwards;
}
.land { fill: #e4d2ae; stroke: #5c4312; stroke-width: 1.4; }
.sea-label { fill: #d2c6b2; }
.region-label { fill: #3a2e1c; font-weight: 600; }
.river { fill: none; stroke: #8a3418; stroke-width: 1.6; }
.fen { fill: rgba(90, 70, 40, 0.28); stroke: #5c4312; }
.pin text { fill: #241c14; font-family: Outfit, "Segoe UI", sans-serif; font-size: 12px; }
.pin circle.mark { fill: #f7f1e4; stroke: #5c4312; }
[data-theme="parchment"] .map-stage { background: #d9cbb3; }
[data-theme="parchment"] .land { fill: #fbf6ea; }
[data-theme="parchment"] .sea-label { fill: #3a2e1c; }

.loc-panel { position: sticky; top: 120px; display: grid; gap: 8px; align-content: start; }
.loc-list { display: grid; gap: 8px; margin-top: var(--space-3); }
.loc-list button {
  text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 10px 12px;
  width: 100%;
  display: grid;
  gap: 2px;
}
.loc-list button[aria-current="true"] { border-color: var(--accent-text); }
.loc-list button small { color: var(--text-soft); font-family: var(--font-ui); }

.view-tabs { display: flex; gap: 8px; }
@media (min-width: 980px) {
  .view-tabs { display: none; }
  #list-panel { display: block !important; }
}
@media (max-width: 979px) {
  .map-layout.show-list .map-stage, .map-layout.show-list .map-toolbar { display: none; }
  .map-layout:not(.show-list) #list-panel { display: none; }
}