/* 2×2 grid: axis-left | grid, (corner) | axis-bottom. Axis containers stay
   in their own cells so labels never rotate. */
.board-wrap {
  position: relative; flex-shrink: 0;
  display: grid;
  grid-template-columns: 16px auto;
  grid-template-rows:    auto 16px;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(var(--board-size, 16), var(--cell-size));
  grid-template-rows:    repeat(var(--board-size, 16), var(--cell-size));
  border-radius: 4px; overflow: hidden;
  grid-column: 2; grid-row: 1;
  /* Containing block for overlay layers (.trail-arrows-container,
     .group-arrows-container, .marquee-layer); without this they'd resolve
     to .board-wrap and slide left by axis-gutter. */
  position: relative;
}
/* align-self: start prevents stretching that would mis-pivot the rotate transform. */
.board-axis-left   { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-self: start; }
.board-axis-bottom { grid-column: 2; grid-row: 2; display: flex; flex-direction: row;   align-self: start; }
.board-grid        { align-self: start; }

/* data-rotation rotates .board-grid; cell contents counter-rotate to stay readable. */
.board-wrap[data-rotation="90"]  > .board-grid { transform: rotate(90deg); }
.board-wrap[data-rotation="180"] > .board-grid { transform: rotate(180deg); }
.board-wrap[data-rotation="270"] > .board-grid { transform: rotate(270deg); }

/* --piece-counter-rotate lets transient transforms (e.g. :active scale) compose
   with the rotation instead of overwriting it. */
.board-wrap[data-rotation="90"]  { --piece-counter-rotate: -90deg; }
.board-wrap[data-rotation="180"] { --piece-counter-rotate: -180deg; }
.board-wrap[data-rotation="270"] { --piece-counter-rotate: -270deg; }

.board-wrap .piece,
.board-wrap .cell-cost,
.board-wrap .cell-battle,
.board-wrap .marquee-layer { transform: rotate(var(--piece-counter-rotate, 0deg)); }

.board-wrap .cell-tooltip { transform: translateX(-50%) rotate(var(--piece-counter-rotate, 0deg)); }

.rotate-board-control {
  position: relative;
  display: flex; justify-content: flex-end;
  margin: 0 0 2px;
}
.btn-rotate-board {
  width: 36px; height: 36px;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--accent-gold) 50%, var(--border-color));
  border-radius: 8px;
  color: var(--accent-gold);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 18%, transparent);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn-rotate-board:hover {
  background: color-mix(in srgb, var(--accent-gold) 12%, var(--bg-hover));
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 35%, transparent);
  transform: translateY(-1px);
}
.btn-rotate-board svg { width: 18px; height: 18px; }

.rotate-popup {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  display: none;
  flex-direction: column;
  min-width: 180px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  z-index: 60;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.rotate-popup.is-open { display: flex; }
.rotate-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--text-primary);
  font: inherit; font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.rotate-opt:hover { background: var(--bg-hover); color: var(--accent-gold); }
.rotate-opt.is-active { background: color-mix(in srgb, var(--accent-gold) 14%, transparent); color: var(--accent-gold); }
.rotate-opt-icon { width: 18px; text-align: center; font-size: 1rem; }
.rotate-opt-label { flex: 1; }

.coord {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: rgba(210,200,180,0.8);
  width: var(--cell-size); height: var(--cell-size);
  user-select: none;
}
.coord-corner { width: 16px; height: 16px; }
.coord-col { height: 16px; }
.coord-row { width: 16px; }

.cell {
  width: var(--cell-size); height: var(--cell-size);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; user-select: none;
}
.cell-plain  { background-color: var(--sq-plain); }
.cell-hill   { background-color: var(--sq-hill); }
.cell-forest { background-color: var(--sq-forest); }
.cell-river  { background-color: var(--sq-river); }
.cell-desert { background-color: var(--sq-desert); }
.cell-trans::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to bottom, var(--nt, transparent) 0%, var(--nt, transparent) var(--nd-t, 0%), transparent var(--nd-t, 0%)),
    linear-gradient(to top, var(--nb, transparent) 0%, var(--nb, transparent) var(--nd-b, 0%), transparent var(--nd-b, 0%)),
    linear-gradient(to right, var(--nl, transparent) 0%, var(--nl, transparent) var(--nd-l, 0%), transparent var(--nd-l, 0%)),
    linear-gradient(to left, var(--nr, transparent) 0%, var(--nr, transparent) var(--nd-r, 0%), transparent var(--nd-r, 0%));
}
.cell-tooltip {
  opacity: 0; visibility: hidden; position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%); background: rgba(30,28,24,0.95);
  color: var(--text-primary); padding: 5px 9px; border-radius: 5px;
  font-size: 0.7rem; white-space: nowrap; z-index: 50;
  pointer-events: none; line-height: 1.4;
  border: 1px solid rgba(255,255,255,0.1);
  transition: opacity 0.2s ease var(--tooltip-delay), visibility 0s linear var(--tooltip-delay);
}
.cell:hover { z-index: 40 !important; }
.cell:hover .cell-tooltip { opacity: 1; visibility: visible; }
.board-grid { overflow: visible; }
.cell-cost { z-index: 5; }
.cell-cost-attack { z-index: 5; }
.board-wrap { overflow: visible; }
.tooltip-sep { border: none; border-top: 1px solid rgba(255,255,255,0.2); margin: 3px 0; }
.grid-always .cell { outline: 1px solid rgba(0,0,0,0.12); outline-offset: -1px; }
.grid-on-move.grid-active .cell { outline: 1px solid rgba(0,0,0,0.12); outline-offset: -1px; }
.settings-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  gap: 6px; margin-top: 4px; padding: 4px 0;
}
.settings-select {
  background: var(--bg-panel); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 4px;
  padding: 4px 6px; font-size: 0.72rem; cursor: pointer;
  width: 100%; min-height: 26px;
}

.cell-selected,
.cell-selected-enemy { z-index: 1; }
.cell-selected .piece,
.cell-selected-enemy .piece {
  box-shadow: 0 0 10px 4px rgba(255,215,0,0.7), 0 0 20px 8px rgba(255,215,0,0.3);
  animation: piece-glow 1.5s ease-in-out infinite alternate;
}

.cell-enemy-range {
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.35) 0, rgba(0,0,0,0.35) 2px, transparent 2px, transparent 6px) !important;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.45);
}

.cell-cost {
  position: absolute; z-index: 3; font-size: calc(var(--cell-size) * 0.4);
  font-weight: 700; color: var(--text-light); text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  pointer-events: none;
}
.cell-cost-attack { color: var(--text-dark); text-shadow: none; }
.trail-p1, .trail-p2 { color: var(--text-dark); }
.trail-arrows-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.trail-svg { position: absolute; top: 0; left: 0; pointer-events: none; }

.commentary-arrows-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; }
.commentary-arrows-svg { position: absolute; top: 0; left: 0; pointer-events: none; }

.cell-battle {
  position: absolute; z-index: 4; font-size: calc(var(--cell-size) * 0.55);
  pointer-events: auto; cursor: help; opacity: 1;
  filter: brightness(0);
}
.cell-battle-corner { font-size: calc(var(--cell-size) * 0.3); top: -1px; right: 0; z-index: 5; }
.cell-attack-ring::after,
.cell-blocked-target::after {
  content: ''; position: absolute;
  width: 85%; height: 85%;
  border-radius: 50%; pointer-events: none; z-index: 1;
}
.cell-attack-ring::after {
  border: calc(var(--cell-size) * 0.13) solid rgba(0, 0, 0, 0.4);
}
.cell-blocked-target::after {
  border: calc(var(--cell-size) * 0.1) dashed rgba(180, 60, 60, 0.55);
}

/* Deploy zones: per-cell --dz-inner ring + per-side --dz-edge-* perimeter.
   Own and enemy zones share the four edge vars; only colour differs. */
.cell-deploy-zone,
.cell-deploy-skirmish,
.cell-deploy-edge-top,
.cell-deploy-edge-bottom,
.cell-deploy-edge-left,
.cell-deploy-edge-right,
.cell-enemy-deploy-edge-top,
.cell-enemy-deploy-edge-bottom,
.cell-enemy-deploy-edge-left,
.cell-enemy-deploy-edge-right {
  --dz-edge-top:    0 0 0 0 transparent;
  --dz-edge-bottom: 0 0 0 0 transparent;
  --dz-edge-left:   0 0 0 0 transparent;
  --dz-edge-right:  0 0 0 0 transparent;
  --dz-inner:       0 0 0 0 transparent;
  box-shadow:
    var(--dz-edge-top),
    var(--dz-edge-bottom),
    var(--dz-edge-left),
    var(--dz-edge-right),
    var(--dz-inner);
}
.cell-deploy-zone,
.cell-enemy-deploy-zone {
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.2) 2px, transparent 2px, transparent 6px) !important;
}
/* Suppress terrain-blend pseudo on deploy cells — ::before would hide stripes. */
.cell-deploy-zone.cell-trans::before,
.cell-deploy-skirmish.cell-trans::before,
.cell-enemy-deploy-zone.cell-trans::before {
  display: none;
}
.cell-deploy-skirmish {
  background-image: repeating-linear-gradient(45deg, rgba(255, 184, 50, 0.4) 0, rgba(255, 184, 50, 0.4) 2.5px, transparent 2.5px, transparent 6px) !important;
}
.cell-deploy-zone     { --dz-inner: inset 0 0 0 2px rgba(129, 182, 76, 0.8); }
.cell-deploy-skirmish { --dz-inner: inset 0 0 0 3px rgba(255, 184, 50, 0.95); }
.cell-deploy-edge-top    { --dz-edge-top:    inset 0  3px 0 0 rgba(0, 0, 0, 0.55); }
.cell-deploy-edge-bottom { --dz-edge-bottom: inset 0 -3px 0 0 rgba(0, 0, 0, 0.55); }
.cell-deploy-edge-left   { --dz-edge-left:   inset  3px 0 0 0 rgba(0, 0, 0, 0.55); }
.cell-deploy-edge-right  { --dz-edge-right:  inset -3px 0 0 0 rgba(0, 0, 0, 0.55); }
.cell-enemy-deploy-edge-top    { --dz-edge-top:    inset 0  3px 0 0 rgba(220, 60, 60, 0.75); }
.cell-enemy-deploy-edge-bottom { --dz-edge-bottom: inset 0 -3px 0 0 rgba(220, 60, 60, 0.75); }
.cell-enemy-deploy-edge-left   { --dz-edge-left:   inset  3px 0 0 0 rgba(220, 60, 60, 0.75); }
.cell-enemy-deploy-edge-right  { --dz-edge-right:  inset -3px 0 0 0 rgba(220, 60, 60, 0.75); }

.map-select-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.map-select-prompt {
  text-align: center;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}
.map-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1039px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 640px) {
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.map-card {
  position: relative;
  background: var(--bg-panel);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  text-align: center;
  box-sizing: border-box;
}
.map-card:hover { border-color: var(--accent-green); transform: translateY(-2px); }
.map-card-selected { border-color: var(--accent-green) !important; background: var(--bg-card); }
.map-card h3 { color: var(--text-primary); font-size: 0.95rem; margin-bottom: 4px; }
.map-card p { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }

.map-card-featured {
  border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
  background: var(--bg-card);
}
.map-card-featured:hover { border-color: var(--accent-gold); }
.map-card-featured.map-card-selected {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 1px var(--accent-gold),
              0 0 18px color-mix(in srgb, var(--accent-gold) 25%, transparent);
}
.map-card-badge {
  position: absolute;
  top: 6px; left: 6px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-gold);
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.map-card-random-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.map-card-random-controls .btn-sm { width: 100%; padding: 4px 8px; font-size: 0.74rem; }

.map-select-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.map-select-footer > .btn { min-width: 9em; }

.mini-grid { display: grid; grid-template-columns: repeat(var(--board-size, 16), 1fr); width: 100%; aspect-ratio: 1; border-radius: 3px; overflow: hidden; }
/* box-shadow halos fill 1px pixel-rounding gaps between cells. */
.mini-cell {
  aspect-ratio: 1;
  box-shadow: 0 0 0 1px currentColor;
}

@media (max-width: 600px) {
  .board-wrap { overflow-x: auto; max-width: 100vw; }
  .deploy-board-pane { max-width: 100vw; overflow-x: auto; }
  /* Axis gutters bumped to 20px so 2-digit numbers fit at any rotation. */
  .board-wrap { grid-template-columns: 20px auto; grid-template-rows: auto 20px; }
  .coord-row, .coord-corner { width: 20px; }
  .coord-col { height: 20px; }
}

.terrain-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 0.68rem; color: var(--text-muted); margin-top: 6px; }
.tl-item { display: flex; align-items: center; gap: 4px; }
.tl-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }