feat: display optimalSteps and efficiency metrics on scoreboard

- Show optimal steps required for the maze
- Display player efficiency percentage (100% = perfect play)
- Metrics appear after maze loads (when optimalSteps > 0)
- Separated from final score with visual divider
- Helps players understand their navigation performance

example/src/App.tsx

@@ -10,7 +10,7 @@ function App() {
 
   const gameManager = useGame({ cols, rows }, useKeyBindings);
   const { containerRef, gameStatus, scoreManager } = gameManager;
-  const { timeValue, keystrokes, finalScore } = scoreManager;
+  const { timeValue, keystrokes, optimalSteps, efficiency, finalScore } = scoreManager;
 
   const formatTime = (ms: number) => {
     const seconds = Math.floor(ms / 1000);
@@ -33,6 +33,19 @@ function App() {
                <div className="text-muted-foreground">Keystrokes</div>
                <div className="text-lg font-bold">{keystrokes}</div>
              </div>
+             {optimalSteps > 0 && (
+               <>
+                 <div className="w-px h-12 bg-muted-foreground/20" />
+                 <div>
+                   <div className="text-muted-foreground">Optimal Steps</div>
+                   <div className="text-lg font-bold">{optimalSteps}</div>
+                 </div>
+                 <div>
+                   <div className="text-muted-foreground">Efficiency</div>
+                   <div className="text-lg font-bold">{efficiency}%</div>
+                 </div>
+               </>
+             )}
              {gameStatus === "game-won" && finalScore && (
                <>
                  <div className="w-px h-12 bg-muted-foreground/20" />