body {
  background-color: #000;  /* Black background */
  color: #fff;  /* White text for contrast */
  font-family: 'Arial', sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
}

h1 {
  font-size: 2.5em;
  margin-top: 30px; /* Adjusted top margin to prevent overlap */
  position: relative;
  z-index: 20;
}

.zoom-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 5px;
}

.zoom-controls button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 1.2em;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.zoom-controls button:hover {
  background-color: #45a049;
}

.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
  box-sizing: border-box;
}

/* Leaderboard Styling */
#leaderboard {
  background-color: #333;
  color: white;
  padding: 15px;
  border-radius: 8px;
  margin-top: 10px;
  z-index: 15;
  position: relative;
}

#leaderboard h2 {
  margin: 0;
  font-size: 1.5em;
}

#leaderboard-list {
  list-style: none;
  padding: 0;
}

#leaderboard-list li {
  font-size: 1.2em;
  margin: 5px 0;
}

/* Board Styling (Squares) */
#board {
  display: grid;
  grid-template-columns: repeat(50, 1fr); /* 50 columns for 50x50 grid */
  gap: 0;  /* No gap between squares */
  margin: 0 auto;
  justify-items: center;
  width: 100vw; /* Full width of the viewport */
  height: 100vh; /* Full height of the viewport */
  box-sizing: border-box; /* Ensure borders are part of the element size */
  transition: transform 0.3s ease; /* Smooth transition for zoom */
}

.square {
  width: 15px;
  height: 15px;
  background-color: #ddd;
  border: 0.5px solid #ccc; /* Border for visibility */
  cursor: pointer;
  transition: background-color 0.3s;
  box-sizing: border-box;
}

.square:hover {
  background-color: #bbb;
}

/* Mobile Version - Adjust grid layout for a square format */
@media (max-width: 768px) {
  #board {
    grid-template-columns: repeat(10, 1fr);  /* 10 columns on mobile initially */
    gap: 0;  /* No gap between squares */
    width: 90%;  /* Make the grid width smaller but keep it square */
    height: auto;  /* Adjust the height automatically */
    margin: 0 auto;
  }

  .square {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 480px) {
  #board {
    grid-template-columns: repeat(8, 1fr);  /* Keep 8 columns on small screens */
    gap: 0;  /* Remove gaps between squares */
    width: 90%;  /* Ensure it fills the screen */
    height: auto;
    margin: 0 auto;
  }

  .square {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 320px) {
  #board {
    grid-template-columns: repeat(6, 1fr);  /* 6 columns on very small screens */
    gap: 0;  /* Remove gaps between squares */
    width: 90%;  /* Make sure the grid stays proportional */
    height: auto;
    margin: 0 auto;
  }

  .square {
    width: 100%;
    height: 100%;
  }
}

/* Desktop Version */
@media (min-width: 769px) {
  #board {
    grid-template-columns: repeat(50, 1fr); /* 50 columns for desktop version */
    gap: 0;  /* No gaps between squares */
  }

  .square {
    width: 100%;
    height: 100%;
  }
}