feat: UNO-style table, social hub, cosmetics, speed mode, store IAB

Game table & play
- UNO-style restyle: suit-aware bolder cards (+xl size), pulsing playable glow,
  big "YOUR TURN" pill, active-seat ring, trick-win particle burst, round
  confetti, match coin-rain.
- Per-league turn time via turnMsForStake: 15s starter/AI, 10s pro, 7s expert;
  mirrored server-side in GameRoom.TurnMs.
- Speed (Blitz) mode for vs-AI/private: 5s turns, race to 5, ~halved pacing.
- Matchmaking waits ~15s (randomized 12-18s) then fills bots; elapsed timer + hint.

Rewards / gifts
- Richer post-match modal (floating coins, XP bar), celebration overlay reveals
  the unlocked sticker pack, boosted daily rewards (client+server synced),
  themed 7-day daily with special day-7.

Social
- Public profile modal (identity, stats, achievement board) from leaderboard /
  friends / discover / end-of-game roster; rate-limited add-friend (10/hour).
- Social hub: Friends / Discover (player search + suggestions) / Messages inbox.
- Profile gender (shown in finder/profile) + social links with public/friends/
  hidden visibility, enforced server-side.

Cosmetics
- Distinct card backs: per-design pattern families (stripes/argyle/grid/dots/
  rays/scales/crosshatch/royal/filigree/gem) + luxury motifs (lib/cardBack.ts),
  consistent on table/shop/profile; +Peacock/Rose-Gold backs.
- Purchasable titles (shop Titles section); title shown under the seat on the
  table and in discover/public profile.
- 10 new sticker packs (banter/kol-kol, Persian trends, court cards, moods).
- Persistent level+XP bar on Home and every inner screen.

Payments
- Buy-coins gateway opens in a new tab (no SPA dead-end) + focus refresh.
- Store IAB scaffolding: Cafe Bazaar deep-link purchase + redirect-token capture,
  Myket native-bridge contract, server-side IabService.Verify for both stores,
  config-driven via Iab__* env. POST /api/coins/iab/verify (JWT).

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

src/components/screens/BuyCoinsScreen.tsx

@@ -6,6 +6,7 @@ import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { useSessionStore } from "@/lib/session-store";
 import { useI18n } from "@/lib/i18n";
 import { getService } from "@/lib/online/service";
+import { isStoreBilling, purchaseViaStore } from "@/lib/storeBilling";
 import { sound } from "@/lib/sound";
 import { CoinPack } from "@/lib/online/types";
 import { cn } from "@/lib/cn";
@@ -14,31 +15,90 @@ export function BuyCoinsScreen() {
   const { t, locale } = useI18n();
   const profile = useSessionStore((s) => s.profile);
   const setProfile = useSessionStore((s) => s.setProfile);
+  const refreshProfile = useSessionStore((s) => s.refreshProfile);
   const [packs, setPacks] = useState<CoinPack[]>([]);
   const [busy, setBusy] = useState<string | null>(null);
   const [gained, setGained] = useState<number | null>(null);
+  const [msg, setMsg] = useState("");
 
   useEffect(() => {
     getService().getCoinPacks().then(setPacks);
   }, []);
 
+  // When the user returns from the payment tab, pull the (possibly credited) balance.
+  useEffect(() => {
+    const onFocus = () => refreshProfile();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [refreshProfile]);
+
   const fmt = (n: number) =>
     new Intl.NumberFormat(locale === "fa" ? "fa-IR" : "en-US").format(n);
 
   const buy = async (p: CoinPack) => {
     setBusy(p.id);
-    const res = await getService().buyCoins(p.id);
-    // Live: redirect to the ZarinPal gateway; we credit on return via callback.
-    if (res.redirectUrl) {
-      window.location.href = res.redirectUrl;
+    setMsg("");
+
+    // Inside a store build (Cafe Bazaar / Myket), route through store billing.
+    if (isStoreBilling()) {
+      try {
+        const r = await purchaseViaStore(p);
+        if (r.kind === "redirect") return; // Bazaar navigated away; credited on return
+        if (r.kind === "token") {
+          const v = await getService().verifyIab(r.store, r.productId, r.token);
+          if (v.ok && v.profile) {
+            setProfile(v.profile);
+            sound.play("purchase");
+            setGained(v.coins);
+            setTimeout(() => setGained(null), 2500);
+          } else {
+            setMsg(t("buy.failed"));
+          }
+          setBusy(null);
+          return;
+        }
+        // unavailable → fall through to the web gateway below
+      } catch {
+        setBusy(null);
+        setMsg(t("buy.failed"));
+        return;
+      }
+    }
+
+    let res;
+    try {
+      res = await getService().buyCoins(p.id);
+    } catch {
+      setBusy(null);
+      setMsg(t("buy.failed"));
       return;
     }
+
+    // Live: hand off to the ZarinPal gateway. Open it in a NEW tab so the app
+    // itself never navigates away (and so a slow/blocked gateway can't dead-end
+    // the whole app). Credit lands via the server callback; we refresh on focus.
+    if (res.redirectUrl) {
+      const url = res.redirectUrl;
+      if (!/^https?:\/\//i.test(url)) {
+        setBusy(null);
+        setMsg(t("buy.failed"));
+        return;
+      }
+      const win = window.open(url, "_blank", "noopener,noreferrer");
+      if (!win) window.location.href = url; // popup blocked → same-tab fallback
+      setBusy(null);
+      setMsg(t("buy.redirecting"));
+      return;
+    }
+
     // Mock/offline: instant credit.
     if (res.ok && res.profile) {
       setProfile(res.profile);
       sound.play("purchase");
       setGained(res.coins);
       setTimeout(() => setGained(null), 2500);
+    } else {
+      setMsg(t("buy.failed"));
     }
     setBusy(null);
   };
@@ -64,6 +124,10 @@ export function BuyCoinsScreen() {
         </div>
       )}
 
+      {msg && (
+        <div className="mb-4 text-center text-cream/80 text-sm glass rounded-xl py-2">{msg}</div>
+      )}
+
       <div className="grid grid-cols-2 gap-3 pb-6">
         {packs.map((p) => (
           <button