/* checkers: rules used only by the checkers pages (loaded after base.css). */
/* Checkers board: reuses .square/.light/.dark/.selected/.last-move from
   the chess board (same float-grid technique, already proven on a real
   E-Ink device) rather than inventing a new layout mechanism. */
#checkers-board {
  display: block;
  width: 100%;
  max-width: 760px;
  border: 3px solid var(--border);
  background: var(--square-light);
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 auto;
}

/* The computer's last move (start and end square) with a thicker frame
   than the shared 2px one, so it is clearly seen on E-Ink (task 180). */
.checkers-square.last-move {
  box-shadow: inset 0 0 0 4px var(--accent);
}

/* Hint button (task 180): the piece and the end square of the move, the
   same double frame as the hints in the puzzles. */
.checkers-square.hint-cell {
  outline: 6px double var(--text);
  outline-offset: -7px;
}

/* A hinted piece the player has picked up: solid, so the pick shows. */
.checkers-square.hint-cell.selected {
  outline: 6px solid var(--text);
  outline-offset: -6px;
}

.checkers-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

/* Same layered-rim technique as the Go stones (.go-stone::before) and the
   Ur pieces (.ur-piece::after): a ring inset from the edge rather than a
   single flat disc, flat shapes only so it stays grayscale-safe. Kept on
   ::before, not ::after, so ::after/the nested .checkers-king-mark below
   stay free for the king badge. */
.checkers-piece::before,
.checkers-icon-disc::before {
  content: "";
  position: absolute;
  top: 22%;
  left: 22%;
  width: 56%;
  height: 56%;
  border-radius: 50%;
  box-sizing: border-box;
}

.checkers-piece-black {
  background: #111;
  border: 2px solid #000;
}

.checkers-piece-black::before,
.checkers-icon-disc-black::before {
  border: 2px solid #555;
}

.checkers-piece-white {
  background: #fdfdfd;
  border: 2px solid var(--border);
}

.checkers-piece-white::before,
.checkers-icon-disc-white::before {
  border: 2px solid #bbb;
}

/* King mark: a small layered rosette (a diamond behind a ring, the same
   idea as .ur-square-rosette) instead of a single plain ring, so a
   crowned piece reads as a deliberate badge rather than a dot dropped on
   top. This needs its own nested element (added/removed by checkers-
   app.js's updateCheckersBoard alongside the .checkers-piece-king class)
   rather than a second pseudo-element on .checkers-piece itself, since
   ::before is already the depth rim above and an element only has the
   two pseudo-elements to draw with. */
.checkers-king-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44%;
  height: 44%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.checkers-king-mark::before {
  content: "";
  position: absolute;
  top: 32%;
  left: 32%;
  width: 36%;
  height: 36%;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.checkers-king-mark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Contrast the badge against its own piece, same pairing the single-ring
   king mark used before: white on black, dark on white. */
.checkers-piece-black .checkers-king-mark::before {
  background: #fff;
}

.checkers-piece-black .checkers-king-mark::after {
  border: 2px solid #fff;
}

.checkers-piece-white .checkers-king-mark::before {
  background: var(--border);
}

.checkers-piece-white .checkers-king-mark::after {
  border: 2px solid var(--border);
}

/* Small disc icons for the color-choice picker and board placeholder,
   matching the board's own piece styling. */
.checkers-icon-disc {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  vertical-align: middle;
  box-sizing: border-box;
}

.checkers-icon-disc-black {
  background: #111;
  border: 2px solid #000;
}

.checkers-icon-disc-white {
  background: #fdfdfd;
  border: 2px solid var(--border);
}

/* Where the last move took a piece: a cross on the empty square, so a chain
   of jumps by the computer can be followed (task 181). */
.checkers-square.captured-cell {
  position: relative;
  box-shadow: inset 0 0 0 3px var(--text);
}

.checkers-square.captured-cell::after {
  content: "\00d7";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  color: var(--text);
  pointer-events: none;
}