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

@@ -2,7 +2,7 @@
 
 import { AnimatePresence, motion } from "framer-motion";
 import { Crown, Loader2 } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { ScreenShell } from "@/components/online/ScreenHeader";
 import { Avatar } from "@/components/online/Avatar";
 import { useGameStore } from "@/lib/game-store";
@@ -24,8 +24,20 @@ export function MatchmakingScreen() {
 
   const ready = mm.phase === "ready";
   const queued = mm.phase === "queued";
+  const searching = mm.phase === "searching";
   const slots = [0, 1, 2, 3];
 
+  // Elapsed seconds while searching (resets when the search (re)starts).
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    if (!searching) {
+      setElapsed(0);
+      return;
+    }
+    const id = setInterval(() => setElapsed((s) => s + 1), 1000);
+    return () => clearInterval(id);
+  }, [searching]);
+
   // Live server: the server starts the match itself — auto-enter when ready.
   useEffect(() => {
     if (mm.phase === "ready" && getService().live) {
@@ -107,6 +119,13 @@ export function MatchmakingScreen() {
           {ready ? t("mm.ready") : mm.phase === "found" ? t("mm.found") : t("mm.searching")}
         </h1>
 
+        {searching && (
+          <>
+            <div className="mt-2 text-3xl font-black gold-text tabular-nums">{elapsed}s</div>
+            <p className="text-cream/50 text-xs mt-1 max-w-[16rem]">{t("mm.fillHint")}</p>
+          </>
+        )}
+
         <div className="grid grid-cols-4 gap-3 mt-8">
           {slots.map((i) => {
             const p = mm.players[i];