.play { --hud-minimap-size: clamp(128px, 14vw, 186px); }
.hud-minimap {
  position: absolute;
  top: 18px;
  right: 18px;
  width: var(--hud-minimap-size);
  display: grid;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff2ce;
  z-index: 1;
}
.hud-minimap-picture {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid #c3a472;
  border-radius: 50%;
  background: #cbb589;
  box-shadow: 0 0 0 2px #263322, 0 3px 12px #102215a6;
}
.hud-minimap-north, .atlas-north {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  font-weight: 800;
}
.hud-minimap-north {
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: #2b3628;
  font-size: .65rem;
  text-shadow: 0 1px #f6e8c1;
}
.hud-minimap-caption {
  justify-self: center;
  margin-top: 3px;
  padding: 0 7px;
  border: 1px solid #a78f63;
  border-radius: 4px;
  background: #1a281eee;
  font: 700 .66rem/1.35 system-ui, sans-serif;
}
.hud-minimap-caption kbd { margin-left: .28em; font-size: inherit; }
.hud-minimap:hover .hud-minimap-picture { border-color: #ffe3a0; }

.atlas-dialog {
  width: min(660px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: clamp(10px, 2.5vw, 21px);
  color: #f3e9d0;
  overflow: auto;
}
.atlas-dialog::backdrop { background: #09130dbb; }
.atlas-header, .atlas-legend { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.atlas-header { margin-bottom: 10px; }
.atlas-header .overline { margin: 0; }
.atlas-header h2 { margin: 0; font: 500 clamp(1.4rem, 4vw, 2rem)/1.2 Georgia, serif; }
.atlas-sheet {
  position: relative;
  display: grid;
  place-items: center;
  height: min(67dvh, 535px);
  border: 1px solid #ae9564;
  border-radius: 5px;
  overflow: hidden;
  background: #d0b888;
  box-shadow: inset 0 0 29px #4d402b61;
}
.atlas-north { top: 5px; right: 10px; font-size: .76rem; letter-spacing: .16em; color: #364031; }
.atlas-legend { margin-top: 8px; color: #d9cdb0; font-size: .75rem; }
.atlas-legend i {
  display: inline-block;
  width: .6em;
  height: .6em;
  margin-right: .24em;
  border-radius: 50%;
  background: #315751;
  border: 1px solid #cbe6cd;
}
.cartography { display: block; width: 100%; height: 100%; }
.cartography-pan, .cartography-heading { position: absolute; top: 0; left: 0; }
.cartography-pan { transform-box: border-box; will-change: transform; }
.cartography-land { fill: #d5c49b; }
.cartography-region { stroke: #655745; stroke-width: .6; fill: #bfa26e; }
.cartography-region-farm { fill: #bca473; }
.cartography-region-graveyard { fill: #a9a18c; }
.cartography-region-road { fill: #cfb693; stroke-dasharray: 2 1.2; }
.cartography-region-mine { fill: #ad9381; }
.cartography-region-woods { fill: #a4ab7e; }
.cartography-region-briar { fill: #b0a575; }
.cartography-region-haven { fill: #9fab85; }
.cartography-roads { fill: none; stroke: #f9e3aa; stroke-width: 1.12; stroke-linecap: round; stroke-linejoin: round; }
.cartography-place { fill: #4e4533; stroke: #f4e0ad; stroke-width: .42; }
.cartography-name {
  fill: #302c22;
  stroke: #f0deaf;
  stroke-width: 1.03;
  stroke-linejoin: round;
  paint-order: stroke;
  font: 700 3.6px Georgia, serif;
  text-anchor: middle;
}
.cartography-player circle { fill: #1d524d; stroke: #e5f3d7; stroke-width: .55; }
.cartography-player path { fill: #fff3bc; }

@media (max-width: 550px) {
  .play { --hud-minimap-size: 90px; }
  .hud-minimap { top: 8px; right: 8px; }
  .atlas-sheet { height: min(63dvh, 86vw); }
  .cartography-name { font-size: 4.1px; }
}
@media (pointer: coarse) {
  .play { --hud-minimap-size: clamp(64px, 20vmin, 110px); }
  .hud-minimap { top: var(--touch-top); right: var(--touch-right); }
  .hud-minimap-caption kbd { display: none; }
}