/* -- Table-like layout container -- */
.main-table {
  display: table;      /* use CSS table display */
  margin: 0 auto;      /* center the entire block if you want */
  border-spacing: 0;   /* remove default table spacing if desired */
}

.table-row {
  display: table-row;
}

.table-cell {
  /* display: table-cell; looks better without for the moment */
  vertical-align: middle;  /* or top, if you prefer */
  padding: 4px;            /* optional spacing */
}

.player-container {
  display: flex;
  flex-direction: row;
}

.player-control-button {
  margin-left: auto;
  border-radius: 4px;
  padding-inline: 0.75em
  /* might look good with tweaks box-shadow: 0 2px 6px rgba(0,0,0,0.2); */
}

/* If you want distinct classes for naming: */
.player-name {
  white-space: nowrap; /* prevents long names from wrapping to multiple lines */
  font-size: 1em;
}

.p1-controls, .p2-controls {
  display: none;
}

/* Sudoku board (unchanged) */
#sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 50px);
  grid-template-rows: repeat(9, 50px);
  gap: 0;

  justify-content: center;
  margin-top: 20px;
}

/* Each cell of the Sudoku board */
.cell {
  width: 50px;
  height: 50px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  transition: background-color 0.2s ease;
}

.cell.highlight {
  background-color: #fcfcfc;
}

.player-one-claim {
  background-color: rgba(19, 204, 231, 0.2);
}

.player-two-claim {
  background-color: rgba(246, 50, 20, 0.2);
}

.tiles-container {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Panel can still be used for spacing, 
   but no need to "justify-content: center" now. */
.number-panel {
  margin-top: 20px;
}

/* .tile styling (unchanged) */
.tile {
  position: relative;
  width: 60px;
  height: 60px;
  border: 2px solid #000000;
  border-radius: 5px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  background-color: white;
}

.color-cycle {
  animation: tileChange 6s ease-in-out infinite;
}

@keyframes tileChange {
  0% {
    background-color: rgba(19, 204, 231, 0.2);
  }
  33% {
    background-color: rgba(206, 50, 220, 0.2);;
  }
  66% {
    background-color: rgba(246, 50, 20, 0.2);
  }
  100% {
    background-color: rgba(19, 204, 231, 0.2);
  }
}

.tile-number {
  font-size: 1em;
}

.tile-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 0.8em;
  background-color: rgba(0,0,0,0.1);
  padding: 2px 4px;
  border-radius: 4px;
}

.toast-message {
  position: fixed;         /* always in a fixed spot on the screen */
  top: 20px;
  right: 20px;
  background-color: #f44336; /* red-ish background, change as desired */
  color: #fff;            /* white text */
  padding: 10px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  
  /* Start fully opaque */
  opacity: 1;                 
  /* Animate changes to opacity over 0.5s */
  transition: opacity 0.5s ease;
}