/* Center align everything in the body */
/* Reduce spacing for headings (Tic-Tac-Toe title) */
h1 {
  padding-top: 0px; /* Optional: Add slight padding from the top */
  margin-top: -5px;
  font-size: 36px; /* Adjust size if needed */
  margin-bottom: 5px; /* Reduce space below the title */
}

/* Reduce spacing for the version text */
#version-text {
  font-size: 16px; /* Adjust font size */
  margin-bottom: 5px; /* Reduce space below the version */
  line-height: 1.2; /* Make lines more dense */
}

/* Reduce spacing for the turn indicator */
#turn-indicator {
  font-size: 20px; /* Adjust font size if needed */
  margin-top: 5px; /* Reduce space above */
  line-height: 1.2; /* Decrease line spacing */
}
body {
  padding-top: -520px; /* Optional: Add slight padding from the top */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh; /* Ensure full screen height usage */
  margin: 0;
  background-color: #f9f9f9; /* Optional: light background for better contrast */
}

/* Ensure the board is centered and has equal gaps */
#board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* Uniform gaps between cells */
  width: min(90vw, 400px); /* Dynamic width for responsiveness */
  height: min(90vw, 400px); /* Matches width for square board */
  margin: auto; /* Centers the board within its container */
  margin-top: 5px;
  align-content: center; /* Ensures vertical alignment of cells */
}

/* Grid cells: Keep them square with visible grid lines */
.cell {
  width: 100%;
  aspect-ratio: 1; /* Ensures square cells */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(68, 11, 224); /* Visible blue grid lines */
  background-color: transparent; /* Transparent for clear visibility */
}

/* Buttons: Centered and consistent styling */
button {
  width: 200px;
  height: 60px;
  font-size: 16px;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  margin: 10px 0; /* Adds space above and below buttons */
  margin-top: 30px; 
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

/* X and O images */
.xo-image {
  width: 80%; /* Scales proportionally within cells */
  height: auto;
  object-fit: contain; /* Ensures the image doesn't distort */
}

/* Highlight winning cells */
.cell.winning {
  background-color: #ffeb3b;
  animation: pulse 1s infinite;
}

/* Animation for winning cells */
@keyframes pulse {
  0%, 100% {
      transform: scale(1);
      background-color: #ffeb3b;
  }
  50% {
      transform: scale(1.1);
      background-color: #ffc107;
  }
}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
  #board {
      width: 85vw;
      height: 85vw; /* Keep the board square */
      gap: 8px; /* Reduce gaps slightly */
  }
  .cell {
      border: 2px solid rgb(68, 11, 224); /* Retain blue grid lines */
  }
}

@media (max-width: 480px) {
  #board {
      width: 90vw;
      height: 90vw;
      gap: 6px;
  }
  .cell {
      border: 2px solid rgb(68, 11, 224);
  }
}