body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to top, #f9e6f7, #ffffff);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
  color: #d14c8b;
  margin-bottom: 20px;
}

/* Puzzle board styles */

.board {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  gap: 2px;
  background: #333;
  border: 4px solid #333;
}
.tile {
  width: 100px;
  height: 100px;
  background-image: url("../images/thriving.png");
  background-size: 400px 400px;
  cursor: pointer;
  transition: all 0.2s;
}
.empty {
  background: #333;
  cursor: default;
}

/* Info bar containing buttons */

.info-bar {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
.info-bar button {
  padding: 10px 20px;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.2s;
}

/* Animated Shuffle → Blue gradient */

#animatedShuffleBtn {
  background: linear-gradient(to right, #42a5f5, #64b5f6);
}
#animatedShuffleBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(66, 165, 245, 0.7);
}
#animatedShuffleBtn:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

/* Instant Shuffle → Green gradient */

#instantShuffleBtn {
  background: linear-gradient(to right, #66bb6a, #81c784);
}
#instantShuffleBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(102, 187, 106, 0.7);
}
#instantShuffleBtn:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

/* View Leaderboard → Yellow gradient */

#viewLeaderboardBtn {
  background: linear-gradient(to right, #fbc02d, #ffd54f);
  color: #333;
}
#viewLeaderboardBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(251, 192, 45, 0.7);
}
#viewLeaderboardBtn:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}


/* Back to Game → Purple gradient */

#backToGameBtn {
  background: linear-gradient(to right, #7e57c2, #b39ddb);
}
#backToGameBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(126, 87, 194, 0.7);
}
#backToGameBtn:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

/* Status Bar for moves and timer */

.status-bar {
  margin-top: 10px;
  display: flex;
  gap: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #d14c8b;
  background: #fce9f4;
  border: 2px solid #f3c2e5;
  border-radius: 12px;
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 6px rgba(209, 76, 139, 0.2);
  user-select: none;
}

/* Popup overlay */

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}
.popup.hidden {
  display: none;
}
.popup-content {
  background: #fff;
  padding: 2rem 3rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: popIn 0.3s ease;
}
.popup-content h2 {
  color: #d14c8b;
  margin-bottom: 1rem;
}
.popup-content p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}
.popup-content button {
  padding: 10px 20px;
  background: linear-gradient(to right, #7e57c2, #b39ddb);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.2s;
}
.popup-content button:hover {
  transform: scale(1.05);
}

/* Popup animation */

@keyframes popIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Leaderboard styles */

#leaderboardList {
  text-align: left;
  margin: 0 auto 1rem;
  padding: 0;
  max-width: 250px;
  font-size: 1rem;
  color: #333;
}
#leaderboardList li {
  margin: 2px 0;
}
#leaderboardList li.current-user {
  font-weight: bold;
  color: #d14c8b;
}

/* New Record Highlight */

.new-record {
  color: #e67e22;
  font-weight: bold;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  animation: glowPulse 1s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  from {
    text-shadow: 0 0 5px #f39c12;
  }
  to {
    text-shadow: 0 0 15px #e67e22;
  }
}