Match intro "players joining" loading screen + i18n fix; checkpoint

- MatchIntroOverlay: UNO-style pre-game reveal — the 4 seats animate into the
  table (with "?" placeholders until each player's data streams in for live
  matches), a 3-2-1-GO countdown, then the table shows. Wired via game-store
  matchIntroPending/consumeIntro, rendered online-only in GameScreen.
- Fix: intro.found / intro.getReady / intro.go existed only in the Persian dict;
  added the English strings (would have shown raw keys to EN users).
- Checkpoint of the in-progress UI/social batch (CoinsPill, shop titles section,
  friend-request rate limit, etc.) — all green.

Verified: tsc + next build + scripts/sim.ts + dotnet build server/Hokm.slnx all pass.

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

src/components/online/TopBar.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { Bell, Coins, Crown, Gift } from "lucide-react";
+import { Bell, Crown, Gift, Store } from "lucide-react";
 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";
+import { CoinsPill } from "./CoinsPill";
 
 export function TopBar() {
   const profile = useSessionStore((s) => s.profile);
@@ -68,16 +69,13 @@ export function TopBar() {
           <Gift className="size-4 text-gold-400" />
         </button>
         <button
-          onClick={() => go("buycoins")}
-          className="glass rounded-full px-3 py-1.5 flex items-center gap-1.5 hover:bg-navy-800/80 transition"
-          title={t("buy.title")}
+          onClick={() => go("shop")}
+          className="glass rounded-full p-2 hover:bg-navy-800/80 transition"
+          title={t("menu.shop")}
         >
-          <Coins className="size-4 text-gold-400" />
-          <span className="text-sm font-bold text-cream tabular-nums">
-            {profile.coins.toLocaleString()}
-          </span>
-          <span className="text-gold-400 text-sm leading-none font-bold">+</span>
+          <Store className="size-4 text-gold-400" />
         </button>
+        <CoinsPill />
       </div>
     </div>
   );