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/screens/ProfileScreen.tsx

@@ -1,42 +1,74 @@
 "use client";
 
-import { Check, Coins, Pencil } from "lucide-react";
-import { useState } from "react";
+import { Check, Coins, Crown, Pencil, Upload } from "lucide-react";
+import { useRef, useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { RankBadge } from "@/components/online/RankBadge";
 import { XpBar } from "@/components/online/XpBar";
+import { Avatar } from "@/components/online/Avatar";
 import { useSessionStore } from "@/lib/session-store";
 import { useI18n } from "@/lib/i18n";
-import { ACHIEVEMENTS, achievementProgress } from "@/lib/online/gamification";
-import { AVATARS, avatarEmoji } from "@/lib/online/types";
+import {
+  ACHIEVEMENTS,
+  CARD_STYLES,
+  TITLES,
+  achievementProgress,
+} from "@/lib/online/gamification";
+import { AVATARS } from "@/lib/online/types";
 import { cn } from "@/lib/cn";
 
 export function ProfileScreen() {
   const { t, locale } = useI18n();
   const profile = useSessionStore((s) => s.profile);
   const updateProfile = useSessionStore((s) => s.updateProfile);
+  const upgradePlan = useSessionStore((s) => s.upgradePlan);
+  const fileRef = useRef<HTMLInputElement>(null);
   const [editing, setEditing] = useState(false);
   const [name, setName] = useState(profile?.displayName ?? "");
 
   if (!profile) return null;
   const s = profile.stats;
   const winrate = s.games > 0 ? Math.round((s.wins / s.games) * 100) : 0;
+  const titleDef = TITLES.find((x) => x.id === profile.title);
+  const titleName = titleDef ? (locale === "fa" ? titleDef.nameFa : titleDef.nameEn) : null;
 
   const saveName = async () => {
     if (name.trim()) await updateProfile({ displayName: name.trim() });
     setEditing(false);
   };
 
+  const onUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => updateProfile({ avatarImage: String(reader.result) });
+    reader.readAsDataURL(file);
+  };
+
   return (
     <ScreenShell>
       <ScreenHeader title={t("profile.title")} />
 
       {/* identity */}
       <div className="glass rounded-3xl p-5 text-center">
-        <div className="size-20 mx-auto rounded-2xl bg-navy-900 gold-border flex items-center justify-center text-4xl">
-          {avatarEmoji(profile.avatar)}
+        <div className="relative size-20 mx-auto">
+          <div className="size-20 rounded-2xl bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
+            <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 80 : 56} />
+          </div>
+          <button
+            onClick={() => fileRef.current?.click()}
+            className="absolute -bottom-1 ltr:-right-1 rtl:-left-1 btn-gold rounded-full p-1.5"
+            title={t("profile.upload")}
+          >
+            <Upload className="size-3.5" />
+          </button>
+          <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onUpload} />
         </div>
 
+        {titleName && (
+          <div className="mt-2 text-xs font-bold text-gold-300">{titleName}</div>
+        )}
+
         {editing ? (
           <div className="mt-3 flex items-center justify-center gap-2">
             <input
@@ -72,6 +104,23 @@ export function ProfileScreen() {
         <div className="mt-4">
           <XpBar level={profile.level} xp={profile.xp} />
         </div>
+
+        <div className="mt-4">
+          {profile.plan === "pro" ? (
+            <span className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold text-gold-300 bg-gold-500/15 gold-border">
+              <Crown className="size-3.5 fill-gold-500" />
+              {t("plan.active")}
+            </span>
+          ) : (
+            <button
+              onClick={upgradePlan}
+              className="btn-gold inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs"
+            >
+              <Crown className="size-3.5" />
+              {t("plan.upgrade")} — {t("plan.proDesc")}
+            </button>
+          )}
+        </div>
       </div>
 
       {/* avatar picker */}
@@ -93,6 +142,57 @@ export function ProfileScreen() {
         </div>
       </div>
 
+      {/* title picker */}
+      <div className="glass rounded-2xl p-4 mt-4">
+        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.titleLabel")}</h3>
+        <div className="flex flex-wrap gap-2">
+          {TITLES.filter((tt) => profile.ownedTitles.includes(tt.id)).map((tt) => (
+            <button
+              key={tt.id}
+              onClick={() => updateProfile({ title: tt.id })}
+              className={cn(
+                "rounded-lg px-3 py-1.5 text-sm transition",
+                profile.title === tt.id
+                  ? "btn-gold"
+                  : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
+              )}
+            >
+              {locale === "fa" ? tt.nameFa : tt.nameEn}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* card style picker */}
+      <div className="glass rounded-2xl p-4 mt-4">
+        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardStyleLabel")}</h3>
+        <div className="flex flex-wrap gap-2">
+          {CARD_STYLES.filter((c) => profile.ownedCardStyles.includes(c.id)).map((c) => (
+            <button
+              key={c.id}
+              onClick={() => updateProfile({ cardStyle: c.id })}
+              className={cn(
+                "rounded-xl p-1.5 flex items-center gap-2 transition",
+                profile.cardStyle === c.id
+                  ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
+                  : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
+              )}
+            >
+              <span
+                className="w-7 h-10 rounded-md border"
+                style={{
+                  borderColor: `${c.accent}80`,
+                  background: `repeating-linear-gradient(45deg, ${c.accent}55 0 4px, transparent 4px 8px), ${c.c2}`,
+                }}
+              />
+              <span className="text-xs text-cream/80 pe-1">
+                {locale === "fa" ? c.nameFa : c.nameEn}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+
       {/* stats */}
       <div className="glass rounded-2xl p-4 mt-4">
         <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.stats")}</h3>