fix(card-sorting): prevent springs from resetting after animation

Removed dependency array from useSprings that was causing springs to
reinitialize and snap cards back to their initial positions.

Changes:
- Remove userSequence dependency from useSprings
- Add proper dependencies to animation useEffect
- Springs now maintain their animated state

Cards will now stay in their organized grid positions after animating.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx

@@ -104,20 +104,16 @@ export function ResultsPhase() {
     }
   }
 
-  // Create springs for each card
-  const [springs, api] = useSprings(
-    userSequence.length,
-    (index) => {
-      const card = userSequence[index]
-      const initial = getInitialPosition(card.id)
-      return {
-        from: initial,
-        to: initial,
-        config: config.gentle,
-      }
-    },
-    [userSequence]
-  )
+  // Create springs for each card - only initialize once
+  const [springs, api] = useSprings(userSequence.length, (index) => {
+    const card = userSequence[index]
+    const initial = getInitialPosition(card.id)
+    return {
+      from: initial,
+      to: initial,
+      config: config.gentle,
+    }
+  })
 
   // Immediately start animating to grid positions
   useEffect(() => {
@@ -133,7 +129,7 @@ export function ResultsPhase() {
       })
     }, 100)
     return () => clearTimeout(timer)
-  }, [])
+  }, [api, userSequence, state.correctOrder])
 
   // Show corrections after animation completes
   useEffect(() => {