Refine animation sequence

Adjusted the animation sequence to first sort the columns, and then fade the all-red tower to black.

src/components/BulgarianSolitaire.tsx

@@ -285,14 +285,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
       await sleep(500); // Show move
       await waitForUnpause();
 
-      // Phase 4: Fade from red to normal
-      setAnimationPhase('fade-from-red');
-      await sleep(500); // Fade from red animation
-      await waitForUnpause();
-
-      // Clear highlighting and animation
-      setHighlightedBoxes(new Set());
-      setIsAnimating(false);
+      // Phase 4: Sort columns while boxes are still red
       setAnimationPhase('sorting');
 
       // Sort columns by height (tallest to left) with smooth transition
@@ -319,7 +312,18 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
       }));
 
       await sleep(800); // Wait for sorting animation to complete
+      await waitForUnpause();
+
+      // Phase 5: Fade from red to normal
+      setAnimationPhase('fade-from-red');
+      await sleep(500); // Fade from red animation
+      await waitForUnpause();
+
+      // Clear highlighting and animation
+      setHighlightedBoxes(new Set());
+      setIsAnimating(false);
       setAnimationPhase('idle');
+
       await waitForUnpause(); // Check for pause again
     }
 
@@ -478,7 +482,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
                   className={`w-8 h-8 rounded cursor-move transition-all duration-300 flex items-center justify-center text-xs font-medium mx-auto ${
                     highlightedBoxes.has(boxId) && animationPhase === 'fade-to-red'
                       ? 'animate-fade-to-red shadow-lg text-white'
-                      : highlightedBoxes.has(boxId) && (animationPhase === 'red-pause' || animationPhase === 'moving')
+                      : highlightedBoxes.has(boxId) && (animationPhase === 'red-pause' || animationPhase === 'moving' || animationPhase === 'sorting')
                       ? 'bg-red-500 text-white shadow-lg'
                       : highlightedBoxes.has(boxId) && animationPhase === 'fade-from-red'
                       ? 'animate-fade-from-red shadow-lg'