feat(web): add smooth page transitions and WASM loading states

- Implement navigation state tracking with optimistic UI updates
- Add loading spinner and error handling for WASM initialization
- Insert browser yield points during game initialization to prevent freezing
- Redesign leaderboard with tabbed navigation and mock data structure
- Add utility CSS classes for consistent page layouts

web/pages/index/+Layout.tsx

@@ -1,5 +1,3 @@
-import "../../layouts/tailwind.css";
-
 export default function GameLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="bg-black text-yellow-400 h-full flex flex-col overflow-hidden">

web/pages/index/+Page.tsx

@@ -1,18 +1,50 @@
-import { useCallback, useEffect, useState } from "react";
-import { getPacmanWindow } from "@/lib/pacman";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getPacmanWindow, LoadingError } from "@/lib/pacman";
+
+const LOADING_FADE_DURATION = 300;
+const LOADING_TIMEOUT_MS = 15000;
 
 export default function Page() {
   const [gameReady, setGameReady] = useState(false);
   const [gameStarted, setGameStarted] = useState(false);
+  const [loadingVisible, setLoadingVisible] = useState(true);
+  const [loadError, setLoadError] = useState<LoadingError | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Fade out loading overlay when game becomes ready
+  useEffect(() => {
+    if (gameReady && loadingVisible) {
+      const timer = setTimeout(() => {
+        setLoadingVisible(false);
+      }, LOADING_FADE_DURATION);
+      return () => clearTimeout(timer);
+    }
+  }, [gameReady, loadingVisible]);
+
+  // Clear timeout when game is ready or error occurs
+  useEffect(() => {
+    if (gameReady || loadError) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    }
+  }, [gameReady, loadError]);
 
   useEffect(() => {
     const win = getPacmanWindow();
-    
+
     // Always set up the ready callback (restart_game will call it too)
     win.pacmanReady = () => {
       setGameReady(true);
     };
 
+    // Error callback for WASM runtime errors
+    win.pacmanError = (error: LoadingError) => {
+      console.error("Pacman error:", error);
+      setLoadError(error);
+    };
+
     const module = win.Module;
 
     // If Module already exists (returning after navigation),
@@ -27,6 +59,7 @@ export default function Page() {
     const canvas = document.getElementById("canvas") as HTMLCanvasElement | null;
     if (!canvas) {
       console.error("Canvas element not found");
+      setLoadError({ type: "runtime", message: "Canvas element not found" });
       return;
     }
 
@@ -36,15 +69,36 @@ export default function Page() {
         return path.startsWith("/") ? path : `/${path}`;
       },
       preRun: [],
+      // Emscripten calls this on fatal errors (abort/trap/etc)
+      onAbort: (what: unknown) => {
+        const message = typeof what === "string" ? what : "WebAssembly execution aborted";
+        console.error("WASM abort:", what);
+        setLoadError({ type: "runtime", message });
+      },
     };
 
     const script = document.createElement("script");
     script.src = "/pacman.js";
     script.async = false;
+
+    // Handle script load errors
+    script.onerror = () => {
+      setLoadError({ type: "script", message: "Failed to load game script" });
+    };
+
     document.body.appendChild(script);
 
+    // Set up loading timeout - the separate effect clears this if game loads successfully
+    timeoutRef.current = setTimeout(() => {
+      setLoadError((prev) => prev ?? { type: "timeout" });
+    }, LOADING_TIMEOUT_MS);
+
     return () => {
       delete win.pacmanReady;
+      delete win.pacmanError;
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, []);
 
@@ -81,12 +135,52 @@ export default function Page() {
       >
         <canvas id="canvas" className="w-full h-full" />
 
+        {/* Loading overlay - CSS animation continues during main thread blocking */}
+        {loadingVisible && (
+          <div
+            className="absolute inset-0 flex flex-col items-center justify-center bg-black/80 transition-opacity"
+            style={{
+              transitionDuration: `${LOADING_FADE_DURATION}ms`,
+              opacity: gameReady ? 0 : 1,
+            }}
+          >
+            {loadError ? (
+              <>
+                <div className="error-indicator" />
+                <span className="text-red-500 text-2xl mt-4 font-semibold">
+                  {loadError.type === "timeout"
+                    ? "Loading timed out"
+                    : loadError.type === "script"
+                      ? "Failed to load"
+                      : "Error occurred"}
+                </span>
+                <span className="text-gray-400 text-sm mt-2 max-w-xs text-center">
+                  {loadError.type === "timeout"
+                    ? "The game took too long to load. Please refresh the page."
+                    : loadError.type === "script"
+                      ? "Could not load game files. Check your connection and refresh."
+                      : loadError.message}
+                </span>
+                <button
+                  onClick={() => window.location.reload()}
+                  className="mt-4 px-4 py-2 bg-yellow-400 text-black font-semibold rounded hover:bg-yellow-300 transition-colors"
+                >
+                  Reload
+                </button>
+              </>
+            ) : (
+              <>
+                <div className="loading-spinner" />
+                <span className="text-yellow-400 text-2xl mt-4">Loading...</span>
+              </>
+            )}
+          </div>
+        )}
+
         {/* Click to Start overlay */}
         {gameReady && !gameStarted && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/60 cursor-pointer">
-            <span className="text-yellow-400 text-5xl font-bold">
-              Click to Start
-            </span>
+            <span className="text-yellow-400 text-5xl font-bold">Click to Start</span>
           </div>
         )}
       </div>