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/HomeScreen.tsx

@@ -15,13 +15,16 @@ import {
   Users,
 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Zap } from "lucide-react";
 import { useGameStore } from "@/lib/game-store";
 import { useSessionStore } from "@/lib/session-store";
 import { useUIStore, type Screen } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
 import { getService } from "@/lib/online/service";
 import { sound } from "@/lib/sound";
+import { SPEED_TARGET_SCORE } from "@/lib/online/gamification";
 import { SUIT_SYMBOL } from "@/lib/hokm/types";
+import { cn } from "@/lib/cn";
 import { TopBar } from "./online/TopBar";
 
 export function HomeScreen() {
@@ -39,9 +42,15 @@ export function HomeScreen() {
     go(screen);
   };
 
+  const [speed, setSpeed] = useState(false);
+
   const playVsComputer = () => {
     const you = profile?.displayName || t("seat.you");
-    newMatch({ names: [you, "آرش", "کیان", "نیلوفر"], targetScore: 7 });
+    newMatch({
+      names: [you, "آرش", "کیان", "نیلوفر"],
+      targetScore: speed ? SPEED_TARGET_SCORE : 7,
+      speed,
+    });
     goGame("home");
   };
 
@@ -102,9 +111,31 @@ export function HomeScreen() {
           <PrimaryCard
             icon={<Bot className="size-6" />}
             title={t("menu.vsComputer")}
-            desc={t("menu.vsComputerDesc")}
+            desc={speed ? t("speed.desc") : t("menu.vsComputerDesc")}
             onClick={playVsComputer}
           />
+          {/* Normal / Speed mode picker */}
+          <div className="mt-2 glass rounded-2xl p-1 flex gap-1">
+            <button
+              onClick={() => setSpeed(false)}
+              className={cn(
+                "flex-1 rounded-xl py-2 text-xs font-bold transition flex items-center justify-center gap-1.5",
+                !speed ? "btn-gold" : "text-cream/60 hover:text-cream"
+              )}
+            >
+              {t("speed.normal")}
+            </button>
+            <button
+              onClick={() => setSpeed(true)}
+              className={cn(
+                "flex-1 rounded-xl py-2 text-xs font-bold transition flex items-center justify-center gap-1.5",
+                speed ? "btn-gold" : "text-cream/60 hover:text-cream"
+              )}
+            >
+              <Zap className={cn("size-3.5", speed && "fill-current")} />
+              {t("speed.label")}
+            </button>
+          </div>
         </div>
 
         {/* tiles */}