/* Checkers Board Styles */

/* Responsive square sizing */
:root {
  --checkers-square-size: 2.5rem;    /* Mobile default: ~40px */
  --checkers-label-width: 1.5rem;    /* Row labels */
  --checkers-label-height: 1.25rem;  /* Column labels */
  --checkers-label-font: 0.75rem;
  --checkers-king-font: 1rem;
}

@media (min-width: 480px) {
  :root {
    --checkers-square-size: 3.5rem;  /* Small tablet: ~56px */
    --checkers-label-width: 2rem;
    --checkers-label-height: 1.5rem;
    --checkers-label-font: 0.875rem;
    --checkers-king-font: 1.5rem;
  }
}

@media (min-width: 768px) {
  :root {
    --checkers-square-size: 5.75rem; /* Desktop: original 92px */
    --checkers-label-width: 2.5rem;
    --checkers-label-height: 2rem;
    --checkers-label-font: 1rem;
    --checkers-king-font: 2rem;
  }
}

.checker-piece {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

[data-checkers-board-target="square"].selected {
  box-shadow: inset 0 0 0 4px rgba(220, 38, 38, 0.8);
}

[data-checkers-board-target="square"].in-sequence {
  box-shadow: inset 0 0 0 3px rgba(251, 191, 36, 0.8);
}

[data-checkers-board-target="square"].legal-move::after {
  content: "";
  position: absolute;
  width: calc(var(--checkers-square-size) * 0.35);
  height: calc(var(--checkers-square-size) * 0.35);
  background-color: rgba(34, 197, 94, 0.5);
  border-radius: 50%;
  pointer-events: none;
}

[data-checkers-board-target="square"].legal-move .checker-piece {
  filter: brightness(1.2);
}