.map-viewport {
  position: relative;
  max-height: none;
  overflow: auto;
  background: #131610;
  scrollbar-color: #817956 #22271b;
  overscroll-behavior: contain;
  cursor: grab;
}
.map-viewport.board-is-zoomed {
  max-height: min(79vh, 1100px);
}
.map-viewport.board-is-panning, .map-viewport.board-is-panning * {
  cursor: grabbing;
}
.map-viewport .map {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--board-ratio, 1600 / 1372);
  user-select: none;
}
.map .board-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.board-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.board-route-layer polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: #ffdf83;
  stroke-width: 3px;
  stroke-dasharray: 5 3;
  filter: drop-shadow(0 0 2px #19180b);
}
.board-route-layer .board-advance-line {
  stroke: #ff9c6d;
  stroke-width: 4px;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 3px #2b0f06);
  pointer-events: none;
}
.board-route-layer .board-advance-hit {
  stroke: transparent;
  stroke-width: 16px;
  stroke-dasharray: none;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}
.board-route-layer .board-advance-hit:hover + .board-advance-line {
  stroke: #ffd2b4;
  stroke-dasharray: 6 4;
}
.board-supply {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .16cqw;
  padding: .09cqw .3cqw;
  transform: translate(-50%, -50%);
  border: 1px solid #e3cf9ec9;
  border-radius: .45cqw;
  background: #10130ceb;
  box-shadow: 0 1px 3px #0d0b06b5;
  pointer-events: auto;
}
.board-supply b {
  color: #fff4d8;
  font: 800 max(10px, 1.2cqw)/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.board-supply.is-empty {
  border-color: #ffae8a;
  background: #46150fef;
}
.board-supply.is-empty b { color: #ffd0bb; }
.board-supply-shadow { background: #2a1411ef; }
.board-supply-token {
  width: max(9px, 1.45cqw);
  height: max(9px, 1.45cqw);
  object-fit: contain;
}
.board-location {
  position: absolute;
  isolation: isolate;
  transform: translate(-50%, -50%);
  width: max(15px, 2.25cqw);
  height: max(15px, 2.25cqw);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  pointer-events: auto;
}
.board-location::after {
  position: absolute;
  content: '';
  inset: 7%;
  border: 2px solid transparent;
  border-radius: inherit;
}
.board-location:is(:hover, :focus-visible, .is-selected) { z-index: 4; }
.board-location:is(:hover, .is-selected)::after {
  border-color: #fff1b5;
  box-shadow: 0 0 0 2px #272314, 0 0 10px #f9db8f;
}
.board-location.is-advance::after {
  border-color: #ffb493;
  box-shadow: 0 0 0 2px #3d1a0f, 0 0 9px #ff8d5c;
  background: #ff7a4a2e;
}
.board-location.is-legal::after {
  border-color: #fff1a6;
  box-shadow: 0 0 0 2px #462f12, 0 0 9px #fbd971;
  background: #ffe36a3b;
}
.board-location.is-active::after {
  border-color: #d9f9b9;
  box-shadow: 0 0 0 2px #343e22, 0 0 8px #c6ed9b;
}
.board-heroes, .board-armies {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
}
.board-heroes {
  bottom: 67%;
  gap: .08cqw;
}
.board-hero {
  display: block;
  width: max(14px, 2.55cqw);
  height: max(14px, 2.55cqw);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px #12100b);
}
.board-armies {
  top: 69%;
  gap: .12cqw;
}
.board-army {
  display: flex;
  align-items: center;
  padding: .09cqw .27cqw .09cqw .08cqw;
  gap: .16cqw;
  border: 1px solid #eadab080;
  border-radius: .36cqw;
  background: #151810e8;
  box-shadow: 0 1px 2px #10100b9c;
}
.board-army-shadow { background: #3f1918ed; }
.board-troop {
  width: max(9px, 1.45cqw);
  height: max(9px, 1.45cqw);
  object-fit: contain;
}
.board-army b {
  color: #fff6dc;
  font: 800 max(10px, 1.15cqw)/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.board-stronghold {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  height: 160%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
}
.board-region-pieces {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .37cqw;
  transform: translate(-25%, -40%);
  pointer-events: none;
}
.board-eye, .board-nazgul-group { pointer-events: auto; }
.board-eye-token {
  display: block;
  width: max(21px, 3.25cqw);
  height: max(21px, 3.25cqw);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px #140a05) drop-shadow(0 0 .25cqw #ffe59c);
}
.board-nazgul-group {
  display: flex;
  flex-wrap: wrap;
  max-width: max(92px, 15.25cqw);
  row-gap: .13cqw;
  padding: .1cqw .2cqw;
}
.board-nazgul {
  display: block;
  width: max(22px, 3.7cqw);
  height: max(18px, 3.05cqw);
  object-fit: contain;
  filter: contrast(1.2) drop-shadow(0 0 1px #fff4d3) drop-shadow(0 1px 1px #211b0d);
}
.board-track-marker {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.board-track-token {
  display: block;
  width: 2.46cqw;
  height: 2.46cqw;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px #1b100b) drop-shadow(0 0 1px #fff6d5);
}
.board-pile {
  position: absolute;
  display: block;
  padding: 0;
  border: 1px solid transparent;
  border-radius: .7cqw;
  background: transparent;
  pointer-events: auto;
}
.board-pile:is(:hover, :focus-visible) {
  border-color: #ffe096;
  background: #d5a3521c;
}
.board-pile-peek {
  box-shadow: inset 0 0 0 2px #fbe097, 0 0 .65cqw #efbd60;
}
.board-pile-art {
  position: absolute;
  inset: 15% 10% 3%;
}
.board-pile-top, .board-pile-under {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #130d09d6);
}
.board-pile-under { transform: translate(-3%, 1%) rotate(-3deg); }
.board-pile-under-deep { transform: translate(3%, 1%) rotate(2deg); }
.board-pile-count, .board-pile-status {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: max(17px, 2.05cqw);
  min-height: max(16px, 1.75cqw);
  padding: .13cqw .32cqw;
  border-radius: .45cqw;
  border: 1px solid #dcc18d;
  background: #1a1c15f2;
  color: #fff2d1;
  box-shadow: 0 1px 2px #1d130bab;
  font: 800 max(10px, 1.15cqw)/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.board-pile-count {
  top: 3%;
  right: 3%;
}
.board-pile-status {
  bottom: 3%;
  right: 3%;
  font-size: max(7px, .85cqw);
  padding-inline: .4cqw;
  max-width: 94%;
  color: #241708;
  background: #efd097;
}
.board-hide-pieces :is(.board-heroes, .board-armies, .board-stronghold, .board-region-pieces, .board-supply) {
  display: none;
}