fix(card-sorting): keep arrow sequence numbers upright

Counter-rotate sequence number badges on arrows to keep them always
upright and readable:

- Change badge div to animated.div to access springProps
- Apply counter-rotation: rotate(-angle) to cancel parent rotation
- Combine with existing translate(-50%, -50%) centering
- Numbers now stay horizontal regardless of arrow angle

The sequence number badges were rotating with the arrow lines,
making them hard to read at steep angles. Now they always appear
upright for better readability.

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

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

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

@@ -236,12 +236,13 @@ function AnimatedArrow({
           }}
         />
         {/* Sequence number badge */}
-        <div
+        <animated.div
           style={{
             position: 'absolute',
             left: '50%',
             top: '50%',
-            transform: 'translate(-50%, -50%)',
+            // Counter-rotate to keep number upright, plus center translation
+            transform: springProps.angle.to((val) => `translate(-50%, -50%) rotate(${-val}deg)`),
             background: isCorrect ? 'rgba(34, 197, 94, 0.95)' : 'rgba(251, 146, 60, 0.95)',
             color: 'white',
             borderRadius: '50%',
@@ -258,7 +259,7 @@ function AnimatedArrow({
           }}
         >
           {sequenceNumber}
-        </div>
+        </animated.div>
       </div>
     </animated.div>
   )