UNO refactor (stage 2): Profile → tabbed 2-panel layout

Restructure ProfileScreen UNO-style: tabs (نمایه / مجموعه / تنظیمات).
- Basic: player card (avatar/level/name/rank/coins/XP/VIP) BESIDE a stats grid
  + «زندگیِ حکم» ribbon + achievements summary (landscape 2-column).
- Collection: avatar / title / card-front / card-back pickers in panels.
- Settings: social + audio + sign-out.
All glass cards → .panel; every handler/feature preserved. New profile.tab*/
lifeRibbon i18n.

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

src/components/screens/ProfileScreen.tsx

@@ -41,6 +41,7 @@ export function ProfileScreen() {
   const fileRef = useRef<HTMLInputElement>(null);
   const [editing, setEditing] = useState(false);
   const [name, setName] = useState(profile?.displayName ?? "");
+  const [tab, setTab] = useState<"basic" | "collection" | "settings">("basic");
 
   if (!profile) return null;
   const canUpload = profile.level >= PHOTO_UPLOAD_MIN_LEVEL;
@@ -67,300 +68,322 @@ export function ProfileScreen() {
 
   return (
     <ScreenShell>
-      {/* showXp=false: the identity card below already has a detailed XP bar. */}
       <ScreenHeader title={t("profile.title")} showXp={false} />
 
-      {/* identity */}
-      <motion.div
-        initial={{ opacity: 0, y: 16 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ type: "spring", stiffness: 200, damping: 22 }}
-        className="glass rounded-3xl p-5 text-center relative overflow-hidden"
-      >
-        {/* soft gold glow behind avatar */}
-        <div className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 size-40 bg-gold-500/10 blur-3xl rounded-full" />
-
-        <div className="relative size-20 mx-auto">
-          <motion.div
-            initial={{ scale: 0.8, rotate: -6 }}
-            animate={{ scale: 1, rotate: 0 }}
-            transition={{ type: "spring", stiffness: 260, damping: 18, delay: 0.1 }}
-            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} />
-          </motion.div>
-          {/* level badge */}
-          <motion.span
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 320, delay: 0.25 }}
-            className="absolute -top-2 ltr:-left-2 rtl:-right-2 inline-flex items-center gap-0.5 rounded-full btn-gold px-2 py-0.5 text-[10px] font-black shadow-lg"
-          >
-            <Star className="size-2.5" fill="currentColor" />
-            {profile.level}
-          </motion.span>
+      {/* tabs */}
+      <div className="flex gap-2 mb-4">
+        {(
+          [
+            ["basic", t("profile.tabBasic")],
+            ["collection", t("profile.tabCollection")],
+            ["settings", t("profile.tabSettings")],
+          ] as const
+        ).map(([key, label]) => (
           <button
-            onClick={() => (canUpload ? fileRef.current?.click() : undefined)}
+            key={key}
+            onClick={() => setTab(key)}
             className={cn(
-              "absolute -bottom-1 ltr:-right-1 rtl:-left-1 rounded-full p-1.5",
-              canUpload ? "btn-gold" : "bg-navy-900 gold-border text-cream/50 cursor-not-allowed"
+              "rounded-2xl px-5 py-2 text-sm font-bold transition",
+              tab === key ? "btn-gold" : "panel text-cream/70 hover:text-cream"
             )}
-            title={canUpload ? t("profile.upload") : t("profile.uploadLocked")}
           >
-            {canUpload ? <Upload className="size-3.5" /> : <Lock className="size-3.5" />}
+            {label}
           </button>
-          <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onUpload} />
-        </div>
+        ))}
+      </div>
 
-        {titleName && (
-          <div className="mt-2 text-xs font-bold text-gold-300">{titleName}</div>
-        )}
+      {/* ===== Basic: player card + stats/achievements ===== */}
+      {tab === "basic" && (
+        <div className="grid gap-4 items-start landscape:grid-cols-[minmax(0,340px)_minmax(0,1fr)]">
+          {/* player card */}
+          <motion.div
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ type: "spring", stiffness: 200, damping: 22 }}
+            className="panel rounded-3xl p-5 text-center relative overflow-hidden"
+          >
+            <div className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 size-40 bg-gold-500/10 blur-3xl rounded-full" />
 
-        {editing ? (
-          <div className="mt-3 flex items-center justify-center gap-2">
-            <input
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="rounded-lg bg-navy-900/70 gold-border px-3 py-1.5 text-center text-cream outline-none focus:ring-2 focus:ring-gold-500/40"
-            />
-            <button onClick={saveName} className="btn-gold rounded-lg p-2">
-              <Check className="size-4" />
-            </button>
+            <div className="relative size-20 mx-auto">
+              <motion.div
+                initial={{ scale: 0.8, rotate: -6 }}
+                animate={{ scale: 1, rotate: 0 }}
+                transition={{ type: "spring", stiffness: 260, damping: 18, delay: 0.1 }}
+                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} />
+              </motion.div>
+              <motion.span
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ type: "spring", stiffness: 320, delay: 0.25 }}
+                className="absolute -top-2 ltr:-left-2 rtl:-right-2 inline-flex items-center gap-0.5 rounded-full btn-gold px-2 py-0.5 text-[10px] font-black shadow-lg"
+              >
+                <Star className="size-2.5" fill="currentColor" />
+                {profile.level}
+              </motion.span>
+              <button
+                onClick={() => (canUpload ? fileRef.current?.click() : undefined)}
+                className={cn(
+                  "absolute -bottom-1 ltr:-right-1 rtl:-left-1 rounded-full p-1.5",
+                  canUpload ? "btn-gold" : "bg-navy-900 gold-border text-cream/50 cursor-not-allowed"
+                )}
+                title={canUpload ? t("profile.upload") : t("profile.uploadLocked")}
+              >
+                {canUpload ? <Upload className="size-3.5" /> : <Lock 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
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="rounded-lg bg-navy-900/70 gold-border px-3 py-1.5 text-center text-cream outline-none focus:ring-2 focus:ring-gold-500/40"
+                />
+                <button onClick={saveName} className="btn-gold rounded-lg p-2">
+                  <Check className="size-4" />
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={() => {
+                  setName(profile.displayName);
+                  setEditing(true);
+                }}
+                className="mt-3 inline-flex items-center gap-2 text-xl font-black text-cream hover:text-gold-300 transition"
+              >
+                {profile.displayName}
+                <Pencil className="size-3.5 text-cream/40" />
+              </button>
+            )}
+
+            <div className="mt-2 flex items-center justify-center gap-2">
+              <RankBadge rating={profile.rating} showRating />
+              <CoinsPill />
+            </div>
+
+            <div className="mt-4">
+              <XpBar level={profile.level} xp={profile.xp} showBadge />
+            </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>
+          </motion.div>
+
+          {/* stats + achievements */}
+          <div className="flex flex-col gap-4">
+            <div className="ribbon rounded-2xl py-2.5 text-center text-base">{t("profile.lifeRibbon")}</div>
+
+            <div className="panel rounded-2xl p-4">
+              <div className="grid grid-cols-3 gap-2.5">
+                <Stat label={t("profile.games")} value={s.games} />
+                <Stat label={t("profile.wins")} value={s.wins} />
+                <Stat label={t("profile.winrate")} value={`${winrate}%`} />
+                <Stat label={t("profile.kots")} value={s.kotsFor} />
+                <Stat label={t("profile.streak")} value={s.bestWinStreak} />
+                <Stat label={t("common.rating")} value={Math.round(profile.rating)} />
+              </div>
+            </div>
+
+            <div className="panel rounded-2xl p-4">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-sm font-bold text-cream/80">
+                  {t("profile.achievements")}
+                  <span className="text-cream/40 font-normal">
+                    {" "}
+                    ({profile.unlocked.length}/{ACHIEVEMENTS.length})
+                  </span>
+                </h3>
+                <button
+                  onClick={() => go("achievements")}
+                  className="text-xs font-bold text-gold-300 flex items-center gap-0.5 hover:text-gold-200"
+                >
+                  {t("achv.viewAll")}
+                  <ChevronLeft className="size-3.5 rtl:rotate-0 ltr:rotate-180" />
+                </button>
+              </div>
+              <div className="space-y-2">
+                {[...ACHIEVEMENTS]
+                  .sort((a, b) => {
+                    const ua = profile.unlocked.includes(a.id) ? 1 : 0;
+                    const ub = profile.unlocked.includes(b.id) ? 1 : 0;
+                    return ub - ua;
+                  })
+                  .slice(0, 6)
+                  .map((a, idx) => {
+                    const prog = achievementProgress(a, s, profile.rating, profile.level);
+                    const unlocked = profile.unlocked.includes(a.id) || prog >= a.goal;
+                    const pct = Math.min(100, Math.round((prog / a.goal) * 100));
+                    return (
+                      <motion.div
+                        key={a.id}
+                        initial={{ opacity: 0, x: locale === "fa" ? 16 : -16 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ delay: idx * 0.05 }}
+                        className={cn(
+                          "rounded-xl p-3 flex items-center gap-3 border",
+                          unlocked ? "bg-gold-500/10 border-gold-500/40" : "bg-navy-900/50 border-navy-700/50"
+                        )}
+                      >
+                        <span className={cn("text-2xl", !unlocked && "grayscale opacity-50")}>{a.icon}</span>
+                        <div className="flex-1 min-w-0">
+                          <div className="text-sm font-semibold text-cream">
+                            {locale === "fa" ? a.nameFa : a.nameEn}
+                          </div>
+                          <div className="text-[11px] text-cream/50 truncate">
+                            {locale === "fa" ? a.descFa : a.descEn}
+                          </div>
+                          {!unlocked && a.goal > 1 && (
+                            <div className="h-1.5 rounded-full bg-navy-900 overflow-hidden mt-1.5">
+                              <div className="h-full bg-gold-500/70" style={{ width: `${pct}%` }} />
+                            </div>
+                          )}
+                        </div>
+                        {unlocked && <Check className="size-4 text-gold-400 shrink-0" />}
+                      </motion.div>
+                    );
+                  })}
+              </div>
+            </div>
           </div>
-        ) : (
-          <button
-            onClick={() => {
-              setName(profile.displayName);
-              setEditing(true);
-            }}
-            className="mt-3 inline-flex items-center gap-2 text-xl font-black text-cream hover:text-gold-300 transition"
-          >
-            {profile.displayName}
-            <Pencil className="size-3.5 text-cream/40" />
-          </button>
-        )}
-
-        <div className="mt-2 flex items-center justify-center gap-2">
-          <RankBadge rating={profile.rating} showRating />
-          <CoinsPill />
         </div>
+      )}
 
-        <div className="mt-4">
-          <XpBar level={profile.level} xp={profile.xp} showBadge />
+      {/* ===== Collection: cosmetics pickers ===== */}
+      {tab === "collection" && (
+        <div className="grid gap-4 items-start landscape:grid-cols-2">
+          {/* avatar picker */}
+          <div className="panel rounded-2xl p-4">
+            <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.chooseAvatar")}</h3>
+            <div className="flex flex-wrap gap-2">
+              {AVATARS.filter((a) => ownedAvatars.has(a.id)).map((a) => (
+                <button
+                  key={a.id}
+                  onClick={() => updateProfile({ avatar: a.id })}
+                  className={cn(
+                    "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
+                    profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
+                  )}
+                >
+                  <Avatar id={a.id} size={40} />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* title picker */}
+          <div className="panel rounded-2xl p-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 front picker */}
+          <div className="panel rounded-2xl p-4">
+            <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardFront")}</h3>
+            <div className="flex flex-wrap gap-2">
+              {CARD_FRONTS.filter((c) => ownedFronts.has(c.id)).map((c) => (
+                <button
+                  key={c.id}
+                  onClick={() => updateProfile({ cardFront: c.id })}
+                  className={cn(
+                    "rounded-xl p-1.5 flex items-center gap-2 transition",
+                    profile.cardFront === 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 flex items-center justify-center text-xs text-slate-900"
+                    style={{ background: `linear-gradient(160deg, ${c.bg1}, ${c.bg2})`, borderColor: c.border }}
+                  >
+                    ♠
+                  </span>
+                  <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* card back picker */}
+          <div className="panel rounded-2xl p-4">
+            <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardBack")}</h3>
+            <div className="flex flex-wrap gap-2">
+              {CARD_BACKS.filter((c) => ownedBacks.has(c.id)).map((c) => (
+                <button
+                  key={c.id}
+                  onClick={() => updateProfile({ cardBack: c.id })}
+                  className={cn(
+                    "rounded-xl p-1.5 flex items-center gap-2 transition",
+                    profile.cardBack === 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 grid place-items-center"
+                    style={{ borderColor: `${c.accent}80`, ...backVisualFromDef(c) }}
+                  >
+                    <span className="text-[10px]" style={{ color: `${c.accent}dd` }}>
+                      {cardBackMotif(c.pattern, c.motif)}
+                    </span>
+                  </span>
+                  <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
+                </button>
+              ))}
+            </div>
+          </div>
         </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>
-          ) : (
+      {/* ===== Settings ===== */}
+      {tab === "settings" && (
+        <div className="grid gap-4 items-start landscape:grid-cols-2">
+          <SocialSettings />
+          <SoundSettings />
+          {isAuthed && (
             <button
-              onClick={upgradePlan}
-              className="btn-gold inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs"
+              onClick={() => {
+                signOut();
+                go("home");
+              }}
+              className="w-full panel rounded-2xl py-3 flex items-center justify-center gap-2 text-rose-300 hover:bg-navy-800/80 transition"
             >
-              <Crown className="size-3.5" />
-              {t("plan.upgrade")} — {t("plan.proDesc")}
+              <LogOut className="size-4" />
+              {t("menu.signOut")}
             </button>
           )}
         </div>
-      </motion.div>
-
-      {/* avatar picker */}
-      <div className="glass rounded-2xl p-4 mt-4">
-        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.chooseAvatar")}</h3>
-        <div className="flex flex-wrap gap-2">
-          {AVATARS.filter((a) => ownedAvatars.has(a.id)).map((a) => (
-            <button
-              key={a.id}
-              onClick={() => updateProfile({ avatar: a.id })}
-              className={cn(
-                "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
-                profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
-              )}
-            >
-              <Avatar id={a.id} size={40} />
-            </button>
-          ))}
-        </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 front picker */}
-      <div className="glass rounded-2xl p-4 mt-4">
-        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardFront")}</h3>
-        <div className="flex flex-wrap gap-2">
-          {CARD_FRONTS.filter((c) => ownedFronts.has(c.id)).map((c) => (
-            <button
-              key={c.id}
-              onClick={() => updateProfile({ cardFront: c.id })}
-              className={cn(
-                "rounded-xl p-1.5 flex items-center gap-2 transition",
-                profile.cardFront === 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 flex items-center justify-center text-xs text-slate-900"
-                style={{ background: `linear-gradient(160deg, ${c.bg1}, ${c.bg2})`, borderColor: c.border }}
-              >
-                ♠
-              </span>
-              <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* card back picker */}
-      <div className="glass rounded-2xl p-4 mt-4">
-        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardBack")}</h3>
-        <div className="flex flex-wrap gap-2">
-          {CARD_BACKS.filter((c) => ownedBacks.has(c.id)).map((c) => (
-            <button
-              key={c.id}
-              onClick={() => updateProfile({ cardBack: c.id })}
-              className={cn(
-                "rounded-xl p-1.5 flex items-center gap-2 transition",
-                profile.cardBack === 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 grid place-items-center"
-                style={{ borderColor: `${c.accent}80`, ...backVisualFromDef(c) }}
-              >
-                <span className="text-[10px]" style={{ color: `${c.accent}dd` }}>
-                  {cardBackMotif(c.pattern, c.motif)}
-                </span>
-              </span>
-              <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* gender + social links */}
-      <SocialSettings />
-
-      {/* audio settings */}
-      <SoundSettings />
-
-      {/* 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>
-        <div className="grid grid-cols-3 gap-2.5">
-          <Stat label={t("profile.games")} value={s.games} />
-          <Stat label={t("profile.wins")} value={s.wins} />
-          <Stat label={t("profile.winrate")} value={`${winrate}%`} />
-          <Stat label={t("profile.kots")} value={s.kotsFor} />
-          <Stat label={t("profile.streak")} value={s.bestWinStreak} />
-          <Stat label={t("common.rating")} value={Math.round(profile.rating)} />
-        </div>
-      </div>
-
-      {/* achievements */}
-      <div className="glass rounded-2xl p-4 mt-4 mb-6">
-        <div className="flex items-center justify-between mb-3">
-          <h3 className="text-sm font-bold text-cream/80">
-            {t("profile.achievements")}
-            <span className="text-cream/40 font-normal">
-              {" "}
-              ({profile.unlocked.length}/{ACHIEVEMENTS.length})
-            </span>
-          </h3>
-          <button
-            onClick={() => go("achievements")}
-            className="text-xs font-bold text-gold-300 flex items-center gap-0.5 hover:text-gold-200"
-          >
-            {t("achv.viewAll")}
-            <ChevronLeft className="size-3.5 rtl:rotate-0 ltr:rotate-180" />
-          </button>
-        </div>
-        <div className="space-y-2">
-          {[...ACHIEVEMENTS]
-            .sort((a, b) => {
-              const ua = profile.unlocked.includes(a.id) ? 1 : 0;
-              const ub = profile.unlocked.includes(b.id) ? 1 : 0;
-              return ub - ua;
-            })
-            .slice(0, 6)
-            .map((a, idx) => {
-            const prog = achievementProgress(a, s, profile.rating, profile.level);
-            const unlocked = profile.unlocked.includes(a.id) || prog >= a.goal;
-            const pct = Math.min(100, Math.round((prog / a.goal) * 100));
-            return (
-              <motion.div
-                key={a.id}
-                initial={{ opacity: 0, x: locale === "fa" ? 16 : -16 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ delay: idx * 0.05 }}
-                className={cn(
-                  "rounded-xl p-3 flex items-center gap-3 border",
-                  unlocked ? "bg-gold-500/10 border-gold-500/40" : "bg-navy-900/50 border-navy-700/50"
-                )}
-              >
-                <span className={cn("text-2xl", !unlocked && "grayscale opacity-50")}>
-                  {a.icon}
-                </span>
-                <div className="flex-1 min-w-0">
-                  <div className="text-sm font-semibold text-cream">
-                    {locale === "fa" ? a.nameFa : a.nameEn}
-                  </div>
-                  <div className="text-[11px] text-cream/50 truncate">
-                    {locale === "fa" ? a.descFa : a.descEn}
-                  </div>
-                  {!unlocked && a.goal > 1 && (
-                    <div className="h-1.5 rounded-full bg-navy-900 overflow-hidden mt-1.5">
-                      <div
-                        className="h-full bg-gold-500/70"
-                        style={{ width: `${pct}%` }}
-                      />
-                    </div>
-                  )}
-                </div>
-                {unlocked && <Check className="size-4 text-gold-400 shrink-0" />}
-              </motion.div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Sign out */}
-      {isAuthed && (
-        <button
-          onClick={() => {
-            signOut();
-            go("home");
-          }}
-          className="mt-6 w-full glass rounded-2xl py-3 flex items-center justify-center gap-2 text-rose-300 hover:bg-navy-800/80 transition"
-        >
-          <LogOut className="size-4" />
-          {t("menu.signOut")}
-        </button>
       )}
     </ScreenShell>
   );
@@ -408,7 +431,7 @@ function SocialSettings() {
   };
 
   return (
-    <div className="glass rounded-2xl p-4 mt-4">
+    <div className="panel rounded-2xl p-4">
       <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.social")}</h3>
 
       {/* gender */}
@@ -492,7 +515,7 @@ function SoundSettings() {
     { id: "playful" as const, label: t("settings.trackPlayful") },
   ];
   return (
-    <div className="glass rounded-2xl p-4 mt-4">
+    <div className="panel rounded-2xl p-4">
       <h3 className="text-sm font-bold text-cream/80 mb-2">{t("settings.audio")}</h3>
       <ToggleRow icon={<Volume2 className="size-4 text-gold-400" />} label={t("settings.sound")} on={sfx} onClick={toggleSfx} />
       <ToggleRow icon={<Music className="size-4 text-gold-400" />} label={t("settings.music")} on={music} onClick={toggleMusic} />

src/lib/i18n.tsx

@@ -155,6 +155,10 @@ const fa: Dict = {
   "friends.message": "پیام",
 
   "profile.title": "پروفایل",
+  "profile.tabBasic": "نمایه",
+  "profile.tabCollection": "مجموعه",
+  "profile.tabSettings": "تنظیمات",
+  "profile.lifeRibbon": "زندگیِ حکم",
   "profile.stats": "آمار",
   "profile.games": "بازی‌ها",
   "profile.wins": "بردها",
@@ -500,6 +504,10 @@ const en: Dict = {
   "friends.message": "Message",
 
   "profile.title": "Profile",
+  "profile.tabBasic": "Profile",
+  "profile.tabCollection": "Collection",
+  "profile.tabSettings": "Settings",
+  "profile.lifeRibbon": "Hokm Life",
   "profile.stats": "Stats",
   "profile.games": "Games",
   "profile.wins": "Wins",