Leaderboard avatar+level+XP bar; mobile table overlap fixes

Leaderboard: each row now shows the player avatar (photo or emoji) with a level
badge ring and a progress-to-next-level bar (LeaderboardEntry gained
levelProgress + avatarImage; mock fills real XP for you, random for others).

Mobile table: the played-card pile now scales inward on narrow screens so it no
longer overlaps the opponents' side stacks (trickScale by viewport); seat
avatars render above the stacks (z-20) so the side player isn't hidden; side
hands nudged to the edges + top hand raised slightly on phones.

Verified: tsc + next build clean; web image rebuilt on :1500.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/screens/LeaderboardScreen.tsx

@@ -3,9 +3,9 @@
 import { useEffect } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { RankBadge } from "@/components/online/RankBadge";
+import { Avatar } from "@/components/online/Avatar";
 import { useOnlineStore } from "@/lib/online-store";
 import { useI18n } from "@/lib/i18n";
-import { avatarEmoji } from "@/lib/online/types";
 import { cn } from "@/lib/cn";
 
 const MEDALS: Record<number, string> = { 1: "🥇", 2: "🥈", 3: "🥉" };
@@ -27,25 +27,45 @@ export function LeaderboardScreen() {
           <div
             key={e.id}
             className={cn(
-              "rounded-xl p-2.5 flex items-center gap-3 border",
+              "rounded-xl p-2.5 flex items-center gap-2.5 border",
               e.isYou
                 ? "bg-gold-500/15 border-gold-500/50"
                 : "glass border-transparent"
             )}
           >
-            <span className="w-7 text-center font-black text-cream/70 tabular-nums">
+            <span className="w-6 text-center font-black text-cream/70 tabular-nums shrink-0">
               {MEDALS[e.rank] ?? e.rank}
             </span>
-            <span className="text-2xl">{avatarEmoji(e.avatar)}</span>
+
+            {/* avatar with a level ring badge */}
+            <div className="relative shrink-0">
+              <div className="size-10 rounded-xl bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
+                <Avatar id={e.avatar} image={e.avatarImage} size={e.avatarImage ? 40 : 26} />
+              </div>
+              <span className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 rounded-full bg-navy-950 gold-border px-1.5 text-[9px] font-black text-gold-300 leading-tight">
+                {e.level}
+              </span>
+            </div>
+
             <div className="flex-1 min-w-0">
               <div className="text-sm font-semibold text-cream truncate">
                 {e.displayName}
                 {e.isYou && <span className="text-gold-300"> ({t("seat.you")})</span>}
               </div>
-              <div className="text-[10px] text-cream/45">
-                {t("common.level")} {e.level}
+              {/* progress to next level */}
+              <div className="mt-1 flex items-center gap-1.5">
+                <div className="h-1.5 flex-1 rounded-full bg-navy-900 overflow-hidden">
+                  <div
+                    className="h-full bg-gradient-to-r from-gold-500 to-gold-300"
+                    style={{ width: `${Math.round(Math.min(1, Math.max(0, e.levelProgress)) * 100)}%` }}
+                  />
+                </div>
+                <span className="text-[9px] text-cream/40 tabular-nums shrink-0">
+                  {t("common.level")} {e.level + 1}
+                </span>
               </div>
             </div>
+
             <RankBadge rating={e.rating} showRating />
           </div>
         ))}