/** Likōnane board: wood tones + Konane stone SVGs (P/p → pawn role in chessground) */

.lk-cg-board {
  position: relative;
  width: 100%;
  max-width: 512px;
  margin: 0 auto;
  aspect-ratio: calc(var(--cg-cols, 8) / var(--cg-rows, 8));
  outline: none;
  border-radius: 6px;
  overflow: hidden;
}

.lk-board-shell,
.lk-board-shell .lk-cg-wrap,
.lk-board-shell cg-board {
  outline: none;
  box-shadow: none;
  border: none;
}

/* Let the container's overflow:hidden+border-radius do all the rounding.
   Applying border-radius to cg-board itself makes its background transparent
   at the corners, letting the page background bleed through inside the clip. */
.lk-board-shell cg-board {
  border-radius: 0;
}

/* Board dimensions. Every theme paints its checkerboard as a viewBox="0 0 8 8"
   SVG stretched to fill cg-board, which yields 8 giant squares on a non-8×8
   board. Instead of stretching, tile that 8×8 SVG at its natural cell size for
   the current board: one tile spans 8 cells, so background-size is 8 cells wide
   and tall. Because the checker period is 2 and 8 is an even multiple of it,
   the tile repeats seamlessly onto any 4–20 board while keeping square-colour
   parity. --cg-cols/--cg-rows are set on an ancestor (see wrap.ts /
   konane-board.ts) so cg-board inherits them; the selector outranks each
   theme's bare `cg-board` regardless of load order.

   Sized from ---cg-width/---cg-height (the board's measured px size, set by
   chessground's updateBounds via addDimensionsCssVarsTo) rather than a plain
   `calc(800% / cols)` percentage. Chessground positions squares/pieces with
   `transform: translate()` computed from that same measured size; if the
   checker tile instead derived its size independently from a CSS percentage,
   the two could round differently (observed on Safari for non-8x8 boards,
   producing a several-px drift between the highlight/pieces and the
   checkerboard underneath it). The vars are fractional — the board is NOT
   quantized to whole device pixels per square, because that left a
   background-coloured strip (or, rounding the other way, a clipped edge) along
   its right and bottom. Squares are pixel-snapped individually instead, so the
   tile and the transforms can differ by at most half a device pixel.
   Percentage fallback (100%) covers the first paint before JS sets the pixel
   vars. */
.lk-cg-wrap cg-board {
  background-size:
    calc(var(---cg-width, 100%) / var(--cg-cols, 8) * 8)
    calc(var(---cg-height, 100%) / var(--cg-rows, 8) * 8);
  background-repeat: repeat;
}

/* Firefox computes height:100% incorrectly on a flex-item child whose parent's
   height comes from aspect-ratio. Give cg-wrap its own aspect-ratio so it
   derives height from its own width instead of relying on percentage
   inheritance. This keeps Chessground's updateBounds measurement accurate.
   The ratio must track the board's own dimensions — a fixed 1 makes cg-wrap
   square on a non-square board, so the lower ranks fall outside the slot's
   overflow:hidden and the squares stop matching the piece grid. */
.lk-cg-board .lk-cg-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: calc(var(--cg-cols, 8) / var(--cg-rows, 8));
}



.lk-board-shell cg-board square.last-move {
  background-color: rgba(155, 185, 55, 0.55);
}

.lk-board-shell cg-board square.move-dest {
  background: radial-gradient(rgba(120, 90, 40, 0.45) 22%, rgba(100, 75, 30, 0.85) 0, rgba(0, 0, 0, 0) 0);
}

.lk-board-shell cg-board square.move-dest:hover,
.lk-board-shell cg-board square.move-dest.hover {
  background: rgba(120, 90, 40, 0.35);
}

.lk-board-shell .cg-wrap piece {
  background-size: var(--lk-piece-scale) var(--lk-piece-scale);
  background-position: center;
  background-repeat: no-repeat;
}

/* How much of its cell a stone's sprite occupies. The halo below reads this to
   sit flush against the rim, so the two can never drift apart. Declared on the
   shell rather than .cg-wrap so it stays overridable from an ancestor. Boards
   without .lk-board-shell fall back to chessground's background-size: cover. */
.lk-board-shell {
  --lk-piece-scale: 88%;
}

/* Halo around the stones the player can move this turn ("highlight moveable
   pieces" pref). Drawn on a pseudo-element rather than the square itself: an
   outer box-shadow is never painted inside its own border-box, so a glow cast
   by the full-cell square could only ever start at the cell edge — leaving a
   visible gap around the smaller stone. Insetting this circle to the rim makes
   the glow begin exactly where the stone ends. */
cg-board square.lk-moveable::before {
  content: '';
  position: absolute;
  /* 0.875 = the stone's outer edge (r=27 plus its ~1px stroke = 28) within the
     sprite's 64-unit viewBox, so the circle lands on the rim, not the sprite's
     bounding box. */
  inset: calc((100% - var(--lk-piece-scale, 100%) * 0.875) / 2);
  border-radius: 50%;
  /* box-shadow lengths reject percentages, so the blur is a fraction of one
     cell, derived from the board's real pixel width (---cg-width, set by
     addDimensionsCssVarsTo) over the column count. */
  /* Two coincident shadows: the inner one is nearly opaque and barely blurred so
     the rim reads as a crisp ring, the outer adds a touch of glow without
     widening the halo much. Density, not radius, carries the emphasis here. */
  box-shadow:
    0 0 calc(var(---cg-width, 512px) / var(--cg-cols, 8) / 40)
      var(--lk-moveable-color, rgba(70, 190, 100, 0.95)),
    0 0 calc(var(---cg-width, 512px) / var(--cg-cols, 8) / 8)
      var(--lk-moveable-color, rgba(70, 190, 100, 0.95));
}

/* ---- coord colors (per-theme via CSS variables) ----------------------- */
/* Each board theme file defines --lk-cc-dark (text on light squares) and
   --lk-cc-light (text on dark squares) on :root, derived from its board
   square colours. Ranks are on the LEFT (a-file side), so odd ranks land
   on dark a-squares and need light text; even ranks on light squares need
   dark text — opposite of the old right-side calibration. */
.orientation-white .ranks :nth-child(even),
.orientation-white .files :nth-child(even),
.orientation-black .ranks :nth-child(odd),
.orientation-black .files :nth-child(odd),
coords.squares:nth-of-type(odd) :nth-child(even),
coords.squares:nth-of-type(even) :nth-child(odd) {
  color: var(--lk-cc-dark, rgba(72, 72, 72, 0.8));
}

.orientation-white .ranks :nth-child(odd),
.orientation-white .files :nth-child(odd),
.orientation-black .ranks :nth-child(even),
.orientation-black .files :nth-child(even),
coords.squares:nth-of-type(odd) :nth-child(odd),
coords.squares:nth-of-type(even) :nth-child(even) {
  color: var(--lk-cc-light, rgba(255, 255, 255, 0.8));
}

/* ---- inside-coord typography ------------------------------------------ */
.lk-board-shell .cg-wrap coords,
.lk-cg-board .cg-wrap coords {
  font-size: 10px;
  font-weight: 600;
}

/* ---- inside-coord positions ------------------------------------------- */
/* Ranks stay on the LEFT edge (chessground default left:4px). */

/* Files: letter at bottom-right corner of its square.
   bottom:0 pins the strip flush with the board bottom; flex-end alignment
   places the text d2 above the edge and d1 from the right. */
.lk-board-shell .cg-wrap coords.files,
.lk-cg-board .cg-wrap coords.files {
  left: 0;
  bottom: 0;
  text-align: right;
}

.lk-board-shell .cg-wrap coords.files coord,
.lk-cg-board .cg-wrap coords.files coord {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 4px;
  padding-bottom: 4px;
}

/* Ranks: number at top-left corner of its square.
   left:0/top:0 overrides base left:4px/top:-20px; transform:none removes the
   vertical-centering translateY(39%) so padding-top controls the gap cleanly. */
.lk-board-shell .cg-wrap coords.ranks,
.lk-cg-board .cg-wrap coords.ranks {
  left: 0;
  top: 0;
}

.lk-board-shell .cg-wrap coords.ranks coord,
.lk-cg-board .cg-wrap coords.ranks coord {
  display: flex;
  align-items: flex-start;
  padding-left: 4px;
  padding-top: 4px;
  transform: none;
}

/* ---- piece sets -------------------------------------------------------- */
/* Default / disc: original gradient stones */
.lk-board-shell .cg-wrap piece.pawn.white,
.lk-cg-board .cg-wrap piece.pawn.white,
:root[data-piece-set="disc"] .lk-board-shell .cg-wrap piece.pawn.white,
:root[data-piece-set="disc"] .lk-cg-board .cg-wrap piece.pawn.white {
  background-image: url('/pieces/wP.svg');
}

.lk-board-shell .cg-wrap piece.pawn.black,
.lk-cg-board .cg-wrap piece.pawn.black,
:root[data-piece-set="disc"] .lk-board-shell .cg-wrap piece.pawn.black,
:root[data-piece-set="disc"] .lk-cg-board .cg-wrap piece.pawn.black {
  background-image: url('/pieces/bP.svg');
}

/* Flat: solid filled circles, minimal styling */
:root[data-piece-set="flat"] .lk-board-shell .cg-wrap piece.pawn.white,
:root[data-piece-set="flat"] .lk-cg-board .cg-wrap piece.pawn.white {
  background-image: url('/pieces/flat/wP.svg');
}

:root[data-piece-set="flat"] .lk-board-shell .cg-wrap piece.pawn.black,
:root[data-piece-set="flat"] .lk-cg-board .cg-wrap piece.pawn.black {
  background-image: url('/pieces/flat/bP.svg');
}

/* Marble: polished look with highlight shine */
:root[data-piece-set="marble"] .lk-board-shell .cg-wrap piece.pawn.white,
:root[data-piece-set="marble"] .lk-cg-board .cg-wrap piece.pawn.white {
  background-image: url('/pieces/marble/wP.svg');
}

:root[data-piece-set="marble"] .lk-board-shell .cg-wrap piece.pawn.black,
:root[data-piece-set="marble"] .lk-cg-board .cg-wrap piece.pawn.black {
  background-image: url('/pieces/marble/bP.svg');
}

/* 3D: pronounced drop shadow + strong highlight */
:root[data-piece-set="3d"] .lk-board-shell .cg-wrap piece.pawn.white,
:root[data-piece-set="3d"] .lk-cg-board .cg-wrap piece.pawn.white {
  background-image: url('/pieces/3d/wP.svg');
}

:root[data-piece-set="3d"] .lk-board-shell .cg-wrap piece.pawn.black,
:root[data-piece-set="3d"] .lk-cg-board .cg-wrap piece.pawn.black {
  background-image: url('/pieces/3d/bP.svg');
}