/* Separate continuous terrain, hit boundaries, scenery, badges and event layers. */
.reference-map .troop-badge text {
  font-size: 11px;
  stroke-width: 0.25px;
  font-weight: 700;
}
.reference-map .troop-badge {
  filter: none;
}
.map-hero,
.map-world-object {
  pointer-events: none;
}
.natural-map .hero-damage {
  font:
    700 11px Vazir,
    Tahoma;
  fill: #ffdbbb;
  stroke: #43261e;
  stroke-width: 1px;
}
.result-battle-map {
  margin: 18px 0;
  max-width: 1000px;
  border: 3px solid #657152;
  background: #244c4c;
}
.result-battle-map .natural-map {
  max-height: none;
}
.map-panel {
  background: #234d54;
  border: 3px solid #637561;
  border-radius: 9px;
  box-shadow: 0 8px 18px #091e2844;
  overflow: hidden;
  min-width: 0;
}
.battle-map.natural-map {
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
  /* Full view: the page scrolls under a finger; a zoomed map pans by dragging. */
  touch-action: pan-x pan-y;
  user-select: none;
  background: #254e54;
  isolation: isolate;
}
.natural-map .tile-top {
  fill: transparent !important;
  stroke: #273d2c !important;
  stroke-opacity: 0 !important;
  stroke-width: 0.65 !important;
  vector-effect: non-scaling-stroke;
  transition:
    fill 0.12s,
    stroke 0.12s;
  cursor: pointer;
  filter: none !important;
}
.map-castle .natural-cell .tile-top {
  stroke: #bec3a2 !important;
  stroke-opacity: 0 !important;
}
.natural-map .natural-cell.blocked .tile-top {
  cursor: not-allowed;
  stroke-opacity: 0 !important;
}
.natural-map .natural-cell:hover .tile-top {
  fill: #f6ebbe25 !important;
  stroke: #f6e8b2 !important;
  stroke-opacity: 0.8 !important;
}
.natural-map .natural-cell.valid-move .tile-top {
  fill: #5fe0d24d !important;
  stroke: #8af0e4 !important;
  stroke-opacity: 1 !important;
  stroke-width: 2 !important;
}
.natural-map .natural-cell.valid-attack .tile-top {
  fill: #ff7a2e4d !important;
  stroke: #ffb35c !important;
  stroke-opacity: 1 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 5 3;
  animation: map-target 1.2s ease-in-out infinite;
}
@keyframes map-target {
  50% {
    fill: #ff7a2e80;
  }
}
.natural-map .natural-cell.unavailable .tile-top {
  stroke-dasharray: 2 5;
}
.natural-map .natural-cell.protected.neighbor .tile-top {
  stroke: #9ee6ff !important;
  stroke-opacity: 0.9 !important;
}
.natural-map .natural-cell.selected .tile-top {
  fill: #f7d76828 !important;
  stroke: #ffeb9b !important;
  stroke-opacity: 1 !important;
  stroke-width: 2.2 !important;
  stroke-dasharray: none;
}
.natural-map .natural-cell.target .tile-top {
  fill: #ffe3ae24 !important;
  stroke: #fff2c4 !important;
  stroke-opacity: 1 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 5 3;
}
.natural-map .natural-cell:focus-visible {
  outline: none;
}
.natural-map .natural-cell:focus-visible .tile-top {
  stroke: #fff !important;
  stroke-opacity: 1 !important;
  stroke-width: 2.5 !important;
}
.natural-map .terrain-scenery,
.natural-map .map-static-terrain,
.natural-map .map-effects-layer {
  pointer-events: none;
}
.natural-map .map-label-anchor,
.natural-map .map-label-scale {
  pointer-events: none;
}
.natural-map text {
  font-family: Vazir, Tahoma, sans-serif;
  font-weight: 700;
  fill: #fff7de;
  font-size: 11px;
  paint-order: stroke;
  stroke: #1e2524;
  stroke-width: 0.35px;
}
.natural-map .flag-ordinal {
  text-anchor: middle;
  font-size: 7px;
  stroke-width: 0.25px;
}
.troop-badge {
  filter: drop-shadow(0 1px 1px #1117);
}
.water-ripples {
  animation: water-drift 12s linear infinite;
}
.lava-current {
  animation: lava-drift 9s linear infinite;
}
.command-trail {
  fill: none;
  stroke: #aee4db;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 4;
  animation: command-pass 0.9s ease-out forwards;
}
.attack-trail {
  stroke: #ffb164;
}
.capture-pulse .tile-top {
  animation: capture-glint 0.9s ease-out;
}
@keyframes water-drift {
  to {
    transform: translate(20px, 8px);
  }
}
@keyframes lava-drift {
  to {
    transform: translate(-12px, 20px);
  }
}
@keyframes command-pass {
  from {
    stroke-dashoffset: 30;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes capture-glint {
  0% {
    fill: #ffe59088;
  }
  100% {
    fill: transparent;
  }
}
.reduce-motion .natural-map * {
  animation: none !important;
  transition: none !important;
}
.reduce-motion .water-ripples,
.reduce-motion .lava-current,
.reduce-motion .command-trail {
  animation: none !important;
}
.reduce-motion .capture-pulse .tile-top {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .natural-map * {
    animation: none !important;
    transition: none !important;
  }
}
.battle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 255px;
  gap: 18px;
  align-items: start;
}
.battle-orders {
  columns: auto;
  margin: 0;
  padding: 22px 18px;
  background: #183a3e;
  border: 2px solid #61735b;
  min-width: 0;
}
.battle-orders .field-status {
  padding: 8px 0;
  justify-content: space-between;
  background: none;
}
.battle-heading p {
  font-size: 14px;
  margin: 8px 0 0;
}
.battle-heading > div:last-child {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.map-tools {
  background: #213f41;
  color: #d9e4cf;
  padding: 13px;
  font-size: 13px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.map-tools > div {
  display: flex;
  gap: 6px;
}
.map-tools button {
  min-height: 37px;
  min-width: 37px;
  padding: 5px 10px;
  font-size: 14px;
}
.map-order-feedback {
  padding: 14px 18px;
  margin: 0;
  background: #213d3d;
  color: #eedcbd;
  font-size: 14px;
  min-height: 52px;
  border-top: 1px solid #6d76554d;
}
.map-order-feedback.valid {
  color: #b4e6c1;
}
.map-legend {
  font-size: 12px;
  background: #183438;
  padding: 12px 14px;
  display: flex;
  gap: 10px 15px;
  flex-wrap: wrap;
}
.legend-move::before,
.legend-attack::before,
.legend-protected::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-end: 5px;
  background: #80d4c7;
}
.legend-attack::before {
  background: #eebb74;
}
.legend-protected::before {
  background: #9cdcff;
}
.participant .commander-number {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border: 1px solid #eee7c9;
  border-radius: 5px;
  background: var(--owner-color);
  color: #fff;
  font-size: 14px;
}
.battle-orders .participant {
  gap: 10px;
  align-items: flex-start;
}
.battle-orders .participant small {
  line-height: 1.9;
}
.field-command-bar {
  padding: 12px;
  background: #393c2c;
  gap: 9px;
}
.field-command {
  font-size: 13px !important;
}
.field-command:disabled {
  opacity: 0.45;
}
.battle-resources {
  margin-bottom: 18px;
}
.battle-resources .battle-hero-face {
  width: 34px;
  height: 40px;
}
.map-preview {
  max-height: 600px;
}
@media (max-width: 1050px) {
  .battle-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .battle-orders {
    columns: 2;
    column-gap: 25px;
    margin-top: 0;
  }
  .battle-orders details {
    break-inside: avoid;
  }
  .battle-map.natural-map {
    width: 100%;
    margin: 0;
  }
}
@media (max-width: 550px) {
  .battle-orders {
    columns: 1;
  }
  .map-panel {
    border-width: 2px;
  }
  .map-tools {
    padding: 11px;
    font-size: 12px;
  }
  .map-tools > div {
    width: 100%;
    justify-content: center;
  }
  .map-tools button {
    min-height: 40px;
  }
  .battle-resources {
    padding: 12px;
    gap: 10px;
  }
  .map-order-feedback {
    padding: 12px;
    font-size: 13px;
  }
  .field-command-bar {
    padding: 10px;
    gap: 7px;
  }
  .field-command {
    font-size: 12px !important;
    padding: 8px !important;
  }
  .battle-map.natural-map {
    min-height: 245px;
  }
  .map-legend {
    font-size: 12px;
  }
  .battle-heading {
    padding: 14px;
  }
}
/* Hero killed in this battle: shown only in the sidebar, never on the map. */
.hero-dead {
  color: #ff9f8a;
}

/* Map command flow: territory → command menu → destination → troop dialog. */
.battle-map.natural-map.is-zoomed {
  touch-action: none;
  cursor: grab;
}
.map-tools {
  align-items: center;
  background: linear-gradient(#24474a, #1b3a3d);
  border-bottom: 1px solid #6d76554d;
}
.map-step {
  flex: 1 1 220px;
  font-size: 14px;
  color: #f1e3c0;
  line-height: 1.7;
}
.map-zoom {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: #0f2629;
  border: 1px solid #6d7655;
}
.map-zoom button {
  min-width: 40px;
  min-height: 38px;
  padding: 4px 10px;
  font-size: 18px;
  line-height: 1;
}
.map-zoom button[data-map-reset] {
  font-size: 13px;
}
.map-zoom button:disabled {
  opacity: 0.4;
}
.map-stage {
  position: relative;
  overflow: hidden;
}
.map-action-menu {
  position: absolute;
  z-index: 5;
  left: var(--x);
  top: var(--y);
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(#4a3624f2, #2c2016f2);
  border: 2px solid #c9a35c;
  box-shadow:
    0 8px 22px #0009,
    inset 0 1px #ffe6a855;
  transform: translate(calc(-50% + var(--shift, 0px)), calc(-100% - 22px));
  animation: map-menu-in 0.14s ease-out;
}
.map-action-menu::after {
  content: '';
  position: absolute;
  left: calc(50% - var(--shift, 0px));
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: #2c2016;
  border: solid #c9a35c;
  border-width: 0 2px 2px 0;
  transform: translateX(-50%) rotate(45deg);
}
.map-action-menu.below {
  transform: translate(calc(-50% + var(--shift, 0px)), 26px);
}
.map-action-menu.below::after {
  top: -9px;
  bottom: auto;
  transform: translateX(-50%) rotate(-135deg);
}
.map-action {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 64px;
  min-height: 56px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.map-action .icon {
  width: 24px;
  height: 24px;
}
.map-action svg.icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-action-attack:not(:disabled) {
  background: linear-gradient(#b4562e, #7e3218);
  color: #fff1d8;
}
.map-action-deploy:not(:disabled) {
  background: linear-gradient(#5d7d3c, #3c5626);
  color: #f2f7da;
}
.map-action-move:not(:disabled) {
  background: linear-gradient(#2f7f84, #1d5559);
  color: #e3fbf6;
}
.map-action:disabled {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.map-action-close {
  min-width: 36px;
  font-size: 22px;
  background: #1c1510;
}
@keyframes map-menu-in {
  from {
    opacity: 0;
    margin-top: 6px;
  }
}
.map-order-feedback.valid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.map-order-feedback.valid > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.map-order-feedback .icon {
  width: 22px;
  height: 22px;
}
.map-order-feedback svg.icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
.natural-map .natural-cell.selected .tile-top {
  animation: map-selected 1.6s ease-in-out infinite;
}
@keyframes map-selected {
  50% {
    fill: #f7d76845;
  }
}
.command-route {
  font-weight: 700;
}
@media (max-width: 550px) {
  .map-step {
    flex-basis: 100%;
    font-size: 13px;
  }
  .map-zoom {
    width: auto !important;
    margin-inline-start: auto;
  }
  .map-zoom button {
    min-width: 44px;
    min-height: 44px;
  }
  .map-action-menu {
    gap: 4px;
    padding: 4px;
  }
  .map-action {
    min-width: 56px;
    min-height: 52px;
    padding: 5px 4px;
    font-size: 11px;
  }
  .map-action-close {
    min-width: 32px;
  }
}

/* The polygon fill alone accepts input; labels and clipped decoration pass through. */
.natural-map .natural-cell,
.natural-map .natural-cell *,
.natural-map .map-static-terrain *,
.natural-map .map-ownership-layer *,
.natural-map .map-scenery-layer *,
.natural-map .map-effects-layer * {
  pointer-events: none;
}
.natural-map .natural-cell .tile-hit {
  fill: transparent;
  stroke: none;
  fill-rule: evenodd;
  pointer-events: fill;
  cursor: pointer;
}
.natural-map .tile-top,
.natural-map .tile-ownership {
  fill-rule: evenodd;
  clip-rule: evenodd;
}
.natural-map .tile-ownership {
  opacity: 0.22;
}
/* A single paint operation avoids double opacity on coincident border segments. */
.natural-map .map-border-network {
  fill: none;
  stroke: #273d2c;
  stroke-opacity: 0.24;
  stroke-width: 0.65;
  vector-effect: non-scaling-stroke;
}
.natural-map.map-castle .map-border-network {
  stroke: #bec3a2;
  stroke-opacity: 0.2;
}
/* Commands override passive spells; target and keyboard focus take priority.
   Fog retains its masking fill even while a territory is selected. */
.natural-map .natural-cell.valid-move.valid-move .tile-top {
  fill: #5fe0d24d !important;
  stroke: #8af0e4 !important;
  stroke-opacity: 1 !important;
}
.natural-map .natural-cell.valid-attack.valid-attack .tile-top {
  fill: #ff7a2e4d !important;
  stroke: #ffb35c !important;
  stroke-opacity: 1 !important;
}
.natural-map .natural-cell.selected.selected .tile-top {
  fill: #f7d76828 !important;
  stroke: #ffeb9b !important;
  stroke-opacity: 1 !important;
  stroke-width: 2.2 !important;
  stroke-dasharray: none;
}
.natural-map .natural-cell.target.target .tile-top,
.natural-map .natural-cell.spell-target.spell-target .tile-top {
  fill: #ffe3ae24 !important;
  stroke: #fff2c4 !important;
  stroke-opacity: 1 !important;
  stroke-width: 2.5 !important;
  stroke-dasharray: 5 3;
}
.natural-map .natural-cell.is-fog.is-fog .tile-top {
  fill: #0b1426a8 !important;
  animation: none !important;
}
.natural-map .natural-cell:focus-visible:focus-visible .tile-top {
  stroke: #fff !important;
  stroke-opacity: 1 !important;
  stroke-width: 3 !important;
  stroke-dasharray: none;
}