Merge pull request #254 from Ratintosh/assets-refactor

Move static assets into assets/ directory
Moved images and audio into assets folder, updated paths accordingly
2026-05-10 07:37:18 +00:00 · 2026-04-17 17:32:10 +02:00 · 2026-03-27 01:02:44 -04:00 · 2026-03-16 14:41:09 +01:00 · 2026-03-14 13:30:57 +01:00 · 2026-03-14 14:18:13 +02:00
19 changed files with 1258 additions and 99 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -33,7 +33,6 @@ jobs:
          name: linux-dist
          path: dist/*.AppImage
          if-no-files-found: error
-
  build-windows:
    name: Build Windows Installer
    runs-on: windows-latest
@ -59,7 +58,6 @@ jobs:
            dist/*.exe
            dist/*.msi
          if-no-files-found: error
-
  build-mac:
    name: Build macOS DMG (Apple Silicon)
    runs-on: macos-latest
@ -83,10 +81,9 @@ jobs:
          name: mac-dist
          path: dist/*.dmg
          if-no-files-found: error
-
  build-mac-intel:
    name: Build macOS DMG (Intel)
-    runs-on: macos-13
+    runs-on: macos-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@ -98,7 +95,7 @@ jobs:
      - name: Install dependencies
        run: npm ci
      - name: Build macOS DMG (Intel)
-        run: npm run dist:mac
+        run: npm run dist:mac -- --x64
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      - name: Upload macOS Intel artifact
@ -107,7 +104,6 @@ jobs:
          name: mac-intel-dist
          path: dist/*.dmg
          if-no-files-found: error
-
  release:
    name: Create GitHub Release
    needs: [build-linux, build-windows, build-mac, build-mac-intel]
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules/
--- a/README.md
+++ b/README.md
@ -4,6 +4,8 @@ A custom launcher for Minecraft Legacy Console Edition.

 <img width="1277" height="717" alt="image" src="https://github.com/user-attachments/assets/eaa9bae6-3b3b-4e39-a3c1-156e34abf3cc" />

+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/gradengnostic)
+

 ## Features

@ -77,6 +79,11 @@ The launcher supports several compatibility options for Linux:
 - **extract-zip**: ZIP archive extraction
 - **Tailwind CSS**: UI styling (via CDN)

+## Assets
+
+- Controller button sprites: [greatdocbrown](https://greatdocbrown.itch.io/gamepad-ui)
+- UI Sounds: Using the free version of [JDSherbert's Ultimate UI SFX Pack on itch.io](https://jdsherbert.itch.io/ultimate-ui-sfx-pack)
+
 ## Development

 The launcher is built with:
--- a/assets/512x512.png
+++ b/assets/512x512.png
--- a/assets/Click_stereo.ogg.mp3
+++ b/assets/Click_stereo.ogg.mp3
--- a/assets/Minecraft.ttf
+++ b/assets/Minecraft.ttf
--- a/assets/gdb-keyboard-2.png
+++ b/assets/gdb-keyboard-2.png
--- a/assets/gdb-switch-2.png
+++ b/assets/gdb-switch-2.png
--- a/assets/gdb-xbox-2.png
+++ b/assets/gdb-xbox-2.png
--- a/assets/minecraft.jpg
+++ b/assets/minecraft.jpg
--- a/assets/minecraftlogo.png
+++ b/assets/minecraftlogo.png
--- a/assets/restart.png
+++ b/assets/restart.png
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LegacyLauncher</title>
-    <link rel="icon" type="image/png" href="512x512.png">
+    <link rel="icon" type="image/png" href="assets/512x512.png">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
 </head>
@ -13,16 +13,16 @@
    <div class="title-bar">
        <div class="title-bar-text">LegacyLauncher</div>
        <div class="window-controls">
-            <div class="win-btn" onclick="minimizeWindow()">−</div>
-            <div class="win-btn" id="maximize-btn" onclick="toggleMaximize()">▢</div>
-            <div class="win-btn close" onclick="closeWindow()">×</div>
+            <div class="win-btn nav-item" onclick="minimizeWindow()" tabindex="0" title="Minimize">−</div>
+            <div class="win-btn nav-item" id="maximize-btn" onclick="toggleMaximize()" tabindex="0" title="Maximize / Restore">▢</div>
+            <div class="win-btn close nav-item" onclick="closeWindow()" tabindex="0" title="Close">×</div>
        </div>
    </div>

    <div id="loader">
        <div class="loader-content">
            <div class="loader-spinner"></div>
-            <div id="loader-text">CONNECTING...</div>
+            <div id="loader-text"><span id="loader-text-label">CONNECTING</span><span class="loading-dots animate" id="loader-dots" aria-hidden="true"><span>.</span><span>.</span><span>.</span></span></div>
        </div>
    </div>

@ -46,7 +46,7 @@
            <!-- Classic Mode: Logo + Splash (only visible in classic theme) -->
            <div class="classic-logo-area" id="classic-logo-area">
                <div style="position: relative;">
-                    <img src="minecraftlogo.png" class="mc-logo-img" alt="Minecraft Logo" style="margin-bottom: 0; margin-top: 0;">
+                    <img src="assets/minecraftlogo.png" class="mc-logo-img" alt="Minecraft Logo" style="margin-bottom: 0; margin-top: 0;">
                    <div id="classic-splash-text" class="splash-text">Splash!</div>
                </div>
            </div>
@ -54,7 +54,7 @@
            <!-- Left Side: Main Menu -->
            <div class="menu-column" style="flex: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 5;">
                <div class="relative">
-                    <img src="minecraftlogo.png" class="mc-logo-img" alt="Minecraft Logo">
+                    <img src="assets/minecraftlogo.png" class="mc-logo-img" alt="Minecraft Logo">
                    <div id="splash-text" class="splash-text">Splash!</div>
                </div>
        
@ -70,7 +70,7 @@
                        </select>
                    </div>
                    <div id="btn-check-update" class="btn-mc btn-mini nav-item" onclick="checkForUpdatesManual()" title="Check for Updates" tabindex="0">
-                        <img src="restart.png" alt="Update">
+                        <img src="assets/restart.png" alt="Update">
                    </div>
                </div>
        
@ -86,13 +86,19 @@
            <div class="skin-column" style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-width: 300px; padding-right: 0px;">
                <div id="main-skin-viewer" style="width: 100%; height: 500px; cursor: grab; display: flex; align-items: center; justify-content: center;"></div>
                
-                <div class="btn-mc nav-item" onclick="openSkinManager()" style="width: 250px; height: 48px; font-size: 20px; margin-top: -20px; z-index: 10; margin-left: auto; margin-right: auto;" tabindex="0">
-                    CHANGE SKIN
+                <div class="skin-action-row" style="margin-top: -20px; z-index: 10; margin-left: auto; margin-right: auto;">
+                    <div class="btn-mc nav-item skin-action-btn skin-action-btn-main" onclick="openSkinManager()" tabindex="0">
+                        CHANGE SKIN
+                    </div>
+                    <div id="btn-skin-render-mode" class="btn-mc nav-item skin-action-btn skin-action-btn-mode" onclick="toggleMainSkinRenderMode()" tabindex="0">3D</div>
                </div>
            </div>
            
            <div class="progress-container" id="progress-container">
-                <div class="progress-text" id="progress-text">Downloading...</div>
+                <div class="progress-text-wrap" id="progress-text-wrap">
+                    <span class="loader-spinner progress-spinner" id="progress-spinner" aria-hidden="true"></span>
+                    <div class="progress-text" id="progress-text"><span id="progress-text-label">Downloading</span><span class="loading-dots" id="progress-dots" aria-hidden="true"><span>.</span><span>.</span><span>.</span></span><span id="progress-text-suffix"></span></div>
+                </div>
                <div class="progress-bar-bg">
                    <div class="progress-bar-fill" id="progress-bar-fill"></div>
                </div>
@ -195,12 +201,21 @@
                    <input type="text" id="install-path-input" class="mc-input nav-item !mb-0" placeholder="Default: Documents/LegacyClient" tabindex="0">
                    <div class="btn-mc btn-mini nav-item !w-[60px] !h-[48px]" onclick="browseInstallDir()" tabindex="0">...</div>
                </div>
-                <div class="btn-mc w-full !h-[40px] !text-lg !mb-0 nav-item" onclick="openGameDir()" tabindex="0">OPEN FOLDER</div>
+                <div class="flex gap-2">
+                    <div class="btn-mc flex-grow !h-[40px] !text-lg !mb-0 nav-item" onclick="openGameDir()" tabindex="0">GAME FOLDER</div>
+                    <div class="btn-mc flex-grow !h-[40px] !text-lg !mb-0 nav-item" onclick="openScreenshotsGallery()" tabindex="0">SCREENSHOTS</div>
+                </div>
            </div>

            <div class="mc-input-group">
                <label class="mc-label">GitHub Repository Source:</label>
                <input type="text" id="repo-input" class="mc-input nav-item" placeholder="user/repo" tabindex="0">
+                <label class="mc-label" style="margin-top: 10px;">Repository Preset:</label>
+                <select id="repo-preset-select" class="mc-input nav-item" onchange="applyRepoPreset()" tabindex="0" style="height: 48px; margin-top: 8px;">
+                    <option value="custom">Custom</option>
+                    <option value="smartcmd/MinecraftConsoles">smartcmd (default)</option>
+                    <option value="cath0degaytube/MinecraftConsoles">cath0degaytube (no watermark)</option>
+                </select>
            </div>

            <div class="mc-input-group">
@ -226,7 +241,10 @@

            <div class="mc-input-group">
                <label class="mc-label">Launcher Music Volume:</label>
-                <input type="range" id="volume-slider" min="0" max="1" step="0.05" value="1" class="nav-item w-full" tabindex="0">
+                <div class="mc-slider-container">
+                    <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="1" class="mc-slider nav-item w-full" tabindex="0">
+                    <div id="volume-percent" class="mc-slider-percent">100%</div>
+                </div>
            </div>

            <div class="grid grid-cols-2 gap-4 w-full mt-2">
@ -240,6 +258,13 @@
                </div>
            </div>

+            <div class="mc-input-group">
+                <label class="mc-label" style="display: flex; align-items: center; cursor: pointer;">
+                    <input type="checkbox" id="fullscreen-checkbox" class="nav-item" style="width: 24px; height: 24px; margin-right: 12px; cursor: pointer;" tabindex="0">
+                    Launch in Fullscreen (-fullscreen)
+                </label>
+            </div>
+
            <div class="mc-input-group">
                <label class="mc-label" style="display: flex; align-items: center; cursor: pointer;">
                    <input type="checkbox" id="server-checkbox" class="nav-item" style="width: 24px; height: 24px; margin-right: 12px; cursor: pointer;" tabindex="0">
@ -254,6 +279,32 @@
                </label>
            </div>

+            <div class="mc-input-group">
+                <label class="mc-label" style="display: flex; align-items: center; cursor: pointer;">
+                    <input type="checkbox" id="steamdeck-mode-checkbox" class="nav-item" style="width: 24px; height: 24px; margin-right: 12px; cursor: pointer;" tabindex="0">
+                    Use Steam Deck Optimized UI Mode
+                </label>
+            </div>
+
+            <div class="mc-input-group">
+                <label class="mc-label">Controller Confirm/Cancel Layout:</label>
+                <select id="controller-layout-select" class="mc-input nav-item" tabindex="0" style="height: 48px; margin-top: 8px;">
+                    <option value="auto">Auto Detect (Recommended)</option>
+                    <option value="xbox">Xbox Style (A = Confirm, B = Cancel)</option>
+                    <option value="nintendo">Nintendo Style (B = Confirm, A = Cancel)</option>
+                </select>
+                <div id="controller-layout-presets" class="controller-layout-presets" role="radiogroup" aria-label="Controller layout presets">
+                    <button type="button" class="controller-layout-preset nav-item" data-layout="xbox" tabindex="0" aria-pressed="false">
+                        <span class="controller-layout-icon controller-layout-icon-xbox" aria-hidden="true"></span>
+                        <span class="controller-layout-text">Xbox Style (A = Confirm, B = Cancel)</span>
+                    </button>
+                    <button type="button" class="controller-layout-preset nav-item" data-layout="nintendo" tabindex="0" aria-pressed="false">
+                        <span class="controller-layout-icon controller-layout-icon-switch" aria-hidden="true"></span>
+                        <span class="controller-layout-text">Nintendo Style (B = Confirm, A = Cancel)</span>
+                    </button>
+                </div>
+            </div>
+
            <div class="flex gap-4 w-full mt-4">
                <div id="btn-options-done" class="btn-mc flex-grow nav-item" onclick="saveOptions()" tabindex="0">DONE</div>
                <div id="btn-options-cancel" class="btn-mc flex-grow nav-item" onclick="toggleOptions(false)" tabindex="0">CANCEL</div>
@ -261,6 +312,21 @@
        </div>
    </div>

+    <div class="modal-overlay" id="gallery-modal">
+        <div class="modal-box" style="max-width: 1000px; width: 85vw; height: 85vh;">
+            <div class="modal-title">SCREENSHOTS GALLERY</div>
+            
+            <div id="gallery-container" class="w-full flex-grow overflow-y-auto mb-6 border-2 border-[#555] bg-black p-4 grid grid-cols-2 md:grid-cols-3 gap-4 auto-rows-max">
+                <!-- Screenshots will be dynamically loaded here -->
+            </div>
+
+            <div class="flex gap-4 w-full">
+                <div class="btn-mc flex-grow nav-item" onclick="openScreenshotsDir()" tabindex="0">OPEN FOLDER</div>
+                <div class="btn-mc flex-grow nav-item" onclick="toggleGallery(false)" tabindex="0">DONE</div>
+            </div>
+        </div>
+    </div>
+
    <div class="modal-overlay" id="profile-modal">
        <div class="modal-box">
            <div class="modal-title">PLAYER PROFILE</div>
--- a/main.js
+++ b/main.js
@ -1,4 +1,4 @@
-const { app, BrowserWindow, shell, ipcMain, dialog } = require('electron');
+const { app, BrowserWindow, shell, ipcMain, dialog, globalShortcut, desktopCapturer } = require('electron');
 const path = require('path');
 const Store = require('electron-store');
 const fs = require('fs');
@ -7,9 +7,11 @@ const extractZip = require('extract-zip');
 const { exec } = require('child_process');

 const store = new Store();
+let mainWindow = null;
+let isGameRunning = false;

 function createWindow() {
-  const win = new BrowserWindow({
+  mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    minWidth: 1024,
@ -27,17 +29,116 @@ function createWindow() {
    }
  });

-  win.loadFile('index.html');
+  mainWindow.loadFile('index.html');

-  ipcMain.on('window-minimize', () => win.minimize());
+  ipcMain.on('window-minimize', () => mainWindow.minimize());
  ipcMain.on('window-maximize', () => {
-    if (win.isMaximized()) {
-      win.unmaximize();
+    if (mainWindow.isMaximized()) {
+      mainWindow.unmaximize();
    } else {
-      win.maximize();
+      mainWindow.maximize();
    }
  });
-  ipcMain.on('window-close', () => win.close());
+  ipcMain.on('window-close', () => mainWindow.close());
+  ipcMain.on('window-fullscreen', () => {
+    mainWindow.setFullScreen(!mainWindow.isFullScreen());
+  });
+  ipcMain.on('window-set-fullscreen', (event, enabled) => {
+    mainWindow.setFullScreen(Boolean(enabled));
+  });
+
+  ipcMain.handle('take-screenshot', async (event) => {
+    try {
+      const screenshotsDir = path.join(app.getPath('userData'), 'Screenshots');
+      if (!fs.existsSync(screenshotsDir)) {
+        fs.mkdirSync(screenshotsDir, { recursive: true });
+      }
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+      const fileName = `screenshot-${timestamp}.png`;
+      const filePath = path.join(screenshotsDir, fileName);
+
+      if (isGameRunning) {
+        const sources = await desktopCapturer.getSources({ 
+          types: ['window', 'screen'], 
+          thumbnailSize: { width: 3840, height: 2160 } // High res for screenshot
+        });
+        
+        // Find Minecraft window or fallback to primary screen
+        const source = sources.find(s => s.name.toLowerCase().includes('minecraft')) || 
+                       sources.find(s => s.id.startsWith('screen'));
+        
+        if (source) {
+          fs.writeFileSync(filePath, source.thumbnail.toPNG());
+          return filePath;
+        }
+      }
+
+      // Fallback to launcher capture if game isn't running or not found
+      const win = BrowserWindow.fromWebContents(event.sender) || mainWindow;
+      if (!win) throw new Error("Window not found");
+      const image = await win.capturePage();
+      fs.writeFileSync(filePath, image.toPNG());
+      return filePath;
+    } catch (err) {
+      console.error("Screenshot capture error:", err);
+      throw err;
+    }
+  });
+
+  ipcMain.on('game-running-state', (event, running) => {
+    isGameRunning = running;
+    if (running) {
+      globalShortcut.register('F2', () => {
+        if (mainWindow) {
+          mainWindow.webContents.send('trigger-screenshot');
+        }
+      });
+    } else {
+      globalShortcut.unregister('F2');
+    }
+  });
+
+  ipcMain.handle('list-screenshots', async () => {
+    const screenshotsDir = path.join(app.getPath('userData'), 'Screenshots');
+    if (!fs.existsSync(screenshotsDir)) {
+      return [];
+    }
+    const files = fs.readdirSync(screenshotsDir);
+    return files
+      .filter(f => f.toLowerCase().endsWith('.png'))
+      .sort((a, b) => {
+        try {
+          // Extract timestamp from 'screenshot-YYYY-MM-DDTHH-mm-ss-SSSZ.png'
+          const timeA = a.replace('screenshot-', '').replace('.png', '').replace(/-/g, ':');
+          const timeB = b.replace('screenshot-', '').replace('.png', '').replace(/-/g, ':');
+          return new Date(timeB) - new Date(timeA);
+        } catch (e) {
+          return 0;
+        }
+      })
+      .map(f => ({
+        name: f,
+        path: path.join(screenshotsDir, f),
+        url: `file://${path.join(screenshotsDir, f)}`
+      }));
+  });
+
+  ipcMain.handle('delete-screenshot', async (event, fileName) => {
+    const filePath = path.join(app.getPath('userData'), 'Screenshots', fileName);
+    if (fs.existsSync(filePath)) {
+      fs.unlinkSync(filePath);
+      return true;
+    }
+    return false;
+  });
+
+  ipcMain.handle('open-screenshots-dir', async () => {
+    const screenshotsDir = path.join(app.getPath('userData'), 'Screenshots');
+    if (!fs.existsSync(screenshotsDir)) {
+      fs.mkdirSync(screenshotsDir, { recursive: true });
+    }
+    shell.openPath(screenshotsDir);
+  });

  ipcMain.handle('store-get', (event, key) => store.get(key));
  ipcMain.handle('store-set', (event, key, value) => store.set(key, value));
@ -49,10 +150,10 @@ function createWindow() {
    return result.filePaths[0];
  });
 
-  win.on('maximize', () => win.webContents.send('window-is-maximized', true));
-  win.on('unmaximize', () => win.webContents.send('window-is-maximized', false));
+  mainWindow.on('maximize', () => mainWindow.webContents.send('window-is-maximized', true));
+  mainWindow.on('unmaximize', () => mainWindow.webContents.send('window-is-maximized', false));

-  win.webContents.setWindowOpenHandler(({ url }) => {
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
    shell.openExternal(url);
    return { action: 'deny' };
  });
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "legacylauncher",
-  "version": "3.0.0",
+  "version": "3.5.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "legacylauncher",
-      "version": "3.0.0",
+      "version": "3.5.0",
      "license": "ISC",
      "dependencies": {
        "electron-store": "^6.0.1",
@ -4690,9 +4690,9 @@
      }
    },
    "node_modules/tar": {
-      "version": "7.5.10",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.10.tgz",
-      "integrity": "sha512-8mOPs1//5q/rlkNSPcCegA6hiHJYDmSLEI8aMH/CdSQJNWztHC9WHNam5zdQlfpTwB9Xp7IBEsHfV5LKMJGVAw==",
+      "version": "7.5.11",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.11.tgz",
+      "integrity": "sha512-ChjMH33/KetonMTAtpYdgUFr0tbz69Fp2v7zWxQfYZX4g5ZN2nOBXm1R2xyA+lMIKrLKIoKAwFj93jE/avX9cQ==",
      "dev": true,
      "license": "BlueOak-1.0.0",
      "dependencies": {
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "legacylauncher",
-  "version": "3.0.1",
-  "description": "",
+  "version": "3.5.0",
+  "description": "A Minecraft: Legacy Console Edition launcher",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
@ -30,7 +30,17 @@
        "flatpak"
      ],
      "category": "Game",
-      "icon": "512x512.png"
+      "icon": "512x512.png",
+      "desktop": {
+        "entry": {
+          "Name": "Minecraft LCE Launcher",
+          "GenericName": "Minecraft Launcher",
+          "Comment": "A Minecraft: Legacy Console Edition launcher",
+          "Categories": "Game;Emulation;",
+          "StartupNotify": "true"
+        }
+      },
+      "executableName": "legacylauncher"
    },
    "mac": {
      "target": [
--- a/renderer.js
+++ b/renderer.js
@ -9,6 +9,10 @@ const DEFAULT_REPO = "smartcmd/MinecraftConsoles";
 const DEFAULT_EXEC = "Minecraft.Client.exe";
 const TARGET_FILE = "LCEWindows64.zip";
 const LAUNCHER_REPO = "gradenGnostic/LegacyLauncher";
+const REPO_PRESETS = {
+    default: 'smartcmd/MinecraftConsoles',
+    noWatermark: 'cath0degaytube/MinecraftConsoles'
+};

 let instances = [];
 let currentInstanceId = null;
@ -41,6 +45,21 @@ const GamepadManager = {
    COOLDOWN: 180,
    loopStarted: false,
    lastAPressed: false,
+    lastGuidePressed: false,
+    controlLayoutMode: 'auto',
+
+    setControlLayoutMode(mode = 'auto') {
+        const validModes = ['auto', 'xbox', 'nintendo'];
+        this.controlLayoutMode = validModes.includes(mode) ? mode : 'auto';
+    },
+
+    shouldSwapABButtons(gamepadId = '') {
+        if (this.controlLayoutMode === 'nintendo') return true;
+        if (this.controlLayoutMode === 'xbox') return false;
+
+        const id = gamepadId.toLowerCase();
+        return id.includes('nintendo switch pro controller') || id.includes(' switch pro controller') || id.includes('nintendo co., ltd');
+    },

    init() {
        window.addEventListener("gamepadconnected", () => {
@ -76,6 +95,7 @@ const GamepadManager = {
        }

        if (!gp) {
+            this.lastGuidePressed = false;
            if (this.active) {
                this.active = false;
                showToast("Controller Disconnected");
@ -98,6 +118,18 @@ const GamepadManager = {
        const isPressed = (idx) => buttons[idx] ? buttons[idx].pressed : false;
        const getAxis = (idx) => axes[idx] !== undefined ? axes[idx] : 0;

+        const shouldSwapAB = this.shouldSwapABButtons(gp.id);
+        const confirmButton = shouldSwapAB ? 1 : 0;
+        const cancelButton = shouldSwapAB ? 0 : 1;
+
+        const guidePressed = isPressed(16) || isPressed(17);
+        if (guidePressed && !this.lastGuidePressed) {
+            showToast("Closing Launcher...");
+            ipcRenderer.send('window-close');
+            return;
+        }
+        this.lastGuidePressed = guidePressed;
+
        if (now - this.lastInputTime > this.COOLDOWN) {
            const threshold = 0.5;
            const axisX = getAxis(0);
@ -108,21 +140,22 @@ const GamepadManager = {
            const left = isPressed(14) || axisX < -threshold;
            const right = isPressed(15) || axisX > threshold;

-            if (up) { this.navigate('up'); this.lastInputTime = now; }
-            else if (down) { this.navigate('down'); this.lastInputTime = now; }
-            else if (left) { this.navigate('left'); this.lastInputTime = now; }
-            else if (right) { this.navigate('right'); this.lastInputTime = now; }
+            if (up) { UiSoundManager.setInputSource('controller'); this.navigate('up'); this.lastInputTime = now; }
+            else if (down) { UiSoundManager.setInputSource('controller'); this.navigate('down'); this.lastInputTime = now; }
+            else if (left) { UiSoundManager.setInputSource('controller'); this.navigate('left'); this.lastInputTime = now; }
+            else if (right) { UiSoundManager.setInputSource('controller'); this.navigate('right'); this.lastInputTime = now; }
            
-            else if (isPressed(4)) { this.cycleActiveSelection(-1); this.lastInputTime = now; }
-            else if (isPressed(5)) { this.cycleActiveSelection(1); this.lastInputTime = now; }
+            else if (isPressed(4)) { UiSoundManager.setInputSource('controller'); this.cycleActiveSelection(-1); this.lastInputTime = now; }
+            else if (isPressed(5)) { UiSoundManager.setInputSource('controller'); this.cycleActiveSelection(1); this.lastInputTime = now; }
            
-            else if (isPressed(1)) { this.cancelCurrent(); this.lastInputTime = now; }
+            else if (isPressed(cancelButton)) { UiSoundManager.setInputSource('controller'); this.cancelCurrent(); this.lastInputTime = now; }

-            else if (isPressed(2)) { checkForUpdatesManual(); this.lastInputTime = now; }
+            else if (isPressed(2)) { UiSoundManager.setInputSource('controller'); checkForUpdatesManual(); this.lastInputTime = now; }
        }

-        const aPressed = isPressed(0);
+        const aPressed = isPressed(confirmButton);
        if (aPressed && !this.lastAPressed) {
+            UiSoundManager.setInputSource('controller');
            this.clickActive();
        }
        this.lastAPressed = aPressed;
@ -218,7 +251,24 @@ const GamepadManager = {
        if (active && active.classList.contains('nav-item')) {
            active.classList.add('active-bump');
            setTimeout(() => active.classList.remove('active-bump'), 100);
-            
+
+            if (active.id === 'version-select-box') {
+                this.cycleActiveSelection(1);
+                return;
+            }
+            if (active.id === 'classic-version-select-box') {
+                const classicSelect = document.getElementById('classic-version-select');
+                if (classicSelect) {
+                    classicSelect.selectedIndex = (classicSelect.selectedIndex + 1) % classicSelect.options.length;
+                    syncVersionFromClassic();
+                }
+                return;
+            }
+            if (active.id === 'compat-select-box') {
+                this.cycleActiveSelection(1);
+                return;
+            }
+
            if (active.tagName === 'INPUT' && active.type === 'checkbox') {
                active.checked = !active.checked;
                active.dispatchEvent(new Event('change'));
@ -300,6 +350,88 @@ const GamepadManager = {
    }
 };

+const UiSoundManager = {
+    files: {
+        cursor: 'JDSherbert - Ultimate UI SFX Pack - Cursor - 1.mp3', //doesnt exist?
+        select: 'assets/Click_stereo.ogg.mp3',
+        cancel: 'JDSherbert - Ultimate UI SFX Pack - Cancel - 1.mp3',
+        popupOpen: 'JDSherbert - Ultimate UI SFX Pack - Popup Open - 1.mp3',
+        popupClose: 'JDSherbert - Ultimate UI SFX Pack - Popup Close - 1.mp3',
+        error: 'JDSherbert - Ultimate UI SFX Pack - Error - 1.mp3'
+    },
+    cache: {},
+    lastPlayedAt: {},
+    cooldownMs: 70,
+    lastHoverItem: null,
+    inputSource: 'mouse',
+
+    setInputSource(source) {
+        this.inputSource = source;
+    },
+
+    shouldPlay() {
+        return true; // Play sounds for both controller and mouse/keyboard
+    },
+
+    init() {
+        Object.entries(this.files).forEach(([key, file]) => {
+            this.cache[key] = new Audio(file);
+            this.cache[key].preload = 'auto';
+            this.cache[key].volume = key === 'cursor' ? 0.45 : 0.6;
+        });
+
+        const markMouseInput = () => this.setInputSource('mouse');
+        ['mousemove', 'mousedown', 'touchstart', 'wheel', 'keydown'].forEach((ev) => {
+            document.addEventListener(ev, markMouseInput, { passive: true });
+        });
+
+        document.addEventListener('focusin', (e) => {
+            if (e.target?.classList?.contains('nav-item')) this.play('cursor');
+        });
+
+        document.addEventListener('pointerover', (e) => {
+            const navItem = e.target?.closest?.('.nav-item');
+            if (!navItem || navItem === this.lastHoverItem) return;
+            this.lastHoverItem = navItem;
+            this.play('cursor');
+        });
+
+        document.addEventListener('pointerleave', () => {
+            this.lastHoverItem = null;
+        });
+
+        document.addEventListener('click', (e) => {
+            const navItem = e.target?.closest?.('.nav-item');
+            if (!navItem) return;
+            const label = (navItem.textContent || '').trim().toLowerCase();
+            if (label.includes('cancel') || label.includes('close') || label.includes('back') || label.includes('later')) {
+                this.play('cancel');
+                return;
+            }
+            this.play('select');
+        });
+    },
+
+    play(name) {
+        if (!this.shouldPlay()) return;
+        const now = Date.now();
+        if (this.lastPlayedAt[name] && now - this.lastPlayedAt[name] < this.cooldownMs) return;
+        this.lastPlayedAt[name] = now;
+
+        const audio = this.cache[name];
+        if (!audio) return;
+        audio.currentTime = 0;
+        audio.play().catch(() => {});
+    },
+
+    playToast(message) {
+        const normalized = String(message || '').toLowerCase();
+        if (normalized.includes('error') || normalized.includes('failed') || normalized.includes('missing') || normalized.includes('required')) {
+            this.play('error');
+        }
+    }
+};
+
 const MusicManager = {
    audio: new Audio(),
    playlist: [],
@ -316,11 +448,20 @@ const MusicManager = {
        }
        
        const slider = document.getElementById('volume-slider');
+        const percentText = document.getElementById('volume-percent');
+        const updatePercent = () => {
+            if (percentText) {
+                percentText.textContent = Math.round(this.audio.volume * 100) + "%";
+            }
+        };
+
        if (slider) {
            slider.value = this.audio.volume;
+            updatePercent();
            slider.oninput = async () => {
                this.audio.volume = slider.value;
-                await Store.set('legacy_music_volume', this.audio.volume);
+                updatePercent();
+                await Store.set('legacy_music_volume', parseFloat(slider.value));
            };
        }
    },
@ -425,6 +566,7 @@ async function migrateLegacyConfig() {
            ip: ip,
            port: port,
            isServer: isServer,
+            fullscreen: false,
            compatLayer: compat,
            installPath: installDir,
            installedTag: installedTag
@ -442,6 +584,95 @@ async function migrateLegacyConfig() {
    currentInstance = instances.find(i => i.id === currentInstanceId) || instances[0];
 }

+function isSteamDeckEnvironment() {
+    if (process.platform !== 'linux') return false;
+
+    const env = process.env || {};
+    if (env.STEAMDECK === '1' || env.SteamDeck === '1') return true;
+
+    try {
+        const osRelease = fs.readFileSync('/etc/os-release', 'utf8').toLowerCase();
+        if (osRelease.includes('steamos') || osRelease.includes('steam deck')) return true;
+    } catch (_) {}
+
+    return false;
+}
+
+function focusPrimaryPlayButton() {
+    const classicPlayBtn = document.getElementById('classic-btn-play');
+    const mainPlayBtn = document.getElementById('btn-play-main');
+    const target = (classicPlayBtn && classicPlayBtn.offsetParent !== null) ? classicPlayBtn : mainPlayBtn;
+    if (!target) return;
+
+    target.focus();
+    target.classList.add('controller-active');
+    setTimeout(() => target.classList.remove('controller-active'), 180);
+}
+
+function syncRepoPresetFromInput() {
+    const presetSelect = document.getElementById('repo-preset-select');
+    const repoInput = document.getElementById('repo-input');
+    if (!presetSelect || !repoInput) return;
+
+    if (repoInput.value.trim() === REPO_PRESETS.default) presetSelect.value = REPO_PRESETS.default;
+    else if (repoInput.value.trim() === REPO_PRESETS.noWatermark) presetSelect.value = REPO_PRESETS.noWatermark;
+    else presetSelect.value = 'custom';
+}
+
+function applyRepoPreset() {
+    const presetSelect = document.getElementById('repo-preset-select');
+    const repoInput = document.getElementById('repo-input');
+    if (!presetSelect || !repoInput) return;
+    if (presetSelect.value === 'custom') return;
+    repoInput.value = presetSelect.value;
+}
+
+
+function applyControllerLayoutPresetState(layoutMode = 'auto') {
+    const presets = document.querySelectorAll('.controller-layout-preset');
+    const activeLayout = layoutMode === 'nintendo' ? 'nintendo' : 'xbox';
+    presets.forEach((preset) => {
+        const isActive = preset.dataset.layout === activeLayout;
+        preset.classList.toggle('active', isActive);
+        preset.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+    });
+}
+
+function initControllerLayoutPresets() {
+    const layoutSelect = document.getElementById('controller-layout-select');
+    if (!layoutSelect) return;
+
+    const presets = document.querySelectorAll('.controller-layout-preset');
+    presets.forEach((preset) => {
+        const pressOn = () => preset.classList.add('is-pressed');
+        const pressOff = () => preset.classList.remove('is-pressed');
+
+        preset.addEventListener('pointerdown', pressOn);
+        preset.addEventListener('pointerup', pressOff);
+        preset.addEventListener('pointerleave', pressOff);
+        preset.addEventListener('blur', pressOff);
+
+        preset.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') pressOn();
+        });
+        preset.addEventListener('keyup', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') pressOff();
+        });
+
+        preset.addEventListener('click', () => {
+            const selectedLayout = preset.dataset.layout || 'xbox';
+            layoutSelect.value = selectedLayout;
+            applyControllerLayoutPresetState(selectedLayout);
+        });
+    });
+
+    layoutSelect.addEventListener('change', () => {
+        applyControllerLayoutPresetState(layoutSelect.value || 'auto');
+    });
+
+    applyControllerLayoutPresetState(layoutSelect.value || 'auto');
+}
+
 window.onload = async () => {
    try {
        await migrateLegacyConfig();
@ -453,14 +684,23 @@ window.onload = async () => {
        const portInput = document.getElementById('port-input');
        const serverCheck = document.getElementById('server-checkbox');
        const installInput = document.getElementById('install-path-input');
+        const controllerLayoutSelect = document.getElementById('controller-layout-select');

-        if (repoInput) repoInput.value = currentInstance.repo;
+        if (repoInput) {
+            repoInput.value = currentInstance.repo;
+            repoInput.addEventListener('input', syncRepoPresetFromInput);
+        }
        if (execInput) execInput.value = currentInstance.execPath;
        if (usernameInput) usernameInput.value = await Store.get('legacy_username', "");
        if (ipInput) ipInput.value = currentInstance.ip;
        if (portInput) portInput.value = currentInstance.port;
        if (serverCheck) serverCheck.checked = currentInstance.isServer;
+        const fullscreenCheck = document.getElementById('fullscreen-checkbox');
+        if (fullscreenCheck) fullscreenCheck.checked = currentInstance.fullscreen || false;
        if (installInput) installInput.value = currentInstance.installPath;
+        if (controllerLayoutSelect) controllerLayoutSelect.value = await Store.get('legacy_controller_layout_mode', 'auto');
+        initControllerLayoutPresets();
+        syncRepoPresetFromInput();
        
        if (process.platform === 'linux' || process.platform === 'darwin') {
            const compatContainer = document.getElementById('compat-option-container');
@ -480,16 +720,52 @@ window.onload = async () => {

        // Initialize features
        await loadTheme();
+        await loadSteamDeckMode();
+        await loadControllerLayoutMode();
        fetchGitHubData();
        checkForLauncherUpdates();
        loadSplashText();
        MusicManager.init();
        GamepadManager.init();
+        UiSoundManager.init();

-        window.addEventListener('keydown', (e) => {
+        if (isSteamDeckEnvironment()) {
+            ipcRenderer.send('window-set-fullscreen', true);
+            setTimeout(() => focusPrimaryPlayButton(), 150);
+        }
+
+        async function takeScreenshot() {
+            try {
+                const filePath = await ipcRenderer.invoke('take-screenshot');
+                showToast(`Screenshot saved to: ${path.basename(filePath)}`);
+                UiSoundManager.play('select');
+                
+                // Refresh gallery if it is visible
+                const galleryModal = document.getElementById('gallery-modal');
+                if (galleryModal && galleryModal.style.display === 'flex') {
+                    renderGallery();
+                }
+            } catch (err) {
+                console.error("Screenshot error:", err);
+                showToast("Failed to take screenshot.");
+            }
+        }
+
+        ipcRenderer.on('trigger-screenshot', () => {
+            takeScreenshot();
+        });
+
+        window.addEventListener('keydown', async (e) => {
+            if (e.key === 'F2') {
+                takeScreenshot();
+            }
            if (e.key === 'F9') {
                checkForLauncherUpdates(true);
            }
+            if (e.key === 'F11') {
+                e.preventDefault();
+                ipcRenderer.send('window-fullscreen');
+            }
        });

        window.addEventListener('online', () => {
@ -528,8 +804,10 @@ async function toggleInstances(show) {
        document.activeElement?.blur();
        modal.style.display = 'flex';
        modal.style.opacity = '1';
+        UiSoundManager.play('popupOpen');
    } else {
        modal.style.opacity = '0';
+        UiSoundManager.play('popupClose');
        setTimeout(() => modal.style.display = 'none', 300);
    }
 }
@ -574,8 +852,10 @@ function toggleAddInstance(show) {
        document.getElementById('new-instance-repo').value = DEFAULT_REPO;
        modal.style.display = 'flex';
        modal.style.opacity = '1';
+        UiSoundManager.play('popupOpen');
    } else {
        modal.style.opacity = '0';
+        UiSoundManager.play('popupClose');
        setTimeout(() => modal.style.display = 'none', 300);
    }
 }
@ -605,6 +885,7 @@ async function saveNewInstance() {
        ip: "",
        port: "",
        isServer: false,
+        fullscreen: false,
        compatLayer: 'direct',
        installPath: installPath,
        installedTag: null
@ -625,10 +906,13 @@ async function switchInstance(id) {
    await saveInstancesToStore();
    
    document.getElementById('repo-input').value = currentInstance.repo;
+    syncRepoPresetFromInput();
    document.getElementById('exec-input').value = currentInstance.execPath;
    document.getElementById('ip-input').value = currentInstance.ip;
    document.getElementById('port-input').value = currentInstance.port;
    document.getElementById('server-checkbox').checked = currentInstance.isServer;
+    const fullscreenCheck = document.getElementById('fullscreen-checkbox');
+    if (fullscreenCheck) fullscreenCheck.checked = currentInstance.fullscreen || false;
    document.getElementById('install-path-input').value = currentInstance.installPath;
    
    if (process.platform === 'linux' || process.platform === 'darwin') {
@ -665,6 +949,85 @@ async function browseInstallDir() {
    }
 }

+async function openScreenshotsGallery() {
+    await toggleGallery(true);
+}
+
+async function toggleGallery(show) {
+    const modal = document.getElementById('gallery-modal');
+    if (show) {
+        await renderGallery();
+        modal.style.display = 'flex';
+        modal.style.opacity = '1';
+        UiSoundManager.play('popupOpen');
+    } else {
+        modal.style.opacity = '0';
+        UiSoundManager.play('popupClose');
+        setTimeout(() => modal.style.display = 'none', 300);
+    }
+}
+
+async function renderGallery() {
+    const container = document.getElementById('gallery-container');
+    container.innerHTML = '<div class="gallery-empty">LOADING...</div>';
+    
+    try {
+        const screenshots = await ipcRenderer.invoke('list-screenshots');
+        container.innerHTML = '';
+
+        if (screenshots.length === 0) {
+            container.innerHTML = `
+                <div class="gallery-empty">
+                    <p>NO SCREENSHOTS FOUND</p>
+                    <p style="font-size: 14px; margin-top: 10px;">PRESS F2 TO TAKE ONE!</p>
+                </div>
+            `;
+            return;
+        }
+
+        screenshots.forEach(ss => {
+            const item = document.createElement('div');
+            item.className = 'gallery-item nav-item';
+            item.tabIndex = 0;
+            item.innerHTML = `
+                <img src="${ss.path}?t=${Date.now()}" class="gallery-thumb" alt="${ss.name}" onerror="this.src='assets/minecraft.jpg'">
+                <div class="gallery-item-actions">
+                    <div class="gallery-action-btn" onclick="viewScreenshot('${ss.path.replace(/\\/g, '/')}')">VIEW</div>
+                    <div class="gallery-action-btn delete" onclick="deleteScreenshot('${ss.name}')">DELETE</div>
+                </div>
+            `;
+            item.onkeydown = (e) => {
+                if (e.key === 'Enter' || e.key === ' ') viewScreenshot(ss.path);
+                if (e.key === 'Delete') deleteScreenshot(ss.name);
+            };
+            container.appendChild(item);
+        });
+    } catch (err) {
+        console.error("Gallery render error:", err);
+        container.innerHTML = '<div class="gallery-empty" style="color: #ff5555;">ERROR LOADING GALLERY</div>';
+    }
+}
+
+async function deleteScreenshot(fileName) {
+    if (confirm(`Are you sure you want to delete this screenshot?`)) {
+        const success = await ipcRenderer.invoke('delete-screenshot', fileName);
+        if (success) {
+            showToast("Screenshot deleted.");
+            renderGallery();
+        } else {
+            showToast("Failed to delete screenshot.");
+        }
+    }
+}
+
+function viewScreenshot(path) {
+    shell.openPath(path);
+}
+
+async function openScreenshotsDir() {
+    ipcRenderer.invoke('open-screenshots-dir');
+}
+
 async function openGameDir() {
    const dir = await getInstallDir();
    if (fs.existsSync(dir)) {
@ -726,6 +1089,7 @@ async function updatePlayButtonText() {
 function setGameRunning(running) {
    isGameRunning = running;
    updatePlayButtonText();
+    ipcRenderer.send('game-running-state', running);
 }

 async function monitorProcess(proc) {
@ -767,7 +1131,11 @@ async function fetchGitHubData() {
    const offlineInd = document.getElementById('offline-indicator');

    if (loader) loader.style.display = 'flex';
-    if (loaderText) loaderText.textContent = "SYNCING: " + repo;
+    if (loaderText) {
+        const loaderLabel = document.getElementById('loader-text-label');
+        if (loaderLabel) loaderLabel.textContent = "SYNCING: " + repo;
+        else loaderText.textContent = "SYNCING: " + repo;
+    }

    const hideLoader = () => {
        if (loader) {
@ -950,8 +1318,10 @@ async function promptUpdate(newTag) {
        document.activeElement?.blur();
        modal.style.display = 'flex';
        modal.style.opacity = '1';
+        UiSoundManager.play('popupOpen');
        const cleanup = (result) => {
            modal.style.opacity = '0';
+            UiSoundManager.play('popupClose');
            setTimeout(() => {
                modal.style.display = 'none';
                if (modalText) modalText.style.display = 'none';
@ -1003,9 +1373,11 @@ async function launchLocalClient() {
        const ip = currentInstance.ip;
        const port = currentInstance.port;
        const isServer = currentInstance.isServer;
+        const fullscreen = currentInstance.fullscreen;
        let args = [];
        if (username) args.push("-name", username);
        if (isServer) args.push("-server");
+        if (fullscreen) args.push("-fullscreen");
        if (ip) args.push("-ip", ip);
        if (port) args.push("-port", port);
        const argString = args.map(a => `"${a}"`).join(" ");
@ -1056,8 +1428,29 @@ function setProcessingState(active) {
 function updateProgress(percent, text) {
    const bar = document.getElementById('progress-bar-fill');
    if (bar) bar.style.width = percent + "%";
+
+    const label = document.getElementById('progress-text-label');
+    const dots = document.getElementById('progress-dots');
+    const suffix = document.getElementById('progress-text-suffix');
    const txt = document.getElementById('progress-text');
-    if (text && txt) txt.textContent = text;
+
+    if (!text) return;
+
+    if (label && dots && suffix) {
+        const match = text.match(/^(Downloading)(?:\.{0,3})?(.*)$/i);
+        if (match) {
+            label.textContent = match[1];
+            suffix.textContent = match[2] || '';
+            dots.classList.add('animate');
+            return;
+        }
+        label.textContent = text;
+        suffix.textContent = '';
+        dots.classList.remove('animate');
+        return;
+    }
+
+    if (txt) txt.textContent = text;
 }

 async function handleElectronFlow(url) {
@ -1135,30 +1528,41 @@ function downloadFile(url, destPath) {
    });
 }

-function toggleOptions(show) {
+async function toggleOptions(show) {
    if (isProcessing) return;
    const modal = document.getElementById('options-modal');
    if (show) {
        // Sync classic theme checkbox to current state
        const cb = document.getElementById('classic-theme-checkbox');
        if (cb) cb.checked = document.body.classList.contains('classic-theme');
+        const steamDeckCb = document.getElementById('steamdeck-mode-checkbox');
+        if (steamDeckCb) steamDeckCb.checked = document.body.classList.contains('steamdeck-mode');
+        const layoutSelect = document.getElementById('controller-layout-select');
+        if (layoutSelect) {
+            const savedLayoutMode = await Store.get('legacy_controller_layout_mode', 'auto');
+            layoutSelect.value = savedLayoutMode;
+            GamepadManager.setControlLayoutMode(savedLayoutMode);
+            applyControllerLayoutPresetState(savedLayoutMode);
+        }
+        syncRepoPresetFromInput();
        document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1';
+        UiSoundManager.play('popupOpen');
    }
-    else { modal.style.opacity = '0'; setTimeout(() => modal.style.display = 'none', 300); }
+    else { modal.style.opacity = '0'; UiSoundManager.play('popupClose'); setTimeout(() => modal.style.display = 'none', 300); }
 }

 async function toggleProfile(show) {
    if (isProcessing) return;
    const modal = document.getElementById('profile-modal');
-    if (show) { await updatePlaytimeDisplay(); document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1'; }
-    else { modal.style.opacity = '0'; setTimeout(() => modal.style.display = 'none', 300); }
+    if (show) { await updatePlaytimeDisplay(); document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1'; UiSoundManager.play('popupOpen'); }
+    else { modal.style.opacity = '0'; UiSoundManager.play('popupClose'); setTimeout(() => modal.style.display = 'none', 300); }
 }

 async function toggleServers(show) {
    if (isProcessing) return;
    const modal = document.getElementById('servers-modal');
-    if (show) { await loadServers(); document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1'; }
-    else { modal.style.opacity = '0'; setTimeout(() => modal.style.display = 'none', 300); }
+    if (show) { await loadServers(); document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1'; UiSoundManager.play('popupOpen'); }
+    else { modal.style.opacity = '0'; UiSoundManager.play('popupClose'); setTimeout(() => modal.style.display = 'none', 300); }
 }

 async function getServersFilePath() { return path.join(currentInstance.installPath, 'servers.txt'); }
@ -1233,6 +1637,7 @@ async function saveOptions() {
    const ip = document.getElementById('ip-input').value.trim();
    const port = document.getElementById('port-input').value.trim();
    const isServer = document.getElementById('server-checkbox').checked;
+    const fullscreen = document.getElementById('fullscreen-checkbox')?.checked || false;
    const customProtonPath = document.getElementById('custom-proton-path').value.trim();
    const newInstallPath = document.getElementById('install-path-input').value.trim();
    const oldInstallPath = currentInstance.installPath;
@ -1249,14 +1654,23 @@ async function saveOptions() {
    }
    if (newRepo) currentInstance.repo = newRepo;
    if (newExec) currentInstance.execPath = newExec;
-    currentInstance.ip = ip; currentInstance.port = port; currentInstance.isServer = isServer;
+    currentInstance.ip = ip; currentInstance.port = port; 
+    currentInstance.isServer = isServer;
+    currentInstance.fullscreen = fullscreen;
    if (compatSelect) {
        currentInstance.compatLayer = compatSelect.value;
        currentInstance.customCompatPath = customProtonPath;
    }
    const isClassic = document.getElementById('classic-theme-checkbox')?.checked || false;
+    const isSteamDeckMode = document.getElementById('steamdeck-mode-checkbox')?.checked || false;
+    const controllerLayoutMode = document.getElementById('controller-layout-select')?.value || 'auto';
    await Store.set('legacy_classic_theme', isClassic);
+    await Store.set('legacy_steamdeck_mode', isSteamDeckMode);
+    await Store.set('legacy_controller_layout_mode', controllerLayoutMode);
+    GamepadManager.setControlLayoutMode(controllerLayoutMode);
+    applyControllerLayoutPresetState(controllerLayoutMode);
    applyTheme(isClassic);
+    applySteamDeckMode(isSteamDeckMode);
    await saveInstancesToStore(); toggleOptions(false); fetchGitHubData(); updatePlayButtonText(); showToast("Settings Saved");
 }

@ -1272,6 +1686,7 @@ async function saveProfile() {

 function showToast(msg) {
    const t = document.getElementById('toast'); if (!t) return;
+    UiSoundManager.playToast(msg);
    t.textContent = msg; t.style.display = 'block'; t.style.animation = 'none'; t.offsetHeight; t.style.animation = 'slideUp 0.3s ease-out';
    setTimeout(() => { t.style.display = 'none'; }, 3000);
 }
@ -1282,20 +1697,81 @@ function scanCompatibilityLayers() {
    const select = document.getElementById('compat-select'); if (!select) return;
    const savedValue = currentInstance.compatLayer;
    const layers = [{ name: 'Default (Direct)', cmd: 'direct' }, { name: 'Wine64', cmd: 'wine64' }, { name: 'Wine', cmd: 'wine' }];
-    
-    // Add custom option
-    layers.push({ name: 'Custom (Linux)', cmd: 'custom' });
-    
-    const homeDir = require('os').homedir(); let steamPaths = [];
-    if (process.platform === 'linux') steamPaths = [path.join(homeDir, '.steam', 'steam', 'steamapps', 'common'), path.join(homeDir, '.local', 'share', 'Steam', 'steamapps', 'common'), path.join(homeDir, '.var', 'app', 'com.valvesoftware.Steam', 'data', 'Steam', 'steamapps', 'common')];
-    else if (process.platform === 'darwin') steamPaths = [path.join(homeDir, 'Library', 'Application Support', 'Steam', 'steamapps', 'common')];
-    for (const steamPath of steamPaths) {
-        if (fs.existsSync(steamPath)) { try { const dirs = fs.readdirSync(steamPath); dirs.filter(d => d.startsWith('Proton') || d.includes('Wine') || d.includes('CrossOver')).forEach(d => { const protonPath = path.join(steamPath, d, 'proton'); if (fs.existsSync(protonPath)) layers.push({ name: d, cmd: protonPath }); }); } catch (e) {} }
+
+    const seen = new Set(layers.map(l => l.cmd));
+    const foundProtonLayers = [];
+    const addLayer = (name, cmd) => {
+        if (!name || !cmd || seen.has(cmd)) return;
+        seen.add(cmd);
+        foundProtonLayers.push({ name, cmd });
+    };
+
+    const homeDir = require('os').homedir();
+    const protonCandidates = [];
+
+    if (process.platform === 'linux') {
+        const steamRoots = [
+            path.join(homeDir, '.steam', 'steam'),
+            path.join(homeDir, '.local', 'share', 'Steam'),
+            path.join(homeDir, '.var', 'app', 'com.valvesoftware.Steam', 'data', 'Steam')
+        ];
+
+        steamRoots.forEach((root) => {
+            protonCandidates.push(path.join(root, 'steamapps', 'common'));
+            protonCandidates.push(path.join(root, 'compatibilitytools.d'));
+        });
+    } else if (process.platform === 'darwin') {
+        protonCandidates.push(path.join(homeDir, 'Library', 'Application Support', 'Steam', 'steamapps', 'common'));
+        protonCandidates.push(path.join(homeDir, 'Library', 'Application Support', 'Steam', 'compatibilitytools.d'));
    }
+
+    const toolNameMatches = (dir) => {
+        const n = dir.toLowerCase();
+        return n.startsWith('proton') || n.startsWith('ge-proton') || n.includes('proton-ge') || n.includes('wine') || n.includes('crossover') || n.includes('umu-proton');
+    };
+
+    for (const basePath of protonCandidates) {
+        if (!fs.existsSync(basePath)) continue;
+        try {
+            const dirs = fs.readdirSync(basePath);
+            dirs.forEach((dirName) => {
+                if (!toolNameMatches(dirName)) return;
+                const protonPath = path.join(basePath, dirName, 'proton');
+                if (fs.existsSync(protonPath)) addLayer(dirName, protonPath);
+            });
+        } catch (e) {
+            console.error('Compatibility scan error:', e.message);
+        }
+    }
+
+    foundProtonLayers.sort((a, b) => {
+        const aGe = /(^|\b)(ge-proton|proton-ge|umu-proton)/i.test(a.name) ? 1 : 0;
+        const bGe = /(^|\b)(ge-proton|proton-ge|umu-proton)/i.test(b.name) ? 1 : 0;
+        if (aGe !== bGe) return bGe - aGe;
+        return b.name.localeCompare(a.name, undefined, { numeric: true, sensitivity: 'base' });
+    });
+
+    layers.push(...foundProtonLayers);
+
+    // Add custom option at end so discovered runtimes are easier to browse first.
+    layers.push({ name: 'Custom (Linux)', cmd: 'custom' });
+
    select.innerHTML = '';
-    layers.forEach(l => { const opt = document.createElement('option'); opt.value = l.cmd; opt.textContent = l.name; select.appendChild(opt); if (l.cmd === savedValue) opt.selected = true; });
+    layers.forEach(l => {
+        const opt = document.createElement('option');
+        opt.value = l.cmd;
+        opt.textContent = l.name;
+        select.appendChild(opt);
+        if (l.cmd === savedValue) opt.selected = true;
+    });
+
+    // If no saved compat layer or still on direct, prefer the newest detected GE/Proton on Linux.
+    if (process.platform === 'linux' && (savedValue === 'direct' || !savedValue) && foundProtonLayers.length > 0) {
+        select.value = foundProtonLayers[0].cmd;
+    }
+
    updateCompatDisplay();
-    
+
    const customPathInput = document.getElementById('custom-proton-path');
    if (customPathInput) customPathInput.value = currentInstance.customCompatPath || "";
 }
@ -1363,8 +1839,9 @@ async function promptLauncherUpdate(version, changelog) {
            modalText.style.display = 'block';
        }
        document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1';
+        UiSoundManager.play('popupOpen');
        const cleanup = (result) => {
-            modal.style.opacity = '0'; setTimeout(() => { modal.style.display = 'none'; if (modalText) modalText.style.display = 'none'; }, 300);
+            modal.style.opacity = '0'; UiSoundManager.play('popupClose'); setTimeout(() => { modal.style.display = 'none'; if (modalText) modalText.style.display = 'none'; }, 300);
            confirmBtn.onclick = null; skipBtn.onclick = null; closeBtn.onclick = null; resolve(result);
        };
        confirmBtn.onclick = () => cleanup(true); skipBtn.onclick = () => cleanup(false); closeBtn.onclick = () => cleanup(false);
@ -1418,12 +1895,36 @@ async function loadSplashText() {
 // ============================================================

 async function loadTheme() {
-    const isClassic = await Store.get('legacy_classic_theme', false);
+    // Force default UI on startup
+    const isClassic = false;
    const cb = document.getElementById('classic-theme-checkbox');
    if (cb) cb.checked = isClassic;
    applyTheme(isClassic);
 }

+async function loadSteamDeckMode() {
+    const autoSteamDeck = isSteamDeckEnvironment();
+    const saved = await Store.get('legacy_steamdeck_mode', null);
+    const enabled = saved === null ? autoSteamDeck : saved;
+    const cb = document.getElementById('steamdeck-mode-checkbox');
+    if (cb) cb.checked = enabled;
+    applySteamDeckMode(enabled);
+}
+
+async function loadControllerLayoutMode() {
+    const mode = await Store.get('legacy_controller_layout_mode', 'auto');
+    GamepadManager.setControlLayoutMode(mode);
+    const select = document.getElementById('controller-layout-select');
+    if (select) {
+        select.value = mode;
+        applyControllerLayoutPresetState(mode);
+    }
+}
+
+function applySteamDeckMode(enabled) {
+    document.body.classList.toggle('steamdeck-mode', !!enabled);
+}
+
 function applyTheme(isClassic) {
    document.body.classList.toggle('classic-theme', isClassic);
    if (isClassic) {
@ -1475,8 +1976,10 @@ async function toggleSnapshots(show, id = null) {
        document.activeElement?.blur();
        modal.style.display = 'flex';
        modal.style.opacity = '1';
+        UiSoundManager.play('popupOpen');
    } else {
        modal.style.opacity = '0';
+        UiSoundManager.play('popupClose');
        setTimeout(() => modal.style.display = 'none', 300);
    }
 }
@ -1632,6 +2135,7 @@ window.checkForUpdatesManual = checkForUpdatesManual;
 window.browseInstallDir = browseInstallDir;
 window.openGameDir = openGameDir;
 window.toggleMusic = toggleMusic;
+window.applyRepoPreset = applyRepoPreset;
 window.getInstallDir = getInstallDir;
 window.showToast = showToast;
 window.toggleInstances = toggleInstances;
--- a/skin_manager.js
+++ b/skin_manager.js
@ -3,6 +3,7 @@

 let mainMenuScene, mainMenuCamera, mainMenuRenderer, mainMenuPlayerGroup;
 let isMainSkinDragging = false;
+let mainMenuSkinRenderMode = '3d';

 let skinScene, skinCamera, skinRenderer, skinPlayerGroup;
 let isSkinDragging = false;
@ -19,6 +20,13 @@ document.addEventListener('DOMContentLoaded', () => {
    if (skinInput) skinInput.addEventListener('change', (e) => handleSkinFile(e.target.files[0]));
    
    if (dropZone) {
+        dropZone.addEventListener('click', () => skinInput?.click());
+        dropZone.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                skinInput?.click();
+            }
+        });
        dropZone.addEventListener('dragover', (e) => { 
            e.preventDefault(); 
            dropZone.classList.add('border-green-500'); 
@ -68,12 +76,13 @@ function initMainMenuSkinViewer() {
    // Interaction for Main Menu Viewer
    let prevX = 0;
    container.addEventListener('mousedown', (e) => {
+        if (mainMenuSkinRenderMode !== '3d') return;
        isMainSkinDragging = true;
        prevX = e.clientX;
    });
    window.addEventListener('mouseup', () => isMainSkinDragging = false);
    window.addEventListener('mousemove', (e) => {
-        if (isMainSkinDragging && mainMenuPlayerGroup) {
+        if (mainMenuSkinRenderMode === '3d' && isMainSkinDragging && mainMenuPlayerGroup) {
            mainMenuPlayerGroup.rotation.y += (e.clientX - prevX) * 0.01;
            prevX = e.clientX;
        }
@ -82,7 +91,9 @@ function initMainMenuSkinViewer() {
    // Auto-rotate slowly
    function animateMain() {
        requestAnimationFrame(animateMain);
-        if (!isMainSkinDragging && mainMenuPlayerGroup) mainMenuPlayerGroup.rotation.y += 0.005;
+        if (mainMenuSkinRenderMode === '3d' && !isMainSkinDragging && mainMenuPlayerGroup) {
+            mainMenuPlayerGroup.rotation.y += 0.005;
+        }
        if (mainMenuRenderer && mainMenuScene && mainMenuCamera) mainMenuRenderer.render(mainMenuScene, mainMenuCamera);
    }
    animateMain();
@ -116,7 +127,7 @@ async function loadMainMenuSkin() {
            const img = new Image();
            img.onload = () => {
                const isLegacy = img.height === 32;
-                updateSkinModel(img.src, isLegacy, mainMenuPlayerGroup);
+                updateSkinModel(img.src, isLegacy, mainMenuPlayerGroup, mainMenuSkinRenderMode);
            };
            img.src = url;
        } else {
@ -127,7 +138,25 @@ async function loadMainMenuSkin() {
    }
 }

-function updateSkinModel(dataUrl, isLegacy, targetGroup) {
+function toggleMainSkinRenderMode() {
+    mainMenuSkinRenderMode = mainMenuSkinRenderMode === '3d' ? '2d' : '3d';
+    const modeButton = document.getElementById('btn-skin-render-mode');
+    if (modeButton) modeButton.textContent = mainMenuSkinRenderMode.toUpperCase();
+
+    const container = document.getElementById('main-skin-viewer');
+    if (container) {
+        container.style.cursor = mainMenuSkinRenderMode === '3d' ? 'grab' : 'default';
+    }
+    isMainSkinDragging = false;
+
+    if (mainMenuSkinRenderMode === '2d' && mainMenuPlayerGroup) {
+        mainMenuPlayerGroup.rotation.y = 0;
+    }
+
+    loadMainMenuSkin();
+}
+
+function updateSkinModel(dataUrl, isLegacy, targetGroup, renderMode = '3d') {
    if (!targetGroup) return;

    new THREE.TextureLoader().load(dataUrl, (texture) => {
@ -171,6 +200,50 @@ function updateSkinModel(dataUrl, isLegacy, targetGroup) {
            left: [x+8, y+4, 4, 12], back: [x+12, y+4, 4, 12]
        });

+        const create2DPart = (tex, uvFront, width, height, x, y, scale = 1) => {
+            const texWidth = tex.image.width;
+            const texHeight = tex.image.height;
+            const partTex = tex.clone();
+            partTex.magFilter = THREE.NearestFilter;
+            partTex.minFilter = THREE.NearestFilter;
+            partTex.repeat.set(uvFront[2] / texWidth, uvFront[3] / texHeight);
+            partTex.offset.set(uvFront[0] / texWidth, 1 - (uvFront[1] + uvFront[3]) / texHeight);
+            partTex.needsUpdate = true;
+
+            const geometry = new THREE.PlaneGeometry(width, height);
+            const material = new THREE.MeshBasicMaterial({ map: partTex, transparent: true, alphaTest: 0.5, side: THREE.DoubleSide });
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.position.set(x, y, 0);
+            mesh.scale.set(scale, scale, 1);
+            return mesh;
+        };
+
+        if (renderMode === '2d') {
+            const frontParts = [
+                create2DPart(texture, [8, 8, 8, 8], 8, 8, 0, 10),
+                create2DPart(texture, [40, 8, 8, 8], 8, 8, 0, 10, 1.12),
+                create2DPart(texture, [20, 20, 8, 12], 8, 12, 0, 0),
+                create2DPart(texture, [44, 20, 4, 12], 4, 12, -6, 0),
+                create2DPart(texture, isLegacy ? [44, 20, 4, 12] : [36, 52, 4, 12], 4, 12, 6, 0),
+                create2DPart(texture, [4, 20, 4, 12], 4, 12, -2, -12),
+                create2DPart(texture, isLegacy ? [4, 20, 4, 12] : [20, 52, 4, 12], 4, 12, 2, -12)
+            ];
+
+            if (!isLegacy) {
+                frontParts.push(
+                    create2DPart(texture, [20, 36, 8, 12], 8, 12, 0, 0, 1.05),
+                    create2DPart(texture, [44, 36, 4, 12], 4, 12, -6, 0, 1.05),
+                    create2DPart(texture, [52, 52, 4, 12], 4, 12, 6, 0, 1.05),
+                    create2DPart(texture, [4, 36, 4, 12], 4, 12, -2, -12, 1.05),
+                    create2DPart(texture, [4, 52, 4, 12], 4, 12, 2, -12, 1.05)
+                );
+            }
+
+            frontParts.forEach((part) => targetGroup.add(part));
+            targetGroup.rotation.y = 0;
+            return;
+        }
+
        // Head
        const headUvs = { top: [8, 0, 8, 8], bottom: [16, 0, 8, 8], right: [0, 8, 8, 8], left: [16, 8, 8, 8], front: [8, 8, 8, 8], back: [24, 8, 8, 8] };
        const head = createBodyPart(8, 8, 8, texture, headUvs);
@ -211,6 +284,8 @@ function updateSkinModel(dataUrl, isLegacy, targetGroup) {
                targetGroup.add(layer);
            }
        });
+
+        targetGroup.rotation.y = 0;
    });
 }

@ -311,7 +386,7 @@ function processSkinImage(img, srcUrl, isInitialLoad = false) {
    }
    
    if (!skinScene) initPreviewEngine();
-    updateSkinModel(srcUrl, isLegacy, skinPlayerGroup);
+    updateSkinModel(srcUrl, isLegacy, skinPlayerGroup, '3d');
 }

 function initPreviewEngine() {
@ -391,3 +466,4 @@ async function saveSkinToDisk() {
 window.openSkinManager = openSkinManager;
 window.initMainMenuSkinViewer = initMainMenuSkinViewer;
 window.loadMainMenuSkin = loadMainMenuSkin;
+window.toggleMainSkinRenderMode = toggleMainSkinRenderMode;
--- a/style.css
+++ b/style.css
@ -1,6 +1,6 @@
@font-face {
    font-family: 'Minecraft';
-    src: url('Minecraft.ttf') format('truetype');
+    src: url('assets/Minecraft.ttf') format('truetype');
 }


@ -94,6 +94,15 @@ body {
    background: #c42b1c;
 }

+
+.win-btn.nav-item:focus {
+    transform: scale(1.08);
+    z-index: 1001;
+    box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,0.55) !important;
+    background: #444;
+    color: #fff;
+}
+
 .main-wrapper {
    display: flex;
    flex-grow: 1;
@ -104,15 +113,16 @@ body {

 .sidebar {
    width: 380px;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.75);
    border-right: 4px solid #000;
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    overflow-y: auto;
    z-index: 10;
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(12px);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
+    box-shadow: 10px 0 20px rgba(0,0,0,0.5);
 }

 .sidebar.collapsed {
@ -286,7 +296,7 @@ body {

 .content-area {
    flex-grow: 1;
-    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('minecraft.jpg');
+    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('assets/minecraft.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
@ -336,7 +346,7 @@ body {
    width: 500px;
    max-width: 90%;
    height: 60px;
-    background-color: var(--mc-button-bg);
+    background: linear-gradient(to bottom, #7e7e7e, #6e6e6e);
    border: 2px solid #000;
    color: #e0e0e0;
    font-size: 24px;
@ -345,33 +355,43 @@ body {
    justify-content: center;
    padding-bottom: 6px;
    cursor: pointer;
-    box-shadow: inset -3px -3px 0px #333, inset 3px 3px 0px #aaa;
+    box-shadow: inset -3px -3px 0px #333, inset 3px 3px 0px #aaa, 0 4px 6px rgba(0,0,0,0.3);
    margin-bottom: 16px;
    position: relative;
-    transition: transform(0.05s);
+    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
+    text-shadow: 2px 2px 0 #333;
 }

 .nav-item {
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    outline: none !important;
 }

 .nav-item:focus {
-    transform: scale(1.05);
+    transform: scale(1.02);
    z-index: 1000;
-    box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(255, 255, 255, 0.4) !important;
+    box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, 0.62), 0 0 20px rgba(90, 170, 255, 0.28) !important;
+    filter: brightness(1.1);
+}
+
+.nav-item:hover {
+    outline: 2px solid rgba(255,255,255,0.92) !important;
+    box-shadow: 0 0 0 1px rgba(255,255,255,0.85), 0 0 12px rgba(255, 255, 255, 0.52), 0 0 24px rgba(90, 170, 255, 0.22) !important;
 }

 .nav-item.active-bump {
-    transform: scale(0.95) !important;
-    transition: transform 0.1s !important;
+    transform: scale(0.96) !important;
+    transition: transform 0.05s !important;
+    box-shadow: inset 3px 3px 0px #333, inset -3px -3px 0px #aaa !important;
+    background: linear-gradient(to bottom, #555, #666) !important;
 }

 .btn-mc:hover:not(.disabled) {
-    background-color: var(--mc-button-hover);
+    background: linear-gradient(to bottom, #8e8e8e, #7e7e7e);
    color: #fff;
-    outline: 2px solid #fff !important;
+    outline: 2px solid rgba(255,255,255,0.95) !important;
+    box-shadow: inset -3px -3px 0px #333, inset 3px 3px 0px #aaa, 0 0 12px rgba(255,255,255,0.25);
 }

 .btn-mc.controller-active {
@ -400,6 +420,58 @@ body {
    text-shadow: 2px 2px 0 #000;
 }

+/* Steam Deck optimized mode */
+body.steamdeck-mode .title-bar {
+    height: 40px;
+}
+
+body.steamdeck-mode .title-bar-text {
+    font-size: 18px;
+}
+
+body.steamdeck-mode .btn-mc {
+    min-height: 68px;
+    font-size: 28px;
+}
+
+body.steamdeck-mode .btn-play {
+    min-height: 110px;
+    font-size: 52px;
+}
+
+body.steamdeck-mode .version-select-box {
+    height: 64px;
+    font-size: 26px;
+}
+
+body.steamdeck-mode .mc-input,
+body.steamdeck-mode #repo-preset-select,
+body.steamdeck-mode .mc-label,
+body.steamdeck-mode .classic-link {
+    font-size: 20px !important;
+}
+
+body.steamdeck-mode .nav-item:focus {
+    transform: scale(1.06);
+    box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 0 22px rgba(255,255,255,0.7), 0 0 34px rgba(90,170,255,0.36) !important;
+}
+
+
+body.steamdeck-mode .controller-layout-preset {
+    min-height: 62px;
+    font-size: 22px;
+}
+
+body.steamdeck-mode .controller-layout-icon {
+    transform: scale(1.3);
+    transform-origin: left center;
+    margin-right: 4px;
+}
+
+body.steamdeck-mode .sidebar {
+    width: 420px;
+}
+
 .version-row {
    display: flex;
    width: 500px;
@ -496,12 +568,71 @@ body {
    transition: width 0.2s ease-out;
 }

+.progress-text-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.progress-spinner {
+    width: 12px;
+    height: 12px;
+    border-width: 2px;
+    border-color: #333;
+    border-top-color: var(--mc-progress-fill);
+    margin: 0;
+    flex-shrink: 0;
+    animation-duration: 1s;
+}
+
 .progress-text {
    color: #fff;
    font-size: 20px;
    text-shadow: 2px 2px 0 #000;
-    margin-bottom: 6px;
-    text-align: center;
+    text-align: left;
+    display: inline-flex;
+    align-items: center;
+}
+
+.loading-dots {
+    display: inline-flex;
+    width: 1.8em;
+    justify-content: flex-start;
+}
+
+.loading-dots span {
+    visibility: hidden;
+}
+
+.loading-dots.animate span:nth-child(1) {
+    animation: dotCycle1 1.1s steps(1, end) infinite;
+}
+
+.loading-dots.animate span:nth-child(2) {
+    animation: dotCycle2 1.1s steps(1, end) infinite;
+}
+
+.loading-dots.animate span:nth-child(3) {
+    animation: dotCycle3 1.1s steps(1, end) infinite;
+}
+
+@keyframes dotCycle1 {
+    0%, 49% { visibility: hidden; }
+    50%, 100% { visibility: visible; }
+}
+
+@keyframes dotCycle2 {
+    0%, 32% { visibility: hidden; }
+    33%, 66% { visibility: visible; }
+    67%, 100% { visibility: hidden; }
+}
+
+@keyframes dotCycle3 {
+    0%, 16% { visibility: hidden; }
+    17%, 82% { visibility: visible; }
+    83%, 100% { visibility: hidden; }
 }

 .modal-overlay {
@ -520,14 +651,14 @@ body {
    max-width: 850px;
    min-width: 600px;
    max-height: 85vh;
-    background: var(--mc-gui-bg);
+    background: #c6c6c6;
    border: 4px solid #000;
    padding: clamp(20px, 4vw, 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
-    box-shadow: inset 4px 4px 0 #fff;
-    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: inset 4px 4px 0 #fff, inset -4px -4px 0 #555, 0 20px 50px rgba(0,0,0,0.8);
+    animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow-y: auto;
 }
@ -608,11 +739,100 @@ body {
    padding: 12px;
    font-size: 22px;
    outline: none;
-    transition: border-color 0.2s;
+    transition: all 0.2s;
+    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
 }

 .mc-input:focus, .mc-input.focused {
    border-color: #fff !important;
+    background: #111;
+    box-shadow: 0 0 10px rgba(255,255,255,0.2), inset 2px 2px 5px rgba(0,0,0,0.5);
+}
+
+
+.controller-layout-presets {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    margin-top: 12px;
+}
+
+.controller-layout-preset {
+    width: 100%;
+    min-height: 52px;
+    border: 2px solid #555;
+    background: #0a0a0a;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 19px;
+    text-align: left;
+}
+
+.controller-layout-preset:hover,
+.controller-layout-preset:focus {
+    border-color: #fff;
+}
+
+.controller-layout-preset.active {
+    border-color: #55ff55;
+    box-shadow: inset 0 0 0 1px #55ff55;
+    background: #111;
+}
+
+.controller-layout-icon {
+    --sprite-x: -51px;
+    --sprite-y: -531px;
+    --sprite-w: 26px;
+    --sprite-h: 26px;
+    --sprite-pressed-x: -51px;
+    --sprite-pressed-y: -563px;
+    width: var(--sprite-w);
+    height: var(--sprite-h);
+    flex: 0 0 var(--sprite-w);
+    display: inline-block;
+    overflow: hidden;
+    image-rendering: pixelated;
+    background-repeat: no-repeat;
+    background-size: 560px 640px;
+    background-position: var(--sprite-x) var(--sprite-y);
+}
+
+.controller-layout-preset:hover .controller-layout-icon,
+.controller-layout-preset:focus .controller-layout-icon,
+.controller-layout-preset.active .controller-layout-icon,
+.controller-layout-preset.is-pressed .controller-layout-icon {
+    background-position: var(--sprite-pressed-x) var(--sprite-pressed-y);
+}
+
+.controller-layout-icon-xbox {
+    background-image: url('assets/gdb-xbox-2.png');
+    /* action_button_189 (idle) + action_button_228 (pressed) from spritesheet JSON */
+    --sprite-x: -51px;
+    --sprite-y: -531px;
+    --sprite-w: 26px;
+    --sprite-h: 26px;
+    --sprite-pressed-x: -51px;
+    --sprite-pressed-y: -563px;
+}
+
+.controller-layout-icon-switch {
+    background-image: url('assets/gdb-switch-2.png');
+    /* Switch sheet uses the same atlas layout coordinates */
+    --sprite-x: -51px;
+    --sprite-y: -531px;
+    --sprite-w: 26px;
+    --sprite-h: 26px;
+    --sprite-pressed-x: -51px;
+    --sprite-pressed-y: -563px;
+}
+
+.controller-layout-text {
+    line-height: 1.2;
 }

 #server-checkbox.focused {
@ -630,7 +850,7 @@ body {
    color: white;
    font-size: 36px;
    z-index: 2000;
-    background-image: url('minecraft.jpg');
+    background-image: url('assets/minecraft.jpg');
    background-size: cover;
    background-position: center;
 }
@ -642,12 +862,18 @@ body {
    background: rgba(0,0,0,0.8);
 }

+
 .loader-content {
    position: relative;
    z-index: 1;
    text-align: center;
 }

+#loader-text {
+    display: inline-flex;
+    align-items: center;
+}
+
 .loader-spinner {
    width: 80px;
    height: 80px;
@ -718,6 +944,25 @@ select.hidden-select {
    opacity: 0;
    cursor: pointer;
    width: 100%;
+    /* Fix for Linux contrast issues in native dropdowns */
+    background-color: #1a1a1a !important;
+    color: #ffffff !important;
+}
+
+select.hidden-select option {
+    background-color: #1a1a1a !important;
+    color: #ffffff !important;
+}
+
+/* Ensure all select elements have good contrast on Linux */
+select.mc-input {
+    background-color: #000000 !important;
+    color: #ffffff !important;
+}
+
+select.mc-input option {
+    background-color: #1a1a1a !important;
+    color: #ffffff !important;
 }

 ::-webkit-scrollbar {
@ -739,6 +984,135 @@ select.hidden-select {
    background: #7e7e7e;
 }

+/* --- Minecraft Style Slider --- */
+.mc-slider-container {
+    position: relative;
+    width: 100%;
+    height: 44px;
+    background: #000;
+    border: 2px solid #555;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mc-slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    outline: none;
+    position: relative;
+    z-index: 2;
+    cursor: pointer;
+    margin: 0;
+}
+
+.mc-slider::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+}
+
+.mc-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 100%;
+    background: #6e6e6e;
+    border: 2px solid #fff;
+    box-shadow: inset -2px -2px 0 #333, inset 2px 2px 0 #aaa;
+}
+
+.mc-slider:focus::-webkit-slider-thumb {
+    background: #7e7e7e;
+    box-shadow: inset -2px -2px 0 #333, inset 2px 2px 0 #aaa, 0 0 8px #fff;
+}
+
+.mc-slider-percent {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 20px;
+    text-shadow: 2px 2px 0 #000;
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* --- Screenshots Gallery --- */
+.gallery-item {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    background: #111;
+    border: 2px solid #444;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.gallery-item:hover, .gallery-item:focus {
+    border-color: #fff;
+    transform: scale(1.02);
+    z-index: 10;
+    box-shadow: 0 0 15px rgba(255,255,255,0.2);
+}
+
+.gallery-thumb {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    image-rendering: auto;
+}
+
+.gallery-item-actions {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,0.8);
+    display: flex;
+    justify-content: space-around;
+    padding: 4px;
+    transform: translateY(100%);
+    transition: transform 0.2s;
+}
+
+.gallery-item:hover .gallery-item-actions,
+.gallery-item:focus .gallery-item-actions {
+    transform: translateY(0);
+}
+
+.gallery-action-btn {
+    color: #fff;
+    font-size: 14px;
+    padding: 2px 8px;
+    cursor: pointer;
+    text-transform: uppercase;
+}
+
+.gallery-action-btn:hover {
+    color: #55ff55;
+    text-shadow: 0 0 5px rgba(85,255,85,0.5);
+}
+
+.gallery-action-btn.delete:hover {
+    color: #ff5555;
+    text-shadow: 0 0 5px rgba(255,85,85,0.5);
+}
+
+.gallery-empty {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+    color: #888;
+    font-size: 24px;
+}
+
 /* ============================================================
   CLASSIC MINECRAFT LAUNCHER THEME
   Applied when <body class="classic-theme"> is set
@ -1024,3 +1398,27 @@ body.classic-theme .sidebar-title {
 body.classic-theme .music-btn {
    bottom: 92px;
 }
+
+.skin-action-row {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+}
+
+.skin-action-btn {
+    height: 48px !important;
+    margin-bottom: 0 !important;
+}
+
+.skin-action-btn-main {
+    width: 250px;
+    font-size: 20px;
+    border-right-width: 1px;
+}
+
+.skin-action-btn-mode {
+    width: 64px;
+    font-size: 20px;
+    border-left-width: 1px;
+    margin-left: -2px;
+}
Author	SHA1	Message	Date
gardenGnostic	a42c1a9b0b	Merge pull request #254 from Ratintosh/assets-refactor Move static assets into assets/ directory	2026-04-17 17:32:10 +02:00
Ratintosh	cb4c62aff2	Moved images and audio into assets folder, updated paths accordingly	2026-03-27 01:02:44 -04:00
gardenGnostic	e733a250ec	Update README.md	2026-03-16 14:41:09 +01:00
gardenGnostic	aa7c257553	Merge pull request #209 from nothingman4ik/feat-fullscreen-new feat: add fullscreen launch option to new version	2026-03-14 13:30:57 +01:00
nothingman4ik	3e094c6a1d	feat: add fullscreen launch option to new version	2026-03-14 14:18:13 +02:00
gardenGnostic	90d40ba2af	Merge pull request #204 from rubiidev18alt/main Add loading circle + better looking downloading/connecting text	2026-03-14 11:36:43 +01:00
rubiidev18alt	c514c981c7	Merge pull request #7 from rubiidev18alt/codex/add-2d-mode-to-skin-renderer Add 2D/3D toggle for main skin viewer and UI button	2026-03-13 16:50:12 -07:00
rubiidev18alt	4858f83ea1	Keep 2D skin mode fully static	2026-03-13 16:49:42 -07:00
rubiidev18alt	124fb9dbcb	Merge pull request #6 from rubiidev18alt/codex/add-loading-circle-next-to-downloading-text Add animated loader/progress UI and smarter progress text parsing	2026-03-13 16:28:17 -07:00
rubiidev18alt	8c36195731	Left-align download status row and shrink spinner	2026-03-13 16:27:48 -07:00
gardenGnostic	1c1fbc3d46	Update package.json	2026-03-12 23:10:55 +01:00
gardenGnostic	1e27d63fae	Update release.yml	2026-03-12 23:10:34 +01:00
gardenGnostic	8e05e6b29d	Update release.yml	2026-03-12 23:05:44 +01:00
gardenGnostic	033315526c	v3.5.0	2026-03-12 22:58:49 +01:00
gardenGnostic	1377ece419	Delete JDSherbert - Ultimate UI SFX Pack - Select - 1.mp3	2026-03-12 22:57:23 +01:00
gardenGnostic	38092692a7	Delete JDSherbert - Ultimate UI SFX Pack - Popup Open - 1.mp3	2026-03-12 22:57:15 +01:00
gardenGnostic	b54331475a	Delete JDSherbert - Ultimate UI SFX Pack - Popup Close - 1.mp3	2026-03-12 22:57:08 +01:00
gardenGnostic	6cda5ad9ac	Delete JDSherbert - Ultimate UI SFX Pack - Error - 1.mp3	2026-03-12 22:56:59 +01:00
gardenGnostic	9c189b56df	Delete JDSherbert - Ultimate UI SFX Pack - Cursor - 1.mp3	2026-03-12 22:56:51 +01:00
gardenGnostic	32b2909fee	Delete JDSherbert - Ultimate UI SFX Pack - Cancel - 1.mp3	2026-03-12 22:56:45 +01:00
gardenGnostic	4c42fd0e55	Update release.yml	2026-03-12 22:44:58 +01:00
gardenGnostic	3a104398f4	Merge pull request #171 from rubiidev18alt/main Add Steam Deck UI mode, repo presets, and stronger hover glow (#2)	2026-03-12 14:28:09 +01:00
rubiidev18alt	bb721c5ae0	Merge pull request #5 from rubiidev18alt/codex/integrate-controller-button-assets-into-ui Add controller layout preset UI with interactions and sprite attribution	2026-03-12 00:02:01 -07:00
rubiidev18alt	08c332ecb7	Use exact spritesheet frame coords for controller layout icons	2026-03-11 23:56:53 -07:00
rubiidev18alt	0a06148338	Controller button sprites for ui	2026-03-11 23:01:30 -07:00
rubiidev18alt	a8a972a0f6	Merge branch 'gradenGnostic:main' into main	2026-03-11 23:00:58 -07:00
rubiidev18alt	9d3e4fcc57	Add controller layout setting and guide-button quit (#3 )	2026-03-11 20:09:16 -07:00
rubiidev18alt	25116b6eba	Add controller layout setting and guide-button quit	2026-03-11 20:00:30 -07:00
rubiidev18alt	e44695860c	Add Steam Deck UI mode, repo presets, and stronger hover glow (#2 )	2026-03-11 19:32:58 -07:00
gardenGnostic	6c59ad20d6	Merge pull request #167 from rubiidev18alt/main Better accuracy to steam big picture mode	2026-03-12 00:10:16 +01:00
rubiidev18alt	3355244dc4	Merge pull request #1 from rubiidev18alt/codex/integrate-ui-sounds-and-enhance-console-ui Add UI sound effects, Steam Deck fullscreen support, Proton detection improvements, and UI polish	2026-03-11 15:38:37 -07:00
rubiidev18alt	e1a550674a	Refine Linux compat scan to better detect Proton-GE runtimes	2026-03-11 15:37:45 -07:00
rubiidev18alt	12b8a503d9	Placeholder sounds Thanks JDSherbert on itch!	2026-03-11 14:54:20 -07:00