/* The user's map reference is continuous land with subtle cells and colored flags. */
.map-panel {
  background: #55a8b6;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.battle-map.natural-map {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  background: #55a8b6;
  isolation: isolate;
}
.natural-map .natural-cell .tile-top {
  fill: transparent;
  stroke: #566246;
  stroke-opacity: 0;
  stroke-width: 0.7;
  filter: none !important;
  transition:
    fill 0.12s,
    stroke 0.12s;
  cursor: pointer;
}
.natural-map .natural-cell:hover .tile-top {
  fill: #f6e5a524;
  stroke: #e1d396;
  stroke-opacity: 0.65;
}
.natural-map .natural-cell.neighbor .tile-top {
  fill: #d1dca411;
  stroke: #6b814d;
  stroke-opacity: 0.28;
}
.natural-map .natural-cell.selected .tile-top {
  fill: #f4dd6b26;
  stroke: #f8e78d;
  stroke-opacity: 1;
  stroke-width: 2;
}
.natural-map .natural-cell.target .tile-top {
  fill: #fcf4c522;
  stroke: #fff5ca;
  stroke-opacity: 1;
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.natural-map .natural-cell:focus-visible {
  outline: none;
}
.natural-map .natural-cell:focus-visible .tile-top {
  stroke: #fff;
  stroke-opacity: 1;
  stroke-width: 2.5;
}
.natural-map text {
  font-family: Tahoma, sans-serif;
}
.map-tools {
  background: #3e4a3b;
  border-bottom: 2px solid #7f8154;
}
.map-legend {
  background: #364238;
  color: #d9dec7;
}
.field-command-bar {
  background: linear-gradient(#6d6140, #383a29);
  border-color: #a59a6b;
}
.battle-layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.battle-orders {
  margin-top: 10px;
  columns: 3;
  column-gap: 28px;
}
.battle-orders details,
.battle-orders > button {
  break-inside: avoid;
}
.game-shell:has(.natural-map) {
  width: 1320px;
  max-width: 100%;
}
.natural-map .terrain-scenery {
  pointer-events: none;
}
.natural-cell .tile-top {
  vector-effect: non-scaling-stroke;
}
.battle-orders {
  background: #423e2d;
  border-color: #7b7956;
}
@media (max-width: 900px) {
  .battle-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .battle-orders {
    display: block;
    columns: 1;
  }
  .battle-map.natural-map {
    width: 100%;
    margin: 0;
    min-height: 0;
  }
  .map-panel {
    overflow: hidden;
  }
}