koin.js 1.0.13 → 1.0.15

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';
@@ -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."
+        ] })
+      ] })
     }
   );
 });
@@ -2387,26 +2435,49 @@ function getLayoutForSystem(system) {
   if (s.includes("ATARI")) return TWO_BUTTON_LAYOUT;
   return TWO_BUTTON_LAYOUT;
 }
-var DRAG_HOLD_DELAY = 350;
+
+// src/components/VirtualController/utils/dragConstraints.ts
+function constrainToViewport({
+  newXPercent,
+  newYPercent,
+  elementSize,
+  containerWidth,
+  containerHeight
+}) {
+  const xMargin = elementSize / 2 / containerWidth * 100;
+  const yMargin = elementSize / 2 / containerHeight * 100;
+  return {
+    x: Math.max(xMargin, Math.min(100 - xMargin, newXPercent)),
+    y: Math.max(yMargin, Math.min(100 - yMargin, newYPercent))
+  };
+}
+
+// src/components/VirtualController/hooks/useDrag.ts
+var DEFAULT_HOLD_DELAY = 350;
+var DEFAULT_CENTER_THRESHOLD = 0.4;
 var DRAG_MOVE_THRESHOLD = 10;
-var DRAG_CENTER_THRESHOLD = 0.4;
-function useTouchHandlers({
-  buttonType,
-  isSystemButton,
-  buttonSize,
+function useDrag({
+  elementSize,
   displayX,
   displayY,
   containerWidth,
   containerHeight,
-  onPress,
-  onPressDown,
-  onRelease,
-  onPositionChange
+  onPositionChange,
+  holdDelay = DEFAULT_HOLD_DELAY,
+  centerThreshold = DEFAULT_CENTER_THRESHOLD,
+  onDragStart,
+  onDragEnd
 }) {
+  const [isDragging, setIsDragging] = useState(false);
   const isDraggingRef = useRef(false);
-  const dragStartRef = useRef({ x: 0, y: 0 });
   const dragTimerRef = useRef(null);
   const touchStartPosRef = useRef({ x: 0, y: 0 });
+  const dragStartRef = useRef({
+    elementX: 0,
+    elementY: 0,
+    touchX: 0,
+    touchY: 0
+  });
   const clearDragTimer = useCallback(() => {
     if (dragTimerRef.current) {
       clearTimeout(dragTimerRef.current);
@@ -2416,23 +2487,129 @@ function useTouchHandlers({
   const startDragging = useCallback(
     (touchX, touchY) => {
       isDraggingRef.current = true;
+      setIsDragging(true);
       dragStartRef.current = {
-        x: touchX - displayX / 100 * containerWidth,
-        y: touchY - displayY / 100 * containerHeight
+        elementX: displayX,
+        elementY: displayY,
+        touchX,
+        touchY
       };
       if (navigator.vibrate) {
         navigator.vibrate([10, 30, 10]);
       }
+      onDragStart?.();
+    },
+    [displayX, displayY, onDragStart]
+  );
+  const checkDragStart = useCallback(
+    (touchX, touchY, elementRect) => {
+      if (!onPositionChange) return false;
+      touchStartPosRef.current = { x: touchX, y: touchY };
+      const centerX = elementRect.left + elementRect.width / 2;
+      const centerY = elementRect.top + elementRect.height / 2;
+      const distFromCenter = Math.sqrt(
+        Math.pow(touchX - centerX, 2) + Math.pow(touchY - centerY, 2)
+      );
+      const centerRadius = elementSize * centerThreshold;
+      if (distFromCenter < centerRadius) {
+        dragTimerRef.current = setTimeout(() => {
+          if (!isDraggingRef.current) {
+            startDragging(touchX, touchY);
+          }
+        }, holdDelay);
+        return true;
+      }
+      return false;
+    },
+    [onPositionChange, elementSize, centerThreshold, holdDelay, startDragging]
+  );
+  const checkMoveThreshold = useCallback(
+    (touchX, touchY) => {
+      if (!onPositionChange || isDraggingRef.current) return false;
+      const moveDistance = Math.sqrt(
+        Math.pow(touchX - touchStartPosRef.current.x, 2) + Math.pow(touchY - touchStartPosRef.current.y, 2)
+      );
+      if (moveDistance > DRAG_MOVE_THRESHOLD) {
+        clearDragTimer();
+        startDragging(touchX, touchY);
+        return true;
+      }
+      return false;
+    },
+    [onPositionChange, clearDragTimer, startDragging]
+  );
+  const handleDragMove = useCallback(
+    (touchX, touchY) => {
+      if (!isDraggingRef.current || !onPositionChange) return;
+      const deltaX = touchX - dragStartRef.current.touchX;
+      const deltaY = touchY - dragStartRef.current.touchY;
+      const newXPercent = dragStartRef.current.elementX + deltaX / containerWidth * 100;
+      const newYPercent = dragStartRef.current.elementY + deltaY / containerHeight * 100;
+      const constrained = constrainToViewport({
+        newXPercent,
+        newYPercent,
+        elementSize,
+        containerWidth,
+        containerHeight
+      });
+      onPositionChange(constrained.x, constrained.y);
+    },
+    [onPositionChange, containerWidth, containerHeight, elementSize]
+  );
+  const handleDragEnd = useCallback(() => {
+    clearDragTimer();
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+      setIsDragging(false);
+      onDragEnd?.();
+    }
+  }, [clearDragTimer, onDragEnd]);
+  return {
+    isDragging,
+    checkDragStart,
+    handleDragMove,
+    handleDragEnd,
+    clearDragTimer,
+    checkMoveThreshold
+  };
+}
+
+// src/components/VirtualController/hooks/useTouchHandlers.ts
+function useTouchHandlers({
+  buttonType,
+  isSystemButton,
+  buttonSize,
+  displayX,
+  displayY,
+  containerWidth,
+  containerHeight,
+  onPress,
+  onPressDown,
+  onRelease,
+  onPositionChange
+}) {
+  const isDraggingRef = useRef(false);
+  const drag = useDrag({
+    elementSize: buttonSize,
+    displayX,
+    displayY,
+    containerWidth,
+    containerHeight,
+    onPositionChange,
+    centerThreshold: 0.4,
+    onDragStart: () => {
+      isDraggingRef.current = true;
       if (!isSystemButton) {
         onRelease(buttonType);
       }
     },
-    [displayX, displayY, containerWidth, containerHeight, isSystemButton, buttonType, onRelease]
-  );
+    onDragEnd: () => {
+      isDraggingRef.current = false;
+    }
+  });
   const handleTouchStart = useCallback(
     (e) => {
       const touch = e.touches[0];
-      touchStartPosRef.current = { x: touch.clientX, y: touch.clientY };
       e.preventDefault();
       e.stopPropagation();
       if (navigator.vibrate) {
@@ -2447,57 +2624,32 @@ function useTouchHandlers({
         const target = e.currentTarget;
         if (!target) return;
         const rect = target.getBoundingClientRect();
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-        const distance = Math.sqrt(
-          Math.pow(touch.clientX - centerX, 2) + Math.pow(touch.clientY - centerY, 2)
-        );
-        const dragThreshold = buttonSize * DRAG_CENTER_THRESHOLD;
-        if (distance < dragThreshold) {
-          dragTimerRef.current = setTimeout(() => {
-            if (!isDraggingRef.current) {
-              startDragging(touch.clientX, touch.clientY);
-            }
-          }, DRAG_HOLD_DELAY);
-        }
+        drag.checkDragStart(touch.clientX, touch.clientY, rect);
       }
     },
-    [isSystemButton, buttonType, onPress, onPressDown, onPositionChange, buttonSize, startDragging]
+    [isSystemButton, buttonType, onPress, onPressDown, onPositionChange, drag]
   );
   const handleTouchMove = useCallback(
     (e) => {
       const touch = e.touches[0];
       if (onPositionChange && !isDraggingRef.current) {
-        const moveDistance = Math.sqrt(
-          Math.pow(touch.clientX - touchStartPosRef.current.x, 2) + Math.pow(touch.clientY - touchStartPosRef.current.y, 2)
-        );
-        if (moveDistance > DRAG_MOVE_THRESHOLD) {
-          clearDragTimer();
-          startDragging(touch.clientX, touch.clientY);
-        }
+        drag.checkMoveThreshold(touch.clientX, touch.clientY);
       }
-      if (isDraggingRef.current && onPositionChange) {
+      if (isDraggingRef.current) {
         e.preventDefault();
         e.stopPropagation();
-        const newX = touch.clientX - dragStartRef.current.x;
-        const newY = touch.clientY - dragStartRef.current.y;
-        const newXPercent = newX / containerWidth * 100;
-        const newYPercent = newY / containerHeight * 100;
-        const margin = buttonSize / 2 / Math.min(containerWidth, containerHeight) * 100;
-        const constrainedX = Math.max(margin, Math.min(100 - margin, newXPercent));
-        const constrainedY = Math.max(margin, Math.min(100 - margin, newYPercent));
-        onPositionChange(constrainedX, constrainedY);
+        drag.handleDragMove(touch.clientX, touch.clientY);
       }
     },
-    [onPositionChange, clearDragTimer, startDragging, containerWidth, containerHeight, buttonSize]
+    [onPositionChange, drag]
   );
   const handleTouchEnd = useCallback(
     (e) => {
-      clearDragTimer();
+      drag.clearDragTimer();
       if (isDraggingRef.current) {
         e.preventDefault();
         e.stopPropagation();
-        isDraggingRef.current = false;
+        drag.handleDragEnd();
         return;
       }
       e.preventDefault();
@@ -2506,15 +2658,15 @@ function useTouchHandlers({
         onRelease(buttonType);
       }
     },
-    [clearDragTimer, isSystemButton, buttonType, onRelease]
+    [drag, isSystemButton, buttonType, onRelease]
   );
   const handleTouchCancel = useCallback(
     (e) => {
-      clearDragTimer();
+      drag.clearDragTimer();
       if (isDraggingRef.current) {
         e.preventDefault();
         e.stopPropagation();
-        isDraggingRef.current = false;
+        drag.handleDragEnd();
         return;
       }
       e.preventDefault();
@@ -2523,11 +2675,11 @@ function useTouchHandlers({
         onRelease(buttonType);
       }
     },
-    [clearDragTimer, isSystemButton, buttonType, onRelease]
+    [drag, isSystemButton, buttonType, onRelease]
   );
   const cleanup = useCallback(() => {
-    clearDragTimer();
-  }, [clearDragTimer]);
+    drag.clearDragTimer();
+  }, [drag]);
   return {
     handleTouchStart,
     handleTouchMove,
@@ -2536,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 = {
@@ -2693,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)`;
@@ -3383,8 +3559,7 @@ function dispatchKeyboardEvent(type, code) {
   canvas.dispatchEvent(event);
   return true;
 }
-var DRAG_HOLD_DELAY2 = 350;
-var CENTER_TOUCH_RADIUS = 0.25;
+var CENTER_TOUCH_RADIUS = 0.35;
 var Dpad = React2.memo(function Dpad2({
   size = 180,
   x,
@@ -3400,10 +3575,6 @@ var Dpad = React2.memo(function Dpad2({
   const dpadRef = useRef(null);
   const activeTouchRef = useRef(null);
   const activeDirectionsRef = useRef(/* @__PURE__ */ new Set());
-  const [isDragging, setIsDragging] = useState(false);
-  const dragTimerRef = useRef(null);
-  const dragStartRef = useRef({ x: 0, y: 0, touchX: 0, touchY: 0 });
-  const touchStartPosRef = useRef({ x: 0, y: 0, time: 0 });
   const upPathRef = useRef(null);
   const downPathRef = useRef(null);
   const leftPathRef = useRef(null);
@@ -3411,6 +3582,13 @@ var Dpad = React2.memo(function Dpad2({
   const centerCircleRef = useRef(null);
   const displayX = customPosition ? customPosition.x : x;
   const displayY = customPosition ? customPosition.y : y;
+  const releaseAllDirections = useCallback((getKeyCode2) => {
+    activeDirectionsRef.current.forEach((dir) => {
+      const keyCode = getKeyCode2(dir);
+      if (keyCode) dispatchKeyboardEvent("keyup", keyCode);
+    });
+    activeDirectionsRef.current = /* @__PURE__ */ new Set();
+  }, []);
   const getKeyCode = useCallback((direction) => {
     if (!controls) {
       const defaults = {
@@ -3423,6 +3601,19 @@ var Dpad = React2.memo(function Dpad2({
     }
     return controls[direction] || "";
   }, [controls]);
+  const drag = useDrag({
+    elementSize: size,
+    displayX,
+    displayY,
+    containerWidth,
+    containerHeight,
+    onPositionChange,
+    centerThreshold: CENTER_TOUCH_RADIUS,
+    onDragStart: () => {
+      releaseAllDirections(getKeyCode);
+      updateVisuals(/* @__PURE__ */ new Set());
+    }
+  });
   const getDirectionsFromTouch = useCallback((touchX, touchY, rect) => {
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
@@ -3484,51 +3675,20 @@ var Dpad = React2.memo(function Dpad2({
     activeDirectionsRef.current = newDirections;
     updateVisuals(newDirections);
   }, [getKeyCode, updateVisuals]);
-  const clearDragTimer = useCallback(() => {
-    if (dragTimerRef.current) {
-      clearTimeout(dragTimerRef.current);
-      dragTimerRef.current = null;
-    }
-  }, []);
-  const startDragging = useCallback((touchX, touchY) => {
-    setIsDragging(true);
-    dragStartRef.current = {
-      x: displayX,
-      y: displayY,
-      touchX,
-      touchY
-    };
-    activeDirectionsRef.current.forEach((dir) => {
-      const keyCode = getKeyCode(dir);
-      if (keyCode) dispatchKeyboardEvent("keyup", keyCode);
-    });
-    activeDirectionsRef.current = /* @__PURE__ */ new Set();
-    updateVisuals(/* @__PURE__ */ new Set());
-    if (navigator.vibrate) navigator.vibrate([10, 30, 10]);
-  }, [displayX, displayY, getKeyCode, updateVisuals]);
   const handleTouchStart = useCallback((e) => {
     e.preventDefault();
     if (activeTouchRef.current !== null) return;
     const touch = e.changedTouches[0];
     activeTouchRef.current = touch.identifier;
-    touchStartPosRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
     const rect = dpadRef.current?.getBoundingClientRect();
     if (!rect) return;
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
-    const distFromCenter = Math.sqrt(
-      Math.pow(touch.clientX - centerX, 2) + Math.pow(touch.clientY - centerY, 2)
-    );
-    const centerRadius = size * CENTER_TOUCH_RADIUS;
-    if (distFromCenter < centerRadius && onPositionChange) {
-      dragTimerRef.current = setTimeout(() => {
-        startDragging(touch.clientX, touch.clientY);
-      }, DRAG_HOLD_DELAY2);
+    if (onPositionChange) {
+      drag.checkDragStart(touch.clientX, touch.clientY, rect);
     }
-    if (!isDragging) {
+    if (!drag.isDragging) {
       updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
     }
-  }, [getDirectionsFromTouch, updateDirections, isDragging, size, onPositionChange, startDragging]);
+  }, [getDirectionsFromTouch, updateDirections, onPositionChange, drag]);
   const handleTouchMove = useCallback((e) => {
     e.preventDefault();
     let touch = null;
@@ -3539,31 +3699,19 @@ var Dpad = React2.memo(function Dpad2({
       }
     }
     if (!touch) return;
-    if (isDragging && onPositionChange) {
-      const deltaX = touch.clientX - dragStartRef.current.touchX;
-      const deltaY = touch.clientY - dragStartRef.current.touchY;
-      const newXPercent = dragStartRef.current.x + deltaX / containerWidth * 100;
-      const newYPercent = dragStartRef.current.y + deltaY / containerHeight * 100;
-      const margin = size / 2 / Math.min(containerWidth, containerHeight) * 100;
-      const constrainedX = Math.max(margin, Math.min(100 - margin, newXPercent));
-      const constrainedY = Math.max(margin, Math.min(100 - margin, newYPercent));
-      onPositionChange(constrainedX, constrainedY);
+    if (drag.isDragging) {
+      drag.handleDragMove(touch.clientX, touch.clientY);
     } else {
-      const moveDistance = Math.sqrt(
-        Math.pow(touch.clientX - touchStartPosRef.current.x, 2) + Math.pow(touch.clientY - touchStartPosRef.current.y, 2)
-      );
-      if (moveDistance > 15) {
-        clearDragTimer();
-      }
       const rect = dpadRef.current?.getBoundingClientRect();
       if (rect) {
+        drag.clearDragTimer();
         updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
       }
     }
-  }, [isDragging, onPositionChange, containerWidth, containerHeight, size, getDirectionsFromTouch, updateDirections, clearDragTimer]);
+  }, [drag, getDirectionsFromTouch, updateDirections]);
   const handleTouchEnd = useCallback((e) => {
     e.preventDefault();
-    clearDragTimer();
+    drag.clearDragTimer();
     let touchEnded = false;
     for (let i = 0; i < e.changedTouches.length; i++) {
       if (e.changedTouches[i].identifier === activeTouchRef.current) {
@@ -3573,8 +3721,8 @@ var Dpad = React2.memo(function Dpad2({
     }
     if (touchEnded) {
       activeTouchRef.current = null;
-      if (isDragging) {
-        setIsDragging(false);
+      if (drag.isDragging) {
+        drag.handleDragEnd();
       } else {
         activeDirectionsRef.current.forEach((dir) => {
           const keyCode = getKeyCode(dir);
@@ -3584,22 +3732,13 @@ var Dpad = React2.memo(function Dpad2({
         updateVisuals(/* @__PURE__ */ new Set());
       }
     }
-  }, [getKeyCode, updateVisuals, isDragging, clearDragTimer]);
-  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);
-      clearDragTimer();
-    };
-  }, [handleTouchStart, handleTouchMove, handleTouchEnd, clearDragTimer]);
+  }, [getKeyCode, updateVisuals, 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";
@@ -3610,21 +3749,21 @@ var Dpad = React2.memo(function Dpad2({
     "div",
     {
       ref: dpadRef,
-      className: `absolute pointer-events-auto touch-manipulation select-none ${isDragging ? "opacity-60" : ""}`,
+      className: `absolute pointer-events-auto touch-manipulation select-none ${drag.isDragging ? "opacity-60" : ""}`,
       style: {
         top: 0,
         left: 0,
-        transform: `translate3d(${leftPx}px, ${topPx}px, 0)${isDragging ? " scale(1.05)" : ""}`,
+        transform: `translate3d(${leftPx}px, ${topPx}px, 0)${drag.isDragging ? " scale(1.05)" : ""}`,
         width: size,
         height: size,
         opacity: isLandscape ? 0.75 : 0.9,
         WebkitTouchCallout: "none",
         WebkitUserSelect: "none",
         touchAction: "none",
-        transition: isDragging ? "none" : "transform 0.1s ease-out"
+        transition: drag.isDragging ? "none" : "transform 0.1s ease-out"
       },
       children: [
-        /* @__PURE__ */ jsx("div", { className: `absolute inset-0 rounded-full bg-black/40 backdrop-blur-md border shadow-lg ${isDragging ? "border-white/50 ring-2 ring-white/30" : "border-white/10"}` }),
+        /* @__PURE__ */ jsx("div", { className: `absolute inset-0 rounded-full bg-black/40 backdrop-blur-md border shadow-lg ${drag.isDragging ? "border-white/50 ring-2 ring-white/30" : "border-white/10"}` }),
         /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", className: "drop-shadow-xl relative z-10", children: [
           /* @__PURE__ */ jsx("path", { ref: upPathRef, d: dUp, fill: "rgba(255,255,255,0.05)", stroke: "rgba(255,255,255,0.2)", strokeWidth: "1", className: "transition-all duration-75" }),
           /* @__PURE__ */ jsx("path", { ref: rightPathRef, d: dRight, fill: "rgba(255,255,255,0.05)", stroke: "rgba(255,255,255,0.2)", strokeWidth: "1", className: "transition-all duration-75" }),
@@ -3637,9 +3776,9 @@ var Dpad = React2.memo(function Dpad2({
               cx: "50",
               cy: "50",
               r: "12",
-              fill: isDragging ? systemColor : "rgba(0,0,0,0.5)",
-              stroke: isDragging ? "#fff" : "rgba(255,255,255,0.3)",
-              strokeWidth: isDragging ? 2 : 1
+              fill: drag.isDragging ? systemColor : "rgba(0,0,0,0.5)",
+              stroke: drag.isDragging ? "#fff" : "rgba(255,255,255,0.3)",
+              strokeWidth: drag.isDragging ? 2 : 1
             }
           ),
           /* @__PURE__ */ jsx("path", { d: "M 50,15 L 50,25 M 45,20 L 50,15 L 55,20", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "0.8", pointerEvents: "none" }),
@@ -3799,6 +3938,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,
@@ -3810,8 +3976,22 @@ 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();
-  const layout = getLayoutForSystem(system);
+  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) {
       return btn.showInPortrait;
@@ -3965,6 +4145,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,
           {
@@ -3977,7 +4165,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(
@@ -3991,7 +4179,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
           },
@@ -4067,6 +4255,45 @@ function FloatingFullscreenButton({ onClick, disabled = false }) {
     }
   );
 }
+function FloatingPauseButton({
+  isPaused,
+  onClick,
+  disabled = false,
+  systemColor = "#00FF41"
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `
+                fixed top-3 left-3 z-50
+                px-3 py-2 rounded-xl
+                bg-black/80 backdrop-blur-md
+                border-2
+                shadow-xl
+                flex items-center gap-2
+                transition-all duration-300
+                hover:scale-105
+                active:scale-95
+                disabled:opacity-40 disabled:cursor-not-allowed
+                touch-manipulation
+            `,
+      style: {
+        paddingTop: "max(env(safe-area-inset-top, 0px), 8px)",
+        borderColor: isPaused ? systemColor : "rgba(255,255,255,0.3)"
+      },
+      "aria-label": isPaused ? "Resume game" : "Pause game",
+      children: isPaused ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Play, { size: 16, style: { color: systemColor }, fill: systemColor }),
+        /* @__PURE__ */ jsx("span", { className: "text-white text-xs font-bold uppercase tracking-wider", children: "Play" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Pause, { size: 16, className: "text-white/80" }),
+        /* @__PURE__ */ jsx("span", { className: "text-white text-xs font-bold uppercase tracking-wider", children: "Pause" })
+      ] })
+    }
+  );
+}
 function LoadingSpinner({ color, size = "lg" }) {
   const sizeClass = size === "lg" ? "w-12 h-12" : "w-8 h-8";
   return /* @__PURE__ */ jsx(Loader2, { className: `${sizeClass} animate-spin`, style: { color } });
@@ -4272,6 +4499,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,
@@ -4287,7 +4553,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]);
@@ -4303,27 +4572,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);
   };
@@ -4331,52 +4593,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] || "")
                 }
               )
@@ -4384,199 +4652,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;
+      ] }, group.label)) })
     }
-    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 GamepadMapper({
   isOpen,
   gamepads,
@@ -4587,7 +4666,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) {
@@ -4622,7 +4704,7 @@ function GamepadMapper({
                 [listeningFor]: i
               }
             }));
-            setListeningFor(null);
+            stopListening();
             return;
           }
         }
@@ -4635,21 +4717,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,
@@ -4664,127 +4732,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",
           {
@@ -4810,9 +4770,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,
@@ -4823,39 +4875,21 @@ function CheatModal({
 }) {
   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: [
+    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 })
@@ -4865,18 +4899,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" })
                 }
               ),
@@ -4902,10 +4936,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) {
@@ -4946,7 +4979,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;
@@ -4961,33 +4993,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) => {
@@ -5106,10 +5122,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,
@@ -5256,36 +5271,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 })
@@ -5297,9 +5304,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 } })
@@ -5308,17 +5315,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,
@@ -7529,6 +7528,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
@@ -9200,6 +9364,14 @@ var GamePlayerInner = memo(function GamePlayerInner2(props) {
               disabled: status === "loading" || status === "error"
             }
           ),
+          isFullscreen2 && isMobile && (status === "running" || status === "paused") && /* @__PURE__ */ jsx(
+            FloatingPauseButton,
+            {
+              isPaused,
+              onClick: handlePauseToggle,
+              systemColor
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 z-40 flex flex-col items-end gap-2 pointer-events-auto", children: [
             /* @__PURE__ */ jsx(
               RecordingIndicator_default,
@@ -9408,27 +9580,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: [
@@ -9465,7 +9625,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 })
             }