koin.js 1.0.14 → 1.0.16

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import React2, { memo, useState, useEffect, useRef, createContext, useMemo, useCallback, useContext } from 'react';
-import { Gauge, Play, Pause, RotateCcw, Rewind, Save, Download, Camera, Video, Circle, Monitor, ChevronDown, RefreshCw, HelpCircle, Maximize, Gamepad2, Joystick, Code, Settings, Power, Square, Keyboard, X, ChevronUp, VolumeX, Volume1, Volume2, Loader2, Trophy, AlertTriangle, Minimize2, List, PauseCircle, Check, Clock, Move, User, Copy, Lock, Zap, HardDrive, Trash2, Cpu, AlertCircle, FileCode, Globe, ExternalLink, EyeOff, Eye, Shield, CheckCircle, LogOut, Info, XCircle } from 'lucide-react';
+import { Gauge, Play, Pause, RotateCcw, Rewind, Save, Download, Camera, Video, Circle, Monitor, ChevronDown, RefreshCw, HelpCircle, Maximize, Gamepad2, Joystick, Code, Settings, Power, Square, Keyboard, ChevronUp, VolumeX, Volume1, Volume2, Loader2, Trophy, X, AlertTriangle, Minimize2, List, PauseCircle, Check, Clock, Lock, Unlock, Move, User, Copy, Zap, HardDrive, Trash2, Cpu, AlertCircle, FileCode, Globe, ExternalLink, EyeOff, Eye, Shield, CheckCircle, LogOut, Info, XCircle } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { Nostalgist } from 'nostalgist';
@@ -821,7 +821,7 @@ var SaveLoadControls = memo(function SaveLoadControls2({
       {
         progress: autoSaveProgress,
         state: autoSavePaused ? "idle" : autoSaveState,
-        intervalSeconds: 20,
+        intervalSeconds: 60,
         isPaused: autoSavePaused,
         onClick: onAutoSaveToggle
       }
@@ -1441,6 +1441,40 @@ var PlayerControls = memo(function PlayerControls2({
   ] });
 });
 var PlayerControls_default = PlayerControls;
+function useAnimatedVisibility({
+  exitDuration = 200,
+  onExit,
+  autoDismissMs
+} = {}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      setIsVisible(true);
+    });
+  }, []);
+  useEffect(() => {
+    if (!autoDismissMs) return;
+    const timer = setTimeout(() => {
+      triggerExit();
+    }, autoDismissMs);
+    return () => clearTimeout(timer);
+  }, [autoDismissMs]);
+  const triggerExit = useCallback(() => {
+    if (isExiting) return;
+    setIsExiting(true);
+    setTimeout(() => {
+      onExit?.();
+    }, exitDuration);
+  }, [isExiting, exitDuration, onExit]);
+  const slideInRightClasses = isVisible && !isExiting ? "translate-x-0 opacity-100" : "translate-x-full opacity-0";
+  return {
+    isVisible,
+    isExiting,
+    triggerExit,
+    slideInRightClasses
+  };
+}
 var TOAST_CONFIGS = {
   success: {
     icon: CheckCircle,
@@ -1485,32 +1519,20 @@ var TOAST_CONFIGS = {
   }
 };
 function ToastItem({ toast, onDismiss }) {
-  const [isVisible, setIsVisible] = useState(false);
-  const [isExiting, setIsExiting] = useState(false);
+  const { slideInRightClasses, triggerExit } = useAnimatedVisibility({
+    exitDuration: 200,
+    onExit: () => onDismiss?.(toast.id)
+  });
   const config = TOAST_CONFIGS[toast.type];
   const IconComponent = config.icon;
-  useEffect(() => {
-    requestAnimationFrame(() => {
-      setIsVisible(true);
-    });
-  }, []);
-  const handleDismiss = () => {
-    setIsExiting(true);
-    setTimeout(() => {
-      onDismiss?.(toast.id);
-    }, 200);
-  };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `
-        relative transition-all duration-300 ease-out
-        ${isVisible && !isExiting ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"}
-      `,
+      className: `relative transition-all duration-300 ease-out ${slideInRightClasses}`,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "relative w-[320px]",
+          className: "relative w-[320px] pointer-events-auto",
           style: {
             backgroundColor: config.bgColor,
             border: `2px solid ${config.borderColor}`,
@@ -1545,7 +1567,7 @@ function ToastItem({ toast, onDismiss }) {
                 {
                   onClick: () => {
                     toast.action?.onClick();
-                    handleDismiss();
+                    triggerExit();
                   },
                   className: "flex-shrink-0 text-[9px] font-black uppercase tracking-wider px-2 py-1 transition-all hover:-translate-y-0.5 active:translate-y-0",
                   style: {
@@ -1559,7 +1581,7 @@ function ToastItem({ toast, onDismiss }) {
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: handleDismiss,
+                  onClick: triggerExit,
                   className: "flex-shrink-0 p-0.5 text-gray-500 hover:text-white transition-colors",
                   children: /* @__PURE__ */ jsx(X, { size: 14 })
                 }
@@ -1932,6 +1954,67 @@ var RecordingIndicator = memo(function RecordingIndicator2({
   );
 });
 var RecordingIndicator_default = RecordingIndicator;
+var MAX_WIDTH_CLASSES = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg"
+};
+function ModalShell({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  icon,
+  children,
+  footer,
+  maxWidth = "lg",
+  systemColor,
+  closeOnBackdrop = true
+}) {
+  if (!isOpen) return null;
+  const handleBackdropClick = () => {
+    if (closeOnBackdrop) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/80 backdrop-blur-sm",
+        onClick: handleBackdropClick
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative bg-gray-900 border border-retro-primary/30 rounded-xl shadow-2xl w-full ${MAX_WIDTH_CLASSES[maxWidth]} mx-4 overflow-hidden`,
+        style: systemColor ? { borderColor: `${systemColor}30` } : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/10 bg-black/50", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("div", { style: systemColor ? { color: systemColor } : void 0, children: icon }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-white", children: title }),
+                subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: subtitle })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors",
+                children: /* @__PURE__ */ jsx(X, { size: 20 })
+              }
+            )
+          ] }),
+          children,
+          footer && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4 bg-black/30 border-t border-white/10", children: footer })
+        ]
+      }
+    )
+  ] });
+}
 var ShortcutsModal = memo(function ShortcutsModal2({
   isOpen,
   onClose,
@@ -1960,90 +2043,55 @@ var ShortcutsModal = memo(function ShortcutsModal2({
       ]
     }
   ], [t]);
-  if (!isOpen) return null;
   return /* @__PURE__ */ jsx(
-    "div",
+    ModalShell,
     {
-      className: "absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm",
-      onClick: onClose,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "max-w-sm w-full mx-4 bg-black/95 border rounded-lg overflow-hidden",
-          style: { borderColor: `${systemColor}40` },
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between px-4 py-3 border-b",
-                style: { borderColor: `${systemColor}20`, backgroundColor: `${systemColor}10` },
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx(Keyboard, { size: 18, style: { color: systemColor } }),
-                    /* @__PURE__ */ jsx("span", { className: "font-bold text-white", children: t.modals.shortcuts.playerShortcuts })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: onClose,
-                      className: "p-1 rounded hover:bg-white/10 transition-colors",
-                      children: /* @__PURE__ */ jsx(X, { size: 18, className: "text-white/60 hover:text-white" })
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
-              shortcuts.map(({ section, items }) => /* @__PURE__ */ jsxs("div", { children: [
+      isOpen,
+      onClose,
+      title: t.modals.shortcuts.playerShortcuts,
+      icon: /* @__PURE__ */ jsx(Keyboard, { size: 20, style: { color: systemColor } }),
+      maxWidth: "sm",
+      systemColor,
+      footer: /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 w-full text-center", children: t.modals.shortcuts.pressEsc }),
+      children: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+        shortcuts.map(({ section, items }) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: "text-[10px] font-bold uppercase tracking-wider mb-1.5 opacity-60",
+              style: { color: systemColor },
+              children: section
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "space-y-1", children: items.map(({ key, description }) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between text-sm",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-white/70", children: description }),
                 /* @__PURE__ */ jsx(
-                  "h3",
+                  "kbd",
                   {
-                    className: "text-[10px] font-bold uppercase tracking-wider mb-1.5 opacity-60",
-                    style: { color: systemColor },
-                    children: section
+                    className: "px-2 py-0.5 rounded text-xs font-mono font-bold",
+                    style: {
+                      backgroundColor: `${systemColor}20`,
+                      color: systemColor,
+                      border: `1px solid ${systemColor}40`
+                    },
+                    children: key
                   }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "space-y-1", children: items.map(({ key, description }) => /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-center justify-between text-sm",
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-white/70", children: description }),
-                      /* @__PURE__ */ jsx(
-                        "kbd",
-                        {
-                          className: "px-2 py-0.5 rounded text-xs font-mono font-bold",
-                          style: {
-                            backgroundColor: `${systemColor}20`,
-                            color: systemColor,
-                            border: `1px solid ${systemColor}40`
-                          },
-                          children: key
-                        }
-                      )
-                    ]
-                  },
-                  key
-                )) })
-              ] }, section)),
-              /* @__PURE__ */ jsxs("div", { className: "pt-2 border-t border-white/10 text-xs text-white/40", children: [
-                "Game controls can be configured in ",
-                /* @__PURE__ */ jsx("strong", { className: "text-white/60", children: t.controls.keys }),
-                " settings."
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "px-4 py-2 text-center text-xs text-white/40 border-t",
-                style: { borderColor: `${systemColor}20` },
-                children: t.modals.shortcuts.pressEsc
-              }
-            )
-          ]
-        }
-      )
+                )
+              ]
+            },
+            key
+          )) })
+        ] }, section)),
+        /* @__PURE__ */ jsxs("div", { className: "pt-2 border-t border-white/10 text-xs text-white/40", children: [
+          "Game controls can be configured in ",
+          /* @__PURE__ */ jsx("strong", { className: "text-white/60", children: t.controls.keys }),
+          " settings."
+        ] })
+      ] })
     }
   );
 });
@@ -2640,6 +2688,39 @@ function useTouchHandlers({
     cleanup
   };
 }
+function useTouchEvents(ref, handlers, options = {}) {
+  const { cleanup, passive = false } = options;
+  const handlersRef = useRef(handlers);
+  handlersRef.current = handlers;
+  const handleTouchStart = useCallback((e) => {
+    handlersRef.current.onTouchStart?.(e);
+  }, []);
+  const handleTouchMove = useCallback((e) => {
+    handlersRef.current.onTouchMove?.(e);
+  }, []);
+  const handleTouchEnd = useCallback((e) => {
+    handlersRef.current.onTouchEnd?.(e);
+  }, []);
+  const handleTouchCancel = useCallback((e) => {
+    handlersRef.current.onTouchCancel?.(e);
+  }, []);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const listenerOptions = { passive };
+    element.addEventListener("touchstart", handleTouchStart, listenerOptions);
+    element.addEventListener("touchmove", handleTouchMove, listenerOptions);
+    element.addEventListener("touchend", handleTouchEnd, listenerOptions);
+    element.addEventListener("touchcancel", handleTouchCancel, listenerOptions);
+    return () => {
+      element.removeEventListener("touchstart", handleTouchStart);
+      element.removeEventListener("touchmove", handleTouchMove);
+      element.removeEventListener("touchend", handleTouchEnd);
+      element.removeEventListener("touchcancel", handleTouchCancel);
+      cleanup?.();
+    };
+  }, [ref, passive, cleanup, handleTouchStart, handleTouchMove, handleTouchEnd, handleTouchCancel]);
+}
 
 // src/components/VirtualController/utils/buttonStyles.ts
 var DEFAULT_FACE = {
@@ -2797,21 +2878,12 @@ var VirtualButton = React2.memo(function VirtualButton2({
     onRelease,
     onPositionChange
   });
-  useEffect(() => {
-    const button = buttonRef.current;
-    if (!button) return;
-    button.addEventListener("touchstart", handleTouchStart, { passive: false });
-    button.addEventListener("touchmove", handleTouchMove, { passive: false });
-    button.addEventListener("touchend", handleTouchEnd, { passive: false });
-    button.addEventListener("touchcancel", handleTouchCancel, { passive: false });
-    return () => {
-      button.removeEventListener("touchstart", handleTouchStart);
-      button.removeEventListener("touchmove", handleTouchMove);
-      button.removeEventListener("touchend", handleTouchEnd);
-      button.removeEventListener("touchcancel", handleTouchCancel);
-      cleanup();
-    };
-  }, [handleTouchStart, handleTouchMove, handleTouchEnd, handleTouchCancel, cleanup]);
+  useTouchEvents(buttonRef, {
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+    onTouchCancel: handleTouchCancel
+  }, { cleanup });
   const leftPercent = displayX / 100 * containerWidth - config.size / 2;
   const topPercent = displayY / 100 * containerHeight - config.size / 2;
   const transform = `translate3d(${leftPercent.toFixed(1)}px, ${topPercent.toFixed(1)}px, 0)`;
@@ -3487,7 +3559,7 @@ function dispatchKeyboardEvent(type, code) {
   canvas.dispatchEvent(event);
   return true;
 }
-var CENTER_TOUCH_RADIUS = 0.25;
+var CENTER_TOUCH_RADIUS = 0.35;
 var Dpad = React2.memo(function Dpad2({
   size = 180,
   x,
@@ -3629,14 +3701,22 @@ var Dpad = React2.memo(function Dpad2({
     if (!touch) return;
     if (drag.isDragging) {
       drag.handleDragMove(touch.clientX, touch.clientY);
+    } else if (onPositionChange) {
+      const startedDrag = drag.checkMoveThreshold(touch.clientX, touch.clientY);
+      if (!startedDrag) {
+        drag.clearDragTimer();
+        const rect = dpadRef.current?.getBoundingClientRect();
+        if (rect) {
+          updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
+        }
+      }
     } else {
       const rect = dpadRef.current?.getBoundingClientRect();
       if (rect) {
-        drag.clearDragTimer();
         updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
       }
     }
-  }, [drag, getDirectionsFromTouch, updateDirections]);
+  }, [drag, getDirectionsFromTouch, updateDirections, onPositionChange]);
   const handleTouchEnd = useCallback((e) => {
     e.preventDefault();
     drag.clearDragTimer();
@@ -3661,21 +3741,12 @@ var Dpad = React2.memo(function Dpad2({
       }
     }
   }, [getKeyCode, updateVisuals, drag]);
-  useEffect(() => {
-    const dpad = dpadRef.current;
-    if (!dpad) return;
-    dpad.addEventListener("touchstart", handleTouchStart, { passive: false });
-    dpad.addEventListener("touchmove", handleTouchMove, { passive: false });
-    dpad.addEventListener("touchend", handleTouchEnd, { passive: false });
-    dpad.addEventListener("touchcancel", handleTouchEnd, { passive: false });
-    return () => {
-      dpad.removeEventListener("touchstart", handleTouchStart);
-      dpad.removeEventListener("touchmove", handleTouchMove);
-      dpad.removeEventListener("touchend", handleTouchEnd);
-      dpad.removeEventListener("touchcancel", handleTouchEnd);
-      drag.clearDragTimer();
-    };
-  }, [handleTouchStart, handleTouchMove, handleTouchEnd, drag]);
+  useTouchEvents(dpadRef, {
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+    onTouchCancel: handleTouchEnd
+  }, { cleanup: drag.clearDragTimer });
   const leftPx = displayX / 100 * containerWidth - size / 2;
   const topPx = displayY / 100 * containerHeight - size / 2;
   const dUp = "M 35,5 L 65,5 L 65,35 L 50,50 L 35,35 Z";
@@ -3846,8 +3917,16 @@ function ControlsHint({ isVisible }) {
           children: [
             /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-500/20 border-2 border-green-400 flex items-center justify-center", children: /* @__PURE__ */ jsx(Move, { size: 32, className: "text-green-400" }) }) }),
             /* @__PURE__ */ jsx("h3", { className: "text-white text-lg font-bold mb-2", children: "Customize Your Controls" }),
-            /* @__PURE__ */ jsxs("p", { className: "text-white/70 text-sm mb-4", children: [
-              /* @__PURE__ */ jsx("strong", { className: "text-white", children: "Long-press" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-white/70 text-sm mb-3", children: [
+              "Use the ",
+              /* @__PURE__ */ jsx(Lock, { size: 12, className: "inline mx-1 text-white" }),
+              " ",
+              /* @__PURE__ */ jsx("strong", { className: "text-white", children: "lock icon" }),
+              " at the top to unlock controls for repositioning."
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-white/70 text-sm mb-3", children: [
+              "When unlocked, ",
+              /* @__PURE__ */ jsx("strong", { className: "text-white", children: "long-press" }),
               " any button or the ",
               /* @__PURE__ */ jsx("strong", { className: "text-white", children: "D-pad center" }),
               " to drag and reposition it."
@@ -3875,6 +3954,33 @@ function ControlsHint({ isVisible }) {
     }
   );
 }
+function LockButton({
+  isLocked,
+  onToggle,
+  systemColor = "#00FF41"
+}) {
+  const Icon = isLocked ? Lock : Unlock;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: onToggle,
+      className: "fixed top-4 left-1/2 -translate-x-1/2 z-40 pointer-events-auto p-2 rounded-full backdrop-blur-sm transition-all active:scale-95",
+      style: {
+        backgroundColor: isLocked ? "rgba(0,0,0,0.6)" : `${systemColor}20`,
+        border: `1px solid ${isLocked ? "rgba(255,255,255,0.2)" : systemColor}`
+      },
+      "aria-label": isLocked ? "Unlock controls for repositioning" : "Lock controls",
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          size: 18,
+          style: { color: isLocked ? "rgba(255,255,255,0.6)" : systemColor }
+        }
+      )
+    }
+  );
+}
+var LOCK_KEY = "koin-controls-locked";
 function VirtualController({
   system,
   isRunning,
@@ -3886,7 +3992,21 @@ function VirtualController({
   const [pressedButtons, setPressedButtons] = useState(/* @__PURE__ */ new Set());
   const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
   const [isFullscreenState, setIsFullscreenState] = useState(false);
+  const [isLocked, setIsLocked] = useState(true);
   const { getPosition, savePosition } = useButtonPositions();
+  useEffect(() => {
+    const stored = localStorage.getItem(LOCK_KEY);
+    if (stored !== null) {
+      setIsLocked(stored === "true");
+    }
+  }, []);
+  const toggleLock = useCallback(() => {
+    setIsLocked((prev) => {
+      const newValue = !prev;
+      localStorage.setItem(LOCK_KEY, String(newValue));
+      return newValue;
+    });
+  }, []);
   const layout = getLayoutForSystem(system);
   const visibleButtons = layout.buttons.filter((btn) => {
     if (isPortrait) {
@@ -4041,6 +4161,14 @@ function VirtualController({
       className: "fixed inset-0 z-30 pointer-events-none",
       style: { touchAction: "none" },
       children: [
+        /* @__PURE__ */ jsx(
+          LockButton,
+          {
+            isLocked,
+            onToggle: toggleLock,
+            systemColor
+          }
+        ),
         /* @__PURE__ */ jsx(
           Dpad_default,
           {
@@ -4053,7 +4181,7 @@ function VirtualController({
             systemColor,
             isLandscape,
             customPosition: getPosition("up", isLandscape),
-            onPositionChange: (x, y) => savePosition("up", x, y, isLandscape)
+            onPositionChange: isLocked ? void 0 : (x, y) => savePosition("up", x, y, isLandscape)
           }
         ),
         memoizedButtonElements.filter(({ buttonConfig }) => !DPAD_TYPES.includes(buttonConfig.type)).map(({ buttonConfig, adjustedConfig, customPosition, width, height }) => /* @__PURE__ */ jsx(
@@ -4067,7 +4195,7 @@ function VirtualController({
             containerWidth: width,
             containerHeight: height,
             customPosition,
-            onPositionChange: (x, y) => savePosition(buttonConfig.type, x, y, isLandscape),
+            onPositionChange: isLocked ? void 0 : (x, y) => savePosition(buttonConfig.type, x, y, isLandscape),
             isLandscape,
             console: layout.console
           },
@@ -4387,6 +4515,45 @@ var GameCanvas = memo(function GameCanvas2({
   ] });
 });
 var GameCanvas_default = GameCanvas;
+function useInputCapture({
+  isOpen,
+  onClose
+}) {
+  const [listeningFor, setListeningFor] = useState(null);
+  const startListening = useCallback((target) => {
+    setListeningFor(target);
+  }, []);
+  const stopListening = useCallback(() => {
+    setListeningFor(null);
+  }, []);
+  useEffect(() => {
+    if (!isOpen) {
+      setListeningFor(null);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.code === "Escape") {
+        if (listeningFor !== null) {
+          e.preventDefault();
+          e.stopPropagation();
+          setListeningFor(null);
+        } else {
+          onClose();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, listeningFor, onClose]);
+  return {
+    listeningFor,
+    startListening,
+    stopListening,
+    isListening: listeningFor !== null
+  };
+}
 function getFilteredGroups(activeButtons) {
   return BUTTON_GROUPS.map((group) => ({
     ...group,
@@ -4402,7 +4569,10 @@ function ControlMapper({
 }) {
   const t = useKoinTranslation();
   const [localControls, setLocalControls] = useState(controls);
-  const [listeningFor, setListeningFor] = useState(null);
+  const { listeningFor, startListening, stopListening, isListening } = useInputCapture({
+    isOpen,
+    onClose
+  });
   const activeButtons = useMemo(() => {
     return getConsoleButtons(system || "SNES");
   }, [system]);
@@ -4418,27 +4588,20 @@ function ControlMapper({
     }
   }, [isOpen, controls]);
   useEffect(() => {
-    if (!isOpen) {
-      setListeningFor(null);
-      return;
-    }
+    if (!isOpen || !listeningFor) return;
     const handleKeyDown = (e) => {
-      if (!listeningFor) return;
+      if (e.code === "Escape") return;
       e.preventDefault();
       e.stopPropagation();
-      if (e.code === "Escape") {
-        setListeningFor(null);
-        return;
-      }
       setLocalControls((prev) => ({
         ...prev,
         [listeningFor]: e.code
       }));
-      setListeningFor(null);
+      stopListening();
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, listeningFor]);
+  }, [isOpen, listeningFor, stopListening]);
   const handleReset = () => {
     setLocalControls(defaultControls);
   };
@@ -4446,52 +4609,58 @@ function ControlMapper({
     onSave(localControls);
     onClose();
   };
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0 bg-black/80 backdrop-blur-sm",
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "relative bg-gray-900 border border-retro-primary/30 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/10 bg-black/50", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Gamepad2, { className: "text-retro-primary", size: 24 }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-white", children: t.modals.controls.title }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: t.modals.controls.description })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    ModalShell,
+    {
+      isOpen,
+      onClose,
+      title: t.modals.controls.title,
+      subtitle: t.modals.controls.description,
+      icon: /* @__PURE__ */ jsx(Gamepad2, { className: "text-retro-primary", size: 24 }),
+      closeOnBackdrop: !isListening,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleReset,
+            className: "flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-400 hover:text-white hover:bg-white/10 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(RotateCcw, { size: 16 }),
+              t.modals.controls.reset
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
           "button",
           {
-            onClick: onClose,
-            className: "p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors",
-            children: /* @__PURE__ */ jsx(X, { size: 20 })
+            onClick: handleSave,
+            className: "flex items-center gap-2 px-6 py-2 rounded-lg bg-retro-primary text-black font-bold text-sm hover:bg-retro-primary/90 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(Check, { size: 16 }),
+              t.modals.controls.save
+            ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "p-4 space-y-6 max-h-[400px] overflow-y-auto", children: controlGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+      children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-6 max-h-[400px] overflow-y-auto", children: controlGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-gray-500 uppercase tracking-wider mb-2", children: group.label }),
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: group.buttons.map((btn) => /* @__PURE__ */ jsxs(
           "button",
           {
-            onClick: () => setListeningFor(btn),
+            onClick: () => startListening(btn),
             className: `
-                      flex items-center justify-between px-4 py-3 rounded-lg border transition-all
-                      ${listeningFor === btn ? "border-retro-primary bg-retro-primary/20 ring-2 ring-retro-primary/50" : "border-white/10 bg-white/5 hover:border-white/20 hover:bg-white/10"}
-                    `,
+                                        flex items-center justify-between px-4 py-3 rounded-lg border transition-all
+                                        ${listeningFor === btn ? "border-retro-primary bg-retro-primary/20 ring-2 ring-retro-primary/50" : "border-white/10 bg-white/5 hover:border-white/20 hover:bg-white/10"}
+                                    `,
             children: [
               /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-300", children: BUTTON_LABELS[btn] }),
               /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: `
-                        px-2 py-1 rounded text-xs font-mono
-                        ${listeningFor === btn ? "bg-retro-primary/30 text-retro-primary animate-pulse" : "bg-black/50 text-white"}
-                      `,
+                                            px-2 py-1 rounded text-xs font-mono
+                                            ${listeningFor === btn ? "bg-retro-primary/30 text-retro-primary animate-pulse" : "bg-black/50 text-white"}
+                                        `,
                   children: listeningFor === btn ? t.modals.controls.pressKey : formatKeyCode(localControls[btn] || "")
                 }
               )
@@ -4499,199 +4668,10 @@ function ControlMapper({
           },
           btn
         )) })
-      ] }, group.label)) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 bg-black/30 border-t border-white/10", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: handleReset,
-            className: "flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-400 hover:text-white hover:bg-white/10 transition-colors",
-            children: [
-              /* @__PURE__ */ jsx(RotateCcw, { size: 16 }),
-              t.modals.controls.reset
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: handleSave,
-            className: "flex items-center gap-2 px-6 py-2 rounded-lg bg-retro-primary text-black font-bold text-sm hover:bg-retro-primary/90 transition-colors",
-            children: [
-              /* @__PURE__ */ jsx(Check, { size: 16 }),
-              t.modals.controls.save
-            ]
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-function getDisplayName(id) {
-  let name = id;
-  name = name.replace(/^[0-9a-f]{4}-[0-9a-f]{4}-/i, "");
-  name = name.replace(/\s*\(.*\)\s*$/i, "");
-  name = name.replace(/\s*STANDARD GAMEPAD\s*/i, "");
-  if (/xbox/i.test(name)) {
-    if (/series/i.test(name)) return "Xbox Series Controller";
-    if (/one/i.test(name)) return "Xbox One Controller";
-    if (/360/i.test(name)) return "Xbox 360 Controller";
-    return "Xbox Controller";
-  }
-  if (/dualsense/i.test(name)) return "DualSense";
-  if (/dualshock\s*4/i.test(name)) return "DualShock 4";
-  if (/dualshock/i.test(name)) return "DualShock";
-  if (/playstation/i.test(name) || /sony/i.test(name)) return "PlayStation Controller";
-  if (/pro\s*controller/i.test(name)) return "Switch Pro Controller";
-  if (/joy-?con/i.test(name)) return "Joy-Con";
-  if (/nintendo/i.test(name)) return "Nintendo Controller";
-  return name.trim() || "Gamepad";
-}
-function detectControllerBrand(id) {
-  const lowerId = id.toLowerCase();
-  if (/xbox|xinput|microsoft/i.test(lowerId)) return "xbox";
-  if (/playstation|sony|dualshock|dualsense/i.test(lowerId)) return "playstation";
-  if (/nintendo|switch|joy-?con|pro controller/i.test(lowerId)) return "nintendo";
-  return "generic";
-}
-function toGamepadInfo(gamepad) {
-  return {
-    index: gamepad.index,
-    id: gamepad.id,
-    name: getDisplayName(gamepad.id),
-    connected: gamepad.connected,
-    buttons: gamepad.buttons.length,
-    axes: gamepad.axes.length,
-    mapping: gamepad.mapping
-  };
-}
-function useGamepad(options) {
-  const { onConnect, onDisconnect } = options || {};
-  const [gamepads, setGamepads] = useState([]);
-  const rafRef = useRef(null);
-  const lastStateRef = useRef("");
-  const prevCountRef = useRef(0);
-  const onConnectRef = useRef(onConnect);
-  const onDisconnectRef = useRef(onDisconnect);
-  useEffect(() => {
-    onConnectRef.current = onConnect;
-    onDisconnectRef.current = onDisconnect;
-  }, [onConnect, onDisconnect]);
-  const getGamepads = useCallback(() => {
-    if (typeof navigator === "undefined" || typeof navigator.getGamepads !== "function") {
-      return [];
-    }
-    const rawGamepads = navigator.getGamepads() ?? [];
-    const connected = [];
-    for (let i = 0; i < rawGamepads.length; i++) {
-      const gp = rawGamepads[i];
-      if (gp && gp.connected) {
-        connected.push(toGamepadInfo(gp));
-      }
-    }
-    return connected;
-  }, []);
-  const getRawGamepad = useCallback((index) => {
-    const rawGamepads = navigator.getGamepads?.() ?? [];
-    return rawGamepads[index] ?? null;
-  }, []);
-  const refresh = useCallback(() => {
-    setGamepads(getGamepads());
-  }, [getGamepads]);
-  useEffect(() => {
-    if (typeof window === "undefined" || typeof navigator === "undefined") {
-      return;
-    }
-    if (typeof navigator.getGamepads !== "function") {
-      console.warn("[useGamepad] Gamepad API not supported in this browser");
-      return;
-    }
-    let isActive = true;
-    const poll = () => {
-      if (!isActive) return;
-      const current = getGamepads();
-      let hasChanged = current.length !== prevCountRef.current;
-      if (!hasChanged) {
-        for (let i = 0; i < current.length; i++) {
-          const saved = gamepads[i];
-          if (!saved || saved.id !== current[i].id || saved.connected !== current[i].connected) {
-            hasChanged = true;
-            break;
-          }
-        }
-      }
-      if (hasChanged) {
-        const prevCount = prevCountRef.current;
-        const currentCount = current.length;
-        if (currentCount > prevCount && prevCount >= 0 && onConnectRef.current) {
-          const newGamepad = current[current.length - 1];
-          onConnectRef.current(newGamepad);
-        } else if (currentCount < prevCount && prevCount > 0 && onDisconnectRef.current) {
-          onDisconnectRef.current();
-        }
-        prevCountRef.current = currentCount;
-        setGamepads(current);
-      }
-      rafRef.current = requestAnimationFrame(poll);
-    };
-    const handleConnect = (e) => {
-      console.log("[useGamepad] \u{1F3AE} Gamepad connected:", e.gamepad.id);
-      const current = getGamepads();
-      const prevCount = prevCountRef.current;
-      prevCountRef.current = current.length;
-      lastStateRef.current = current.map((g) => `${g.index}:${g.id}`).join("|");
-      setGamepads(current);
-      if (onConnectRef.current && current.length > prevCount) {
-        const newGamepad = current[current.length - 1];
-        onConnectRef.current(newGamepad);
-      }
-    };
-    const handleDisconnect = (e) => {
-      console.log("[useGamepad] \u{1F3AE} Gamepad disconnected:", e.gamepad.id);
-      const current = getGamepads();
-      const prevCount = prevCountRef.current;
-      prevCountRef.current = current.length;
-      lastStateRef.current = current.map((g) => `${g.index}:${g.id}`).join("|");
-      setGamepads(current);
-      if (onDisconnectRef.current && current.length < prevCount) {
-        onDisconnectRef.current();
-      }
-    };
-    window.addEventListener("gamepadconnected", handleConnect);
-    window.addEventListener("gamepaddisconnected", handleDisconnect);
-    rafRef.current = requestAnimationFrame(poll);
-    const initial = getGamepads();
-    if (initial.length > 0) {
-      console.log("[useGamepad] Initial gamepads found:", initial.map((g) => g.name).join(", "));
-      prevCountRef.current = initial.length;
-      setGamepads(initial);
-      lastStateRef.current = initial.map((g) => `${g.index}:${g.id}`).join("|");
-    } else {
-      prevCountRef.current = 0;
+      ] }, group.label)) })
     }
-    return () => {
-      isActive = false;
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-      }
-      window.removeEventListener("gamepadconnected", handleConnect);
-      window.removeEventListener("gamepaddisconnected", handleDisconnect);
-    };
-  }, [getGamepads]);
-  return {
-    gamepads,
-    isAnyConnected: gamepads.length > 0,
-    connectedCount: gamepads.length,
-    getRawGamepad,
-    refresh
-  };
+  );
 }
-var STANDARD_AXIS_MAP = {
-  leftStickX: 0,
-  leftStickY: 1,
-  rightStickX: 2,
-  rightStickY: 3
-};
 function GamepadMapper({
   isOpen,
   gamepads,
@@ -4702,7 +4682,10 @@ function GamepadMapper({
   const t = useKoinTranslation();
   const [selectedPlayer, setSelectedPlayer] = useState(1);
   const [bindings, setBindings] = useState({});
-  const [listeningFor, setListeningFor] = useState(null);
+  const { listeningFor, startListening, stopListening, isListening } = useInputCapture({
+    isOpen,
+    onClose
+  });
   const rafRef = useRef(null);
   useEffect(() => {
     if (isOpen) {
@@ -4737,7 +4720,7 @@ function GamepadMapper({
                 [listeningFor]: i
               }
             }));
-            setListeningFor(null);
+            stopListening();
             return;
           }
         }
@@ -4750,21 +4733,7 @@ function GamepadMapper({
         cancelAnimationFrame(rafRef.current);
       }
     };
-  }, [isOpen, listeningFor, selectedPlayer]);
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e) => {
-      if (e.code === "Escape") {
-        if (listeningFor) {
-          setListeningFor(null);
-        } else {
-          onClose();
-        }
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, listeningFor, onClose]);
+  }, [isOpen, listeningFor, selectedPlayer, stopListening]);
   const handleReset = () => {
     setBindings((prev) => ({
       ...prev,
@@ -4779,127 +4748,19 @@ function GamepadMapper({
     onSave?.(bindings[selectedPlayer], selectedPlayer);
     onClose();
   };
-  if (!isOpen) return null;
   const currentBindings = bindings[selectedPlayer] ?? DEFAULT_GAMEPAD;
   const currentGamepad = gamepads.find((g) => g.index === selectedPlayer - 1);
-  currentGamepad ? detectControllerBrand(currentGamepad.id) : "generic";
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0 bg-black/80 backdrop-blur-sm",
-        onClick: () => !listeningFor && onClose()
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "relative bg-gray-900 border border-retro-primary/30 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/10 bg-black/50", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Joystick, { className: "text-retro-primary", size: 24, style: { color: systemColor } }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-white", children: t.modals.gamepad.title }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: gamepads.length > 0 ? t.modals.gamepad.connected.replace("{{count}}", gamepads.length.toString()) : t.modals.gamepad.none })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onClose,
-            className: "p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors",
-            children: /* @__PURE__ */ jsx(X, { size: 20 })
-          }
-        )
-      ] }),
-      gamepads.length > 1 && /* @__PURE__ */ jsxs("div", { className: "px-6 py-3 border-b border-white/10 bg-black/30", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 font-medium", children: t.modals.gamepad.player }),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: gamepads.map((gp) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setSelectedPlayer(gp.index + 1),
-              className: `
-                      flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all
-                      ${selectedPlayer === gp.index + 1 ? "bg-retro-primary/20 text-retro-primary" : "bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white"}
-                    `,
-              style: selectedPlayer === gp.index + 1 ? {
-                backgroundColor: `${systemColor}20`,
-                color: systemColor
-              } : {},
-              children: [
-                /* @__PURE__ */ jsx(User, { size: 14 }),
-                "P",
-                gp.index + 1
-              ]
-            },
-            gp.index
-          )) })
-        ] }),
-        currentGamepad && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: currentGamepad.name })
-      ] }),
-      gamepads.length === 1 && currentGamepad && /* @__PURE__ */ jsx("div", { className: "px-6 py-2 border-b border-white/10 bg-black/30", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-400", children: [
-        currentGamepad.name,
-        " \u2022 Player 1"
-      ] }) }),
-      gamepads.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-6 py-10 text-center", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative inline-block mb-4", children: [
-          /* @__PURE__ */ jsx(Joystick, { size: 56, className: "text-gray-600 animate-pulse" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -m-2 rounded-full border-2 border-dashed border-gray-600 animate-spin", style: { animationDuration: "8s" } })
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-gray-300 font-medium mb-2", children: t.modals.gamepad.noController }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mb-4", children: t.modals.gamepad.pressAny }),
-        /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/5 border border-white/10", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: t.modals.gamepad.waiting }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-500 animate-bounce", style: { animationDelay: "0ms" } }),
-            /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-500 animate-bounce", style: { animationDelay: "150ms" } }),
-            /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-500 animate-bounce", style: { animationDelay: "300ms" } })
-          ] })
-        ] })
-      ] }),
-      gamepads.length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-6 max-h-[400px] overflow-y-auto", children: [
-        listeningFor && /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-lg bg-black/50 border border-retro-primary/50 text-center animate-pulse", style: { borderColor: `${systemColor}50` }, children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-white mb-1", children: t.modals.gamepad.pressButton.replace("{{button}}", BUTTON_LABELS[listeningFor]) }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: t.modals.gamepad.pressEsc })
-        ] }),
-        BUTTON_GROUPS.map((group) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-gray-500 uppercase tracking-wider mb-2", children: group.label }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: group.buttons.map((btn) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setListeningFor(btn),
-              disabled: !!listeningFor && listeningFor !== btn,
-              className: `
-                        flex items-center justify-between px-4 py-3 rounded-lg border transition-all
-                        disabled:opacity-50
-                        ${listeningFor === btn ? "border-retro-primary bg-retro-primary/20 ring-2 ring-retro-primary/50" : "border-white/10 bg-white/5 hover:border-white/20 hover:bg-white/10"}
-                      `,
-              style: listeningFor === btn ? {
-                borderColor: systemColor,
-                backgroundColor: `${systemColor}20`,
-                boxShadow: `0 0 0 2px ${systemColor}50`
-              } : {},
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-300", children: BUTTON_LABELS[btn] }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `
-                          px-2 py-1 rounded text-xs font-mono
-                          ${listeningFor === btn ? "bg-retro-primary/30 text-retro-primary animate-pulse" : "bg-black/50 text-white"}
-                        `,
-                    style: listeningFor === btn ? {
-                      backgroundColor: `${systemColor}30`,
-                      color: systemColor
-                    } : {},
-                    children: listeningFor === btn ? t.controls.press : formatGamepadButton(currentBindings[btn])
-                  }
-                )
-              ]
-            },
-            btn
-          )) })
-        ] }, group.label))
-      ] }),
-      gamepads.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 bg-black/30 border-t border-white/10", children: [
+  return /* @__PURE__ */ jsxs(
+    ModalShell,
+    {
+      isOpen,
+      onClose,
+      title: t.modals.gamepad.title,
+      subtitle: gamepads.length > 0 ? t.modals.gamepad.connected.replace("{{count}}", gamepads.length.toString()) : t.modals.gamepad.none,
+      icon: /* @__PURE__ */ jsx(Joystick, { size: 24, style: { color: systemColor } }),
+      systemColor,
+      closeOnBackdrop: !isListening,
+      footer: gamepads.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -4925,9 +4786,101 @@ function GamepadMapper({
             ]
           }
         )
-      ] })
-    ] })
-  ] });
+      ] }) : void 0,
+      children: [
+        gamepads.length > 1 && /* @__PURE__ */ jsxs("div", { className: "px-6 py-3 border-b border-white/10 bg-black/30", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 font-medium", children: t.modals.gamepad.player }),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: gamepads.map((gp) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setSelectedPlayer(gp.index + 1),
+                className: `
+                                        flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all
+                                        ${selectedPlayer === gp.index + 1 ? "bg-retro-primary/20 text-retro-primary" : "bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white"}
+                                    `,
+                style: selectedPlayer === gp.index + 1 ? {
+                  backgroundColor: `${systemColor}20`,
+                  color: systemColor
+                } : {},
+                children: [
+                  /* @__PURE__ */ jsx(User, { size: 14 }),
+                  "P",
+                  gp.index + 1
+                ]
+              },
+              gp.index
+            )) })
+          ] }),
+          currentGamepad && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: currentGamepad.name })
+        ] }),
+        gamepads.length === 1 && currentGamepad && /* @__PURE__ */ jsx("div", { className: "px-6 py-2 border-b border-white/10 bg-black/30", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-400", children: [
+          currentGamepad.name,
+          " \u2022 Player 1"
+        ] }) }),
+        gamepads.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-6 py-10 text-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative inline-block mb-4", children: [
+            /* @__PURE__ */ jsx(Joystick, { size: 56, className: "text-gray-600 animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -m-2 rounded-full border-2 border-dashed border-gray-600 animate-spin", style: { animationDuration: "8s" } })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-gray-300 font-medium mb-2", children: t.modals.gamepad.noController }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mb-4", children: t.modals.gamepad.pressAny }),
+          /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/5 border border-white/10", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: t.modals.gamepad.waiting }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-500 animate-bounce", style: { animationDelay: "0ms" } }),
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-500 animate-bounce", style: { animationDelay: "150ms" } }),
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-500 animate-bounce", style: { animationDelay: "300ms" } })
+            ] })
+          ] })
+        ] }),
+        gamepads.length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-6 max-h-[400px] overflow-y-auto", children: [
+          listeningFor && /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-lg bg-black/50 border border-retro-primary/50 text-center animate-pulse", style: { borderColor: `${systemColor}50` }, children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-white mb-1", children: t.modals.gamepad.pressButton.replace("{{button}}", BUTTON_LABELS[listeningFor]) }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: t.modals.gamepad.pressEsc })
+          ] }),
+          BUTTON_GROUPS.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-gray-500 uppercase tracking-wider mb-2", children: group.label }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: group.buttons.map((btn) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => startListening(btn),
+                disabled: !!listeningFor && listeningFor !== btn,
+                className: `
+                                            flex items-center justify-between px-4 py-3 rounded-lg border transition-all
+                                            disabled:opacity-50
+                                            ${listeningFor === btn ? "border-retro-primary bg-retro-primary/20 ring-2 ring-retro-primary/50" : "border-white/10 bg-white/5 hover:border-white/20 hover:bg-white/10"}
+                                        `,
+                style: listeningFor === btn ? {
+                  borderColor: systemColor,
+                  backgroundColor: `${systemColor}20`,
+                  boxShadow: `0 0 0 2px ${systemColor}50`
+                } : {},
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-300", children: BUTTON_LABELS[btn] }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `
+                                                px-2 py-1 rounded text-xs font-mono
+                                                ${listeningFor === btn ? "bg-retro-primary/30 text-retro-primary animate-pulse" : "bg-black/50 text-white"}
+                                            `,
+                      style: listeningFor === btn ? {
+                        backgroundColor: `${systemColor}30`,
+                        color: systemColor
+                      } : {},
+                      children: listeningFor === btn ? t.controls.press : formatGamepadButton(currentBindings[btn])
+                    }
+                  )
+                ]
+              },
+              btn
+            )) })
+          ] }, group.label))
+        ] })
+      ]
+    }
+  );
 }
 function CheatModal({
   isOpen,
@@ -4935,42 +4888,24 @@ function CheatModal({
   activeCheats,
   onToggle,
   onClose
-}) {
-  const t = useKoinTranslation();
-  const [copiedId, setCopiedId] = React2.useState(null);
-  if (!isOpen) return null;
-  const handleCopy = async (code, id) => {
-    await navigator.clipboard.writeText(code);
-    setCopiedId(id);
-    setTimeout(() => setCopiedId(null), 2e3);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0 bg-black/80 backdrop-blur-sm",
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "relative bg-gray-900 border border-retro-primary/30 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/10 bg-black/50", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Code, { className: "text-purple-400", size: 24 }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-white", children: t.modals.cheats.title }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: t.modals.cheats.available.replace("{{count}}", cheats.length.toString()) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onClose,
-            className: "p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors",
-            children: /* @__PURE__ */ jsx(X, { size: 20 })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "p-4 space-y-2 max-h-[400px] overflow-y-auto", children: cheats.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-12 text-gray-500", children: [
+}) {
+  const t = useKoinTranslation();
+  const [copiedId, setCopiedId] = React2.useState(null);
+  const handleCopy = async (code, id) => {
+    await navigator.clipboard.writeText(code);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2e3);
+  };
+  return /* @__PURE__ */ jsx(
+    ModalShell,
+    {
+      isOpen,
+      onClose,
+      title: t.modals.cheats.title,
+      subtitle: t.modals.cheats.available.replace("{{count}}", cheats.length.toString()),
+      icon: /* @__PURE__ */ jsx(Code, { size: 24, className: "text-purple-400" }),
+      footer: /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 text-center w-full", children: activeCheats.size > 0 ? t.modals.cheats.active.replace("{{count}}", activeCheats.size.toString()) : t.modals.cheats.toggleHint }),
+      children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-2 max-h-[400px] overflow-y-auto", children: cheats.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-12 text-gray-500", children: [
         /* @__PURE__ */ jsx(Code, { size: 48, className: "mx-auto mb-3 opacity-50" }),
         /* @__PURE__ */ jsx("p", { className: "font-medium", children: t.modals.cheats.emptyTitle }),
         /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: t.modals.cheats.emptyDesc })
@@ -4980,18 +4915,18 @@ function CheatModal({
           "div",
           {
             className: `
-                    group flex items-start gap-4 p-4 rounded-lg border transition-all cursor-pointer
-                    ${isActive ? "border-purple-500/50 bg-purple-500/10" : "border-white/10 bg-white/5 hover:border-white/20 hover:bg-white/10"}
-                  `,
+                                    group flex items-start gap-4 p-4 rounded-lg border transition-all cursor-pointer
+                                    ${isActive ? "border-purple-500/50 bg-purple-500/10" : "border-white/10 bg-white/5 hover:border-white/20 hover:bg-white/10"}
+                                `,
             onClick: () => onToggle(cheat.id),
             children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: `
-                      flex-shrink-0 w-6 h-6 rounded border-2 flex items-center justify-center transition-all
-                      ${isActive ? "border-purple-500 bg-purple-500" : "border-gray-600 group-hover:border-gray-400"}
-                    `,
+                                        flex-shrink-0 w-6 h-6 rounded border-2 flex items-center justify-center transition-all
+                                        ${isActive ? "border-purple-500 bg-purple-500" : "border-gray-600 group-hover:border-gray-400"}
+                                    `,
                   children: isActive && /* @__PURE__ */ jsx(Check, { size: 14, className: "text-white" })
                 }
               ),
@@ -5017,10 +4952,9 @@ function CheatModal({
           },
           cheat.id
         );
-      }) }),
-      /* @__PURE__ */ jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 text-center", children: activeCheats.size > 0 ? t.modals.cheats.active.replace("{{count}}", activeCheats.size.toString()) : t.modals.cheats.toggleHint }) })
-    ] })
-  ] });
+      }) })
+    }
+  );
 }
 var AUTO_SAVE_SLOT = 5;
 function formatBytes(bytes) {
@@ -5061,7 +4995,6 @@ function SaveSlotModal({
   onUpgrade
 }) {
   const t = useKoinTranslation();
-  if (!isOpen) return null;
   const isSaveMode = mode === "save";
   const allSlots = [1, 2, 3, 4, 5];
   const isUnlimited = maxSlots === -1 || maxSlots >= 5;
@@ -5076,33 +5009,17 @@ function SaveSlotModal({
   const getSlotData = (slotNum) => {
     return slots.find((s) => s.slot === slotNum);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0 bg-black/80 backdrop-blur-sm",
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "relative bg-gray-900 border border-retro-primary/30 rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/10 bg-black/50", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          isSaveMode ? /* @__PURE__ */ jsx(Save, { className: "text-retro-primary", size: 24 }) : /* @__PURE__ */ jsx(Download, { className: "text-retro-primary", size: 24 }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-white", children: isSaveMode ? t.modals.saveSlots.saveTitle : t.modals.saveSlots.loadTitle }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: isSaveMode ? t.modals.saveSlots.subtitleSave : t.modals.saveSlots.subtitleLoad })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onClose,
-            className: "p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors",
-            children: /* @__PURE__ */ jsx(X, { size: 20 })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "p-4 space-y-2 max-h-[400px] overflow-y-auto", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-gray-400", children: [
+  return /* @__PURE__ */ jsx(
+    ModalShell,
+    {
+      isOpen,
+      onClose,
+      title: isSaveMode ? t.modals.saveSlots.saveTitle : t.modals.saveSlots.loadTitle,
+      subtitle: isSaveMode ? t.modals.saveSlots.subtitleSave : t.modals.saveSlots.subtitleLoad,
+      icon: isSaveMode ? /* @__PURE__ */ jsx(Save, { className: "text-retro-primary", size: 24 }) : /* @__PURE__ */ jsx(Download, { className: "text-retro-primary", size: 24 }),
+      maxWidth: "md",
+      footer: /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 text-center w-full", children: isSaveMode ? t.modals.saveSlots.footerSave : t.modals.saveSlots.footerLoad }),
+      children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-2 max-h-[400px] overflow-y-auto", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-gray-400", children: [
         /* @__PURE__ */ jsx(Loader2, { className: "w-8 h-8 animate-spin mb-3" }),
         /* @__PURE__ */ jsx("span", { className: "text-sm", children: t.modals.saveSlots.loading })
       ] }) : displaySlots.map((slotNum) => {
@@ -5221,10 +5138,9 @@ function SaveSlotModal({
           },
           slotNum
         );
-      }) }),
-      /* @__PURE__ */ jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 text-center", children: isSaveMode ? t.modals.saveSlots.footerSave : t.modals.saveSlots.footerLoad }) })
-    ] })
-  ] });
+      }) })
+    }
+  );
 }
 function BiosSelectionModal({
   isOpen,
@@ -5371,36 +5287,28 @@ function SettingsModal({
   systemColor = "#00FF41"
 }) {
   const t = useKoinTranslation();
-  if (!isOpen) return null;
   const languages = [
     { code: "en", name: "English" },
     { code: "es", name: "Espa\xF1ol" },
     { code: "fr", name: "Fran\xE7ais" }
   ];
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0 bg-black/80 backdrop-blur-sm",
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "relative bg-gray-900 border border-white/10 rounded-xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden animate-in fade-in zoom-in-95 duration-200", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/10 bg-black/50", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Settings, { className: "text-white", size: 20 }),
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-white", children: t.settings.title })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onClose,
-            className: "p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors",
-            children: /* @__PURE__ */ jsx(X, { size: 20 })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "p-6 space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+  return /* @__PURE__ */ jsx(
+    ModalShell,
+    {
+      isOpen,
+      onClose,
+      title: t.settings.title,
+      icon: /* @__PURE__ */ jsx(Settings, { size: 20, className: "text-white" }),
+      maxWidth: "sm",
+      footer: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "text-sm text-gray-500 hover:text-white transition-colors w-full text-center",
+          children: t.modals.shortcuts.pressEsc
+        }
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "p-6 space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-gray-400", children: [
           /* @__PURE__ */ jsx(Globe, { size: 16 }),
           /* @__PURE__ */ jsx("span", { children: t.settings.language })
@@ -5412,9 +5320,9 @@ function SettingsModal({
             {
               onClick: () => onLanguageChange(lang.code),
               className: `
-                                            flex items-center justify-between px-4 py-3 rounded-lg border transition-all
-                                            ${isActive ? "bg-white/10 border-white/20 text-white" : "bg-black/20 border-transparent text-gray-400 hover:bg-white/5 hover:text-white"}
-                                        `,
+                                        flex items-center justify-between px-4 py-3 rounded-lg border transition-all
+                                        ${isActive ? "bg-white/10 border-white/20 text-white" : "bg-black/20 border-transparent text-gray-400 hover:bg-white/5 hover:text-white"}
+                                    `,
               children: [
                 /* @__PURE__ */ jsx("span", { children: lang.name }),
                 isActive && /* @__PURE__ */ jsx(Check, { size: 16, style: { color: systemColor } })
@@ -5423,17 +5331,9 @@ function SettingsModal({
             lang.code
           );
         }) })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "px-6 py-4 bg-black/30 border-t border-white/10 text-center", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onClose,
-          className: "text-sm text-gray-500 hover:text-white transition-colors",
-          children: t.modals.shortcuts.pressEsc
-        }
-      ) })
-    ] })
-  ] });
+      ] }) })
+    }
+  );
 }
 function GameModals({
   controlsModalOpen,
@@ -7644,6 +7544,171 @@ var useNostalgist = ({
   ]);
   return hookReturn;
 };
+function getDisplayName(id) {
+  let name = id;
+  name = name.replace(/^[0-9a-f]{4}-[0-9a-f]{4}-/i, "");
+  name = name.replace(/\s*\(.*\)\s*$/i, "");
+  name = name.replace(/\s*STANDARD GAMEPAD\s*/i, "");
+  if (/xbox/i.test(name)) {
+    if (/series/i.test(name)) return "Xbox Series Controller";
+    if (/one/i.test(name)) return "Xbox One Controller";
+    if (/360/i.test(name)) return "Xbox 360 Controller";
+    return "Xbox Controller";
+  }
+  if (/dualsense/i.test(name)) return "DualSense";
+  if (/dualshock\s*4/i.test(name)) return "DualShock 4";
+  if (/dualshock/i.test(name)) return "DualShock";
+  if (/playstation/i.test(name) || /sony/i.test(name)) return "PlayStation Controller";
+  if (/pro\s*controller/i.test(name)) return "Switch Pro Controller";
+  if (/joy-?con/i.test(name)) return "Joy-Con";
+  if (/nintendo/i.test(name)) return "Nintendo Controller";
+  return name.trim() || "Gamepad";
+}
+function detectControllerBrand(id) {
+  const lowerId = id.toLowerCase();
+  if (/xbox|xinput|microsoft/i.test(lowerId)) return "xbox";
+  if (/playstation|sony|dualshock|dualsense/i.test(lowerId)) return "playstation";
+  if (/nintendo|switch|joy-?con|pro controller/i.test(lowerId)) return "nintendo";
+  return "generic";
+}
+function toGamepadInfo(gamepad) {
+  return {
+    index: gamepad.index,
+    id: gamepad.id,
+    name: getDisplayName(gamepad.id),
+    connected: gamepad.connected,
+    buttons: gamepad.buttons.length,
+    axes: gamepad.axes.length,
+    mapping: gamepad.mapping
+  };
+}
+function useGamepad(options) {
+  const { onConnect, onDisconnect } = options || {};
+  const [gamepads, setGamepads] = useState([]);
+  const rafRef = useRef(null);
+  const lastStateRef = useRef("");
+  const prevCountRef = useRef(0);
+  const onConnectRef = useRef(onConnect);
+  const onDisconnectRef = useRef(onDisconnect);
+  useEffect(() => {
+    onConnectRef.current = onConnect;
+    onDisconnectRef.current = onDisconnect;
+  }, [onConnect, onDisconnect]);
+  const getGamepads = useCallback(() => {
+    if (typeof navigator === "undefined" || typeof navigator.getGamepads !== "function") {
+      return [];
+    }
+    const rawGamepads = navigator.getGamepads() ?? [];
+    const connected = [];
+    for (let i = 0; i < rawGamepads.length; i++) {
+      const gp = rawGamepads[i];
+      if (gp && gp.connected) {
+        connected.push(toGamepadInfo(gp));
+      }
+    }
+    return connected;
+  }, []);
+  const getRawGamepad = useCallback((index) => {
+    const rawGamepads = navigator.getGamepads?.() ?? [];
+    return rawGamepads[index] ?? null;
+  }, []);
+  const refresh = useCallback(() => {
+    setGamepads(getGamepads());
+  }, [getGamepads]);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof navigator === "undefined") {
+      return;
+    }
+    if (typeof navigator.getGamepads !== "function") {
+      console.warn("[useGamepad] Gamepad API not supported in this browser");
+      return;
+    }
+    let isActive = true;
+    const poll = () => {
+      if (!isActive) return;
+      const current = getGamepads();
+      let hasChanged = current.length !== prevCountRef.current;
+      if (!hasChanged) {
+        for (let i = 0; i < current.length; i++) {
+          const saved = gamepads[i];
+          if (!saved || saved.id !== current[i].id || saved.connected !== current[i].connected) {
+            hasChanged = true;
+            break;
+          }
+        }
+      }
+      if (hasChanged) {
+        const prevCount = prevCountRef.current;
+        const currentCount = current.length;
+        if (currentCount > prevCount && prevCount >= 0 && onConnectRef.current) {
+          const newGamepad = current[current.length - 1];
+          onConnectRef.current(newGamepad);
+        } else if (currentCount < prevCount && prevCount > 0 && onDisconnectRef.current) {
+          onDisconnectRef.current();
+        }
+        prevCountRef.current = currentCount;
+        setGamepads(current);
+      }
+      rafRef.current = requestAnimationFrame(poll);
+    };
+    const handleConnect = (e) => {
+      console.log("[useGamepad] \u{1F3AE} Gamepad connected:", e.gamepad.id);
+      const current = getGamepads();
+      const prevCount = prevCountRef.current;
+      prevCountRef.current = current.length;
+      lastStateRef.current = current.map((g) => `${g.index}:${g.id}`).join("|");
+      setGamepads(current);
+      if (onConnectRef.current && current.length > prevCount) {
+        const newGamepad = current[current.length - 1];
+        onConnectRef.current(newGamepad);
+      }
+    };
+    const handleDisconnect = (e) => {
+      console.log("[useGamepad] \u{1F3AE} Gamepad disconnected:", e.gamepad.id);
+      const current = getGamepads();
+      const prevCount = prevCountRef.current;
+      prevCountRef.current = current.length;
+      lastStateRef.current = current.map((g) => `${g.index}:${g.id}`).join("|");
+      setGamepads(current);
+      if (onDisconnectRef.current && current.length < prevCount) {
+        onDisconnectRef.current();
+      }
+    };
+    window.addEventListener("gamepadconnected", handleConnect);
+    window.addEventListener("gamepaddisconnected", handleDisconnect);
+    rafRef.current = requestAnimationFrame(poll);
+    const initial = getGamepads();
+    if (initial.length > 0) {
+      console.log("[useGamepad] Initial gamepads found:", initial.map((g) => g.name).join(", "));
+      prevCountRef.current = initial.length;
+      setGamepads(initial);
+      lastStateRef.current = initial.map((g) => `${g.index}:${g.id}`).join("|");
+    } else {
+      prevCountRef.current = 0;
+    }
+    return () => {
+      isActive = false;
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      window.removeEventListener("gamepadconnected", handleConnect);
+      window.removeEventListener("gamepaddisconnected", handleDisconnect);
+    };
+  }, [getGamepads]);
+  return {
+    gamepads,
+    isAnyConnected: gamepads.length > 0,
+    connectedCount: gamepads.length,
+    getRawGamepad,
+    refresh
+  };
+}
+var STANDARD_AXIS_MAP = {
+  leftStickX: 0,
+  leftStickY: 1,
+  rightStickX: 2,
+  rightStickY: 3
+};
 function useVolume({
   setVolume: setVolumeInHook,
   toggleMute: toggleMuteInHook
@@ -9531,27 +9596,15 @@ function AchievementPopup({
   onDismiss,
   autoDismissMs = 5e3
 }) {
-  const [isVisible, setIsVisible] = useState(false);
-  const [isExiting, setIsExiting] = useState(false);
-  useEffect(() => {
-    requestAnimationFrame(() => {
-      setIsVisible(true);
-    });
-    const timer = setTimeout(() => {
-      handleDismiss();
-    }, autoDismissMs);
-    return () => clearTimeout(timer);
-  }, [autoDismissMs]);
-  const handleDismiss = () => {
-    setIsExiting(true);
-    setTimeout(() => {
-      onDismiss();
-    }, 300);
-  };
+  const { slideInRightClasses, triggerExit } = useAnimatedVisibility({
+    exitDuration: 300,
+    onExit: onDismiss,
+    autoDismissMs
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `fixed top-4 right-4 z-[100] transition-all duration-300 ${isVisible && !isExiting ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"}`,
+      className: `fixed top-4 right-4 z-[100] transition-all duration-300 ${slideInRightClasses}`,
       children: [
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-yellow-500 to-orange-500 blur-lg opacity-50 animate-pulse" }),
         /* @__PURE__ */ jsx("div", { className: "relative bg-gradient-to-r from-yellow-500 to-orange-500 p-[2px] rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "bg-gray-900 rounded-lg p-4 flex items-center gap-4 min-w-[320px]", children: [
@@ -9588,7 +9641,7 @@ function AchievementPopup({
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: handleDismiss,
+              onClick: triggerExit,
               className: "flex-shrink-0 text-gray-500 hover:text-white transition-colors",
               children: /* @__PURE__ */ jsx(X, { size: 18 })
             }