* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* background-color: #1a1a2e; */
}

.history {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 400px;
  /* overflow-x: auto; */
  flex-shrink: 0;
}
.history img {
  width: 30px;
}
.history span {
  margin: -9px;
  padding: 0;
}
.history>div {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 480px;
  height: 480px;
  /* border: 3px solid #0931b3; */
  border-radius: 4px;
  /* box-shadow: 0 0 40px rgba(9, 49, 179, 0.5); */
}
.board.flipped {
  transform: rotate(180deg);
}
.board.flipped .cell {
  transform: rotate(180deg);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* Light square */
.cell.light {
  background-color: #f0d9b5;
}

/* Dark square */
.cell.dark {
  background-color: #b58863;
}

/*Move Highlight*/
.cell.from {
  background-color: #b58863;
}

.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cell:hover::after {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.cell.highlight::after {
  opacity: 1;
  background: radial-gradient( rgba(0, 0, 0, 0.25) 50%, transparent 70%);
}

.cell.selected::after {
  opacity: 1;
  background: rgba(255, 215, 0, 0.3);
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  justify-content: center;
  align-items: center;
}

.modal.show {
  display: flex;
}

.color-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

#modal-content {
  background: #1a1a2e;
  border: 2px solid #0931b3;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 0 40px rgba(9, 49, 179, 0.6);
  animation: slideUp 0.3s ease;
}

#modal-content h1 {
  color: #e8eaf6;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

#modal-content p {
  color: rgba(232, 234, 246, 0.6);
  margin-bottom: 1.5rem;
}

#modal-content button {
  background: #0931b3;
  color: #e8eaf6;
  border: none;
  padding: 0.6rem 1.8rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}


#modal-content button:hover {
  background: #0a3fd4;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}