/* --- The Board Container --- */
#board {
  display: grid;
  /* Creates exactly 8 columns and 8 rows of equal size */
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  
  /* Board dimensions */
  width: 550px;
  height: 550px;
  
  /* Styling the outer edge */
  border: 4px solid #333;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  margin: 20px auto; /* Centers the board on the page */
}

/* --- Individual Squares --- */
.square {
  /* Flexbox here is just to perfectly center the chess piece inside the square */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Piece styling (assuming you use Unicode characters or SVGs) */
  font-size: 3rem; 
  cursor: grab;
  
  /* Prevents the text-cursor from appearing when dragging */
  user-select: none; 
}

/* Active drag state */
.square:active {
  cursor: grabbing;
}

/* --- Square Colors (Standard Chess.com style colors) --- */
.light {
  background-color: #ebecd0;
}

.dark {
  background-color: #739552;
}

/* --- UX Elements --- */
/* Add this class via JS to squares that are valid moves */
.highlight {
  position: relative;
}

/* Creates a nice dot in the center of valid move squares */
.highlight::after {
  content: '';
  position: absolute;
  width: 25%;
  height: 25%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
/* Add this to the bottom of your style.css file */

#turn-indicator {
  text-align: center;
  font-family: sans-serif;
  margin-top: 20px;
  margin-bottom: 0px;
  color: #333;
  font-size: 2rem;
}