/* Chessground needs a container with explicit, square dimensions. The height cap keeps
   the board (plus header and page padding) within a 13" laptop screen without scrolling. */
.board {
  --board-size: min(90vw, 560px, calc(100vh - 7rem));
  width: var(--board-size);
  height: var(--board-size);
  flex: none;
}

/* Chessground offsets the coordinates by fixed pixels tuned for boards of ~500 px and more (files: left 24px,
   ranks: top -20px), so on a small board the file letters drift into the next square and past the right edge,
   and the "8" goes above the board (#46). Pin each label to a corner of its own square instead: ranks in the
   top-right corner of the right-hand column (where the theme's alternating label colours expect them), files in
   the bottom-left corner of the bottom row. `.board.cg-wrap` outranks the vendor stylesheets, which load later. */
.board.cg-wrap coords.ranks {
  top: 0;
  left: auto;
  right: 0;
  width: auto;
  line-height: 1;
  text-align: right;
}

.board.cg-wrap coords.ranks coord {
  flex: 1 1 0;
  transform: none;
  padding: 3px 4px 0 0;
}

.board.cg-wrap coords.files {
  left: 0;
  bottom: 0;
  height: auto;
  line-height: 1;
}

.board.cg-wrap coords.files coord {
  flex: 1 1 0;
  text-align: left;
  padding: 0 0 3px 4px;
}