4sp-dv-latest 1.0.2 → 1.0.4

package/4simpleproblems_v5_latest.html

@@ -6,7 +6,7 @@
     <title>4SP - VERSION 5 CLIENT</title>
     <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo.png">
 
-    <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.18/logged-in/">
+    <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.45/logged-in/">
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
     
@@ -66,7 +66,7 @@
 
     .navbar-logo { height: 40px; width: auto; transition: filter 0.3s ease; }
     
-    /* --- GLIDE / SCROLL STYLES ADDED FROM NAVIGATION.JS --- */
+    /* --- GLIDE / SCROLL STYLES --- */
     .tab-wrapper { 
         flex-grow: 1; 
         display: flex; 
@@ -75,7 +75,7 @@
         min-width: 0; 
         margin: 0 1rem; 
         justify-content: center; 
-        overflow: hidden; /* Important for masking */
+        overflow: hidden; 
     }
 
     .tab-scroll-container { 
@@ -86,9 +86,10 @@
         scrollbar-width: none; 
         white-space: nowrap; 
         max-width: 100%;
-        scroll-behavior: smooth; /* Smooth scrolling for arrows */
-        padding-left: 20px;      /* Prevent cut-off by fade */
+        scroll-behavior: smooth; 
+        padding-left: 20px;      
         padding-right: 20px;
+        padding-block: 10px;
     }
     .tab-scroll-container::-webkit-scrollbar { display: none; }
 
@@ -97,37 +98,39 @@
         position: absolute; 
         top: 0; 
         height: 100%; 
-        width: 60px; /* Width of the fade area */
+        width: 60px; 
         display: flex; 
         align-items: center; 
         justify-content: center; 
-        color: #ffffff; 
+        color: var(--glide-btn-color, #ffffff); 
         font-size: 1rem; 
         cursor: pointer; 
         opacity: 1; 
-        transition: opacity 0.3s, color 0.3s ease; 
-        z-index: 10; 
+        transition: opacity 0.3s, color 0.3s ease, background-color 0.3s ease; 
+        z-index: 55; 
         pointer-events: auto;
         background: transparent;
         border: none;
     }
 
-    /* Fading Gradients */
     #glide-left { 
         left: 0; 
-        background: linear-gradient(to right, var(--navbar-bg, #000000) 30%, transparent); 
+        background-color: var(--navbar-bg, #000000);
+        -webkit-mask-image: linear-gradient(to right, black 30%, transparent);
+        mask-image: linear-gradient(to right, black 30%, transparent);
         justify-content: flex-start; 
         padding-left: 8px; 
     }
     #glide-right { 
         right: 0; 
-        background: linear-gradient(to left, var(--navbar-bg, #000000) 30%, transparent); 
+        background-color: var(--navbar-bg, #000000);
+        -webkit-mask-image: linear-gradient(to left, black 30%, transparent);
+        mask-image: linear-gradient(to left, black 30%, transparent);
         justify-content: flex-end; 
         padding-right: 8px; 
     }
     
     .scroll-glide-button.hidden { opacity: 0 !important; pointer-events: none !important; }
-    /* ----------------------------------------------------- */
 
     .nav-tab { 
         padding: 0.5rem 1rem; 
@@ -135,12 +138,15 @@
         font-size: 0.875rem; font-weight: 400; 
         border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem;
         border: 1px solid transparent; transition: all 0.2s; cursor: pointer;
-        flex-shrink: 0; /* Prevent tabs from squishing */
+        flex-shrink: 0; 
+        position: relative;
     }
     .nav-tab:hover { 
         color: var(--tab-hover-text, #ffffff); 
         background-color: var(--tab-hover-bg, rgba(79, 70, 229, 0.05));
-        border-color: var(--tab-hover-border, transparent);
+        border-color: var(--tab-active-border, #4f46e5);
+        transform: translateY(-1px);
+        z-index: 50; 
     }
     .nav-tab.active { 
         color: var(--tab-active-text, #4f46e5); 
@@ -153,231 +159,393 @@
         background-color: var(--tab-active-hover-bg, rgba(79, 70, 229, 0.15));
     }
         
-        .auth-controls-wrapper { display: flex; align-items: center; gap: 1rem; position: relative; }
-        
-        .icon-btn {
-            width: 40px; height: 40px; border-radius: 50%; border: 1px solid #4b5563; 
-            display: flex; align-items: center; justify-content: center; color: #d1d5db; 
-            cursor: pointer; background: transparent; transition: background 0.2s; position: relative;
-        }
-        .icon-btn:hover { background-color: #374151; color: white; }
-
-        .auth-menu {
-            position: absolute; right: 0; top: 50px; width: 14rem;
-            background: var(--menu-bg, #000); 
-            border: 1px solid var(--menu-border, #374151); 
-            border-radius: 0.75rem;
-            padding: 0.5rem; display: none; flex-direction: column; gap: 0.25rem; z-index: 50;
-        }
-        .auth-menu.open { display: flex; }
-        
-        .auth-menu-item {
-            display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem;
-            color: var(--menu-text, #d1d5db); 
-            border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem;
-            transition: background 0.15s; cursor: pointer;
-        }
-        .auth-menu-item:hover { 
-            background-color: var(--menu-item-hover-bg, #374151); 
-            color: var(--menu-item-hover-text, white); 
-        }
-        .auth-header { 
-            padding: 0.5rem; 
-            border-bottom: 1px solid var(--menu-divider, #374151); 
-            margin-bottom: 0.25rem; 
-        }
-        .auth-username { color: var(--menu-username-text, white); font-weight: 400; font-size: 0.9rem; }
-        .auth-email { color: var(--menu-email-text, #9ca3af); font-size: 0.75rem; }
-
-        /* --- Settings Page Styles --- */
-        #settings-overlay {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            top: 64px; /* Below navbar */
-            background: #040404;
-            z-index: 50;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        #settings-container {
-            display: flex;
-            flex-grow: 1;
-            padding: 20px;
-            overflow: hidden; /* Contain scroll */
-        }
+    .auth-controls-wrapper { display: flex; align-items: center; gap: 1rem; position: relative; }
+    
+    .icon-btn {
+        width: 40px; height: 40px; border-radius: 50%; border: 1px solid #4b5563; 
+        display: flex; align-items: center; justify-content: center; color: #d1d5db; 
+        cursor: pointer; background: transparent; transition: background 0.2s; position: relative;
+    }
+    .icon-btn:hover { 
+        background-color: #374151; color: white;
+        z-index: 50;
+    }
 
-        #settings-sidebar {
-            width: 250px;
-            padding-right: 20px;
-            flex-shrink: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            overflow-y: auto;
-        }
+    /* --- DISABLE ANIMATIONS FOR AUTH BTN --- */
+    #auth-btn, #auth-btn:hover, #auth-btn:active {
+        transform: none !important;
+        transition: none !important;
+        background-color: transparent !important;
+        z-index: auto !important; 
+    }
 
-        #settings-main-view {
-            flex-grow: 1;
-            padding: 20px;
-            background-color: #0d0d0d;
-            border: 1px solid #1a1a1a;
-            border-radius: 0.75rem;
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
+    /* Auth Menu & Settings */
+    .auth-menu {
+        position: absolute; 
+        right: 0; 
+        top: 55px; 
+        width: 16rem;
+        background: var(--menu-bg, #000); 
+        border: 1px solid var(--menu-border, #333); 
+        border-radius: 1.5rem;
+        padding: 0.75rem; 
+        display: none; 
+        flex-direction: column; 
+        gap: 0.5rem; 
+        z-index: 50;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.6);
+        transform-origin: top right;
+    }
+    
+    @keyframes menu-pop-in {
+        0% { opacity: 0; transform: translateY(-10px) scale(0.95); }
+        70% { transform: translateY(2px) scale(1.01); }
+        100% { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    
+    .auth-menu.open { 
+        display: flex; 
+        animation: menu-pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+    }
+    
+    .auth-menu-item {
+        display: flex; 
+        align-items: center; 
+        gap: 0.75rem; 
+        padding: 0.75rem 1rem;
+        color: var(--menu-text, #d1d5db); 
+        background: #0a0a0a;
+        border: 1px solid #333;
+        border-radius: 1rem;
+        text-decoration: none; 
+        font-size: 0.9rem;
+        font-weight: 500;
+        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        cursor: pointer;
+    }
+    
+    .auth-menu-item:hover { 
+        background-color: #000; 
+        border-color: #fff; 
+        color: #fff;
+        transform: translateY(-2px) scale(1.02);
+        box-shadow: 0 5px 15px rgba(255,255,255,0.05);
+    }
 
-        .btn-toolbar-style {
-            background: #000000;
-            border: 1px solid #333;
-            border-radius: 0.75rem;
-            color: #d1d5db;
-            padding: 0.5rem 1rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .btn-toolbar-style:hover {
-            background-color: #000000;
-            border-color: #fff;
-            color: #ffffff;
-        }
-        
-        .btn-toolbar-style.btn-primary-override {
-            justify-content: center;
-            background-color: rgba(79, 70, 229, 0.1);
-            border: 1px solid #4f46e5;
-            color: #4f46e5;
-        }
-        .btn-toolbar-style.btn-primary-override:hover {
-            background-color: rgba(79, 70, 229, 0.15);
-            border-color: #6366f1;
-            color: #6366f1;
-        }
+    .auth-menu-item:active {
+        transform: translateY(0) scale(0.98);
+    }
 
-        .btn-toolbar-style.btn-primary-override-danger {
-            justify-content: center;
-            background-color: rgba(220, 38, 38, 0.1);
-            border: 1px solid #dc2626;
-            color: #dc2626;
-        }
-        .btn-toolbar-style.btn-primary-override-danger:hover {
-            background-color: rgba(220, 38, 38, 0.15);
-            border-color: #ef4444;
-            color: #ef4444;
-        }
+    .auth-menu-item .fa-gear, .nav-tab .fa-gear {
+        display: inline-block;
+        transform-origin: center;
+        /* Quick transition for each "click" step */
+        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
 
-        .settings-tab {
-            width: 100%;
-            justify-content: flex-start;
-        }
-        .settings-tab.active {
-            background-color: rgba(79, 70, 229, 0.1);
-            border: 1px solid #4f46e5;
-            color: #4f46e5;
-        }
-        .settings-tab.active:hover {
-            background-color: rgba(79, 70, 229, 0.15);
-            border-color: #6366f1;
-            color: #6366f1;
-        }
+    .auth-header { 
+        padding: 0.5rem 1rem; 
+        border-bottom: 1px solid var(--menu-divider, #333); 
+        margin-bottom: 0.25rem; 
+    }
+    .auth-username { color: var(--menu-username-text, white); font-weight: 400; font-size: 0.9rem; }
+    .auth-email { color: var(--menu-email-text, #9ca3af); font-size: 0.75rem; }
 
-        .settings-box { 
-            border: 1px solid #333; 
-            border-radius: 1rem; 
-            background-color: #000000; 
-            padding: 1.5rem;
-            margin-bottom: 1.5rem;
-        }
-        
-        .input-text-style, .input-select-style {
-            width: 100%; padding: 0.75rem; border: 1px solid #252525; 
-            background-color: #111111; border-radius: 0.5rem; color: #c0c0c0; transition: all 0.2s;
-        }
-        .input-text-style:focus, .input-select-style:focus { 
-            border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5);
-        }
+    #settings-overlay {
+        position: fixed; bottom: 0; left: 0; right: 0; top: 64px;
+        background: #040404; z-index: 50; display: flex; flex-direction: column;
+    }
+    
+    #settings-container { display: flex; flex-grow: 1; padding: 20px; overflow: hidden; }
 
-        /* --- Input Key Style (Panic Key) --- */
-        .input-key-style {
-            width: 4rem; /* Fixed width for a single key */
-            padding: 0.75rem;
-            border: 1px solid #252525; 
-            background-color: #111111; 
-            border-radius: 0.5rem; 
-            color: #c0c0c0; 
-            transition: all 0.2s;
-            font-size: 1.1rem;
-            text-align: center;
-            font-weight: 500;
-            text-transform: uppercase;
-            caret-color: transparent;
-        }
-        .input-key-style:focus {
-            border-color: #505050; 
-            outline: none;
-            box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5);
-        }
-        .input-key-style::placeholder {
-            font-size: 1rem;
-            text-transform: none;
-        }
-        .general-message-area { min-height: 20px; margin-top: 1rem; font-weight: 400; }
-        .success-message { color: #4ade80; }
-        .error-message { color: #f87171; }
-        .warning-message { color: #fbbf24; }
-        
-        /* --- Theme Picker Styles --- */
-        #theme-picker-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-            gap: 1rem;
-            width: 100%;
-        }
-        .theme-button {
-            border: 2px solid var(--tab-active-border, #4f46e5); 
-            background-color: #111; 
-            border-radius: 0.75rem; 
-            padding: 0.75rem; 
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.2s ease-out;
-            opacity: 0.7;
-            position: relative;
-        }
-        .theme-button:hover {
-            opacity: 1;
-            border-color: var(--tab-active-hover-border, #6366f1);
-            transform: translateY(-2px);
-        }
-        .theme-button.active {
-            opacity: 1;
-            box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
-        }
-        .theme-button-name {
-            font-weight: 500;
-            color: #e0e0e0;
-        }
+    #settings-sidebar {
+        width: 250px; padding-right: 20px; flex-shrink: 0;
+        display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
+    }
 
-        /* Cropper Styles */
-        #cropperModal {
-            display: none; position: fixed; z-index: 2050; left: 0; top: 0; width: 100%; height: 100%;
-            background-color: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center; flex-direction: column;
-        }
-        #cropperContent {
-            background-color: #000000; padding: 0; border-radius: 1rem; border: 1px solid #333;
-            display: flex; flex-direction: column; width: 90%; max-width: 600px; overflow: hidden;
-        }
-        #cropperCanvasContainer {
-            position: relative; margin-bottom: 20px; overflow: hidden; max-height: 60vh;
-        }
-        #cropperCanvas { display: block; max-width: 100%; max-height: 60vh; border: 1px dashed rgba(255, 255, 255, 0.3); }
+    #settings-main-view {
+        flex-grow: 1; padding: 20px; background-color: #0d0d0d;
+        border: 1px solid #1a1a1a; border-radius: 0.75rem;
+        overflow-y: auto; overflow-x: hidden;
+    }
+
+    .btn-toolbar-style {
+        background: #000000; border: 1px solid #333; border-radius: 0.75rem;
+        color: #d1d5db; padding: 0.5rem 1rem; font-weight: 500; cursor: pointer;
+        transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;
+        position: relative;
+    }
+    .btn-toolbar-style:hover {
+        background-color: #000000; border-color: #fff; color: #ffffff;
+        z-index: 50;
+    }
+    
+    .btn-toolbar-style.btn-primary-override {
+        justify-content: center; background-color: rgba(79, 70, 229, 0.1);
+        border: 1px solid #4f46e5; color: #4f46e5;
+    }
+    .btn-toolbar-style.btn-primary-override:hover {
+        background-color: rgba(79, 70, 229, 0.15); border-color: #6366f1; color: #6366f1;
+    }
+
+    .btn-toolbar-style.btn-primary-override-danger {
+        justify-content: center; background-color: rgba(220, 38, 38, 0.1);
+        border: 1px solid #dc2626; color: #dc2626;
+    }
+    .btn-toolbar-style.btn-primary-override-danger:hover {
+        background-color: rgba(220, 38, 38, 0.15); border-color: #ef4444; color: #ef4444;
+    }
+
+    .settings-tab { width: 100%; justify-content: flex-start; }
+    .settings-tab.active {
+        background-color: rgba(79, 70, 229, 0.1); border: 1px solid #4f46e5; color: #4f46e5;
+    }
+    .settings-tab.active:hover {
+        background-color: rgba(79, 70, 229, 0.15); border-color: #6366f1; color: #6366f1;
+    }
+
+    /* --- DISABLE ANIMATIONS FOR SETTINGS TABS --- */
+    .settings-tab, .settings-tab:hover, .settings-tab:active {
+        transition: none !important;
+        transform: none !important;
+        animation: none !important;
+    }
+
+    .settings-box { 
+        border: 1px solid #333; border-radius: 1.5rem; 
+        background-color: #000000; padding: 1.5rem; margin-bottom: 1.5rem;
+    }
+    
+    .input-text-style, .input-select-style {
+        width: 100%; padding: 0.75rem; border: 1px solid #252525; 
+        background-color: #111111; border-radius: 1rem; color: #c0c0c0; transition: all 0.2s;
+    }
+    .input-text-style:focus, .input-select-style:focus { 
+        border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5);
+    }
+
+    .input-key-style {
+        width: 4rem; padding: 0.75rem; border: 1px solid #252525; 
+        background-color: #111111; border-radius: 1rem; color: #c0c0c0; 
+        transition: all 0.2s; font-size: 1.1rem; text-align: center;
+        font-weight: 500; text-transform: uppercase; caret-color: transparent;
+    }
+    .input-key-style:focus {
+        border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5);
+    }
+    
+    /* Preference Toggles */
+    .icon-btn.off {
+        border-color: #ef4444;
+        color: #ef4444;
+        background-color: rgba(239, 68, 68, 0.05);
+    }
+    .icon-btn.off:hover {
+        background-color: rgba(239, 68, 68, 0.1);
+        border-color: #f87171;
+    }
+    .input-key-style::placeholder { font-size: 1rem; text-transform: none; }
+    
+    .general-message-area { min-height: 20px; margin-top: 1rem; font-weight: 400; }
+
+    #theme-picker-container {
+        display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 1rem; width: 100%;
+    }
+    .theme-button {
+        border: 2px solid var(--tab-active-border, #4f46e5); 
+        background-color: #111; border-radius: 0.75rem; padding: 0.75rem; 
+        text-align: center; cursor: pointer; transition: all 0.2s ease-out;
+        opacity: 0.7; position: relative;
+    }
+    .theme-button:hover {
+        opacity: 1; border-color: var(--tab-active-hover-border, #6366f1);
+        transform: translateY(-2px);
+    }
+    .theme-button.active { opacity: 1; box-shadow: 0 0 10px rgba(79, 70, 229, 0.3); }
+    .theme-button-name { font-weight: 500; color: #e0e0e0; }
+
+    /* Cropper */
+    #cropperModal {
+        display: none; position: fixed; z-index: 2050; left: 0; top: 0; width: 100%; height: 100%;
+        background-color: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center; flex-direction: column;
+    }
+    #cropperContent {
+        background-color: #000000; padding: 0; border-radius: 1rem; border: 1px solid #333;
+        display: flex; flex-direction: column; width: 90%; max-width: 600px; overflow: hidden;
+    }
+    #cropperCanvasContainer {
+        position: relative; margin-bottom: 20px; overflow: hidden; max-height: 60vh;
+    }
+    #cropperCanvas { display: block; max-width: 100%; max-height: 60vh; border: 1px dashed rgba(255, 255, 255, 0.3); }
+
+    /* --- ANIMATION & THEME VARIABLES --- */
+    :root {
+        --bg-page: #040404; --bg-container: #000000; --border-color: #333;
+        --text-primary: #c0c0c0; --text-light-grey: #d1d5db; --accent-color: #6366f1;
+        --navbar-bg: #000000; --navbar-border: #1f2937;
+        --tab-text: #9ca3af; --tab-hover-text: #ffffff;
+        --tab-active-text: #4f46e5; --tab-active-bg: rgba(79, 70, 229, 0.1);
+        --tab-active-border: #4f46e5;
+    }
+
+    @keyframes shake {
+        0% { transform: translateX(0); }
+        25% { transform: translateX(-5px) rotate(-5deg); }
+        50% { transform: translateX(5px) rotate(5deg); }
+        75% { transform: translateX(-5px) rotate(-5deg); }
+        100% { transform: translateX(0); }
+    }
+    .shake-anim { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
+
+    /* Animation Control */
+    body.no-animations *, 
+    body.no-animations *:hover,
+    body.no-animations *:active,
+    body.no-animations *:focus {
+        transition: none !important;
+        animation: none !important;
+        transform: none !important;
+        box-shadow: none !important;
+    }
+
+    body.no-animations .auth-menu-item .fa-gear, 
+    body.no-animations .nav-tab .fa-gear {
+        transition: none !important;
+        transform: none !important;
+    }
+
+    /* Bubbly Spring Transition */
+    body:not(.no-animations) .btn-toolbar-style, 
+    body:not(.no-animations) .btn-lock-screen, 
+    body:not(.no-animations) .icon-btn, 
+    body:not(.no-animations) .nav-tab, 
+    body:not(.no-animations) .btn-card-action, 
+    body:not(.no-animations) .input-text-style, 
+    body:not(.no-animations) .input-lock-screen, 
+    body:not(.no-animations) .input-key-style {
+        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
+    }
+
+    body:not(.no-animations) .btn-toolbar-style:active, 
+    body:not(.no-animations) .btn-lock-screen:active, 
+    body:not(.no-animations) .icon-btn:active, 
+    body:not(.no-animations) .nav-tab:active, 
+    body:not(.no-animations) .btn-card-action:active {
+        transform: scale(0.98); transition: transform 0.05s ease-out !important;
+    }
+
+    /* Refined Buttons - Reduced Scale for less clipping/pop */
+    .btn-toolbar-style {
+        background: #0a0a0a; border: 1px solid #333; border-radius: 14px;
+        color: #d1d5db; padding: 0.75rem 1.25rem; font-weight: 500; cursor: pointer;
+        display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); position: relative;
+    }
+    .btn-toolbar-style:hover {
+        transform: scale(1.02) translateY(-1px);
+        box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
+        border-color: #fff; color: #ffffff;
+        z-index: 50;
+    }
+
+    .btn-lock-screen {
+        padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 14px;
+        color: rgb(99 102 241); background-color: rgba(99, 102, 241, 0.1);
+        border: 1px solid rgb(99 102 241); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
+        position: relative;
+    }
+    .btn-lock-screen:hover {
+        transform: scale(1.02) translateY(-1px);
+        box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
+        background-color: rgba(99, 102, 241, 0.2);
+        z-index: 50;
+    }
+
+    .icon-btn {
+        width: 40px; height: 40px; border-radius: 14px;
+        border: 1px solid #4b5563; display: flex; align-items: center; justify-content: center; color: #d1d5db; 
+        cursor: pointer; background: transparent; position: relative;
+    }
+    .icon-btn:hover { 
+        background-color: #374151; color: white; transform: scale(1.05);
+        z-index: 50;
+    }
+
+    .btn-card-action {
+        display: inline-flex; align-items: center; justify-content: center;
+        width: 2rem; height: 2rem; border-radius: 14px;
+        background-color: transparent; border: 1px solid transparent;
+        color: #9ca3af; cursor: pointer; position: relative;
+    }
+    .btn-card-action:hover {
+        background-color: rgba(79, 70, 229, 0.1); color: #4f46e5; border-color: #4f46e5;
+        transform: scale(1.05); z-index: 50;
+    }
+
+    .input-text-style:focus, .input-select-style:focus { transform: scale(1.01); }
+    .input-lock-screen:focus { transform: scale(1.01); }
+    .input-key-style:focus { transform: scale(1.05); }
+
+    .nav-tab { 
+        padding: 0.5rem 1rem; color: var(--tab-text); 
+        font-size: 0.875rem; font-weight: 400; border-radius: 12px;
+        text-decoration: none; display: flex; align-items: center; gap: 0.5rem;
+        border: 1px solid transparent; cursor: pointer; background: transparent;
+        position: relative;
+    }
+    .nav-tab:hover { 
+        color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05);
+        border-color: var(--tab-active-border, #4f46e5); transform: scale(1.02);
+        z-index: 50;
+    }
 
+    .eagler-dropdown {
+        position: relative; background-color: rgba(20, 20, 20, 0.98);
+        border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px;
+        padding: 0.5rem; min-width: 200px; display: inline-block;
+    }
+    .eagler-dropdown-link {
+        display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none;
+        border-radius: 14px; font-size: 0.9rem;
+        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    .eagler-dropdown-link:hover {
+        background-color: rgba(255, 255, 255, 0.1); color: white; transform: translateX(4px);
+    }
+
+    /* Notifications */
+    #notification-container {
+        position: fixed;
+        bottom: 2rem;
+        right: 2rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        z-index: 9999;
+        pointer-events: none;
+    }
+    .notification-toast {
+        background-color: #0a0a0a; border: 1px solid #333; border-radius: 14px;
+        padding: 0.75rem 1.25rem; color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+        display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem;
+        min-width: 200px; transform: translateX(120%);
+        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, background-color 0.2s;
+        opacity: 0; pointer-events: auto; cursor: default;
+    }
+    .notification-toast.show { transform: translateX(0); opacity: 1; }
+    .notification-toast.show:hover {
+        transform: scale(1.02) translateX(-5px); background-color: #151515;
+        border-color: #555; box-shadow: 0 8px 25px rgba(0,0,0,0.7);
+    }
+
+    /* UNIVERSAL LOADER CSS */
+    #universal-loader {
+        pointer-events: none; /* Allows clicks to pass through when hidden/opacity 0 */
+    }
+    #universal-loader.active {
+        pointer-events: auto;
+    }
     </style>
 </head>
 <body>
@@ -430,7 +598,7 @@
                         <div class="auth-username" id="display-username">Client User</div>
                         <div class="auth-email" id="display-email">local@client</div>
                     </div>
-                    <a href="#" class="auth-menu-item" onclick="loadPage('settings.html'); return false;">
+                    <a href="#" id="auth-settings-btn" class="auth-menu-item" onclick="loadPage('settings.html'); return false;">
                         <i class="fa-solid fa-gear w-4"></i> Settings
                     </a>
                     <div class="auth-menu-item text-red-400 hover:text-red-300" id="logout-btn">
@@ -467,13 +635,29 @@
                     <h3 class="text-3xl font-bold text-white mb-6">General Settings</h3>
                     
                     <div class="settings-box">
-                        <h3 class="text-xl font-bold text-white mb-2">Account Username</h3>
+                        <h3 class="text-xl font-bold text-white mb-2">Account Details & Preferences</h3>
+                        
                         <label class="block text-gray-400 text-sm mb-2 font-light">New Username</label>
-                        <div class="flex gap-2">
+                        <div class="flex gap-2 mb-6">
                             <input type="text" id="settings-username-input" class="input-text-style" placeholder="Enter username">
                             <button id="save-username-btn" class="btn-toolbar-style btn-primary-override">Save</button>
                         </div>
                         <p id="username-msg" class="general-message-area text-sm mt-2"></p>
+
+                        <div class="flex gap-8 items-center pt-4 border-t border-[#1a1a1a]">
+                            <div class="flex flex-col items-center gap-2">
+                                <button id="toggle-animations-btn" class="icon-btn" title="Toggle Navbar Animations">
+                                    <i class="fa-solid fa-wand-magic-sparkles"></i>
+                                </button>
+                                <span class="text-xs text-gray-500">Animations</span>
+                            </div>
+                            <div class="flex flex-col items-center gap-2">
+                                <button id="toggle-sounds-btn" class="icon-btn" title="Toggle UI Sounds">
+                                    <i class="fa-solid fa-volume-high"></i>
+                                </button>
+                                <span class="text-xs text-gray-500">Sounds</span>
+                            </div>
+                        </div>
                     </div>
 
                     <h3 class="text-xl font-bold text-white mb-2 mt-6">Organization</h3>
@@ -506,7 +690,7 @@
                     <div class="settings-box mb-8 p-4">
                         <div class="flex items-start gap-6">
                             <div class="flex flex-col items-center gap-2">
-                                <div id="pfp-preview" class="w-24 h-24 rounded-full bg-gray-700 overflow-hidden border-2 border-[#333] flex items-center justify-center text-3xl font-bold text-white relative">
+                                <div id="pfp-preview" class="w-24 h-24 rounded-[32px] bg-gray-700 overflow-hidden border-2 border-[#333] flex items-center justify-center text-3xl font-bold text-white relative">
                                 </div>
                                 <p class="text-xs text-gray-500">Preview</p>
                             </div>
@@ -518,15 +702,29 @@
                                 </div>
 
                                 <div id="pfp-letter-options" class="block">
-                                    <div class="grid grid-cols-6 gap-2 mb-4 max-w-xs">
-                                        </div>
-                                    <button id="save-letter-pfp-btn" class="btn-toolbar-style btn-primary-override">Set Letter Avatar</button>
+                                    <label class="block text-gray-400 text-xs mb-1 font-light">Custom Text (Max 3)</label>
+                                    <div class="flex gap-4 items-center mb-4">
+                                        <input type="text" id="pfp-custom-text" maxlength="3" class="input-text-style w-24 text-center uppercase" placeholder="A">
+                                        <p class="text-xs text-gray-500">Leave empty to use username initial.</p>
+                                    </div>
+                                    
+                                    <label class="block text-gray-400 text-xs mb-2 font-light">Background Color</label>
+                                    <div class="flex flex-wrap gap-2 mb-6" id="pfp-color-grid">
+                                        <!-- Colors generated by JS -->
+                                    </div>
+                                    
+                                    <button id="save-letter-pfp-btn" class="btn-toolbar-style btn-primary-override w-full justify-center">Set Letter Avatar</button>
                                 </div>
 
                                 <div id="pfp-upload-options" class="hidden">
-                                    <input type="file" id="pfp-upload-input" accept="image/*" class="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#222] file:text-white hover:file:bg-[#333] mb-4"/>
-                                    <p class="text-xs text-gray-500 mb-4">Max size 2MB. Square images work best.</p>
-                                    <button id="save-upload-pfp-btn" class="btn-toolbar-style btn-primary-override">Upload & Set</button>
+                                    <input type="file" id="pfp-upload-input" accept="image/*" class="hidden"/>
+                                    
+                                    <button id="trigger-upload-btn" class="btn-toolbar-style mb-4 w-full justify-center">
+                                        <i class="fa-solid fa-cloud-arrow-up mr-2"></i> Choose Image...
+                                    </button>
+                                    
+                                    <p class="text-xs text-gray-500 mb-4 text-center">Max size 2MB. Square images work best.</p>
+                                    <button id="save-upload-pfp-btn" class="btn-toolbar-style btn-primary-override w-full justify-center">Upload & Set</button>
                                 </div>
                             </div>
                         </div>
@@ -557,1237 +755,83 @@
 
                         <div class="flex items-center gap-4 mb-3">
                             <input type="text" id="panicKey1" data-key-id="1" class="input-key-style panic-key-input" placeholder="-" maxlength="1">
-                            <input type="url" id="panicUrl1" class="input-text-style" placeholder="e.g., https://google.com">
-                        </div>
-                        
-                        <div class="flex items-center gap-4 mb-3">
-                            <input type="text" id="panicKey2" data-key-id="2" class="input-key-style panic-key-input" placeholder="-" maxlength="1">
-                            <input type="url" id="panicUrl2" class="input-text-style" placeholder="e.g., https://youtube.com/feed/subscriptions">
-                        </div>
-                        
-                        <div class="flex items-center gap-4 mb-3">
-                            <input type="text" id="panicKey3" data-key-id="3" class="input-key-style panic-key-input" placeholder="-" maxlength="1">
-                            <input type="url" id="panicUrl3" class="input-text-style" placeholder="e.g., https://wikipedia.org">
-                        </div>
-                        
-                        <div class="flex justify-between items-center pt-4 border-t border-[#252525]">
-                            <p id="panicKeyMessage" class="general-message-area text-sm"></p>
-                            <button id="applyPanicKeyBtn" class="btn-toolbar-style btn-primary-override w-36" style="padding: 0.5rem 0.75rem;">
-                                <i class="fa-solid fa-check mr-1"></i> Apply Keys
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <div id="tab-about" class="settings-section hidden">
-                    <h3 class="text-3xl font-bold text-white mb-6">About 4SP</h3>
-                    <div class="settings-box p-6 flex flex-col items-center text-center">
-                        <img src="https://cdn.jsdelivr.net/npm/4sp-asset-library@latest/logo.png" class="h-24 mb-4" alt="Logo">
-                        <h1 class="text-3xl font-bold text-white mb-2">(4SP) 4simpleproblems</h1>
-                        <p class="text-gray-400 mb-6 max-w-lg font-light">From a soundboard, to a full downloadable client of a platform.</p>
-                        
-                        <div class="inline-block bg-[#0a0a0a] border border-[#333] px-4 py-2 rounded-[14px] mb-8">
-  <span class="text-gray-500 text-sm">Version:</span>
-  <span class="text-indigo-400 font-mono font-bold ml-2">5.0.0 (DV)</span>
-</div>
-
-                        
-                        <div class="flex gap-4">
-                            <a href="https://github.com/4simpleproblems-v5" class="text-gray-400 hover:text-white transition"><i class="fa-brands fa-github fa-xl"></i></a>
-                            <a href="https://youtube.com/4simpleproblems" class="text-gray-400 hover:text-white transition"><i class="fa-brands fa-youtube fa-xl"></i></a>
-                            <a href="https://x.com/@4simpleproblems" class="text-gray-400 hover:text-white transition"><i class="fa-brands fa-discord fa-xl"></i></a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    
-    <div id="cropperModal">
-        <div id="cropperContent">
-            <div class="flex justify-between items-center p-6 border-b border-[#333] bg-black">
-                <h3 class="text-2xl font-bold text-white">Adjust Profile Picture</h3>
-                <button id="cancelCropBtn" class="btn-toolbar-style w-10 h-10 flex items-center justify-center p-0 rounded-xl">
-                     <i class="fa-solid fa-xmark fa-xl"></i>
-                </button>
-            </div>
-            <div class="flex flex-col items-center p-6 bg-[#0a0a0a]">
-                <p class="text-sm text-gray-400 mb-4">Drag to move. Scroll to resize.</p>
-                <div id="cropperCanvasContainer" class="relative mb-6 border border-[#333] rounded-lg overflow-hidden w-full flex justify-center bg-black">
-                    <canvas id="cropperCanvas"></canvas>
-                </div>
-                <div class="flex justify-end w-full">
-                    <button id="submitCropBtn" class="btn-toolbar-style btn-primary-override px-6 py-2 rounded-xl">
-                        <i class="fa-solid fa-check mr-2"></i> Submit
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <template id="games-page-template">
-<!DOCTYPE html>
-<html lang="en"> 
-<head>
-    <title>4SP - GAMES</title>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
-    <link rel="icon" type="image/x-icon" href="img/favicon.ico" id="faviconLink" />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
-    
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://dv-service-lfs.4simpleproblems.workers.dev/url-changer.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/4sp-dv@latest/analytics.js"></script>
-
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-1D4F692C1Q"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'G-1D4F692C1Q');
-    </script>
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    colors: {
-                        'deep-black': '#040404',
-                        'card-dark': '#111111',
-                        'accent-indigo': '#4f46e5',
-                        'brand-border': '#252525',
-                        'strongdog-orange': '#FFA500',
-                        'gn-math': '#FB2651',
-                        'gameboy': '#9A2257', 
-                        'other-grey': '#AAAAAA', 
-                    },
-                    fontFamily: {
-                        sans: ['Geist', 'sans-serif'],
-                    },
-                    borderRadius: {
-                        'md': '0.375rem',
-                        'lg': '0.5rem',
-                        'xl': '0.75rem',
-                        '2xl': '1.25rem',
-                        '3xl': '1.5rem', 
-                    },
-                    aspectRatio: {
-                        '3/2': '3 / 2',
-                    },
-                }
-            }
-        }
-    </script>
-    
-    <style>
-        /* Base styles */
-        :root {
-            --menu-bg: #000000;
-            --menu-border: #333;
-            --menu-text: #d1d5db;
-            --tab-hover-text: #ffffff;
-            --tab-active-bg: rgba(79, 70, 229, 0.1);
-            --tab-active-text: #4f46e5;
-            --tab-active-border: #4f46e5;
-        }
-
-        body {
-            font-family: 'Geist', 'sans-serif';
-            font-weight: 300;
-            background-color: #040404;
-            padding-bottom: 100px;
-        }
-        
-        h1, h2, h3, .font-bold, .font-semibold, strong {
-            font-weight: 400 !important;
-        }
-
-        /* --- Toolbar Button Style (Global) --- */
-        .btn-toolbar-style {
-            background: var(--menu-bg);
-            border: 1px solid var(--menu-border);
-            border-radius: 0.75rem; 
-            color: var(--menu-text);
-            padding: 0.5rem 1rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
-            text-decoration: none;
-            font-size: 1rem;
-        }
-        .btn-toolbar-style:hover {
-            background-color: var(--menu-bg);
-            border-color: #fff;
-            color: var(--tab-hover-text);
-        }
-
-        /* --- Card Action Buttons --- */
-        .btn-card-action {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 2.25rem;
-            height: 2.25rem;
-            border-radius: 0.5rem;
-            background-color: transparent;
-            border: 1px solid transparent;
-            color: #9ca3af;
-            cursor: pointer;
-            transition: all 0.2s;
-            font-size: 1rem;
-        }
-        .btn-card-action:hover {
-            background-color: var(--tab-active-bg);
-            color: var(--tab-active-text);
-            border-color: var(--tab-active-border);
-        }
-        
-        /* Favorite Button Logic */
-        .btn-card-action.fav-action .fa-solid-star { display: none; }
-        .btn-card-action.fav-action .fa-regular-star { display: inline-block; }
-        
-        .btn-card-action.fav-action.favorited .fa-solid-star { display: inline-block; color: #facc15; }
-        .btn-card-action.fav-action.favorited .fa-regular-star { display: none; }
-        
-        .btn-card-action.fav-action:not(.favorited):hover .fa-regular-star { color: var(--tab-active-text); }
-        
-        /* Card Hover Effects */
-        .zone-item {
-            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-            will-change: transform;
-        }
-        .zone-item:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.2);
-        }
-        
-        .other-zone-item {
-            min-height: 250px;
-            transition: box-shadow 0.2s ease-in-out;
-            position: relative; 
-            z-index: 1; 
-        }
-        .other-zone-item:hover {
-            box-shadow: 0 8px 25px rgba(170, 170, 170, 0.2);
-            z-index: 10; 
-        }
-        .other-zone-item .image-overlay {
-            background: linear-gradient(90deg, rgba(7,7,7,0.85) 0%, rgba(7,7,7,0) 40%, rgba(7,7,7,0) 60%, rgba(7,7,7,0.85) 100%);
-            border-radius: 1.25rem; 
-        }
-        .other-zone-item:hover .image-overlay {
-            background: linear-gradient(90deg, rgba(7,7,7,0.7) 0%, rgba(7,7,7,0) 50%, rgba(7,7,7,0) 50%, rgba(7,7,7,0.7) 100%);
-        }
-
-        /* --- Animations --- */
-        @keyframes fadeOut {
-            from { opacity: 1; transform: scale(1); }
-            to { opacity: 0; transform: scale(0.95); }
-        }
-        .fade-out {
-            animation: fadeOut 0.3s ease-out forwards;
-            pointer-events: none;
-        }
-
-        /* Search Bar & Results */
-        .search-results-container {
-            max-height: 300px;
-            overflow-y: auto;
-            scrollbar-width: thin;
-            scrollbar-color: #333 transparent;
-        }
-        .search-item {
-            display: flex;
-            cursor: pointer;
-            transition: background-color 0.2s;
-            color: #e5e7eb;
-            text-decoration: none;
-            padding: 10px 15px;
-        }
-        .search-item:hover { background-color: rgba(255, 255, 255, 0.05); }
-
-        @media (max-width: 768px) {
-            #bottom-fixed-bar {
-                left: 10px !important; right: 10px !important;
-                bottom: 10px !important; width: auto !important;
-            }
-        }
-
-        /* Polyfill for aspect-ratio */
-        .aspect-w-3 { position: relative; padding-bottom: 66.666667%; }
-        .aspect-h-2 { }
-        .aspect-w-3 > * { position: absolute; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; }
-        
-        /* --- Game Viewer Modal --- */
-        #zoneViewer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); z-index: 5000; flex-direction: column; }
-        #zoneViewer .zone-header {
-            background-color: #111111;
-            padding: 12px 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid #252525;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-            flex-shrink: 0;
-        }
-        #zoneViewer .zone-header .zone-title h2 {
-            margin: 0;
-            font-size: 1.3em;
-            color: #ffffff;
-            font-family: 'Geist', sans-serif;
-        }
-        #zoneViewer .zone-header .zone-controls { display: flex; align-items: center; }
-        #zoneViewer .zone-header .zone-controls button,
-        #zoneViewer .zone-header .zone-controls a {
-            margin-left: 8px;
-            width: 40px;
-            height: 40px;
-            background-color: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(5px);
-            -webkit-backdrop-filter: blur(5px);
-            color: white;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 0.5rem;
-            cursor: pointer;
-            font-size: 1em;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background-color 0.2s ease-in-out;
-            text-decoration: none;
-        }
-        #zoneViewer .zone-header .zone-controls button:hover,
-        #zoneViewer .zone-header .zone-controls a:hover { background-color: rgba(255, 255, 255, 0.2); }
-        #zoneViewer iframe { flex-grow: 1; border: none; background-color: #000; }
-        .hidden { display: none !important; }
-
-        /* --- Dropdown (Modified to popup ABOVE) --- */
-        .eagler-dropdown {
-            display: none;
-            position: absolute;
-            bottom: 120%; /* Pops up above the button */
-            right: 0;
-            margin-bottom: 5px;
-            background-color: rgba(20, 20, 20, 0.98);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid rgba(255, 255, 255, 0.15);
-            border-radius: 0.75rem;
-            padding: 0.5rem;
-            z-index: 1000;
-            min-width: 200px;
-            box-shadow: 0 10px 25px rgba(0,0,0,0.6);
-            transform-origin: bottom right;
-        }
-        .eagler-dropdown.show { display: block; animation: fadeInUp 0.15s ease-out; }
-        
-        @keyframes fadeInUp { 
-            from { opacity: 0; transform: translateY(10px) scale(0.95); } 
-            to { opacity: 1; transform: translateY(0) scale(1); } 
-        }
-
-        .eagler-dropdown-link {
-            display: block;
-            padding: 0.6rem 0.8rem;
-            color: #d1d5db;
-            text-decoration: none;
-            border-radius: 0.5rem;
-            transition: all 0.2s;
-            font-weight: 400;
-            white-space: nowrap;
-            font-size: 0.9rem;
-        }
-        .eagler-dropdown-link:hover { background-color: rgba(255, 255, 255, 0.1); color: white; }
-
-        #creditsModal { display: none; }
-        
-        /* Modal Scrollbar */
-        .custom-scrollbar::-webkit-scrollbar { width: 8px; }
-        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: 4px; }
-        .custom-scrollbar::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
-        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }
-    </style>
-</head>
-
-<body class="bg-deep-black text-white min-h-screen">
-
-    <main class="mx-auto my-5 w-full max-w-screen-2xl px-4 relative">
-        <button id="creditsBtn" class="absolute top-0 right-4 z-20 btn-toolbar-style">
-            <i class="fa-solid fa-users mr-2"></i>Credits
-        </button>
-        
-        <div class="mx-auto my-8 p-4 sm:p-6 w-full max-w-3xl relative">
-            <p class="bg-card-dark text-white p-5 rounded-xl shadow-lg border border-brand-border text-sm sm:text-base text-center">
-                <strong>Welcome to 4SP Games!</strong><br>
-                This is a collection of games curated for the 4SP community. Use the search bar below to find your favorite.
-            </p>
-        </div>
-        
-        <div id="favoritesSection">
-            <h2 id="favoritesHeader" class="text-center text-3xl font-bold mt-12 mb-6 text-white" style="display: none;">
-                <strong>Favorites</strong>
-            </h2>
-            <div class="games-grid grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-4" id="favoritesGameList" style="display: none;"></div>
-        </div>
-
-        <div id="category-viewer" class="w-full mt-12">
-            <div id="category-slider-container" class="relative flex items-center justify-center max-w-sm mx-auto h-12">
-                <button id="prev-category" class="absolute left-0 top-1/2 -translate-y-1/2 text-2xl text-gray-500 hover:text-white transition-all p-2 z-10 disabled:opacity-30 disabled:text-gray-700 disabled:hover:text-gray-700">
-                    <i class="fas fa-chevron-left"></i>
-                </button>
-                <div class="overflow-hidden w-64 text-center">
-                    <div id="category-slider" class="flex transition-transform duration-500 ease-in-out">
-                        </div>
-                </div>
-                <button id="next-category" class="absolute right-0 top-1/2 -translate-y-1/2 text-2xl text-gray-500 hover:text-white transition-all p-2 z-10 disabled:opacity-30 disabled:text-gray-700 disabled:hover:text-gray-700">
-                    <i class="fas fa-chevron-right"></i>
-                </button>
-            </div>
-            
-            <div id="games-grid-container" class="games-grid grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-4 mt-6 transition-opacity duration-300 ease-in-out">
-                </div>
-        </div>
-    </main>
-
-    <div id="bottom-fixed-bar" class="fixed bottom-4 right-4 bg-black/80 backdrop-blur-xl rounded-3xl border border-brand-border shadow-2xl shadow-black/50 w-full max-w-md z-50 transition-all duration-300 flex flex-col">
-        <div id="searchResults" class="search-results-container w-full" style="display: none;">
-            </div>
-        
-        <div id="searchDivider" class="w-full h-[1px] bg-white/10" style="display: none;"></div>
-
-        <div class="flex items-center w-full p-1">
-            <div class="pl-4 pr-2 text-gray-400">
-                <i class="fa-solid fa-magnifying-glass"></i>
-            </div>
-            <input type="text" id="searchInput" placeholder="Search for games…" autocomplete="off" class="w-full py-3 pr-4 bg-transparent text-white placeholder-gray-500 focus:outline-none focus:ring-0 text-base" />
-        </div>
-    </div>
-    
-    <div id="zoneViewer" aria-modal="true" role="dialog">
-        <div class="zone-header">
-             <div class="zone-title">
-                <h2 id="zoneNameEl">Game Title</h2>
-             </div>
-             <div class="zone-controls">
-                <button id="fullscreenBtnZone" title="Fullscreen"><i class="fas fa-expand"></i></button>
-                <a id="downloadBtnZone" title="Download" class="hidden" href="#"><i class="fas fa-download"></i></a>
-                <button id="closeBtnZone" title="Close"><i class="fas fa-times"></i></button>
-             </div>
-        </div>
-        <iframe id="zoneFrame" title="Game Content" allowfullscreen sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock"></iframe>
-    </div>
-
-    <div id="creditsModal" class="fixed top-0 left-0 w-full h-full bg-black/70 backdrop-blur-lg z-[6000] items-center justify-center p-4" style="display: none;">
-        <div class="bg-card-dark rounded-xl border border-brand-border shadow-2xl w-full max-w-lg overflow-y-auto max-h-[90vh]">
-            <div class="flex justify-between items-center p-4 border-b border-brand-border sticky top-0 bg-card-dark z-10">
-                <h3 class="text-xl font-bold">Project Credits</h3>
-                <button id="closeCreditsBtn" class="text-white hover:text-gray-400 p-2"><i class="fas fa-times"></i></button>
-            </div>
-            <div id="creditsContent" class="p-6 space-y-6">
-                </div>
-        </div>
-    </div>
-
-    <div id="instruction-overlay" class="fixed inset-0 bg-black/80 z-[8000] transition-opacity duration-300 opacity-0 flex items-center justify-center p-4" style="display: none;">
-        <div class="bg-card-dark text-white rounded-3xl border border-gray-700 shadow-2xl backdrop-blur-md w-full max-w-2xl max-h-[90vh] flex flex-col">
-            <div class="p-6 sm:p-8 overflow-y-auto custom-scrollbar">
-                <h3 class="text-2xl font-bold mb-4 text-center">Welcome to 4SP Games</h3>
-                <p class="text-sm text-gray-400 mb-6 text-center">Please read the following information before playing.</p>
-                
-                <ul class="space-y-4 text-gray-300 text-sm sm:text-base leading-relaxed">
-                    <li class="flex items-start">
-                        <i class="fas fa-compass mt-1 mr-3 text-accent-indigo"></i>
-                        <span><strong>Navigation:</strong> Use the arrows next to the category title (currently "<strong>StrongdogXP</strong>") to switch between different game collections like <strong>GN-Math</strong> and <strong>Others</strong>.</span>
-                    </li>
-                    <li class="flex items-start">
-                        <i class="fas fa-file-signature mt-1 mr-3 text-accent-indigo"></i>
-                        <span><strong>Rebranding:</strong> "4SP Game Hub" is now shortened to "<strong>4SP Games</strong>".</span>
-                    </li>
-                    <li class="flex items-start">
-                        <i class="fas fa-bug mt-1 mr-3 text-strongdog-orange"></i>
-                        <span><strong>Stability Disclaimer:</strong> Some games may be unstable, glitchy, or fail to load. This is often due to browser restrictions or the age of the game files.</span>
-                    </li>
-                    <li class="flex items-start">
-                        <i class="fas fa-user-gear mt-1 mr-3 text-gn-math"></i>
-                        <span><strong>Management:</strong> I do not personally manage or host the files for these game collections. I cannot directly fix broken game files or save data issues.</span>
-                    </li>
-                    <li class="flex items-start">
-                        <i class="fas fa-server mt-1 mr-3 text-gn-math"></i>
-                        <span><strong>GN-Math & CDN:</strong> The <strong>GN-Math</strong> category is particularly hard to modify because it uses a <em>CDN (Content Delivery Network)</em>. This means the game files are hosted on remote servers around the world to load faster, rather than being stored here. I cannot edit those files.</span>
-                    </li>
-                </ul>
-            </div>
-            
-            <div class="p-6 border-t border-gray-800 bg-black/20 rounded-b-3xl flex flex-col sm:flex-row items-center justify-between gap-4">
-                <span class="text-xs text-gray-500">Type "I understand" to continue.</span>
-                <input type="text" id="instruction-input" placeholder="Type 'I understand'" class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-normal rounded-xl text-white bg-purple-500/10 ring-1 ring-purple-500/50 focus:ring-purple-500/80 focus:bg-purple-500/20 focus:outline-none placeholder-gray-400 transition-all duration-200">
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // --- Configuration & Globals ---
-        
-        const GN_ZONES_URL = "https://cdn.jsdelivr.net/gh/gn-math/assets@main/zones.json";
-        const GN_COVER_URL_BASE = "https://cdn.jsdelivr.net/gh/gn-math/covers@main";
-        
-        // FIXED: Use raw.githack.com for HTML to prevent "showing code" issue
-        const GN_HTML_URL_BASE = "https://raw.githack.com/gn-math/html/main";
-        
-        const WORKER_ROOT = "https://dv-service-lfs.4simpleproblems.workers.dev/";
-        const GAMES_BASE_URL = "https://dv-service-lfs.4simpleproblems.workers.dev/GAMES/";
-        const CARDS_DATA_URL = "https://dv-service-lfs.4simpleproblems.workers.dev/GAMES/cards-data.js";
-
-        const FAVORITES_KEY = 'gameHubFavorites_v3';
-
-        let allGames = [];
-        let searchableGames = [];
-        let categories = [];
-        let currentCategoryIndex = 0;
-        const categoryColors = {
-            'StrongdogXP': 'text-strongdog-orange',
-            'GN-Math': 'text-gn-math',
-            'Gameboy Games': 'text-gameboy',
-            'Others': 'text-other-grey', 
-        };
-        
-        const CREDITS_DATA = {
-            'StrongdogXP': { credit: "Core game collection provided by Josh P.", githubUrl: "https://github.com/jman1593/" },
-            'GN-Math': { credit: "Primary game source and infrastructure provided by the GN-Math Community.", githubUrl: "https://github.com/gn-math/" },
-            'Gameboy Games': { credit: "Emulator and ROM files from various public sources." },
-            'Others': { credit: "Various community developers and open-source projects (e.g., DOOM, Eaglercraft, Carnage3D, JS-DOS)." }
-        };
-
-        const favoritesHeader = document.getElementById("favoritesHeader");
-        const favoritesGameList = document.getElementById("favoritesGameList");
-        const searchInput = document.getElementById("searchInput");
-        const searchResults = document.getElementById("searchResults");
-        const searchDivider = document.getElementById("searchDivider");
-        const categorySlider = document.getElementById('category-slider');
-        const prevCategoryBtn = document.getElementById('prev-category');
-        const nextCategoryBtn = document.getElementById('next-category');
-        const gamesGridContainer = document.getElementById('games-grid-container');
-        
-        const creditsModal = document.getElementById('creditsModal');
-        const creditsContent = document.getElementById('creditsContent');
-        const creditsBtn = document.getElementById('creditsBtn');
-        const closeCreditsBtn = document.getElementById('closeCreditsBtn');
-
-        const INSTRUCTION_KEY = '4sp-games-instruction-extended-seen';
-        const instructionOverlay = document.getElementById('instruction-overlay');
-        const instructionInput = document.getElementById('instruction-input');
-
-        // --- Intersection Observer for Image Virtualization ---
-        const imageObserver = new IntersectionObserver((entries, observer) => {
-            entries.forEach(entry => {
-                const img = entry.target;
-                if (entry.isIntersecting) {
-                    if (img.dataset.src) {
-                        img.src = img.dataset.src;
-                    }
-                } else {
-                    if(img.src && !img.src.includes('placehold.co') && !img.dataset.src) {
-                         img.dataset.src = img.src;
-                    }
-                    if(img.dataset.src) {
-                        img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
-                    }
-                }
-            });
-        }, {
-            rootMargin: "300px 0px", 
-            threshold: 0.01
-        });
-
-        function observeImages(container) {
-            const images = container.querySelectorAll('img[data-src]');
-            images.forEach(img => imageObserver.observe(img));
-        }
-
-        // --- URL Management ---
-        function updateURL(category, gameId = null) {
-            let hash = `#${encodeURIComponent(category.replace(/\s+/g, '-'))}`;
-            if (gameId) hash += `?id=${gameId}`;
-            try {
-                history.replaceState(null, null, hash);
-            } catch(e) {
-                console.warn('History API not supported in this environment');
-            }
-        }
-
-        function parseURL() {
-            const hash = window.location.hash.substring(1);
-            if (!hash) return { category: null, gameId: null };
-            const parts = hash.split('?');
-            let rawCategory = parts[0];
-            let category = decodeURIComponent(rawCategory).replace(/-/g, ' '); 
-            let gameId = null;
-            if (parts[1]) {
-                const params = new URLSearchParams(parts[1]);
-                gameId = params.get('id');
-            }
-            return { category: rawCategory, gameId };
-        }
-
-        function setupInstructionOverlay() {
-            if (localStorage.getItem(INSTRUCTION_KEY) !== 'seen') {
-                instructionOverlay.style.display = 'flex';
-                document.body.style.overflow = 'hidden'; 
-                setTimeout(() => {
-                    instructionOverlay.classList.remove('opacity-0');
-                    instructionOverlay.classList.add('opacity-100');
-                }, 10);
-                instructionInput.addEventListener('input', (e) => {
-                    if (e.target.value.trim().toLowerCase() === 'i understand') {
-                        instructionOverlay.classList.remove('opacity-100');
-                        instructionOverlay.classList.add('opacity-0');
-                        setTimeout(() => {
-                            instructionOverlay.style.display = 'none';
-                            document.body.style.overflow = '';
-                            localStorage.setItem(INSTRUCTION_KEY, 'seen');
-                        }, 300);
-                    }
-                });
-            }
-        }
-
-        // --- Favorites Management (Live Updates) ---
-        const getFavorites = () => JSON.parse(localStorage.getItem(FAVORITES_KEY)) || [];
-        const saveFavorites = (favs) => localStorage.setItem(FAVORITES_KEY, JSON.stringify(favs));
-        
-        function toggleFavorite(gameId) {
-            const strGameId = String(gameId);
-            let favorites = getFavorites().map(String);
-            const isFavorited = favorites.includes(strGameId);
-
-            if (isFavorited) {
-                favorites = favorites.filter(id => id !== strGameId);
-                saveFavorites(favorites);
-                updateAllFavoriteButtons();
-                const favCard = favoritesGameList.querySelector(`.zone-item[data-game-id='${strGameId}'], .other-zone-item[data-game-id='${strGameId}']`);
-                if (favCard) {
-                    favCard.classList.add('fade-out');
-                    setTimeout(() => {
-                        favCard.remove();
-                        if (favoritesGameList.children.length === 0) {
-                            favoritesHeader.style.display = 'none';
-                            favoritesGameList.style.display = 'none';
-                        }
-                    }, 300); 
-                }
-            } else {
-                favorites.push(strGameId);
-                saveFavorites(favorites);
-                updateAllFavoriteButtons();
-                let gameData = allGames.find(g => String(g.id) === strGameId);
-                if (!gameData) {
-                    allGames.some(g => {
-                        if (g.versions) {
-                            const ver = g.versions.find(v => String(v.favoriteId) === strGameId);
-                            if (ver) {
-                                gameData = { ...g, id: ver.favoriteId, name: `${g.name} - ${ver.name}`, url: ver.url, versions: undefined };
-                                return true;
-                            }
-                        }
-                        return false;
-                    });
-                }
-                if (gameData) {
-                    favoritesHeader.style.display = "block";
-                    favoritesGameList.style.display = "grid";
-                    favoritesGameList.classList.add('grid', 'grid-cols-2', 'sm:grid-cols-3', 'md:grid-cols-5', 'lg:grid-cols-7', 'gap-4');
-                    const newCard = createGameCard(gameData, true);
-                    favoritesGameList.appendChild(newCard);
-                }
-            }
-        }
-
-        function updateAllFavoriteButtons() {
-            const favorites = getFavorites().map(String);
-            document.querySelectorAll('.btn-card-action.fav-action').forEach(btn => {
-                const card = btn.closest('.zone-item, .other-zone-item, .search-item');
-                if (!card) return;
-                const cardGameId = String(card.dataset.gameId);
-                if (btn.classList.contains('version-favorite-btn')) {
-                    const isAnyVersionFavorited = favorites.some(favId => favId.startsWith(cardGameId + '_'));
-                    btn.classList.toggle('favorited', isAnyVersionFavorited);
-                } else {
-                    const isFavorited = favorites.includes(cardGameId);
-                    btn.classList.toggle('favorited', isFavorited);
-                    btn.title = isFavorited ? 'Remove from Favorites' : 'Add to Favorites';
-                }
-            });
-        }
-
-        // --- URL Helpers (Strongdog) ---
-        // Modified to support injected URLs using WORKER_ROOT + directory logic
-        function getAdjustedUrls(imgSrc, page) {
-            if (page && page > 1) {
-                // ../strongdog2/img/... -> exists outside GAMES dir
-                return { adjustedImgSrc: `${WORKER_ROOT}strongdog${page}/img/${imgSrc}` };
-            }
-            // ./img -> assumed inside GAMES dir or wherever relative
-            return { adjustedImgSrc: `${GAMES_BASE_URL}img/${imgSrc}` }; 
-        }
-        
-        function sd_getBaseURLForPage(page) {
-            // Updated to point to WORKER_ROOT for numbered pages, GAMES_BASE_URL for default
-            if (page > 1) return `${WORKER_ROOT}strongdog${page}/`;
-            return `${WORKER_ROOT}STRONGDOG/`; // Assumes default strongdog is at root/STRONGDOG? Or inside GAMES?
-            // Re-reading logic: "stuff like ../DOOM/ will stay in GAMES directory but strongdog# directories exit"
-            // Let's assume default STRONGDOG is adjacent to strongdog2 etc. at root level based on prior naming conventions
-        }
-        
-        async function sd_getEmbedPath(adjustedHref, originalHref, page) {
-            let cleanHref = adjustedHref.replace(/index\.html$/, "").replace(/base\.html$/, "").replace(/\.html$/, "");
-            if (!cleanHref.endsWith("/")) cleanHref += "/";
-            const pathsToTry = [cleanHref + "game/index.html", cleanHref + "game/base.html", cleanHref + "gamereal/index.html", cleanHref + "gamereal/base.html", cleanHref + "index.html", cleanHref + "base.html", ];
-            try {
-                const response = await fetch(adjustedHref);
-                if (response.ok) {
-                    const text = await response.text();
-                    const match = text.match(/embedGame\((['"])(.*?)\1,\s*(['"])(.*?)\3\)/);
-                    if (match) {
-                        const resolvedPath = new URL(match[2], adjustedHref).href;
-                        if (await sd_fileExists(resolvedPath)) return resolvedPath;
-                    }
-                }
-            } catch (error) {}
-            for (const path of pathsToTry) {
-                if (await sd_fileExists(path)) return path;
-            }
-            return adjustedHref;
-        }
-        async function sd_fileExists(url) {
-            try { const response = await fetch(url, { method: "HEAD" }); return response.ok; } catch { return false; }
-        }
-
-        // --- URL Resolution Helper for "Others" ---
-        function resolveGameUrl(relativePath) {
-            // Logic: 
-            // If path starts with ../ -> Go to WORKER_ROOT + path (stripping ../)
-            // If path starts with ../GAMES/ -> It will effectively be WORKER_ROOT/GAMES/ (which matches GAMES_BASE_URL)
-            // This allows us to access root folders like ../GTA-JSDOS/ while keeping ../GAMES/sm64 intact.
-            
-            if (relativePath.startsWith('../')) {
-                const pathPart = relativePath.substring(3); // Remove '../'
-                return `${WORKER_ROOT}${pathPart}`;
-            }
-            
-            // If it doesn't start with ../, assume it's relative to GAMES base
-            return `${GAMES_BASE_URL}${relativePath.replace(/^\.\//, '')}`;
-        }
-
-        // --- Game Data (Others) ---
-        // We keep the original relative paths here so the resolver logic above can handle them dynamically
-        const othersGames = [
-            { id: "other-eaglercraft", name: "Eaglercraft", imgSrc: "./images/eaglercraft.png", description: "The classic survival and building game with authentic block-based physics and multiplayer support, accessible directly in the browser.", category: "Others", versions: [ { name: "Release 1.12.2", url: "../EAGLERCRAFT/eaglercraft-1.12.2.html", favoriteId: "other-eaglercraft_1.12.2" }, { name: "Release 1.12.2 WASM", url: "../EAGLERCRAFT/eaglercraft-1.12.2-wasm.html", favoriteId: "other-eaglercraft_wasm", wasm: true } ] },
-            { id: "other-gta", name: "Grand Theft Auto", imgSrc: "./images/gta.png", description: "The original top-down classic. Cause chaos, complete missions, or just go for a drive in three iconic cities.", category: "Others", versions: [ { name: "Carnage3D", url: "../CARNAGE3D/web/carnage3D.html", favoriteId: "other-gta_carnage3d" }, { name: "Grand Theft Auto (JS-DOS)", url: "../GTA-JSDOS/index.html", favoriteId: "other-gta_jsdos" } ] },
-            { id: "other-simcity", name: "Sim City", imgSrc: "./images/simcity2000.png", description: "The original city-building classics. Design, build, and manage the city of your dreams in either the original Sim City or the detailed Sim City 2000.", category: "Others", versions: [ { name: "Sim City", url: "../SIM-CITY/index.html", favoriteId: "other-simcity_1" }, { name: "Sim City 2000", url: "../SIM-CITY-2/index.html", favoriteId: "other-simcity_2000" } ] },
-            { id: "other-doom", name: "DOOM", imgSrc: "./images/doom.png", description: "The legendary first-person shooter that pioneered the genre, focusing on blasting through hordes of demons in a timeless, adrenaline-fueled classic.", category: "Others", url: "../DOOM/index.html" },
-            { id: "other-sm64", name: "Super Mario 64", imgSrc: "./images/sm64.png", description: "The iconic 3D platformer that revolutionized gaming. Run, jump, and triple-jump your way through vast worlds to collect stars and save the princess.", category: "Others", url: "../GAMES/sm64/index.html" }
-        ];
-
-        // --- Card Creation ---
-
-        function createOthersGameCard(game) {
-            const favorites = getFavorites().map(String);
-            const isAnyFavorite = game.versions ? favorites.some(favId => game.versions.some(v => String(v.favoriteId) === favId)) : favorites.includes(String(game.id));
-            const card = document.createElement("div");
-            card.className = 'other-zone-item bg-card-dark rounded-2xl border border-brand-border col-span-full shadow-lg'; 
-            card.dataset.gameId = game.id;
-
-            // Resolve Image URL
-            const resolvedImgSrc = resolveGameUrl(game.imgSrc);
-
-            let gameButtonsHtml = '';
-            let favoriteButtonHtml = '';
-            
-            if (game.versions && game.versions.length > 0) {
-                const availableVersions = game.versions; 
-                if (availableVersions.length === 1) {
-                    const vUrl = resolveGameUrl(availableVersions[0].url);
-                    gameButtonsHtml = `<button class="btn-card-action play-action" data-url="${vUrl}" data-version-name="${availableVersions[0].name}" title="Play Game"><i class="fa-solid fa-play transition-colors"></i></button>`;
-                } else {
-                    const dropdownLinks = availableVersions.map(v => {
-                        const vUrl = resolveGameUrl(v.url);
-                        return `<a href="#" class="eagler-dropdown-link" data-url="${vUrl}" data-version-name="${v.name}">${v.name}</a>`
-                    }).join('');
-                    gameButtonsHtml = `<div class="relative"><button class="btn-card-action version-btn" title="Select Version"><i class="fa-solid fa-chevron-up transition-colors"></i></button><div class="eagler-dropdown">${dropdownLinks}</div></div>`;
-                }
-                favoriteButtonHtml = `<div class="relative"><button class="btn-card-action fav-action version-favorite-btn ${isAnyFavorite ? 'favorited' : ''}" title="Favorite a version"><i class="fa-solid fa-star fa-solid-star transition-colors"></i><i class="fa-regular fa-star fa-regular-star transition-colors"></i></button><div class="eagler-dropdown">${game.versions.map(v => `<a href="#" class="eagler-dropdown-link favorite-link" data-favorite-id="${v.favoriteId}">${v.name}</a>`).join('')}</div></div>`;
-            } else {
-                const gUrl = resolveGameUrl(game.url);
-                gameButtonsHtml = `<button class="btn-card-action play-action" data-url="${gUrl}" title="Play Game"><i class="fa-solid fa-play transition-colors"></i></button>`;
-                favoriteButtonHtml = `<button class="btn-card-action fav-action ${isAnyFavorite ? 'favorited' : ''}" title="${isAnyFavorite ? 'Remove from Favorites' : 'Add to Favorites'}"><i class="fa-solid fa-star fa-solid-star transition-colors"></i><i class="fa-regular fa-star fa-regular-star transition-colors"></i></button>`;
-            }
-
-            card.innerHTML = `
-                <div class="relative w-full h-full cursor-pointer group" style="min-height: 250px;">
-                    <img data-src="${resolvedImgSrc}" alt="${game.name}" loading="lazy" decoding="async" class="w-full h-full object-cover absolute inset-0 rounded-2xl">
-                    <div class="image-overlay absolute inset-0 transition-colors duration-200"></div>
-                    <div class="absolute inset-0 p-4 sm:p-6 flex flex-col justify-between rounded-2xl">
-                        <div class="flex items-start justify-between w-full">
-                            <h3 class="text-4xl font-bold text-white truncate drop-shadow-lg" style="max-width: 80%;" title="${game.name}">${game.name}</h3>
-                            <div class="flex items-center space-x-3 bg-black/80 backdrop-blur-md rounded-xl px-2 py-1">
-                                ${gameButtonsHtml}
-                                ${favoriteButtonHtml}
-                            </div>
-                        </div>
-                        <p class="text-lg text-white font-medium drop-shadow-lg" style="max-width: 50%;">${game.description}</p>
-                    </div>
-                </div>
-            `;
-            
-            if (!game.versions) { 
-                card.querySelector('.group').addEventListener('click', () => {
-                     const gUrl = resolveGameUrl(game.url);
-                     openZone({...game, url: gUrl}); 
-                }); 
-            }
-            card.querySelectorAll('.play-action').forEach(btn => btn.addEventListener('click', (e) => { e.stopPropagation(); openZone({ ...game, name: btn.dataset.versionName ? `${game.name} - ${btn.dataset.versionName}` : game.name, url: btn.dataset.url }); }));
-            
-            const versionBtn = card.querySelector('.version-btn');
-            if (versionBtn) { versionBtn.addEventListener('click', (e) => { e.stopPropagation(); document.querySelectorAll('.eagler-dropdown.show').forEach(d => d.classList.remove('show')); versionBtn.nextElementSibling.classList.toggle('show'); }); }
-            
-            card.querySelectorAll('.eagler-dropdown-link:not(.favorite-link)').forEach(link => link.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); openZone({ ...game, name: link.dataset.versionName ? `${game.name} - ${link.dataset.versionName}` : game.name, url: link.dataset.url }); link.closest('.eagler-dropdown').classList.remove('show'); }));
-
-            const favBtn = card.querySelector('.btn-card-action.fav-action');
-            if (favBtn.classList.contains('version-favorite-btn')) {
-                favBtn.addEventListener('click', (e) => { e.stopPropagation(); document.querySelectorAll('.eagler-dropdown.show').forEach(d => d.classList.remove('show')); favBtn.nextElementSibling.classList.toggle('show'); });
-                card.querySelectorAll('.favorite-link').forEach(link => link.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); toggleFavorite(link.dataset.favoriteId); link.closest('.eagler-dropdown').classList.remove('show'); }));
-            } else {
-                favBtn.addEventListener('click', (e) => { e.stopPropagation(); toggleFavorite(game.id); });
-            }
-            imageObserver.observe(card.querySelector('img'));
-            return card;
-        }
-
-        function createGameCard(game, forceSmallCard = false) {
-            if (game.category === 'Others' && !forceSmallCard) return createOthersGameCard(game);
-            const isStrongdog = game.category === 'StrongdogXP';
-            
-            // Resolve Image Src
-            let imgSrc = game.imgSrc;
-            if (isStrongdog) {
-                 imgSrc = getAdjustedUrls(game.imgSrc, game.page).adjustedImgSrc;
-            } else if (game.category === 'Others' || game.category === 'Gameboy Games') {
-                 imgSrc = resolveGameUrl(game.imgSrc);
-            }
-
-            const isFavorite = getFavorites().map(String).includes(String(game.id));
-
-            const card = document.createElement("div");
-            card.className = 'zone-item bg-card-dark rounded-2xl border border-brand-border overflow-hidden';
-            card.dataset.gameId = game.id;
-            card.innerHTML = `
-                <div class="relative w-full cursor-pointer group">
-                    <div class="aspect-w-3 aspect-h-2"><img data-src="${imgSrc}" alt="${game.name}" class="w-full h-full object-cover"></div>
-                    <h3 class="absolute top-2 right-2 z-10 max-w-[80%] bg-black/60 backdrop-blur-md rounded-xl px-3 py-1.5 text-white truncate text-sm font-semibold shadow-lg" title="${game.name}">${game.name}</h3>
-                    <div class="absolute bottom-2 right-2 bg-black/80 backdrop-blur-md rounded-xl px-2 py-1 flex items-center space-x-2 shadow-lg">
-                        <button class="btn-card-action play-action" title="Play Game"><i class="fa-solid fa-play transition-colors"></i></button>
-                        <button class="btn-card-action fav-action ${isFavorite ? 'favorited' : ''}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}"><i class="fa-solid fa-star fa-solid-star transition-colors"></i><i class="fa-regular fa-star fa-regular-star transition-colors"></i></button>
-                    </div>
-                </div>
-            `;
-            
-            const handlePlay = async (e) => {
-                e.stopPropagation();
-                if (isStrongdog) {
-                    const baseURL = sd_getBaseURLForPage(game.page);
-                    let adjustedHref = baseURL.endsWith("/") ? baseURL + game.href.replace(/^\.\//, "") : baseURL + "/" + game.href.replace(/^\.\//, "");
-                    const embedPath = await sd_getEmbedPath(adjustedHref, game.href, game.page);
-                    openZone({ name: game.name, url: embedPath, category: game.category, id: game.id });
-                } else {
-                    // For GN-Math, url is absolute (handled in init). For Others/Gameboy, we might need to resolve
-                    let gUrl = game.url;
-                    if (game.category === 'Others' || game.category === 'Gameboy Games') {
-                        gUrl = resolveGameUrl(game.url);
-                    }
-                    openZone({ ...game, url: gUrl });
-                }
-            };
-
-            card.querySelector('.group').addEventListener('click', handlePlay);
-            card.querySelector('.play-action').addEventListener('click', handlePlay);
-            card.querySelector('.fav-action').addEventListener('click', (e) => { e.stopPropagation(); toggleFavorite(game.id); });
-            imageObserver.observe(card.querySelector('img'));
-            return card;
-        }
-
-        // --- Game Viewer Logic ---
-        function openZone(game) {
-            if (!game || !game.url) return;
-            updateURL(categories[currentCategoryIndex], game.id || null);
-            
-            const zoneViewer = document.getElementById('zoneViewer');
-            const zoneFrame = document.getElementById('zoneFrame');
-            const zoneNameEl = document.getElementById('zoneNameEl');
-            const downloadBtn = document.getElementById('downloadBtnZone');
-            
-            // Setup Download Button (Specific to Eaglercraft)
-            if (game.baseGameId === 'other-eaglercraft' || game.id === 'other-eaglercraft') {
-                downloadBtn.href = game.url;
-                downloadBtn.download = game.name.replace(/ /g, '_') + '.html';
-                downloadBtn.removeAttribute('target');
-                downloadBtn.classList.remove('hidden');
-            } else {
-                downloadBtn.classList.add('hidden');
-                downloadBtn.href = '#';
-                downloadBtn.removeAttribute('download');
-            }
-
-            zoneNameEl.textContent = game.name;
-            
-            // RESET FRAME BEFORE LOAD
-            zoneFrame.src = 'about:blank';
-            
-            // SECURITY: Set sandbox permissions
-            const sandboxRules = 'allow-scripts allow-same-origin allow-forms allow-pointer-lock';
-            zoneFrame.setAttribute('sandbox', sandboxRules);
-            zoneFrame.setAttribute('allow', 'fullscreen; pointer-lock; autoplay; clipboard-write');
-
-            // --- REVISED LOGIC FOR LOADING GAMES ---
-            // With raw.githack.com, we can treat GN-Math games as standard URL games again
-            // because Githack serves correct Content-Type: text/html headers.
-            const isStandardURLGame = game.category === 'StrongdogXP' || game.category === 'Others' || game.category === 'GN-Math';
-            
-            if (isStandardURLGame) {
-                // Load URL directly for standard games
-                zoneFrame.src = game.url;
-                zoneViewer.style.display = "flex";
-            } else {
-                // Fallback for other potential categories (same logic as before: fetch & write)
-                fetch(`${game.url}?t=${Date.now()}`)
-                    .then(response => {
-                        if (!response.ok) throw new Error(`HTTP error ${response.status}`);
-                        return response.text();
-                    })
-                    .then(html => {
-                        const doc = zoneFrame.contentWindow.document;
-                        doc.open();
-                        doc.write(html);
-                        doc.close();
-                        zoneViewer.style.display = "flex";
-                    })
-                    .catch(error => {
-                        console.error(`Failed to load game "${game.name}": ${error.message}`);
-                        zoneFrame.src = game.url;
-                        zoneViewer.style.display = "flex";
-                    });
-            }
-        }
-
-        function closeZoneViewer() {
-            updateURL(categories[currentCategoryIndex]);
-            const downloadBtn = document.getElementById('downloadBtnZone');
-            downloadBtn.classList.add('hidden');
-            downloadBtn.href = '#';
-            downloadBtn.removeAttribute('download');
-            downloadBtn.removeAttribute('target');
-            const zoneViewer = document.getElementById('zoneViewer');
-            const zoneFrame = document.getElementById('zoneFrame');
-            zoneViewer.style.display = "none";
-            if (zoneFrame) {
-                zoneFrame.src = 'about:blank';
-            }
-        }
-
-        // --- Render Lists ---
-        function renderGames(gamesToRender, targetElement, forceSmallCard = false) {
-            targetElement.innerHTML = '';
-            targetElement.className = (categories[currentCategoryIndex] === 'Others' && !forceSmallCard) ? 'grid grid-cols-1 gap-6 mt-6' : 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-4 mt-6';
-            gamesToRender.forEach(game => targetElement.appendChild(createGameCard(game, forceSmallCard)));
-            observeImages(targetElement);
-        }
-
-        function renderFavorites() {
-            const favoriteIds = getFavorites().map(String);
-            if (favoriteIds.length > 0) {
-                favoritesHeader.style.display = "block";
-                favoritesGameList.style.display = "grid"; 
-                const favoriteGames = [];
-                allGames.forEach(game => {
-                    if (favoriteIds.includes(String(game.id)) && !game.versions) { favoriteGames.push(game); }
-                    else if (game.versions) { 
-                        game.versions.forEach(v => { 
-                            if (favoriteIds.includes(String(v.favoriteId))) {
-                                // Need to resolve URL here for favorites too!
-                                let vUrl = v.url;
-                                if (game.category === 'Others' || game.category === 'Gameboy Games') {
-                                    vUrl = resolveGameUrl(v.url);
-                                } else if (game.category === 'StrongdogXP') {
-                                    // Strongdog favorites usually just rely on the ID to regenerate logic, but for safety in this object:
-                                    // Logic remains handled inside createGameCard via ID lookup generally, but let's leave as is 
-                                    // because strongdog logic inside createGameCard regenerates paths based on ID/Page props anyway.
-                                }
-
-                                favoriteGames.push({ ...game, id: v.favoriteId, name: `${game.name} - ${v.name}`, url: vUrl, versions: undefined }); 
-                            }
-                        }); 
-                    }
-                });
-                renderGames(favoriteGames.sort((a, b) => a.name.localeCompare(b.name)), favoritesGameList, true);
-            } else {
-                favoritesHeader.style.display = "none";
-                favoritesGameList.style.display = "none";
-            }
-        }
-
-        // --- Category Nav ---
-        function updateArrowVisibility() {
-            prevCategoryBtn.disabled = currentCategoryIndex === 0;
-            nextCategoryBtn.disabled = currentCategoryIndex === categories.length - 1;
-        }
-
-        function switchCategory(newIndex) {
-            currentCategoryIndex = newIndex;
-            categorySlider.style.transform = `translateX(-${currentCategoryIndex * (100 / categories.length)}%)`;
-            renderGamesForCurrentCategory();
-            updateArrowVisibility();
-            updateURL(categories[currentCategoryIndex]);
-        }
-        
-        async function renderGamesForCurrentCategory() {
-            const categoryName = categories[currentCategoryIndex];
-            gamesGridContainer.classList.add('opacity-0');
-            await new Promise(r => setTimeout(r, 150));
-            renderGames(allGames.filter(g => g.category === categoryName), gamesGridContainer, false);
-            gamesGridContainer.classList.remove('opacity-0');
-        }
-
-        // --- Search ---
-        function debounce(func, delay) {
-            let timeout;
-            return function(...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), delay);
-            };
-        }
-
-        const handleSearch = debounce(() => {
-            const text = searchInput.value.toLowerCase().trim();
-            const filteredDropdown = text ? searchableGames.filter(g => g.name.toLowerCase().includes(text)).slice(0, 5) : [];
-            
-            searchResults.innerHTML = "";
-            
-            if (filteredDropdown.length === 0 || !text) {
-                searchResults.style.display = "none";
-                searchDivider.style.display = "none";
-                return;
-            }
-            
-            const favorites = getFavorites().map(String);
-            filteredDropdown.forEach(game => {
-                const isStrongdog = game.category === 'StrongdogXP';
-                let imgSrc;
-                let finalGameData = { ...game }; // clone
-
-                if (isStrongdog) {
-                    const { adjustedImgSrc } = getAdjustedUrls(game.imgSrc, game.page);
-                    imgSrc = adjustedImgSrc;
-                } else if (game.category === 'Others' || game.category === 'Gameboy Games') {
-                    imgSrc = resolveGameUrl(game.imgSrc);
-                    finalGameData.url = resolveGameUrl(game.url);
-                } else {
-                    imgSrc = game.imgSrc;
-                }
-                
-                const linkEl = document.createElement("a");
-                linkEl.href = '#';
-                linkEl.className = 'search-item flex justify-between items-center';
-                linkEl.dataset.gameId = game.id;
-                let isFavorite = favorites.includes(String(game.id));
-
-                linkEl.innerHTML = `
-                    <div class="flex items-center truncate min-w-0">
-                        <img src="${imgSrc}" alt="${game.name}" class="w-10 h-10 rounded-lg object-cover flex-shrink-0">
-                        <span class="ml-3 font-medium truncate text-gray-200" title="${game.name}">${game.name}</span>
-                    </div>
-                    <div class="flex items-center flex-shrink-0">
-                        <div class="bg-black/80 backdrop-blur-md rounded-xl px-2 py-1 flex items-center space-x-2">
-                            <button class="btn-card-action play-action" title="Play Game">
-                                <i class="fa-solid fa-play transition-colors"></i>
-                            </button>
-                            <button class="btn-card-action fav-action ${isFavorite ? 'favorited' : ''}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}">
-                                <i class="fa-solid fa-star fa-solid-star transition-colors"></i>
-                                <i class="fa-regular fa-star fa-regular-star transition-colors"></i>
-                            </button>
-                        </div>
-                    </div>
-                `;
-                
-                const favBtn = linkEl.querySelector('.fav-action');
-                favBtn.addEventListener('click', (e) => {
-                    e.preventDefault(); e.stopPropagation(); 
-                    toggleFavorite(game.id);
-                });
-
-                linkEl.addEventListener('click', async (e) => {
-                    e.preventDefault();
-                    if (isStrongdog) {
-                        const baseURL = sd_getBaseURLForPage(game.page);
-                        let adjustedHref = baseURL.endsWith("/") ? baseURL + game.href.replace(/^\.\//, "") : baseURL + "/" + game.href.replace(/^\.\//, "");
-                        const embedPath = await sd_getEmbedPath(adjustedHref, game.href, game.page);
-                        const strongdogGameData = { name: game.name, url: embedPath, category: game.category, id: game.id };
-                        openZone(strongdogGameData);
-                    } else {
-                        openZone(finalGameData);
-                    }
-                    searchResults.style.display = "none";
-                    searchDivider.style.display = "none";
-                });
-                searchResults.appendChild(linkEl);
-            });
-            searchResults.style.display = "block";
-            searchDivider.style.display = "block";
-        }, 250);
-
-        // --- FETCHING DATA MANUALLY (NO MODULES) ---
-        // This function fetches the JS file as text, transforms it to set a global variable, and evals it.
-        // This bypasses module loading restrictions on file:// protocols.
-        async function fetchGameData() {
-            try {
-                // Fetch the file
-                const response = await fetch(CARDS_DATA_URL);
-                if (!response.ok) throw new Error('Failed to fetch game data');
-                let scriptText = await response.text();
-                
-                // Transform 'export default' to 'window.loadedGameData ='
-                // This assumes the file structure is simple "export default [...]"
-                if (scriptText.includes('export default')) {
-                    scriptText = scriptText.replace('export default', 'window.loadedGameData =');
-                }
-                
-                // Execute the script
-                // We use new Function instead of eval for slight isolation, though still unsafe for untrusted code
-                // (But we trust this source).
-                // However, new Function creates a local scope. We need global assignment.
-                // Standard eval or appending a script tag is better.
-                const scriptEl = document.createElement('script');
-                scriptEl.textContent = scriptText;
-                document.body.appendChild(scriptEl);
-                
-                // Wait a tick for execution
-                await new Promise(resolve => setTimeout(resolve, 0));
-                
-                if (window.loadedGameData) {
-                    return window.loadedGameData;
-                } else {
-                    console.warn("Script loaded but window.loadedGameData is undefined");
-                    return [];
-                }
-            } catch (e) {
-                console.error("Error manual loading games:", e);
-                return [];
-            }
-        }
-
-        // --- Init ---
-        async function initializeApp() {
-            // Load Game Data Manually
-            let gamesData = [];
-            try {
-                gamesData = await fetchGameData();
-            } catch (e) {
-                console.error("Could not load external games data", e);
-            }
-            
-            const strongdogGames = gamesData.map(g => ({ ...g, category: 'StrongdogXP' }));
-            
-            try {
-                const res = await fetch(GN_ZONES_URL);
-                const gnMathRaw = await res.json();
-                const gnMathGames = gnMathRaw.map(g => ({ id: `gn-${g.id}`, name: g.name, imgSrc: g.cover.replace("{COVER_URL}", GN_COVER_URL_BASE), category: 'GN-Math', url: g.url.replace("{HTML_URL}", GN_HTML_URL_BASE) }));
-                allGames = [...strongdogGames, ...gnMathGames, ...othersGames];
-            } catch (error) { 
-                console.warn("Failed to load GN-Math, falling back to others.", error);
-                allGames = [...strongdogGames, ...othersGames]; 
-            }
-
-            allGames = allGames.filter(g => !['bitlife', 'soundboard'].some(term => g.name.toLowerCase().includes(term)));
-            
-            searchableGames = [];
-            allGames.forEach(game => {
-                if (game.versions && game.versions.length > 0) {
-                    game.versions.forEach(version => {
-                        searchableGames.push({
-                            ...game,
-                            id: version.favoriteId,
-                            name: `${game.name} - ${version.name}`,
-                            url: version.url,
-                            wasm: version.wasm,
-                            versions: undefined,
-                            baseGameId: game.id
-                        });
-                    });
-                } else {
-                    searchableGames.push(game);
-                }
-            });
-
-            categories = ['StrongdogXP', 'GN-Math', 'Gameboy Games', 'Others'].filter(cat => allGames.some(g => g.category === cat));
-
-            const { category: urlCat } = parseURL();
-            if (urlCat) currentCategoryIndex = Math.max(0, categories.findIndex(c => c.replace(/\s+/g, '-').toLowerCase() === urlCat.toLowerCase()));
-
-            categorySlider.style.width = `${categories.length * 100}%`;
-            categorySlider.innerHTML = categories.map(cat => `<div class="w-64 flex-shrink-0"><h2 class="text-3xl font-bold ${categoryColors[cat] || 'text-white'}"><strong>${cat}</strong></h2></div>`).join('');
-
-            switchCategory(currentCategoryIndex);
-            renderFavorites();
-            setupInstructionOverlay();
-            
-            searchInput.placeholder = `Search all games...`;
-            searchInput.addEventListener("input", handleSearch);
-            searchInput.addEventListener("focus", handleSearch);
-
-            document.addEventListener("click", ev => {
-                if (!document.getElementById('bottom-fixed-bar').contains(ev.target)) {
-                    searchResults.style.display = "none";
-                    searchDivider.style.display = "none";
-                }
-                if (!ev.target.closest('.version-btn') && !ev.target.closest('.version-favorite-btn') && !ev.target.closest('.eagler-dropdown')) {
-                    document.querySelectorAll('.eagler-dropdown.show').forEach(d => {
-                        d.classList.remove('show');
-                    });
-                }
-            });
+                            <input type="url" id="panicUrl1" class="input-text-style" placeholder="e.g., https://google.com">
+                        </div>
+                        
+                        <div class="flex items-center gap-4 mb-3">
+                            <input type="text" id="panicKey2" data-key-id="2" class="input-key-style panic-key-input" placeholder="-" maxlength="1">
+                            <input type="url" id="panicUrl2" class="input-text-style" placeholder="e.g., https://youtube.com/feed/subscriptions">
+                        </div>
+                        
+                        <div class="flex items-center gap-4 mb-3">
+                            <input type="text" id="panicKey3" data-key-id="3" class="input-key-style panic-key-input" placeholder="-" maxlength="1">
+                            <input type="url" id="panicUrl3" class="input-text-style" placeholder="e.g., https://wikipedia.org">
+                        </div>
+                        
+                        <div class="flex justify-between items-center pt-4 border-t border-[#252525]">
+                            <p id="panicKeyMessage" class="general-message-area text-sm"></p>
+                            <button id="applyPanicKeyBtn" class="btn-toolbar-style btn-primary-override w-36" style="padding: 0.5rem 0.75rem;">
+                                <i class="fa-solid fa-check mr-1"></i> Apply Keys
+                            </button>
+                        </div>
+                    </div>
+                </div>
 
-            prevCategoryBtn.addEventListener('click', () => switchCategory(currentCategoryIndex - 1));
-            nextCategoryBtn.addEventListener('click', () => switchCategory(currentCategoryIndex + 1));
-            document.getElementById('closeBtnZone').addEventListener('click', closeZoneViewer);
-
-            // --- FULLSCREEN BUTTON LISTENER ---
-            document.getElementById('fullscreenBtnZone').addEventListener('click', () => {
-                const zoneFrame = document.getElementById('zoneFrame');
-                if (zoneFrame && zoneFrame.requestFullscreen) {
-                    zoneFrame.requestFullscreen();
-                } else if (zoneFrame && zoneFrame.webkitRequestFullscreen) {
-                    zoneFrame.webkitRequestFullscreen();
-                } else if (zoneFrame && zoneFrame.msRequestFullscreen) {
-                    zoneFrame.msRequestFullscreen();
-                }
-            });
+                <div id="tab-about" class="settings-section hidden">
+                    <h3 class="text-3xl font-bold text-white mb-6">About 4SP</h3>
+                    <div class="settings-box p-6 flex flex-col items-center text-center">
+                        <img src="https://cdn.jsdelivr.net/npm/4sp-asset-library@latest/logo.png" class="h-24 mb-4" alt="Logo">
+                        <h1 class="text-3xl font-bold text-white mb-2">(4SP) 4simpleproblems</h1>
+                        <p class="text-gray-400 mb-6 max-w-lg font-light">From a soundboard, to a full downloadable client of a platform.</p>
+                        
+                        <div class="inline-block bg-[#0a0a0a] border border-[#333] px-4 py-2 rounded-[14px] mb-8">
+  <span class="text-gray-500 text-sm">Version:</span>
+  <span class="text-indigo-400 font-mono font-bold ml-2">5.0.0 (DV)</span>
+</div>
 
-            creditsBtn.addEventListener('click', () => { creditsModal.style.display = 'flex'; creditsContent.innerHTML = categories.map(cat => CREDITS_DATA[cat] ? `<div class="p-4 border border-brand-border rounded-lg"><h4 class="font-bold mb-1">${cat}</h4><p class="text-sm text-gray-400">${CREDITS_DATA[cat].credit}</p></div>` : '').join(''); });
-            closeCreditsBtn.addEventListener('click', () => creditsModal.style.display = 'none');
-        }
+                        
+                        <div class="flex gap-4">
+                            <a href="https://github.com/4simpleproblems-v5" class="text-gray-400 hover:text-white transition"><i class="fa-brands fa-github fa-xl"></i></a>
+                            <a href="https://youtube.com/4simpleproblems" class="text-gray-400 hover:text-white transition"><i class="fa-brands fa-youtube fa-xl"></i></a>
+                            <a href="https://x.com/@4simpleproblems" class="text-gray-400 hover:text-white transition"><i class="fa-brands fa-discord fa-xl"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="cropperModal">
+        <div id="cropperContent">
+            <div class="flex justify-between items-center p-6 border-b border-[#333] bg-black">
+                <h3 class="text-2xl font-bold text-white">Adjust Profile Picture</h3>
+                <button id="cancelCropBtn" class="btn-toolbar-style w-10 h-10 flex items-center justify-center p-0 rounded-xl">
+                     <i class="fa-solid fa-xmark fa-xl"></i>
+                </button>
+            </div>
+            <div class="flex flex-col items-center p-6 bg-[#0a0a0a]">
+                <p class="text-sm text-gray-400 mb-4">Drag to move. Scroll to resize.</p>
+                <div id="cropperCanvasContainer" class="relative mb-6 border border-[#333] rounded-lg overflow-hidden w-full flex justify-center bg-black">
+                    <canvas id="cropperCanvas"></canvas>
+                </div>
+                <div class="flex justify-end w-full">
+                    <button id="submitCropBtn" class="btn-toolbar-style btn-primary-override px-6 py-2 rounded-xl">
+                        <i class="fa-solid fa-check mr-2"></i> Submit
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
-        document.addEventListener('DOMContentLoaded', initializeApp);
-    </script>
-</body>
-</html>
-    </template>
+    <div id="universal-loader" class="fixed inset-0 bg-[#000000] z-[9999] opacity-0 flex flex-col items-end justify-end p-12 transition-opacity duration-200 hidden">
+        <img src="https://cdn.jsdelivr.net/npm/4sp-asset-library@latest/logo.png" class="absolute top-6 right-6 h-12 w-auto opacity-50" alt="Logo">
+        <div class="flex flex-col items-end gap-2">
+            <h2 id="loader-title" class="text-white text-3xl font-light italic font-[Geist]">Loading...</h2>
+            <div class="w-64 h-1 bg-[#333] rounded-full overflow-hidden">
+                <div id="loader-bar" class="h-full bg-white w-0 transition-all duration-1000 ease-out"></div>
+            </div>
+        </div>
+    </div>
 
     <script type="module">
         import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
@@ -1828,7 +872,16 @@
         const displayUsername = document.getElementById('display-username');
         const displayEmail = document.getElementById('display-email');
 
-        const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.18/logged-in/';
+        const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.45/logged-in/';
+        
+        // Preload Logos
+        const preloadImgs = [
+            'https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo-dark.png',
+            'https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo-christmas.png',
+            'https://cdn.jsdelivr.net/npm/4sp-asset-library@latest/logo.png'
+        ];
+        preloadImgs.forEach(src => new Image().src = src);
+
         const STORAGE_KEY = 'local_access_code';
         const USER_DATA_KEY = 'local_user_data';
         const LAST_PAGE_KEY = 'local_last_page';
@@ -1850,11 +903,13 @@
         let currentUser = null;
         let userDataUnsubscribe = null;
 
-        // --- ADMIN KEYBINDS LOGIC (Integrated) ---
+        // --- ADMIN KEYBINDS LOGIC (Updated to Match admin_keybinds.js exactly) ---
         function initAdminKeybinds(db, auth, user) {
             console.log("[Admin Keybinds] Initializing for", user.uid);
             let explicitEnabled = true;
+            let thirdPartyEnabled = true; // Track third party state
             let lastEnablePressTime = 0;
+            let lastThirdPartyEnablePressTime = 0; // Separate timer for third party
             let configUnsubscribe = null;
 
             // Visual Feedback Helper
@@ -1865,7 +920,7 @@
                 const toast = document.createElement("div");
                 toast.id = "admin-keybind-toast";
 
-                // Styles
+                // Styles matching admin_keybinds.js exactly
                 Object.assign(toast.style, {
                     position: "fixed",
                     bottom: "24px",
@@ -1873,12 +928,12 @@
                     display: "flex",
                     alignItems: "center",
                     gap: "12px",
-                    backgroundColor: "rgba(13, 13, 13, 0.95)",
+                    backgroundColor: "rgba(13, 13, 13, 0.95)", // Dark glass effect
                     backdropFilter: "blur(5px)",
-                    color: "#c0c0c0",
+                    color: "#c0c0c0", // Light gray text
                     padding: "14px 20px",
                     borderRadius: "12px",
-                    border: "1px solid #333",
+                    border: "1px solid #333", // Dark border
                     fontFamily: "'Geist', 'Roboto', sans-serif",
                     fontSize: "14px",
                     fontWeight: "500",
@@ -1924,9 +979,16 @@
                         const data = docSnap.data();
                         if (data.explicitEnabled !== undefined) {
                             explicitEnabled = data.explicitEnabled;
+                            console.log(`[Admin Keybinds] Explicit Enabled: ${explicitEnabled}`);
+                        }
+                        if (data.thirdPartyEnabled !== undefined) {
+                            thirdPartyEnabled = data.thirdPartyEnabled;
+                            console.log(`[Admin Keybinds] Third Party Enabled: ${thirdPartyEnabled}`);
                         }
                     } else {
+                        console.log("[Admin Keybinds] Config doc missing. Defaulting to TRUE.");
                         explicitEnabled = true;
+                        thirdPartyEnabled = true;
                     }
                 }, (error) => console.error("Config Listen Error:", error));
             }
@@ -1934,39 +996,87 @@
             // Init Listener
             subscribeToConfig();
 
-            // Key Listener
-            document.addEventListener('keydown', async (e) => {
-                if (e.ctrlKey && e.altKey && (e.key.toLowerCase() === 'e' || e.code === 'KeyE')) {
-                    e.preventDefault();
-                    console.log("[Admin Keybinds] Ctrl+Alt+E detected.");
-
-                    if (explicitEnabled) {
+            // EXPOSE GLOBAL TRIGGERS
+            window.triggerAdminKeybind = async () => {
+                console.log("[Admin Keybinds] Triggered via global function.");
+                if (explicitEnabled) {
+                    // Logic for disabling (Immediate)
+                    console.log("[Admin Keybinds] Disabling explicit sounds...");
+                    try {
+                        await setDoc(doc(db, 'config', 'soundboard'), { explicitEnabled: false }, { merge: true });
+                        showAdminToast("Explicit Sounds: DISABLED", "red");
+                        lastEnablePressTime = 0;
+                    } catch (err) {
+                        console.error("[Admin Keybinds] Failed to disable:", err);
+                        showAdminToast("Error: Check Console", "red");
+                    }
+                } else {
+                    // Logic for enabling (Double Press Safety)
+                    const now = Date.now();
+                    if (now - lastEnablePressTime < 1500) { 
+                        console.log("[Admin Keybinds] Enabling explicit sounds...");
                         try {
-                            await setDoc(doc(db, 'config', 'soundboard'), { explicitEnabled: false }, { merge: true });
-                            showAdminToast("Explicit Sounds: DISABLED", "red");
+                            await setDoc(doc(db, 'config', 'soundboard'), { explicitEnabled: true }, { merge: true });
+                            showAdminToast("Explicit Sounds: ENABLED", "green");
                             lastEnablePressTime = 0;
                         } catch (err) {
-                            console.error("[Admin Keybinds] Failed to disable:", err);
+                            console.error("[Admin Keybinds] Failed to enable:", err);
                             showAdminToast("Error: Check Console", "red");
                         }
                     } else {
-                        const now = Date.now();
-                        if (now - lastEnablePressTime < 1500) { 
-                            try {
-                                await setDoc(doc(db, 'config', 'soundboard'), { explicitEnabled: true }, { merge: true });
-                                showAdminToast("Explicit Sounds: ENABLED", "green");
-                                lastEnablePressTime = 0;
-                            } catch (err) {
-                                console.error("[Admin Keybinds] Failed to enable:", err);
-                                showAdminToast("Error: Check Console", "red");
-                            }
-                        } else {
-                            showAdminToast("Press Ctrl+Alt+E again to ENABLE", "blue");
-                            lastEnablePressTime = now;
+                        console.log("[Admin Keybinds] Waiting for confirm...");
+                        showAdminToast("Press Ctrl+Shift+E again to ENABLE", "blue");
+                        lastEnablePressTime = now;
+                    }
+                }
+            };
+            
+            window.triggerThirdPartyKeybind = async () => {
+                console.log("[Admin Keybinds] Triggered Third Party toggle.");
+                if (thirdPartyEnabled) {
+                    // Disable (Immediate)
+                    try {
+                        await setDoc(doc(db, 'config', 'soundboard'), { thirdPartyEnabled: false }, { merge: true });
+                        showAdminToast("Third Party Sounds: HIDDEN", "red");
+                        lastThirdPartyEnablePressTime = 0;
+                    } catch (err) {
+                        console.error("[Admin Keybinds] Failed to disable:", err);
+                        showAdminToast("Error: Check Console", "red");
+                    }
+                } else {
+                    // Enable (Double Press Safety)
+                    const now = Date.now();
+                    if (now - lastThirdPartyEnablePressTime < 1500) { 
+                        try {
+                            await setDoc(doc(db, 'config', 'soundboard'), { thirdPartyEnabled: true }, { merge: true });
+                            showAdminToast("Third Party Sounds: SHOWN", "green");
+                            lastThirdPartyEnablePressTime = 0;
+                        } catch (err) {
+                            console.error("[Admin Keybinds] Failed to enable:", err);
+                            showAdminToast("Error: Check Console", "red");
                         }
+                    } else {
+                        showAdminToast("Press Ctrl+Shift+F again to SHOW", "blue");
+                        lastThirdPartyEnablePressTime = now;
                     }
                 }
-            });
+            };
+
+            // Key Listener (Parent Window)
+            window.addEventListener('keydown', async (e) => {
+                // Trigger is Ctrl + Shift + E
+                if (e.ctrlKey && e.shiftKey && (e.key.toLowerCase() === 'e' || e.code === 'KeyE')) {
+                    e.preventDefault();
+                    window.triggerAdminKeybind();
+                }
+                // Trigger is Ctrl + Shift + F
+                if (e.ctrlKey && e.shiftKey && (e.key.toLowerCase() === 'f' || e.code === 'KeyF')) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    e.stopPropagation();
+                    window.triggerThirdPartyKeybind();
+                }
+            }, { capture: true });
         }
 
         // --- ANALYTICS LOGIC (Integrated) ---
@@ -2053,10 +1163,11 @@
             
             let currentPath = activePageUrl.replace(BASE_URL, '');
             
-            Object.values(PAGE_DATA).forEach(page => {
+            Object.entries(PAGE_DATA).forEach(([key, page]) => {
                 const isAuth = page.url === currentPath;
                 const tab = document.createElement('a');
                 tab.className = `nav-tab ${isAuth ? 'active' : ''}`;
+                if (key === 'settings') tab.id = 'nav-settings-tab';
                 tab.innerHTML = `<i class="${page.icon}"></i> ${page.name}`;
                 tab.onclick = () => loadPage(page.url);
                 tabsContainerEl.appendChild(tab);
@@ -2106,7 +1217,26 @@
             }
             
             // Initial check
-            setTimeout(updateScrollGilders, 50);
+            setTimeout(() => {
+                updateScrollGilders();
+                
+                // Ensure Active Tab Visibility (Scroll if under gradient)
+                const activeTab = tabsContainerEl.querySelector('.nav-tab.active');
+                if (activeTab) {
+                    const containerRect = tabsContainerEl.getBoundingClientRect();
+                    const tabRect = activeTab.getBoundingClientRect();
+                    const gradientWidth = 70; // Gradient is ~60px + padding
+
+                    // Check Left Edge
+                    if (tabRect.left < containerRect.left + gradientWidth) {
+                        tabsContainerEl.scrollBy({ left: tabRect.left - containerRect.left - gradientWidth - 20, behavior: 'smooth' });
+                    }
+                    // Check Right Edge
+                    else if (tabRect.right > containerRect.right - gradientWidth) {
+                         tabsContainerEl.scrollBy({ left: tabRect.right - containerRect.right + gradientWidth + 20, behavior: 'smooth' });
+                    }
+                }
+            }, 50);
         }
 
         // Auth Menu
@@ -2152,6 +1282,8 @@
                              pfpType: data.pfpType,
                              customPfp: data.customPfp,
                              pfpLetterBg: data.pfpLetterBg,
+                             letterAvatarText: data.letterAvatarText, 
+                             letterAvatarTextColor: data.letterAvatarTextColor, // New Field
                              navbarTheme: data.navbarTheme // Sync theme if updated remotely
                          };
                          
@@ -2217,12 +1349,16 @@
             let pfpHtml = '';
             
             if (pfpType === 'custom' && userData.customPfp) {
-                pfpHtml = `<img src="${userData.customPfp}" class="w-full h-full object-cover rounded-full" alt="Profile">`;
+                pfpHtml = `<img src="${userData.customPfp}" class="w-full h-full object-cover rounded-[14px]" alt="Profile">`;
             } else {
                 // Letter Avatar
-                const letter = (userData.username || 'U').charAt(0).toUpperCase();
+                const initial = (userData.username || 'U').charAt(0).toUpperCase();
+                const letter = userData.letterAvatarText || initial; // Use custom text or fallback
                 const bgColor = userData.pfpLetterBg || '#3B82F6'; // Default blue
-                pfpHtml = `<div class="w-full h-full rounded-full flex items-center justify-center text-white font-bold text-lg" style="background-color: ${bgColor};">${letter}</div>`;
+                // Adjust font size if length > 1
+                const fontSizeClass = letter.length > 2 ? 'text-xs' : (letter.length > 1 ? 'text-sm' : 'text-lg');
+                
+                pfpHtml = `<div class="w-full h-full rounded-[14px] flex items-center justify-center text-white font-bold ${fontSizeClass}" style="background-color: ${bgColor};">${letter}</div>`;
             }
             
             authBtn.innerHTML = pfpHtml;
@@ -2392,6 +1528,36 @@
             const settingsOverlay = document.getElementById('settings-overlay');
             if (settingsOverlay) settingsOverlay.classList.add('hidden');
 
+            // --- UNIVERSAL LOADER LOGIC ---
+            // Normalize page name to find title
+            let cleanPageName = pageName;
+            if (cleanPageName.startsWith('./')) cleanPageName = cleanPageName.substring(2);
+            if (cleanPageName.startsWith(BASE_URL)) cleanPageName = cleanPageName.substring(BASE_URL.length);
+            // remove query params for lookup
+            let lookupName = cleanPageName.split('?')[0].replace('.html', '');
+            
+            const loader = document.getElementById('universal-loader');
+            const loaderTitle = document.getElementById('loader-title');
+            const loaderBar = document.getElementById('loader-bar');
+            
+            if (loader && loaderTitle && loaderBar) {
+                // Determine Title
+                let pageTitle = "Loading...";
+                const pageEntry = Object.values(PAGE_DATA).find(p => p.url === cleanPageName || p.url.includes(lookupName));
+                if (pageEntry) pageTitle = pageEntry.name;
+                
+                loaderTitle.textContent = pageTitle;
+                
+                // Show Loader
+                loader.classList.remove('hidden');
+                // Trigger reflow/anim
+                requestAnimationFrame(() => {
+                    loader.classList.remove('opacity-0');
+                    loader.classList.add('active');
+                    loaderBar.style.width = "70%"; // Start animation
+                });
+            }
+
             // Normalize path
             if (pageName.startsWith('./')) pageName = pageName.substring(2);
             if (pageName.startsWith('../')) pageName = pageName.substring(3);
@@ -2410,67 +1576,7 @@
             localStorage.setItem(LAST_PAGE_KEY, pageName);
             renderNavbar(pageName);
 
-            // --- SPECIAL HANDLING FOR GAMES.HTML ---
-            if (pageName === 'games.html') {
-                const template = document.getElementById('games-page-template');
-                if (template) {
-                     // Create new iframe
-                    const oldFrame = document.getElementById('app-frame');
-                    const newFrame = document.createElement('iframe');
-                    newFrame.id = 'app-frame';
-                    
-                    if (oldFrame) {
-                        newFrame.style.cssText = oldFrame.style.cssText;
-                        if (oldFrame.parentNode) oldFrame.parentNode.replaceChild(newFrame, oldFrame);
-                    } else {
-                        newFrame.style.width = '100%';
-                        newFrame.style.height = '100%';
-                        newFrame.style.border = 'none';
-                        newFrame.style.display = 'block';
-                        newFrame.style.flexGrow = '1';
-                        document.body.appendChild(newFrame);
-                    }
-                    appFrame = newFrame;
-                    
-                    const doc = newFrame.contentWindow.document;
-                    doc.open();
-                    
-                    // We still need the base tag for certain resources, but imports inside template use absolute
-                    const baseTag = '<base href="' + BASE_URL + '">';
-                    
-                    // Client bridge script
-                    const patchScript = `
-                        <script>
-                            window._LOCAL_MODE = true;
-                            window._CURRENT_PAGE_NAME = "${pageName}";
-                            
-                            window.currentUser = {
-                                uid: '${currentUser ? currentUser.uid : "client-user"}',
-                                displayName: '${currentUser ? currentUser.username : "Client User"}',
-                                email: '${currentUser ? currentUser.email : "local@client"}',
-                                photoURL: null,
-                                providerData: []
-                            };
-
-                            window.openSettings = function() { window.parent.openSettings(); };
-                            
-                            // Forward keydown to parent for panic key
-                            window.addEventListener('keydown', function(e) {
-                                if(window.parent.handlePanic) window.parent.handlePanic(e);
-                            });
-                        <\/script>
-                    `;
-                    
-                    // Inject template content
-                    let templateContent = template.innerHTML;
-                    let modifiedHtml = templateContent.replace('<head>', '<head>' + baseTag + patchScript);
-                    doc.write(modifiedHtml);
-                    doc.close();
-                    return;
-                }
-            }
-
-            // Normal fetch flow for other pages
+            // Normal fetch flow for ALL pages
             const url = BASE_URL + pageName;
             
             fetch(url)
@@ -2495,6 +1601,21 @@
                     }
                     
                     appFrame = newFrame; 
+                    
+                    // Loader completion logic
+                    newFrame.onload = () => {
+                         if (loaderBar) loaderBar.style.width = "100%";
+                         setTimeout(() => {
+                             if (loader) {
+                                 loader.classList.add('opacity-0');
+                                 loader.classList.remove('active');
+                                 setTimeout(() => {
+                                     loader.classList.add('hidden');
+                                     if(loaderBar) loaderBar.style.width = "0%";
+                                 }, 200);
+                             }
+                         }, 200);
+                    };
 
                     const doc = newFrame.contentWindow.document;
                     doc.open();
@@ -2519,9 +1640,48 @@
                                 window.parent.openSettings();
                             };
                             
-                            // Forward keydown to parent for panic key
+                            function notifyParentTyping() {
+                                if (window.parent && window.parent.playTypeSound) {
+                                    window.parent.playTypeSound();
+                                }
+                            }
+
                             window.addEventListener('keydown', function(e) {
+                                // Forward Panic
                                 if(window.parent.handlePanic) window.parent.handlePanic(e);
+
+                                // Forward Admin Keybind (Ctrl + Shift + E) - Explicit Check
+                                if (e.ctrlKey && e.shiftKey && (e.key.toLowerCase() === 'e' || e.code === 'KeyE')) {
+                                    e.preventDefault();
+                                    if (window.parent.triggerAdminKeybind) window.parent.triggerAdminKeybind();
+                                }
+                                
+                                // Forward Admin Keybind (Ctrl + Shift + F) - Third Party Check
+                                if (e.ctrlKey && e.shiftKey && (e.key.toLowerCase() === 'f' || e.code === 'KeyF')) {
+                                    e.preventDefault();
+                                    e.stopImmediatePropagation();
+                                    e.stopPropagation();
+                                    if (window.parent.triggerThirdPartyKeybind) window.parent.triggerThirdPartyKeybind();
+                                }
+                                
+                                // Typing Sound (Standard Inputs)
+                                const target = e.target;
+                                const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
+                                const isContentEditable = target.isContentEditable;
+                                
+                                // Ignore non-character keys to avoid spamming sound on navigation
+                                const validKey = e.key.length === 1 || e.key === 'Backspace' || e.key === 'Enter';
+
+                                if ((isInput || isContentEditable) && validKey && !e.repeat) {
+                                    notifyParentTyping();
+                                }
+                            }, { capture: true });
+                            
+                            // Fallback 'input' listener for weird edge cases
+                            window.addEventListener('input', function(e) {
+                                 // Simple fallback if keydown missed it (e.g. virtual keyboard)
+                                 // We rely on parent debouncing
+                                 notifyParentTyping();
                             });
 
                             document.addEventListener('click', e => {
@@ -2549,6 +1709,8 @@
                 .catch(err => {
                     console.error(err);
                     alert("Failed to load page: " + pageName);
+                    // Hide loader on error
+                    if(loader) loader.classList.add('hidden');
                 });
         };
 
@@ -2579,6 +1741,9 @@
                     if (sec.id === `tab-${tabId}`) sec.classList.remove('hidden');
                     else sec.classList.add('hidden');
                 });
+
+                // Save State
+                localStorage.setItem('last_settings_tab', tabId);
             });
         });
 
@@ -2648,13 +1813,30 @@
 
         // --- 2. Personalization ---
         // Letter Avatar Setup
-        const letterColors = ['EF4444', 'F97316', 'F59E0B', '84CC16', '10B981', '06B6D4', '3B82F6', '6366F1', '8B5CF6', 'EC4899', '6B7280'];
+        // Removed last color (Grey) to make 10 colors (5x2 grid)
+        const letterColors = [
+            'EF4444', // Red
+            'F97316', 'FDBA74', // Orange
+            'EAB308', 'FDE047', // Yellow
+            '22C55E', '86EFAC', // Green
+            '06B6D4', '67E8F9', // Cyan
+            '3B82F6', '93C5FD', // Blue
+            '6366F1', 'A5B4FC', // Indigo
+            'A855F7', 'D8B4FE', // Purple
+            'EC4899', 'F9A8D4', // Pink
+            '6B7280', '000000'  // Grey & Black
+        ];
         const pfpModeBtns = document.querySelectorAll('.pfp-mode-btn');
         const pfpLetterOptions = document.getElementById('pfp-letter-options');
         const pfpUploadOptions = document.getElementById('pfp-upload-options');
         const pfpPreview = document.getElementById('pfp-preview');
         const saveLetterPfpBtn = document.getElementById('save-letter-pfp-btn');
         
+        // New Inputs
+        const pfpCustomText = document.getElementById('pfp-custom-text');
+        const pfpCustomColor = document.getElementById('pfp-custom-color');
+        const triggerUploadBtn = document.getElementById('trigger-upload-btn');
+        
         let pfpState = { mode: 'letter', letterColor: '#3B82F6' };
 
         pfpModeBtns.forEach(btn => {
@@ -2672,17 +1854,24 @@
                 } else {
                     pfpLetterOptions.classList.add('hidden');
                     pfpUploadOptions.classList.remove('hidden');
+                    updatePfpPreview(); // Ensure preview switches if needed
                 }
             });
         });
         
         // Render Color Grid
-        const gridContainer = pfpLetterOptions.querySelector('.grid');
-        gridContainer.innerHTML = ''; // Clear prev to avoid dups on re-run
+        const gridContainer = document.getElementById('pfp-color-grid');
+        gridContainer.innerHTML = ''; 
+        
         letterColors.forEach(color => {
             const div = document.createElement('div');
-            div.className = 'w-8 h-8 rounded-full cursor-pointer hover:scale-110 transition border-2 border-transparent';
+            div.className = 'w-10 h-10 rounded-lg cursor-pointer hover:scale-110 transition border-2 border-transparent';
             div.style.backgroundColor = '#' + color;
+            
+            if (color === '000000') {
+                div.style.borderColor = '#ffffff';
+            }
+
             div.onclick = () => {
                 pfpState.letterColor = '#' + color;
                 updatePfpPreview();
@@ -2690,25 +1879,69 @@
             gridContainer.appendChild(div);
         });
 
+        // Listeners for new inputs
+        pfpCustomText.addEventListener('input', () => updatePfpPreview());
+        
+        // Removed old pfpCustomColor logic
+
+        if (triggerUploadBtn) {
+            triggerUploadBtn.addEventListener('click', () => {
+                document.getElementById('pfp-upload-input').click();
+            });
+        }
+
         function updatePfpPreview() {
             if (pfpState.mode === 'letter') {
-                const initial = currentUser ? (currentUser.username || "U").charAt(0).toUpperCase() : "U";
+                const usernameChar = currentUser ? (currentUser.username || "U").charAt(0).toUpperCase() : "U";
+                // Prefer input value, fallback to saved text, fallback to username char
+                let displayText = pfpCustomText.value.trim().toUpperCase();
+                
+                if (!displayText) displayText = usernameChar;
+
                 pfpPreview.style.backgroundImage = 'none';
                 pfpPreview.style.backgroundColor = pfpState.letterColor;
-                pfpPreview.innerText = initial;
+                pfpPreview.style.color = '#FFFFFF'; 
+                pfpPreview.innerText = displayText;
+                // Dynamic font size
+                if (displayText.length > 2) pfpPreview.style.fontSize = '1.5rem';
+                else if (displayText.length > 1) pfpPreview.style.fontSize = '2rem';
+                else pfpPreview.style.fontSize = '3rem';
+                
+            } else if (pfpState.mode === 'upload') {
+                // ... (Existing logic)
+                if (currentUser && currentUser.customPfp && currentUser.pfpType === 'custom') {
+                    pfpPreview.style.backgroundImage = `url('${currentUser.customPfp}')`;
+                    pfpPreview.style.backgroundColor = "transparent";
+                    pfpPreview.style.backgroundSize = "cover";
+                    pfpPreview.innerText = "";
+                } else {
+                    const initial = currentUser ? (currentUser.username || "U").charAt(0).toUpperCase() : "U";
+                    pfpPreview.style.backgroundImage = 'none';
+                    pfpPreview.style.backgroundColor = '#333';
+                    pfpPreview.style.color = '#FFFFFF';
+                    pfpPreview.innerText = initial;
+                    pfpPreview.style.fontSize = '3rem';
+                }
             }
         }
         
         saveLetterPfpBtn.addEventListener('click', async () => {
             if (!currentUser) return;
+            
+            const textVal = pfpCustomText.value.trim().toUpperCase();
+            if (/[<>/\\\\]/.test(textVal)) {
+                alert("Invalid characters in avatar text.");
+                return;
+            }
+
             saveLetterPfpBtn.innerText = "Saving...";
             try {
                 await updateDoc(doc(db, "users", currentUser.uid), {
                     pfpType: 'letter',
                     pfpLetterBg: pfpState.letterColor,
-                    letterAvatarColor: pfpState.letterColor // Legacy support
+                    letterAvatarColor: pfpState.letterColor, 
+                    letterAvatarText: textVal
                 });
-                // Local update handled by snapshot
                 saveLetterPfpBtn.innerText = "Saved!";
                 setTimeout(() => saveLetterPfpBtn.innerText = "Set Letter Avatar", 2000);
             } catch(e) {
@@ -2983,15 +2216,23 @@
             
             // --- Logo Path Modification ---
             let logoSrc;
-            if (lightThemeNames.includes(theme.name)) {
+            const isLightTheme = lightThemeNames.includes(theme.name);
+            
+            if (isLightTheme) {
                 logoSrc = 'https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo-dark.png'; 
+                root.style.setProperty('--menu-username-text', '#000000');
+                root.style.setProperty('--menu-email-text', '#444444');
             } else if (theme.name === 'Christmas') {
                 logoSrc = 'https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo-christmas.png';
+                root.style.setProperty('--menu-username-text', 'white');
+                root.style.setProperty('--menu-email-text', '#9ca3af');
             } else {
                 logoSrc = 'https://cdn.jsdelivr.net/npm/4sp-asset-library@latest/logo.png';
+                root.style.setProperty('--menu-username-text', 'white');
+                root.style.setProperty('--menu-email-text', '#9ca3af');
             }
 
-            // Apply CSS Variables
+            // Apply CSS Variables from theme object (overrides defaults if present)
             for (const [key, value] of Object.entries(theme)) {
                 if (key !== 'logo-src' && key !== 'name') {
                     root.style.setProperty(`--${key}`, value);
@@ -3001,29 +2242,44 @@
             // Apply Logo & Tinting
             const logoImg = document.getElementById('navbar-logo');
             if (logoImg) {
-                // Update Source (Use absolute path comparison or specific logic)
-                // We just set it. Browser handles cache.
-                // Note: The original navigation.js checked src endsWith to avoid reload flicker, but simple assignment is okay.
                 if (!logoImg.src.includes(logoSrc)) {
                      logoImg.src = logoSrc;
                 }
 
-                // Apply Tinting
                 const noFilterThemes = ['Dark', 'Light', 'Christmas'];
-                if (noFilterThemes.includes(theme.name)) {
+                const isNoFilter = noFilterThemes.includes(theme.name);
+                
+                // Check if mode is changing (Tinted <-> Standard)
+                // We check existing transform state
+                const wasNoFilter = logoImg.style.transform === '' || logoImg.style.transform === 'none';
+                const modeChanged = isNoFilter !== wasNoFilter;
+
+                if (modeChanged) {
+                    logoImg.style.transition = 'none';
+                }
+
+                if (isNoFilter) {
                     logoImg.style.filter = ''; 
                     logoImg.style.transform = '';
                 } else {
                     const tintColor = theme['tab-active-text'] || '#ffffff';
-                    // The original navigation.js used this trick for SVG coloring via filter
                     logoImg.style.filter = `drop-shadow(100px 0 0 ${tintColor})`;
                     logoImg.style.transform = 'translateX(-100px)';
                 }
+
+                if (modeChanged) {
+                    // Force Reflow
+                    void logoImg.offsetWidth; 
+                    logoImg.style.transition = ''; // Restore
+                }
             }
 
             // Save to local storage for persistence on reload
             localStorage.setItem('user-navbar-theme', JSON.stringify(theme));
             
+            // Apply Glide Button Color Sync
+            root.style.setProperty('--glide-btn-color', 'var(--tab-text)');
+
             // Also update user doc if logged in
             if (currentUser) {
                 updateDoc(doc(db, "users", currentUser.uid), { navbarTheme: theme }).catch(console.error);
@@ -3250,16 +2506,302 @@
         function loadSettingsData() {
             if (currentUser) {
                 settingsUsernameInput.value = currentUser.username || "";
+                
+                // PFP State Init
                 pfpState.letterColor = currentUser.pfpLetterBg || '#3B82F6';
+                pfpState.mode = currentUser.pfpType === 'custom' ? 'upload' : 'letter';
+                
+                // Populate Inputs
+                pfpCustomText.value = currentUser.letterAvatarText || "";
+
+                // Update UI Buttons to reflect current mode
+                pfpModeBtns.forEach(btn => {
+                    if (btn.dataset.mode === pfpState.mode) {
+                        btn.classList.add('active', 'bg-[#222]');
+                        if (pfpState.mode === 'letter') {
+                            pfpLetterOptions.classList.remove('hidden');
+                            pfpUploadOptions.classList.add('hidden');
+                        } else {
+                            pfpLetterOptions.classList.add('hidden');
+                            pfpUploadOptions.classList.remove('hidden');
+                        }
+                    } else {
+                        btn.classList.remove('active', 'bg-[#222]');
+                    }
+                });
+
                 updatePfpPreview();
             }
+
+            // Restore Tab
+            const lastTab = localStorage.getItem('last_settings_tab');
+            if (lastTab) {
+                const tabBtn = document.querySelector(`.settings-tab[data-tab="${lastTab}"]`);
+                if(tabBtn) tabBtn.click();
+            }
+
             loadThemes();
-            loadPanicKeys(); // Refresh inputs when settings open
+            loadPanicKeys(); 
+
+            // --- App Preference Toggles Init ---
+            const animBtn = document.getElementById('toggle-animations-btn');
+            const soundBtn = document.getElementById('toggle-sounds-btn');
+
+            const updateToggleUI = () => {
+                const isEnabled = window.areAnimationsEnabled;
+                animBtn.classList.toggle('off', !isEnabled);
+                animBtn.innerHTML = isEnabled ? '<i class="fa-solid fa-wand-magic-sparkles"></i>' : '<i class="fa-solid fa-wand-magic"></i>';
+                
+                // Apply to body
+                if (isEnabled) document.body.classList.remove('no-animations');
+                else document.body.classList.add('no-animations');
+
+                soundBtn.classList.toggle('off', window.isMuted);
+                soundBtn.innerHTML = window.isMuted ? '<i class="fa-solid fa-volume-xmark"></i>' : '<i class="fa-solid fa-volume-high"></i>';
+            };
+
+            if (animBtn) {
+                animBtn.onclick = () => {
+                    window.areAnimationsEnabled = !window.areAnimationsEnabled;
+                    localStorage.setItem('app_animations_enabled', window.areAnimationsEnabled);
+                    updateToggleUI();
+                };
+            }
+
+            if (soundBtn) {
+                soundBtn.onclick = () => {
+                    window.isMuted = !window.isMuted;
+                    localStorage.setItem('app_is_muted', window.isMuted);
+                    updateToggleUI();
+                };
+            }
+
+            updateToggleUI();
         }
 
         checkAutoLogin();
         loadPanicKeys(); // Initial load for global listener
 
     </script>
+
+    <div id="notification-container"></div>
+    <script>
+    // --- Sound & Notification Logic ---
+    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    
+    // Sync with global state
+    Object.defineProperty(window, 'isMuted', {
+        get: () => localStorage.getItem('app_is_muted') === 'true',
+        set: (v) => localStorage.setItem('app_is_muted', v)
+    });
+    
+    Object.defineProperty(window, 'areAnimationsEnabled', {
+        get: () => localStorage.getItem('app_animations_enabled') !== 'false',
+        set: (v) => localStorage.setItem('app_animations_enabled', v)
+    });
+
+    // Initial Class Set
+    if (!window.areAnimationsEnabled) document.body.classList.add('no-animations');
+
+    // EXPOSE PlayTypeSound GLOBALLY
+    // Debounce to prevent rapid-fire stuttering if called too fast
+    let typeSoundTimeout = null;
+    window.playTypeSound = function() {
+        if (window.isMuted) return;
+        if (audioCtx.state === 'suspended') audioCtx.resume();
+        
+        // Small debounce
+        if (typeSoundTimeout) return;
+        typeSoundTimeout = setTimeout(() => { typeSoundTimeout = null; }, 50);
+
+        const bufferSize = audioCtx.sampleRate * 0.02;
+        const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
+        const data = buffer.getChannelData(0);
+        for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1;
+
+        const noise = audioCtx.createBufferSource();
+        noise.buffer = buffer;
+        const noiseFilter = audioCtx.createBiquadFilter();
+        noiseFilter.type = 'bandpass';
+        noiseFilter.frequency.value = 3000 + (Math.random() * 1000);
+        noiseFilter.Q.value = 1;
+        const noiseGain = audioCtx.createGain();
+        noiseGain.gain.setValueAtTime(0.04, audioCtx.currentTime);
+        noiseGain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.01);
+        noise.connect(noiseFilter);
+        noiseFilter.connect(noiseGain);
+        noiseGain.connect(audioCtx.destination);
+
+        const osc = audioCtx.createOscillator();
+        const gain = audioCtx.createGain();
+        osc.type = 'sine';
+        osc.frequency.setValueAtTime(150 + (Math.random() * 50), audioCtx.currentTime);
+        gain.gain.setValueAtTime(0.03, audioCtx.currentTime);
+        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.02);
+        osc.connect(gain);
+        gain.connect(audioCtx.destination);
+
+        noise.start();
+        osc.start();
+        noise.stop(audioCtx.currentTime + 0.02);
+        osc.stop(audioCtx.currentTime + 0.02);
+    };
+
+    function playClickSound() {
+        if (window.isMuted) return;
+        if (audioCtx.state === 'suspended') audioCtx.resume();
+
+        const osc = audioCtx.createOscillator();
+        const gainNode = audioCtx.createGain();
+        osc.connect(gainNode);
+        gainNode.connect(audioCtx.destination);
+        osc.type = 'sine';
+        osc.frequency.setValueAtTime(300, audioCtx.currentTime);
+        gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+        gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.015);
+        osc.start();
+        osc.stop(audioCtx.currentTime + 0.015);
+    }
+
+    // --- App Preferences State ---
+    window.isMuted = localStorage.getItem('app_is_muted') === 'true';
+    window.areAnimationsEnabled = localStorage.getItem('app_animations_enabled') !== 'false'; // Default true
+
+    window.playMechClick = function(isReverse = false) {
+        if (window.isMuted || !window.areAnimationsEnabled) return;
+        if (audioCtx.state === 'suspended') audioCtx.resume();
+        const now = audioCtx.currentTime;
+        
+        const noiseGainVal = isReverse ? 0.015 : 0.02;
+        const pitchFreq = isReverse ? 100 : 150;
+
+        // High-frequency noise burst
+        const bufferSize = audioCtx.sampleRate * 0.01;
+        const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
+        const data = buffer.getChannelData(0);
+        for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1;
+
+        const noise = audioCtx.createBufferSource();
+        noise.buffer = buffer;
+        const filter = audioCtx.createBiquadFilter();
+        filter.type = 'highpass';
+        filter.frequency.value = isReverse ? 3000 : 5000;
+        const gain = audioCtx.createGain();
+        gain.gain.setValueAtTime(noiseGainVal, now);
+        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.01);
+        
+        noise.connect(filter);
+        filter.connect(gain);
+        gain.connect(audioCtx.destination);
+        noise.start();
+        noise.stop(now + 0.01);
+
+        // Low-frequency "thud"
+        const osc = audioCtx.createOscillator();
+        const oscGain = audioCtx.createGain();
+        osc.type = 'triangle';
+        osc.frequency.setValueAtTime(pitchFreq, now);
+        oscGain.gain.setValueAtTime(0.01, now);
+        oscGain.gain.exponentialRampToValueAtTime(0.001, now + 0.02);
+        osc.connect(oscGain);
+        oscGain.connect(audioCtx.destination);
+        osc.start();
+        osc.stop(now + 0.02);
+    };
+
+    // Gear Clicking Sequence
+    let gearHoverStartTime = 0;
+    let currentGearRotation = 0;
+    let currentAnimatingGear = null;
+    const gearClickDelays = [0, 120, 240, 360]; // Adjusted for 0.5s total
+
+    const handleGearMouseOver = (e) => {
+        const target = e.target.closest('#auth-settings-btn, #nav-settings-tab');
+        if (target && currentAnimatingGear !== target) {
+            currentAnimatingGear = target;
+            const icon = target.querySelector('.fa-gear');
+            if (!icon) return;
+            
+            gearHoverStartTime = Date.now();
+            gearClickDelays.forEach((delay, index) => {
+                setTimeout(() => {
+                    if (target.matches(':hover')) {
+                        if (window.areAnimationsEnabled) {
+                            currentGearRotation = (index + 1) * 45;
+                            icon.style.transform = `rotate(${currentGearRotation}deg)`;
+                        }
+                        window.playMechClick(false);
+                    }
+                }, delay);
+            });
+        }
+    };
+
+    const handleGearMouseOut = (e) => {
+        const target = e.target.closest('#auth-settings-btn, #nav-settings-tab');
+        if (target && !target.contains(e.relatedTarget)) {
+            currentAnimatingGear = null;
+            const icon = target.querySelector('.fa-gear');
+            if (!icon) return;
+
+            const elapsed = Date.now() - gearHoverStartTime;
+            const clickCount = gearClickDelays.filter(d => d <= elapsed).length;
+            
+            for (let i = 0; i < clickCount; i++) {
+                setTimeout(() => {
+                    if (!target.matches(':hover')) {
+                        if (window.areAnimationsEnabled) {
+                            currentGearRotation -= 45;
+                            icon.style.transform = `rotate(${currentGearRotation}deg)`;
+                        }
+                        window.playMechClick(true);
+                    }
+                }, gearClickDelays[i]);
+            }
+        }
+    };
+
+    document.addEventListener('mouseover', handleGearMouseOver);
+    document.addEventListener('mouseout', handleGearMouseOut);
+
+    const notificationContainer = document.getElementById('notification-container');
+    function showNotification(message, iconClass = 'fa-solid fa-info-circle', type = 'info') {
+        if (!notificationContainer) return;
+        while (notificationContainer.children.length >= 3) {
+            notificationContainer.removeChild(notificationContainer.firstChild);
+        }
+        const toast = document.createElement('div');
+        toast.className = 'notification-toast';
+        toast.innerHTML = `<i class="${iconClass} notification-icon ${type}"></i><span>${message}</span>`;
+        notificationContainer.appendChild(toast);
+        requestAnimationFrame(() => {
+            toast.classList.add('show');
+            playClickSound();
+        });
+        setTimeout(() => {
+            toast.classList.remove('show');
+            setTimeout(() => { if (toast.parentElement) toast.remove(); }, 300);
+        }, 3000);
+    }
+
+    // Event Listeners
+    document.addEventListener('click', (e) => {
+        const target = e.target.closest('button, .nav-tab, .zone-item, .btn-card-action, a, .icon-btn');
+        if (target) playClickSound();
+    });
+    
+    document.addEventListener('keydown', (e) => {
+        const target = e.target.closest('input, textarea') || e.target.isContentEditable;
+        if (target && !e.repeat) window.playTypeSound();
+    });
+    
+    // Copy/Paste Feedback
+    document.addEventListener('copy', () => {
+        if (window.getSelection().toString().length > 0) showNotification('Copied to clipboard', 'fa-solid fa-copy', 'success');
+    });
+    document.addEventListener('paste', (e) => {
+        if (e.target.closest('input, textarea')) showNotification('Pasted from clipboard', 'fa-solid fa-paste', 'info');
+    });
+    </script>
 </body>
-</html>
+</html>