Update index.html

index.html

@@ -84,7 +84,6 @@
 
         .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 {
@@ -145,10 +144,6 @@
             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%);
@@ -215,15 +210,6 @@
         }
 
         /* 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; }
@@ -233,23 +219,6 @@
             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),
@@ -307,7 +276,6 @@
             <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>
@@ -315,7 +283,6 @@
             <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>
@@ -323,6 +290,14 @@
             <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>
@@ -360,7 +335,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">3/18/2026, 3:56:48 AM</span> from 192.168.1.105</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="mt-4 flex items-center">
                         <span class="text-green-500">root@xortron-os:~#</span>
                         <span class="ml-2 cursor-blink">█</span>
@@ -391,56 +366,17 @@
                         <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">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 class="text-xs text-gray-300 truncate">data.zip</div>
                         </div>
                     </div>
                 </div>
@@ -455,7 +391,6 @@
                     <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>
@@ -463,78 +398,11 @@
             </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 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 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>
-
-                    <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 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>
                 </div>
             </div>
@@ -548,97 +416,14 @@
                     <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="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 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>
             </div>
         </div>
@@ -651,41 +436,14 @@
                     <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>
@@ -698,7 +456,6 @@
                     <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>
@@ -709,31 +466,6 @@
                     <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>
 
@@ -745,10 +477,6 @@
                     <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>
@@ -759,7 +487,7 @@
             </div>
         </div>
 
-        <!-- NEW: Xor's Favs Window -->
+        <!-- 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">
@@ -767,10 +495,6 @@
                     <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>
@@ -781,20 +505,33 @@
             </div>
         </div>
 
-    </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>
+        <!-- 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>
-            <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 -->
@@ -824,28 +561,26 @@
             <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 (Hidden by default) -->
+    <!-- Start Menu -->
     <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">
@@ -877,29 +612,22 @@
             <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>
 
@@ -934,10 +662,8 @@
                 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(() => {
@@ -945,10 +671,8 @@
                     window.style.opacity = '1';
                 }, 10);
             } else {
-                // If already open, just focus it
                 focusWindow(windowId);
             }
-            
             activeWindow = windowId;
         }
 
@@ -985,14 +709,12 @@
             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;
@@ -1010,22 +732,19 @@
             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; // Don't drag if clicking buttons
+            if (e.target.closest('.window-btn')) return; 
             
             const window = document.getElementById(windowId);
-            if (window.dataset.maximized === 'true') return; // Don't drag if maximized
+            if (window.dataset.maximized === 'true') return; 
             
             isDragging = true;
             draggedWindow = window;
             
-            // TEMPORARILY DISABLE IFRAMES SO THEY DON'T TRAP THE MOUSE
             document.querySelectorAll('iframe').forEach(iframe => {
                 iframe.style.pointerEvents = 'none';
             });
@@ -1043,7 +762,6 @@
             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));
             
@@ -1055,13 +773,11 @@
             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-', '');
@@ -1069,7 +785,6 @@
             });
         });
 
-        // Start Menu Toggle
         function toggleStartMenu() {
             const menu = document.getElementById('start-menu');
             if (menu.classList.contains('opacity-0')) {
@@ -1079,35 +794,15 @@
             }
         }
 
-        // 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.contains(e.target)) {
+            if (!menu.contains(e.target) && btn && !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();
@@ -1120,198 +815,143 @@
             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);
 
-        // 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;
+        // ==========================================
+        // 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');
             
-            let fullUrl = url;
-            if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                fullUrl = 'https://' + url;
-            }
+            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;
             
-            loading.classList.remove('hidden');
-            frame.src = fullUrl;
+            spawnFood();
             
-            // Update history
-            if (browserHistoryIndex < browserHistory.length - 1) {
-                browserHistory = browserHistory.slice(0, browserHistoryIndex + 1);
-            }
-            browserHistory.push(fullUrl);
-            browserHistoryIndex++;
-            
-            setTimeout(() => {
-                loading.classList.add('hidden');
-            }, 1000);
+            if(snakeGameLoop) clearInterval(snakeGameLoop);
+            isSnakeRunning = true;
+            snakeGameLoop = setInterval(updateSnake, 120);
         }
 
-        function browserBack() {
-            if (browserHistoryIndex > 0) {
-                browserHistoryIndex--;
-                const url = browserHistory[browserHistoryIndex];
-                document.getElementById('browser-url').value = url;
-                document.getElementById('browser-frame').src = url;
-            }
+        function spawnFood() {
+            food.x = Math.floor(Math.random() * (gameCanvas.width / gridSize)) * gridSize;
+            food.y = Math.floor(Math.random() * (gameCanvas.height / gridSize)) * gridSize;
         }
 
-        function browserForward() {
-            if (browserHistoryIndex < browserHistory.length - 1) {
-                browserHistoryIndex++;
-                const url = browserHistory[browserHistoryIndex];
-                document.getElementById('browser-url').value = url;
-                document.getElementById('browser-frame').src = url;
-            }
-        }
+        function updateSnake() {
+            if (!isSnakeRunning) return;
 
-        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);
-        }
+            const head = {x: snake[0].x + snakeDx, y: snake[0].y + snakeDy};
 
-        function browserHome() {
-            document.getElementById('browser-url').value = 'https://darkc0de-chat.hf.space/';
-            browserNavigate();
-        }
+            // Wall collision (Game Over)
+            if (head.x < 0 || head.x >= gameCanvas.width || head.y < 0 || head.y >= gameCanvas.height) {
+                return gameSnakeOver();
+            }
 
-        // Calculator functionality
-        let calcCurrent = '';
-        let calcPrevious = '';
-        let calcOperation = null;
-        let calcResetNext = false;
+            // 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 calcUpdateDisplay() {
-            document.getElementById('calc-display').textContent = calcCurrent || '0';
-            document.getElementById('calc-history').textContent = calcPrevious + (calcOperation || '');
-        }
+            snake.unshift(head);
 
-        function calcNumber(num) {
-            if (calcResetNext) {
-                calcCurrent = '';
-                calcResetNext = false;
+            // Food collision
+            if (head.x === food.x && head.y === food.y) {
+                snakeScore += 10;
+                document.getElementById('snake-score').innerText = snakeScore;
+                spawnFood();
+            } else {
+                snake.pop();
             }
-            if (num === '.' && calcCurrent.includes('.')) return;
-            calcCurrent += num;
-            calcUpdateDisplay();
-        }
 
-        function calcOperator(op) {
-            calcCurrent += op;
-            calcUpdateDisplay();
+            drawSnake();
         }
 
-        function calcClear() {
-            calcCurrent = '';
-            calcPrevious = '';
-            calcOperation = null;
-            calcResetNext = false;
-            calcUpdateDisplay();
-        }
+        function drawSnake() {
+            // Draw background
+            gameCtx.fillStyle = '#111827'; // Dark gray bg
+            gameCtx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
 
-        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();
+            // 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();
             }
+
+            // 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
         }
 
-        // Keyboard support for calculator when window is active
+        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';
+        }
+
+        // Global Keydown hook that isolates commands only when the Game 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();
+            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;
+
+            // Prevent page scrolling with arrows when playing
+            if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
+                e.preventDefault();
             }
+
+            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; }
         });
+        
     </script>
 </body>
 </html>