Add reactions (Sheklak), fix hakem card visibility during trump choice

- Reactions/emotes in-game: tray of owned emojis + animated per-seat bubbles
  (feature named "شکلک / Sheklak"). Packs: starter (free), champion/legend
  (earned by rating/wins), emotions/taunt (purchasable in shop)
- OnlineService.sendReaction/onReaction; mock echoes you + random opponents
- Fix: human hakem's 5 cards were blurred behind the trump-chooser overlay —
  raise hand to z-50 during choosing-trump so cards stay readable

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

src/lib/online/mock-service.ts

@@ -2,7 +2,7 @@
 // Simulates remote players, friends presence, room invites and matchmaking
 // with timers, and computes rewards via gamification.ts.
 
-import { CARD_STYLES, applyMatchResult, dailyRewardFor } from "./gamification";
+import { CARD_STYLES, REACTION_PACKS, applyMatchResult, dailyRewardFor } from "./gamification";
 import {
   CreateRoomOptions,
   MatchmakingOptions,
@@ -112,6 +112,7 @@ function defaultProfile(session: AuthSession): UserProfile {
     ownedAvatars: [AVATARS[0].id, AVATARS[1].id],
     ownedCardStyles: ["classic"],
     ownedTitles: ["novice"],
+    ownedReactionPacks: [],
     title: "novice",
     cardStyle: "classic",
     achievements: {},
@@ -128,6 +129,7 @@ function migrateProfile(p: UserProfile): UserProfile {
     ownedAvatars: p.ownedAvatars ?? [AVATARS[0].id],
     ownedCardStyles: p.ownedCardStyles ?? ["classic"],
     ownedTitles: p.ownedTitles ?? ["novice"],
+    ownedReactionPacks: p.ownedReactionPacks ?? [],
     title: p.title ?? "novice",
     cardStyle: p.cardStyle ?? "classic",
   };
@@ -172,6 +174,8 @@ export class MockOnlineService implements OnlineService {
   private mmCbs = new Set<(s: MatchmakingState) => void>();
   private friendCbs = new Set<(f: Friend[]) => void>();
   private chatCbs = new Set<(friendId: string, m: ChatMessage[]) => void>();
+  private reactionCbs = new Set<(seat: number, reaction: string) => void>();
+  private reactionTimer: ReturnType<typeof setInterval> | null = null;
   private timers: ReturnType<typeof setTimeout>[] = [];
 
   constructor() {
@@ -439,6 +443,32 @@ export class MockOnlineService implements OnlineService {
     return () => this.chatCbs.delete(cb);
   }
 
+  /* ---------------------------- reactions ---------------------------- */
+
+  async sendReaction(reaction: string) {
+    for (const cb of this.reactionCbs) cb(0, reaction);
+  }
+
+  onReaction(cb: (seat: number, reaction: string) => void): Unsubscribe {
+    this.reactionCbs.add(cb);
+    if (this.reactionTimer == null) {
+      const pool = ["👍", "😂", "🔥", "😮", "👏", "😎", "🙄", "😭"];
+      this.reactionTimer = setInterval(() => {
+        if (this.reactionCbs.size === 0) return;
+        const seat = randInt(1, 3);
+        const r = pick(pool);
+        for (const c of this.reactionCbs) c(seat, r);
+      }, 9000);
+    }
+    return () => {
+      this.reactionCbs.delete(cb);
+      if (this.reactionCbs.size === 0 && this.reactionTimer) {
+        clearInterval(this.reactionTimer);
+        this.reactionTimer = null;
+      }
+    };
+  }
+
   /* ------------------------------ rooms ------------------------------ */
 
   private seatYou(): RoomSeat {
@@ -723,7 +753,15 @@ export class MockOnlineService implements OnlineService {
       price: c.price,
       preview: c.accent,
     }));
-    return [...avatarItems, ...cardItems];
+    const reactionItems: ShopItem[] = REACTION_PACKS.filter((r) => r.price > 0).map((r) => ({
+      id: r.id,
+      kind: "reactionpack",
+      nameFa: r.nameFa,
+      nameEn: r.nameEn,
+      price: r.price,
+      preview: r.reactions[0],
+    }));
+    return [...avatarItems, ...cardItems, ...reactionItems];
   }
 
   async buyItem(id: string) {
@@ -732,7 +770,11 @@ export class MockOnlineService implements OnlineService {
     const item = items.find((i) => i.id === id);
     if (!item) return { ok: false, messageFa: "آیتم یافت نشد", messageEn: "Item not found" };
     const owned =
-      item.kind === "avatar" ? p.ownedAvatars.includes(id) : p.ownedCardStyles.includes(id);
+      item.kind === "avatar"
+        ? p.ownedAvatars.includes(id)
+        : item.kind === "cardstyle"
+        ? p.ownedCardStyles.includes(id)
+        : p.ownedReactionPacks.includes(id);
     if (owned) return { ok: false, messageFa: "قبلاً خریداری شده", messageEn: "Already owned" };
     if (p.coins < item.price)
       return { ok: false, messageFa: "سکه کافی نیست", messageEn: "Not enough coins" };
@@ -743,6 +785,8 @@ export class MockOnlineService implements OnlineService {
       ownedAvatars: item.kind === "avatar" ? [...p.ownedAvatars, id] : p.ownedAvatars,
       ownedCardStyles:
         item.kind === "cardstyle" ? [...p.ownedCardStyles, id] : p.ownedCardStyles,
+      ownedReactionPacks:
+        item.kind === "reactionpack" ? [...p.ownedReactionPacks, id] : p.ownedReactionPacks,
     };
     this.saveProfile();
     return { ok: true, profile: this.profile, messageFa: "خرید انجام شد", messageEn: "Purchased" };