body {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-family: sans-serif;
}

.chessboard {
  display: grid;
  grid-template-columns: repeat(8, 60px);
  grid-template-rows: repeat(8, 60px);
  border: 4px solid #333;
}

.chessboard div {
  width: 60px;
  height: 60px;
  font-size: 40px;
  text-align: center;
  line-height: 60px;
  transition: all 0.2s ease;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.white {
  color: grey;
}

.black {
  color: black;
}

/* 🔥 Hover effect */
.chessboard div:hover {
  box-shadow: inset 0 0 0 4px #444;
  background-color: #ffd700; /* Light gold highlight */
  cursor: pointer;
}