.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* 9 equal columns */
  gap: 3px; /* Space between cells for better separation */
  margin: 20px auto;
  width: 100%;
  max-width: 540px; /* Maximum width for larger screens */
  background: linear-gradient(145deg, #111, #000); /* Black gradient background */
  border: 4px solid #FFD700; /* Yellow border for a glowing effect */
  border-radius: 15px; /* Smooth corners */
  padding: 10px;
  box-sizing: border-box; /* Ensure padding is included in dimensions */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* 3D shadow effect */
}

/* Sudoku Cells */
.sudoku-board input {
  width: 100%;
  height: 100%;
  aspect-ratio: 1; /* Maintain square cells */
  font-size: 18px;
  text-align: center;
  border: 2px solid #FFD700; /* Yellow border for the cells */
  background: linear-gradient(145deg, #222, #111); /* Dark gradient background for cells */
  color: #FFD700; /* Bright yellow text for visibility */
  font-family: Arial, sans-serif;
  box-sizing: border-box; /* Include border in dimensions */
  outline: none;
  border-radius: 8px; /* Rounded edges for cells */
  box-shadow: inset 0 2px 4px rgba(255, 215, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.7); /* Inner and outer shadows for depth */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hover and Focus Effects */
.sudoku-board input:hover {
  transform: translateY(-2px); /* Lift effect on hover */
  box-shadow: 0 8px 15px rgba(255, 215, 0, 0.8); /* Brighter shadow on hover */
}

.sudoku-board input:focus {
  background: linear-gradient(145deg, #333, #222); /* Highlighted background on focus */
  color: #FFF; /* White text for focus clarity */
  border-color: #FFD700; /* Maintain yellow border */
  transform: translateY(-2px); /* Maintain lift effect */
  box-shadow: 0 10px 20px rgba(255, 223, 0, 1); /* Glow effect on focus */
}

/* Prefilled Cells */
.sudoku-board input:disabled {
  background: linear-gradient(145deg, #444, #222); /* Darker background for prefilled cells */
  color: #FFD700; /* Yellow text for prefilled cells */
  font-weight: bold;
  border-color: #FFD700; /* Match border with theme */
  cursor: not-allowed;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); /* Inner shadow for prefilled cells */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .sudoku-board {
    max-width: 400px; /* Smaller width for tablets */
  }

  .sudoku-board input {
    font-size: 16px; /* Adjust font size for smaller screens */
  }
}

@media (max-width: 480px) {
  .sudoku-board {
    max-width: 300px; /* Compact design for mobile */
  }

  .sudoku-board input {
    font-size: 14px; /* Smaller font size for mobile screens */
  }
}