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/components/screens/ShopScreen.tsx

@@ -25,7 +25,9 @@ export function ShopScreen() {
   const owns = (item: ShopItem) =>
     item.kind === "avatar"
       ? profile.ownedAvatars.includes(item.id)
-      : profile.ownedCardStyles.includes(item.id);
+      : item.kind === "cardstyle"
+      ? profile.ownedCardStyles.includes(item.id)
+      : profile.ownedReactionPacks.includes(item.id);
 
   const buy = async (item: ShopItem) => {
     const res = await getService().buyItem(item.id);
@@ -39,6 +41,7 @@ export function ShopScreen() {
 
   const avatars = items.filter((i) => i.kind === "avatar");
   const cardstyles = items.filter((i) => i.kind === "cardstyle");
+  const reactions = items.filter((i) => i.kind === "reactionpack");
 
   return (
     <ScreenShell>
@@ -85,6 +88,20 @@ export function ShopScreen() {
           ))}
         </div>
       </Section>
+
+      <Section title={t("shop.reactions")}>
+        <div className="grid grid-cols-3 gap-3">
+          {reactions.map((item) => (
+            <ItemCard
+              key={item.id}
+              item={item}
+              owned={owns(item)}
+              onBuy={() => buy(item)}
+              preview={<span className="text-4xl">{item.preview}</span>}
+            />
+          ))}
+        </div>
+      </Section>
     </ScreenShell>
   );
 }