diff --git a/src/components/online/CelebrationOverlay.tsx b/src/components/online/CelebrationOverlay.tsx
index 8e3b033..e3e8978 100644
--- a/src/components/online/CelebrationOverlay.tsx
+++ b/src/components/online/CelebrationOverlay.tsx
@@ -3,7 +3,7 @@
 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 { useCelebrationStore, type Celebration } from "@/lib/celebration-store";
 import { useI18n } from "@/lib/i18n";
 import { sound } from "@/lib/sound";
 import { stickerPackForAchievement } from "@/lib/online/gamification";
@@ -45,15 +45,17 @@ export function CelebrationOverlay() {
 
   return (
     <AnimatePresence>
-      {current && <Card key={current.id} />}
+      {current && <Card key={current.id} c={current} />}
     </AnimatePresence>
   );
 }
 
-function Card() {
+// Takes the celebration as a PROP (not from the store) so it keeps its data while
+// AnimatePresence runs the exit animation after dismiss() sets `current` to null.
+function Card({ c }: { c: Celebration }) {
   const { t, locale } = useI18n();
-  const current = useCelebrationStore((s) => s.current)!;
   const dismiss = useCelebrationStore((s) => s.dismiss);
+  const current = c;
   const leveled = (current.levelAfter ?? 0) > (current.levelBefore ?? 0);
   const xp = useCountUp(current.xpGained ?? 0, 900, current.variant === "xp");
   const coins = useCountUp(current.coins ?? 0, 1000, (current.coins ?? 0) > 0);