Align status to the right

Right-align the status element in the Knights Puzzle.

src/components/KnightsPuzzle.tsx

@@ -183,17 +183,15 @@ const KnightsPuzzle = ({ showSocialShare = false }: KnightsPuzzleProps) => {
         </p>
       </div>
 
-      {/* Blue: Number of moves */}
-      <div className="text-lg">
+      {/* Blue and Orange: Moves (left) and Status (right) on same line */}
+      <div className="flex justify-between items-center text-lg">
+        <div>
           <span className="font-semibold">Moves: </span>
           <span className="font-mono text-primary">{moveCount}</span>
         </div>
-
-      {/* Orange: Status (without heading) */}
-      <div className="text-lg">
-        <span className="font-semibold">
+        <div className="font-semibold">
           {isComplete ? "🎉 Puzzle Solved!" : "🎯 In Progress"}
-        </span>
+        </div>
       </div>
 
       {/* Yellow: Main interactive with controls */}