/* Custom styles to complement Tailwind and match your theme */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f9f9f9; /* Matching light background from your homepage */
}

.card-hover-effect {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.rank-1, .rank-2, .rank-3 {
    font-weight: 700;
}

.rank-1 .rank-badge { background-color: #ffd700; color: #854d0e; } /* Gold */
.rank-2 .rank-badge { background-color: #c0c0c0; color: #3f3f46; } /* Silver */
.rank-3 .rank-badge { background-color: #cd7f32; color: #78350f; } /* Bronze */

/* Styles for footer links */
 footer a {
  color: #ccc;
  text-decoration: none;
  margin-left: 5px;
}
footer a:hover {
  color: #fff;
  text-decoration: underline;
}
footer { background: #222; color: #ccc; font-size: 14px; padding: 20px; }


/* Style for the active leaderboard filter button */
.leaderboard-filter-btn {
    background-color: #f3f4f6; /* gray-100 */
    color: #374151; /* gray-700 */
}


.leaderboard-filter-btn:hover {
    background-color: #e5e7eb; /* gray-200 */
}

.leaderboard-filter-btn.active {
    background-color: #1b3a2f; /* Your primary dark green */
    color: #ffffff;
    font-weight: 600;
}


/* --- Style for the 'Coming Soon' button tooltip --- */

.coming-soon-btn {
  /* This is needed to position the tooltip relative to the button */
  position: relative; 
  
  /* Make the button look non-interactive */
  cursor: not-allowed; 
  opacity: 0.75;
}

/* This creates the tooltip message itself */
.coming-soon-btn::after {
  content: 'Will be live soon!'; /* The message to display */
  
  /* Positioning the tooltip above the button */
  position: absolute;
  bottom: 110%; /* Place it just above the button */
  left: 50%;
  transform: translateX(-50%); /* Center the tooltip horizontally */
  
  /* Tooltip appearance */
  background-color: #262626; /* Dark background */
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.875rem; /* 14px */
  white-space: nowrap; /* Keep the message on a single line */
  
  /* Initially hide the tooltip */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
}

/* Show the tooltip when hovering over the button */
.coming-soon-btn:hover::after {
  opacity: 1;
  visibility: visible;
}