Update index.html

index.html

@@ -84,6 +84,7 @@
 
         .window.active {
             box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 255, 255, 0.3);
+            /* z-index removed to fix stacking issues with JS */
         }
 
         .window-header {
@@ -144,6 +145,10 @@
             text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
         }
 
+        .neon-border {
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.1);
+        }
+
         /* Taskbar */
         .taskbar {
             background: linear-gradient(180deg, rgba(10, 25, 50, 0.9) 0%, rgba(5, 15, 30, 0.95) 100%);
@@ -210,6 +215,15 @@
         }
 
         /* Animations */
+        @keyframes pulse-glow {
+            0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); }
+            50% { box-shadow: 0 0 30px rgba(0, 255, 255, 0.6); }
+        }
+
+        .animate-pulse-glow {
+            animation: pulse-glow 2s infinite;
+        }
+
         @keyframes slide-up {
             from { transform: translateY(100%); opacity: 0; }
             to { transform: translateY(0); opacity: 1; }
@@ -219,6 +233,23 @@
             animation: slide-up 0.3s ease-out;
         }
 
+        /* Mobile Responsive */
+        @media (max-width: 768px) {
+            .window {
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
+                width: 100% !important;
+                height: 100% !important;
+                border-radius: 0;
+            }
+            
+            .desktop-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+
+        /* Grid Pattern for File Manager */
         .grid-pattern {
             background-image: 
                 linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
@@ -276,6 +307,7 @@
             <span class="text-xs text-center font-medium text-pink-100 drop-shadow-md">Calculator</span>
         </div>
 
+        <!-- NEW MASTER SPEC DESKTOP ICON -->
         <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('spec')">
             <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-red-500/30 shadow-lg shadow-red-500/20">
                 <i data-lucide="book-open" class="w-6 h-6 text-red-400"></i>
@@ -283,6 +315,7 @@
             <span class="text-xs text-center font-medium text-red-100 drop-shadow-md">Master Spec</span>
         </div>
 
+        <!-- NEW XOR'S FAVS DESKTOP ICON -->
         <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('favs')">
             <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-yellow-500/30 shadow-lg shadow-yellow-500/20">
                 <i data-lucide="star" class="w-6 h-6 text-yellow-400"></i>
@@ -290,14 +323,6 @@
             <span class="text-xs text-center font-medium text-yellow-100 drop-shadow-md">Xor's Favs</span>
         </div>
 
-        <!-- NEW GAME DESKTOP ICON -->
-        <div class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24" onclick="openWindow('game')">
-            <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-emerald-500/30 shadow-lg shadow-emerald-500/20">
-                <i data-lucide="gamepad-2" class="w-6 h-6 text-emerald-400"></i>
-            </div>
-            <span class="text-xs text-center font-medium text-emerald-100 drop-shadow-md">Cyber Snake</span>
-        </div>
-
         <a href="https://ko-fi.com/Z8Z51E5TIG" target="_blank" class="desktop-icon flex flex-col items-center p-3 rounded-lg w-24 no-underline">
             <div class="w-12 h-12 bg-gray-900 rounded-lg flex items-center justify-center mb-2 border border-orange-500/30 shadow-lg shadow-orange-500/20">
                 <i data-lucide="coffee" class="w-6 h-6 text-orange-400"></i>
@@ -335,7 +360,7 @@
                 <div class="terminal-text text-green-400 space-y-1">
                     <div class="text-cyan-400 font-bold">Xortron Operating System v7.7.7</div>
                     <div class="text-gray-400">Kernel 5.15.0-76-generic x86_64</div>
-                    <div class="text-gray-500 text-xs mt-2">Last login: <span id="last-login"></span> from 192.168.1.105</div>
+                    <div class="text-gray-500 text-xs mt-2">Last login: <span id="last-login">3/18/2026, 3:56:48 AM</span> from 192.168.1.105</div>
                     <div class="mt-4 flex items-center">
                         <span class="text-green-500">root@xortron-os:~#</span>
                         <span class="ml-2 cursor-blink">█</span>
@@ -366,17 +391,56 @@
                         <div class="flex items-center gap-2 text-gray-300 hover:text-cyan-400 cursor-pointer p-1 rounded hover:bg-cyan-900/20 transition"><i data-lucide="monitor" class="w-4 h-4"></i> Desktop</div>
                         <div class="flex items-center gap-2 text-gray-300 hover:text-cyan-400 cursor-pointer p-1 rounded hover:bg-cyan-900/20 transition"><i data-lucide="download" class="w-4 h-4"></i> Downloads</div>
                         <div class="flex items-center gap-2 text-cyan-400 bg-cyan-900/20 p-1 rounded cursor-pointer"><i data-lucide="database" class="w-4 h-4"></i> Data</div>
+                        <div class="flex items-center gap-2 text-gray-300 hover:text-cyan-400 cursor-pointer p-1 rounded hover:bg-cyan-900/20 transition"><i data-lucide="wifi" class="w-4 h-4"></i> Network</div>
+                    </div>
+                    <div class="mt-6 pt-4 border-t border-cyan-900/30">
+                        <div class="text-xs text-gray-500 mb-2">/root/files</div>
+                        <button class="w-full py-1 px-2 bg-cyan-900/30 hover:bg-cyan-800/50 border border-cyan-700/50 rounded text-xs text-cyan-300 transition flex items-center justify-center gap-1">
+                            <i data-lucide="plus" class="w-3 h-3"></i> New Folder
+                        </button>
+                        <button class="w-full mt-2 py-1 px-2 bg-cyan-900/30 hover:bg-cyan-800/50 border border-cyan-700/50 rounded text-xs text-cyan-300 transition flex items-center justify-center gap-1">
+                            <i data-lucide="upload" class="w-3 h-3"></i> Upload
+                        </button>
                     </div>
                 </div>
                 <div class="flex-1 p-4 bg-black/20 grid-pattern overflow-auto">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="text-xs text-gray-400">Documents > Hack Tools</div>
+                        <div class="flex gap-2">
+                            <i data-lucide="grid" class="w-4 h-4 text-cyan-400 cursor-pointer"></i>
+                            <i data-lucide="list" class="w-4 h-4 text-gray-500 cursor-pointer"></i>
+                        </div>
+                    </div>
                     <div class="grid grid-cols-4 gap-3">
                         <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group">
                             <i data-lucide="file-code" class="w-8 h-8 text-blue-400 mb-2 group-hover:scale-110 transition"></i>
                             <div class="text-xs text-gray-300 truncate">script.py</div>
+                            <div class="text-[10px] text-gray-500">2.4 KB</div>
+                        </div>
+                        <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group">
+                            <i data-lucide="file-text" class="w-8 h-8 text-yellow-400 mb-2 group-hover:scale-110 transition"></i>
+                            <div class="text-xs text-gray-300 truncate">Weaponizer.txt</div>
+                            <div class="text-[10px] text-gray-500">15 KB</div>
                         </div>
                         <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group">
                             <i data-lucide="file-archive" class="w-8 h-8 text-red-400 mb-2 group-hover:scale-110 transition"></i>
-                            <div class="text-xs text-gray-300 truncate">data.zip</div>
+                            <div class="text-xs text-gray-300 truncate">m3th4mph3t4m1n3.zip</div>
+                            <div class="text-[10px] text-gray-500">45 MB</div>
+                        </div>
+                        <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group">
+                            <i data-lucide="key" class="w-8 h-8 text-green-400 mb-2 group-hover:scale-110 transition"></i>
+                            <div class="text-xs text-gray-300 truncate">keys.asc</div>
+                            <div class="text-[10px] text-gray-500">4 KB</div>
+                        </div>
+                        <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group">
+                            <i data-lucide="database" class="w-8 h-8 text-purple-400 mb-2 group-hover:scale-110 transition"></i>
+                            <div class="text-xs text-gray-300 truncate">passwords.db</div>
+                            <div class="text-[10px] text-gray-500">Encrypted</div>
+                        </div>
+                        <div class="glass-panel p-3 rounded-lg hover:bg-cyan-900/20 cursor-pointer transition group border-pink-500/30">
+                            <i data-lucide="globe" class="w-8 h-8 text-pink-400 mb-2 group-hover:scale-110 transition"></i>
+                            <div class="text-xs text-gray-300 truncate">PornHub.com</div>
+                            <div class="text-[10px] text-gray-500">Shortcut</div>
                         </div>
                     </div>
                 </div>
@@ -391,6 +455,7 @@
                     <span class="text-sm font-medium text-red-100">Hack Tools v3.1.4</span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <span class="text-xs text-red-400 font-mono mr-2 animate-pulse">[Encrypted Connection Active]</span>
                     <div class="window-btn btn-min" onclick="minimizeWindow('hacktools')"></div>
                     <div class="window-btn btn-max" onclick="maximizeWindow('hacktools')"></div>
                     <div class="window-btn btn-close" onclick="closeWindow('hacktools')"></div>
@@ -398,11 +463,78 @@
             </div>
             <div class="p-6 h-[calc(100%-40px)] overflow-auto bg-black/40">
                 <div class="grid grid-cols-2 gap-4">
-                    <div class="glass-panel p-4 rounded-lg border border-transparent hover:border-red-500/30">
-                        <div class="font-semibold text-red-100">Port Scanner</div>
+                    <div class="glass-panel p-4 rounded-lg hover:bg-red-900/10 cursor-pointer transition group border border-transparent hover:border-red-500/30">
+                        <div class="flex items-center gap-3 mb-2">
+                            <div class="p-2 bg-red-500/20 rounded-lg">
+                                <i data-lucide="scan-line" class="w-5 h-5 text-red-400"></i>
+                            </div>
+                            <div class="font-semibold text-red-100">Port Scanner</div>
+                        </div>
+                        <div class="text-xs text-gray-400">Scan for open ports and services</div>
+                    </div>
+
+                    <div class="glass-panel p-4 rounded-lg hover:bg-orange-900/10 cursor-pointer transition group border border-transparent hover:border-orange-500/30">
+                        <div class="flex items-center gap-3 mb-2">
+                            <div class="p-2 bg-orange-500/20 rounded-lg">
+                                <i data-lucide="hammer" class="w-5 h-5 text-orange-400"></i>
+                            </div>
+                            <div class="font-semibold text-orange-100">Brute Force</div>
+                        </div>
+                        <div class="text-xs text-gray-400">Password cracking utility</div>
+                    </div>
+
+                    <div class="glass-panel p-4 rounded-lg hover:bg-blue-900/10 cursor-pointer transition group border border-transparent hover:border-blue-500/30">
+                        <div class="flex items-center gap-3 mb-2">
+                            <div class="p-2 bg-blue-500/20 rounded-lg">
+                                <i data-lucide="database" class="w-5 h-5 text-blue-400"></i>
+                            </div>
+                            <div class="font-semibold text-blue-100">SQL Inject</div>
+                        </div>
+                        <div class="text-xs text-gray-400">Database penetration tool</div>
+                    </div>
+
+                    <div class="glass-panel p-4 rounded-lg hover:bg-purple-900/10 cursor-pointer transition group border border-transparent hover:border-purple-500/30">
+                        <div class="flex items-center gap-3 mb-2">
+                            <div class="p-2 bg-purple-500/20 rounded-lg">
+                                <i data-lucide="git-compare" class="w-5 h-5 text-purple-400"></i>
+                            </div>
+                            <div class="font-semibold text-purple-100">MITM</div>
+                        </div>
+                        <div class="text-xs text-gray-400">Man-in-the-middle attack</div>
                     </div>
-                    <div class="glass-panel p-4 rounded-lg border border-transparent hover:border-orange-500/30">
-                        <div class="font-semibold text-orange-100">Brute Force</div>
+
+                    <div class="glass-panel p-4 rounded-lg hover:bg-yellow-900/10 cursor-pointer transition group border border-transparent hover:border-yellow-500/30">
+                        <div class="flex items-center gap-3 mb-2">
+                            <div class="p-2 bg-yellow-500/20 rounded-lg">
+                                <i data-lucide="bug" class="w-5 h-5 text-yellow-400"></i>
+                            </div>
+                            <div class="font-semibold text-yellow-100">Exploit DB</div>
+                        </div>
+                        <div class="text-xs text-gray-400">Vulnerability database</div>
+                    </div>
+
+                    <div class="glass-panel p-4 rounded-lg hover:bg-green-900/10 cursor-pointer transition group border border-transparent hover:border-green-500/30">
+                        <div class="flex items-center gap-3 mb-2">
+                            <div class="p-2 bg-green-500/20 rounded-lg">
+                                <i data-lucide="user-x" class="w-5 h-5 text-green-400"></i>
+                            </div>
+                            <div class="font-semibold text-green-100">Anonymizer</div>
+                        </div>
+                        <div class="text-xs text-gray-400">TOR/VPN configuration</div>
+                    </div>
+                </div>
+
+                <div class="mt-6 p-4 glass-panel rounded-lg border border-red-500/20">
+                    <div class="flex items-center gap-2 text-red-400 text-sm font-mono mb-2">
+                        <i data-lucide="activity" class="w-4 h-4 animate-pulse"></i>
+                        <span>SYSTEM STATUS: ARMED</span>
+                    </div>
+                    <div class="w-full bg-gray-800 rounded-full h-2 overflow-hidden">
+                        <div class="bg-gradient-to-r from-red-500 to-orange-500 h-full w-[78%] animate-pulse"></div>
+                    </div>
+                    <div class="flex justify-between text-xs text-gray-500 mt-1 font-mono">
+                        <span>Threat Level: HIGH</span>
+                        <span>78%</span>
                     </div>
                 </div>
             </div>
@@ -416,14 +548,97 @@
                     <span class="text-sm font-medium text-green-100">Network Monitor</span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <span class="text-xs text-green-400 font-mono mr-2 animate-pulse">12 active connections</span>
                     <div class="window-btn btn-min" onclick="minimizeWindow('network')"></div>
                     <div class="window-btn btn-max" onclick="maximizeWindow('network')"></div>
                     <div class="window-btn btn-close" onclick="closeWindow('network')"></div>
                 </div>
             </div>
-            <div class="p-4 bg-black/40 h-[calc(100%-40px)]">
-                <div class="font-mono text-green-400">
-                    <span id="download-speed">3.7</span> MB/s ↓ | <span id="upload-speed">1.2</span> MB/s ↑
+            <div class="flex flex-col h-[calc(100%-40px)] bg-black/40">
+                <div class="p-4 border-b border-cyan-900/30">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="text-xs text-gray-400 uppercase tracking-wider">Bandwidth Usage</div>
+                        <div class="font-mono text-green-400">
+                            <span id="download-speed">3.7</span> MB/s ↓ | <span id="upload-speed">1.2</span> MB/s ↑
+                        </div>
+                    </div>
+                    <div class="flex gap-1 h-16">
+                        <!-- Simulated graph bars -->
+                        <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden">
+                            <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 45%"></div>
+                        </div>
+                        <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden">
+                            <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 72%"></div>
+                        </div>
+                        <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden">
+                            <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 30%"></div>
+                        </div>
+                        <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden">
+                            <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 85%"></div>
+                        </div>
+                        <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden">
+                            <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 55%"></div>
+                        </div>
+                        <div class="flex-1 bg-green-500/20 rounded-sm relative overflow-hidden">
+                            <div class="absolute bottom-0 left-0 right-0 bg-green-500/60 transition-all duration-500" style="height: 40%"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex flex-1 overflow-hidden">
+                    <div class="w-1/2 p-4 border-r border-cyan-900/30 overflow-auto">
+                        <div class="text-xs text-gray-400 uppercase tracking-wider mb-3">Active Connections</div>
+                        <div class="space-y-2 font-mono text-xs">
+                            <div class="flex items-center justify-between p-2 glass-panel rounded hover:bg-cyan-900/20 transition cursor-pointer">
+                                <span class="text-cyan-300">192.168.1.1:443</span>
+                                <span class="text-green-400 text-[10px]">ENCRYPTED</span>
+                            </div>
+                            <div class="flex items-center justify-between p-2 glass-panel rounded hover:bg-cyan-900/20 transition cursor-pointer">
+                                <span class="text-cyan-300">104.18.25.36:80</span>
+                                <span class="text-yellow-400 text-[10px]">UNSECURED</span>
+                            </div>
+                            <div class="flex items-center justify-between p-2 glass-panel rounded hover:bg-cyan-900/20 transition cursor-pointer border border-red-500/30">
+                                <span class="text-cyan-300">74.91.123.45:3306</span>
+                                <span class="text-red-400 text-[10px] animate-pulse">VULNERABLE</span>
+                            </div>
+                            <div class="flex items-center justify-between p-2 glass-panel rounded hover:bg-cyan-900/20 transition cursor-pointer">
+                                <span class="text-cyan-300">192.168.1.105:8080</span>
+                                <span class="text-green-400 text-[10px]">LOCAL</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="w-1/2 p-4 overflow-auto font-mono text-xs">
+                        <div class="text-xs text-gray-400 uppercase tracking-wider mb-3">Network Map</div>
+                        <div class="space-y-3">
+                            <div class="flex items-start gap-2">
+                                <i data-lucide="corner-down-right" class="w-4 h-4 text-cyan-600 mt-1"></i>
+                                <div>
+                                    <div class="text-cyan-400">[YOU] 192.168.1.105</div>
+                                    <div class="flex items-start gap-2 mt-1 ml-4">
+                                        <i data-lucide="corner-down-right" class="w-4 h-4 text-cyan-600 mt-1"></i>
+                                        <div>
+                                            <div class="text-cyan-300">Router 192.168.1.1</div>
+                                            <div class="flex items-start gap-2 mt-1 ml-4 flex-col">
+                                                <div class="flex items-center gap-2">
+                                                    <i data-lucide="minus" class="w-4 h-4 text-cyan-600"></i>
+                                                    <span class="text-gray-400">Device 192.168.1.102 (Mobile)</span>
+                                                </div>
+                                                <div class="flex items-center gap-2">
+                                                    <i data-lucide="minus" class="w-4 h-4 text-cyan-600"></i>
+                                                    <span class="text-gray-400">Device 192.168.1.103 (Laptop)</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-start gap-2 mt-1 ml-4">
+                                        <i data-lucide="corner-down-right" class="w-4 h-4 text-purple-600 mt-1"></i>
+                                        <div class="text-purple-400">[TOR Exit Node] 74.125.24.102</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -436,14 +651,41 @@
                     <span class="text-sm font-medium text-purple-100">Xortron Browser</span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <span class="text-xs text-purple-400 font-mono mr-2 flex items-center gap-1">
+                        <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+                        [Secure Connection]
+                    </span>
                     <div class="window-btn btn-min" onclick="minimizeWindow('browser')"></div>
                     <div class="window-btn btn-max" onclick="maximizeWindow('browser')"></div>
                     <div class="window-btn btn-close" onclick="closeWindow('browser')"></div>
                 </div>
             </div>
             <div class="flex flex-col h-[calc(100%-40px)] bg-gray-900">
+                <div class="flex items-center gap-2 p-2 bg-gray-800/50 border-b border-gray-700">
+                    <div class="flex gap-1">
+                        <button class="p-1 hover:bg-gray-700 rounded text-gray-400" onclick="browserBack()"><i data-lucide="arrow-left" class="w-4 h-4"></i></button>
+                        <button class="p-1 hover:bg-gray-700 rounded text-gray-400" onclick="browserForward()"><i data-lucide="arrow-right" class="w-4 h-4"></i></button>
+                        <button class="p-1 hover:bg-gray-700 rounded text-gray-400" onclick="browserRefresh()"><i data-lucide="refresh-cw" class="w-4 h-4"></i></button>
+                    </div>
+                    <div class="flex-1 flex items-center gap-2 bg-gray-800 rounded-lg px-3 py-1 border border-gray-700">
+                        <i data-lucide="lock" class="w-3 h-3 text-green-400"></i>
+                        <input type="text" id="browser-url" value="https://darkc0de-chat.hf.space/" class="bg-transparent border-none outline-none text-sm text-gray-300 flex-1 font-mono" onkeydown="if(event.key==='Enter')browserNavigate()">
+                        <button onclick="browserNavigate()" class="p-1 hover:bg-gray-700 rounded text-gray-400">
+                            <i data-lucide="search" class="w-3 h-3"></i>
+                        </button>
+                    </div>
+                    <div class="flex gap-1">
+                        <button class="p-1 hover:bg-gray-700 rounded text-gray-400" onclick="browserHome()"><i data-lucide="home" class="w-4 h-4"></i></button>
+                    </div>
+                </div>
                 <div class="flex-1 relative bg-black/40 overflow-hidden">
                     <iframe id="browser-frame" src="https://darkc0de-chat.hf.space/" class="w-full h-full border-none" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe>
+                    <div id="browser-loading" class="absolute inset-0 bg-gray-900/90 flex items-center justify-center hidden">
+                        <div class="flex flex-col items-center gap-3">
+                            <div class="w-12 h-12 border-4 border-purple-500/30 border-t-purple-400 rounded-full animate-spin"></div>
+                            <span class="text-purple-400 font-mono text-sm">Loading...</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -456,6 +698,7 @@
                     <span class="text-sm font-medium text-pink-100">Xortron-Calc</span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <span class="text-xs text-gray-400 font-mono mr-2">v1.0</span>
                     <div class="window-btn btn-min" onclick="minimizeWindow('calculator')"></div>
                     <div class="window-btn btn-max" onclick="maximizeWindow('calculator')"></div>
                     <div class="window-btn btn-close" onclick="closeWindow('calculator')"></div>
@@ -466,6 +709,31 @@
                     <div id="calc-history" class="text-xs text-gray-500 font-mono text-right mb-1 h-4"></div>
                     <div id="calc-display" class="text-3xl text-pink-100 font-mono text-right truncate">0</div>
                 </div>
+                <div class="grid grid-cols-4 gap-2 flex-1">
+                    <button onclick="calcClear()" class="bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg font-semibold transition border border-red-500/30">C</button>
+                    <button onclick="calcOperator('(')" class="glass-panel hover:bg-pink-900/20 text-pink-300 rounded-lg font-semibold transition">(</button>
+                    <button onclick="calcOperator(')')" class="glass-panel hover:bg-pink-900/20 text-pink-300 rounded-lg font-semibold transition">)</button>
+                    <button onclick="calcOperator('/')" class="bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg font-semibold transition border border-pink-500/30">÷</button>
+                    
+                    <button onclick="calcNumber('7')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">7</button>
+                    <button onclick="calcNumber('8')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">8</button>
+                    <button onclick="calcNumber('9')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">9</button>
+                    <button onclick="calcOperator('*')" class="bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg font-semibold transition border border-pink-500/30">×</button>
+                    
+                    <button onclick="calcNumber('4')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">4</button>
+                    <button onclick="calcNumber('5')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">5</button>
+                    <button onclick="calcNumber('6')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">6</button>
+                    <button onclick="calcOperator('-')" class="bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg font-semibold transition border border-pink-500/30">-</button>
+                    
+                    <button onclick="calcNumber('1')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">1</button>
+                    <button onclick="calcNumber('2')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">2</button>
+                    <button onclick="calcNumber('3')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">3</button>
+                    <button onclick="calcOperator('+')" class="bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg font-semibold transition border border-pink-500/30">+</button>
+                    
+                    <button onclick="calcNumber('0')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg col-span-2">0</button>
+                    <button onclick="calcNumber('.')" class="glass-panel hover:bg-gray-700/50 text-gray-200 rounded-lg font-semibold transition text-lg">.</button>
+                    <button onclick="calcEquals()" class="bg-pink-500 hover:bg-pink-400 text-white rounded-lg font-bold transition text-xl shadow-lg shadow-pink-500/30">=</button>
+                </div>
             </div>
         </div>
 
@@ -477,6 +745,10 @@
                     <span class="text-sm font-medium text-red-100">Xortron Master Spec</span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <span class="text-xs text-red-400 font-mono mr-2 flex items-center gap-1">
+                        <span class="w-2 h-2 bg-red-400 rounded-full animate-pulse"></span>
+                        [Classified Document]
+                    </span>
                     <div class="window-btn btn-min" onclick="minimizeWindow('spec')"></div>
                     <div class="window-btn btn-max" onclick="maximizeWindow('spec')"></div>
                     <div class="window-btn btn-close" onclick="closeWindow('spec')"></div>
@@ -487,7 +759,7 @@
             </div>
         </div>
 
-        <!-- Xor's Favs Window -->
+        <!-- NEW: Xor's Favs Window -->
         <div id="window-favs" class="window glass-strong pointer-events-auto hidden" style="top: 8%; left: 18%; width: 400px; height: 700px; z-index: 56;">
             <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-favs')">
                 <div class="flex items-center gap-2">
@@ -495,6 +767,10 @@
                     <span class="text-sm font-medium text-yellow-100">Xor's Favorites</span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <span class="text-xs text-yellow-400 font-mono mr-2 flex items-center gap-1">
+                        <span class="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></span>
+                        [Saved Bookmarks]
+                    </span>
                     <div class="window-btn btn-min" onclick="minimizeWindow('favs')"></div>
                     <div class="window-btn btn-max" onclick="maximizeWindow('favs')"></div>
                     <div class="window-btn btn-close" onclick="closeWindow('favs')"></div>
@@ -505,33 +781,20 @@
             </div>
         </div>
 
-        <!-- NEW: CYBER SNAKE GAME WINDOW -->
-        <div id="window-game" class="window glass-strong pointer-events-auto hidden" style="top: 15%; left: 35%; width: 420px; height: 500px; z-index: 65;">
-            <div class="window-header flex items-center justify-between px-4 py-2 select-none" onmousedown="startDrag(event, 'window-game')">
-                <div class="flex items-center gap-2">
-                    <i data-lucide="gamepad-2" class="w-4 h-4 text-emerald-400"></i>
-                    <span class="text-sm font-medium text-emerald-100">Cyber Snake</span>
-                </div>
-                <div class="flex items-center gap-2">
-                    <span class="text-xs text-gray-400 font-mono mr-2">Score: <span id="snake-score" class="text-emerald-400 font-bold">0</span></span>
-                    <div class="window-btn btn-min" onclick="minimizeWindow('game')"></div>
-                    <div class="window-btn btn-max" onclick="maximizeWindow('game')"></div>
-                    <div class="window-btn btn-close" onclick="closeWindow('game')"></div>
-                </div>
-            </div>
-            <div class="flex flex-col items-center justify-center h-[calc(100%-40px)] bg-black/90 relative p-4">
-                
-                <div id="snake-overlay" class="absolute inset-0 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm z-10 transition-all">
-                    <i data-lucide="gamepad-2" class="w-12 h-12 text-emerald-400 mb-4 animate-pulse"></i>
-                    <h2 class="text-3xl font-bold text-emerald-400 mb-2 font-mono neon-text tracking-widest">CYBER SNAKE</h2>
-                    <p class="text-gray-400 text-sm mb-6 font-mono text-center px-8">Use arrow keys to control.<br>Do not hit the walls.</p>
-                    <button onclick="startSnakeGame()" class="px-6 py-2 bg-emerald-500/10 border border-emerald-500/50 text-emerald-400 hover:bg-emerald-500 hover:text-black hover:shadow-[0_0_15px_#10b981] transition-all rounded font-bold tracking-widest">INITIATE</button>
-                </div>
-                
-                <canvas id="snake-canvas" width="360" height="360" class="border border-emerald-500/30 shadow-[0_0_20px_rgba(16,185,129,0.15)] bg-gray-900 rounded"></canvas>
+    </div>
+
+    <!-- System Alert Notification -->
+    <div id="system-alert" class="fixed top-4 right-4 glass-strong p-4 rounded-lg border-l-4 border-cyan-400 max-w-sm z-[1000] notification pointer-events-auto cursor-pointer" onclick="this.style.display='none'">
+        <div class="flex items-start gap-3">
+            <i data-lucide="info" class="w-5 h-5 text-cyan-400 mt-0.5"></i>
+            <div>
+                <div class="font-semibold text-cyan-100 mb-1">System Alert</div>
+                <div class="text-sm text-gray-300">Welcome to XortronOS. Systems online.</div>
             </div>
+            <button class="ml-auto text-gray-400 hover:text-white" onclick="document.getElementById('system-alert').style.display='none'">
+                <i data-lucide="x" class="w-4 h-4"></i>
+            </button>
         </div>
-
     </div>
 
     <!-- Taskbar -->
@@ -561,26 +824,28 @@
             <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('calculator')" id="taskbar-calculator">
                 <i data-lucide="calculator" class="w-5 h-5 text-pink-400"></i>
             </button>
+            <!-- MASTER SPEC TASKBAR ICON -->
             <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('spec')" id="taskbar-spec">
                 <i data-lucide="book-open" class="w-5 h-5 text-red-400"></i>
             </button>
+            <!-- NEW XOR'S FAVS TASKBAR ICON -->
             <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('favs')" id="taskbar-favs">
                 <i data-lucide="star" class="w-5 h-5 text-yellow-400"></i>
             </button>
-            
-            <!-- NEW GAME TASKBAR ICON -->
-            <button class="taskbar-icon w-10 h-10 rounded-lg flex items-center justify-center" onclick="openWindow('game')" id="taskbar-game">
-                <i data-lucide="gamepad-2" class="w-5 h-5 text-emerald-400"></i>
-            </button>
         </div>
 
         <div class="flex items-center gap-4 px-4 py-2 glass-panel rounded-lg">
+            <div class="flex items-center gap-2 text-xs font-mono">
+                <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+                <span class="text-green-400">VPN:ON</span>
+            </div>
+            <div class="w-px h-4 bg-gray-600"></div>
             <div class="text-xs font-mono text-gray-300" id="clock">03:57 AM</div>
             <div class="text-xs text-gray-500" id="date">Wed, Mar 18</div>
         </div>
     </div>
 
-    <!-- Start Menu -->
+    <!-- Start Menu (Hidden by default) -->
     <div id="start-menu" class="fixed bottom-16 left-4 w-64 glass-strong rounded-xl border border-cyan-500/20 shadow-2xl transform translate-y-4 opacity-0 pointer-events-none transition-all duration-200 z-[998]">
         <div class="p-4 border-b border-cyan-900/30">
             <div class="flex items-center gap-3">
@@ -612,22 +877,29 @@
             <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-pink-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('calculator'); toggleStartMenu()">
                 <i data-lucide="calculator" class="w-4 h-4 text-pink-400"></i> Calculator
             </button>
+            
+            <!-- MASTER SPEC START MENU ITEM -->
             <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-red-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('spec'); toggleStartMenu()">
                 <i data-lucide="book-open" class="w-4 h-4 text-red-400"></i> Master Spec
             </button>
+
+            <!-- NEW XOR'S FAVS START MENU ITEM -->
             <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-yellow-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('favs'); toggleStartMenu()">
                 <i data-lucide="star" class="w-4 h-4 text-yellow-400"></i> Xor's Favs
             </button>
             
-            <!-- NEW GAME START MENU ITEM -->
-            <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-emerald-900/20 transition text-left text-sm text-gray-300" onclick="openWindow('game'); toggleStartMenu()">
-                <i data-lucide="gamepad-2" class="w-4 h-4 text-emerald-400"></i> Cyber Snake
-            </button>
-            
             <div class="border-t border-cyan-900/30 my-2"></div>
             <a href="https://ko-fi.com/Z8Z51E5TIG" target="_blank" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-orange-900/20 transition text-left text-sm text-gray-300 no-underline" onclick="toggleStartMenu()">
                 <i data-lucide="coffee" class="w-4 h-4 text-orange-400"></i> Buy me a coffee
             </a>
+            <a href="https://huggingface.co/darkc0de" target="_blank" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-yellow-900/20 transition text-left text-sm text-gray-300 no-underline" onclick="toggleStartMenu()">
+                <i data-lucide="smile" class="w-4 h-4 text-yellow-400"></i> Visit the Dev on HF
+            </a>
+        </div>
+        <div class="p-2 border-t border-cyan-900/30">
+            <button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-red-900/20 transition text-left text-sm text-red-400">
+                <i data-lucide="power" class="w-4 h-4"></i> Shutdown
+            </button>
         </div>
     </div>
 
@@ -662,8 +934,10 @@
                 window.style.zIndex = ++zIndexCounter;
                 window.classList.add('active');
                 
+                // Update taskbar
                 if (taskbarBtn) taskbarBtn.classList.add('active');
                 
+                // Animate opening
                 window.style.transform = 'scale(0.9)';
                 window.style.opacity = '0';
                 setTimeout(() => {
@@ -671,8 +945,10 @@
                     window.style.opacity = '1';
                 }, 10);
             } else {
+                // If already open, just focus it
                 focusWindow(windowId);
             }
+            
             activeWindow = windowId;
         }
 
@@ -709,12 +985,14 @@
             const window = document.getElementById(`window-${windowId}`);
             
             if (window.dataset.maximized === 'true') {
+                // Restore
                 window.style.width = window.dataset.prevWidth;
                 window.style.height = window.dataset.prevHeight;
                 window.style.top = window.dataset.prevTop;
                 window.style.left = window.dataset.prevLeft;
                 window.dataset.maximized = 'false';
             } else {
+                // Maximize
                 window.dataset.prevWidth = window.style.width;
                 window.dataset.prevHeight = window.style.height;
                 window.dataset.prevTop = window.style.top;
@@ -732,19 +1010,22 @@
             const window = document.getElementById(`window-${windowId}`);
             window.style.zIndex = ++zIndexCounter;
             
+            // Remove active class from all windows
             document.querySelectorAll('.window').forEach(w => w.classList.remove('active'));
             window.classList.add('active');
         }
 
+        // Drag functionality
         function startDrag(e, windowId) {
-            if (e.target.closest('.window-btn')) return; 
+            if (e.target.closest('.window-btn')) return; // Don't drag if clicking buttons
             
             const window = document.getElementById(windowId);
-            if (window.dataset.maximized === 'true') return; 
+            if (window.dataset.maximized === 'true') return; // Don't drag if maximized
             
             isDragging = true;
             draggedWindow = window;
             
+            // TEMPORARILY DISABLE IFRAMES SO THEY DON'T TRAP THE MOUSE
             document.querySelectorAll('iframe').forEach(iframe => {
                 iframe.style.pointerEvents = 'none';
             });
@@ -762,6 +1043,7 @@
             let x = e.clientX - dragOffset.x;
             let y = e.clientY - dragOffset.y;
             
+            // Keep within bounds
             x = Math.max(0, Math.min(x, window.innerWidth - draggedWindow.offsetWidth));
             y = Math.max(0, Math.min(y, window.innerHeight - draggedWindow.offsetHeight - 56));
             
@@ -773,11 +1055,13 @@
             isDragging = false;
             draggedWindow = null;
             
+            // RE-ENABLE IFRAMES
             document.querySelectorAll('iframe').forEach(iframe => {
                 iframe.style.pointerEvents = 'auto';
             });
         });
 
+        // Add click handlers to windows for focus
         document.querySelectorAll('.window').forEach(window => {
             window.addEventListener('mousedown', () => {
                 const id = window.id.replace('window-', '');
@@ -785,6 +1069,7 @@
             });
         });
 
+        // Start Menu Toggle
         function toggleStartMenu() {
             const menu = document.getElementById('start-menu');
             if (menu.classList.contains('opacity-0')) {
@@ -794,15 +1079,35 @@
             }
         }
 
+        // Close start menu when clicking outside
         document.addEventListener('click', (e) => {
             const menu = document.getElementById('start-menu');
             const btn = document.querySelector('[onclick="toggleStartMenu()"]');
             
-            if (!menu.contains(e.target) && btn && !btn.contains(e.target)) {
+            if (!menu.contains(e.target) && !btn.contains(e.target)) {
                 menu.classList.add('opacity-0', 'pointer-events-none', 'translate-y-4');
             }
         });
 
+        // Simulate network traffic
+        setInterval(() => {
+            const download = (Math.random() * 5 + 2).toFixed(1);
+            const upload = (Math.random() * 2 + 0.5).toFixed(1);
+            document.getElementById('download-speed').textContent = download;
+            document.getElementById('upload-speed').textContent = upload;
+        }, 3000);
+
+        // Update last login time
+        const now = new Date();
+        const loginStr = now.toLocaleDateString() + ', ' + now.toLocaleTimeString();
+        document.getElementById('last-login').textContent = loginStr;
+
+        // Auto-open browser on launch
+        setTimeout(() => {
+            openWindow('browser');
+        }, 500);
+
+        // Desktop icon selection
         document.querySelectorAll('.desktop-icon').forEach(icon => {
             icon.addEventListener('click', (e) => {
                 e.stopPropagation();
@@ -815,143 +1120,198 @@
             document.querySelectorAll('.desktop-icon').forEach(i => i.classList.remove('selected'));
         });
 
+        // Mobile touch support for dragging
+        let touchStartX, touchStartY;
+        
+        document.querySelectorAll('.window-header').forEach(header => {
+            header.addEventListener('touchstart', (e) => {
+                const touch = e.touches[0];
+                const windowId = header.parentElement.id;
+                if (e.target.closest('.window-btn')) return;
+                
+                const window = document.getElementById(windowId);
+                if (window.dataset.maximized === 'true') return;
+                
+                const rect = window.getBoundingClientRect();
+                touchStartX = touch.clientX - rect.left;
+                touchStartY = touch.clientY - rect.top;
+                
+                // TEMPORARILY DISABLE IFRAMES SO THEY DON'T TRAP THE MOUSE
+                document.querySelectorAll('iframe').forEach(iframe => {
+                    iframe.style.pointerEvents = 'none';
+                });
+                
+                focusWindow(windowId.replace('window-', ''));
+            }, {passive: false});
+            
+            header.addEventListener('touchmove', (e) => {
+                if (!touchStartX) return;
+                e.preventDefault();
+                
+                const touch = e.touches[0];
+                const windowId = header.parentElement.id;
+                const window = document.getElementById(windowId);
+                
+                let x = touch.clientX - touchStartX;
+                let y = touch.clientY - touchStartY;
+                
+                x = Math.max(0, Math.min(x, window.innerWidth - window.offsetWidth));
+                y = Math.max(0, Math.min(y, window.innerHeight - window.offsetHeight - 56));
+                
+                window.style.left = x + 'px';
+                window.style.top = y + 'px';
+            }, {passive: false});
+            
+            header.addEventListener('touchend', () => {
+                touchStartX = null;
+                touchStartY = null;
+                
+                // RE-ENABLE IFRAMES
+                document.querySelectorAll('iframe').forEach(iframe => {
+                    iframe.style.pointerEvents = 'auto';
+                });
+            });
+        });
+
+        // Prevent zoom on double tap for mobile
+        let lastTouchEnd = 0;
+        document.addEventListener('touchend', (e) => {
+            const now = Date.now();
+            if (now - lastTouchEnd <= 300) {
+                e.preventDefault();
+            }
+            lastTouchEnd = now;
+        }, false);
 
-        // ==========================================
-        // CYBER SNAKE GAME LOGIC
-        // ==========================================
-        const gameCanvas = document.getElementById('snake-canvas');
-        const gameCtx = gameCanvas.getContext('2d');
-        const gridSize = 20;
-        let snake = [];
-        let food = {};
-        let snakeDx = gridSize;
-        let snakeDy = 0;
-        let snakeGameLoop;
-        let snakeScore = 0;
-        let isSnakeRunning = false;
-
-        function startSnakeGame() {
-            document.getElementById('snake-overlay').classList.add('hidden');
+        // Browser functionality
+        let browserHistory = ['https://darkc0de-chat.hf.space/'];
+        let browserHistoryIndex = 0;
+
+        function browserNavigate() {
+            const url = document.getElementById('browser-url').value;
+            const frame = document.getElementById('browser-frame');
+            const loading = document.getElementById('browser-loading');
+            
+            if (!url) return;
             
-            snake = [
-                {x: 160, y: 160},
-                {x: 140, y: 160},
-                {x: 120, y: 160}
-            ];
-            snakeDx = gridSize;
-            snakeDy = 0;
-            snakeScore = 0;
-            document.getElementById('snake-score').innerText = snakeScore;
+            let fullUrl = url;
+            if (!url.startsWith('http://') && !url.startsWith('https://')) {
+                fullUrl = 'https://' + url;
+            }
             
-            spawnFood();
+            loading.classList.remove('hidden');
+            frame.src = fullUrl;
             
-            if(snakeGameLoop) clearInterval(snakeGameLoop);
-            isSnakeRunning = true;
-            snakeGameLoop = setInterval(updateSnake, 120);
+            // Update history
+            if (browserHistoryIndex < browserHistory.length - 1) {
+                browserHistory = browserHistory.slice(0, browserHistoryIndex + 1);
+            }
+            browserHistory.push(fullUrl);
+            browserHistoryIndex++;
+            
+            setTimeout(() => {
+                loading.classList.add('hidden');
+            }, 1000);
         }
 
-        function spawnFood() {
-            food.x = Math.floor(Math.random() * (gameCanvas.width / gridSize)) * gridSize;
-            food.y = Math.floor(Math.random() * (gameCanvas.height / gridSize)) * gridSize;
+        function browserBack() {
+            if (browserHistoryIndex > 0) {
+                browserHistoryIndex--;
+                const url = browserHistory[browserHistoryIndex];
+                document.getElementById('browser-url').value = url;
+                document.getElementById('browser-frame').src = url;
+            }
         }
 
-        function updateSnake() {
-            if (!isSnakeRunning) return;
-
-            const head = {x: snake[0].x + snakeDx, y: snake[0].y + snakeDy};
-
-            // Wall collision (Game Over)
-            if (head.x < 0 || head.x >= gameCanvas.width || head.y < 0 || head.y >= gameCanvas.height) {
-                return gameSnakeOver();
+        function browserForward() {
+            if (browserHistoryIndex < browserHistory.length - 1) {
+                browserHistoryIndex++;
+                const url = browserHistory[browserHistoryIndex];
+                document.getElementById('browser-url').value = url;
+                document.getElementById('browser-frame').src = url;
             }
+        }
 
-            // Self collision (Game Over)
-            for (let i = 0; i < snake.length; i++) {
-                if (head.x === snake[i].x && head.y === snake[i].y) {
-                    return gameSnakeOver();
-                }
-            }
+        function browserRefresh() {
+            const frame = document.getElementById('browser-frame');
+            const loading = document.getElementById('browser-loading');
+            loading.classList.remove('hidden');
+            frame.src = frame.src;
+            setTimeout(() => {
+                loading.classList.add('hidden');
+            }, 800);
+        }
 
-            snake.unshift(head);
+        function browserHome() {
+            document.getElementById('browser-url').value = 'https://darkc0de-chat.hf.space/';
+            browserNavigate();
+        }
 
-            // Food collision
-            if (head.x === food.x && head.y === food.y) {
-                snakeScore += 10;
-                document.getElementById('snake-score').innerText = snakeScore;
-                spawnFood();
-            } else {
-                snake.pop();
-            }
+        // Calculator functionality
+        let calcCurrent = '';
+        let calcPrevious = '';
+        let calcOperation = null;
+        let calcResetNext = false;
 
-            drawSnake();
+        function calcUpdateDisplay() {
+            document.getElementById('calc-display').textContent = calcCurrent || '0';
+            document.getElementById('calc-history').textContent = calcPrevious + (calcOperation || '');
         }
 
-        function drawSnake() {
-            // Draw background
-            gameCtx.fillStyle = '#111827'; // Dark gray bg
-            gameCtx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
-
-            // Draw grid lines (Cyber look)
-            gameCtx.strokeStyle = 'rgba(16, 185, 129, 0.05)';
-            gameCtx.lineWidth = 1;
-            for(let i = 0; i < gameCanvas.width; i += gridSize) {
-                gameCtx.beginPath(); gameCtx.moveTo(i, 0); gameCtx.lineTo(i, gameCanvas.height); gameCtx.stroke();
-                gameCtx.beginPath(); gameCtx.moveTo(0, i); gameCtx.lineTo(gameCanvas.width, i); gameCtx.stroke();
+        function calcNumber(num) {
+            if (calcResetNext) {
+                calcCurrent = '';
+                calcResetNext = false;
             }
-
-            // Draw Food
-            gameCtx.fillStyle = '#ec4899'; // Pink food
-            gameCtx.shadowBlur = 15;
-            gameCtx.shadowColor = '#ec4899';
-            gameCtx.fillRect(food.x + 2, food.y + 2, gridSize - 4, gridSize - 4);
-
-            // Draw Snake
-            gameCtx.shadowColor = '#10b981';
-            snake.forEach((part, index) => {
-                if(index === 0) {
-                    gameCtx.fillStyle = '#34d399'; // Lighter head
-                    gameCtx.shadowBlur = 10;
-                } else {
-                    gameCtx.fillStyle = '#10b981'; // Body
-                    gameCtx.shadowBlur = 5;
-                }
-                gameCtx.fillRect(part.x + 1, part.y + 1, gridSize - 2, gridSize - 2);
-            });
-            
-            gameCtx.shadowBlur = 0; // Reset
+            if (num === '.' && calcCurrent.includes('.')) return;
+            calcCurrent += num;
+            calcUpdateDisplay();
         }
 
-        function gameSnakeOver() {
-            isSnakeRunning = false;
-            clearInterval(snakeGameLoop);
-            const overlay = document.getElementById('snake-overlay');
-            overlay.classList.remove('hidden');
-            overlay.querySelector('h2').innerText = 'SYSTEM FAILURE';
-            overlay.querySelector('h2').classList.replace('text-emerald-400', 'text-red-500');
-            overlay.querySelector('p').innerHTML = `Game Over.<br>Final Score: ${snakeScore}`;
-            overlay.querySelector('button').innerText = 'REBOOT GAME';
+        function calcOperator(op) {
+            calcCurrent += op;
+            calcUpdateDisplay();
         }
 
-        // Global Keydown hook that isolates commands only when the Game Window is active
-        document.addEventListener('keydown', (e) => {
-            const gameWindow = document.getElementById('window-game');
-            
-            // Only process game inputs if the Game window is open AND is currently active (in focus)
-            if (gameWindow.classList.contains('hidden') || !gameWindow.classList.contains('active')) return;
+        function calcClear() {
+            calcCurrent = '';
+            calcPrevious = '';
+            calcOperation = null;
+            calcResetNext = false;
+            calcUpdateDisplay();
+        }
 
-            // Prevent page scrolling with arrows when playing
-            if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
-                e.preventDefault();
+        function calcEquals() {
+            try {
+                if (!calcCurrent) return;
+                const result = eval(calcCurrent);
+                calcPrevious = calcCurrent;
+                calcCurrent = String(result);
+                calcResetNext = true;
+                calcUpdateDisplay();
+            } catch (e) {
+                calcCurrent = 'Error';
+                calcResetNext = true;
+                calcUpdateDisplay();
             }
+        }
 
-            if (!isSnakeRunning) return;
-
-            if (e.code === 'ArrowUp' && snakeDy === 0) { snakeDx = 0; snakeDy = -gridSize; }
-            if (e.code === 'ArrowDown' && snakeDy === 0) { snakeDx = 0; snakeDy = gridSize; }
-            if (e.code === 'ArrowLeft' && snakeDx === 0) { snakeDx = -gridSize; snakeDy = 0; }
-            if (e.code === 'ArrowRight' && snakeDx === 0) { snakeDx = gridSize; snakeDy = 0; }
+        // Keyboard support for calculator when window is active
+        document.addEventListener('keydown', (e) => {
+            const calcWindow = document.getElementById('window-calculator');
+            if (calcWindow.classList.contains('hidden')) return;
+            if (!calcWindow.classList.contains('active')) return;
+
+            if (e.key >= '0' && e.key <= '9') calcNumber(e.key);
+            if (e.key === '.') calcNumber('.');
+            if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/' || e.key === '(' || e.key === ')') calcOperator(e.key);
+            if (e.key === 'Enter') calcEquals();
+            if (e.key === 'Escape') calcClear();
+            if (e.key === 'Backspace') {
+                calcCurrent = calcCurrent.slice(0, -1);
+                calcUpdateDisplay();
+            }
         });
-        
     </script>
 </body>
 </html>