.checkers-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  border: 8px solid #8a5c2b;
  border-radius: 8px;
  overflow: hidden;
}
.checkers-cell {
  position: relative;
  border-radius: 0;
  aspect-ratio: 1 / 1;
}
.checkers-cell.light { background: #f0d9a4; }
.checkers-cell.dark { background: #7a4d2a; }
.checkers-cell.black::after,
.checkers-cell.red::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
}
.checkers-cell.black::after { background: radial-gradient(circle at 35% 25%, #60645d, #111); }
.checkers-cell.red::after { background: radial-gradient(circle at 35% 25%, #e98a75, #9d2f25); }
.checkers-cell.king::before {
  content: "K";
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f8e9bb;
  font-weight: 900;
}