/* ============================================================
   HEX BOARD — SVG hex grid positioning styles
   Classic TFT board: 4-row, offset hex pattern
   ============================================================ */

.hex-board-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.hex-board-svg {
  display: block;
  overflow: visible;
}

/* Empty hex cell */
.hex-cell {
  fill: oklch(18% 0.025 270);
  stroke: oklch(55% 0.1 240 / 0.25);
  stroke-width: 1;
  transition: fill var(--dur-fast) var(--ease-out-quart);
}

/* Filled hex cell (has champion) */
.hex-cell.filled {
  fill: oklch(22% 0.03 270);
  stroke: oklch(55% 0.1 240 / 0.5);
}

/* Champion portrait clip circle inside hex */
.hex-champ-clip {
  clip-path: url(#hex-clip);
}

.hex-champ-image {
  image-rendering: auto;
}

/* Champion name label — text-only, stroke outline for legibility */
.hex-champ-label {
  font-family: var(--font-ui);
  font-weight: 600;
  fill: oklch(96% 0.04 80);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.02em;
  paint-order: stroke fill;
  stroke: oklch(6% 0.02 295);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

/* Carry indicator ring */
.hex-carry-ring {
  fill: none;
  stroke: var(--tier-color, var(--color-amber));
  stroke-width: 1.5;
  opacity: 0.7;
}

/* Cost-colored border per champion */
.hex-cost-ring[data-cost="1"] { stroke: var(--cost-1-color); }
.hex-cost-ring[data-cost="2"] { stroke: var(--cost-2-color); }
.hex-cost-ring[data-cost="3"] { stroke: var(--cost-3-color); }
.hex-cost-ring[data-cost="4"] { stroke: var(--cost-4-color); }
.hex-cost-ring[data-cost="5"] { stroke: var(--cost-5-color); }

.hex-cost-ring {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
}

/* Fallback hex fill colors by cost */
.hex-fallback[data-cost="1"] { fill: oklch(30% 0.02 270); }
.hex-fallback[data-cost="2"] { fill: oklch(30% 0.1 145); }
.hex-fallback[data-cost="3"] { fill: oklch(28% 0.12 250); }
.hex-fallback[data-cost="4"] { fill: oklch(28% 0.14 300); }
.hex-fallback[data-cost="5"] { fill: oklch(32% 0.1 85); }

/* Board label */
.hex-board-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-dim);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}