/* Shared board styling — a pixel-faithful port of the in-app board, so the site
 * and the app show the same thing. Any page with a board loads this file
 * (puzzle, army builder, …); page-only chrome stays in that page's stylesheet.
 *
 * Source of truth in the app:
 *   lib/views/components/chess_view/chess_board_widget.dart  (frame + notation)
 *   lib/logic/chess_game.dart                                (tiles + overlays)
 *   lib/model/board_themes.dart, lib/model/app_colors.dart   (Mahogany theme)
 *
 * The overlay colours below are the *resolved* ones: the app runs its seed
 * colours through _buildContrastingOverlayBase / _buildContrastingCheckHint
 * against the board hue (26.96° for Mahogany) before painting, so hard-coding
 * the seeds here would not match. Alphas come from the opacityBoost values.
 */

:root {
  --board-light-tile: #e5c797;
  --board-dark-tile: #86442f;
  --board-frame: var(--board-light-tile);
  /* AppConstants: outer border = width / 25, inner border = 2px. */
  --board-frame-size: calc(4% + 2px);
  --board-move-hint: rgba(33, 205, 128, 0.283);
  --board-selected: rgba(33, 205, 128, 0.403);
  --board-latest-move: rgba(171, 134, 232, 0.36);
  --board-check: #e42828;
}

/* A chessboard is not a language: files run a…h from the left and ranks 1…8 up
 * the left edge in every locale, right-to-left ones included. The board is a
 * grid, and a grid flows with the direction, so an RTL page would otherwise
 * mirror it — and the coordinates inside the frame band with it. */
[dir="rtl"] .board-frame {
  direction: ltr;
}

.board-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: var(--board-frame-size);
  border-radius: 8px; /* AppConstants.boardOuterRadius */
  background: var(--board-frame);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.506); /* blur 10, AppColors.panelShadow */
}

.board {
  position: relative;
  display: grid;
  aspect-ratio: 1 / 1;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  height: auto;
  border-radius: 2px; /* AppConstants.boardInnerRadius */
  overflow: hidden;
  touch-action: manipulation;
}

/* The app lays a 1px darkTile hairline over the tile images. */
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--board-dark-tile);
  border-radius: 2px;
  pointer-events: none;
}

.square {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  /* One 8x8 sheet of wood grain for the whole board; buildSquares() sets the
   * per-square background-position that picks this square's slice out of it. */
  background-image: url("assets/images/boards/mahogany.webp");
  background-size: 800% 800%;
  background-repeat: no-repeat;
  -webkit-tap-highlight-color: transparent;
}

/* Fallback only — shown until the grain sheet has loaded, and if it cannot. */
.square-light { background-color: var(--board-light-tile); }
.square-dark { background-color: var(--board-dark-tile); }

/* Pieces are drawn inset by a flat 5px per side, at any tile size. */
.square img {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  pointer-events: none;
}

/* Overlay order matches ChessGame.render: check, latest move, selection, then
 * the piece, and the move dots on top of everything. */
.square.is-check { box-shadow: inset 0 0 0 100vmax var(--board-check); }
.square.is-last { box-shadow: inset 0 0 0 100vmax var(--board-latest-move); }
.square.is-selected { box-shadow: inset 0 0 0 100vmax var(--board-selected); }
.square.is-wrong { box-shadow: inset 0 0 0 100vmax rgba(201, 112, 112, 0.85); }

/* A move hint is a dot of radius tileSize / 5 — captures look the same. */
.square.is-target::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: var(--board-move-hint);
}

/* Notation lives in the frame band, not on the squares: files along the bottom,
 * ranks up the left edge, black and bold. */
.board-coords {
  position: absolute;
  display: grid;
  font-size: 10px; /* AppConstants.notationFontSize */
  font-weight: 700;
  line-height: 1;
  color: #000;
  pointer-events: none;
}

.board-coords span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-files {
  grid-template-columns: repeat(8, 1fr);
  right: var(--board-frame-size);
  bottom: 0;
  left: var(--board-frame-size);
  height: var(--board-frame-size);
}

.board-ranks {
  grid-template-rows: repeat(8, 1fr);
  top: var(--board-frame-size);
  bottom: var(--board-frame-size);
  left: 0;
  width: var(--board-frame-size);
}