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/online/TopBar.tsx

@@ -5,6 +5,7 @@ import { useSessionStore } from "@/lib/session-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useNotifStore } from "@/lib/notification-store";
 import { useI18n } from "@/lib/i18n";
+import { MAX_LEVEL, xpNeededForLevel } from "@/lib/online/gamification";
 import { Avatar } from "./Avatar";
 
 export function TopBar() {
@@ -15,6 +16,10 @@ export function TopBar() {
   const { t } = useI18n();
   if (!profile) return null;
 
+  const maxed = profile.level >= MAX_LEVEL;
+  const xpNeed = xpNeededForLevel(profile.level);
+  const xpPct = maxed ? 100 : Math.min(100, Math.max(0, Math.round((profile.xp / xpNeed) * 100)));
+
   return (
     <div className="flex items-center justify-between gap-3">
       <button
@@ -24,13 +29,20 @@ export function TopBar() {
         <span className="relative size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
           <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 36 : 26} />
         </span>
-        <span className="text-start leading-tight">
+        <span className="text-start leading-tight min-w-[96px]">
           <span className="flex items-center gap-1 text-sm font-bold text-cream max-w-28 truncate">
             {profile.displayName}
             {profile.plan === "pro" && <Crown className="size-3 text-gold-400 fill-gold-500 shrink-0" />}
           </span>
-          <span className="block text-[10px] text-gold-400/80">
-            {t("common.level")} {profile.level}
+          <span className="flex items-center justify-between text-[10px] text-gold-400/80 mt-0.5">
+            <span>{t("common.level")} {profile.level}</span>
+            <span className="text-cream/40 tabular-nums">{maxed ? "MAX" : `${xpPct}%`}</span>
+          </span>
+          <span className="mt-0.5 block h-1 w-full rounded-full bg-navy-900 overflow-hidden">
+            <span
+              className="block h-full rounded-full bg-gradient-to-r from-gold-500 to-gold-300"
+              style={{ width: `${xpPct}%` }}
+            />
           </span>
         </span>
       </button>