Add ROM upload, local table library, engine bump, and UX/responsiveness fixes

- Bump @valknar/vpinball-wasm to 0.3.2 (PinMAME ROM support, MsgBox fix)
- Add optional PinMAME ROM .zip upload alongside .vpx tables
- Persist uploaded tables/ROMs in IndexedDB so users don't have to
  re-upload on later visits, with a library list on the landing page
- Fix Insert Coin key mismatch with the engine's real coin-door gating
  (now bound to 4, matching the shared table scripts) and surface it
  in the controls legend and "Tap to Start" hint
- Make the landing page, staging panel, and in-game HUD responsive for
  portrait phone widths; drop the landscape hint since portrait plays fine
- Replace the separate STATS HUD toggle with an FPS row in the info panel

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01N9JmzRBZenapVkFWjw9jmG

components/hud/CoinDoorHud.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import type { PinballInstance } from "@valknar/vpinball-wasm";
 import { useIdleTimer } from "./useIdleTimer";
-import StatsReadout from "./StatsReadout";
 import GameInfoPanel from "@/components/GameInfoPanel";
 import type { TableInfo } from "@/lib/pinball/types";
 
@@ -16,10 +15,12 @@ export interface CoinDoorHudProps {
 
 function HudButton({
   label,
+  shortLabel,
   active,
   onClick,
 }: {
   label: string;
+  shortLabel?: string;
   active?: boolean;
   onClick: () => void;
 }) {
@@ -28,13 +29,20 @@ function HudButton({
       type="button"
       onClick={onClick}
       aria-pressed={active}
-      className={`rounded-sm border px-3 py-1.5 font-mono text-xs tracking-widest transition ${
+      className={`rounded-sm border px-2 py-1 font-mono text-xs tracking-widest transition sm:px-3 sm:py-1.5 ${
         active
           ? "border-marquee bg-marquee/20 text-marquee"
           : "border-chrome/40 bg-black/30 text-chrome hover:border-arc hover:text-arc"
       }`}
     >
-      {label}
+      {shortLabel ? (
+        <>
+          <span className="sm:hidden">{shortLabel}</span>
+          <span className="hidden sm:inline">{label}</span>
+        </>
+      ) : (
+        label
+      )}
     </button>
   );
 }
@@ -42,7 +50,6 @@ function HudButton({
 export default function CoinDoorHud({ instanceRef, tableInfo, loadTimeMs }: CoinDoorHudProps) {
   const router = useRouter();
   const isIdle = useIdleTimer(3000);
-  const [showStats, setShowStats] = useState(false);
   const [showInfo, setShowInfo] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
@@ -69,22 +76,21 @@ export default function CoinDoorHud({ instanceRef, tableInfo, loadTimeMs }: Coin
     <>
       <div
         data-hud
-        className={`absolute inset-x-0 top-0 z-10 flex items-center justify-between gap-3 border-b border-chrome/30 bg-ash/90 px-4 py-2 backdrop-blur transition-opacity duration-300 ${
+        className={`absolute inset-x-0 top-0 z-10 flex items-center justify-between gap-1.5 border-b border-chrome/30 bg-ash/90 px-2 py-2 backdrop-blur transition-opacity duration-300 sm:gap-3 sm:px-4 ${
           isIdle ? "pointer-events-none opacity-0" : "opacity-100"
         }`}
       >
-        <div className="flex items-center gap-2">
-          <span className="font-display text-lg tracking-wide text-marquee">VPINBALL</span>
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="shrink-0 font-display text-lg tracking-wide text-marquee">VPINBALL</span>
           <span className="hidden truncate font-mono text-xs text-chrome sm:inline">
             {tableInfo.name}
           </span>
         </div>
-        <div className="flex items-center gap-2">
-          {showStats && <StatsReadout />}
+        <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
           <HudButton label="INFO" active={showInfo} onClick={() => setShowInfo((v) => !v)} />
-          <HudButton label="STATS" active={showStats} onClick={() => setShowStats((v) => !v)} />
           <HudButton
             label={isFullscreen ? "EXIT FS" : "FULLSCREEN"}
+            shortLabel={isFullscreen ? "EXIT" : "FS"}
             active={isFullscreen}
             onClick={handleFullscreen}
           />
@@ -93,7 +99,7 @@ export default function CoinDoorHud({ instanceRef, tableInfo, loadTimeMs }: Coin
       </div>
 
       {showInfo && (
-        <div className="absolute right-4 top-16 z-10">
+        <div className="absolute inset-x-2 top-14 z-10 sm:inset-x-auto sm:right-4 sm:top-16">
           <GameInfoPanel tableInfo={tableInfo} loadTimeMs={loadTimeMs} />
         </div>
       )}

components/hud/StatsReadout.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-/** Self-contained rAF-based FPS counter — the engine exposes no perf API of its own. */
-export default function StatsReadout() {
-  const [fps, setFps] = useState<number | null>(null);
-
-  useEffect(() => {
-    let frameCount = 0;
-    let windowStart = performance.now();
-    let raf = 0;
-
-    const tick = (now: number) => {
-      frameCount += 1;
-      const elapsed = now - windowStart;
-      if (elapsed >= 500) {
-        setFps(Math.round((frameCount * 1000) / elapsed));
-        frameCount = 0;
-        windowStart = now;
-      }
-      raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-
-    return () => cancelAnimationFrame(raf);
-  }, []);
-
-  return (
-    <div className="flex items-baseline gap-2 rounded border border-chrome/30 bg-black/40 px-3 py-1.5 font-mono">
-      <span className="text-xs tracking-widest text-chrome">FPS</span>
-      <span className="text-lg tabular-nums text-arc">{fps ?? "--"}</span>
-    </div>
-  );
-}