Achievements overhaul: 37 achievements, page with tabs, leagues, gating

Achievements (client + server mirror, metric-driven so the list is one source):
- 37 achievements across 6 categories (Victories, Kot, Streaks, Levels, Ranks,
  Veterancy) incl. 7–0 sweeps, kot milestones (1/5/10/25/50/100), win streaks
  (3/5/10/15), level milestones every 5 (5..50), rank floors, games/tricks.
- New AchievementsScreen with category tabs, progress bars, coin + sticker-unlock
  badges, and unlocked/locked states; summary header (unlocked count + coins).
- Some achievements unlock sticker packs: Seven–Zip→Hokm, 25 Kots→Taunts,
  100 Wins→Persian (ownedStickerPackIds now also honors profile.unlocked).
- Prestige titles added: Expert, Professional, Captain, Leader (+ existing).
- Tracks new stat shutoutWins; MatchSummary.shutout (7–0). Profile shows a
  6-item preview + "view all" link.

Leagues: 3 ranked entry tiers — Starter (100, lvl1), Pro (500, lvl10),
Expert (1000, lvl20). Higher league stakes more, so wins/losses swing bigger;
kot bonus now scales to the stake (40%). OnlineLobby shows league cards with
level gating.

Profile photo upload gated to level 25 (client button + server Update guard).

Win animation: PostMatchRewardsModal now shows an animated coins-won count-up
hero on a win.

Verified: dotnet build + tsc + next build clean; sim unlocks 26 achievements
over 500 matches; live server grants first_win/first_kot/shutout_1 and pays
2050 coins on an expert-league shutout+kot win. Images rebuilt on :1500/:1505.

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

src/components/screens/OnlineLobbyScreen.tsx

@@ -1,24 +1,28 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Coins, Trophy, Users } from "lucide-react";
+import { Coins, Lock, Trophy, Users } from "lucide-react";
 import { useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
+import { MATCH_LEAGUES, leagueById } from "@/lib/online/gamification";
 import { useOnlineStore } from "@/lib/online-store";
 import { useSessionStore } from "@/lib/session-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
 import { cn } from "@/lib/cn";
 
-const ENTRIES = [100, 500, 1000];
-
 export function OnlineLobbyScreen() {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const createRoom = useOnlineStore((s) => s.createRoom);
   const startMatchmaking = useOnlineStore((s) => s.startMatchmaking);
   const go = useUIStore((s) => s.go);
-  const coins = useSessionStore((s) => s.profile?.coins ?? 0);
-  const [entry, setEntry] = useState(100);
+  const profile = useSessionStore((s) => s.profile);
+  const coins = profile?.coins ?? 0;
+  const level = profile?.level ?? 1;
+  const [leagueId, setLeagueId] = useState(MATCH_LEAGUES[0].id);
+  const league = leagueById(leagueId);
+  const entry = league.entry;
+  const lockedLeague = level < league.minLevel;
 
   // Private rooms with friends are free.
   const onCreate = async () => {
@@ -28,6 +32,7 @@ export function OnlineLobbyScreen() {
 
   // Ranked random always costs the entry (you stake it).
   const onRandom = async () => {
+    if (lockedLeague) return;
     if (coins < entry) {
       go("buycoins");
       return;
@@ -48,27 +53,59 @@ export function OnlineLobbyScreen() {
         }
       />
 
-      {/* entry (only for ranked) */}
+      {/* league pick (only for ranked) */}
       <div className="glass rounded-2xl p-4 mb-4">
         <div className="flex items-center gap-1.5 text-sm text-cream/70 mb-2.5">
-          <Coins className="size-4 text-gold-400" />
-          {t("lobby.entry")}
+          <Trophy className="size-4 text-gold-400" />
+          {t("lobby.chooseLeague")}
         </div>
-        <div className="flex gap-2">
-          {ENTRIES.map((s) => (
-            <button
-              key={s}
-              onClick={() => setEntry(s)}
-              className={cn(
-                "flex-1 rounded-xl py-2.5 text-sm font-bold transition",
-                entry === s ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
-              )}
-            >
-              {s.toLocaleString()}
-            </button>
-          ))}
+        <div className="space-y-2">
+          {MATCH_LEAGUES.map((l) => {
+            const locked = level < l.minLevel;
+            const active = l.id === leagueId;
+            return (
+              <button
+                key={l.id}
+                disabled={locked}
+                onClick={() => setLeagueId(l.id)}
+                className={cn(
+                  "w-full rounded-2xl p-3 flex items-center gap-3 border text-start transition",
+                  active
+                    ? "border-gold-500/70 bg-gold-500/10"
+                    : "border-navy-700/60 bg-navy-900/50 hover:border-navy-600",
+                  locked && "opacity-50 cursor-not-allowed"
+                )}
+              >
+                <span
+                  className="size-10 rounded-xl flex items-center justify-center text-xl shrink-0"
+                  style={{ background: l.color + "22" }}
+                >
+                  {l.icon}
+                </span>
+                <span className="flex-1 min-w-0">
+                  <span className="block text-sm font-black text-cream">
+                    {locale === "fa" ? l.nameFa : l.nameEn}
+                  </span>
+                  <span className="block text-[11px] text-cream/55">
+                    {locale === "fa" ? l.descFa : l.descEn}
+                  </span>
+                </span>
+                {locked ? (
+                  <span className="text-[11px] text-rose-300 flex items-center gap-1 shrink-0">
+                    <Lock className="size-3.5" />
+                    {t("lobby.lvl")} {l.minLevel}
+                  </span>
+                ) : (
+                  <span className="flex items-center gap-1 text-gold-300 font-black text-sm shrink-0">
+                    {l.entry.toLocaleString()}
+                    <Coins className="size-3.5" />
+                  </span>
+                )}
+              </button>
+            );
+          })}
         </div>
-        {coins < entry && (
+        {!lockedLeague && coins < entry && (
           <p className="text-rose-300 text-xs mt-2 text-center">{t("lobby.needCoins")}</p>
         )}
       </div>