/* Board — carved-wood frame with an inlaid square grid or hex field.
   Markup (square):
     <div class="board board--grid" style="--cols: 8">
       <button class="cell cell--light"> ... <div class="piece piece--dark"></div></button>
   Markup (hex, pointy-top, rows of varying length):
     <div class="board board--hex"><div class="hex-row">
       <button class="cell"><div class="piece piece--light"></div></button> ...
   State classes on .cell: is-selected, is-legal, is-last, is-capture, is-disabled.
   State classes on .piece: is-selected, is-king, is-captured. */

.board {
  position: relative;
  width: min(100%, var(--board-max));
  margin-inline: auto;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface-wood);
  background-color: var(--wood-700);
  box-shadow: var(--bevel-wood), var(--shadow-3);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.board::before {              /* inner groove */
  content: "";
  position: absolute;
  inset: var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-light);
  box-shadow: inset 0 0 0 1px var(--line-dark);
  pointer-events: none;
}
.board.is-finished { pointer-events: none; }
.board.is-finished .cell:not(.is-last) { filter: saturate(0.85) brightness(0.92); }

/* ── Square grid ───────────────────────────────────────── */
.board--grid .board__field {
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), 1fr);
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--bevel-inlay);
  background: var(--cell-dark);
}
.board--grid .cell { aspect-ratio: 1; border-radius: 0; }

/* Coordinates (optional) */
.board__coords {
  position: absolute;
  display: flex;
  justify-content: space-around;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--cream-500);
  font-variant-numeric: var(--num-tabular);
  pointer-events: none;
}
.board__coords--files { left: var(--space-4); right: var(--space-4); bottom: 1px; }
.board__coords--ranks { top: var(--space-4); bottom: var(--space-4); left: 2px; flex-direction: column; width: var(--space-3); }

/* ── Hex field (pointy-top) ────────────────────────────── */
.board--hex .board__field {
  --hex: calc((100% - 2 * var(--space-2)) / var(--hex-cols, 7));  /* cell width */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--surface-wood-dark);
  background-color: var(--wood-900);
  box-shadow: var(--bevel-inlay);
}
.hex-row { display: flex; justify-content: center; width: 100%; }
.hex-row + .hex-row { margin-top: calc(var(--hex) * -0.27); }   /* rows interlock by 25% + gap */
/* Phones: a slimmer frame gives the cells the width (7 hex cells ≥ 44px at 390px). */
@media (max-width: 480px) {
  .board { padding: var(--space-3); }
  .board::before { inset: var(--space-1); }
  .board--hex .board__field { padding-inline: var(--space-1); }
}
.board--hex .cell {
  width: var(--hex);
  aspect-ratio: 0.866;
  margin: 0 1px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background-color: var(--cell-hex);
  background-image: var(--texture-grain), linear-gradient(170deg, var(--sheen-soft), var(--shade-faint));
  border-radius: 0;
}
.board--hex .cell::before {   /* inner bevel line */
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--sheen-faint);
  pointer-events: none;
}
.board--hex .cell--dark { background-color: var(--cell-dark); }
.board--hex .cell--light { background-color: var(--cell-light); }

/* ── Cell (shared) ─────────────────────────────────────── */
.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  color: inherit;
  transition: filter var(--dur-fast) var(--ease-out);
}
.cell--light { background-color: var(--cell-light); }
.cell--dark  { background-color: var(--cell-dark); }
.cell::after {                /* state overlay */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.board--hex .cell::after { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

@media (hover: hover) {
  .cell:hover:not(.is-disabled) { filter: brightness(1.06); }
}
.cell:focus-visible { box-shadow: none; z-index: 2; }
.cell:focus-visible::after { opacity: 1; box-shadow: var(--focus-cell); }
/* Hex cells are clipped, which would cut a box-shadow ring to its two
   vertical sides, so the same two-tone ring is a hex-shaped top layer. */
.board--hex .cell:focus-visible {
  background-image: var(--focus-hex), var(--texture-grain), linear-gradient(170deg, var(--sheen-soft), var(--shade-faint));
  background-size: 100% 100%, auto, auto;
}
.board--hex .cell:focus-visible::after { box-shadow: none; }

.cell.is-last::after { opacity: 1; background: var(--cell-last); }
.cell.is-selected::after { opacity: 1; box-shadow: inset 0 0 0 4px var(--cell-selected); }
.board--hex .cell.is-selected::after { background: var(--gold-wash); box-shadow: none; }
.cell.is-legal::after {
  opacity: 1;
  background: radial-gradient(circle, var(--cell-legal-dot) 0 14%, transparent 15.5%);
}
.cell.is-capture::after {     /* piece that can be taken: ring around it */
  opacity: 1;
  background: radial-gradient(circle, transparent 0 56%, var(--cell-capture) 58% 72%, transparent 74%);
}
.board--hex .cell.is-legal::after { background: radial-gradient(circle, var(--cell-legal-dot) 0 12%, transparent 13.5%); }
.board--hex .cell.is-capture::after { background: radial-gradient(circle, transparent 0 50%, var(--cell-capture) 52% 66%, transparent 68%); }
.cell.is-disabled { cursor: default; }

@media (hover: hover) {
  .cell.is-legal:hover::after { background: radial-gradient(circle, var(--cell-legal-dot) 0 18%, var(--cell-legal) 19% 100%); }
}

/* ── Pieces ────────────────────────────────────────────── */
.piece {
  position: relative;
  width: 78%;
  height: 78%;
  border-radius: var(--radius-round);
  background-image: var(--texture-grain), radial-gradient(circle at 35% 30%, var(--sheen-strong), transparent 45%), linear-gradient(160deg, var(--sheen-faint), var(--shade-mid));
  box-shadow: inset 0 0 0 2px var(--shade-soft), inset 0 -3px 0 var(--shade-mid), var(--shadow-piece);
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
  z-index: 1;
}
.board--hex .piece { width: 72%; height: auto; aspect-ratio: 1; }
.piece--light { background-color: var(--piece-light); color: var(--piece-light-edge); border: 2px solid var(--piece-light-rim); }  /* rim keeps it apart from pale cells */
.piece--dark  { background-color: var(--piece-dark);  color: var(--cream-300); }
.piece::before {              /* turned edge ring */
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: 0.35;
}
.piece.is-king::after {       /* crown inlay */
  content: "";
  position: absolute;
  inset: 26%;
  background: currentColor;
  -webkit-mask: var(--icon-crown) center / contain no-repeat;
  mask: var(--icon-crown) center / contain no-repeat;
}
.piece--light.is-king::after { background: var(--gold-700); }
.piece--dark.is-king::after  { background: var(--gold-300); }
.piece.is-selected, .cell.is-selected .piece {
  transform: translateY(-6%) scale(1.06);
  box-shadow: inset 0 0 0 2px var(--shade-soft), inset 0 -3px 0 var(--shade-mid), var(--shadow-piece-lift), var(--glow-gold);
}
.piece.is-captured { animation: piece-capture var(--dur-slow) var(--ease-out) forwards; }
.piece.is-placed { animation: piece-place var(--dur-slow) var(--ease-spring); }

@keyframes piece-capture { to { transform: scale(0.4); opacity: 0; } }
@keyframes piece-place { from { transform: translateY(-30%) scale(1.15); } }

/* Inline piece (outside the board: status, captured count) */
.piece--inline { display: inline-block; width: var(--piece-inline); height: var(--piece-inline); vertical-align: middle; pointer-events: auto; }
.piece--inline.piece--sm { width: var(--piece-inline-sm); height: var(--piece-inline-sm); }

/* ── Stage: centres the board, keeps it square on tall phones ── */
.board-stage {
  display: grid;
  place-items: center;
  width: 100%;
}