Apply distinct styling to the top 3 scores on the leaderboard

[AjaysDevWorkspace]

🏆 Feature Request: Style Top 3 Players on Leaderboard

Description:

The current leaderboard is functional, but it’s difficult to quickly distinguish the top players at a glance. To improve visual hierarchy and engagement, we need to apply special visual styling to the top 3 ranked entries.

---

🎯 Requirements:

• Rank 1: Use the most prominent styling (e.g., gold/yellow text color, border, or background highlight).
• Rank 2: Apply slightly less prominent but distinct styling (e.g., silver/grey theme or subtle accent background).
• Rank 3: Use a subtle highlight (e.g., bronze/brown text or slightly bold font).
• All other ranks should retain the standard leaderboard appearance.

---

💡 Implementation Hints:

• Identify the top 3 entries when rendering the leaderboard — based on rank or score.
• Apply CSS classes such as .rank-1, .rank-2, and .rank-3 dynamically in the leaderboard rendering logic.
• Define corresponding CSS styles for each class to visually differentiate them.
• Optional: Add subtle animations (like a glowing border for Rank 1) to make it feel more dynamic.

---

🧩 Files Likely Involved:

• leaderboard.js or equivalent script managing leaderboard data and rendering.
• style.css — add or modify styles for the rank-specific classes.
• Any template file or DOM structure related to leaderboard display.

---

✅ Acceptance Criteria:

• Rank 1 entry stands out clearly with gold/yellow styling or highlight.
• Rank 2 entry is styled distinctly (e.g., silver/grey tone).
• Rank 3 entry uses a bronze/brown accent or similar visual cue.
• Other ranks remain unchanged in appearance.
• Visuals remain consistent across all screen sizes and themes.

---

Enhancement Type: UI / Visual Feedback
Component: Leaderboard System

[Nivin-Sithija]

I would like to work on this ,can you assign

[SarthakJain29]

I made the PR earlier but didnt mention the issue number. I have now corrected it.