/* General Styles */
body {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  transition: background-color 0.3s, color 0.3s;
}

#game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 900px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, color 0.3s;
}

/* Game Title */
h1 {
  text-align: center;
  color: #FF4365; /* Bright pink title */
}

/* Score Display */
#score-container {
  text-align: center;
  margin-bottom: 10px;
}

/* Rules Button */
#rulesButton {
  text-align: center;
}

/* Game Grid Container */
#game-grid-container {
  margin-bottom: 15px;
}

/* Game Grid */
#game-grid {
  border-collapse: collapse;
}

#game-grid td {
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 30px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Light Mode */
body {
  background-color: #fff9f7; /* Light peach background */
  color: #333; /* Dark gray text for contrast */
}

#game-container {
  background-color: #fff5ee; /* Seashell white container */
}

#game-grid td {
  border: 2px solid #ffd1dc; /* Light peach border */
}

#game-grid td:hover {
  background-color: #ffe5ec; /* Slightly lighter peach on hover */
}

/* Dark Mode */
body.dark-mode {
  background-color: #161925; /* Dark blue-gray background */
  color: #ff99c8;              /* Pastel pink text for contrast */
}

body.dark-mode #game-container {
  background-color: #202533; /* Slightly lighter blue-gray container */
}

body.dark-mode #game-grid td {
  border: 2px solid #ff99c8; /* Pink border */
}

body.dark-mode #game-grid td:hover {
  background-color: #383C4B; /* Darker hover color */
}

/* Shared Styles */

h2 {
  text-align: center;
  margin-bottom: 10px;
}

.visited, .current {
  color: white; /* Ensure text is visible on darker squares */
}

/* Game State Colors (Uplifting Pastels) */
.visited { background-color: #6495ED; } /* Cornflower blue */
.current { background-color: #FFB6C1; } /* Light pink */
.possible-move { background-color: #A020F0; } /* Purple */

/* Button and Rules Styling */
button {
  background-color: #6495ED; /* Cornflower blue */
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
  transition: background-color 0.3s; 
}

button:hover {
  background-color: #4169E1;  /* Slightly darker blue on hover */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

#game-rules {
  width: 80%;
  max-width: 400px;
  margin: 10px auto;
  padding: 15px;
  border: 1px solid #ffd1dc; /* Light peach border */
  border-radius: 4px;
  background-color: #fff5ee; /* Seashell white background */
  color: #333; 
  display: none; 
}

body.dark-mode #game-rules {
  background-color: #202533; 
  color: #ff99c8; /* Pastel pink text in dark mode */
  border-color: #ff99c8;
}

@keyframes colorChange {
  0% {
    background-color: #FFCCCC; /* Light pink */
  }
  25% {
    background-color: #FFD699; /* Light orange */
  }
  50% {
    background-color: #C9FFD6; /* Light green */
  }
  75% {
    background-color: #C1D1FF; /* Light blue */
  }
  100% {
    background-color: #FFCCCC; /* Back to light pink */
  }
}

#shareButton {
  background-color: #FFCCCC; /* Initial color */
  color: #333; /* Dark gray text */
  padding: 10px 20px; /* Adjusted for size */
  border: none;
  border-radius: 8px; /* Rounded shape */
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s, color 0.3s;
  outline: none;
  animation: colorChange 10s infinite; /* Smooth color change animation */
}

#shareButton:before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  right: -10%;
  bottom: -10%;
  background: linear-gradient(to bottom, #FFCCCC, #C1D1FF);
  z-index: -1;
  filter: blur(20px);
}

#shareButton:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 204, 204, 0.8), 0 0 30px rgba(255, 204, 204, 0.6), 0 0 40px rgba(255, 204, 204, 0.4), 0 0 60px rgba(255, 204, 204, 0.2);
}

#shareButton:focus {
  transform: scale(1.02);
}

#shareButton:active {
  transform: scale(0.98);
}


#developer-credit {
  margin-top: 20px;
  text-align: center;
  font-size: 0.9em;
  color: #555; /* Initial color */
  transition: color 0.5s ease; /* Smooth color transition */
}