/* Chess Board Styles */

/* Responsive square sizing */
:root {
  --chess-square-size: 2.5rem;    /* Mobile default: ~40px */
  --chess-label-width: 1.5rem;    /* Rank labels */
  --chess-label-height: 1.25rem;  /* File labels */
  --chess-label-font: 0.75rem;
}

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

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

[data-chess-board-target="square"].selected {
  box-shadow: inset 0 0 0 4px rgba(59, 130, 246, 0.8);
}

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

[data-chess-board-target="square"].legal-move[data-piece]:not([data-piece=""])::after {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: rgba(239, 68, 68, 0.3);
  border: 3px solid rgba(239, 68, 68, 0.6);
}