feat: add leaderboard rank extraction and display in chat and overlay components, including CSS styling for leaderboard badge

client/app/dashboard/page.tsx

@@ -616,6 +616,11 @@ function ChatItem({ message, isSelected, onSelect, onLinkClick, isPreviouslySele
               <span className="chatItem__membership">{message.membershipLevel}:</span>
             )}
             <span className="chatItem__author">{message.author}</span>
+            {message.leaderboardRank && (
+              <span className="badge badge--leaderboard" title={`#${message.leaderboardRank} on leaderboard`}>
+                👑 #{message.leaderboardRank}
+              </span>
+            )}
             {message.badges && message.badges.map((badge, i) => (
               badge.imageUrl ? (
                 <img key={i} src={proxyImageUrl(badge.imageUrl)} alt={badge.label} className="badge badge--image" title={badge.label} />

client/app/globals.css

@@ -784,6 +784,12 @@ main {
   color: #93c5fd;
 }
 
+.badge--leaderboard {
+  background: rgba(251, 191, 36, 0.2);
+  color: #fcd34d;
+  font-weight: 600;
+}
+
 .memberItem {
   display: flex;
   flex-direction: column;

client/app/overlay/page.tsx

@@ -170,6 +170,11 @@ export default function OverlayPage() {
                 <div>
                   <div className="overlay__authorLine">
                     <span className="overlay__author">{displayMessage.author}</span>
+                    {displayMessage.leaderboardRank && (
+                      <span className="overlay__badge overlay__badge--leaderboard" title={`#${displayMessage.leaderboardRank} on leaderboard`}>
+                        👑 #{displayMessage.leaderboardRank}
+                      </span>
+                    )}
                     {displayMessage.badges && displayMessage.badges.map((badge, i) => (
                       badge.imageUrl ? (
                         <img key={i} src={proxyImageUrl(badge.imageUrl)} alt={badge.label} className="overlay__badge overlay__badge--image" title={badge.label} />