:root {
  --darkblue: #769656;   
  --lightcream: #eeeed2; 
  --accent: #baca44;     
  --purewhite: #ffffff; 
  --pureblack: #000000;  
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--purewhite);
  font-family: Arial, sans-serif;
}

/* NAVBAR */
.Nav {
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--darkblue);
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.NavImg {
  display: flex;
  align-items: center;
}

.nav-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background-color: var(--lightcream);
}

.heading {
  position: absolute;
  font-family: "Cinzel", serif;
  left: 50%;
  transform: translateX(-50%);
}

.heading h1 {
  margin: 0;
  color: var(--purewhite);
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* CHESSBOARD CONTAINER */
#chess-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  height: calc(100vh - 100px);
}

/* BOARD */
.board {
  display: grid;
  grid-template-columns: repeat(8, 70px);
  grid-template-rows: repeat(8, 70px);
  width: 560px;
  height: 560px;
  border: 4px solid var(--accent);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

.square {
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.white {
  background-color: var(--lightcream);
}

.black {
  background-color: var(--darkblue);
}

/* PIECES */
.piece {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: 0.2s;
}

/* SELECTED SQUARE STYLE */
.selected {
  position: relative;
  outline: 3px solid var(--accent);
  outline-offset: -2px;
  background: radial-gradient(circle, rgba(186, 202, 68, 0.35), rgba(186, 202, 68, 0.15));
}

/* VALID PIECE HIGHTLIGHT */
.highlight::after {
  content: "";
  position: absolute;
  width: 15px;     
  height: 15px;
  border-radius: 50%;
  background-color: rgba(186, 202, 68, 0.8);
  box-shadow: 0 0 5px rgba(186, 202, 68, 0.5);
  pointer-events: none;
}

/* MESSAGE BOX */
#game-message {
  position: absolute;
  top: 70px; /* Just below navbar */
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  font-weight: bold;
  color: red;
  text-align: center;
  z-index: 10;
}