Split card design into front+back, add sound effects & background music

Card design:
- Separate cardFront + cardBack (each own/equip independently)
- Fronts: classic (free), ivory/rosegold (buy), parchment/mint (earned)
- Backs: classic (free), sapphire/emerald (buy), ruby/royal (earned)
- PlayingCard `front` prop; table applies front to all faces, back to opponents
- Profile has front + back pickers; shop has both sections

Audio:
- Web Audio synth engine (no asset files): SFX for card/deal/trump/trick,
  win/lose, message, notify, award, levelup, purchase, kot + ambient music
- Toggles in profile (Audio) + mute button in game HUD; prefs persisted
- Wired across game-store, rewards, daily, shop, chat

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

src/lib/online/mock-service.ts

@@ -3,7 +3,8 @@
 // with timers, and computes rewards via gamification.ts.
 
 import {
-  CARD_STYLES,
+  CARD_BACKS,
+  CARD_FRONTS,
   REACTION_PACKS,
   STICKER_PACKS,
   applyMatchResult,
@@ -116,12 +117,14 @@ function defaultProfile(session: AuthSession): UserProfile {
       currentWinStreak: 0,
     },
     ownedAvatars: [AVATARS[0].id, AVATARS[1].id],
-    ownedCardStyles: ["classic"],
+    ownedCardFronts: ["classic"],
+    ownedCardBacks: ["classic"],
     ownedTitles: ["novice"],
     ownedReactionPacks: [],
     ownedStickerPacks: [],
     title: "novice",
-    cardStyle: "classic",
+    cardFront: "classic",
+    cardBack: "classic",
     achievements: {},
     unlocked: [],
     createdAt: Date.now(),
@@ -130,16 +133,19 @@ function defaultProfile(session: AuthSession): UserProfile {
 
 /** Backfill fields on older persisted profiles so the app never crashes. */
 function migrateProfile(p: UserProfile): UserProfile {
+  const legacy = p as unknown as { ownedCardStyles?: string[]; cardStyle?: string };
   return {
     ...p,
     plan: p.plan ?? "free",
     ownedAvatars: p.ownedAvatars ?? [AVATARS[0].id],
-    ownedCardStyles: p.ownedCardStyles ?? ["classic"],
+    ownedCardFronts: p.ownedCardFronts ?? ["classic"],
+    ownedCardBacks: p.ownedCardBacks ?? legacy.ownedCardStyles ?? ["classic"],
     ownedTitles: p.ownedTitles ?? ["novice"],
     ownedReactionPacks: p.ownedReactionPacks ?? [],
     ownedStickerPacks: p.ownedStickerPacks ?? [],
     title: p.title ?? "novice",
-    cardStyle: p.cardStyle ?? "classic",
+    cardFront: p.cardFront ?? "classic",
+    cardBack: p.cardBack ?? legacy.cardStyle ?? "classic",
   };
 }
 
@@ -328,7 +334,7 @@ export class MockOnlineService implements OnlineService {
 
   async updateProfile(
     patch: Partial<
-      Pick<UserProfile, "displayName" | "avatar" | "avatarImage" | "title" | "cardStyle">
+      Pick<UserProfile, "displayName" | "avatar" | "avatarImage" | "title" | "cardFront" | "cardBack">
     >
   ) {
     const p = await this.getProfile();
@@ -756,14 +762,22 @@ export class MockOnlineService implements OnlineService {
       price: 500 + i * 150,
       preview: a.emoji,
     }));
-    const cardItems: ShopItem[] = CARD_STYLES.filter((c) => c.price > 0).map((c) => ({
+    const backItems: ShopItem[] = CARD_BACKS.filter((c) => c.price > 0).map((c) => ({
       id: c.id,
-      kind: "cardstyle",
+      kind: "cardback",
       nameFa: c.nameFa,
       nameEn: c.nameEn,
       price: c.price,
       preview: c.accent,
     }));
+    const frontItems: ShopItem[] = CARD_FRONTS.filter((c) => c.price > 0).map((c) => ({
+      id: c.id,
+      kind: "cardfront",
+      nameFa: c.nameFa,
+      nameEn: c.nameEn,
+      price: c.price,
+      preview: c.bg2,
+    }));
     const reactionItems: ShopItem[] = REACTION_PACKS.filter((r) => r.price > 0).map((r) => ({
       id: r.id,
       kind: "reactionpack",
@@ -780,7 +794,7 @@ export class MockOnlineService implements OnlineService {
       price: p.price,
       preview: p.stickers[0], // sticker id; ShopScreen renders via <Sticker>
     }));
-    return [...avatarItems, ...cardItems, ...reactionItems, ...stickerItems];
+    return [...avatarItems, ...frontItems, ...backItems, ...reactionItems, ...stickerItems];
   }
 
   async buyItem(id: string) {
@@ -788,15 +802,15 @@ export class MockOnlineService implements OnlineService {
     const items = await this.getShopItems();
     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)
-        : item.kind === "cardstyle"
-        ? p.ownedCardStyles.includes(id)
-        : item.kind === "reactionpack"
-        ? p.ownedReactionPacks.includes(id)
-        : p.ownedStickerPacks.includes(id);
-    if (owned) return { ok: false, messageFa: "قبلاً خریداری شده", messageEn: "Already owned" };
+    const ownedMap: Record<string, string[]> = {
+      avatar: p.ownedAvatars,
+      cardfront: p.ownedCardFronts,
+      cardback: p.ownedCardBacks,
+      reactionpack: p.ownedReactionPacks,
+      stickerpack: p.ownedStickerPacks,
+    };
+    if (ownedMap[item.kind]?.includes(id))
+      return { ok: false, messageFa: "قبلاً خریداری شده", messageEn: "Already owned" };
     if (p.coins < item.price)
       return { ok: false, messageFa: "سکه کافی نیست", messageEn: "Not enough coins" };
 
@@ -804,8 +818,10 @@ export class MockOnlineService implements OnlineService {
       ...p,
       coins: p.coins - item.price,
       ownedAvatars: item.kind === "avatar" ? [...p.ownedAvatars, id] : p.ownedAvatars,
-      ownedCardStyles:
-        item.kind === "cardstyle" ? [...p.ownedCardStyles, id] : p.ownedCardStyles,
+      ownedCardFronts:
+        item.kind === "cardfront" ? [...p.ownedCardFronts, id] : p.ownedCardFronts,
+      ownedCardBacks:
+        item.kind === "cardback" ? [...p.ownedCardBacks, id] : p.ownedCardBacks,
       ownedReactionPacks:
         item.kind === "reactionpack" ? [...p.ownedReactionPacks, id] : p.ownedReactionPacks,
       ownedStickerPacks: