koin.js 1.0.7 → 1.0.9

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import React5, { memo, useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { Play, Pause, RotateCcw, Rewind, Save, Download, Camera, Video, Circle, Monitor, ChevronDown, RefreshCw, HelpCircle, Maximize, Gamepad2, Joystick, Code, Power, Square, Keyboard, X, Palette, ChevronUp, Gauge, VolumeX, Volume1, Volume2, Loader2, Trophy, AlertTriangle, List, Settings, PauseCircle, Check, Clock, User, Copy, Lock, Zap, HardDrive, Trash2, Cpu, AlertCircle, FileCode, ExternalLink, EyeOff, Eye, Shield, CheckCircle, LogOut, Info, XCircle } from 'lucide-react';
+import React2, { memo, createContext, useState, useRef, useEffect, useMemo, useCallback, useContext } from 'react';
+import { Play, Pause, RotateCcw, Rewind, Save, Download, Camera, Video, Circle, Monitor, ChevronDown, RefreshCw, HelpCircle, Maximize, Gamepad2, Joystick, Code, Settings, Power, Square, Keyboard, X, Palette, ChevronUp, Gauge, 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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Nostalgist } from 'nostalgist';
 
@@ -33,20 +33,23 @@ var ControlButton = memo(function ControlButton2({
       onTouchEnd,
       disabled,
       className: `
-        group relative flex flex-col items-center gap-1 px-2 sm:px-3 py-2 rounded-lg
-        transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed
-        select-none flex-shrink-0
-        ${active ? "" : danger ? "hover:bg-red-500/20 text-gray-400 hover:text-red-400" : "hover:bg-white/10 text-gray-400 hover:text-white"}
-        ${className}
-      `,
+                    flex flex-col items-center justify-center gap-1.5
+                    px-3 py-2 rounded-lg
+                    transition-all duration-200
+                    disabled:opacity-50 disabled:cursor-not-allowed
+                    hover:bg-white/10 active:bg-white/20
+                    ${active ? "bg-white/10 ring-1 ring-inset" : ""}
+                    ${danger ? "hover:bg-red-500/20 text-red-400" : "text-gray-400 hover:text-white"}
+                    ${className}
+                `,
       style: active ? {
         backgroundColor: `${systemColor}20`,
         color: systemColor
       } : {},
       title: label,
       children: [
-        /* @__PURE__ */ jsx(Icon, { size: iconSize, className: "transition-transform group-hover:scale-110" }),
-        /* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold uppercase tracking-wider opacity-70", children: label })
+        /* @__PURE__ */ jsx(Icon, { size: iconSize, className: `transition-transform duration-200 ${active ? "scale-110" : "group-hover:scale-110"}`, style: active ? { color: systemColor } : void 0 }),
+        /* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold uppercase tracking-wider whitespace-nowrap", style: { color: active ? systemColor : void 0 }, children: label })
       ]
     }
   );
@@ -54,10 +57,21 @@ var ControlButton = memo(function ControlButton2({
 var SPEED_OPTIONS = [1, 2];
 function SpeedMenu({ speed, onSpeedChange, disabled = false }) {
   const [showMenu, setShowMenu] = useState(false);
+  const buttonRef = React2.useRef(null);
+  const getMenuPosition = () => {
+    if (!buttonRef.current) return {};
+    const rect = buttonRef.current.getBoundingClientRect();
+    return {
+      bottom: `${window.innerHeight - rect.top + 8}px`,
+      left: `${rect.left + rect.width / 2}px`,
+      transform: "translateX(-50%)"
+    };
+  };
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: buttonRef,
         onClick: () => setShowMenu(!showMenu),
         disabled,
         className: `
@@ -84,25 +98,32 @@ function SpeedMenu({ speed, onSpeedChange, disabled = false }) {
       }
     ),
     showMenu && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-black/90 backdrop-blur-md border border-white/20 rounded-lg p-1.5 shadow-xl z-50 flex flex-col gap-1 min-w-[80px]", children: SPEED_OPTIONS.map((s) => /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          onClick: () => {
-            onSpeedChange(s);
-            setShowMenu(false);
-          },
-          className: `
+          className: "fixed z-[9999] bg-black/90 backdrop-blur-md border border-white/20 rounded-lg p-1.5 shadow-xl flex flex-col gap-1 min-w-[80px]",
+          style: getMenuPosition(),
+          children: SPEED_OPTIONS.map((s) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                onSpeedChange(s);
+                setShowMenu(false);
+              },
+              className: `
                                     px-3 py-2 rounded text-xs font-mono font-bold text-center transition-colors
                                     ${speed === s ? "bg-white/20 text-white" : "hover:bg-white/10 text-gray-400 hover:text-white"}
                                 `,
-          children: [
-            s,
-            "x"
-          ]
-        },
-        s
-      )) })
+              children: [
+                s,
+                "x"
+              ]
+            },
+            s
+          ))
+        }
+      )
     ] })
   ] });
 }
@@ -171,6 +192,260 @@ function HardcoreTooltip({ show, message = "Disabled in Hardcore mode", children
     /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-amber-500/90 text-black text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50", children: message })
   ] });
 }
+
+// src/locales/en.ts
+var en = {
+  controls: {
+    play: "Play",
+    pause: "Pause",
+    reset: "Reset",
+    rewind: "Rewind",
+    save: "Save",
+    load: "Load",
+    snap: "Snap",
+    rec: "Rec",
+    stopRec: "Stop",
+    startRecord: "Start recording",
+    stopRecord: "Stop recording",
+    mute: "Mute",
+    unmute: "Unmute",
+    help: "Help",
+    full: "Full",
+    keys: "Keys",
+    menuOpen: "Open menu",
+    menuClose: "Close menu",
+    gamepadConnected: "{{count}} controller{{plural}} connected - click to configure",
+    noGamepad: "No controller detected - press any button on your gamepad to connect",
+    press: "Press",
+    startBtn: "START",
+    selectBtn: "SEL"
+  },
+  common: {
+    disabledInHardcore: "Disabled in Hardcore mode",
+    notSupported: "Not supported on this console",
+    playToEnableRewind: "Play for a few seconds to enable rewind"
+  },
+  settings: {
+    title: "Settings",
+    general: "General",
+    audio: "Audio",
+    video: "Video",
+    input: "Input",
+    advanced: "Advanced",
+    fullscreen: "Fullscreen",
+    controls: "Controls",
+    gamepad: "Gamepad",
+    cheats: "Cheats",
+    retroAchievements: "RetroAchievements",
+    shortcuts: "Shortcuts",
+    exit: "Exit",
+    language: "Language",
+    selectLanguage: "Select Language"
+  },
+  overlay: {
+    play: "PLAY",
+    systemFirmware: "SYSTEM FIRMWARE",
+    loading: "Loading {{system}}",
+    initializing: "Initializing emulator",
+    loadingSave: "Loading Save",
+    preparingSlot: "Preparing slot {{num}}",
+    systemError: "System Error",
+    failedInit: "Failed to initialize emulator",
+    retry: "Retry",
+    slotReady: "Slot {{num}} ready",
+    paused: "Paused"
+  },
+  notifications: {
+    saved: "State saved",
+    loaded: "State loaded",
+    error: "Error",
+    recordingStarted: "Recording started",
+    recordingSaved: "Recording saved",
+    downloaded: "State downloaded",
+    loadedFile: "State loaded from file",
+    savedSlot: "Saved to slot {{num}}",
+    loadedSlot: "Loaded from slot {{num}}",
+    deletedSlot: "Deleted slot {{num}}",
+    emptySlot: "Empty slot",
+    noSaveFound: "No save found",
+    failedSave: "Failed to save",
+    failedLoad: "Failed to load",
+    failedDelete: "Failed to delete",
+    failedFetch: "Failed to load save slots",
+    controllerConnected: "Controller Connected",
+    controllerDisconnected: "Controller Lost",
+    controllerReady: "Controller ready to use",
+    insertCoin: "Press SHIFT to insert coin",
+    insertCoinTitle: "\u{1FA99} Insert Coin",
+    controlsSaved: "Controls saved",
+    controlsReset: "Controls reset to defaults"
+  },
+  modals: {
+    shortcuts: {
+      title: "Keyboard Shortcuts",
+      playerShortcuts: "Player Shortcuts",
+      overlays: "Overlays",
+      recording: "Recording",
+      showHelp: "Show Help",
+      perfOverlay: "Performance Overlay",
+      inputDisplay: "Input Display",
+      toggleRec: "Toggle Recording",
+      toggleMute: "Toggle Mute",
+      pressEsc: "Press ESC to close"
+    },
+    controls: {
+      title: "Controls",
+      keyboard: "Keyboard Mapping",
+      description: "Click a button and press a key to remap",
+      pressKey: "Press...",
+      reset: "Reset to Default",
+      save: "Save Controls"
+    },
+    gamepad: {
+      title: "Gamepad Settings",
+      noGamepad: "No gamepad detected",
+      connected: "{{count}} controller{{s}} connected",
+      none: "No controllers detected",
+      player: "Player:",
+      noController: "No controller detected",
+      pressAny: "Press any button on your gamepad to connect",
+      waiting: "Waiting for input...",
+      pressButton: "Press a button on your controller for {{button}}",
+      pressEsc: "Press Escape to cancel",
+      reset: "Reset to Default",
+      save: "Save Settings"
+    },
+    cheats: {
+      title: "Cheats",
+      addCheat: "Add Cheat",
+      available: "{{count}} cheat{{s}} available",
+      emptyTitle: "No cheats available",
+      emptyDesc: "No cheat codes found for this game",
+      copy: "Copy code",
+      active: "{{count}} cheat{{s}} active",
+      toggleHint: "Click a cheat to toggle it on/off"
+    },
+    saveSlots: {
+      title: "Save States",
+      saveTitle: "Save Game",
+      loadTitle: "Load Game",
+      emptySlot: "Empty Slot",
+      subtitleSave: "Choose a slot to save your progress",
+      subtitleLoad: "Select a save to restore",
+      loading: "Loading saves...",
+      locked: "Slot {{num}} Locked",
+      upgrade: "Upgrade to unlock more save slots",
+      autoSave: "Auto-Save Slot",
+      autoSaveDesc: "Reserved for automatic saves",
+      noData: "No save data",
+      slot: "Slot {{num}}",
+      footerSave: "Saves are stored in the cloud and sync across devices",
+      footerLoad: "Your progress will be restored to the selected save point"
+    },
+    bios: {
+      title: "BIOS Selection",
+      description: "Select a BIOS file to use for this game",
+      warningTitle: "Note:",
+      warning: "Changing BIOS requires the emulator to restart. Your unsaved progress will be lost.",
+      systemDefault: "System Default",
+      active: "Active",
+      defaultDesc: "Use the emulator's built-in or default BIOS",
+      emptyTitle: "No BIOS files found for this console.",
+      emptyDesc: "Upload BIOS files in your Dashboard Library.",
+      footer: "System Firmware Settings"
+    }
+  },
+  retroAchievements: {
+    title: "RetroAchievements",
+    login: "Login",
+    logout: "Logout",
+    username: "Username",
+    password: "Password",
+    hardcore: "Hardcore Mode",
+    achievements: "Achievements",
+    locked: "Locked",
+    unlocked: "Unlocked",
+    mastered: "Mastered",
+    identifying: "Identifying game...",
+    achievementsAvailable: "{{count}} achievements available",
+    gameNotSupported: "Connected - Game not in RA database",
+    connect: "Connect RetroAchievements",
+    connected: "RetroAchievements (connected)",
+    createAccount: "Create an account",
+    privacy: "Privacy:",
+    privacyText: "Your password is only used to authenticate with RetroAchievements. It is never stored.",
+    connecting: "Connecting...",
+    connectAccount: "Connect your account to track achievements",
+    poweredBy: "Powered by",
+    connectedStatus: "Connected",
+    yourUsername: "Your RA username",
+    yourPassword: "Your RA password",
+    usernameRequired: "Username and Password are required",
+    noGame: "No game loaded",
+    loadGame: "Load a game to see achievements",
+    noAchievements: "No achievements found",
+    notSupported: "This game may not be supported",
+    ptsRemaining: "{{count}} pts remaining",
+    filters: {
+      all: "All",
+      locked: "Locked",
+      unlocked: "Unlocked"
+    }
+  },
+  overlays: {
+    performance: {
+      title: "Stats",
+      fps: "FPS",
+      frameTime: "FT",
+      memory: "MEM",
+      core: "Core",
+      input: "INPUT",
+      active: "ACTIVE"
+    },
+    toast: {
+      saved: "Game Saved",
+      loaded: "Game Loaded",
+      error: "Error"
+    },
+    recording: {
+      started: "Recording Started",
+      stopped: "Recording Stopped",
+      saved: "Recording Saved",
+      paused: "PAUSED",
+      recording: "RECORDING",
+      resume: "Resume recording",
+      pause: "Pause recording",
+      stop: "Stop and save recording",
+      hover: "Hover for controls"
+    }
+  }
+};
+var KoinI18nContext = createContext(en);
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const sourceValue = source[key];
+      const targetValue = result[key];
+      if (sourceValue && typeof sourceValue === "object" && targetValue && typeof targetValue === "object" && !Array.isArray(sourceValue)) {
+        result[key] = deepMerge(targetValue, sourceValue);
+      } else if (sourceValue !== void 0) {
+        result[key] = sourceValue;
+      }
+    }
+  }
+  return result;
+}
+var KoinI18nProvider = ({ children, translations }) => {
+  const value = useMemo(() => {
+    if (!translations) return en;
+    return deepMerge(en, translations);
+  }, [translations]);
+  return /* @__PURE__ */ jsx(KoinI18nContext.Provider, { value, children });
+};
+function useKoinTranslation() {
+  return useContext(KoinI18nContext);
+}
 var PlaybackControls = memo(function PlaybackControls2({
   isPaused,
   isRunning,
@@ -190,20 +465,30 @@ var PlaybackControls = memo(function PlaybackControls2({
   systemColor = "#00FF41",
   hardcoreRestrictions
 }) {
+  const t = useKoinTranslation();
   const hasRewindHistory = rewindBufferSize > 0;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-shrink-0", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4 w-full sm:w-auto sm:flex-nowrap sm:gap-3 flex-shrink-0", children: [
     /* @__PURE__ */ jsx(
       ControlButton,
       {
         onClick: onPauseToggle,
         icon: !isRunning || isPaused ? Play : Pause,
-        label: !isRunning || isPaused ? "Play" : "Pause",
+        label: !isRunning || isPaused ? t.controls.play : t.controls.pause,
         active: isPaused,
         disabled,
         systemColor
       }
     ),
-    /* @__PURE__ */ jsx(ControlButton, { onClick: onRestart, icon: RotateCcw, label: "Reset", disabled, systemColor }),
+    /* @__PURE__ */ jsx(
+      ControlButton,
+      {
+        onClick: onRestart,
+        icon: RotateCcw,
+        label: t.controls.reset,
+        disabled,
+        systemColor
+      }
+    ),
     /* @__PURE__ */ jsx(SpeedMenu, { speed, onSpeedChange, disabled }),
     /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
       /* @__PURE__ */ jsx(
@@ -215,7 +500,7 @@ var PlaybackControls = memo(function PlaybackControls2({
           onTouchStart: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStart : void 0,
           onTouchEnd: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStop : void 0,
           icon: Rewind,
-          label: "Rewind",
+          label: t.controls.rewind,
           active: isRewinding,
           disabled: disabled || !hasRewindHistory || hardcoreRestrictions?.canUseRewind === false,
           systemColor
@@ -226,10 +511,10 @@ var PlaybackControls = memo(function PlaybackControls2({
         HardcoreTooltip,
         {
           show: hardcoreRestrictions?.canUseRewind === false,
-          message: hardcoreRestrictions?.isHardcore ? "Disabled in Hardcore mode" : "Not supported on this console"
+          message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
         }
       ),
-      hardcoreRestrictions?.canUseRewind !== false && !hasRewindHistory && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-black/90 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50", children: "Play for a few seconds to enable rewind" })
+      hardcoreRestrictions?.canUseRewind !== false && !hasRewindHistory && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-black/90 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50", children: t.common.playToEnableRewind })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "w-px h-8 bg-white/10 mx-1" }),
     /* @__PURE__ */ jsx(
@@ -432,7 +717,8 @@ var SaveLoadControls = memo(function SaveLoadControls2({
   autoSavePaused = false,
   onAutoSaveToggle
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-3 sm:px-4 border-x border-white/10 flex-shrink-0", children: [
+  const t = useKoinTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4 w-full sm:w-auto sm:flex-nowrap sm:gap-3 px-3 sm:px-4 sm:border-x sm:border-white/10 flex-shrink-0", children: [
     autoSaveEnabled && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
       AutoSaveIndicator,
       {
@@ -449,12 +735,18 @@ var SaveLoadControls = memo(function SaveLoadControls2({
         {
           onClick: hardcoreRestrictions?.canUseSaveStates === false ? void 0 : onSave,
           icon: Save,
-          label: "Save",
+          label: t.controls.save,
           disabled: disabled || saveDisabled || hardcoreRestrictions?.canUseSaveStates === false,
           systemColor
         }
       ),
-      /* @__PURE__ */ jsx(HardcoreTooltip, { show: hardcoreRestrictions?.canUseSaveStates === false })
+      /* @__PURE__ */ jsx(
+        HardcoreTooltip,
+        {
+          show: hardcoreRestrictions?.canUseSaveStates === false,
+          message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative group flex-shrink-0", children: [
       /* @__PURE__ */ jsx(
@@ -462,19 +754,25 @@ var SaveLoadControls = memo(function SaveLoadControls2({
         {
           onClick: hardcoreRestrictions?.canUseSaveStates === false ? void 0 : onLoad,
           icon: Download,
-          label: "Load",
+          label: t.controls.load,
           disabled: disabled || loadDisabled || hardcoreRestrictions?.canUseSaveStates === false,
           systemColor
         }
       ),
-      /* @__PURE__ */ jsx(HardcoreTooltip, { show: hardcoreRestrictions?.canUseSaveStates === false })
+      /* @__PURE__ */ jsx(
+        HardcoreTooltip,
+        {
+          show: hardcoreRestrictions?.canUseSaveStates === false,
+          message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
       ControlButton,
       {
         onClick: onScreenshot,
         icon: Camera,
-        label: "Snap",
+        label: t.controls.snap,
         disabled: disabled || saveDisabled,
         systemColor
       }
@@ -485,7 +783,7 @@ var SaveLoadControls = memo(function SaveLoadControls2({
         onClick: onRecordToggle,
         disabled,
         className: `flex flex-col items-center gap-1 px-2 sm:px-3 py-2 rounded-lg transition-all duration-200 hover:bg-white/10 ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
-        title: isRecording ? "Stop recording" : "Start recording",
+        title: isRecording ? t.controls.stopRecord : t.controls.startRecord,
         children: [
           /* @__PURE__ */ jsx("div", { className: "relative", children: isRecording ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Video, { size: 20, className: "text-red-500" }),
@@ -496,7 +794,7 @@ var SaveLoadControls = memo(function SaveLoadControls2({
             {
               className: "text-[10px] font-bold uppercase tracking-wider",
               style: { color: isRecording ? "#FF3333" : void 0 },
-              children: isRecording ? "REC" : "Rec"
+              children: t.controls.rec
             }
           )
         ]
@@ -629,6 +927,9 @@ function RAButton({
   achievementCount,
   className = ""
 }) {
+  const t = useKoinTranslation();
+  const title = isGameFound ? `${t.retroAchievements.title} (${achievementCount} achievements)` : isConnected ? t.retroAchievements.connected : t.retroAchievements.title;
+  const tooltip = isIdentifying ? t.retroAchievements.identifying : isGameFound ? t.retroAchievements.achievementsAvailable.replace("{{count}}", achievementCount.toString()) : isConnected ? t.retroAchievements.gameNotSupported : t.retroAchievements.connect;
   return /* @__PURE__ */ jsxs("div", { className: `relative group ${className}`, children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -641,7 +942,7 @@ function RAButton({
           select-none
           ${isGameFound ? "bg-gradient-to-b from-yellow-500/30 to-orange-500/20 text-yellow-400 ring-1 ring-yellow-500/50 shadow-[0_0_12px_rgba(234,179,8,0.3)]" : isConnected ? "bg-yellow-500/10 text-yellow-400/70 ring-1 ring-yellow-500/30" : "hover:bg-white/10 text-gray-400 hover:text-white"}
         `,
-        title: isGameFound ? `RetroAchievements (${achievementCount} achievements)` : isConnected ? "RetroAchievements (connected)" : "RetroAchievements",
+        title,
         children: [
           isIdentifying ? /* @__PURE__ */ jsx(Loader2, { size: 20, className: "animate-spin text-yellow-400" }) : /* @__PURE__ */ jsx(
             Trophy,
@@ -662,13 +963,14 @@ function RAButton({
           absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-black
           ${isGameFound ? "bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.8)]" : "bg-yellow-500 shadow-[0_0_6px_rgba(234,179,8,0.6)]"}
         `, children: isGameFound && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-green-400 rounded-full animate-ping opacity-50" }) }),
-    /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900/95 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 border border-white/10", children: isIdentifying ? "Identifying game..." : isGameFound ? `${achievementCount} achievements available` : isConnected ? "Connected - Game not in RA database" : "Connect RetroAchievements" })
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900/95 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 border border-white/10", children: tooltip })
   ] });
 }
 var SettingsControls = memo(function SettingsControls2({
   onFullscreen,
   onControls,
   onGamepadSettings,
+  onSettings,
   onCheats,
   onRetroAchievements,
   onShowShortcuts,
@@ -685,8 +987,10 @@ var SettingsControls = memo(function SettingsControls2({
   raAchievementCount = 0,
   raIsIdentifying = false
 }) {
+  const t = useKoinTranslation();
   const gamepadIndicatorText = gamepadCount > 0 ? Array.from({ length: gamepadCount }, (_, i) => `P${i + 1}`).join(" ") : "";
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-shrink-0", children: [
+  const gamepadConnectedTitle = t.controls.gamepadConnected.replace("{{count}}", gamepadCount.toString()).replace("{{plural}}", gamepadCount > 1 ? "s" : "");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4 w-full sm:w-auto sm:flex-nowrap sm:gap-3 flex-shrink-0", children: [
     /* @__PURE__ */ jsx(
       ShaderDropdown_default,
       {
@@ -697,15 +1001,15 @@ var SettingsControls = memo(function SettingsControls2({
         disabled
       }
     ),
-    onShowShortcuts && /* @__PURE__ */ jsx(ControlButton, { onClick: onShowShortcuts, icon: HelpCircle, label: "Help", disabled, className: "hidden sm:flex", systemColor }),
-    /* @__PURE__ */ jsx(ControlButton, { onClick: onFullscreen, icon: Maximize, label: "Full", disabled, className: "hidden sm:flex", systemColor }),
-    /* @__PURE__ */ jsx(ControlButton, { onClick: onControls, icon: Gamepad2, label: "Keys", disabled, className: "hidden sm:flex", systemColor }),
+    onShowShortcuts && /* @__PURE__ */ jsx(ControlButton, { onClick: onShowShortcuts, icon: HelpCircle, label: t.controls.help, disabled, className: "hidden sm:flex", systemColor }),
+    /* @__PURE__ */ jsx(ControlButton, { onClick: onFullscreen, icon: Maximize, label: t.controls.full, disabled, className: "hidden sm:flex", systemColor }),
+    /* @__PURE__ */ jsx(ControlButton, { onClick: onControls, icon: Gamepad2, label: t.controls.keys, disabled, className: "hidden sm:flex", systemColor }),
     gamepadCount > 0 ? /* @__PURE__ */ jsxs(
       "button",
       {
         onClick: onGamepadSettings,
         className: "relative group flex flex-col items-center gap-1 px-2 sm:px-3 py-2 rounded-lg transition-all duration-200 hover:bg-white/10 flex-shrink-0 hidden sm:flex",
-        title: `${gamepadCount} controller${gamepadCount > 1 ? "s" : ""} connected - click to configure`,
+        title: gamepadConnectedTitle,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsx(Joystick, { size: 20, style: { color: systemColor }, className: "transition-transform group-hover:scale-110" }),
@@ -726,15 +1030,15 @@ var SettingsControls = memo(function SettingsControls2({
         "button",
         {
           onClick: onGamepadSettings,
-          className: "relative group flex-col items-center gap-1 px-3 py-2 transition-all duration-200 flex-shrink-0 hidden sm:flex",
-          title: "No controller detected - press any button on your gamepad to connect",
+          className: "relative group flex-col items-center gap-1 px-3 py-2 transition-all duration-200 flex-shrink-0",
+          title: t.controls.noGamepad,
           style: {
             border: "2px dashed #6b7280",
             backgroundColor: "transparent"
           },
           children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Gamepad2, { size: 18, className: "text-gray-400 transition-transform group-hover:scale-110 group-hover:text-white" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider text-gray-400 group-hover:text-white whitespace-nowrap", children: "Press" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider text-gray-400 group-hover:text-white whitespace-nowrap", children: t.controls.press }),
             /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full border-2 border-gray-400 group-hover:border-white flex items-center justify-center animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-gray-400 group-hover:bg-white" }) })
           ] })
         }
@@ -746,12 +1050,18 @@ var SettingsControls = memo(function SettingsControls2({
         {
           onClick: hardcoreRestrictions?.canUseCheats === false ? void 0 : onCheats,
           icon: Code,
-          label: "Cheats",
+          label: t.settings.cheats,
           disabled: disabled || hardcoreRestrictions?.canUseCheats === false,
           systemColor
         }
       ),
-      /* @__PURE__ */ jsx(HardcoreTooltip, { show: hardcoreRestrictions?.canUseCheats === false })
+      /* @__PURE__ */ jsx(
+        HardcoreTooltip,
+        {
+          show: hardcoreRestrictions?.canUseCheats === false,
+          message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx(
       RAButton,
@@ -765,14 +1075,26 @@ var SettingsControls = memo(function SettingsControls2({
         className: "hidden sm:flex"
       }
     ),
+    onSettings && /* @__PURE__ */ jsx(
+      ControlButton,
+      {
+        onClick: onSettings,
+        icon: Settings,
+        label: t.settings.title,
+        disabled,
+        systemColor,
+        className: "hidden sm:flex"
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "w-px h-8 bg-white/10 mx-2 hidden sm:block" }),
-    /* @__PURE__ */ jsx(ControlButton, { onClick: onExit, icon: Power, label: "Exit", danger: true, disabled, systemColor })
+    /* @__PURE__ */ jsx(ControlButton, { onClick: onExit, icon: Power, label: t.settings.exit, danger: true, disabled, systemColor })
   ] });
 });
 var MobileControlDrawer = memo(function MobileControlDrawer2({
   children,
   systemColor = "#00FF41"
 }) {
+  const t = useKoinTranslation();
   const [isExpanded, setIsExpanded] = useState(false);
   useEffect(() => {
     if (isExpanded) {
@@ -807,7 +1129,7 @@ var MobileControlDrawer = memo(function MobileControlDrawer2({
           boxShadow: isExpanded ? `0 0 20px ${systemColor}60, 0 4px 20px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.5)",
           borderColor: isExpanded ? systemColor : void 0
         },
-        "aria-label": isExpanded ? "Close menu" : "Open menu",
+        "aria-label": isExpanded ? t.controls.menuClose : t.controls.menuOpen,
         children: /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -848,7 +1170,7 @@ var MobileControlDrawer = memo(function MobileControlDrawer2({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "relative flex flex-wrap items-center justify-center gap-3 px-4 py-6 pb-20",
+              className: "relative flex flex-col items-center px-4 py-6 pb-20",
               style: { paddingBottom: "calc(env(safe-area-inset-bottom, 20px) + 80px)" },
               children
             }
@@ -896,6 +1218,7 @@ var PlayerControls = memo(function PlayerControls2({
   systemColor = "#00FF41",
   gamepadCount = 0,
   onGamepadSettings,
+  onSettings,
   volume = 100,
   isMuted = false,
   onVolumeChange,
@@ -928,6 +1251,7 @@ var PlayerControls = memo(function PlayerControls2({
         hardcoreRestrictions
       }
     ),
+    /* @__PURE__ */ jsx("div", { className: "w-full h-px bg-white/10 sm:hidden my-4" }),
     /* @__PURE__ */ jsx(
       SaveLoadControls,
       {
@@ -948,12 +1272,14 @@ var PlayerControls = memo(function PlayerControls2({
         onAutoSaveToggle
       }
     ),
+    /* @__PURE__ */ jsx("div", { className: "w-full h-px bg-white/10 sm:hidden my-4" }),
     /* @__PURE__ */ jsx(
       SettingsControls,
       {
         onFullscreen,
         onControls,
         onGamepadSettings,
+        onSettings,
         onCheats,
         onRetroAchievements,
         onShowShortcuts,
@@ -974,7 +1300,7 @@ var PlayerControls = memo(function PlayerControls2({
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(MobileControlDrawer_default, { systemColor, children: controlsContent }),
-    /* @__PURE__ */ jsx("div", { className: "hidden sm:flex w-full items-center justify-between gap-2 px-4 py-2 bg-black backdrop-blur-sm border-t border-white/10 shrink-0 overflow-x-auto", children: controlsContent })
+    /* @__PURE__ */ jsx("div", { className: "hidden sm:flex w-full bg-black/90 backdrop-blur-md border-t border-white/10 shrink-0 z-50 overflow-x-auto no-scrollbar", children: /* @__PURE__ */ jsx("div", { className: "flex items-center min-w-max mx-auto gap-4 px-8 py-4", children: controlsContent }) })
   ] });
 });
 var PlayerControls_default = PlayerControls;
@@ -1137,6 +1463,7 @@ var PerformanceOverlay = memo(function PerformanceOverlay2({
   coreName = "Unknown",
   systemColor = "#00FF41"
 }) {
+  const t = useKoinTranslation();
   const [fps, setFps] = useState(0);
   const [frameTime, setFrameTime] = useState(0);
   const frameTimesRef = useRef([]);
@@ -1188,12 +1515,12 @@ var PerformanceOverlay = memo(function PerformanceOverlay2({
           },
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "opacity-60", children: "FPS" }),
+              /* @__PURE__ */ jsx("span", { className: "opacity-60 text-[10px] uppercase", children: t.overlays.performance.fps }),
               /* @__PURE__ */ jsx("span", { className: "font-bold", children: fps })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "w-px h-3 bg-white/20" }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "opacity-60", children: "Frame" }),
+              /* @__PURE__ */ jsx("span", { className: "opacity-60 text-[10px] uppercase", children: t.overlays.performance.frameTime }),
               /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
                 frameTime,
                 "ms"
@@ -1201,7 +1528,7 @@ var PerformanceOverlay = memo(function PerformanceOverlay2({
             ] }),
             /* @__PURE__ */ jsx("div", { className: "w-px h-3 bg-white/20" }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "opacity-60", children: "Core" }),
+              /* @__PURE__ */ jsx("span", { className: "opacity-60 text-[10px] uppercase", children: t.overlays.performance.core }),
               /* @__PURE__ */ jsx("span", { className: "font-bold text-white/80", children: coreName })
             ] })
           ]
@@ -1375,6 +1702,7 @@ var RecordingIndicator = memo(function RecordingIndicator2({
   onStop,
   systemColor = "#FF3333"
 }) {
+  const t = useKoinTranslation();
   const [isHovered, setIsHovered] = useState(false);
   if (!isRecording) return null;
   const minutes = Math.floor(duration / 60);
@@ -1422,7 +1750,7 @@ var RecordingIndicator = memo(function RecordingIndicator2({
                   {
                     className: "text-xs font-bold",
                     style: { color: isPaused ? "#FFA500" : "#FF3333" },
-                    children: isPaused ? "PAUSED" : "RECORDING"
+                    children: isPaused ? t.overlays.recording.paused : t.overlays.recording.recording
                   }
                 ),
                 /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/60", children: timeString })
@@ -1433,7 +1761,7 @@ var RecordingIndicator = memo(function RecordingIndicator2({
                   {
                     onClick: onResume,
                     className: "p-1.5 rounded hover:bg-white/20 transition-colors",
-                    title: "Resume recording",
+                    title: t.overlays.recording.resume,
                     children: /* @__PURE__ */ jsx(Play, { size: 14, className: "text-orange-400", fill: "#FFA500" })
                   }
                 ) : /* @__PURE__ */ jsx(
@@ -1441,7 +1769,7 @@ var RecordingIndicator = memo(function RecordingIndicator2({
                   {
                     onClick: onPause,
                     className: "p-1.5 rounded hover:bg-white/20 transition-colors",
-                    title: "Pause recording",
+                    title: t.overlays.recording.pause,
                     children: /* @__PURE__ */ jsx(Pause, { size: 14, className: "text-white/80" })
                   }
                 ),
@@ -1450,7 +1778,7 @@ var RecordingIndicator = memo(function RecordingIndicator2({
                   {
                     onClick: onStop,
                     className: "p-1.5 rounded hover:bg-red-500/30 transition-colors flex items-center gap-1",
-                    title: "Stop and save recording",
+                    title: t.overlays.recording.stop,
                     children: [
                       /* @__PURE__ */ jsx(Square, { size: 12, fill: "#FF3333", className: "text-red-500" }),
                       /* @__PURE__ */ jsx(Download, { size: 12, className: "text-white/60" })
@@ -1461,39 +1789,40 @@ var RecordingIndicator = memo(function RecordingIndicator2({
             ]
           }
         ),
-        !isHovered && /* @__PURE__ */ jsx("div", { className: "text-[9px] text-white/40 text-center mt-1", children: "Hover for controls" })
+        !isHovered && /* @__PURE__ */ jsx("div", { className: "text-[9px] text-white/40 text-center mt-1", children: t.overlays.recording.hover })
       ]
     }
   );
 });
 var RecordingIndicator_default = RecordingIndicator;
-var SHORTCUTS = [
-  {
-    section: "Overlays",
-    items: [
-      { key: "F1", description: "Show this help" },
-      { key: "F3", description: "Performance Overlay (FPS)" },
-      { key: "F4", description: "Input Display" }
-    ]
-  },
-  {
-    section: "Recording",
-    items: [
-      { key: "F5", description: "Start/Stop Recording" }
-    ]
-  },
-  {
-    section: "Audio",
-    items: [
-      { key: "F9", description: "Toggle Mute" }
-    ]
-  }
-];
 var ShortcutsModal = memo(function ShortcutsModal2({
   isOpen,
   onClose,
   systemColor = "#00FF41"
 }) {
+  const t = useKoinTranslation();
+  const shortcuts = useMemo(() => [
+    {
+      section: t.modals.shortcuts.overlays,
+      items: [
+        { key: "F1", description: t.modals.shortcuts.showHelp },
+        { key: "F3", description: t.modals.shortcuts.perfOverlay },
+        { key: "F4", description: t.modals.shortcuts.inputDisplay }
+      ]
+    },
+    {
+      section: t.modals.shortcuts.recording,
+      items: [
+        { key: "F5", description: t.modals.shortcuts.toggleRec }
+      ]
+    },
+    {
+      section: t.settings.audio,
+      items: [
+        { key: "F9", description: t.modals.shortcuts.toggleMute }
+      ]
+    }
+  ], [t]);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -1515,7 +1844,7 @@ var ShortcutsModal = memo(function ShortcutsModal2({
                 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: "Player Shortcuts" })
+                    /* @__PURE__ */ jsx("span", { className: "font-bold text-white", children: t.modals.shortcuts.playerShortcuts })
                   ] }),
                   /* @__PURE__ */ jsx(
                     "button",
@@ -1529,7 +1858,7 @@ var ShortcutsModal = memo(function ShortcutsModal2({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
-              SHORTCUTS.map(({ section, items }) => /* @__PURE__ */ jsxs("div", { children: [
+              shortcuts.map(({ section, items }) => /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx(
                   "h3",
                   {
@@ -1563,20 +1892,16 @@ var ShortcutsModal = memo(function ShortcutsModal2({
               ] }, 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: "Keys" }),
+                /* @__PURE__ */ jsx("strong", { className: "text-white/60", children: t.controls.keys }),
                 " settings."
               ] })
             ] }),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               "div",
               {
                 className: "px-4 py-2 text-center text-xs text-white/40 border-t",
                 style: { borderColor: `${systemColor}20` },
-                children: [
-                  "Press ",
-                  /* @__PURE__ */ jsx("kbd", { className: "px-1 bg-white/10 rounded font-mono", children: "ESC" }),
-                  " to close"
-                ]
+                children: t.modals.shortcuts.pressEsc
               }
             )
           ]
@@ -1753,92 +2078,175 @@ function useMobile() {
 
 // src/components/VirtualController/layouts.ts
 var BUTTON_SMALL = 44;
-var BUTTON_MEDIUM = 52;
-var BUTTON_LARGE = 60;
-var NES_LAYOUT = {
-  console: "NES",
+var BUTTON_MEDIUM = 56;
+var BUTTON_LARGE = 68;
+var START_SELECT_Y = 8;
+var SELECT_X = 38;
+var START_X = 62;
+var DPAD_BUTTONS = [
+  { type: "up", label: "\u2191", x: 14, y: 55, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+  { type: "down", label: "\u2193", x: 14, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+  { type: "left", label: "\u2190", x: 6, y: 62.5, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+  { type: "right", label: "\u2192", x: 22, y: 62.5, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true }
+];
+var TWO_BUTTON_LAYOUT = {
+  console: "2BUTTON",
   buttons: [
-    // D-pad - y:55-70 to stay above control bar
-    { type: "up", label: "\u2191", x: 12, y: 55, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 62, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 62, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    // Action buttons
-    { type: "b", label: "B", x: 80, y: 64, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 92, y: 56, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    // System buttons - top center
-    { type: "select", label: "SEL", x: 38, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 62, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    { type: "b", label: "B", x: 78, y: 66, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "A", x: 90, y: 56, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
 var SNES_LAYOUT = {
   console: "SNES",
   buttons: [
-    { type: "up", label: "\u2191", x: 12, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "y", label: "Y", x: 76, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "x", label: "X", x: 88, y: 37, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "b", label: "B", x: 88, y: 53, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 96, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "l", label: "L", x: 8, y: 18, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "r", label: "R", x: 92, y: 18, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "select", label: "SEL", x: 38, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 62, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    // Diamond: Y-X-B-A (left-top-bottom-right)
+    { type: "y", label: "Y", x: 74, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "X", x: 84, y: 46, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "B", x: 84, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "A", x: 94, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Shoulders
+    { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
-var GB_LAYOUT = {
-  console: "GB",
+var GBA_LAYOUT = {
+  console: "GBA",
   buttons: [
-    { type: "up", label: "\u2191", x: 12, y: 55, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 62, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 62, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "b", label: "B", x: 80, y: 64, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 92, y: 56, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "select", label: "SEL", x: 38, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 62, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    { type: "b", label: "B", x: 80, y: 62, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "A", x: 92, y: 52, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
-var GBA_LAYOUT = {
-  console: "GBA",
+var SIX_BUTTON_LAYOUT = {
+  console: "6BUTTON",
+  buttons: [
+    ...DPAD_BUTTONS,
+    // Top row (X, Y, Z) → mapped to L, X, R
+    { type: "l", label: "X", x: 74, y: 48, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "Y", x: 84, y: 44, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "r", label: "Z", x: 94, y: 40, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Bottom row (A, B, C) → mapped to Y, B, A
+    { type: "y", label: "A", x: 72, y: 64, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "B", x: 82, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "C", x: 92, y: 56, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+  ]
+};
+var SATURN_LAYOUT = {
+  console: "SATURN",
+  buttons: [
+    ...DPAD_BUTTONS,
+    // Face buttons (same as 6-button but uses standard buttons)
+    // X/Y/Z on top
+    { type: "x", label: "X", x: 74, y: 48, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "y", label: "Y", x: 84, y: 44, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "l", label: "Z", x: 94, y: 40, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // A/B/C on bottom
+    { type: "b", label: "A", x: 72, y: 64, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "B", x: 82, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "r", label: "C", x: 92, y: 56, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Triggers (L2/R2 for Saturn L/R)
+    { type: "l2", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r2", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+  ]
+};
+var NEOGEO_LAYOUT = {
+  console: "NEOGEO",
+  buttons: [
+    ...DPAD_BUTTONS,
+    // Curved A-B-C-D layout (maps to b-a-y-x for RetroPad)
+    { type: "b", label: "A", x: 68, y: 68, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "B", x: 78, y: 62, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "y", label: "C", x: 88, y: 56, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "D", x: 96, y: 48, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "select", label: "COIN", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+  ]
+};
+var PSX_LAYOUT = {
+  console: "PSX",
+  buttons: [
+    ...DPAD_BUTTONS,
+    // PS symbols: △◯✕□ → y, b, a, x (triangle-circle-cross-square)
+    { type: "y", label: "\u25B3", x: 84, y: 46, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "\u25CB", x: 94, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "\u2715", x: 84, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "\u25A1", x: 74, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Shoulders
+    { type: "l", label: "L1", x: 8, y: 25, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R1", x: 92, y: 25, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "l2", label: "L2", x: 8, y: 15, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r2", label: "R2", x: 92, y: 15, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+  ]
+};
+var N64_LAYOUT = {
+  console: "N64",
   buttons: [
-    { type: "up", label: "\u2191", x: 12, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "b", label: "B", x: 82, y: 55, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 94, y: 45, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "l", label: "L", x: 8, y: 18, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "r", label: "R", x: 92, y: 18, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "select", label: "SEL", x: 38, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 62, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    // A/B
+    { type: "a", label: "A", x: 80, y: 68, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "B", x: 72, y: 76, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // C-buttons (use x/y as C-left/C-up, l2/r2 as C-down/C-right)
+    { type: "y", label: "C\u2191", x: 92, y: 50, size: 36, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "C\u2190", x: 86, y: 56, size: 36, showInPortrait: true, showInLandscape: true },
+    { type: "l2", label: "C\u2193", x: 92, y: 62, size: 36, showInPortrait: true, showInLandscape: true },
+    { type: "r2", label: "C\u2192", x: 98, y: 56, size: 36, showInPortrait: true, showInLandscape: true },
+    // Shoulders
+    { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    // Z trigger (use select as workaround since it's a unique button)
+    { type: "select", label: "Z", x: 8, y: 35, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
-var GENESIS_LAYOUT = {
-  console: "GENESIS",
+var DREAMCAST_LAYOUT = {
+  console: "DREAMCAST",
   buttons: [
-    { type: "up", label: "\u2191", x: 12, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 74, y: 56, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "b", label: "B", x: 85, y: 48, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "c", label: "C", x: 96, y: 40, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 50, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    // Standard diamond
+    { type: "y", label: "Y", x: 74, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "X", x: 84, y: 46, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "B", x: 84, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "A", x: 94, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Triggers
+    { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
 function getLayoutForSystem(system) {
-  const n = system.toUpperCase();
-  if (n.includes("NES") || n.includes("FAMICOM")) return NES_LAYOUT;
-  if (n.includes("SNES") || n.includes("SUPER")) return SNES_LAYOUT;
-  if (n.includes("GBA") || n.includes("ADVANCE")) return GBA_LAYOUT;
-  if (n.includes("GB") || n.includes("GAME BOY")) return GB_LAYOUT;
-  if (n.includes("GENESIS") || n.includes("MEGA")) return GENESIS_LAYOUT;
-  return NES_LAYOUT;
+  const s = system.toUpperCase();
+  if (s === "PS1" || s === "PSX" || s === "PSP") return PSX_LAYOUT;
+  if (s === "N64") return N64_LAYOUT;
+  if (s === "SNES" || s === "NDS") return SNES_LAYOUT;
+  if (s === "GBA") return GBA_LAYOUT;
+  if (s === "NES" || s === "GB" || s === "GBC" || s === "VIRTUAL_BOY") return TWO_BUTTON_LAYOUT;
+  if (s === "DREAMCAST") return DREAMCAST_LAYOUT;
+  if (s === "SATURN") return SATURN_LAYOUT;
+  if (s === "GENESIS") return SIX_BUTTON_LAYOUT;
+  if (s === "MASTER_SYSTEM" || s === "GAME_GEAR") return TWO_BUTTON_LAYOUT;
+  if (s === "NEOGEO") return NEOGEO_LAYOUT;
+  if (s.includes("NEOGEO_POCKET")) return TWO_BUTTON_LAYOUT;
+  if (s === "ARCADE") return SIX_BUTTON_LAYOUT;
+  if (s === "PC_ENGINE" || s === "TURBOGRAFX") return TWO_BUTTON_LAYOUT;
+  if (s.includes("WONDERSWAN")) return TWO_BUTTON_LAYOUT;
+  if (s.includes("ATARI")) return TWO_BUTTON_LAYOUT;
+  return TWO_BUTTON_LAYOUT;
 }
-var DRAG_HOLD_DELAY = 300;
+var DRAG_HOLD_DELAY = 350;
 var DRAG_MOVE_THRESHOLD = 10;
 var DRAG_CENTER_THRESHOLD = 0.4;
 function useTouchHandlers({
@@ -1871,6 +2279,9 @@ function useTouchHandlers({
         x: touchX - displayX / 100 * containerWidth,
         y: touchY - displayY / 100 * containerHeight
       };
+      if (navigator.vibrate) {
+        navigator.vibrate([10, 30, 10]);
+      }
       if (!isSystemButton) {
         onRelease(buttonType);
       }
@@ -1986,58 +2397,122 @@ function useTouchHandlers({
 }
 
 // src/components/VirtualController/utils/buttonStyles.ts
-function getButtonStyles(buttonType, isPressed) {
+var DEFAULT_FACE = {
+  bg: "bg-white/10 backdrop-blur-md",
+  text: "text-white",
+  border: "border-white/30",
+  shadow: "shadow-lg",
+  transform: ""
+};
+var DEFAULT_SHOULDER = {
+  bg: "bg-white/20 backdrop-blur-md",
+  text: "text-white",
+  border: "border-white/30",
+  shadow: "shadow-sm",
+  transform: ""
+};
+var DEFAULT_SYSTEM = {
+  bg: "bg-black/60 backdrop-blur-md",
+  text: "text-white/80",
+  border: "border-white/20",
+  shadow: "shadow-sm",
+  transform: ""
+};
+var PRESSED_STYLE = {
+  bg: "bg-white/90",
+  text: "text-black",
+  border: "border-white",
+  shadow: "shadow-none",
+  transform: "scale(0.95)"
+};
+function coloredButton(bgColor, textColor = "text-white") {
+  return {
+    bg: bgColor,
+    text: textColor,
+    border: "border-white/20",
+    shadow: "shadow-lg",
+    transform: ""
+  };
+}
+function psButton(symbolColor) {
+  return {
+    bg: "bg-black/80 backdrop-blur-md",
+    text: symbolColor,
+    border: "border-white/30",
+    shadow: "shadow-lg",
+    transform: ""
+  };
+}
+function getButtonStyles(buttonType, isPressed, consoleName = "") {
   if (isPressed) {
-    return {
-      bg: "bg-retro-primary",
-      text: "text-black",
-      border: "border-white",
-      shadow: "shadow-none",
-      transform: "translate-x-[3px] translate-y-[3px]"
-    };
+    return PRESSED_STYLE;
+  }
+  const c = consoleName.toUpperCase();
+  if (c === "NEOGEO") {
+    switch (buttonType) {
+      case "b":
+        return coloredButton("bg-[#E60012]");
+      // A = Red
+      case "a":
+        return coloredButton("bg-[#FFD600]", "text-black");
+      // B = Yellow
+      case "y":
+        return coloredButton("bg-[#009944]");
+      // C = Green
+      case "x":
+        return coloredButton("bg-[#0068B7]");
+    }
+  }
+  if (c === "PSX" || c === "PS1" || c === "PSP") {
+    switch (buttonType) {
+      case "y":
+        return psButton("text-[#25D998]");
+      // △ = Green
+      case "b":
+        return psButton("text-[#FF5555]");
+      // ○ = Red
+      case "a":
+        return psButton("text-[#5599FF]");
+      // ✕ = Blue
+      case "x":
+        return psButton("text-[#E889DD]");
+    }
+  }
+  if (c === "SNES" || c === "NDS") {
+    switch (buttonType) {
+      case "a":
+        return coloredButton("bg-[#CC0000]");
+      // A = Red
+      case "b":
+        return coloredButton("bg-[#CCCC00]", "text-black");
+      // B = Yellow
+      case "x":
+        return coloredButton("bg-[#0033CC]");
+      // X = Blue
+      case "y":
+        return coloredButton("bg-[#006600]");
+    }
   }
   switch (buttonType) {
     case "a":
     case "b":
-    case "c":
-      return {
-        bg: "bg-red-600",
-        text: "text-white",
-        border: "border-white",
-        shadow: "shadow-hard",
-        transform: ""
-      };
     case "x":
     case "y":
-      return {
-        bg: "bg-blue-600",
-        text: "text-white",
-        border: "border-white",
-        shadow: "shadow-hard",
-        transform: ""
-      };
+      return DEFAULT_FACE;
     case "l":
     case "r":
+    case "l2":
+    case "r2":
+      return DEFAULT_SHOULDER;
     case "start":
     case "select":
-      return {
-        bg: "bg-retro-surface",
-        text: "text-white",
-        border: "border-white",
-        shadow: "shadow-hard",
-        transform: ""
-      };
+    case "menu":
+      return DEFAULT_SYSTEM;
     default:
-      return {
-        bg: "bg-black",
-        text: "text-white",
-        border: "border-white",
-        shadow: "shadow-hard",
-        transform: ""
-      };
+      return DEFAULT_FACE;
   }
 }
-var VirtualButton = React5.memo(function VirtualButton2({
+var VirtualButton = React2.memo(function VirtualButton2({
   config,
   isPressed,
   onPress,
@@ -2048,13 +2523,16 @@ var VirtualButton = React5.memo(function VirtualButton2({
   customPosition,
   onPositionChange,
   isLandscape = false,
-  systemColor = "#00FF41"
-  // Default retro green
+  console: console2 = ""
 }) {
+  const t = useKoinTranslation();
   const buttonRef = useRef(null);
-  const isSystemButton = config.type === "start" || config.type === "select";
+  const isSystemButton = config.type === "start" || config.type === "select" || config.type === "menu";
   const displayX = customPosition ? customPosition.x : config.x;
   const displayY = customPosition ? customPosition.y : config.y;
+  let label = config.label;
+  if (config.type === "start") label = t.controls.startBtn;
+  if (config.type === "select") label = t.controls.selectBtn;
   const {
     handleTouchStart,
     handleTouchMove,
@@ -2092,63 +2570,78 @@ var VirtualButton = React5.memo(function VirtualButton2({
   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)`;
-  const styles = getButtonStyles(config.type, isPressed);
-  const isActionButton = config.type === "a" || config.type === "b";
-  const borderRadius = isActionButton ? "50%" : "0";
-  const pressedStyle = isPressed ? {
-    backgroundColor: systemColor,
-    color: "#000000",
-    borderColor: "#FFFFFF"
-  } : {};
+  const styles = getButtonStyles(config.type, isPressed, console2);
+  let borderRadius = "50%";
+  let width = `${config.size}px`;
+  if (config.shape === "pill") {
+    borderRadius = "20px";
+    width = `${config.size * 1.8}px`;
+  } else if (config.shape === "rect") {
+    borderRadius = "8px";
+    width = `${config.size * 2.5}px`;
+  } else if (config.shape === "square") {
+    borderRadius = "12px";
+  } else {
+    if (["l", "r", "l2", "r2"].includes(config.type)) {
+      borderRadius = "10px";
+      width = `${config.size * 2}px`;
+    }
+  }
   return /* @__PURE__ */ jsx(
     "button",
     {
       ref: buttonRef,
       className: `
-        absolute border-4 font-heading font-bold uppercase tracking-wider
-        transition-all duration-100 select-none
+        absolute flex items-center justify-center
+        font-heading font-bold uppercase tracking-wider
+        transition-all duration-75 select-none
         pointer-events-auto touch-manipulation
-        ${isPressed ? "" : `${styles.bg} ${styles.text} ${styles.border} ${styles.shadow}`} ${styles.transform}
-        active:translate-x-[3px] active:translate-y-[3px] active:shadow-none
+        backdrop-blur-sm
+        ${isPressed ? "" : `${styles.bg} ${styles.border} ${styles.shadow}`} 
+        ${styles.text}
+        active:shadow-none
       `,
       style: {
-        // Remove left/top and use transform instead for high performance (compositor only)
         top: 0,
         left: 0,
-        transform,
+        transform: transform + (isPressed ? " scale(0.95)" : ""),
         willChange: "transform",
-        width: `${config.size}px`,
+        width,
         height: `${config.size}px`,
+        // Height stays consistent
         minWidth: `${config.size}px`,
-        minHeight: `${config.size}px`,
-        fontSize: config.size < 50 ? "10px" : "12px",
+        fontSize: config.size < 50 ? "11px" : "16px",
         borderRadius,
+        borderWidth: isPressed ? "0px" : "1.5px",
+        // slightly thicker border
         lineHeight: "1",
         // Semi-transparent in landscape mode
         opacity: isLandscape ? 0.85 : 1,
-        // Prevent context menu on long-press
         WebkitTouchCallout: "none",
         WebkitUserSelect: "none",
         userSelect: "none",
-        ...pressedStyle
+        // Direct style overrides if needed from getButtonStyles (for exact hex colors)
+        backgroundColor: isPressed ? styles.bg.startsWith("bg-") ? void 0 : styles.bg : styles.bg.startsWith("bg-") ? void 0 : styles.bg,
+        borderColor: isPressed ? void 0 : styles.border.startsWith("border-") ? void 0 : styles.border,
+        color: styles.text.startsWith("text-") ? void 0 : styles.text
       },
-      "aria-label": config.label,
+      "aria-label": label,
       onContextMenu: (e) => e.preventDefault(),
-      children: config.label
+      children: /* @__PURE__ */ jsx("span", { className: "drop-shadow-md", children: label })
     }
   );
 });
 var VirtualButton_default = VirtualButton;
 
 // src/lib/controls/types.ts
-var DPAD_BUTTONS = ["up", "down", "left", "right"];
+var DPAD_BUTTONS2 = ["up", "down", "left", "right"];
 var FACE_BUTTONS = ["a", "b", "x", "y"];
 var SHOULDER_BUTTONS = ["l", "r"];
 var TRIGGER_BUTTONS = ["l2", "r2"];
 var STICK_BUTTONS = ["l3", "r3"];
 var SYSTEM_BUTTONS = ["start", "select"];
 var ALL_BUTTONS = [
-  ...DPAD_BUTTONS,
+  ...DPAD_BUTTONS2,
   ...FACE_BUTTONS,
   ...SHOULDER_BUTTONS,
   ...TRIGGER_BUTTONS,
@@ -2306,91 +2799,91 @@ var CONSOLE_CAPABILITIES = {
   // ============ Nintendo ============
   NES: {
     console: "NES",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
   },
   SNES: {
     console: "SNES",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "start", "select"]
   },
   N64: {
     console: "N64",
-    buttons: [...DPAD_BUTTONS, "a", "b", "l", "r", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "l", "r", "start"]
     // No select, has Z trigger (mapped to l2)
   },
   GB: {
     console: "GB",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
   },
   GBC: {
     console: "GBC",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
   },
   GBA: {
     console: "GBA",
-    buttons: [...DPAD_BUTTONS, "a", "b", "l", "r", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "l", "r", "start", "select"]
   },
   // ============ Sega ============
   SMS: {
     console: "SMS",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start"]
     // 1, 2, Pause
   },
   GENESIS: {
     console: "GENESIS",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "start"]
     // 6-button: A/B/C + X/Y/Z
   },
   GG: {
     console: "GG",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start"]
   },
   SATURN: {
     console: "SATURN",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "l2", "r2", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "l2", "r2", "start"]
     // Full 8-button
   },
   // ============ Sony ============
   PS1: {
     console: "PS1",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "l2", "r2", "l3", "r3", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "l2", "r2", "l3", "r3", "start", "select"]
   },
   // ============ NEC ============
   PCE: {
     console: "PCE",
     // TurboGrafx-16
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
     // I, II, Run, Select
   },
   // ============ Atari ============
   ATARI2600: {
     console: "ATARI2600",
-    buttons: [...DPAD_BUTTONS, "a", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "select"]
     // Fire, Select/Reset
   },
   ATARI7800: {
     console: "ATARI7800",
-    buttons: [...DPAD_BUTTONS, "a", "b", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "select"]
   },
   LYNX: {
     console: "LYNX",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
     // A, B, Option 1, Option 2
   },
   // ============ SNK ============
   NGPC: {
     console: "NGPC",
     // Neo Geo Pocket
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
   },
   // ============ Other ============
   WSC: {
     console: "WSC",
     // WonderSwan
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "start"]
   },
   ARCADE: {
     console: "ARCADE",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "start", "select"]
     // Generic 6-button
   }
 };
@@ -2431,7 +2924,7 @@ function getConsoleCapabilities(system) {
   const normalized = system.toUpperCase();
   return CONSOLE_CAPABILITIES[normalized] ?? {
     console: normalized,
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "start", "select"]
   };
 }
 function getConsoleButtons(system) {
@@ -2719,13 +3212,11 @@ var DEFAULT_CONTROLS = DEFAULT_KEYBOARD;
 
 // src/components/VirtualController/utils/keyboardEvents.ts
 function getKeyboardCode(buttonType, controls) {
-  const controlMapping = controls || DEFAULT_CONTROLS;
-  const mappingKey = buttonType === "c" ? "x" : buttonType;
-  const key = mappingKey;
-  if (key in controlMapping) {
-    return controlMapping[key] ?? null;
+  const key = buttonType;
+  if (controls && key in controls && controls[key]) {
+    return controls[key];
   }
-  return null;
+  return DEFAULT_CONTROLS[key] ?? null;
 }
 function getKeyName(code) {
   if (code.startsWith("Key")) return code.slice(3).toLowerCase();
@@ -2751,23 +3242,34 @@ function dispatchKeyboardEvent(type, code) {
   canvas.dispatchEvent(event);
   return true;
 }
-var Dpad = React5.memo(function Dpad2({
-  size,
+var DRAG_HOLD_DELAY2 = 350;
+var CENTER_TOUCH_RADIUS = 0.25;
+var Dpad = React2.memo(function Dpad2({
+  size = 180,
   x,
   y,
   containerWidth,
   containerHeight,
   controls,
   systemColor = "#00FF41",
-  isLandscape = false
+  isLandscape = false,
+  customPosition,
+  onPositionChange
 }) {
   const dpadRef = useRef(null);
   const activeTouchRef = useRef(null);
   const activeDirectionsRef = useRef(/* @__PURE__ */ new Set());
-  const upRef = useRef(null);
-  const downRef = useRef(null);
-  const leftRef = useRef(null);
-  const rightRef = useRef(null);
+  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);
+  const rightPathRef = useRef(null);
+  const centerCircleRef = useRef(null);
+  const displayX = customPosition ? customPosition.x : x;
+  const displayY = customPosition ? customPosition.y : y;
   const getKeyCode = useCallback((direction) => {
     if (!controls) {
       const defaults = {
@@ -2785,24 +3287,41 @@ var Dpad = React5.memo(function Dpad2({
     const centerY = rect.top + rect.height / 2;
     const dx = touchX - centerX;
     const dy = touchY - centerY;
-    const deadZone = rect.width * 0.12;
     const distance = Math.sqrt(dx * dx + dy * dy);
+    const deadZone = rect.width / 2 * 0.15;
     if (distance < deadZone) return /* @__PURE__ */ new Set();
     const directions = /* @__PURE__ */ new Set();
     const angle = Math.atan2(dy, dx) * (180 / Math.PI);
-    if (angle >= -157.5 && angle <= -22.5) directions.add("up");
-    if (angle >= 22.5 && angle <= 157.5) directions.add("down");
-    if (angle >= 112.5 || angle <= -112.5) directions.add("left");
-    if (angle >= -67.5 && angle <= 67.5) directions.add("right");
+    if (angle >= -150 && angle <= -30) directions.add("up");
+    if (angle >= 30 && angle <= 150) directions.add("down");
+    if (angle >= 120 || angle <= -120) directions.add("left");
+    if (angle >= -60 && angle <= 60) directions.add("right");
     return directions;
   }, []);
   const updateVisuals = useCallback((directions) => {
-    const activeColor = systemColor;
-    const inactiveColor = "#1a1a1a";
-    if (upRef.current) upRef.current.style.fill = directions.has("up") ? activeColor : inactiveColor;
-    if (downRef.current) downRef.current.style.fill = directions.has("down") ? activeColor : inactiveColor;
-    if (leftRef.current) leftRef.current.style.fill = directions.has("left") ? activeColor : inactiveColor;
-    if (rightRef.current) rightRef.current.style.fill = directions.has("right") ? activeColor : inactiveColor;
+    const activeFill = `${systemColor}80`;
+    const inactiveFill = "rgba(255, 255, 255, 0.05)";
+    const activeStroke = systemColor;
+    const inactiveStroke = "rgba(255, 255, 255, 0.2)";
+    const glow = `0 0 15px ${systemColor}`;
+    const updatePart = (ref, isActive) => {
+      if (ref.current) {
+        ref.current.style.fill = isActive ? activeFill : inactiveFill;
+        ref.current.style.stroke = isActive ? activeStroke : inactiveStroke;
+        ref.current.style.filter = isActive ? `drop-shadow(${glow})` : "none";
+        ref.current.style.transform = isActive ? "scale(0.98)" : "scale(1)";
+        ref.current.style.transformOrigin = "center";
+      }
+    };
+    updatePart(upPathRef, directions.has("up"));
+    updatePart(downPathRef, directions.has("down"));
+    updatePart(leftPathRef, directions.has("left"));
+    updatePart(rightPathRef, directions.has("right"));
+    if (centerCircleRef.current) {
+      const isAny = directions.size > 0;
+      centerCircleRef.current.style.fill = isAny ? systemColor : "rgba(0,0,0,0.5)";
+      centerCircleRef.current.style.stroke = isAny ? "#fff" : "rgba(255,255,255,0.3)";
+    }
   }, [systemColor]);
   const updateDirections = useCallback((newDirections) => {
     const prev = activeDirectionsRef.current;
@@ -2824,48 +3343,107 @@ var Dpad = React5.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();
-    e.stopPropagation();
-    const touch = e.touches[0];
+    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;
-    updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
-  }, [getDirectionsFromTouch, updateDirections]);
+    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 (!isDragging) {
+      updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
+    }
+  }, [getDirectionsFromTouch, updateDirections, isDragging, size, onPositionChange, startDragging]);
   const handleTouchMove = useCallback((e) => {
     e.preventDefault();
     let touch = null;
-    for (let i = 0; i < e.touches.length; i++) {
-      if (e.touches[i].identifier === activeTouchRef.current) {
-        touch = e.touches[i];
+    for (let i = 0; i < e.changedTouches.length; i++) {
+      if (e.changedTouches[i].identifier === activeTouchRef.current) {
+        touch = e.changedTouches[i];
         break;
       }
     }
     if (!touch) return;
-    const rect = dpadRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
-  }, [getDirectionsFromTouch, updateDirections]);
+    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);
+    } 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) {
+        updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
+      }
+    }
+  }, [isDragging, onPositionChange, containerWidth, containerHeight, size, getDirectionsFromTouch, updateDirections, clearDragTimer]);
   const handleTouchEnd = useCallback((e) => {
     e.preventDefault();
-    let touchEnded = true;
-    for (let i = 0; i < e.touches.length; i++) {
-      if (e.touches[i].identifier === activeTouchRef.current) {
-        touchEnded = false;
+    clearDragTimer();
+    let touchEnded = false;
+    for (let i = 0; i < e.changedTouches.length; i++) {
+      if (e.changedTouches[i].identifier === activeTouchRef.current) {
+        touchEnded = true;
         break;
       }
     }
     if (touchEnded) {
       activeTouchRef.current = null;
-      activeDirectionsRef.current.forEach((dir) => {
-        const keyCode = getKeyCode(dir);
-        if (keyCode) dispatchKeyboardEvent("keyup", keyCode);
-      });
-      activeDirectionsRef.current = /* @__PURE__ */ new Set();
-      updateVisuals(/* @__PURE__ */ new Set());
+      if (isDragging) {
+        setIsDragging(false);
+      } else {
+        activeDirectionsRef.current.forEach((dir) => {
+          const keyCode = getKeyCode(dir);
+          if (keyCode) dispatchKeyboardEvent("keyup", keyCode);
+        });
+        activeDirectionsRef.current = /* @__PURE__ */ new Set();
+        updateVisuals(/* @__PURE__ */ new Set());
+      }
     }
-  }, [getKeyCode, updateVisuals]);
+  }, [getKeyCode, updateVisuals, isDragging, clearDragTimer]);
   useEffect(() => {
     const dpad = dpadRef.current;
     if (!dpad) return;
@@ -2878,37 +3456,57 @@ var Dpad = React5.memo(function Dpad2({
       dpad.removeEventListener("touchmove", handleTouchMove);
       dpad.removeEventListener("touchend", handleTouchEnd);
       dpad.removeEventListener("touchcancel", handleTouchEnd);
+      clearDragTimer();
     };
-  }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
-  const leftPx = x / 100 * containerWidth - size / 2;
-  const topPx = y / 100 * containerHeight - size / 2;
-  return /* @__PURE__ */ jsx(
+  }, [handleTouchStart, handleTouchMove, handleTouchEnd, 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";
+  const dRight = "M 65,35 L 95,35 L 95,65 L 65,65 L 50,50 Z";
+  const dDown = "M 65,65 L 65,95 L 35,95 L 35,65 L 50,50 Z";
+  const dLeft = "M 35,65 L 5,65 L 5,35 L 35,35 L 50,50 Z";
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: dpadRef,
-      className: "absolute pointer-events-auto touch-manipulation",
+      className: `absolute pointer-events-auto touch-manipulation select-none ${isDragging ? "opacity-60" : ""}`,
       style: {
         top: 0,
         left: 0,
-        transform: `translate3d(${leftPx}px, ${topPx}px, 0)`,
+        transform: `translate3d(${leftPx}px, ${topPx}px, 0)${isDragging ? " scale(1.05)" : ""}`,
         width: size,
         height: size,
-        opacity: isLandscape ? 0.85 : 1,
+        opacity: isLandscape ? 0.75 : 0.9,
         WebkitTouchCallout: "none",
-        userSelect: "none"
+        WebkitUserSelect: "none",
+        touchAction: "none",
+        transition: isDragging ? "none" : "transform 0.1s ease-out"
       },
-      onContextMenu: (e) => e.preventDefault(),
-      children: /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
-        /* @__PURE__ */ jsx("rect", { ref: upRef, x: "35", y: "5", width: "30", height: "30", rx: "4", fill: "#1a1a1a", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("rect", { ref: downRef, x: "35", y: "65", width: "30", height: "30", rx: "4", fill: "#1a1a1a", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("rect", { ref: leftRef, x: "5", y: "35", width: "30", height: "30", rx: "4", fill: "#1a1a1a", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("rect", { ref: rightRef, x: "65", y: "35", width: "30", height: "30", rx: "4", fill: "#1a1a1a", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("rect", { x: "35", y: "35", width: "30", height: "30", fill: "#000", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("text", { x: "50", y: "25", textAnchor: "middle", fill: "#fff", fontSize: "14", fontWeight: "bold", children: "\u2191" }),
-        /* @__PURE__ */ jsx("text", { x: "50", y: "85", textAnchor: "middle", fill: "#fff", fontSize: "14", fontWeight: "bold", children: "\u2193" }),
-        /* @__PURE__ */ jsx("text", { x: "20", y: "55", textAnchor: "middle", fill: "#fff", fontSize: "14", fontWeight: "bold", children: "\u2190" }),
-        /* @__PURE__ */ jsx("text", { x: "80", y: "55", textAnchor: "middle", fill: "#fff", fontSize: "14", fontWeight: "bold", children: "\u2192" })
-      ] })
+      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__ */ 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" }),
+          /* @__PURE__ */ jsx("path", { ref: downPathRef, d: dDown, 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: leftPathRef, d: dLeft, fill: "rgba(255,255,255,0.05)", stroke: "rgba(255,255,255,0.2)", strokeWidth: "1", className: "transition-all duration-75" }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              ref: centerCircleRef,
+              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
+            }
+          ),
+          /* @__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" }),
+          /* @__PURE__ */ jsx("path", { d: "M 50,85 L 50,75 M 45,80 L 50,85 L 55,80", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "0.8", pointerEvents: "none" }),
+          /* @__PURE__ */ jsx("path", { d: "M 15,50 L 25,50 M 20,45 L 15,50 L 20,55", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "0.8", pointerEvents: "none" }),
+          /* @__PURE__ */ jsx("path", { d: "M 85,50 L 75,50 M 80,45 L 85,50 L 80,55", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "0.8", pointerEvents: "none" })
+        ] })
+      ]
     }
   );
 });
@@ -2994,6 +3592,72 @@ function useButtonPositions() {
     resetPositions
   };
 }
+var STORAGE_KEY2 = "koin-controls-hint-shown";
+function ControlsHint({ isVisible }) {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    if (!isVisible) return;
+    try {
+      const wasShown = sessionStorage.getItem(STORAGE_KEY2);
+      if (!wasShown) {
+        const timer = setTimeout(() => setShow(true), 1500);
+        return () => clearTimeout(timer);
+      }
+    } catch {
+    }
+  }, [isVisible]);
+  const handleDismiss = () => {
+    setShow(false);
+    try {
+      sessionStorage.setItem(STORAGE_KEY2, "true");
+    } catch {
+    }
+  };
+  if (!show) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm",
+      onClick: handleDismiss,
+      onTouchEnd: handleDismiss,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-black/90 border border-white/30 rounded-2xl p-6 mx-4 max-w-sm text-center shadow-2xl pointer-events-auto",
+          onClick: (e) => e.stopPropagation(),
+          onTouchEnd: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-500/20 border-2 border-green-400 flex items-center justify-center", children: /* @__PURE__ */ jsx(Move, { size: 32, className: "text-green-400" }) }) }),
+            /* @__PURE__ */ jsx("h3", { className: "text-white text-lg font-bold mb-2", children: "Customize Your Controls" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-white/70 text-sm mb-4", children: [
+              /* @__PURE__ */ jsx("strong", { className: "text-white", children: "Long-press" }),
+              " any button or the ",
+              /* @__PURE__ */ jsx("strong", { className: "text-white", children: "D-pad center" }),
+              " to drag and reposition it."
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-white/50 text-xs mb-4", children: "Your layout is saved separately for portrait and landscape modes." }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleDismiss();
+                },
+                onTouchEnd: (e) => {
+                  e.stopPropagation();
+                  handleDismiss();
+                },
+                className: "w-full py-3 px-4 bg-green-500 hover:bg-green-400 active:bg-green-600 text-black font-bold rounded-xl transition-colors flex items-center justify-center gap-2 cursor-pointer touch-manipulation",
+                children: "Got it!"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 function VirtualController({
   system,
   isRunning,
@@ -3014,7 +3678,6 @@ function VirtualController({
     return btn.showInLandscape;
   });
   const DPAD_TYPES = ["up", "down", "left", "right"];
-  const dpadButtons = visibleButtons.filter((btn) => DPAD_TYPES.includes(btn.type));
   useEffect(() => {
     const updateSize = () => {
       const { width, height } = getViewportSize();
@@ -3064,7 +3727,7 @@ function VirtualController({
     },
     [controls]
   );
-  const SYSTEM_BUTTONS2 = ["start", "select"];
+  const SYSTEM_BUTTONS2 = ["start", "select", "menu"];
   const handlePress = useCallback(
     (buttonType) => {
       const isSystemButton = SYSTEM_BUTTONS2.includes(buttonType);
@@ -3152,26 +3815,28 @@ function VirtualController({
   if (!isMobile) {
     return null;
   }
-  if (visibleButtons.length === 0) {
-    return null;
-  }
+  const dpadSize = containerSize.width > containerSize.height ? 160 : 180;
+  const dpadY = containerSize.width > containerSize.height ? 55 : 62;
+  const finalDpadY = system.toUpperCase() === "NEOGEO" ? dpadY - 5 : dpadY;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "fixed inset-0 z-30 pointer-events-none",
       style: { touchAction: "none" },
       children: [
-        dpadButtons.length > 0 && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           Dpad_default,
           {
-            size: containerSize.width > containerSize.height ? 120 : 130,
-            x: 12,
-            y: containerSize.width > containerSize.height ? 52 : 62,
+            size: dpadSize,
+            x: 14,
+            y: finalDpadY,
             containerWidth: containerSize.width || window.innerWidth,
             containerHeight: containerSize.height || window.innerHeight,
             controls,
             systemColor,
-            isLandscape
+            isLandscape,
+            customPosition: getPosition("up", isLandscape),
+            onPositionChange: (x, y) => savePosition("up", x, y, isLandscape)
           }
         ),
         memoizedButtonElements.filter(({ buttonConfig }) => !DPAD_TYPES.includes(buttonConfig.type)).map(({ buttonConfig, adjustedConfig, customPosition, width, height }) => /* @__PURE__ */ jsx(
@@ -3187,64 +3852,77 @@ function VirtualController({
             customPosition,
             onPositionChange: (x, y) => savePosition(buttonConfig.type, x, y, isLandscape),
             isLandscape,
-            systemColor
+            console: layout.console
           },
           buttonConfig.type
-        ))
+        )),
+        /* @__PURE__ */ jsx(ControlsHint, { isVisible: isRunning })
       ]
     }
   );
 }
 function FloatingExitButton({ onClick, disabled = false }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick,
       disabled,
       className: `
-                fixed top-3 left-1/2 -translate-x-1/2 z-50
-                w-11 h-11 rounded-lg
-                bg-black/90 backdrop-blur-sm
-                border-2 border-white/80
-                shadow-lg
-                flex items-center justify-center
-                transition-all duration-200
+                fixed top-3 right-3 z-50
+                px-3 py-2 rounded-xl
+                bg-black/80 backdrop-blur-md
+                border-2 border-red-400/60
+                shadow-xl
+                flex items-center gap-2
+                transition-all duration-300
                 hover:bg-red-600/30 hover:border-red-400 hover:scale-105
                 active:scale-95
                 disabled:opacity-40 disabled:cursor-not-allowed
                 touch-manipulation
             `,
       style: {
-        paddingTop: "env(safe-area-inset-top, 0px)"
+        paddingTop: "max(env(safe-area-inset-top, 0px), 8px)"
       },
       "aria-label": "Exit fullscreen",
-      title: "Exit fullscreen",
-      children: /* @__PURE__ */ jsx(X, { size: 22, className: "text-white" })
+      children: [
+        /* @__PURE__ */ jsx(X, { size: 16, className: "text-red-400" }),
+        /* @__PURE__ */ jsx("span", { className: "text-white text-xs font-bold uppercase tracking-wider", children: "Exit" }),
+        /* @__PURE__ */ jsx(Minimize2, { size: 14, className: "text-white/60" })
+      ]
     }
   );
 }
 function FloatingFullscreenButton({ onClick, disabled = false }) {
-  return /* @__PURE__ */ jsx(
+  const [pulse, setPulse] = useState(true);
+  useEffect(() => {
+    const timer = setTimeout(() => setPulse(false), 5e3);
+    return () => clearTimeout(timer);
+  }, []);
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick,
       disabled,
       className: `
                 absolute top-3 left-3 z-50
-                w-9 h-9 rounded-lg
-                bg-black/70 backdrop-blur-sm
-                border-2 border-white/50
-                shadow-md
-                flex items-center justify-center
-                transition-all duration-200
-                hover:bg-white/20 hover:border-white
+                px-3 py-2 rounded-xl
+                bg-black/80 backdrop-blur-md
+                border-2 border-white/60
+                shadow-xl
+                flex items-center gap-2
+                transition-all duration-300
+                hover:bg-white/20 hover:border-white hover:scale-105
                 active:scale-95
                 disabled:opacity-40 disabled:cursor-not-allowed
                 touch-manipulation
+                ${pulse ? "animate-pulse border-green-400/80" : ""}
             `,
-      "aria-label": "Enter fullscreen",
-      title: "Enter fullscreen",
-      children: /* @__PURE__ */ jsx(Maximize, { size: 16, className: "text-white/80" })
+      "aria-label": "Tap for fullscreen controls",
+      children: [
+        /* @__PURE__ */ jsx(Gamepad2, { size: 18, className: "text-green-400" }),
+        /* @__PURE__ */ jsx("span", { className: "text-white text-xs font-bold uppercase tracking-wider whitespace-nowrap", children: "Tap for Controls" }),
+        /* @__PURE__ */ jsx(Maximize, { size: 14, className: "text-white/60" })
+      ]
     }
   );
 }
@@ -3263,9 +3941,10 @@ function GameOverlay({
   isLoadingSave,
   onSelectBios
 }) {
+  const t = useKoinTranslation();
   const isLoading = status === "loading" || status === "ready" && isLoadingSave;
   if (isLoading) {
-    const message = status === "loading" ? { title: `Loading ${system}`, subtitle: "Initializing emulator" } : { title: "Loading Save", subtitle: `Preparing slot ${pendingSlot}` };
+    const message = status === "loading" ? { title: t.overlay.loading.replace("{{system}}", system || ""), subtitle: t.overlay.initializing } : { title: t.overlay.loadingSave, subtitle: t.overlay.preparingSlot.replace("{{num}}", String(pendingSlot || "")) };
     return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black z-20", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
       /* @__PURE__ */ jsx(LoadingSpinner, { color: systemColor, size: "lg" }),
       /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -3303,12 +3982,11 @@ function GameOverlay({
                 children: /* @__PURE__ */ jsx(Play, { className: "w-8 h-8 ml-1", style: { color: systemColor }, fill: systemColor })
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "font-mono text-lg uppercase tracking-wider", style: { color: systemColor }, children: hasPendingSave ? "Continue" : "Play" }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-lg uppercase tracking-wider", style: { color: systemColor }, children: t.overlay.play }),
             hasPendingSave && /* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-xs flex items-center gap-1", children: [
               /* @__PURE__ */ jsx(Save, { size: 12 }),
-              " Slot ",
-              pendingSlot,
-              " ready"
+              " ",
+              t.overlay.slotReady.replace("{{num}}", String(pendingSlot))
             ] })
           ]
         }
@@ -3320,7 +3998,7 @@ function GameOverlay({
           className: "mt-6 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("div", { className: "w-2 h-2 rounded-full", style: { backgroundColor: systemColor } }),
-            /* @__PURE__ */ jsx("span", { className: "font-mono uppercase tracking-wider text-xs", children: "System Firmware" })
+            /* @__PURE__ */ jsx("span", { className: "font-mono uppercase tracking-wider text-xs", children: t.overlay.systemFirmware })
           ]
         }
       )
@@ -3330,8 +4008,8 @@ function GameOverlay({
     return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/90 z-20", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
       /* @__PURE__ */ jsx(AlertTriangle, { className: "w-12 h-12 text-red-500" }),
       /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-red-400 font-mono uppercase tracking-widest text-sm", children: "System Error" }),
-        /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-xs mt-1 max-w-xs", children: error || "Failed to initialize emulator" })
+        /* @__PURE__ */ jsx("p", { className: "text-red-400 font-mono uppercase tracking-widest text-sm", children: t.overlay.systemError }),
+        /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-xs mt-1 max-w-xs", children: error || t.overlay.failedInit })
       ] }),
       /* @__PURE__ */ jsx(
         "button",
@@ -3339,7 +4017,7 @@ function GameOverlay({
           onClick: onStart,
           className: "mt-2 px-4 py-2 text-sm font-bold rounded-lg transition-colors",
           style: { backgroundColor: systemColor, color: "#000" },
-          children: "Retry"
+          children: t.overlay.retry
         }
       )
     ] }) });
@@ -3357,7 +4035,7 @@ function GameOverlay({
           ] })
         }
       ),
-      /* @__PURE__ */ jsx("p", { className: "font-mono uppercase tracking-wider text-sm", style: { color: systemColor }, children: "Paused" })
+      /* @__PURE__ */ jsx("p", { className: "font-mono uppercase tracking-wider text-sm", style: { color: systemColor }, children: t.overlay.paused })
     ] }) });
   }
   return null;
@@ -3466,6 +4144,7 @@ function ControlMapper({
   onClose,
   system
 }) {
+  const t = useKoinTranslation();
   const [localControls, setLocalControls] = useState(controls);
   const [listeningFor, setListeningFor] = useState(null);
   const activeButtons = useMemo(() => {
@@ -3525,8 +4204,8 @@ function ControlMapper({
         /* @__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: "Control Mapping" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "Click a button and press a key to remap" })
+            /* @__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(
@@ -3557,7 +4236,7 @@ function ControlMapper({
                         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 ? "Press..." : formatKeyCode(localControls[btn] || "")
+                  children: listeningFor === btn ? t.modals.controls.pressKey : formatKeyCode(localControls[btn] || "")
                 }
               )
             ]
@@ -3573,7 +4252,7 @@ function ControlMapper({
             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 }),
-              "Reset to Default"
+              t.modals.controls.reset
             ]
           }
         ),
@@ -3584,7 +4263,7 @@ function ControlMapper({
             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 }),
-              "Save Controls"
+              t.modals.controls.save
             ]
           }
         )
@@ -3764,6 +4443,7 @@ function GamepadMapper({
   onSave,
   systemColor = "#00FF41"
 }) {
+  const t = useKoinTranslation();
   const [selectedPlayer, setSelectedPlayer] = useState(1);
   const [bindings, setBindings] = useState({});
   const [listeningFor, setListeningFor] = useState(null);
@@ -3860,8 +4540,8 @@ function GamepadMapper({
         /* @__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: "Gamepad Settings" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: gamepads.length > 0 ? `${gamepads.length} controller${gamepads.length > 1 ? "s" : ""} connected` : "No controllers detected" })
+            /* @__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(
@@ -3875,7 +4555,7 @@ function GamepadMapper({
       ] }),
       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: "Player:" }),
+          /* @__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",
             {
@@ -3908,10 +4588,10 @@ function GamepadMapper({
           /* @__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: "No controller detected" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mb-4", children: "Press any button on your gamepad to connect" }),
+        /* @__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: "Waiting for input..." }),
+          /* @__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" } }),
@@ -3921,11 +4601,8 @@ function GamepadMapper({
       ] }),
       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__ */ jsxs("p", { className: "text-sm text-white mb-1", children: [
-            "Press a button on your controller for ",
-            /* @__PURE__ */ jsx("strong", { children: BUTTON_LABELS[listeningFor] })
-          ] }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "Press Escape to cancel" })
+          /* @__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 }),
@@ -3957,7 +4634,7 @@ function GamepadMapper({
                       backgroundColor: `${systemColor}30`,
                       color: systemColor
                     } : {},
-                    children: listeningFor === btn ? "Press..." : formatGamepadButton(currentBindings[btn])
+                    children: listeningFor === btn ? t.controls.press : formatGamepadButton(currentBindings[btn])
                   }
                 )
               ]
@@ -3975,7 +4652,7 @@ function GamepadMapper({
             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 disabled:opacity-50",
             children: [
               /* @__PURE__ */ jsx(RotateCcw, { size: 16 }),
-              "Reset to Default"
+              t.modals.gamepad.reset
             ]
           }
         ),
@@ -3988,7 +4665,7 @@ function GamepadMapper({
             style: { backgroundColor: systemColor },
             children: [
               /* @__PURE__ */ jsx(Check, { size: 16 }),
-              "Save Settings"
+              t.modals.gamepad.save
             ]
           }
         )
@@ -4003,7 +4680,8 @@ function CheatModal({
   onToggle,
   onClose
 }) {
-  const [copiedId, setCopiedId] = React5.useState(null);
+  const t = useKoinTranslation();
+  const [copiedId, setCopiedId] = React2.useState(null);
   if (!isOpen) return null;
   const handleCopy = async (code, id) => {
     await navigator.clipboard.writeText(code);
@@ -4023,13 +4701,8 @@ function CheatModal({
         /* @__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: "Cheat Codes" }),
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-400", children: [
-              cheats.length,
-              " cheat",
-              cheats.length !== 1 ? "s" : "",
-              " available"
-            ] })
+            /* @__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(
@@ -4043,8 +4716,8 @@ function CheatModal({
       ] }),
       /* @__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: "No cheats available" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "No cheat codes found for this game" })
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: t.modals.cheats.emptyTitle }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: t.modals.cheats.emptyDesc })
       ] }) : cheats.map((cheat) => {
         const isActive = activeCheats.has(cheat.id);
         return /* @__PURE__ */ jsxs(
@@ -4078,7 +4751,7 @@ function CheatModal({
                         handleCopy(cheat.code, cheat.id);
                       },
                       className: "p-1.5 rounded hover:bg-white/10 text-gray-500 hover:text-white transition-colors",
-                      title: "Copy code",
+                      title: t.modals.cheats.copy,
                       children: copiedId === cheat.id ? /* @__PURE__ */ jsx(Check, { size: 14, className: "text-green-400" }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
                     }
                   )
@@ -4089,7 +4762,7 @@ 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 ? `${activeCheats.size} cheat${activeCheats.size !== 1 ? "s" : ""} active` : "Click a cheat to toggle it on/off" }) })
+      /* @__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 }) })
     ] })
   ] });
 }
@@ -4102,18 +4775,22 @@ function formatBytes(bytes) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
 }
 function formatTimestamp(timestamp) {
-  const date = new Date(timestamp);
-  const now = /* @__PURE__ */ new Date();
-  const diff = now.getTime() - date.getTime();
-  if (diff < 6e4) return "Just now";
-  if (diff < 36e5) return `${Math.floor(diff / 6e4)}m ago`;
-  if (diff < 864e5) return `${Math.floor(diff / 36e5)}h ago`;
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit"
-  });
+  try {
+    const date = new Date(timestamp);
+    const now = /* @__PURE__ */ new Date();
+    const diff = now.getTime() - date.getTime();
+    if (diff < 6e4) return "Just now";
+    if (diff < 36e5) return `${Math.floor(diff / 6e4)}m ago`;
+    if (diff < 864e5) return `${Math.floor(diff / 36e5)}h ago`;
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  } catch {
+    return "Unknown";
+  }
 }
 function SaveSlotModal({
   isOpen,
@@ -4127,6 +4804,7 @@ function SaveSlotModal({
   maxSlots = 5,
   onUpgrade
 }) {
+  const t = useKoinTranslation();
   if (!isOpen) return null;
   const isSaveMode = mode === "save";
   const allSlots = [1, 2, 3, 4, 5];
@@ -4155,8 +4833,8 @@ function SaveSlotModal({
         /* @__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 ? "Save Game" : "Load Game" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: isSaveMode ? "Choose a slot to save your progress" : "Select a save to restore" })
+            /* @__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(
@@ -4170,7 +4848,7 @@ function SaveSlotModal({
       ] }),
       /* @__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: "Loading saves..." })
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: t.modals.saveSlots.loading })
       ] }) : displaySlots.map((slotNum) => {
         const slotData = getSlotData(slotNum);
         const isEmpty = !slotData;
@@ -4187,14 +4865,10 @@ function SaveSlotModal({
               children: [
                 /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-12 h-12 rounded-lg flex items-center justify-center font-bold text-xl bg-gray-700 text-gray-500", children: /* @__PURE__ */ jsx(Lock, { size: 20 }) }),
                 /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxs("p", { className: "font-medium text-gray-400 group-hover:text-white transition-colors", children: [
-                    "Slot ",
-                    slotNum,
-                    " Locked"
-                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-400 group-hover:text-white transition-colors", children: t.modals.saveSlots.locked.replace("{{num}}", slotNum.toString()) }),
                   /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 group-hover:text-retro-primary transition-colors flex items-center gap-1", children: [
                     /* @__PURE__ */ jsx(Zap, { size: 10 }),
-                    "Upgrade to unlock more save slots"
+                    t.modals.saveSlots.upgrade
                   ] })
                 ] })
               ]
@@ -4218,8 +4892,8 @@ function SaveSlotModal({
               /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: isAutoSaveSlot ? (
                 // Auto-save slot - special display
                 isEmpty ? /* @__PURE__ */ jsxs("div", { className: "text-retro-primary/70", children: [
-                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Auto-Save Slot" }),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs text-retro-primary/50", children: "Reserved for automatic saves" })
+                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: t.modals.saveSlots.autoSave }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-retro-primary/50", children: t.modals.saveSlots.autoSaveDesc })
                 ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                   slotData.screenshot && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-16 h-12 rounded border border-retro-primary/30 overflow-hidden bg-black", children: /* @__PURE__ */ jsx(
                     "img",
@@ -4233,7 +4907,7 @@ function SaveSlotModal({
                     }
                   ) }),
                   /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                    /* @__PURE__ */ jsx("p", { className: "font-medium text-retro-primary truncate", children: "Auto-Save" }),
+                    /* @__PURE__ */ jsx("p", { className: "font-medium text-retro-primary truncate", children: t.modals.saveSlots.autoSave }),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-retro-primary/60 mt-1", children: [
                       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
                         /* @__PURE__ */ jsx(Clock, { size: 12 }),
@@ -4247,8 +4921,8 @@ function SaveSlotModal({
                   ] })
                 ] })
               ) : isEmpty ? /* @__PURE__ */ jsxs("div", { className: "text-gray-500", children: [
-                /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Empty Slot" }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs", children: "No save data" })
+                /* @__PURE__ */ jsx("p", { className: "font-medium", children: t.modals.saveSlots.emptySlot }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs", children: t.modals.saveSlots.noData })
               ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                 slotData.screenshot && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-16 h-12 rounded border border-white/10 overflow-hidden bg-black", children: /* @__PURE__ */ jsx(
                   "img",
@@ -4262,10 +4936,7 @@ function SaveSlotModal({
                   }
                 ) }),
                 /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxs("p", { className: "font-medium text-white truncate", children: [
-                    "Slot ",
-                    slotNum
-                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "font-medium text-white truncate", children: t.modals.saveSlots.slot.replace("{{num}}", slotNum.toString()) }),
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-gray-400 mt-1", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
                       /* @__PURE__ */ jsx(Clock, { size: 12 }),
@@ -4295,7 +4966,7 @@ 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 ? "Saves are stored in the cloud and sync across devices" : "Your progress will be restored to the selected save point" }) })
+      /* @__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 }) })
     ] })
   ] });
 }
@@ -4307,6 +4978,7 @@ function BiosSelectionModal({
   onSelectBios,
   systemColor = "#00FF41"
 }) {
+  const t = useKoinTranslation();
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
     /* @__PURE__ */ jsx(
@@ -4326,8 +4998,8 @@ function BiosSelectionModal({
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ jsx(Cpu, { size: 24, style: { color: systemColor } }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-white uppercase tracking-wide", children: "BIOS Selection" }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "Select a BIOS file to use for this game" })
+                /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-white uppercase tracking-wide", children: t.modals.bios.title }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: t.modals.bios.description })
               ] })
             ] }),
             /* @__PURE__ */ jsx(
@@ -4343,8 +5015,9 @@ function BiosSelectionModal({
             /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 rounded bg-yellow-500/10 border border-yellow-500/20 flex items-start gap-3", children: [
               /* @__PURE__ */ jsx(AlertCircle, { className: "shrink-0 text-yellow-500 mt-0.5", size: 16 }),
               /* @__PURE__ */ jsxs("div", { className: "text-xs text-yellow-200/80", children: [
-                /* @__PURE__ */ jsx("strong", { children: "Note:" }),
-                " Changing BIOS requires the emulator to restart. Your unsaved progress will be lost."
+                /* @__PURE__ */ jsx("strong", { children: t.modals.bios.warningTitle }),
+                " ",
+                t.modals.bios.warning
               ] })
             ] }),
             /* @__PURE__ */ jsxs(
@@ -4374,10 +5047,10 @@ function BiosSelectionModal({
                   ),
                   /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx("span", { className: `font-mono font-bold truncate ${!currentBiosId ? "text-white" : "text-gray-300"}`, children: "System Default" }),
-                      !currentBiosId && /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded text-[10px] font-bold bg-white/20 text-white uppercase tracking-wider", children: "Active" })
+                      /* @__PURE__ */ jsx("span", { className: `font-mono font-bold truncate ${!currentBiosId ? "text-white" : "text-gray-300"}`, children: t.modals.bios.systemDefault }),
+                      !currentBiosId && /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded text-[10px] font-bold bg-white/20 text-white uppercase tracking-wider", children: t.modals.bios.active })
                     ] }),
-                    /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: "Use the emulator's built-in or default BIOS" })
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: t.modals.bios.defaultDesc })
                   ] }),
                   !currentBiosId && /* @__PURE__ */ jsx(Check, { size: 20, style: { color: systemColor } })
                 ]
@@ -4385,8 +5058,8 @@ function BiosSelectionModal({
             ),
             biosOptions.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-gray-500", children: [
               /* @__PURE__ */ jsx(FileCode, { size: 48, className: "mx-auto mb-3 opacity-30" }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No BIOS files found for this console." }),
-              /* @__PURE__ */ jsx("p", { className: "text-[10px] mt-1 text-gray-600", children: "Upload BIOS files in your Dashboard Library." })
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: t.modals.bios.emptyTitle }),
+              /* @__PURE__ */ jsx("p", { className: "text-[10px] mt-1 text-gray-600", children: t.modals.bios.emptyDesc })
             ] }) : biosOptions.map((bios) => {
               const isSelected = bios.id === currentBiosId;
               return /* @__PURE__ */ jsxs(
@@ -4417,7 +5090,7 @@ function BiosSelectionModal({
                     /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                         /* @__PURE__ */ jsx("span", { className: `font-mono font-bold truncate ${isSelected ? "text-white" : "text-gray-300"}`, children: bios.name }),
-                        isSelected && /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded text-[10px] font-bold bg-white/20 text-white uppercase tracking-wider", children: "Active" })
+                        isSelected && /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded text-[10px] font-bold bg-white/20 text-white uppercase tracking-wider", children: t.modals.bios.active })
                       ] }),
                       bios.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: bios.description })
                     ] }),
@@ -4428,12 +5101,84 @@ function BiosSelectionModal({
               );
             })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-500 uppercase tracking-widest", children: "System Firmware Settings" }) })
+          /* @__PURE__ */ jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-500 uppercase tracking-widest", children: t.modals.bios.footer }) })
         ]
       }
     )
   ] });
 }
+function SettingsModal({
+  isOpen,
+  onClose,
+  currentLanguage,
+  onLanguageChange,
+  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: [
+        /* @__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 })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: languages.map((lang) => {
+          const isActive = currentLanguage === lang.code;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              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"}
+                                        `,
+              children: [
+                /* @__PURE__ */ jsx("span", { children: lang.name }),
+                isActive && /* @__PURE__ */ jsx(Check, { size: 16, style: { color: systemColor } })
+              ]
+            },
+            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,
   setControlsModalOpen,
@@ -4465,7 +5210,11 @@ function GameModals({
   setBiosModalOpen,
   availableBios,
   currentBiosId,
-  onSelectBios
+  onSelectBios,
+  settingsModalOpen,
+  setSettingsModalOpen,
+  currentLanguage,
+  onLanguageChange
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -4541,6 +5290,19 @@ function GameModals({
         },
         systemColor
       }
+    ),
+    /* @__PURE__ */ jsx(
+      SettingsModal,
+      {
+        isOpen: settingsModalOpen,
+        onClose: () => {
+          setSettingsModalOpen(false);
+          onResume();
+        },
+        currentLanguage,
+        onLanguageChange,
+        systemColor
+      }
     )
   ] });
 }
@@ -4555,10 +5317,11 @@ function LoginForm({
   error,
   onSubmit
 }) {
+  const t = useKoinTranslation();
   return /* @__PURE__ */ jsxs("form", { onSubmit, className: "p-4 space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
       /* @__PURE__ */ jsx("div", { className: "w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-yellow-500/20 to-orange-500/20 border border-yellow-500/30 flex items-center justify-center", children: /* @__PURE__ */ jsx(Trophy, { className: "text-yellow-400", size: 32 }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-xs", children: "Connect your account to track achievements" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-xs", children: t.retroAchievements.connectAccount }),
       /* @__PURE__ */ jsxs(
         "a",
         {
@@ -4567,14 +5330,14 @@ function LoginForm({
           rel: "noopener noreferrer",
           className: "text-yellow-400 hover:text-yellow-300 text-xs inline-flex items-center gap-1 mt-1",
           children: [
-            "Create an account",
+            t.retroAchievements.createAccount,
             /* @__PURE__ */ jsx(ExternalLink, { size: 10 })
           ]
         }
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "block text-[10px] text-gray-500 mb-1 uppercase tracking-wider", children: "Username" }),
+      /* @__PURE__ */ jsx("label", { className: "block text-[10px] text-gray-500 mb-1 uppercase tracking-wider", children: t.retroAchievements.username }),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsx(User, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500", size: 14 }),
         /* @__PURE__ */ jsx(
@@ -4583,7 +5346,7 @@ function LoginForm({
             type: "text",
             value: username,
             onChange: (e) => setUsername(e.target.value),
-            placeholder: "Your RA username",
+            placeholder: t.retroAchievements.yourUsername,
             className: "w-full pl-8 pr-3 py-2 text-sm bg-black/50 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-yellow-500/50 focus:outline-none transition-colors",
             disabled: isLoading
           }
@@ -4591,7 +5354,7 @@ function LoginForm({
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "block text-[10px] text-gray-500 mb-1 uppercase tracking-wider", children: "Password" }),
+      /* @__PURE__ */ jsx("label", { className: "block text-[10px] text-gray-500 mb-1 uppercase tracking-wider", children: t.retroAchievements.password }),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsx(Lock, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500", size: 14 }),
         /* @__PURE__ */ jsx(
@@ -4600,7 +5363,7 @@ function LoginForm({
             type: showPassword ? "text" : "password",
             value: password,
             onChange: (e) => setPassword(e.target.value),
-            placeholder: "Your RA password",
+            placeholder: t.retroAchievements.yourPassword,
             className: "w-full pl-8 pr-9 py-2 text-sm bg-black/50 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-yellow-500/50 focus:outline-none transition-colors",
             disabled: isLoading
           }
@@ -4628,16 +5391,20 @@ function LoginForm({
         className: "w-full flex items-center justify-center gap-2 px-3 py-2.5 bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-400 hover:to-orange-400 text-black text-sm font-bold rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
         children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", size: 14 }),
-          /* @__PURE__ */ jsx("span", { children: "Connecting..." })
+          /* @__PURE__ */ jsx("span", { children: t.retroAchievements.connecting })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Trophy, { size: 14 }),
-          /* @__PURE__ */ jsx("span", { children: "Connect" })
+          /* @__PURE__ */ jsx("span", { children: t.retroAchievements.login })
         ] })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "p-2 bg-blue-500/10 border border-blue-500/20 rounded-lg", children: /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-blue-300 leading-relaxed", children: [
-      /* @__PURE__ */ jsx("strong", { children: "\u{1F512} Privacy:" }),
-      " Your password is only used to authenticate with RetroAchievements. It is never stored."
+      /* @__PURE__ */ jsxs("strong", { children: [
+        "\u{1F512} ",
+        t.retroAchievements.privacy
+      ] }),
+      " ",
+      t.retroAchievements.privacyText
     ] }) })
   ] });
 }
@@ -4661,6 +5428,7 @@ function SettingsTab({
   progress,
   onLogout
 }) {
+  const t = useKoinTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 bg-black/30 rounded-lg border border-yellow-500/20", children: [
       /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-lg bg-gray-800 overflow-hidden border-2 border-yellow-500/50 flex-shrink-0", children: credentials.avatarUrl ? /* @__PURE__ */ jsx(
@@ -4730,7 +5498,7 @@ function SettingsTab({
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(Shield, { className: hardcoreEnabled ? "text-red-500" : "text-gray-500", size: 16 }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-white", children: "Hardcore Mode" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-white", children: t.retroAchievements.hardcore }),
             /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-500", children: "2x points, no savestates" })
           ] })
         ] }),
@@ -4748,11 +5516,11 @@ function SettingsTab({
           }
         )
       ] }),
-      hardcoreEnabled && /* @__PURE__ */ jsx("div", { className: "mt-2 p-2 bg-red-500/10 border border-red-500/20 rounded text-[10px] text-red-300", children: "Savestates, rewind, cheats & slow-mo disabled" })
+      hardcoreEnabled && /* @__PURE__ */ jsx("div", { className: "mt-2 p-2 bg-red-500/10 border border-red-500/20 rounded text-[10px] text-red-300", children: t.common.disabledInHardcore })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs px-1", children: [
       /* @__PURE__ */ jsx(CheckCircle, { className: "text-green-500", size: 12 }),
-      /* @__PURE__ */ jsx("span", { className: "text-green-400", children: "Connected" })
+      /* @__PURE__ */ jsx("span", { className: "text-green-400", children: t.retroAchievements.connectedStatus })
     ] }),
     /* @__PURE__ */ jsxs(
       "button",
@@ -4761,7 +5529,7 @@ function SettingsTab({
         className: "w-full flex items-center justify-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 text-white text-xs rounded-lg transition-colors border border-white/10",
         children: [
           /* @__PURE__ */ jsx(LogOut, { size: 14 }),
-          /* @__PURE__ */ jsx("span", { children: "Sign Out" })
+          /* @__PURE__ */ jsx("span", { children: t.retroAchievements.logout })
         ]
       }
     )
@@ -4778,18 +5546,19 @@ function AchievementsTab({
   earnedPoints,
   totalPoints
 }) {
+  const t = useKoinTranslation();
   if (!currentGame) {
     return /* @__PURE__ */ jsxs("div", { className: "p-6 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "w-12 h-12 mx-auto mb-3 rounded-full bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsx(Trophy, { className: "text-gray-600", size: 24 }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400", children: "No game loaded" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Load a game to see achievements" })
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400", children: t.retroAchievements.noGame }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: t.retroAchievements.loadGame })
     ] });
   }
   if (achievements.length === 0) {
     return /* @__PURE__ */ jsxs("div", { className: "p-6 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "w-12 h-12 mx-auto mb-3 rounded-full bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsx(Trophy, { className: "text-gray-600", size: 24 }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400", children: "No achievements found" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: "This game may not be supported" })
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400", children: t.retroAchievements.noAchievements }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: t.retroAchievements.notSupported })
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { children: [
@@ -4842,7 +5611,7 @@ function AchievementsTab({
         {
           onClick: () => setFilter(f),
           className: `px-2 py-0.5 text-[10px] rounded-full border transition-colors ${filter === f ? "bg-yellow-500/20 border-yellow-500/50 text-yellow-400" : "border-gray-700 text-gray-500 hover:text-gray-300"}`,
-          children: f.charAt(0).toUpperCase() + f.slice(1)
+          children: t.retroAchievements.filters[f]
         },
         f
       )) })
@@ -4881,8 +5650,7 @@ function AchievementsTab({
     /* @__PURE__ */ jsxs("div", { className: "p-2 text-[10px] text-gray-500 text-center border-t border-gray-800/50", children: [
       progress,
       "% complete \u2022 ",
-      totalPoints - earnedPoints,
-      " pts remaining"
+      t.retroAchievements.ptsRemaining.replace("{{count}}", (totalPoints - earnedPoints).toString())
     ] })
   ] });
 }
@@ -4901,6 +5669,7 @@ function RASidebar({
   achievements,
   unlockedIds
 }) {
+  const t = useKoinTranslation();
   const defaultTab = isLoggedIn && currentGame && achievements.length > 0 ? "achievements" : "settings";
   const [activeTab, setActiveTab] = useState(defaultTab);
   const [filter, setFilter] = useState("all");
@@ -4926,7 +5695,7 @@ function RASidebar({
     e.preventDefault();
     setLocalError(null);
     if (!username.trim() || !password.trim()) {
-      setLocalError("Username and Password are required");
+      setLocalError(t.retroAchievements.usernameRequired);
       return;
     }
     const success = await onLogin(username.trim(), password.trim());
@@ -4969,7 +5738,7 @@ function RASidebar({
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Trophy, { className: "text-yellow-400", size: 18 }),
-            /* @__PURE__ */ jsx("span", { className: "font-heading text-sm text-white", children: "RetroAchievements" })
+            /* @__PURE__ */ jsx("span", { className: "font-heading text-sm text-white", children: t.retroAchievements.title })
           ] }),
           /* @__PURE__ */ jsx(
             "button",
@@ -4988,7 +5757,7 @@ function RASidebar({
               className: `flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-md transition-colors ${activeTab === "achievements" ? "bg-yellow-500/20 text-yellow-400" : "text-gray-400 hover:text-white"}`,
               children: [
                 /* @__PURE__ */ jsx(List, { size: 12 }),
-                "Achievements"
+                t.retroAchievements.achievements
               ]
             }
           ),
@@ -4999,7 +5768,7 @@ function RASidebar({
               className: `flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-md transition-colors ${activeTab === "settings" ? "bg-yellow-500/20 text-yellow-400" : "text-gray-400 hover:text-white"}`,
               children: [
                 /* @__PURE__ */ jsx(Settings, { size: 12 }),
-                "Settings"
+                t.settings.title
               ]
             }
           )
@@ -5046,7 +5815,7 @@ function RASidebar({
         }
       ) }),
       /* @__PURE__ */ jsxs("div", { className: "p-2 border-t border-gray-800 bg-gray-900/80 text-[10px] text-gray-500 text-center flex-shrink-0", children: [
-        "Powered by",
+        t.retroAchievements.poweredBy,
         " ",
         /* @__PURE__ */ jsx(
           "a",
@@ -6650,6 +7419,7 @@ function useVolume({
   };
 }
 function useControls(system, onNotify) {
+  const t = useKoinTranslation();
   const defaultControls = getConsoleKeyboardDefaults(system || "SNES");
   const [controls, setControls] = useState(() => {
     if (typeof window !== "undefined") {
@@ -6664,13 +7434,13 @@ function useControls(system, onNotify) {
   const saveControls = useCallback((newControls) => {
     setControls(newControls);
     saveKeyboardMapping(newControls, system);
-    onNotify?.("Controls saved", "success");
-  }, [system, onNotify]);
+    onNotify?.(t.notifications.controlsSaved, "success");
+  }, [system, onNotify, t]);
   const resetToDefaults = useCallback(() => {
     setControls(defaultControls);
     saveKeyboardMapping(defaultControls, system);
-    onNotify?.("Controls reset to defaults", "info");
-  }, [defaultControls, system, onNotify]);
+    onNotify?.(t.notifications.controlsReset, "info");
+  }, [defaultControls, system, onNotify, t]);
   return {
     controls,
     saveControls,
@@ -6696,16 +7466,17 @@ function useGameSession(props) {
     canvasRef,
     showToast
   } = props;
+  const t = useKoinTranslation();
   const { controls, saveControls } = useControls(system, showToast);
   const [gamepadModalOpen, setGamepadModalOpen] = useState(false);
   const [controlsModalOpen, setControlsModalOpen] = useState(false);
   const { gamepads, connectedCount } = useGamepad({
     onConnect: (gamepad) => {
       showToast(
-        gamepad.name || "Controller ready to use",
+        gamepad.name || t.notifications.controllerReady,
         "gamepad",
         {
-          title: "Controller Connected",
+          title: t.notifications.controllerConnected,
           duration: 4e3,
           action: {
             label: "Configure",
@@ -6716,10 +7487,11 @@ function useGameSession(props) {
     },
     onDisconnect: () => {
       showToast(
-        "Controller was disconnected",
+        t.notifications.controllerDisconnected,
         "warning",
         {
-          title: "Controller Lost",
+          title: t.notifications.controllerDisconnected,
+          // Title repeats or generic? Using same for now
           duration: 3e3
         }
       );
@@ -6749,10 +7521,10 @@ function useGameSession(props) {
       if (arcadeSystems.includes(system.toLowerCase())) {
         setTimeout(() => {
           showToast(
-            "Press SHIFT to insert coin",
+            t.notifications.insertCoin,
             "info",
             {
-              title: "\u{1FA99} Insert Coin",
+              title: t.notifications.insertCoinTitle,
               duration: 5e3
             }
           );
@@ -6990,6 +7762,7 @@ function useGameSaves({
   onDeleteSaveState,
   autoSaveInterval
 }) {
+  const t = useKoinTranslation();
   const [saveModalOpen, setSaveModalOpen] = useState(false);
   const [saveModalMode, setSaveModalMode] = useState("save");
   const [saveSlots, setSaveSlots] = useState([]);
@@ -7016,7 +7789,7 @@ function useGameSaves({
       setSaveSlots(slots);
     } catch (err) {
       console.error("Failed to fetch save slots:", err);
-      showToast("Failed to load save slots", "error");
+      showToast(t.notifications.failedFetch, "error", { title: t.overlays.toast.error });
     } finally {
       setIsSlotLoading(false);
     }
@@ -7033,7 +7806,7 @@ function useGameSaves({
         const result = await nostalgist.saveStateWithBlob();
         if (result) {
           await onSaveState(0, result.blob, void 0);
-          showToast("State saved successfully", "success");
+          showToast(t.notifications.saved, "success", { title: t.overlays.toast.saved });
         }
       });
     } else {
@@ -7047,7 +7820,7 @@ function useGameSaves({
           a.download = `${fileName}.state`;
           a.click();
           URL.revokeObjectURL(url);
-          showToast("State downloaded", "success");
+          showToast(t.notifications.downloaded, "success", { title: t.overlays.toast.saved });
         }
       });
     }
@@ -7066,9 +7839,9 @@ function useGameSaves({
         await queueRef.current.add(async () => {
           await nostalgist.loadState(new Uint8Array(buffer));
         });
-        showToast("State loaded successfully", "success");
+        showToast(t.notifications.loaded, "success", { title: t.overlays.toast.loaded });
       } else {
-        showToast("No save found", "error");
+        showToast(t.notifications.noSaveFound, "error", { title: t.overlays.toast.error });
       }
     } else {
       const input = document.createElement("input");
@@ -7081,7 +7854,7 @@ function useGameSaves({
           await queueRef.current.add(async () => {
             await nostalgist.loadState(new Uint8Array(buffer));
           });
-          showToast("State loaded from file", "success");
+          showToast(t.notifications.loadedFile, "success", { title: t.overlays.toast.loaded });
         }
       };
       input.click();
@@ -7106,14 +7879,14 @@ function useGameSaves({
               console.warn("Screenshot failed", e);
             }
             await onSaveState(slot, result.blob, screen);
-            showToast(`Saved to slot ${slot}`, "success");
+            showToast(t.notifications.savedSlot.replace("{{num}}", slot.toString()), "success", { title: t.overlays.toast.saved });
             setSaveModalOpen(false);
             resume();
           }
         });
       } catch (err) {
         console.error("Save failed:", err);
-        showToast("Failed to save", "error");
+        showToast(t.notifications.failedSave, "error", { title: t.overlays.toast.error });
       } finally {
         setActioningSlot(null);
       }
@@ -7127,15 +7900,15 @@ function useGameSaves({
           await queueRef.current.add(async () => {
             await nostalgist.loadState(new Uint8Array(buffer));
           });
-          showToast(`Loaded from slot ${slot}`, "success");
+          showToast(t.notifications.loadedSlot.replace("{{num}}", slot.toString()), "success", { title: t.overlays.toast.loaded });
           setSaveModalOpen(false);
           resume();
         } else {
-          showToast("Empty slot", "error");
+          showToast(t.notifications.emptySlot, "error", { title: t.overlays.toast.error });
         }
       } catch (err) {
         console.error("Load failed:", err);
-        showToast("Failed to load", "error");
+        showToast(t.notifications.failedLoad, "error", { title: t.overlays.toast.error });
       } finally {
         setActioningSlot(null);
       }
@@ -7147,11 +7920,11 @@ function useGameSaves({
     setActioningSlot(slot);
     try {
       await onDeleteSaveState(slot);
-      showToast(`Deleted slot ${slot}`, "success");
+      showToast(t.notifications.deletedSlot.replace("{{num}}", slot.toString()), "success", { title: t.overlays.toast.saved });
       refreshSlots();
     } catch (err) {
       console.error("Delete failed:", err);
-      showToast("Failed to delete", "error");
+      showToast(t.notifications.failedDelete, "error", { title: t.overlays.toast.error });
     } finally {
       setActioningSlot(null);
     }
@@ -7465,7 +8238,7 @@ function useGamePlayer(props) {
     recordingSupported
   };
 }
-var STORAGE_KEY2 = "koin-player-settings";
+var STORAGE_KEY3 = "koin-player-settings";
 var DEFAULT_SETTINGS = {
   volume: 1,
   muted: false,
@@ -7478,7 +8251,7 @@ function usePlayerPersistence(onSettingsChange) {
   const [isLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
     try {
-      const stored = localStorage.getItem(STORAGE_KEY2);
+      const stored = localStorage.getItem(STORAGE_KEY3);
       if (stored) {
         const parsed = JSON.parse(stored);
         setSettings((prev) => ({ ...prev, ...parsed }));
@@ -7492,7 +8265,7 @@ function usePlayerPersistence(onSettingsChange) {
     setSettings((prev) => {
       const next = { ...prev, ...updates };
       try {
-        localStorage.setItem(STORAGE_KEY2, JSON.stringify(next));
+        localStorage.setItem(STORAGE_KEY3, JSON.stringify(next));
       } catch (e) {
         console.error("Failed to save player settings", e);
       }
@@ -7529,7 +8302,485 @@ var sendTelemetry = (eventName, params = {}) => {
   } catch (e) {
   }
 };
-var GamePlayer = memo(function GamePlayer2(props) {
+
+// src/locales/es.ts
+var es = {
+  controls: {
+    play: "Jugar",
+    pause: "Pausar",
+    reset: "Reiniciar",
+    rewind: "Rebobinar",
+    save: "Guardar",
+    load: "Cargar",
+    snap: "Capturar",
+    rec: "Grabar",
+    stopRec: "Detener",
+    startRecord: "Comenzar grabaci\xF3n",
+    stopRecord: "Detener grabaci\xF3n",
+    mute: "Silenciar",
+    unmute: "Activar sonido",
+    help: "Ayuda",
+    full: "Pantalla comp.",
+    // Abbreviated
+    keys: "Teclas",
+    menuOpen: "Abrir men\xFA",
+    menuClose: "Cerrar men\xFA",
+    gamepadConnected: "{{count}} mando{{plural}} conectado(s) - haz clic para configurar",
+    noGamepad: "No hay mando detectado - presiona cualquier bot\xF3n para conectar",
+    press: "Pulsa",
+    startBtn: "START",
+    selectBtn: "SELECT"
+  },
+  common: {
+    disabledInHardcore: "Desactivado en modo Hardcore",
+    notSupported: "No compatible con esta consola",
+    playToEnableRewind: "Juega unos segundos para activar el rebobinado"
+  },
+  settings: {
+    title: "Ajustes",
+    general: "General",
+    audio: "Sonido",
+    video: "V\xEDdeo",
+    input: "Entrada",
+    advanced: "Avanzado",
+    fullscreen: "Pantalla completa",
+    controls: "Controles",
+    gamepad: "Mando",
+    cheats: "Trucos",
+    retroAchievements: "RetroAchievements",
+    shortcuts: "Atajos",
+    exit: "Salir",
+    language: "Idioma",
+    selectLanguage: "Seleccionar idioma"
+  },
+  overlay: {
+    play: "JUGAR",
+    systemFirmware: "FIRMWARE DEL SISTEMA",
+    loading: "Cargando {{system}}",
+    initializing: "Inicializando emulador",
+    loadingSave: "Cargando partida",
+    preparingSlot: "Preparando ranura {{num}}",
+    systemError: "Error del sistema",
+    failedInit: "Error al inicializar el emulador",
+    retry: "Reintentar",
+    slotReady: "Ranura {{num}} lista",
+    paused: "Pausado"
+  },
+  notifications: {
+    saved: "Estado guardado",
+    loaded: "Estado cargado",
+    error: "Error",
+    recordingStarted: "Grabaci\xF3n iniciada",
+    recordingSaved: "Grabaci\xF3n guardada",
+    downloaded: "Estado descargado",
+    loadedFile: "Estado cargado desde archivo",
+    savedSlot: "Guardado en ranura {{num}}",
+    loadedSlot: "Cargado desde ranura {{num}}",
+    deletedSlot: "Ranura {{num}} eliminada",
+    emptySlot: "Ranura vac\xEDa",
+    noSaveFound: "No se encontr\xF3 partida guardada",
+    failedSave: "Error al guardar",
+    failedLoad: "Error al cargar",
+    failedDelete: "Error al eliminar",
+    failedFetch: "Error al cargar ranuras",
+    controllerConnected: "Mando conectado",
+    controllerDisconnected: "Mando desconectado",
+    controllerReady: "Mando listo para usar",
+    insertCoin: "Pulsa SHIFT para insertar moneda",
+    insertCoinTitle: "\u{1FA99} Insertar Moneda",
+    controlsSaved: "Controles guardados",
+    controlsReset: "Controles restablecidos"
+  },
+  modals: {
+    shortcuts: {
+      title: "Atajos de teclado",
+      playerShortcuts: "Atajos del reproductor",
+      overlays: "Superposiciones",
+      recording: "Grabaci\xF3n",
+      showHelp: "Mostrar ayuda",
+      perfOverlay: "Superposici\xF3n de rendimiento",
+      inputDisplay: "Mostrar entrada",
+      toggleRec: "Alternar grabaci\xF3n",
+      toggleMute: "Alternar silencio",
+      pressEsc: "Pulsa ESC para cerrar"
+    },
+    controls: {
+      title: "Controles",
+      keyboard: "Asignaci\xF3n de teclado",
+      description: "Haz clic en un bot\xF3n y pulsa una tecla",
+      pressKey: "Pulsa una tecla...",
+      reset: "Restablecer",
+      save: "Guardar controles"
+    },
+    gamepad: {
+      title: "Ajustes de mando",
+      noGamepad: "No se detecta mando",
+      connected: "{{count}} mando{{s}} conectado(s)",
+      none: "Ning\xFAn mando detectado",
+      player: "Jugador:",
+      noController: "Sin mando",
+      pressAny: "Pulsa cualquier bot\xF3n para conectar",
+      waiting: "Esperando entrada...",
+      pressButton: "Pulsa bot\xF3n para {{button}}",
+      pressEsc: "Pulsa Escape para cancelar",
+      reset: "Restablecer",
+      save: "Guardar ajustes"
+    },
+    cheats: {
+      title: "Trucos",
+      addCheat: "A\xF1adir truco",
+      available: "{{count}} truco{{s}} disponible(s)",
+      emptyTitle: "No hay trucos disponibles",
+      emptyDesc: "No se encontraron c\xF3digos para este juego",
+      copy: "Copiar c\xF3digo",
+      active: "{{count}} truco{{s}} activo(s)",
+      toggleHint: "Haz clic para activar/desactivar"
+    },
+    saveSlots: {
+      title: "Guardar partida",
+      saveTitle: "Guardar",
+      loadTitle: "Cargar",
+      emptySlot: "Ranura vac\xEDa",
+      subtitleSave: "Elige una ranura para guardar",
+      subtitleLoad: "Elige una ranura para cargar",
+      loading: "Cargando partidas...",
+      locked: "Ranura {{num}} bloqueada",
+      upgrade: "Mejora para desbloquear m\xE1s ranuras",
+      autoSave: "Autoguardado",
+      autoSaveDesc: "Reservado para guardado autom\xE1tico",
+      noData: "Sin datos",
+      slot: "Ranura {{num}}",
+      footerSave: "Las partidas se guardan en la nube y se sincronizan",
+      footerLoad: "Tu progreso se restaurar\xE1 al punto seleccionado"
+    },
+    bios: {
+      title: "Selecci\xF3n de BIOS",
+      description: "Selecciona una BIOS para este juego",
+      warningTitle: "Nota:",
+      warning: "Cambiar la BIOS reiniciar\xE1 el emulador. Se perder\xE1 el progreso no guardado.",
+      systemDefault: "Por defecto",
+      active: "Activo",
+      defaultDesc: "Usar BIOS interna del emulador",
+      emptyTitle: "No se encontraron archivos de BIOS.",
+      emptyDesc: "Sube archivos BIOS en tu biblioteca.",
+      footer: "Firmware del sistema"
+    }
+  },
+  retroAchievements: {
+    title: "RetroAchievements",
+    login: "Iniciar sesi\xF3n",
+    logout: "Cerrar sesi\xF3n",
+    username: "Usuario",
+    password: "Password",
+    hardcore: "Modo Hardcore",
+    achievements: "Logros",
+    locked: "Bloqueado",
+    unlocked: "Desbloqueado",
+    mastered: "Dominado",
+    identifying: "Identificando juego...",
+    achievementsAvailable: "{{count}} logros disponibles",
+    gameNotSupported: "Conectado - Juego no en base de datos",
+    connect: "Conectar RetroAchievements",
+    connected: "RetroAchievements (conectado)",
+    createAccount: "Crear cuenta",
+    privacy: "Privacidad:",
+    privacyText: "Tu contrase\xF1a solo se usa para autenticaci\xF3n con RA. No se almacena.",
+    connecting: "Conectando...",
+    connectAccount: "Conecta tu cuenta para rastrear logros",
+    poweredBy: "Con la tecnolog\xEDa de",
+    connectedStatus: "Conectado",
+    yourUsername: "Tu usuario RA",
+    yourPassword: "Tu contrase\xF1a RA",
+    usernameRequired: "Usuario y contrase\xF1a requeridos",
+    noGame: "Sin juego cargado",
+    loadGame: "Carga un juego para ver los logros",
+    noAchievements: "No se encontraron logros",
+    notSupported: "Este juego puede no ser compatible",
+    ptsRemaining: "{{count}} pts restantes",
+    filters: {
+      all: "Todos",
+      locked: "Bloqueado",
+      unlocked: "Desbloqueado"
+    }
+  },
+  overlays: {
+    performance: {
+      title: "Estad\xEDsticas",
+      fps: "FPS",
+      frameTime: "FT",
+      memory: "MEM",
+      core: "Core",
+      input: "ENTRADA",
+      active: "ACTIVO"
+    },
+    toast: {
+      saved: "Juego guardado",
+      loaded: "Juego cargado",
+      error: "Error"
+    },
+    recording: {
+      started: "Grabaci\xF3n iniciada",
+      stopped: "Grabaci\xF3n detenida",
+      saved: "Grabaci\xF3n guardada",
+      paused: "PAUSA",
+      recording: "GRABANDO",
+      resume: "Reanudar grabaci\xF3n",
+      pause: "Pausar grabaci\xF3n",
+      stop: "Detener y guardar",
+      hover: "Controles"
+    }
+  }
+};
+
+// src/locales/fr.ts
+var fr = {
+  controls: {
+    play: "Jouer",
+    pause: "Pause",
+    reset: "R\xE9initialiser",
+    rewind: "Rembobiner",
+    save: "Sauver",
+    load: "Charger",
+    snap: "Photo",
+    rec: "Enr.",
+    stopRec: "Arr\xEAter",
+    startRecord: "D\xE9marrer l'enregistrement",
+    stopRecord: "Arr\xEAter l'enregistrement",
+    mute: "Muet",
+    unmute: "Son",
+    help: "Aide",
+    full: "Plein \xE9cran",
+    keys: "Touches",
+    menuOpen: "Ouvrir menu",
+    menuClose: "Fermer menu",
+    gamepadConnected: "{{count}} manette{{plural}} connect\xE9e(s)",
+    noGamepad: "Aucune manette d\xE9tect\xE9e",
+    press: "Appuyez",
+    startBtn: "START",
+    selectBtn: "SELECT"
+  },
+  common: {
+    disabledInHardcore: "D\xE9sactiv\xE9 en mode Hardcore",
+    notSupported: "Non support\xE9 sur cette console",
+    playToEnableRewind: "Jouez quelques secondes pour activer le rembobinage"
+  },
+  settings: {
+    title: "Param\xE8tres",
+    general: "G\xE9n\xE9ral",
+    audio: "Audio",
+    video: "Vid\xE9o",
+    input: "Entr\xE9e",
+    advanced: "Avanc\xE9",
+    fullscreen: "Plein \xE9cran",
+    controls: "Contr\xF4les",
+    gamepad: "Manette",
+    cheats: "Codes",
+    retroAchievements: "Succ\xE8s",
+    shortcuts: "Raccourcis",
+    exit: "Quitter",
+    language: "Langue",
+    selectLanguage: "Choisir la langue"
+  },
+  overlay: {
+    play: "JOUER",
+    systemFirmware: "MICROLOGICIEL SYST\xC8ME",
+    loading: "Chargement {{system}}",
+    initializing: "Initialisation de l'\xE9mulateur",
+    loadingSave: "Chargement de la sauvegarde",
+    preparingSlot: "Pr\xE9paration de l'emplacement {{num}}",
+    systemError: "Erreur syst\xE8me",
+    failedInit: "\xC9chec de l'initialisation",
+    retry: "R\xE9essayer",
+    slotReady: "Emplacement {{num}} pr\xEAt",
+    paused: "Pause"
+  },
+  notifications: {
+    saved: "\xC9tat sauvegard\xE9",
+    loaded: "\xC9tat charg\xE9",
+    error: "Erreur",
+    recordingStarted: "Enregistrement d\xE9marr\xE9",
+    recordingSaved: "Enregistrement sauvegard\xE9",
+    downloaded: "\xC9tat t\xE9l\xE9charg\xE9",
+    loadedFile: "\xC9tat charg\xE9 depuis fichier",
+    savedSlot: "Sauvegard\xE9 sur l'emplacement {{num}}",
+    loadedSlot: "Charg\xE9 depuis l'emplacement {{num}}",
+    deletedSlot: "Emplacement {{num}} supprim\xE9",
+    emptySlot: "Emplacement vide",
+    noSaveFound: "Aucune sauvegarde trouv\xE9e",
+    failedSave: "\xC9chec de la sauvegarde",
+    failedLoad: "\xC9chec du chargement",
+    failedDelete: "\xC9chec de la suppression",
+    failedFetch: "\xC9chec du chargement des emplacements",
+    controllerConnected: "Manette connect\xE9e",
+    controllerDisconnected: "Manette d\xE9connect\xE9e",
+    controllerReady: "Manette pr\xEAte",
+    insertCoin: "Appuyez sur SHIFT pour ins\xE9rer une pi\xE8ce",
+    insertCoinTitle: "\u{1FA99} Ins\xE9rer Pi\xE8ce",
+    controlsSaved: "Contr\xF4les sauvegard\xE9s",
+    controlsReset: "Contr\xF4les r\xE9initialis\xE9s"
+  },
+  modals: {
+    shortcuts: {
+      title: "Raccourcis clavier",
+      playerShortcuts: "Raccourcis du lecteur",
+      overlays: "Superpositions",
+      recording: "Enregistrement",
+      showHelp: "Afficher l'aide",
+      perfOverlay: "Overlay de performance",
+      inputDisplay: "Afficher les entr\xE9es",
+      toggleRec: "Basculer l'enregistrement",
+      toggleMute: "Basculer le son",
+      pressEsc: "Appuyez sur ESC pour fermer"
+    },
+    controls: {
+      title: "Contr\xF4les",
+      keyboard: "Configuration clavier",
+      description: "Cliquez sur un bouton et appuyez sur une touche",
+      pressKey: "Appuyez...",
+      reset: "R\xE9initialiser",
+      save: "Sauvegarder"
+    },
+    gamepad: {
+      title: "Param\xE8tres manette",
+      noGamepad: "Aucune manette",
+      connected: "{{count}} manette{{s}} connect\xE9e(s)",
+      none: "Aucune manette d\xE9tect\xE9e",
+      player: "Joueur:",
+      noController: "Aucune manette",
+      pressAny: "Appuyez sur un bouton pour connecter",
+      waiting: "En attente...",
+      pressButton: "Appuyez pour {{button}}",
+      pressEsc: "Echap pour annuler",
+      reset: "R\xE9initialiser",
+      save: "Sauvegarder"
+    },
+    cheats: {
+      title: "Codes de triche",
+      addCheat: "Ajouter un code",
+      available: "{{count}} code{{s}} disponible(s)",
+      emptyTitle: "Aucun code disponible",
+      emptyDesc: "Aucun code trouv\xE9 pour ce jeu",
+      copy: "Copier",
+      active: "{{count}} actif(s)",
+      toggleHint: "Cliquez pour activer/d\xE9sactiver"
+    },
+    saveSlots: {
+      title: "Sauvegardes",
+      saveTitle: "Sauvegarder",
+      loadTitle: "Charger",
+      emptySlot: "Vide",
+      subtitleSave: "Choisir un emplacement",
+      subtitleLoad: "Choisir une sauvegarde",
+      loading: "Chargement...",
+      locked: "Emplacement {{num}} verrouill\xE9",
+      upgrade: "Am\xE9liorer pour plus d'emplacements",
+      autoSave: "Auto-Sauvegarde",
+      autoSaveDesc: "R\xE9serv\xE9 \xE0 la sauvegarde automatique",
+      noData: "Aucune donn\xE9e",
+      slot: "Emplacement {{num}}",
+      footerSave: "Les sauvegardes sont synchronis\xE9es dans le cloud",
+      footerLoad: "Votre progression sera restaur\xE9e"
+    },
+    bios: {
+      title: "S\xE9lection BIOS",
+      description: "S\xE9lectionnez un BIOS",
+      warningTitle: "Note:",
+      warning: "Changer le BIOS red\xE9marre l'\xE9mulateur. Progression non sauvegard\xE9e sera perdue.",
+      systemDefault: "Par d\xE9faut",
+      active: "Actif",
+      defaultDesc: "Utiliser le BIOS par d\xE9faut",
+      emptyTitle: "Aucun BIOS trouv\xE9.",
+      emptyDesc: "T\xE9l\xE9versez des fichiers BIOS dans votre biblioth\xE8que.",
+      footer: "Firmware syst\xE8me"
+    }
+  },
+  retroAchievements: {
+    title: "RetroAchievements",
+    login: "Connexion",
+    logout: "D\xE9connexion",
+    username: "Utilisateur",
+    password: "Mot de passe",
+    hardcore: "Mode Hardcore",
+    achievements: "Succ\xE8s",
+    locked: "Verrouill\xE9",
+    unlocked: "D\xE9verrouill\xE9",
+    mastered: "Ma\xEEtris\xE9",
+    identifying: "Identification...",
+    achievementsAvailable: "{{count}} succ\xE8s disponibles",
+    gameNotSupported: "Jeu non support\xE9 par RA",
+    connect: "Connecter RetroAchievements",
+    connected: "RetroAchievements (connect\xE9)",
+    createAccount: "Cr\xE9er un compte",
+    privacy: "Confidentialit\xE9:",
+    privacyText: "Votre mot de passe n'est pas stock\xE9.",
+    connecting: "Connexion...",
+    connectAccount: "Connectez votre compte",
+    poweredBy: "Propuls\xE9 par",
+    connectedStatus: "Connect\xE9",
+    yourUsername: "Votre utilisateur RA",
+    yourPassword: "Votre mot de passe RA",
+    usernameRequired: "Utilisateur et mot de passe requis",
+    noGame: "Aucun jeu",
+    loadGame: "Chargez un jeu pour voir les succ\xE8s",
+    noAchievements: "Aucun succ\xE8s trouv\xE9",
+    notSupported: "Ce jeu n'est peut-\xEAtre pas support\xE9",
+    ptsRemaining: "{{count}} pts restants",
+    filters: {
+      all: "Tous",
+      locked: "Verrouill\xE9s",
+      unlocked: "D\xE9verrouill\xE9s"
+    }
+  },
+  overlays: {
+    performance: {
+      title: "Stats",
+      fps: "FPS",
+      frameTime: "FT",
+      memory: "MEM",
+      core: "Core",
+      input: "ENTR\xC9E",
+      active: "ACTIF"
+    },
+    toast: {
+      saved: "Sauvegard\xE9",
+      loaded: "Charg\xE9",
+      error: "Erreur"
+    },
+    recording: {
+      started: "Enregistrement d\xE9marr\xE9",
+      stopped: "Enregistrement arr\xEAt\xE9",
+      saved: "Enregistrement sauvegard\xE9",
+      paused: "PAUSE",
+      recording: "ENR.",
+      resume: "Reprendre",
+      pause: "Pause",
+      stop: "Arr\xEAter et sauver",
+      hover: "Contr\xF4les"
+    }
+  }
+};
+
+// src/lib/common-utils.ts
+function deepMerge2(target, source) {
+  const isObject = (obj) => obj && typeof obj === "object";
+  if (!isObject(target) || !isObject(source)) {
+    return source;
+  }
+  const output = { ...target };
+  Object.keys(source).forEach((key) => {
+    const targetValue = output[key];
+    const sourceValue = source[key];
+    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+      output[key] = sourceValue;
+    } else if (isObject(targetValue) && isObject(sourceValue)) {
+      output[key] = deepMerge2(targetValue, sourceValue);
+    } else {
+      output[key] = sourceValue;
+    }
+  });
+  return output;
+}
+var GamePlayerInner = memo(function GamePlayerInner2(props) {
   const { settings, updateSettings, isLoaded: settingsLoaded } = usePlayerPersistence();
   useEffect(() => {
     sendTelemetry("game_start", {
@@ -7540,6 +8791,7 @@ var GamePlayer = memo(function GamePlayer2(props) {
   }, [props.system, props.core, props.title]);
   const [biosModalOpen, setBiosModalOpen] = useState(false);
   const [showShortcutsModal, setShowShortcutsModal] = useState(false);
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
   const effectiveShader = props.shader !== void 0 ? props.shader : settings.shader;
   const {
     // Refs
@@ -7674,6 +8926,10 @@ var GamePlayer = memo(function GamePlayer2(props) {
     pause();
     setGamepadModalOpen(true);
   }, [pause, setGamepadModalOpen]);
+  const handleShowSettings = useCallback(() => {
+    pause();
+    setSettingsModalOpen(true);
+  }, [pause, setSettingsModalOpen]);
   const handleExitClick = useCallback(() => {
     onExit?.();
   }, [onExit]);
@@ -7885,6 +9141,7 @@ var GamePlayer = memo(function GamePlayer2(props) {
             systemColor,
             gamepadCount: connectedCount,
             onGamepadSettings: handleShowGamepadSettings,
+            onSettings: handleShowSettings,
             volume,
             isMuted: muted,
             onVolumeChange: handleVolumeChange,
@@ -7950,7 +9207,11 @@ var GamePlayer = memo(function GamePlayer2(props) {
             setBiosModalOpen,
             availableBios: props.availableBios,
             currentBiosId: props.currentBiosId,
-            onSelectBios: props.onSelectBios
+            onSelectBios: props.onSelectBios,
+            settingsModalOpen,
+            setSettingsModalOpen,
+            currentLanguage: props.currentLanguage,
+            onLanguageChange: props.onLanguageChange
           }
         ),
         !isMobile && /* @__PURE__ */ jsx(
@@ -7978,6 +9239,27 @@ var GamePlayer = memo(function GamePlayer2(props) {
     }
   ) });
 });
+var GamePlayer = memo(function GamePlayer2(props) {
+  const [currentLanguage, setCurrentLanguage] = useState(props.initialLanguage || "en");
+  const effectiveTranslations = useMemo(() => {
+    const base = currentLanguage === "es" ? es : currentLanguage === "fr" ? fr : en;
+    if (props.translations) {
+      return deepMerge2(base, props.translations);
+    }
+    return base;
+  }, [currentLanguage, props.translations]);
+  const handleLanguageChange = useCallback((lang) => {
+    setCurrentLanguage(lang);
+  }, []);
+  return /* @__PURE__ */ jsx(KoinI18nProvider, { translations: effectiveTranslations, children: /* @__PURE__ */ jsx(
+    GamePlayerInner,
+    {
+      ...props,
+      currentLanguage,
+      onLanguageChange: handleLanguageChange
+    }
+  ) });
+});
 var GamePlayer_default = GamePlayer;
 function AchievementPopup({
   achievement,
@@ -8139,7 +9421,7 @@ var ShaderSelector = memo(function ShaderSelector2({
   ] });
 });
 var ShaderSelector_default = ShaderSelector;
-var SHORTCUTS2 = [
+var SHORTCUTS = [
   { key: "F1", description: "Help" },
   { key: "F3", description: "FPS Overlay" },
   { key: "F4", description: "Input Display" },
@@ -8174,7 +9456,7 @@ var ShortcutsReference = memo(function ShortcutsReference2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsx("div", { className: "px-3 pb-3 pt-1 space-y-1.5 border-t border-white/10", children: SHORTCUTS2.map(({ key, description }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+        isExpanded && /* @__PURE__ */ jsx("div", { className: "px-3 pb-3 pt-1 space-y-1.5 border-t border-white/10", children: SHORTCUTS.map(({ key, description }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
           /* @__PURE__ */ jsx("span", { className: "text-white/60", children: description }),
           /* @__PURE__ */ jsx(
             "kbd",
@@ -8195,6 +9477,6 @@ var ShortcutsReference = memo(function ShortcutsReference2({
 });
 var ShortcutsReference_default = ShortcutsReference;
 
-export { ALL_BUTTONS, AchievementPopup, BUTTON_GROUPS, BUTTON_LABELS, CONSOLE_CAPABILITIES, CONSOLE_KEYBOARD_OVERRIDES, DEFAULT_CONTROLS, DEFAULT_GAMEPAD, DEFAULT_KEYBOARD, DPAD_BUTTONS, FACE_BUTTONS, GamePlayer_default as GamePlayer, PERFORMANCE_TIER_1_SYSTEMS, PERFORMANCE_TIER_2_SYSTEMS, RASidebar, RA_MEDIA_BASE, SHADER_PRESETS, SHOULDER_BUTTONS, STANDARD_AXIS_MAP, STANDARD_GAMEPAD_BUTTONS, STICK_BUTTONS, SUPPORTED_EXTENSIONS, SYSTEMS, SYSTEM_BUTTONS, ShaderSelector_default as ShaderSelector, ShortcutsReference_default as ShortcutsReference, TRIGGER_BUTTONS, ToastContainer, buildRetroArchConfig, clearAllControls, consoleHasButton, detectControllerBrand, detectSystem, fetchAndCacheRom, formatGamepadButton, formatKeyCode, gamepadToRetroArchConfig, getAchievementBadgeUrl, getCachedRom, getConsoleButtons, getConsoleCapabilities, getConsoleKeyboardDefaults, getCore, getDBSystemNames, getFullGamepadMapping, getFullKeyboardMapping, getSupportedExtensions, getSystem, getSystemByDbName, getSystemByKey, getSystemFromExtension, getSystemsList, getUserAvatarUrl, isSystemSupported, keyboardToRetroArchConfig, loadAllGamepadMappings, loadGamepadMapping, loadKeyboardMapping, normalizeSystemKey, saveGamepadMapping, saveKeyboardMapping, systemsMatch, useGameRecording, useGamepad, useNostalgist, useToast };
+export { ALL_BUTTONS, AchievementPopup, BUTTON_GROUPS, BUTTON_LABELS, CONSOLE_CAPABILITIES, CONSOLE_KEYBOARD_OVERRIDES, DEFAULT_CONTROLS, DEFAULT_GAMEPAD, DEFAULT_KEYBOARD, DPAD_BUTTONS2 as DPAD_BUTTONS, FACE_BUTTONS, GamePlayer_default as GamePlayer, KoinI18nProvider, PERFORMANCE_TIER_1_SYSTEMS, PERFORMANCE_TIER_2_SYSTEMS, RASidebar, RA_MEDIA_BASE, SHADER_PRESETS, SHOULDER_BUTTONS, STANDARD_AXIS_MAP, STANDARD_GAMEPAD_BUTTONS, STICK_BUTTONS, SUPPORTED_EXTENSIONS, SYSTEMS, SYSTEM_BUTTONS, ShaderSelector_default as ShaderSelector, ShortcutsReference_default as ShortcutsReference, TRIGGER_BUTTONS, ToastContainer, buildRetroArchConfig, clearAllControls, consoleHasButton, detectControllerBrand, detectSystem, en, es, fetchAndCacheRom, formatGamepadButton, formatKeyCode, fr, gamepadToRetroArchConfig, getAchievementBadgeUrl, getCachedRom, getConsoleButtons, getConsoleCapabilities, getConsoleKeyboardDefaults, getCore, getDBSystemNames, getFullGamepadMapping, getFullKeyboardMapping, getSupportedExtensions, getSystem, getSystemByDbName, getSystemByKey, getSystemFromExtension, getSystemsList, getUserAvatarUrl, isSystemSupported, keyboardToRetroArchConfig, loadAllGamepadMappings, loadGamepadMapping, loadKeyboardMapping, normalizeSystemKey, saveGamepadMapping, saveKeyboardMapping, systemsMatch, useGameRecording, useGamepad, useKoinTranslation, useNostalgist, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map