/*
 * The parts of the page that vary per game: boards, and the artwork on the
 * home page cards. Generic card layout lives in the sass.
 *
 * Kept out of the sass build on purpose: boards size themselves from the
 * --cell-size custom property that templates/games/board.html emits, so a new
 * game declares `cell_size` in Python and needs no stylesheet changes at all.
 */

/*
 * One uniform box for every game's artwork, so a new game shipping a
 * differently shaped SVG cannot change the height of its neighbours. 7/6
 * matches the 350x300 viewBox the artwork uses; anything squarer just
 * letterboxes slightly. `contain` rather than `cover` because these are
 * diagrams of a board, and cropping one loses the part that explains the game.
 */
.games .card-img-top {
  aspect-ratio: 7 / 6;
  object-fit: contain;
  background-color: #fff;
}

.board {
  --cell-size: 75px;
  border-collapse: collapse;
}

.board td {
  width: var(--cell-size);
  height: var(--cell-size);
  font-size: calc(var(--cell-size) * 0.66);
  line-height: calc(var(--cell-size) * 0.8);
  text-align: center;
  vertical-align: middle;
  border: 1px solid grey;
  padding: 0;
  transition: background-color 0.15s ease-in-out;
}

/* Only hint at clickability when the player can actually move. */
.board.your-turn td:empty:hover {
  background-color: rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.board td.selected {
  background-color: rgba(13, 110, 253, 0.25);
}

.board td.target {
  box-shadow: inset 0 0 0 3px rgba(13, 110, 253, 0.5);
  cursor: pointer;
}

.board td.win {
  background-color: rgba(25, 135, 84, 0.25);
}

/* Playable squares, for games that opt in with show_legal_moves. A gradient
   rather than a child element so it centres regardless of cell size. */
.board td.legal {
  background-image: radial-gradient(
    circle,
    rgba(13, 110, 253, 0.35) 18%,
    transparent 19%
  );
}

.board.disconnected {
  opacity: 0.5;
}