Turn timer + auto-play, disconnect/reconnect, cosmetics, queue & paid plan

- Turn timer (20s) for play/trump; system auto-plays a smart move on timeout
- Disconnect handling (mock): wait-for-return countdown, system covers turns
- Cosmetics: titles, card-back styles, custom profile-image upload, badges;
  pickers in Profile; shop sells card styles; reward modal shows new titles
- Paid plan (pro): free players queue when server busy, pro skips; upgrade flow
- OnlineService extended (upgradePlan, richer profile patch); mock implements
  queue + plans; gamification adds TITLES + CARD_STYLES

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

src/components/online/TopBar.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Coins, Gift } from "lucide-react";
+import { Coins, Crown, Gift } from "lucide-react";
 import { useSessionStore } from "@/lib/session-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
-import { avatarEmoji } from "@/lib/online/types";
+import { Avatar } from "./Avatar";
 
 export function TopBar() {
   const profile = useSessionStore((s) => s.profile);
@@ -19,12 +19,13 @@ export function TopBar() {
         onClick={() => go("profile")}
         className="glass rounded-full ltr:pr-4 rtl:pl-4 ltr:pl-1.5 rtl:pr-1.5 py-1.5 flex items-center gap-2 hover:bg-navy-800/80 transition"
       >
-        <span className="size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center text-xl">
-          {avatarEmoji(profile.avatar)}
+        <span className="relative size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
+          <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 36 : 26} />
         </span>
         <span className="text-start leading-tight">
-          <span className="block text-sm font-bold text-cream max-w-24 truncate">
+          <span className="flex items-center gap-1 text-sm font-bold text-cream max-w-28 truncate">
             {profile.displayName}
+            {profile.plan === "pro" && <Crown className="size-3 text-gold-400 fill-gold-500 shrink-0" />}
           </span>
           <span className="block text-[10px] text-gold-400/80">
             {t("common.level")} {profile.level}