Celebration animations for purchases, XP gains & achievement unlocks

- New global celebration system: celebration-store (queue) + CelebrationOverlay
  (animated: count-up XP, filling bar, level-up pop, achievement cards; plays
  levelUp/award sounds; tap or auto-dismiss). Rendered in page.tsx.
- Shop: every purchase now celebrates — XP packs animate XP gain + level-up,
  cosmetics show a "purchased!" pop. Newly-unlocked achievements (diffed from
  the profile before/after) animate too.
- XP purchases now actually evaluate achievements: gamification.evaluateAchievements
  (client) + Gamification.EvaluateAchievements (server, called in ShopBuy xp path)
  unlock level milestones + grant their coins.

Verified live: buying XP took L1→L5, unlocked level_5 server-side and credited its
reward. tsc + dotnet + next build clean; images rebuilt :1500/:1505.

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

src/components/online/CelebrationOverlay.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Coins, Sparkles, Star, TrendingUp } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useCelebrationStore } from "@/lib/celebration-store";
+import { useI18n } from "@/lib/i18n";
+import { sound } from "@/lib/sound";
+
+function useCountUp(target: number, ms = 900, run = true) {
+  const [v, setV] = useState(0);
+  const raf = useRef<number | null>(null);
+  useEffect(() => {
+    if (!run) return;
+    const start = performance.now();
+    const tick = (now: number) => {
+      const p = Math.min(1, (now - start) / ms);
+      // ease-out
+      setV(Math.round(target * (1 - Math.pow(1 - p, 3))));
+      if (p < 1) raf.current = requestAnimationFrame(tick);
+    };
+    raf.current = requestAnimationFrame(tick);
+    return () => { if (raf.current) cancelAnimationFrame(raf.current); };
+  }, [target, ms, run]);
+  return v;
+}
+
+/** Global animated celebration for purchases / XP gains / achievement unlocks. */
+export function CelebrationOverlay() {
+  const current = useCelebrationStore((s) => s.current);
+  const dismiss = useCelebrationStore((s) => s.dismiss);
+
+  useEffect(() => {
+    if (!current) return;
+    const leveled = (current.levelAfter ?? 0) > (current.levelBefore ?? 0);
+    const cue = setTimeout(() => {
+      if (leveled) sound.play("levelUp");
+      else if (current.achievements?.length) sound.play("award");
+    }, 350);
+    const auto = setTimeout(() => dismiss(), current.achievements?.length ? 5200 : 3600);
+    return () => { clearTimeout(cue); clearTimeout(auto); };
+  }, [current, dismiss]);
+
+  return (
+    <AnimatePresence>
+      {current && <Card key={current.id} />}
+    </AnimatePresence>
+  );
+}
+
+function Card() {
+  const { t, locale } = useI18n();
+  const current = useCelebrationStore((s) => s.current)!;
+  const dismiss = useCelebrationStore((s) => s.dismiss);
+  const leveled = (current.levelAfter ?? 0) > (current.levelBefore ?? 0);
+  const xp = useCountUp(current.xpGained ?? 0, 900, current.variant === "xp");
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      onClick={dismiss}
+      className="fixed inset-0 z-[80] flex items-center justify-center bg-navy-950/80 backdrop-blur-sm p-6"
+    >
+      <motion.div
+        initial={{ scale: 0.8, y: 20 }}
+        animate={{ scale: 1, y: 0 }}
+        exit={{ scale: 0.9, opacity: 0 }}
+        transition={{ type: "spring", stiffness: 200, damping: 18 }}
+        onClick={(e) => e.stopPropagation()}
+        className="glass rounded-3xl p-7 w-full max-w-xs text-center relative overflow-hidden"
+      >
+        {/* radiating glow */}
+        <div className="pointer-events-none absolute -inset-10 bg-gold-500/15 blur-3xl" />
+
+        <motion.div
+          initial={{ scale: 0, rotate: -20 }}
+          animate={{ scale: 1, rotate: 0 }}
+          transition={{ type: "spring", stiffness: 180, delay: 0.1 }}
+          className="relative text-6xl mb-1"
+        >
+          {current.icon ?? (current.variant === "xp" ? "⚡" : "🛍️")}
+        </motion.div>
+
+        {current.title && (
+          <h2 className="relative gold-text text-xl font-black mt-1">{current.title}</h2>
+        )}
+
+        {/* XP gain */}
+        {current.variant === "xp" && (current.xpGained ?? 0) > 0 && (
+          <div className="relative mt-3">
+            <div className="inline-flex items-center gap-2 btn-gold rounded-full px-5 py-2 font-black text-lg">
+              <Star className="size-5" fill="currentColor" />
+              +{xp.toLocaleString()} XP
+            </div>
+            <motion.div
+              className="mt-3 h-2 rounded-full bg-navy-900 overflow-hidden"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+            >
+              <motion.div
+                className="h-full bg-gradient-to-r from-gold-500 to-gold-300"
+                initial={{ width: "0%" }}
+                animate={{ width: "100%" }}
+                transition={{ duration: 0.9, ease: "easeOut" }}
+              />
+            </motion.div>
+          </div>
+        )}
+
+        {/* level up */}
+        {leveled && (
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ type: "spring", stiffness: 220, delay: 0.5 }}
+            className="relative mt-4 inline-flex items-center gap-2 rounded-full bg-teal-500/20 text-teal-200 px-5 py-1.5 font-black"
+          >
+            <TrendingUp className="size-4" />
+            {t("reward.levelUp")} → {current.levelAfter}
+          </motion.div>
+        )}
+
+        {/* achievements */}
+        {current.achievements && current.achievements.length > 0 && (
+          <div className="relative mt-4 space-y-2">
+            {current.achievements.map((a, i) => (
+              <motion.div
+                key={a.id}
+                initial={{ opacity: 0, x: locale === "fa" ? 24 : -24 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.6 + i * 0.15, type: "spring", stiffness: 200 }}
+                className="glass rounded-xl px-3 py-2 flex items-center gap-2 text-start"
+              >
+                <span className="text-2xl">{a.icon}</span>
+                <span className="flex-1 min-w-0">
+                  <span className="block text-[10px] text-gold-400">{t("reward.newAchievement")}</span>
+                  <span className="block text-sm font-semibold text-cream truncate">
+                    {locale === "fa" ? a.nameFa : a.nameEn}
+                  </span>
+                </span>
+                <span className="text-xs text-gold-300 flex items-center gap-1 shrink-0">
+                  +{a.coinReward}
+                  <Coins className="size-3" />
+                </span>
+              </motion.div>
+            ))}
+          </div>
+        )}
+
+        {current.variant === "purchase" && !current.achievements?.length && (
+          <p className="relative text-teal-300 font-bold text-sm mt-2 flex items-center justify-center gap-1.5">
+            <Sparkles className="size-4" />
+            {t("celebrate.purchased")}
+          </p>
+        )}
+
+        <button onClick={dismiss} className="relative btn-gold w-full rounded-xl py-2.5 mt-6 font-bold">
+          {t("reward.continue")}
+        </button>
+      </motion.div>
+    </motion.div>
+  );
+}

src/components/screens/ShopScreen.tsx

@@ -9,7 +9,9 @@ import { useSessionStore } from "@/lib/session-store";
 import { useI18n } from "@/lib/i18n";
 import { getService } from "@/lib/online/service";
 import { sound } from "@/lib/sound";
-import { ShopItem } from "@/lib/online/types";
+import { achievementById } from "@/lib/online/gamification";
+import { celebrate } from "@/lib/celebration-store";
+import { AchievementUnlock, ShopItem } from "@/lib/online/types";
 import { cn } from "@/lib/cn";
 
 /** The product artwork, used on the card and (bigger) in the detail sheet. */
@@ -75,11 +77,40 @@ export function ShopScreen() {
   };
 
   const buy = async (item: ShopItem) => {
+    const before = profile;
     const res = await getService().buyItem(item.id);
     if (res.ok && res.profile) {
-      setProfile(res.profile);
+      const after = res.profile;
+      setProfile(after);
       sound.play("purchase");
       setDetail(null);
+
+      // newly-unlocked achievements (e.g. an XP pack crossing a level milestone)
+      const newAch: AchievementUnlock[] = after.unlocked
+        .filter((id) => !before.unlocked.includes(id))
+        .map((id) => achievementById(id))
+        .filter((d): d is NonNullable<typeof d> => !!d)
+        .map((d) => ({ id: d.id, nameFa: d.nameFa, nameEn: d.nameEn, icon: d.icon, coinReward: d.coinReward }));
+
+      if (item.kind === "xp") {
+        celebrate({
+          variant: "xp",
+          icon: "⚡",
+          title: locale === "fa" ? "امتیاز تجربه" : "Experience",
+          xpGained: item.xp ?? 0,
+          levelBefore: before.level,
+          levelAfter: after.level,
+          achievements: newAch.length ? newAch : undefined,
+        });
+      } else {
+        celebrate({
+          variant: "purchase",
+          // avatar/reaction previews are emojis; others fall back to the default glyph
+          icon: item.kind === "avatar" || item.kind === "reactionpack" ? item.preview : undefined,
+          title: locale === "fa" ? item.nameFa : item.nameEn,
+          achievements: newAch.length ? newAch : undefined,
+        });
+      }
     } else {
       setMsg(locale === "fa" ? res.messageFa : res.messageEn);
       setTimeout(() => setMsg(""), 1800);