koin.js 1.0.6 → 1.0.8

package/dist/index.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var React5 = require('react');
+var React2 = require('react');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 var nostalgist = require('nostalgist');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React5__default = /*#__PURE__*/_interopDefault(React5);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var ControlButton = React5.memo(function ControlButton2({
+var ControlButton = React2.memo(function ControlButton2({
   onClick,
   onMouseDown,
   onMouseUp,
@@ -39,31 +39,45 @@ var ControlButton = React5.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__ */ jsxRuntime.jsx(Icon, { size: iconSize, className: "transition-transform group-hover:scale-110" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-bold uppercase tracking-wider opacity-70", children: label })
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize, className: `transition-transform duration-200 ${active ? "scale-110" : "group-hover:scale-110"}`, style: active ? { color: systemColor } : void 0 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-bold uppercase tracking-wider whitespace-nowrap", style: { color: active ? systemColor : void 0 }, children: label })
       ]
     }
   );
 });
 var SPEED_OPTIONS = [1, 2];
 function SpeedMenu({ speed, onSpeedChange, disabled = false }) {
-  const [showMenu, setShowMenu] = React5.useState(false);
+  const [showMenu, setShowMenu] = React2.useState(false);
+  const buttonRef = React2__default.default.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__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: buttonRef,
         onClick: () => setShowMenu(!showMenu),
         disabled,
         className: `
@@ -90,25 +104,32 @@ function SpeedMenu({ speed, onSpeedChange, disabled = false }) {
       }
     ),
     showMenu && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-40", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
+          ))
+        }
+      )
     ] })
   ] });
 }
@@ -177,7 +198,261 @@ function HardcoreTooltip({ show, message = "Disabled in Hardcore mode", children
     /* @__PURE__ */ jsxRuntime.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 })
   ] });
 }
-var PlaybackControls = React5.memo(function PlaybackControls2({
+
+// 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 = React2.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 = React2.useMemo(() => {
+    if (!translations) return en;
+    return deepMerge(en, translations);
+  }, [translations]);
+  return /* @__PURE__ */ jsxRuntime.jsx(KoinI18nContext.Provider, { value, children });
+};
+function useKoinTranslation() {
+  return React2.useContext(KoinI18nContext);
+}
+var PlaybackControls = React2.memo(function PlaybackControls2({
   isPaused,
   isRunning,
   speed,
@@ -196,20 +471,30 @@ var PlaybackControls = React5.memo(function PlaybackControls2({
   systemColor = "#00FF41",
   hardcoreRestrictions
 }) {
+  const t = useKoinTranslation();
   const hasRewindHistory = rewindBufferSize > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-shrink-0", children: [
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       ControlButton,
       {
         onClick: onPauseToggle,
         icon: !isRunning || isPaused ? lucideReact.Play : lucideReact.Pause,
-        label: !isRunning || isPaused ? "Play" : "Pause",
+        label: !isRunning || isPaused ? t.controls.play : t.controls.pause,
         active: isPaused,
         disabled,
         systemColor
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onRestart, icon: lucideReact.RotateCcw, label: "Reset", disabled, systemColor }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ControlButton,
+      {
+        onClick: onRestart,
+        icon: lucideReact.RotateCcw,
+        label: t.controls.reset,
+        disabled,
+        systemColor
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(SpeedMenu, { speed, onSpeedChange, disabled }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -221,7 +506,7 @@ var PlaybackControls = React5.memo(function PlaybackControls2({
           onTouchStart: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStart : void 0,
           onTouchEnd: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStop : void 0,
           icon: lucideReact.Rewind,
-          label: "Rewind",
+          label: t.controls.rewind,
           active: isRewinding,
           disabled: disabled || !hasRewindHistory || hardcoreRestrictions?.canUseRewind === false,
           systemColor
@@ -232,10 +517,10 @@ var PlaybackControls = React5.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-px h-8 bg-white/10 mx-1" }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -260,10 +545,10 @@ function AutoSaveIndicator({
   isPaused = false,
   onClick
 }) {
-  const prevStateRef = React5.useRef(state);
-  const [displayProgress, setDisplayProgress] = React5.useState(progress);
-  const [iconOpacity, setIconOpacity] = React5.useState(1);
-  React5.useEffect(() => {
+  const prevStateRef = React2.useRef(state);
+  const [displayProgress, setDisplayProgress] = React2.useState(progress);
+  const [iconOpacity, setIconOpacity] = React2.useState(1);
+  React2.useEffect(() => {
     const prevState = prevStateRef.current;
     if (state === "done" && prevState === "saving") {
       const startProgress = displayProgress;
@@ -306,7 +591,7 @@ function AutoSaveIndicator({
     }
     prevStateRef.current = state;
   }, [state, progress]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (state !== prevStateRef.current) {
       setIconOpacity(0);
       const timer = setTimeout(() => {
@@ -421,7 +706,7 @@ function AutoSaveIndicator({
     }
   );
 }
-var SaveLoadControls = React5.memo(function SaveLoadControls2({
+var SaveLoadControls = React2.memo(function SaveLoadControls2({
   onSave,
   onLoad,
   onScreenshot,
@@ -438,7 +723,8 @@ var SaveLoadControls = React5.memo(function SaveLoadControls2({
   autoSavePaused = false,
   onAutoSaveToggle
 }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       AutoSaveIndicator,
       {
@@ -455,12 +741,18 @@ var SaveLoadControls = React5.memo(function SaveLoadControls2({
         {
           onClick: hardcoreRestrictions?.canUseSaveStates === false ? void 0 : onSave,
           icon: lucideReact.Save,
-          label: "Save",
+          label: t.controls.save,
           disabled: disabled || saveDisabled || hardcoreRestrictions?.canUseSaveStates === false,
           systemColor
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(HardcoreTooltip, { show: hardcoreRestrictions?.canUseSaveStates === false })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        HardcoreTooltip,
+        {
+          show: hardcoreRestrictions?.canUseSaveStates === false,
+          message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group flex-shrink-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -468,19 +760,25 @@ var SaveLoadControls = React5.memo(function SaveLoadControls2({
         {
           onClick: hardcoreRestrictions?.canUseSaveStates === false ? void 0 : onLoad,
           icon: lucideReact.Download,
-          label: "Load",
+          label: t.controls.load,
           disabled: disabled || loadDisabled || hardcoreRestrictions?.canUseSaveStates === false,
           systemColor
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(HardcoreTooltip, { show: hardcoreRestrictions?.canUseSaveStates === false })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        HardcoreTooltip,
+        {
+          show: hardcoreRestrictions?.canUseSaveStates === false,
+          message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       ControlButton,
       {
         onClick: onScreenshot,
         icon: lucideReact.Camera,
-        label: "Snap",
+        label: t.controls.snap,
         disabled: disabled || saveDisabled,
         systemColor
       }
@@ -491,7 +789,7 @@ var SaveLoadControls = React5.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__ */ jsxRuntime.jsx("div", { className: "relative", children: isRecording ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 20, className: "text-red-500" }),
@@ -502,7 +800,7 @@ var SaveLoadControls = React5.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
             }
           )
         ]
@@ -517,17 +815,17 @@ var QUICK_PRESETS = [
   { id: "crt/crt-geom", label: "CRT Geom" },
   { id: "handheld/lcd-grid-v2", label: "LCD Grid" }
 ];
-var ShaderDropdown = React5.memo(function ShaderDropdown2({
+var ShaderDropdown = React2.memo(function ShaderDropdown2({
   currentShader = "",
   onShaderChange,
   isRunning = false,
   systemColor = "#00FF41",
   disabled = false
 }) {
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const [pendingShader, setPendingShader] = React5.useState(null);
-  const dropdownRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const [pendingShader, setPendingShader] = React2.useState(null);
+  const dropdownRef = React2.useRef(null);
+  React2.useEffect(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -635,6 +933,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__ */ jsxRuntime.jsxs("div", { className: `relative group ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -647,7 +948,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__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 20, className: "animate-spin text-yellow-400" }) : /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.Trophy,
@@ -668,13 +969,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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-green-400 rounded-full animate-ping opacity-50" }) }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = React5.memo(function SettingsControls2({
+var SettingsControls = React2.memo(function SettingsControls2({
   onFullscreen,
   onControls,
   onGamepadSettings,
+  onSettings,
   onCheats,
   onRetroAchievements,
   onShowShortcuts,
@@ -691,8 +993,10 @@ var SettingsControls = React5.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       ShaderDropdown_default,
       {
@@ -703,15 +1007,15 @@ var SettingsControls = React5.memo(function SettingsControls2({
         disabled
       }
     ),
-    onShowShortcuts && /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onShowShortcuts, icon: lucideReact.HelpCircle, label: "Help", disabled, className: "hidden sm:flex", systemColor }),
-    /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onFullscreen, icon: lucideReact.Maximize, label: "Full", disabled, className: "hidden sm:flex", systemColor }),
-    /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onControls, icon: lucideReact.Gamepad2, label: "Keys", disabled, className: "hidden sm:flex", systemColor }),
+    onShowShortcuts && /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onShowShortcuts, icon: lucideReact.HelpCircle, label: t.controls.help, disabled, className: "hidden sm:flex", systemColor }),
+    /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onFullscreen, icon: lucideReact.Maximize, label: t.controls.full, disabled, className: "hidden sm:flex", systemColor }),
+    /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onControls, icon: lucideReact.Gamepad2, label: t.controls.keys, disabled, className: "hidden sm:flex", systemColor }),
     gamepadCount > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Joystick, { size: 20, style: { color: systemColor }, className: "transition-transform group-hover:scale-110" }),
@@ -732,15 +1036,15 @@ var SettingsControls = React5.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__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gamepad2, { size: 18, className: "text-gray-400 transition-transform group-hover:scale-110 group-hover:text-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider text-gray-400 group-hover:text-white whitespace-nowrap", children: "Press" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider text-gray-400 group-hover:text-white whitespace-nowrap", children: t.controls.press }),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-gray-400 group-hover:bg-white" }) })
           ] })
         }
@@ -752,12 +1056,18 @@ var SettingsControls = React5.memo(function SettingsControls2({
         {
           onClick: hardcoreRestrictions?.canUseCheats === false ? void 0 : onCheats,
           icon: lucideReact.Code,
-          label: "Cheats",
+          label: t.settings.cheats,
           disabled: disabled || hardcoreRestrictions?.canUseCheats === false,
           systemColor
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(HardcoreTooltip, { show: hardcoreRestrictions?.canUseCheats === false })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        HardcoreTooltip,
+        {
+          show: hardcoreRestrictions?.canUseCheats === false,
+          message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       RAButton,
@@ -771,16 +1081,28 @@ var SettingsControls = React5.memo(function SettingsControls2({
         className: "hidden sm:flex"
       }
     ),
+    onSettings && /* @__PURE__ */ jsxRuntime.jsx(
+      ControlButton,
+      {
+        onClick: onSettings,
+        icon: lucideReact.Settings,
+        label: t.settings.title,
+        disabled,
+        systemColor,
+        className: "hidden sm:flex"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-8 bg-white/10 mx-2 hidden sm:block" }),
-    /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onExit, icon: lucideReact.Power, label: "Exit", danger: true, disabled, systemColor })
+    /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onExit, icon: lucideReact.Power, label: t.settings.exit, danger: true, disabled, systemColor })
   ] });
 });
-var MobileControlDrawer = React5.memo(function MobileControlDrawer2({
+var MobileControlDrawer = React2.memo(function MobileControlDrawer2({
   children,
   systemColor = "#00FF41"
 }) {
-  const [isExpanded, setIsExpanded] = React5.useState(false);
-  React5.useEffect(() => {
+  const t = useKoinTranslation();
+  const [isExpanded, setIsExpanded] = React2.useState(false);
+  React2.useEffect(() => {
     if (isExpanded) {
       const handleInteract = (e) => {
         const target = e.target;
@@ -813,7 +1135,7 @@ var MobileControlDrawer = React5.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__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -854,7 +1176,7 @@ var MobileControlDrawer = React5.memo(function MobileControlDrawer2({
           /* @__PURE__ */ jsxRuntime.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
             }
@@ -866,7 +1188,7 @@ var MobileControlDrawer = React5.memo(function MobileControlDrawer2({
   ] });
 });
 var MobileControlDrawer_default = MobileControlDrawer;
-var PlayerControls = React5.memo(function PlayerControls2({
+var PlayerControls = React2.memo(function PlayerControls2({
   isPaused,
   isRunning,
   speed,
@@ -902,6 +1224,7 @@ var PlayerControls = React5.memo(function PlayerControls2({
   systemColor = "#00FF41",
   gamepadCount = 0,
   onGamepadSettings,
+  onSettings,
   volume = 100,
   isMuted = false,
   onVolumeChange,
@@ -934,6 +1257,7 @@ var PlayerControls = React5.memo(function PlayerControls2({
         hardcoreRestrictions
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-px bg-white/10 sm:hidden my-4" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SaveLoadControls,
       {
@@ -954,12 +1278,14 @@ var PlayerControls = React5.memo(function PlayerControls2({
         onAutoSaveToggle
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-px bg-white/10 sm:hidden my-4" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SettingsControls,
       {
         onFullscreen,
         onControls,
         onGamepadSettings,
+        onSettings,
         onCheats,
         onRetroAchievements,
         onShowShortcuts,
@@ -980,7 +1306,7 @@ var PlayerControls = React5.memo(function PlayerControls2({
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(MobileControlDrawer_default, { systemColor, children: controlsContent }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center min-w-max mx-auto gap-4 px-8 py-4", children: controlsContent }) })
   ] });
 });
 var PlayerControls_default = PlayerControls;
@@ -1028,11 +1354,11 @@ var TOAST_CONFIGS = {
   }
 };
 function ToastItem({ toast, onDismiss }) {
-  const [isVisible, setIsVisible] = React5.useState(false);
-  const [isExiting, setIsExiting] = React5.useState(false);
+  const [isVisible, setIsVisible] = React2.useState(false);
+  const [isExiting, setIsExiting] = React2.useState(false);
   const config = TOAST_CONFIGS[toast.type];
   const IconComponent = config.icon;
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     requestAnimationFrame(() => {
       setIsVisible(true);
     });
@@ -1138,17 +1464,18 @@ function ToastContainer({ toasts, onDismiss }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none", children: toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast, onDismiss }, toast.id)) })
   ] });
 }
-var PerformanceOverlay = React5.memo(function PerformanceOverlay2({
+var PerformanceOverlay = React2.memo(function PerformanceOverlay2({
   isVisible,
   coreName = "Unknown",
   systemColor = "#00FF41"
 }) {
-  const [fps, setFps] = React5.useState(0);
-  const [frameTime, setFrameTime] = React5.useState(0);
-  const frameTimesRef = React5.useRef([]);
-  const lastTimeRef = React5.useRef(performance.now());
-  const rafIdRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const t = useKoinTranslation();
+  const [fps, setFps] = React2.useState(0);
+  const [frameTime, setFrameTime] = React2.useState(0);
+  const frameTimesRef = React2.useRef([]);
+  const lastTimeRef = React2.useRef(performance.now());
+  const rafIdRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (!isVisible) {
       if (rafIdRef.current) {
         cancelAnimationFrame(rafIdRef.current);
@@ -1194,12 +1521,12 @@ var PerformanceOverlay = React5.memo(function PerformanceOverlay2({
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: "FPS" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60 text-[10px] uppercase", children: t.overlays.performance.fps }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: fps })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-white/20" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: "Frame" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60 text-[10px] uppercase", children: t.overlays.performance.frameTime }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
                 frameTime,
                 "ms"
@@ -1207,7 +1534,7 @@ var PerformanceOverlay = React5.memo(function PerformanceOverlay2({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-white/20" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: "Core" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60 text-[10px] uppercase", children: t.overlays.performance.core }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-white/80", children: coreName })
             ] })
           ]
@@ -1254,14 +1581,14 @@ var KEY_TO_BUTTON = {
   "ShiftRight": "SELECT",
   "Space": "COIN"
 };
-var InputDisplay = React5.memo(function InputDisplay2({
+var InputDisplay = React2.memo(function InputDisplay2({
   isVisible,
   system,
   systemColor = "#00FF41",
   position = "bottom-right"
 }) {
-  const [activeKeys, setActiveKeys] = React5.useState(/* @__PURE__ */ new Set());
-  React5.useEffect(() => {
+  const [activeKeys, setActiveKeys] = React2.useState(/* @__PURE__ */ new Set());
+  React2.useEffect(() => {
     if (!isVisible) return;
     const handleKeyDown = (e) => {
       const button = KEY_TO_BUTTON[e.code];
@@ -1335,7 +1662,7 @@ var InputDisplay = React5.memo(function InputDisplay2({
     }
   );
 });
-var DpadButton = React5.memo(function DpadButton2({
+var DpadButton = React2.memo(function DpadButton2({
   active,
   color,
   children
@@ -1353,7 +1680,7 @@ var DpadButton = React5.memo(function DpadButton2({
     }
   );
 });
-var ActionButton = React5.memo(function ActionButton2({
+var ActionButton = React2.memo(function ActionButton2({
   active,
   color,
   children
@@ -1372,7 +1699,7 @@ var ActionButton = React5.memo(function ActionButton2({
   );
 });
 var InputDisplay_default = InputDisplay;
-var RecordingIndicator = React5.memo(function RecordingIndicator2({
+var RecordingIndicator = React2.memo(function RecordingIndicator2({
   isRecording,
   isPaused,
   duration,
@@ -1381,7 +1708,8 @@ var RecordingIndicator = React5.memo(function RecordingIndicator2({
   onStop,
   systemColor = "#FF3333"
 }) {
-  const [isHovered, setIsHovered] = React5.useState(false);
+  const t = useKoinTranslation();
+  const [isHovered, setIsHovered] = React2.useState(false);
   if (!isRecording) return null;
   const minutes = Math.floor(duration / 60);
   const seconds = duration % 60;
@@ -1428,7 +1756,7 @@ var RecordingIndicator = React5.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__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-white/60", children: timeString })
@@ -1439,7 +1767,7 @@ var RecordingIndicator = React5.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__ */ jsxRuntime.jsx(lucideReact.Play, { size: 14, className: "text-orange-400", fill: "#FFA500" })
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -1447,7 +1775,7 @@ var RecordingIndicator = React5.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__ */ jsxRuntime.jsx(lucideReact.Pause, { size: 14, className: "text-white/80" })
                   }
                 ),
@@ -1456,7 +1784,7 @@ var RecordingIndicator = React5.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__ */ jsxRuntime.jsx(lucideReact.Square, { size: 12, fill: "#FF3333", className: "text-red-500" }),
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 12, className: "text-white/60" })
@@ -1467,39 +1795,40 @@ var RecordingIndicator = React5.memo(function RecordingIndicator2({
             ]
           }
         ),
-        !isHovered && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[9px] text-white/40 text-center mt-1", children: "Hover for controls" })
+        !isHovered && /* @__PURE__ */ jsxRuntime.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 = React5.memo(function ShortcutsModal2({
+var ShortcutsModal = React2.memo(function ShortcutsModal2({
   isOpen,
   onClose,
   systemColor = "#00FF41"
 }) {
+  const t = useKoinTranslation();
+  const shortcuts = React2.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__ */ jsxRuntime.jsx(
     "div",
@@ -1521,7 +1850,7 @@ var ShortcutsModal = React5.memo(function ShortcutsModal2({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, { size: 18, style: { color: systemColor } }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-white", children: "Player Shortcuts" })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-white", children: t.modals.shortcuts.playerShortcuts })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
@@ -1535,7 +1864,7 @@ var ShortcutsModal = React5.memo(function ShortcutsModal2({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 space-y-3", children: [
-              SHORTCUTS.map(({ section, items }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              shortcuts.map(({ section, items }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "h3",
                   {
@@ -1569,20 +1898,16 @@ var ShortcutsModal = React5.memo(function ShortcutsModal2({
               ] }, section)),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-2 border-t border-white/10 text-xs text-white/40", children: [
                 "Game controls can be configured in ",
-                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-white/60", children: "Keys" }),
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-white/60", children: t.controls.keys }),
                 " settings."
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: "px-4 py-2 text-center text-xs text-white/40 border-t",
                 style: { borderColor: `${systemColor}20` },
-                children: [
-                  "Press ",
-                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-1 bg-white/10 rounded font-mono", children: "ESC" }),
-                  " to close"
-                ]
+                children: t.modals.shortcuts.pressEsc
               }
             )
           ]
@@ -1705,10 +2030,10 @@ function createOrientationChangeHandler(callback, checkReady, maxRafs = 3) {
 
 // src/hooks/useMobile.ts
 function useMobile() {
-  const [isMobile, setIsMobile] = React5.useState(false);
-  const [isLandscape, setIsLandscape] = React5.useState(false);
-  const [isPortrait, setIsPortrait] = React5.useState(true);
-  React5.useEffect(() => {
+  const [isMobile, setIsMobile] = React2.useState(false);
+  const [isLandscape, setIsLandscape] = React2.useState(false);
+  const [isPortrait, setIsPortrait] = React2.useState(true);
+  React2.useEffect(() => {
     let lastOrientation = null;
     let orientationTimeout = null;
     const checkOrientation = () => {
@@ -1860,17 +2185,17 @@ function useTouchHandlers({
   onRelease,
   onPositionChange
 }) {
-  const isDraggingRef = React5.useRef(false);
-  const dragStartRef = React5.useRef({ x: 0, y: 0 });
-  const dragTimerRef = React5.useRef(null);
-  const touchStartPosRef = React5.useRef({ x: 0, y: 0 });
-  const clearDragTimer = React5.useCallback(() => {
+  const isDraggingRef = React2.useRef(false);
+  const dragStartRef = React2.useRef({ x: 0, y: 0 });
+  const dragTimerRef = React2.useRef(null);
+  const touchStartPosRef = React2.useRef({ x: 0, y: 0 });
+  const clearDragTimer = React2.useCallback(() => {
     if (dragTimerRef.current) {
       clearTimeout(dragTimerRef.current);
       dragTimerRef.current = null;
     }
   }, []);
-  const startDragging = React5.useCallback(
+  const startDragging = React2.useCallback(
     (touchX, touchY) => {
       isDraggingRef.current = true;
       dragStartRef.current = {
@@ -1883,7 +2208,7 @@ function useTouchHandlers({
     },
     [displayX, displayY, containerWidth, containerHeight, isSystemButton, buttonType, onRelease]
   );
-  const handleTouchStart = React5.useCallback(
+  const handleTouchStart = React2.useCallback(
     (e) => {
       const touch = e.touches[0];
       touchStartPosRef.current = { x: touch.clientX, y: touch.clientY };
@@ -1918,7 +2243,7 @@ function useTouchHandlers({
     },
     [isSystemButton, buttonType, onPress, onPressDown, onPositionChange, buttonSize, startDragging]
   );
-  const handleTouchMove = React5.useCallback(
+  const handleTouchMove = React2.useCallback(
     (e) => {
       const touch = e.touches[0];
       if (onPositionChange && !isDraggingRef.current) {
@@ -1945,7 +2270,7 @@ function useTouchHandlers({
     },
     [onPositionChange, clearDragTimer, startDragging, containerWidth, containerHeight, buttonSize]
   );
-  const handleTouchEnd = React5.useCallback(
+  const handleTouchEnd = React2.useCallback(
     (e) => {
       clearDragTimer();
       if (isDraggingRef.current) {
@@ -1962,7 +2287,7 @@ function useTouchHandlers({
     },
     [clearDragTimer, isSystemButton, buttonType, onRelease]
   );
-  const handleTouchCancel = React5.useCallback(
+  const handleTouchCancel = React2.useCallback(
     (e) => {
       clearDragTimer();
       if (isDraggingRef.current) {
@@ -1979,7 +2304,7 @@ function useTouchHandlers({
     },
     [clearDragTimer, isSystemButton, buttonType, onRelease]
   );
-  const cleanup = React5.useCallback(() => {
+  const cleanup = React2.useCallback(() => {
     clearDragTimer();
   }, [clearDragTimer]);
   return {
@@ -2043,7 +2368,7 @@ function getButtonStyles(buttonType, isPressed) {
       };
   }
 }
-var VirtualButton = React5__default.default.memo(function VirtualButton2({
+var VirtualButton = React2__default.default.memo(function VirtualButton2({
   config,
   isPressed,
   onPress,
@@ -2057,10 +2382,14 @@ var VirtualButton = React5__default.default.memo(function VirtualButton2({
   systemColor = "#00FF41"
   // Default retro green
 }) {
-  const buttonRef = React5.useRef(null);
+  const t = useKoinTranslation();
+  const buttonRef = React2.useRef(null);
   const isSystemButton = config.type === "start" || config.type === "select";
   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,
@@ -2080,7 +2409,7 @@ var VirtualButton = React5__default.default.memo(function VirtualButton2({
     onRelease,
     onPositionChange
   });
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     const button = buttonRef.current;
     if (!button) return;
     button.addEventListener("touchstart", handleTouchStart, { passive: false });
@@ -2138,9 +2467,9 @@ var VirtualButton = React5__default.default.memo(function VirtualButton2({
         userSelect: "none",
         ...pressedStyle
       },
-      "aria-label": config.label,
+      "aria-label": label,
       onContextMenu: (e) => e.preventDefault(),
-      children: config.label
+      children: label
     }
   );
 });
@@ -2757,7 +3086,7 @@ function dispatchKeyboardEvent(type, code) {
   canvas.dispatchEvent(event);
   return true;
 }
-var Dpad = React5__default.default.memo(function Dpad2({
+var Dpad = React2__default.default.memo(function Dpad2({
   size,
   x,
   y,
@@ -2767,14 +3096,14 @@ var Dpad = React5__default.default.memo(function Dpad2({
   systemColor = "#00FF41",
   isLandscape = false
 }) {
-  const dpadRef = React5.useRef(null);
-  const activeTouchRef = React5.useRef(null);
-  const activeDirectionsRef = React5.useRef(/* @__PURE__ */ new Set());
-  const upRef = React5.useRef(null);
-  const downRef = React5.useRef(null);
-  const leftRef = React5.useRef(null);
-  const rightRef = React5.useRef(null);
-  const getKeyCode = React5.useCallback((direction) => {
+  const dpadRef = React2.useRef(null);
+  const activeTouchRef = React2.useRef(null);
+  const activeDirectionsRef = React2.useRef(/* @__PURE__ */ new Set());
+  const upRef = React2.useRef(null);
+  const downRef = React2.useRef(null);
+  const leftRef = React2.useRef(null);
+  const rightRef = React2.useRef(null);
+  const getKeyCode = React2.useCallback((direction) => {
     if (!controls) {
       const defaults = {
         up: "ArrowUp",
@@ -2786,7 +3115,7 @@ var Dpad = React5__default.default.memo(function Dpad2({
     }
     return controls[direction] || "";
   }, [controls]);
-  const getDirectionsFromTouch = React5.useCallback((touchX, touchY, rect) => {
+  const getDirectionsFromTouch = React2.useCallback((touchX, touchY, rect) => {
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
     const dx = touchX - centerX;
@@ -2802,7 +3131,7 @@ var Dpad = React5__default.default.memo(function Dpad2({
     if (angle >= -67.5 && angle <= 67.5) directions.add("right");
     return directions;
   }, []);
-  const updateVisuals = React5.useCallback((directions) => {
+  const updateVisuals = React2.useCallback((directions) => {
     const activeColor = systemColor;
     const inactiveColor = "#1a1a1a";
     if (upRef.current) upRef.current.style.fill = directions.has("up") ? activeColor : inactiveColor;
@@ -2810,7 +3139,7 @@ var Dpad = React5__default.default.memo(function Dpad2({
     if (leftRef.current) leftRef.current.style.fill = directions.has("left") ? activeColor : inactiveColor;
     if (rightRef.current) rightRef.current.style.fill = directions.has("right") ? activeColor : inactiveColor;
   }, [systemColor]);
-  const updateDirections = React5.useCallback((newDirections) => {
+  const updateDirections = React2.useCallback((newDirections) => {
     const prev = activeDirectionsRef.current;
     prev.forEach((dir) => {
       if (!newDirections.has(dir)) {
@@ -2830,7 +3159,7 @@ var Dpad = React5__default.default.memo(function Dpad2({
     activeDirectionsRef.current = newDirections;
     updateVisuals(newDirections);
   }, [getKeyCode, updateVisuals]);
-  const handleTouchStart = React5.useCallback((e) => {
+  const handleTouchStart = React2.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     const touch = e.touches[0];
@@ -2839,7 +3168,7 @@ var Dpad = React5__default.default.memo(function Dpad2({
     if (!rect) return;
     updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
   }, [getDirectionsFromTouch, updateDirections]);
-  const handleTouchMove = React5.useCallback((e) => {
+  const handleTouchMove = React2.useCallback((e) => {
     e.preventDefault();
     let touch = null;
     for (let i = 0; i < e.touches.length; i++) {
@@ -2853,7 +3182,7 @@ var Dpad = React5__default.default.memo(function Dpad2({
     if (!rect) return;
     updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
   }, [getDirectionsFromTouch, updateDirections]);
-  const handleTouchEnd = React5.useCallback((e) => {
+  const handleTouchEnd = React2.useCallback((e) => {
     e.preventDefault();
     let touchEnded = true;
     for (let i = 0; i < e.touches.length; i++) {
@@ -2872,7 +3201,7 @@ var Dpad = React5__default.default.memo(function Dpad2({
       updateVisuals(/* @__PURE__ */ new Set());
     }
   }, [getKeyCode, updateVisuals]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     const dpad = dpadRef.current;
     if (!dpad) return;
     dpad.addEventListener("touchstart", handleTouchStart, { passive: false });
@@ -2930,9 +3259,9 @@ function adjustButtonPosition(config, context) {
 }
 var STORAGE_KEY = "virtual-button-positions";
 function useButtonPositions() {
-  const [landscapePositions, setLandscapePositions] = React5.useState({});
-  const [portraitPositions, setPortraitPositions] = React5.useState({});
-  React5.useEffect(() => {
+  const [landscapePositions, setLandscapePositions] = React2.useState({});
+  const [portraitPositions, setPortraitPositions] = React2.useState({});
+  React2.useEffect(() => {
     try {
       const stored = localStorage.getItem(STORAGE_KEY);
       if (stored) {
@@ -2948,7 +3277,7 @@ function useButtonPositions() {
       console.error("Failed to load button positions:", e);
     }
   }, []);
-  const savePosition = React5.useCallback((buttonType, x, y, isLandscape) => {
+  const savePosition = React2.useCallback((buttonType, x, y, isLandscape) => {
     if (isLandscape) {
       setLandscapePositions((prev) => {
         const updated = { ...prev, [buttonType]: { x, y } };
@@ -2979,11 +3308,11 @@ function useButtonPositions() {
       });
     }
   }, [landscapePositions, portraitPositions]);
-  const getPosition = React5.useCallback((buttonType, isLandscape) => {
+  const getPosition = React2.useCallback((buttonType, isLandscape) => {
     const positions = isLandscape ? landscapePositions : portraitPositions;
     return positions[buttonType] || null;
   }, [landscapePositions, portraitPositions]);
-  const resetPositions = React5.useCallback(() => {
+  const resetPositions = React2.useCallback(() => {
     setLandscapePositions({});
     setPortraitPositions({});
     try {
@@ -3008,9 +3337,9 @@ function VirtualController({
   // Default retro green
 }) {
   const { isMobile, isLandscape, isPortrait } = useMobile();
-  const [pressedButtons, setPressedButtons] = React5.useState(/* @__PURE__ */ new Set());
-  const [containerSize, setContainerSize] = React5.useState({ width: 0, height: 0 });
-  const [isFullscreenState, setIsFullscreenState] = React5.useState(false);
+  const [pressedButtons, setPressedButtons] = React2.useState(/* @__PURE__ */ new Set());
+  const [containerSize, setContainerSize] = React2.useState({ width: 0, height: 0 });
+  const [isFullscreenState, setIsFullscreenState] = React2.useState(false);
   const { getPosition, savePosition } = useButtonPositions();
   const layout = getLayoutForSystem(system);
   const visibleButtons = layout.buttons.filter((btn) => {
@@ -3021,7 +3350,7 @@ function VirtualController({
   });
   const DPAD_TYPES = ["up", "down", "left", "right"];
   const dpadButtons = visibleButtons.filter((btn) => DPAD_TYPES.includes(btn.type));
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     const updateSize = () => {
       const { width, height } = getViewportSize();
       setContainerSize({ width, height });
@@ -3064,14 +3393,14 @@ function VirtualController({
       cleanupFullscreen();
     };
   }, [containerSize.height]);
-  const getButtonKeyboardCode = React5.useCallback(
+  const getButtonKeyboardCode = React2.useCallback(
     (buttonType) => {
       return getKeyboardCode(buttonType, controls);
     },
     [controls]
   );
   const SYSTEM_BUTTONS2 = ["start", "select"];
-  const handlePress = React5.useCallback(
+  const handlePress = React2.useCallback(
     (buttonType) => {
       const isSystemButton = SYSTEM_BUTTONS2.includes(buttonType);
       if (!isSystemButton && !isRunning) {
@@ -3094,7 +3423,7 @@ function VirtualController({
     },
     [isRunning, getButtonKeyboardCode]
   );
-  const handlePressDown = React5.useCallback(
+  const handlePressDown = React2.useCallback(
     (buttonType) => {
       if (!isRunning) return;
       const isSystemButton = SYSTEM_BUTTONS2.includes(buttonType);
@@ -3111,7 +3440,7 @@ function VirtualController({
     },
     [isRunning, getButtonKeyboardCode]
   );
-  const handleRelease = React5.useCallback(
+  const handleRelease = React2.useCallback(
     (buttonType) => {
       const isSystemButton = SYSTEM_BUTTONS2.includes(buttonType);
       if (isSystemButton) return;
@@ -3127,7 +3456,7 @@ function VirtualController({
     },
     [getButtonKeyboardCode]
   );
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!isRunning && pressedButtons.size > 0) {
       pressedButtons.forEach((buttonType) => {
         if (!SYSTEM_BUTTONS2.includes(buttonType)) {
@@ -3137,7 +3466,7 @@ function VirtualController({
       setPressedButtons(/* @__PURE__ */ new Set());
     }
   }, [isRunning, pressedButtons, handleRelease]);
-  const memoizedButtonElements = React5.useMemo(() => {
+  const memoizedButtonElements = React2.useMemo(() => {
     const width = containerSize.width || (typeof window !== "undefined" ? window.innerWidth : 0);
     const height = containerSize.height || (typeof window !== "undefined" ? window.innerHeight : 0);
     const context = {
@@ -3269,9 +3598,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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black z-20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { color: systemColor, size: "lg" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
@@ -3309,12 +3639,11 @@ function GameOverlay({
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "w-8 h-8 ml-1", style: { color: systemColor }, fill: systemColor })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-lg uppercase tracking-wider", style: { color: systemColor }, children: hasPendingSave ? "Continue" : "Play" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-lg uppercase tracking-wider", style: { color: systemColor }, children: t.overlay.play }),
             hasPendingSave && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400 text-xs flex items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { size: 12 }),
-              " Slot ",
-              pendingSlot,
-              " ready"
+              " ",
+              t.overlay.slotReady.replace("{{num}}", String(pendingSlot))
             ] })
           ]
         }
@@ -3326,7 +3655,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__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full", style: { backgroundColor: systemColor } }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono uppercase tracking-wider text-xs", children: "System Firmware" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono uppercase tracking-wider text-xs", children: t.overlay.systemFirmware })
           ]
         }
       )
@@ -3336,8 +3665,8 @@ function GameOverlay({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/90 z-20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-12 h-12 text-red-500" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-400 font-mono uppercase tracking-widest text-sm", children: "System Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-xs mt-1 max-w-xs", children: error || "Failed to initialize emulator" })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-400 font-mono uppercase tracking-widest text-sm", children: t.overlay.systemError }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-xs mt-1 max-w-xs", children: error || t.overlay.failedInit })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -3345,7 +3674,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
         }
       )
     ] }) });
@@ -3363,7 +3692,7 @@ function GameOverlay({
           ] })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono uppercase tracking-wider text-sm", style: { color: systemColor }, children: "Paused" })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono uppercase tracking-wider text-sm", style: { color: systemColor }, children: t.overlay.paused })
     ] }) });
   }
   return null;
@@ -3408,7 +3737,7 @@ function saveMuteState(muted) {
   if (typeof window === "undefined") return;
   localStorage.setItem(MUTE_KEY, muted.toString());
 }
-var GameCanvas = React5.memo(function GameCanvas2({
+var GameCanvas = React2.memo(function GameCanvas2({
   status,
   system,
   error,
@@ -3419,8 +3748,8 @@ var GameCanvas = React5.memo(function GameCanvas2({
   canvasRef,
   onSelectBios
 }) {
-  const canvasContainerRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const canvasContainerRef = React2.useRef(null);
+  React2.useEffect(() => {
     const container = canvasContainerRef.current;
     if (!container || canvasRef.current) return;
     const canvas = document.createElement("canvas");
@@ -3438,7 +3767,7 @@ var GameCanvas = React5.memo(function GameCanvas2({
       canvasRef.current = null;
     };
   }, [canvasRef]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (status !== "ready" && status !== "running" && status !== "paused") return;
     return setupCanvasResize(canvasContainerRef);
   }, [status]);
@@ -3472,23 +3801,24 @@ function ControlMapper({
   onClose,
   system
 }) {
-  const [localControls, setLocalControls] = React5.useState(controls);
-  const [listeningFor, setListeningFor] = React5.useState(null);
-  const activeButtons = React5.useMemo(() => {
+  const t = useKoinTranslation();
+  const [localControls, setLocalControls] = React2.useState(controls);
+  const [listeningFor, setListeningFor] = React2.useState(null);
+  const activeButtons = React2.useMemo(() => {
     return getConsoleButtons(system || "SNES");
   }, [system]);
-  const controlGroups = React5.useMemo(() => {
+  const controlGroups = React2.useMemo(() => {
     return getFilteredGroups(activeButtons);
   }, [activeButtons]);
-  const defaultControls = React5.useMemo(() => {
+  const defaultControls = React2.useMemo(() => {
     return getConsoleKeyboardDefaults(system || "SNES");
   }, [system]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (isOpen) {
       setLocalControls(controls);
     }
   }, [isOpen, controls]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!isOpen) {
       setListeningFor(null);
       return;
@@ -3531,8 +3861,8 @@ function ControlMapper({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gamepad2, { className: "text-retro-primary", size: 24 }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white", children: "Control Mapping" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: "Click a button and press a key to remap" })
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white", children: t.modals.controls.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: t.modals.controls.description })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3563,7 +3893,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] || "")
                 }
               )
             ]
@@ -3579,7 +3909,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__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 16 }),
-              "Reset to Default"
+              t.modals.controls.reset
             ]
           }
         ),
@@ -3590,7 +3920,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__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 }),
-              "Save Controls"
+              t.modals.controls.save
             ]
           }
         )
@@ -3638,17 +3968,17 @@ function toGamepadInfo(gamepad) {
 }
 function useGamepad(options) {
   const { onConnect, onDisconnect } = options || {};
-  const [gamepads, setGamepads] = React5.useState([]);
-  const rafRef = React5.useRef(null);
-  const lastStateRef = React5.useRef("");
-  const prevCountRef = React5.useRef(0);
-  const onConnectRef = React5.useRef(onConnect);
-  const onDisconnectRef = React5.useRef(onDisconnect);
-  React5.useEffect(() => {
+  const [gamepads, setGamepads] = React2.useState([]);
+  const rafRef = React2.useRef(null);
+  const lastStateRef = React2.useRef("");
+  const prevCountRef = React2.useRef(0);
+  const onConnectRef = React2.useRef(onConnect);
+  const onDisconnectRef = React2.useRef(onDisconnect);
+  React2.useEffect(() => {
     onConnectRef.current = onConnect;
     onDisconnectRef.current = onDisconnect;
   }, [onConnect, onDisconnect]);
-  const getGamepads = React5.useCallback(() => {
+  const getGamepads = React2.useCallback(() => {
     if (typeof navigator === "undefined" || typeof navigator.getGamepads !== "function") {
       return [];
     }
@@ -3662,14 +3992,14 @@ function useGamepad(options) {
     }
     return connected;
   }, []);
-  const getRawGamepad = React5.useCallback((index) => {
+  const getRawGamepad = React2.useCallback((index) => {
     const rawGamepads = navigator.getGamepads?.() ?? [];
     return rawGamepads[index] ?? null;
   }, []);
-  const refresh = React5.useCallback(() => {
+  const refresh = React2.useCallback(() => {
     setGamepads(getGamepads());
   }, [getGamepads]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (typeof window === "undefined" || typeof navigator === "undefined") {
       return;
     }
@@ -3770,11 +4100,12 @@ function GamepadMapper({
   onSave,
   systemColor = "#00FF41"
 }) {
-  const [selectedPlayer, setSelectedPlayer] = React5.useState(1);
-  const [bindings, setBindings] = React5.useState({});
-  const [listeningFor, setListeningFor] = React5.useState(null);
-  const rafRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const t = useKoinTranslation();
+  const [selectedPlayer, setSelectedPlayer] = React2.useState(1);
+  const [bindings, setBindings] = React2.useState({});
+  const [listeningFor, setListeningFor] = React2.useState(null);
+  const rafRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (isOpen) {
       const loadedBindings = {};
       for (let i = 1; i <= 4; i++) {
@@ -3786,7 +4117,7 @@ function GamepadMapper({
       }
     }
   }, [isOpen, gamepads]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!isOpen || !listeningFor) {
       if (rafRef.current) {
         cancelAnimationFrame(rafRef.current);
@@ -3821,7 +4152,7 @@ function GamepadMapper({
       }
     };
   }, [isOpen, listeningFor, selectedPlayer]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.code === "Escape") {
@@ -3866,8 +4197,8 @@ function GamepadMapper({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Joystick, { className: "text-retro-primary", size: 24, style: { color: systemColor } }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white", children: "Gamepad Settings" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: gamepads.length > 0 ? `${gamepads.length} controller${gamepads.length > 1 ? "s" : ""} connected` : "No controllers detected" })
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white", children: t.modals.gamepad.title }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -3881,7 +4212,7 @@ function GamepadMapper({
       ] }),
       gamepads.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-3 border-b border-white/10 bg-black/30", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 font-medium", children: "Player:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 font-medium", children: t.modals.gamepad.player }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: gamepads.map((gp) => /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
@@ -3914,10 +4245,10 @@ function GamepadMapper({
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Joystick, { size: 56, className: "text-gray-600 animate-pulse" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -m-2 rounded-full border-2 border-dashed border-gray-600 animate-spin", style: { animationDuration: "8s" } })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-300 font-medium mb-2", children: "No controller detected" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mb-4", children: "Press any button on your gamepad to connect" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-300 font-medium mb-2", children: t.modals.gamepad.noController }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mb-4", children: t.modals.gamepad.pressAny }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/5 border border-white/10", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: "Waiting for input..." }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: t.modals.gamepad.waiting }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-500 animate-bounce", style: { animationDelay: "0ms" } }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-500 animate-bounce", style: { animationDelay: "150ms" } }),
@@ -3927,11 +4258,8 @@ function GamepadMapper({
       ] }),
       gamepads.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 space-y-6 max-h-[400px] overflow-y-auto", children: [
         listeningFor && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("p", { className: "text-sm text-white mb-1", children: [
-            "Press a button on your controller for ",
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: BUTTON_LABELS[listeningFor] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: "Press Escape to cancel" })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white mb-1", children: t.modals.gamepad.pressButton.replace("{{button}}", BUTTON_LABELS[listeningFor]) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: t.modals.gamepad.pressEsc })
         ] }),
         BUTTON_GROUPS.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-bold text-gray-500 uppercase tracking-wider mb-2", children: group.label }),
@@ -3963,7 +4291,7 @@ function GamepadMapper({
                       backgroundColor: `${systemColor}30`,
                       color: systemColor
                     } : {},
-                    children: listeningFor === btn ? "Press..." : formatGamepadButton(currentBindings[btn])
+                    children: listeningFor === btn ? t.controls.press : formatGamepadButton(currentBindings[btn])
                   }
                 )
               ]
@@ -3981,7 +4309,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__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 16 }),
-              "Reset to Default"
+              t.modals.gamepad.reset
             ]
           }
         ),
@@ -3994,7 +4322,7 @@ function GamepadMapper({
             style: { backgroundColor: systemColor },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 }),
-              "Save Settings"
+              t.modals.gamepad.save
             ]
           }
         )
@@ -4009,7 +4337,8 @@ function CheatModal({
   onToggle,
   onClose
 }) {
-  const [copiedId, setCopiedId] = React5__default.default.useState(null);
+  const t = useKoinTranslation();
+  const [copiedId, setCopiedId] = React2__default.default.useState(null);
   if (!isOpen) return null;
   const handleCopy = async (code, id) => {
     await navigator.clipboard.writeText(code);
@@ -4029,13 +4358,8 @@ function CheatModal({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "text-purple-400", size: 24 }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white", children: "Cheat Codes" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-400", children: [
-              cheats.length,
-              " cheat",
-              cheats.length !== 1 ? "s" : "",
-              " available"
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white", children: t.modals.cheats.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: t.modals.cheats.available.replace("{{count}}", cheats.length.toString()) })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4049,8 +4373,8 @@ function CheatModal({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 space-y-2 max-h-[400px] overflow-y-auto", children: cheats.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12 text-gray-500", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { size: 48, className: "mx-auto mb-3 opacity-50" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "No cheats available" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", children: "No cheat codes found for this game" })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: t.modals.cheats.emptyTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", children: t.modals.cheats.emptyDesc })
       ] }) : cheats.map((cheat) => {
         const isActive = activeCheats.has(cheat.id);
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4084,7 +4408,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__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, className: "text-green-400" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 14 })
                     }
                   )
@@ -4095,7 +4419,7 @@ function CheatModal({
           cheat.id
         );
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10", children: /* @__PURE__ */ jsxRuntime.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 }) })
     ] })
   ] });
 }
@@ -4108,18 +4432,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,
@@ -4133,6 +4461,7 @@ function SaveSlotModal({
   maxSlots = 5,
   onUpgrade
 }) {
+  const t = useKoinTranslation();
   if (!isOpen) return null;
   const isSaveMode = mode === "save";
   const allSlots = [1, 2, 3, 4, 5];
@@ -4161,8 +4490,8 @@ function SaveSlotModal({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           isSaveMode ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "text-retro-primary", size: 24 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "text-retro-primary", size: 24 }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white", children: isSaveMode ? "Save Game" : "Load Game" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: isSaveMode ? "Choose a slot to save your progress" : "Select a save to restore" })
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white", children: isSaveMode ? t.modals.saveSlots.saveTitle : t.modals.saveSlots.loadTitle }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: isSaveMode ? t.modals.saveSlots.subtitleSave : t.modals.saveSlots.subtitleLoad })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4176,7 +4505,7 @@ function SaveSlotModal({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 space-y-2 max-h-[400px] overflow-y-auto", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-gray-400", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-8 h-8 animate-spin mb-3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Loading saves..." })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: t.modals.saveSlots.loading })
       ] }) : displaySlots.map((slotNum) => {
         const slotData = getSlotData(slotNum);
         const isEmpty = !slotData;
@@ -4193,14 +4522,10 @@ function SaveSlotModal({
               children: [
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Lock, { size: 20 }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-gray-400 group-hover:text-white transition-colors", children: [
-                    "Slot ",
-                    slotNum,
-                    " Locked"
-                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-400 group-hover:text-white transition-colors", children: t.modals.saveSlots.locked.replace("{{num}}", slotNum.toString()) }),
                   /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 group-hover:text-retro-primary transition-colors flex items-center gap-1", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { size: 10 }),
-                    "Upgrade to unlock more save slots"
+                    t.modals.saveSlots.upgrade
                   ] })
                 ] })
               ]
@@ -4224,8 +4549,8 @@ function SaveSlotModal({
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: isAutoSaveSlot ? (
                 // Auto-save slot - special display
                 isEmpty ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-retro-primary/70", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Auto-Save Slot" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-retro-primary/50", children: "Reserved for automatic saves" })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: t.modals.saveSlots.autoSave }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-retro-primary/50", children: t.modals.saveSlots.autoSaveDesc })
                 ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
                   slotData.screenshot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-16 h-12 rounded border border-retro-primary/30 overflow-hidden bg-black", children: /* @__PURE__ */ jsxRuntime.jsx(
                     "img",
@@ -4239,7 +4564,7 @@ function SaveSlotModal({
                     }
                   ) }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-retro-primary truncate", children: "Auto-Save" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-retro-primary truncate", children: t.modals.saveSlots.autoSave }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-xs text-retro-primary/60 mt-1", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 12 }),
@@ -4253,8 +4578,8 @@ function SaveSlotModal({
                   ] })
                 ] })
               ) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-500", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Empty Slot" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: "No save data" })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: t.modals.saveSlots.emptySlot }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: t.modals.saveSlots.noData })
               ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
                 slotData.screenshot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-16 h-12 rounded border border-white/10 overflow-hidden bg-black", children: /* @__PURE__ */ jsxRuntime.jsx(
                   "img",
@@ -4268,10 +4593,7 @@ function SaveSlotModal({
                   }
                 ) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-white truncate", children: [
-                    "Slot ",
-                    slotNum
-                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-white truncate", children: t.modals.saveSlots.slot.replace("{{num}}", slotNum.toString()) }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-xs text-gray-400 mt-1", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 12 }),
@@ -4301,7 +4623,7 @@ function SaveSlotModal({
           slotNum
         );
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 text-center", children: isSaveMode ? t.modals.saveSlots.footerSave : t.modals.saveSlots.footerLoad }) })
     ] })
   ] });
 }
@@ -4313,6 +4635,7 @@ function BiosSelectionModal({
   onSelectBios,
   systemColor = "#00FF41"
 }) {
+  const t = useKoinTranslation();
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4332,8 +4655,8 @@ function BiosSelectionModal({
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Cpu, { size: 24, style: { color: systemColor } }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white uppercase tracking-wide", children: "BIOS Selection" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: "Select a BIOS file to use for this game" })
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white uppercase tracking-wide", children: t.modals.bios.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: t.modals.bios.description })
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4349,8 +4672,9 @@ function BiosSelectionModal({
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 p-3 rounded bg-yellow-500/10 border border-yellow-500/20 flex items-start gap-3", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "shrink-0 text-yellow-500 mt-0.5", size: 16 }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-yellow-200/80", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Note:" }),
-                " Changing BIOS requires the emulator to restart. Your unsaved progress will be lost."
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: t.modals.bios.warningTitle }),
+                " ",
+                t.modals.bios.warning
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4380,10 +4704,10 @@ function BiosSelectionModal({
                   ),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-mono font-bold truncate ${!currentBiosId ? "text-white" : "text-gray-300"}`, children: "System Default" }),
-                      !currentBiosId && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: `font-mono font-bold truncate ${!currentBiosId ? "text-white" : "text-gray-300"}`, children: t.modals.bios.systemDefault }),
+                      !currentBiosId && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: "Use the emulator's built-in or default BIOS" })
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: t.modals.bios.defaultDesc })
                   ] }),
                   !currentBiosId && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 20, style: { color: systemColor } })
                 ]
@@ -4391,8 +4715,8 @@ function BiosSelectionModal({
             ),
             biosOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-gray-500", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileCode, { size: 48, className: "mx-auto mb-3 opacity-30" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No BIOS files found for this console." }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] mt-1 text-gray-600", children: "Upload BIOS files in your Dashboard Library." })
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: t.modals.bios.emptyTitle }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
@@ -4423,7 +4747,7 @@ function BiosSelectionModal({
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-mono font-bold truncate ${isSelected ? "text-white" : "text-gray-300"}`, children: bios.name }),
-                        isSelected && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: bios.description })
                     ] }),
@@ -4434,12 +4758,84 @@ function BiosSelectionModal({
               );
             })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-500 uppercase tracking-widest", children: "System Firmware Settings" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-3 bg-black/30 border-t border-white/10 text-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/80 backdrop-blur-sm",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/10 bg-black/50", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "text-white", size: 20 }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-white", children: t.settings.title })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-gray-400", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { size: 16 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.settings.language })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-2", children: languages.map((lang) => {
+          const isActive = currentLanguage === lang.code;
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: lang.name }),
+                isActive && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16, style: { color: systemColor } })
+              ]
+            },
+            lang.code
+          );
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4 bg-black/30 border-t border-white/10 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "text-sm text-gray-500 hover:text-white transition-colors",
+          children: t.modals.shortcuts.pressEsc
+        }
+      ) })
+    ] })
+  ] });
+}
 function GameModals({
   controlsModalOpen,
   setControlsModalOpen,
@@ -4471,7 +4867,11 @@ function GameModals({
   setBiosModalOpen,
   availableBios,
   currentBiosId,
-  onSelectBios
+  onSelectBios,
+  settingsModalOpen,
+  setSettingsModalOpen,
+  currentLanguage,
+  onLanguageChange
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4547,6 +4947,19 @@ function GameModals({
         },
         systemColor
       }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SettingsModal,
+      {
+        isOpen: settingsModalOpen,
+        onClose: () => {
+          setSettingsModalOpen(false);
+          onResume();
+        },
+        currentLanguage,
+        onLanguageChange,
+        systemColor
+      }
     )
   ] });
 }
@@ -4561,10 +4974,11 @@ function LoginForm({
   error,
   onSubmit
 }) {
+  const t = useKoinTranslation();
   return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, className: "p-4 space-y-3", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-4", children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trophy, { className: "text-yellow-400", size: 32 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-400 text-xs", children: "Connect your account to track achievements" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-400 text-xs", children: t.retroAchievements.connectAccount }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
         {
@@ -4573,14 +4987,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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 10 })
           ]
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[10px] text-gray-500 mb-1 uppercase tracking-wider", children: "Username" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[10px] text-gray-500 mb-1 uppercase tracking-wider", children: t.retroAchievements.username }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500", size: 14 }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4589,7 +5003,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
           }
@@ -4597,7 +5011,7 @@ function LoginForm({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[10px] text-gray-500 mb-1 uppercase tracking-wider", children: "Password" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[10px] text-gray-500 mb-1 uppercase tracking-wider", children: t.retroAchievements.password }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500", size: 14 }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4606,7 +5020,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
           }
@@ -4634,16 +5048,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", size: 14 }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Connecting..." })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.retroAchievements.connecting })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trophy, { size: 14 }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Connect" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.retroAchievements.login })
         ] })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 bg-blue-500/10 border border-blue-500/20 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-blue-300 leading-relaxed", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "\u{1F512} Privacy:" }),
-      " Your password is only used to authenticate with RetroAchievements. It is never stored."
+      /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+        "\u{1F512} ",
+        t.retroAchievements.privacy
+      ] }),
+      " ",
+      t.retroAchievements.privacyText
     ] }) })
   ] });
 }
@@ -4667,6 +5085,7 @@ function SettingsTab({
   progress,
   onLogout
 }) {
+  const t = useKoinTranslation();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-3", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-3 bg-black/30 rounded-lg border border-yellow-500/20", children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -4736,7 +5155,7 @@ function SettingsTab({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: hardcoreEnabled ? "text-red-500" : "text-gray-500", size: 16 }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-white", children: "Hardcore Mode" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-white", children: t.retroAchievements.hardcore }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-500", children: "2x points, no savestates" })
           ] })
         ] }),
@@ -4754,11 +5173,11 @@ function SettingsTab({
           }
         )
       ] }),
-      hardcoreEnabled && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs px-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "text-green-500", size: 12 }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-400", children: "Connected" })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-400", children: t.retroAchievements.connectedStatus })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -4767,7 +5186,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__ */ jsxRuntime.jsx(lucideReact.LogOut, { size: 14 }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sign Out" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.retroAchievements.logout })
         ]
       }
     )
@@ -4784,18 +5203,19 @@ function AchievementsTab({
   earnedPoints,
   totalPoints
 }) {
+  const t = useKoinTranslation();
   if (!currentGame) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 mx-auto mb-3 rounded-full bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trophy, { className: "text-gray-600", size: 24 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-400", children: "No game loaded" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Load a game to see achievements" })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-400", children: t.retroAchievements.noGame }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: t.retroAchievements.loadGame })
     ] });
   }
   if (achievements.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 mx-auto mb-3 rounded-full bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trophy, { className: "text-gray-600", size: 24 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-400", children: "No achievements found" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: "This game may not be supported" })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-400", children: t.retroAchievements.noAchievements }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: t.retroAchievements.notSupported })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -4848,7 +5268,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
       )) })
@@ -4887,8 +5307,7 @@ function AchievementsTab({
     /* @__PURE__ */ jsxRuntime.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())
     ] })
   ] });
 }
@@ -4907,14 +5326,15 @@ function RASidebar({
   achievements,
   unlockedIds
 }) {
+  const t = useKoinTranslation();
   const defaultTab = isLoggedIn && currentGame && achievements.length > 0 ? "achievements" : "settings";
-  const [activeTab, setActiveTab] = React5.useState(defaultTab);
-  const [filter, setFilter] = React5.useState("all");
-  const [username, setUsername] = React5.useState("");
-  const [password, setPassword] = React5.useState("");
-  const [showPassword, setShowPassword] = React5.useState(false);
-  const [localError, setLocalError] = React5.useState(null);
-  React5.useEffect(() => {
+  const [activeTab, setActiveTab] = React2.useState(defaultTab);
+  const [filter, setFilter] = React2.useState("all");
+  const [username, setUsername] = React2.useState("");
+  const [password, setPassword] = React2.useState("");
+  const [showPassword, setShowPassword] = React2.useState(false);
+  const [localError, setLocalError] = React2.useState(null);
+  React2.useEffect(() => {
     if (!isOpen) {
       setUsername("");
       setPassword("");
@@ -4932,7 +5352,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());
@@ -4975,7 +5395,7 @@ function RASidebar({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trophy, { className: "text-yellow-400", size: 18 }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-heading text-sm text-white", children: "RetroAchievements" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-heading text-sm text-white", children: t.retroAchievements.title })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -4994,7 +5414,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__ */ jsxRuntime.jsx(lucideReact.List, { size: 12 }),
-                "Achievements"
+                t.retroAchievements.achievements
               ]
             }
           ),
@@ -5005,7 +5425,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__ */ jsxRuntime.jsx(lucideReact.Settings, { size: 12 }),
-                "Settings"
+                t.settings.title
               ]
             }
           )
@@ -5052,7 +5472,7 @@ function RASidebar({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           "a",
@@ -5069,8 +5489,8 @@ function RASidebar({
   ] });
 }
 function useToast(defaultDuration = 3e3) {
-  const [toasts, setToasts] = React5.useState([]);
-  const showToast = React5.useCallback((message, type = "info", options) => {
+  const [toasts, setToasts] = React2.useState([]);
+  const showToast = React2.useCallback((message, type = "info", options) => {
     const id = crypto.randomUUID();
     const duration = options?.duration ?? defaultDuration;
     const newToast = {
@@ -5089,10 +5509,10 @@ function useToast(defaultDuration = 3e3) {
       }, duration);
     }
   }, [defaultDuration]);
-  const dismissToast = React5.useCallback((id) => {
+  const dismissToast = React2.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const clearToasts = React5.useCallback(() => {
+  const clearToasts = React2.useCallback(() => {
     setToasts([]);
   }, []);
   return {
@@ -5106,21 +5526,21 @@ function useToast(defaultDuration = 3e3) {
 // src/hooks/useGameUI.ts
 function useGameUI() {
   const { isMobile } = useMobile();
-  const containerRef = React5.useRef(null);
-  const canvasRef = React5.useRef(null);
+  const containerRef = React2.useRef(null);
+  const canvasRef = React2.useRef(null);
   const { toasts, showToast, dismissToast } = useToast(3500);
-  const [isFullscreen2, setIsFullscreen] = React5.useState(false);
-  const [raSidebarOpen, setRaSidebarOpen] = React5.useState(false);
-  const checkFullscreen = React5.useCallback(() => {
+  const [isFullscreen2, setIsFullscreen] = React2.useState(false);
+  const [raSidebarOpen, setRaSidebarOpen] = React2.useState(false);
+  const checkFullscreen = React2.useCallback(() => {
     const fullscreen = isFullscreen();
     setIsFullscreen(fullscreen);
     return fullscreen;
   }, []);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     checkFullscreen();
     return setupFullscreenListener(checkFullscreen);
   }, [checkFullscreen]);
-  const handleFullscreen = React5.useCallback(async () => {
+  const handleFullscreen = React2.useCallback(async () => {
     if (!containerRef.current) return;
     try {
       const nativeWorked = await toggleFullscreen(containerRef.current);
@@ -5662,22 +6082,36 @@ async function getCachedRom(romId) {
   }
   return null;
 }
+var pendingFetches = /* @__PURE__ */ new Map();
 async function fetchAndCacheRom(romId, url) {
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ROM: ${response.statusText}`);
+  if (pendingFetches.has(romId)) {
+    console.log(`[Cache] Joining in-flight fetch for ${romId}`);
+    return pendingFetches.get(romId);
   }
-  const blob = await response.blob();
-  if (typeof caches !== "undefined") {
+  const fetchPromise = (async () => {
     try {
-      const cache = await caches.open(CACHE_NAME);
-      await cache.put(romId, new Response(blob));
-      console.log(`[Cache] Cached ROM ${romId}`);
-    } catch (e) {
-      console.warn("[Cache] Write failed:", e);
+      const cached = await getCachedRom(romId);
+      if (cached) return cached;
+      console.log(`[Cache] Fetching ROM ${romId}...`);
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`Failed to fetch ROM: ${response.statusText}`);
+      const blob = await response.blob();
+      if (typeof caches !== "undefined") {
+        try {
+          const cache = await caches.open(CACHE_NAME);
+          await cache.put(romId, new Response(blob));
+          console.log(`[Cache] Cached ROM ${romId}`);
+        } catch (e) {
+          console.warn("[Cache] Write failed:", e);
+        }
+      }
+      return blob;
+    } finally {
+      pendingFetches.delete(romId);
     }
-  }
-  return blob;
+  })();
+  pendingFetches.set(romId, fetchPromise);
+  return fetchPromise;
 }
 
 // src/hooks/emulator/useEmulatorCore.ts
@@ -5698,15 +6132,15 @@ function useEmulatorCore({
   onReady,
   onError
 }) {
-  const [status, setStatus] = React5.useState("idle");
-  const [error, setError] = React5.useState(null);
-  const [isPaused, setIsPaused] = React5.useState(false);
-  const [speed, setSpeedState] = React5.useState(1);
-  const [isFastForwardOn, setIsFastForwardOn] = React5.useState(false);
-  const [isPerformanceMode, setIsPerformanceMode] = React5.useState(false);
-  const nostalgistRef = React5.useRef(null);
-  const isStartingRef = React5.useRef(false);
-  const prepare = React5.useCallback(async () => {
+  const [status, setStatus] = React2.useState("idle");
+  const [error, setError] = React2.useState(null);
+  const [isPaused, setIsPaused] = React2.useState(false);
+  const [speed, setSpeedState] = React2.useState(1);
+  const [isFastForwardOn, setIsFastForwardOn] = React2.useState(false);
+  const [isPerformanceMode, setIsPerformanceMode] = React2.useState(false);
+  const nostalgistRef = React2.useRef(null);
+  const isStartingRef = React2.useRef(false);
+  const prepare = React2.useCallback(async () => {
     if (!romUrl || !system) {
       console.warn("[Nostalgist] Missing romUrl or system");
       return;
@@ -5855,7 +6289,7 @@ function useEmulatorCore({
       onError?.(err instanceof Error ? err : new Error(errorMessage));
     }
   }, [system, romUrl, coreOverride, biosUrl, initialState, getCanvasElement, keyboardControls, gamepadBindings, initialVolume, onError, retroAchievements]);
-  const start = React5.useCallback(async () => {
+  const start = React2.useCallback(async () => {
     if (isStartingRef.current) {
       console.log("[Nostalgist] Already starting");
       return;
@@ -5888,7 +6322,7 @@ function useEmulatorCore({
       isStartingRef.current = false;
     }
   }, [prepare, onReady, onError]);
-  const stop = React5.useCallback(() => {
+  const stop = React2.useCallback(() => {
     if (nostalgistRef.current) {
       try {
         nostalgistRef.current.exit();
@@ -5901,7 +6335,7 @@ function useEmulatorCore({
       setIsPaused(false);
     }
   }, []);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       if (nostalgistRef.current) {
         console.log("[Nostalgist] Cleaning up emulator on unmount");
@@ -5909,7 +6343,7 @@ function useEmulatorCore({
       }
     };
   }, [stop]);
-  const restart = React5.useCallback(async () => {
+  const restart = React2.useCallback(async () => {
     if (nostalgistRef.current) {
       try {
         nostalgistRef.current.restart();
@@ -5924,7 +6358,7 @@ function useEmulatorCore({
       }
     }
   }, [stop, start]);
-  const pause = React5.useCallback(() => {
+  const pause = React2.useCallback(() => {
     if (nostalgistRef.current && !isPaused && status === "running") {
       try {
         nostalgistRef.current.pause();
@@ -5935,7 +6369,7 @@ function useEmulatorCore({
       }
     }
   }, [isPaused, status]);
-  const resume = React5.useCallback(() => {
+  const resume = React2.useCallback(() => {
     if (nostalgistRef.current) {
       try {
         nostalgistRef.current.resume();
@@ -5948,14 +6382,14 @@ function useEmulatorCore({
       }
     }
   }, [status]);
-  const togglePause = React5.useCallback(() => {
+  const togglePause = React2.useCallback(() => {
     if (isPaused) {
       resume();
     } else {
       pause();
     }
   }, [isPaused, pause, resume]);
-  const setSpeed = React5.useCallback((multiplier) => {
+  const setSpeed = React2.useCallback((multiplier) => {
     if (!nostalgistRef.current) return;
     try {
       const nostalgist = nostalgistRef.current;
@@ -5975,7 +6409,7 @@ function useEmulatorCore({
       console.error("[Nostalgist] Set speed error:", err);
     }
   }, [isFastForwardOn]);
-  const screenshot = React5.useCallback(async () => {
+  const screenshot = React2.useCallback(async () => {
     if (!nostalgistRef.current) {
       return null;
     }
@@ -6005,7 +6439,7 @@ function useEmulatorCore({
       return null;
     }
   }, []);
-  const resize = React5.useCallback((size) => {
+  const resize = React2.useCallback((size) => {
     if (!nostalgistRef.current) {
       console.warn("[Nostalgist] Cannot resize: emulator not ready");
       return;
@@ -6016,7 +6450,7 @@ function useEmulatorCore({
       console.error("[Nostalgist] Resize error:", err);
     }
   }, []);
-  React5.useCallback(() => {
+  React2.useCallback(() => {
     return nostalgistRef.current;
   }, []);
   return {
@@ -6042,11 +6476,11 @@ function useEmulatorCore({
   };
 }
 function useEmulatorAudio({ nostalgistRef, initialVolume = 100 }) {
-  const [volume, setVolume] = React5.useState(initialVolume);
-  const [isMuted, setIsMuted] = React5.useState(false);
-  const gainNodeRef = React5.useRef(null);
-  const lastVolumeRef = React5.useRef(initialVolume);
-  React5.useEffect(() => {
+  const [volume, setVolume] = React2.useState(initialVolume);
+  const [isMuted, setIsMuted] = React2.useState(false);
+  const gainNodeRef = React2.useRef(null);
+  const lastVolumeRef = React2.useRef(initialVolume);
+  React2.useEffect(() => {
     const originalConnect = AudioNode.prototype.connect;
     const contextGainMap = /* @__PURE__ */ new WeakMap();
     AudioNode.prototype.connect = function(destination, output, input) {
@@ -6074,7 +6508,7 @@ function useEmulatorAudio({ nostalgistRef, initialVolume = 100 }) {
       AudioNode.prototype.connect = originalConnect;
     };
   }, []);
-  const setVolumeLevel = React5.useCallback((newVolume) => {
+  const setVolumeLevel = React2.useCallback((newVolume) => {
     const clampedVolume = Math.max(0, Math.min(100, newVolume));
     const volumeValue = clampedVolume / 100;
     try {
@@ -6095,7 +6529,7 @@ function useEmulatorAudio({ nostalgistRef, initialVolume = 100 }) {
       console.error("[Nostalgist] Volume change error:", err);
     }
   }, []);
-  const toggleMute = React5.useCallback(() => {
+  const toggleMute = React2.useCallback(() => {
     if (!nostalgistRef.current) return;
     try {
       const emscripten = nostalgistRef.current.getEmscripten();
@@ -6137,7 +6571,7 @@ function useEmulatorAudio({ nostalgistRef, initialVolume = 100 }) {
   };
 }
 function useEmulatorInput({ nostalgistRef }) {
-  const pressKey = React5.useCallback((key) => {
+  const pressKey = React2.useCallback((key) => {
     if (!nostalgistRef.current) return;
     try {
       nostalgistRef.current.press(key);
@@ -6152,10 +6586,10 @@ function useEmulatorInput({ nostalgistRef }) {
 var MIN_SAVE_INTERVAL = 100;
 var SAVE_TIMEOUT = 5e3;
 function useSaveScheduler(nostalgistRef) {
-  const queueRef = React5.useRef([]);
-  const savingRef = React5.useRef(false);
-  const lastSaveTimeRef = React5.useRef(0);
-  const processQueue = React5.useCallback(async () => {
+  const queueRef = React2.useRef([]);
+  const savingRef = React2.useRef(false);
+  const lastSaveTimeRef = React2.useRef(0);
+  const processQueue = React2.useCallback(async () => {
     if (savingRef.current || queueRef.current.length === 0) {
       return;
     }
@@ -6209,7 +6643,7 @@ function useSaveScheduler(nostalgistRef) {
       setTimeout(() => processQueue(), MIN_SAVE_INTERVAL);
     }
   }, [nostalgistRef]);
-  const save = React5.useCallback(() => {
+  const save = React2.useCallback(() => {
     return new Promise((resolve) => {
       queueRef.current.push({
         priority: "high",
@@ -6219,7 +6653,7 @@ function useSaveScheduler(nostalgistRef) {
       processQueue();
     });
   }, [processQueue]);
-  const queueRewindCapture = React5.useCallback(() => {
+  const queueRewindCapture = React2.useCallback(() => {
     const lowPriorityCount = queueRef.current.filter((q) => q.priority === "low").length;
     if (lowPriorityCount >= 3) {
       return Promise.resolve(null);
@@ -6233,13 +6667,13 @@ function useSaveScheduler(nostalgistRef) {
       processQueue();
     });
   }, [processQueue]);
-  const isSaving = React5.useCallback(() => savingRef.current, []);
-  const getQueueLength = React5.useCallback(() => queueRef.current.length, []);
-  const clearQueue = React5.useCallback(() => {
+  const isSaving = React2.useCallback(() => savingRef.current, []);
+  const getQueueLength = React2.useCallback(() => queueRef.current.length, []);
+  const clearQueue = React2.useCallback(() => {
     queueRef.current.forEach((item) => item.resolve(null));
     queueRef.current = [];
   }, []);
-  const resultRef = React5.useRef({
+  const resultRef = React2.useRef({
     save,
     queueRewindCapture,
     isSaving,
@@ -6256,22 +6690,22 @@ function useSaveScheduler(nostalgistRef) {
 
 // src/hooks/emulator/useEmulatorSaves.ts
 function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rewindEnabled = true }) {
-  const [isRewinding, setIsRewinding] = React5.useState(false);
-  const [rewindBufferSize, setRewindBufferSize] = React5.useState(0);
-  const rewindIntervalRef = React5.useRef(null);
-  const rewindBufferRef = React5.useRef([]);
-  const rewindCaptureIntervalRef = React5.useRef(null);
+  const [isRewinding, setIsRewinding] = React2.useState(false);
+  const [rewindBufferSize, setRewindBufferSize] = React2.useState(0);
+  const rewindIntervalRef = React2.useRef(null);
+  const rewindBufferRef = React2.useRef([]);
+  const rewindCaptureIntervalRef = React2.useRef(null);
   const saveScheduler = useSaveScheduler(nostalgistRef);
-  const saveState = React5.useCallback(async () => {
+  const saveState = React2.useCallback(async () => {
     if (!nostalgistRef.current) return null;
     const result = await saveScheduler.queueRewindCapture();
     return result?.data ?? null;
   }, [saveScheduler, nostalgistRef]);
-  const saveStateWithBlob = React5.useCallback(async () => {
+  const saveStateWithBlob = React2.useCallback(async () => {
     if (!nostalgistRef.current) return null;
     return saveScheduler.save();
   }, [saveScheduler, nostalgistRef]);
-  const loadState = React5.useCallback(async (state) => {
+  const loadState = React2.useCallback(async (state) => {
     if (!nostalgistRef.current) {
       console.warn("[Nostalgist] Cannot load state: emulator not running");
       return false;
@@ -6292,7 +6726,7 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
       return false;
     }
   }, [nostalgistRef, setIsPaused, setStatus]);
-  const startRewindCapture = React5.useCallback(() => {
+  const startRewindCapture = React2.useCallback(() => {
     if (!rewindEnabled) {
       return;
     }
@@ -6320,13 +6754,13 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
       }
     }, 500);
   }, [isPaused, saveState, nostalgistRef]);
-  const stopRewindCapture = React5.useCallback(() => {
+  const stopRewindCapture = React2.useCallback(() => {
     if (rewindCaptureIntervalRef.current) {
       clearInterval(rewindCaptureIntervalRef.current);
       rewindCaptureIntervalRef.current = null;
     }
   }, []);
-  const stopRewind = React5.useCallback(() => {
+  const stopRewind = React2.useCallback(() => {
     if (!isRewinding) {
       return;
     }
@@ -6347,7 +6781,7 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
       console.error("[Nostalgist] Stop rewind error:", err);
     }
   }, [isRewinding, startRewindCapture, nostalgistRef]);
-  const startRewind = React5.useCallback(() => {
+  const startRewind = React2.useCallback(() => {
     if (!nostalgistRef.current || isRewinding) {
       return;
     }
@@ -6386,7 +6820,7 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
       startRewindCapture();
     }
   }, [isRewinding, loadState, stopRewindCapture, startRewindCapture, stopRewind, nostalgistRef]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       saveScheduler.clearQueue();
       if (rewindIntervalRef.current) {
@@ -6414,7 +6848,7 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
   };
 }
 function useEmulatorCheats({ nostalgistRef }) {
-  const applyCheat = React5.useCallback((code) => {
+  const applyCheat = React2.useCallback((code) => {
     if (!nostalgistRef.current) return;
     try {
       nostalgistRef.current.addCheat(code);
@@ -6422,7 +6856,7 @@ function useEmulatorCheats({ nostalgistRef }) {
       console.error("[Nostalgist] Apply cheat error:", err);
     }
   }, [nostalgistRef]);
-  const resetCheats = React5.useCallback(() => {
+  const resetCheats = React2.useCallback(() => {
     if (!nostalgistRef.current) return;
     try {
       nostalgistRef.current.resetCheats();
@@ -6454,7 +6888,7 @@ var useNostalgist = ({
   shader,
   romId
 }) => {
-  const isHeavySystem = React5.useMemo(() => {
+  const isHeavySystem = React2.useMemo(() => {
     return PERFORMANCE_TIER_2_SYSTEMS.has(system.toUpperCase());
   }, [system]);
   const {
@@ -6532,7 +6966,7 @@ var useNostalgist = ({
   } = useEmulatorCheats({
     nostalgistRef
   });
-  const start = React5.useCallback(async () => {
+  const start = React2.useCallback(async () => {
     await coreStart();
     setTimeout(() => {
       if (nostalgistRef.current) {
@@ -6540,11 +6974,11 @@ var useNostalgist = ({
       }
     }, 2e3);
   }, [coreStart, startRewindCapture, nostalgistRef]);
-  const stop = React5.useCallback(() => {
+  const stop = React2.useCallback(() => {
     stopRewindCapture();
     coreStop();
   }, [stopRewindCapture, coreStop]);
-  const hookReturn = React5.useMemo(() => ({
+  const hookReturn = React2.useMemo(() => ({
     status,
     error,
     isPaused,
@@ -6615,18 +7049,18 @@ function useVolume({
   setVolume: setVolumeInHook,
   toggleMute: toggleMuteInHook
 }) {
-  const [volume, setVolumeState] = React5.useState(() => loadVolume());
-  const [isMuted, setIsMutedState] = React5.useState(() => loadMuteState());
-  React5.useEffect(() => {
+  const [volume, setVolumeState] = React2.useState(() => loadVolume());
+  const [isMuted, setIsMutedState] = React2.useState(() => loadMuteState());
+  React2.useEffect(() => {
     setVolumeInHook(volume);
   }, [setVolumeInHook]);
-  const setVolume = React5.useCallback((newVolume) => {
+  const setVolume = React2.useCallback((newVolume) => {
     const clampedVolume = Math.max(0, Math.min(100, newVolume));
     setVolumeState(clampedVolume);
     saveVolume(clampedVolume);
     setVolumeInHook(clampedVolume);
   }, [setVolumeInHook]);
-  const toggleMute = React5.useCallback(() => {
+  const toggleMute = React2.useCallback(() => {
     setIsMutedState((prev) => {
       const newMuted = !prev;
       saveMuteState(newMuted);
@@ -6642,27 +7076,28 @@ function useVolume({
   };
 }
 function useControls(system, onNotify) {
+  const t = useKoinTranslation();
   const defaultControls = getConsoleKeyboardDefaults(system || "SNES");
-  const [controls, setControls] = React5.useState(() => {
+  const [controls, setControls] = React2.useState(() => {
     if (typeof window !== "undefined") {
       return loadKeyboardMapping(system);
     }
     return defaultControls;
   });
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     const loaded = loadKeyboardMapping(system);
     setControls(loaded);
   }, [system]);
-  const saveControls = React5.useCallback((newControls) => {
+  const saveControls = React2.useCallback((newControls) => {
     setControls(newControls);
     saveKeyboardMapping(newControls, system);
-    onNotify?.("Controls saved", "success");
-  }, [system, onNotify]);
-  const resetToDefaults = React5.useCallback(() => {
+    onNotify?.(t.notifications.controlsSaved, "success");
+  }, [system, onNotify, t]);
+  const resetToDefaults = React2.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,
@@ -6688,16 +7123,17 @@ function useGameSession(props) {
     canvasRef,
     showToast
   } = props;
+  const t = useKoinTranslation();
   const { controls, saveControls } = useControls(system, showToast);
-  const [gamepadModalOpen, setGamepadModalOpen] = React5.useState(false);
-  const [controlsModalOpen, setControlsModalOpen] = React5.useState(false);
+  const [gamepadModalOpen, setGamepadModalOpen] = React2.useState(false);
+  const [controlsModalOpen, setControlsModalOpen] = React2.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",
@@ -6708,16 +7144,17 @@ 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
         }
       );
     }
   });
-  const gamepadBindings = React5.useMemo(() => {
+  const gamepadBindings = React2.useMemo(() => {
     return [];
   }, [gamepads.length]);
   const nostalgist = useNostalgist({
@@ -6741,10 +7178,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
             }
           );
@@ -6762,7 +7199,7 @@ function useGameSession(props) {
     toggleMute: toggleMuteInHook,
     prepare
   } = nostalgist;
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       if (status === "running" || status === "paused") {
         onSessionEnd?.();
@@ -6773,8 +7210,8 @@ function useGameSession(props) {
     setVolume: setVolumeInHook,
     toggleMute: toggleMuteInHook
   });
-  React5.useEffect(() => suppressEmulatorWarnings(), []);
-  React5.useEffect(() => {
+  React2.useEffect(() => suppressEmulatorWarnings(), []);
+  React2.useEffect(() => {
     if (!romUrl || !system || status !== "idle") return;
     const checkAndPrepare = async () => {
       if (canvasRef.current && canvasRef.current.isConnected) {
@@ -6786,7 +7223,7 @@ function useGameSession(props) {
     const rafId = requestAnimationFrame(checkAndPrepare);
     return () => cancelAnimationFrame(rafId);
   }, [romUrl, system, status, prepare]);
-  const hardcoreRestrictions = React5.useMemo(() => {
+  const hardcoreRestrictions = React2.useMemo(() => {
     const isHardcore = !!retroAchievementsConfig?.hardcore;
     return {
       isHardcore,
@@ -6857,17 +7294,17 @@ function useAutoSave({
   queueRef,
   autoSaveInterval = 6e4
 }) {
-  const [autoSavePaused, setAutoSavePaused] = React5.useState(false);
-  const [autoSaveState, setAutoSaveState] = React5.useState("idle");
-  const [autoSaveProgress, setAutoSaveProgress] = React5.useState(0);
-  const onAutoSaveRef = React5.useRef(onAutoSave);
-  const nostalgistRef = React5.useRef(nostalgist);
-  React5.useEffect(() => {
+  const [autoSavePaused, setAutoSavePaused] = React2.useState(false);
+  const [autoSaveState, setAutoSaveState] = React2.useState("idle");
+  const [autoSaveProgress, setAutoSaveProgress] = React2.useState(0);
+  const onAutoSaveRef = React2.useRef(onAutoSave);
+  const nostalgistRef = React2.useRef(nostalgist);
+  React2.useEffect(() => {
     onAutoSaveRef.current = onAutoSave;
     nostalgistRef.current = nostalgist;
   }, [onAutoSave, nostalgist]);
-  const [loopTrigger, setLoopTrigger] = React5.useState(0);
-  React5.useEffect(() => {
+  const [loopTrigger, setLoopTrigger] = React2.useState(0);
+  React2.useEffect(() => {
     const currentNostalgist = nostalgist;
     if (!onAutoSave || !currentNostalgist || currentNostalgist.status !== "running" || autoSavePaused) {
       setAutoSaveState("idle");
@@ -6917,10 +7354,10 @@ function useAutoSave({
       clearTimeout(saveTimeoutId);
     };
   }, [nostalgist?.status, autoSavePaused, !!onAutoSave, loopTrigger, autoSaveInterval]);
-  const handleAutoSaveToggle = React5.useCallback(() => {
+  const handleAutoSaveToggle = React2.useCallback(() => {
     setAutoSavePaused((prev) => !prev);
   }, []);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (!onAutoSave || !nostalgist || nostalgist.status !== "running") return;
     const performEmergencySave = async () => {
       try {
@@ -6982,12 +7419,13 @@ function useGameSaves({
   onDeleteSaveState,
   autoSaveInterval
 }) {
-  const [saveModalOpen, setSaveModalOpen] = React5.useState(false);
-  const [saveModalMode, setSaveModalMode] = React5.useState("save");
-  const [saveSlots, setSaveSlots] = React5.useState([]);
-  const [isSlotLoading, setIsSlotLoading] = React5.useState(false);
-  const [actioningSlot, setActioningSlot] = React5.useState(null);
-  const queueRef = React5.useRef(new SaveQueue());
+  const t = useKoinTranslation();
+  const [saveModalOpen, setSaveModalOpen] = React2.useState(false);
+  const [saveModalMode, setSaveModalMode] = React2.useState("save");
+  const [saveSlots, setSaveSlots] = React2.useState([]);
+  const [isSlotLoading, setIsSlotLoading] = React2.useState(false);
+  const [actioningSlot, setActioningSlot] = React2.useState(null);
+  const queueRef = React2.useRef(new SaveQueue());
   const {
     autoSaveEnabled,
     autoSavePaused,
@@ -7000,7 +7438,7 @@ function useGameSaves({
     queueRef,
     autoSaveInterval
   });
-  const refreshSlots = React5.useCallback(async () => {
+  const refreshSlots = React2.useCallback(async () => {
     if (!onGetSaveSlots) return;
     setIsSlotLoading(true);
     try {
@@ -7008,7 +7446,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);
     }
@@ -7025,7 +7463,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 {
@@ -7039,7 +7477,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 });
         }
       });
     }
@@ -7058,9 +7496,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");
@@ -7073,7 +7511,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();
@@ -7098,14 +7536,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);
       }
@@ -7119,15 +7557,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);
       }
@@ -7139,11 +7577,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);
     }
@@ -7172,8 +7610,8 @@ function useGameCheats({
   cheats = [],
   onToggleCheat
 }) {
-  const [cheatsModalOpen, setCheatsModalOpen] = React5.useState(false);
-  const [activeCheats, setActiveCheats] = React5.useState(/* @__PURE__ */ new Set());
+  const [cheatsModalOpen, setCheatsModalOpen] = React2.useState(false);
+  const [activeCheats, setActiveCheats] = React2.useState(/* @__PURE__ */ new Set());
   const handleToggleCheat = (cheatId) => {
     if (!nostalgist) return;
     const newActiveCheats = new Set(activeCheats);
@@ -7205,16 +7643,16 @@ function useGameCheats({
 function useGameRecording({
   getCanvasElement
 }) {
-  const [isRecording, setIsRecording] = React5.useState(false);
-  const [isPaused, setIsPaused] = React5.useState(false);
-  const [recordingDuration, setRecordingDuration] = React5.useState(0);
-  const mediaRecorderRef = React5.useRef(null);
-  const chunksRef = React5.useRef([]);
-  const startTimeRef = React5.useRef(0);
-  const pausedTimeRef = React5.useRef(0);
-  const durationIntervalRef = React5.useRef(null);
+  const [isRecording, setIsRecording] = React2.useState(false);
+  const [isPaused, setIsPaused] = React2.useState(false);
+  const [recordingDuration, setRecordingDuration] = React2.useState(0);
+  const mediaRecorderRef = React2.useRef(null);
+  const chunksRef = React2.useRef([]);
+  const startTimeRef = React2.useRef(0);
+  const pausedTimeRef = React2.useRef(0);
+  const durationIntervalRef = React2.useRef(null);
   const isSupported = typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported("video/webm");
-  const startRecording = React5.useCallback(() => {
+  const startRecording = React2.useCallback(() => {
     const canvas = getCanvasElement();
     if (!canvas || !isSupported) {
       console.warn("[Recording] Canvas not found or MediaRecorder not supported");
@@ -7252,7 +7690,7 @@ function useGameRecording({
       console.error("[Recording] Failed to start:", err);
     }
   }, [getCanvasElement, isSupported, isPaused]);
-  const stopRecording = React5.useCallback(async () => {
+  const stopRecording = React2.useCallback(async () => {
     return new Promise((resolve) => {
       const mediaRecorder = mediaRecorderRef.current;
       if (!mediaRecorder || mediaRecorder.state === "inactive") {
@@ -7274,7 +7712,7 @@ function useGameRecording({
       mediaRecorder.stop();
     });
   }, []);
-  const pauseRecording = React5.useCallback(() => {
+  const pauseRecording = React2.useCallback(() => {
     const mediaRecorder = mediaRecorderRef.current;
     if (mediaRecorder && mediaRecorder.state === "recording") {
       mediaRecorder.pause();
@@ -7283,7 +7721,7 @@ function useGameRecording({
       console.log("[Recording] Paused");
     }
   }, []);
-  const resumeRecording = React5.useCallback(() => {
+  const resumeRecording = React2.useCallback(() => {
     const mediaRecorder = mediaRecorderRef.current;
     if (mediaRecorder && mediaRecorder.state === "paused") {
       pausedTimeRef.current = Date.now() - pausedTimeRef.current;
@@ -7292,7 +7730,7 @@ function useGameRecording({
       console.log("[Recording] Resumed");
     }
   }, []);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
         mediaRecorderRef.current.stop();
@@ -7466,9 +7904,9 @@ var DEFAULT_SETTINGS = {
   showInputDisplay: false
 };
 function usePlayerPersistence(onSettingsChange) {
-  const [settings, setSettings] = React5.useState(DEFAULT_SETTINGS);
-  const [isLoaded, setIsLoaded] = React5.useState(false);
-  React5.useEffect(() => {
+  const [settings, setSettings] = React2.useState(DEFAULT_SETTINGS);
+  const [isLoaded, setIsLoaded] = React2.useState(false);
+  React2.useEffect(() => {
     try {
       const stored = localStorage.getItem(STORAGE_KEY2);
       if (stored) {
@@ -7480,7 +7918,7 @@ function usePlayerPersistence(onSettingsChange) {
     }
     setIsLoaded(true);
   }, []);
-  const updateSettings = React5.useCallback((updates) => {
+  const updateSettings = React2.useCallback((updates) => {
     setSettings((prev) => {
       const next = { ...prev, ...updates };
       try {
@@ -7521,17 +7959,496 @@ var sendTelemetry = (eventName, params = {}) => {
   } catch (e) {
   }
 };
-var GamePlayer = React5.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 = React2.memo(function GamePlayerInner2(props) {
   const { settings, updateSettings, isLoaded: settingsLoaded } = usePlayerPersistence();
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     sendTelemetry("game_start", {
       system: props.system,
       core: props.core,
       game: props.title || "unknown"
     });
   }, [props.system, props.core, props.title]);
-  const [biosModalOpen, setBiosModalOpen] = React5.useState(false);
-  const [showShortcutsModal, setShowShortcutsModal] = React5.useState(false);
+  const [biosModalOpen, setBiosModalOpen] = React2.useState(false);
+  const [showShortcutsModal, setShowShortcutsModal] = React2.useState(false);
+  const [settingsModalOpen, setSettingsModalOpen] = React2.useState(false);
   const effectiveShader = props.shader !== void 0 ? props.shader : settings.shader;
   const {
     // Refs
@@ -7627,72 +8544,76 @@ var GamePlayer = React5.memo(function GamePlayer2(props) {
     status,
     isPerformanceMode
   } = nostalgist;
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (status === "running") {
       console.log("[Koin Debug] Status:", status);
       console.log("[Koin Debug] isPerformanceMode:", isPerformanceMode);
       console.log("[Koin Debug] crossOriginIsolated:", typeof window !== "undefined" ? window.crossOriginIsolated : "N/A");
     }
   }, [status, isPerformanceMode]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (settingsLoaded) {
       setVolume(settings.volume);
       if (muted !== settings.muted) toggleMute();
     }
   }, [settingsLoaded]);
   const { system, systemColor = "#00FF41", cheats = [], onExit } = props;
-  const handlePauseToggle = React5.useCallback(() => {
+  const handlePauseToggle = React2.useCallback(() => {
     status === "ready" ? start() : togglePause();
   }, [status, start, togglePause]);
-  const handleScreenshot = React5.useCallback(async () => {
+  const handleScreenshot = React2.useCallback(async () => {
     const result = await screenshot();
     if (result && props.onScreenshotCaptured) {
       props.onScreenshotCaptured(result);
     }
   }, [screenshot, props.onScreenshotCaptured]);
-  const handleShowControls = React5.useCallback(() => {
+  const handleShowControls = React2.useCallback(() => {
     pause();
     setControlsModalOpen(true);
   }, [pause, setControlsModalOpen]);
-  const handleShowCheats = React5.useCallback(() => {
+  const handleShowCheats = React2.useCallback(() => {
     pause();
     setCheatsModalOpen(true);
   }, [pause, setCheatsModalOpen]);
-  const handleShowRA = React5.useCallback(() => {
+  const handleShowRA = React2.useCallback(() => {
     pause();
     setRaSidebarOpen(true);
   }, [pause, setRaSidebarOpen]);
-  const handleShowGamepadSettings = React5.useCallback(() => {
+  const handleShowGamepadSettings = React2.useCallback(() => {
     pause();
     setGamepadModalOpen(true);
   }, [pause, setGamepadModalOpen]);
-  const handleExitClick = React5.useCallback(() => {
+  const handleShowSettings = React2.useCallback(() => {
+    pause();
+    setSettingsModalOpen(true);
+  }, [pause, setSettingsModalOpen]);
+  const handleExitClick = React2.useCallback(() => {
     onExit?.();
   }, [onExit]);
-  const handleBiosSelection = React5.useCallback(() => {
+  const handleBiosSelection = React2.useCallback(() => {
     setBiosModalOpen(true);
   }, [setBiosModalOpen]);
-  const handleVolumeChange = React5.useCallback((val) => {
+  const handleVolumeChange = React2.useCallback((val) => {
     setVolume(val);
     updateSettings({ volume: val });
   }, [setVolume, updateSettings]);
-  const handleToggleMute = React5.useCallback(() => {
+  const handleToggleMute = React2.useCallback(() => {
     toggleMute();
     updateSettings({ muted: !muted });
   }, [toggleMute, updateSettings, muted]);
-  const handleShaderChange = React5.useCallback((newShader, requiresRestart) => {
+  const handleShaderChange = React2.useCallback((newShader, requiresRestart) => {
     updateSettings({ shader: newShader });
     if (props.onShaderChange) {
       props.onShaderChange(newShader, requiresRestart);
     }
   }, [updateSettings, props.onShaderChange]);
-  const handleTogglePerformanceOverlay = React5.useCallback(() => {
+  const handleTogglePerformanceOverlay = React2.useCallback(() => {
     updateSettings({ showPerformanceOverlay: !settings.showPerformanceOverlay });
   }, [updateSettings, settings.showPerformanceOverlay]);
-  const handleToggleInputDisplay = React5.useCallback(() => {
+  const handleToggleInputDisplay = React2.useCallback(() => {
     updateSettings({ showInputDisplay: !settings.showInputDisplay });
   }, [updateSettings, settings.showInputDisplay]);
-  const handleToggleRecording = React5.useCallback(async () => {
+  const handleToggleRecording = React2.useCallback(async () => {
     if (!recordingSupported) {
       console.warn("[Recording] Not supported in this browser");
       return;
@@ -7713,14 +8634,14 @@ var GamePlayer = React5.memo(function GamePlayer2(props) {
       startRecording();
     }
   }, [isRecording, recordingSupported, startRecording, stopRecording]);
-  const handleToggleShortcuts = React5.useCallback(() => {
+  const handleToggleShortcuts = React2.useCallback(() => {
     setShowShortcutsModal((prev) => {
       if (!prev) pause();
       else resume();
       return !prev;
     });
   }, [pause, resume]);
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "F1") {
         e.preventDefault();
@@ -7877,6 +8798,7 @@ var GamePlayer = React5.memo(function GamePlayer2(props) {
             systemColor,
             gamepadCount: connectedCount,
             onGamepadSettings: handleShowGamepadSettings,
+            onSettings: handleShowSettings,
             volume,
             isMuted: muted,
             onVolumeChange: handleVolumeChange,
@@ -7942,7 +8864,11 @@ var GamePlayer = React5.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__ */ jsxRuntime.jsx(
@@ -7970,6 +8896,27 @@ var GamePlayer = React5.memo(function GamePlayer2(props) {
     }
   ) });
 });
+var GamePlayer = React2.memo(function GamePlayer2(props) {
+  const [currentLanguage, setCurrentLanguage] = React2.useState(props.initialLanguage || "en");
+  const effectiveTranslations = React2.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 = React2.useCallback((lang) => {
+    setCurrentLanguage(lang);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(KoinI18nProvider, { translations: effectiveTranslations, children: /* @__PURE__ */ jsxRuntime.jsx(
+    GamePlayerInner,
+    {
+      ...props,
+      currentLanguage,
+      onLanguageChange: handleLanguageChange
+    }
+  ) });
+});
 var GamePlayer_default = GamePlayer;
 function AchievementPopup({
   achievement,
@@ -7977,9 +8924,9 @@ function AchievementPopup({
   onDismiss,
   autoDismissMs = 5e3
 }) {
-  const [isVisible, setIsVisible] = React5.useState(false);
-  const [isExiting, setIsExiting] = React5.useState(false);
-  React5.useEffect(() => {
+  const [isVisible, setIsVisible] = React2.useState(false);
+  const [isExiting, setIsExiting] = React2.useState(false);
+  React2.useEffect(() => {
     requestAnimationFrame(() => {
       setIsVisible(true);
     });
@@ -8056,15 +9003,15 @@ var SHADER_PRESETS = [
   { id: "handheld/lcd-grid-v2", name: "LCD Grid", description: "Game Boy style LCD effect" },
   { id: "scanlines", name: "Scanlines", description: "Simple horizontal scanlines" }
 ];
-var ShaderSelector = React5.memo(function ShaderSelector2({
+var ShaderSelector = React2.memo(function ShaderSelector2({
   currentShader,
   onShaderChange,
   disabled = false,
   systemColor = "#00FF41"
 }) {
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const dropdownRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const [isOpen, setIsOpen] = React2.useState(false);
+  const dropdownRef = React2.useRef(null);
+  React2.useEffect(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -8131,18 +9078,18 @@ var ShaderSelector = React5.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" },
   { key: "F5", description: "Record" },
   { key: "F9", description: "Mute" }
 ];
-var ShortcutsReference = React5.memo(function ShortcutsReference2({
+var ShortcutsReference = React2.memo(function ShortcutsReference2({
   systemColor = "#00FF41",
   isExpanded: initialExpanded = false
 }) {
-  const [isExpanded, setIsExpanded] = React5.useState(initialExpanded);
+  const [isExpanded, setIsExpanded] = React2.useState(initialExpanded);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -8166,7 +9113,7 @@ var ShortcutsReference = React5.memo(function ShortcutsReference2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3 pt-1 space-y-1.5 border-t border-white/10", children: SHORTCUTS2.map(({ key, description }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3 pt-1 space-y-1.5 border-t border-white/10", children: SHORTCUTS.map(({ key, description }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/60", children: description }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "kbd",
@@ -8199,6 +9146,7 @@ exports.DEFAULT_KEYBOARD = DEFAULT_KEYBOARD;
 exports.DPAD_BUTTONS = DPAD_BUTTONS;
 exports.FACE_BUTTONS = FACE_BUTTONS;
 exports.GamePlayer = GamePlayer_default;
+exports.KoinI18nProvider = KoinI18nProvider;
 exports.PERFORMANCE_TIER_1_SYSTEMS = PERFORMANCE_TIER_1_SYSTEMS;
 exports.PERFORMANCE_TIER_2_SYSTEMS = PERFORMANCE_TIER_2_SYSTEMS;
 exports.RASidebar = RASidebar;
@@ -8220,10 +9168,15 @@ exports.clearAllControls = clearAllControls;
 exports.consoleHasButton = consoleHasButton;
 exports.detectControllerBrand = detectControllerBrand;
 exports.detectSystem = detectSystem;
+exports.en = en;
+exports.es = es;
+exports.fetchAndCacheRom = fetchAndCacheRom;
 exports.formatGamepadButton = formatGamepadButton;
 exports.formatKeyCode = formatKeyCode;
+exports.fr = fr;
 exports.gamepadToRetroArchConfig = gamepadToRetroArchConfig;
 exports.getAchievementBadgeUrl = getAchievementBadgeUrl;
+exports.getCachedRom = getCachedRom;
 exports.getConsoleButtons = getConsoleButtons;
 exports.getConsoleCapabilities = getConsoleCapabilities;
 exports.getConsoleKeyboardDefaults = getConsoleKeyboardDefaults;
@@ -8249,6 +9202,7 @@ exports.saveKeyboardMapping = saveKeyboardMapping;
 exports.systemsMatch = systemsMatch;
 exports.useGameRecording = useGameRecording;
 exports.useGamepad = useGamepad;
+exports.useKoinTranslation = useKoinTranslation;
 exports.useNostalgist = useNostalgist;
 exports.useToast = useToast;
 //# sourceMappingURL=index.js.map