.checkers {
  max-width: 560px;
  --square-light: #c7d3ea;
  --square-dark: #5b7fd6;
  --square-selected: #ffd60a;
}

.checkers-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 2rem;
}

.checkers-square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.checkers-square--light {
  background: var(--square-light);
}

.checkers-square--dark {
  background: var(--square-dark);
}

.checkers-square--light,
.checkers-square:disabled {
  cursor: default;
}

.checkers-square[data-piece]::before {
  content: "";
  width: 74%;
  height: 74%;
  border-radius: 50%;
  border: 3px solid var(--bg);
}

.checkers-square[data-piece="a"]::before,
.checkers-square[data-piece="A"]::before {
  background: var(--accent);
}

.checkers-square[data-piece="b"]::before,
.checkers-square[data-piece="B"]::before {
  background: var(--secondary);
}

.checkers-square[data-piece="A"]::after,
.checkers-square[data-piece="B"]::after {
  content: "\265A\FE0E";
  position: absolute;
  color: var(--bg);
  font-size: clamp(1rem, 5vw, 1.9rem);
  line-height: 1;
}

.checkers-square[data-piece="B"]::after {
  color: var(--fg);
}

.checkers-square--last {
  box-shadow: inset 0 0 0 100px rgba(255, 214, 10, 0.25);
}

.checkers-square--selected {
  outline: 3px solid var(--square-selected);
  outline-offset: -3px;
}

.checkers-square--path::after {
  content: "";
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--square-selected);
}

.checkers-square--target::after {
  content: "";
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: var(--bg);
  opacity: 0.4;
  pointer-events: none;
}

.checkers-square--dark:not(:disabled):hover {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.checkers-square:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}