reaper-arcade-hub 1.0.0

package/js/app.js

@@ -0,0 +1,1758 @@
+// REAPER HUB - Core Engine (3 Roles: Member/Chat Mod/Owner, Key Limits, Cyber Font, Mod Tab)
+
+class ReaperHubApp {
+  constructor() {
+    this.games = window.REAPER_GAMES || [];
+    this.filteredGames = [...this.games];
+    this.favorites = JSON.parse(localStorage.getItem('reaper_favs') || '[]');
+    this.searchHistory = JSON.parse(localStorage.getItem('reaper_search_history') || '[]');
+    this.currentUser = {
+      username: localStorage.getItem('reaper_username') || '',
+      rank: localStorage.getItem('reaper_rank') || 'member',
+      isBanned: localStorage.getItem('reaper_is_banned') === 'true'
+    };
+    this.isAdmin = this.currentUser.rank === 'owner';
+    this.bannedUsers = JSON.parse(localStorage.getItem('reaper_banned_users') || '[]');
+    this.siteLockdown = localStorage.getItem('reaper_site_lockdown') === 'true';
+    this.isChatLocked = localStorage.getItem('reaper_chat_locked') === 'true';
+    this.aiBypass = localStorage.getItem('reaper_ai_bypass') === 'true';
+    this.activeTab = 'home';
+    this.activeCategory = 'all';
+    this.searchQuery = '';
+    this.currentGame = null;
+    this.chatMessages = JSON.parse(localStorage.getItem('reaper_local_chat') || '[]');
+
+    // Playtime Tracker State
+    this.playtimeSeconds = parseInt(localStorage.getItem('reaper_playtime_' + (this.currentUser.username || 'anon')) || '0', 10);
+    this.isPlayingGame = false;
+    this.lastActivityTime = Date.now();
+    this.isPausedForInactivity = false;
+    this.leaderboardData = [];
+  }
+
+  init() {
+    // 1. Run 10-Second Splash Screen
+    this.runSplashLoader();
+
+    // 2. Check Ban State
+    if (this.currentUser.isBanned || this.bannedUsers.includes(this.currentUser.username)) {
+      this.renderBanScreen();
+      return;
+    }
+
+    // 3. Process URL Master Token from Gateway if present
+    this.processUrlToken();
+
+    // 4. Validate Gateway Key Verification Session with HWID Check
+    const isAuthed = this.checkGatewayAuthentication();
+    const gateModal = document.getElementById('key-gate-modal');
+    if (!isAuthed) {
+      if (gateModal) gateModal.style.display = 'flex';
+    } else {
+      if (gateModal) gateModal.style.display = 'none';
+    }
+
+    // 5. Random identity if empty
+    if (!this.currentUser.username) {
+      const newName = typeof getRandomUsername === 'function' ? getRandomUsername() : "Reaper_" + Math.floor(Math.random() * 9999);
+      this.currentUser.username = newName;
+      localStorage.setItem('reaper_username', newName);
+      this.playtimeSeconds = parseInt(localStorage.getItem('reaper_playtime_' + newName) || '0', 10);
+    }
+
+    // 6. Role check
+    if (this.currentUser.rank === 'owner') {
+      this.isAdmin = true;
+    }
+
+    // 7. Site lockdown
+    if (this.siteLockdown && this.currentUser.rank !== 'owner') {
+      this.renderLockdownScreen();
+      return;
+    }
+
+    // 8. Connect Firebase
+    if (window.reaperFirebase) {
+      window.reaperFirebase.init();
+      window.reaperFirebase.listenChatMessages((msgs) => {
+        if (msgs && msgs.length > 0) {
+          this.chatMessages = msgs;
+          localStorage.setItem('reaper_local_chat', JSON.stringify(msgs));
+        }
+        this.renderChatMessages();
+        this.renderAdminChatLogs();
+        this.renderModChatLogs();
+      });
+      window.reaperFirebase.listenChatLock((isLocked) => {
+        this.isChatLocked = isLocked;
+        this.updateChatStateUI();
+      });
+      this.listenLeaderboard();
+      this.listenUserRanks();
+      window.reaperFirebase.listenGeneratedKeys((keys) => {
+        this.renderAdminKeyList(keys);
+      });
+      window.reaperFirebase.listenBannedUsers((bannedList) => {
+        this.bannedUsers = bannedList || [];
+        this.renderBannedUsersList();
+        if (this.currentUser.rank !== 'owner' && this.bannedUsers.includes(this.currentUser.username)) {
+          this.currentUser.isBanned = true;
+          localStorage.setItem('reaper_is_banned', 'true');
+          localStorage.removeItem('reaper_verified_token');
+          localStorage.removeItem('reaper_token_expires');
+          localStorage.removeItem('reaper_gateway_verified');
+          localStorage.removeItem('reaper_playtime_' + this.currentUser.username);
+          this.renderBanScreen("Your account has been permanently blacklisted and all recorded progress has been purged.");
+        }
+      });
+      window.reaperFirebase.listenShutdownMode((isShutdown) => {
+        this.siteShutdownMode = isShutdown;
+        const toggle = document.getElementById('admin-shutdown-toggle');
+        if (toggle) toggle.checked = isShutdown;
+        if (isShutdown && this.currentUser.rank !== 'owner') {
+          this.renderPermanentShutdownScreen();
+        }
+      });
+      window.reaperFirebase.listenSiteLockdown((isLocked) => {
+        this.siteLockdown = isLocked;
+        const toggle = document.getElementById('admin-lockdown-toggle');
+        if (toggle) toggle.checked = isLocked;
+        if (isLocked && this.currentUser.rank !== 'owner') {
+          this.renderLockdownScreen();
+        }
+      });
+      window.reaperFirebase.listenVerifyLockdown((isLocked) => {
+        this.verifyLockdown = isLocked;
+        const toggle = document.getElementById('admin-verify-lockdown-toggle');
+        if (toggle) toggle.checked = isLocked;
+      });
+      window.reaperFirebase.listenKeysLocked((isLocked) => {
+        this.keysLocked = isLocked;
+        const toggle = document.getElementById('admin-keys-locked-toggle');
+        if (toggle) toggle.checked = isLocked;
+      });
+      window.reaperFirebase.listenRedirectGoogle((isRedirect) => {
+        this.redirectGoogle = isRedirect;
+        const toggle = document.getElementById('admin-redirect-google-toggle');
+        if (toggle) toggle.checked = isRedirect;
+        if (isRedirect && this.currentUser.rank !== 'owner') {
+          window.location.replace("https://www.google.com");
+        }
+      });
+    }
+
+    // 9. Render UI, Games, Leaderboard
+    this.updateUserUI();
+    this.updateStats();
+    this.renderChatMessages();
+    this.renderGamesGrid();
+    this.setupEventListeners();
+    this.setupAdminShortcuts();
+    this.startTimeoutTimerLoop();
+    this.startPlaytimeTrackerLoop();
+
+    this.syncPlaytimeToDB();
+
+    console.log(`[REAPER HUB] System Online. Role: ${this.currentUser.rank.toUpperCase()}`);
+  }
+
+  // ==========================================
+  // DETERMINISTIC CROSS-DOMAIN HWID & GATEKEEPER
+  // ==========================================
+  getDeviceHWID() {
+    const rawString = [
+      navigator.userAgent,
+      screen.width || 1920,
+      screen.height || 1080,
+      screen.colorDepth || 24,
+      navigator.hardwareConcurrency || 4,
+      navigator.language || 'en'
+    ].join('###');
+    
+    let hash = 0;
+    for (let i = 0; i < rawString.length; i++) {
+      hash = ((hash << 5) - hash) + rawString.charCodeAt(i);
+      hash |= 0;
+    }
+    return 'HWID_' + Math.abs(hash).toString(16);
+  }
+
+  redirectToVerify() {
+    if (window.location.hostname.includes('unpkg.com') || window.location.hostname.includes('jsdelivr.net')) {
+      const parts = window.location.pathname.split('/').filter(Boolean);
+      // Example: /packageName/main/index.html -> /packageName/verify/index.html
+      const pkgName = parts[0] || '';
+      window.location.href = `${window.location.origin}/${pkgName}/verify/index.html`;
+    } else if (window.location.hostname.includes('neocities.org')) {
+      window.location.href = 'https://verifyreaper.neocities.org/';
+    } else {
+      window.location.href = '../verify/index.html';
+    }
+  }
+
+  async processUrlToken() {
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get('token') || params.get('key');
+    if (token) {
+      const cleanToken = token.trim();
+      const tokenUpper = cleanToken.toUpperCase();
+
+      // Check Master Owner Key
+      if (tokenUpper === '679-102' || tokenUpper === '679102') {
+        const infiniteExp = Date.now() + (999999 * 3600 * 1000);
+        localStorage.setItem('reaper_verified_token', 'REAPER_MASTER_OWNER_KEY_679_102');
+        localStorage.setItem('reaper_token_expires', infiniteExp.toString());
+        localStorage.setItem('reaper_gateway_verified', 'true');
+        localStorage.setItem('reaper_admin_auth', 'true');
+        localStorage.setItem('reaper_rank', 'owner');
+        this.currentUser.rank = 'owner';
+        this.isAdmin = true;
+        window.history.replaceState({}, document.title, window.location.pathname);
+        this.showToast("TOTAL MASTER OWNER AUTHENTICATED");
+        return;
+      }
+
+      // Check if it's a Base64 Master Token
+      try {
+        const payloadBase64 = cleanToken.split('.')[0];
+        const decoded = atob(payloadBase64);
+        if (decoded.startsWith('REAPER_SECURE_TOKEN::')) {
+          const parts = decoded.split('::');
+          const rank = parts[2] || 'member';
+          const expiresAt = parseInt(parts[4], 10);
+
+          if (expiresAt > Date.now()) {
+            localStorage.setItem('reaper_verified_token', cleanToken);
+            localStorage.setItem('reaper_token_expires', expiresAt.toString());
+            localStorage.setItem('reaper_gateway_verified', 'true');
+            localStorage.setItem('reaper_rank', rank);
+            this.currentUser.rank = rank;
+            if (rank === 'owner') {
+              this.isAdmin = true;
+              localStorage.setItem('reaper_admin_auth', 'true');
+            }
+            window.history.replaceState({}, document.title, window.location.pathname);
+            this.showToast(`Role Activated: ${rank.toUpperCase()}`);
+            return;
+          }
+        }
+      } catch (e) {}
+
+      // Check if it's a plain Access Key
+      let keyInfo = null;
+      if (window.reaperFirebase) {
+        try {
+          keyInfo = await window.reaperFirebase.fetchKeyInfo(tokenUpper);
+        } catch (e) {}
+      }
+      if (!keyInfo) {
+        const localKeys = JSON.parse(localStorage.getItem('reaper_generated_keys') || '{}');
+        keyInfo = localKeys[tokenUpper] || localKeys['REAPER-' + tokenUpper];
+      }
+
+      if (keyInfo) {
+        const hours = keyInfo.hours || 24;
+        const rank = keyInfo.rank || 'member';
+        const expiresAt = Date.now() + (hours * 3600 * 1000);
+
+        if (window.reaperFirebase) {
+          window.reaperFirebase.incrementKeyUsage(tokenUpper);
+        }
+
+        localStorage.setItem('reaper_verified_token', `KEY_AUTH_${tokenUpper}`);
+        localStorage.setItem('reaper_token_expires', expiresAt.toString());
+        localStorage.setItem('reaper_gateway_verified', 'true');
+        localStorage.setItem('reaper_rank', rank);
+        this.currentUser.rank = rank;
+        if (rank === 'owner') {
+          this.isAdmin = true;
+          localStorage.setItem('reaper_admin_auth', 'true');
+        }
+        window.history.replaceState({}, document.title, window.location.pathname);
+        this.showToast(`Access Key Verified: ${rank.toUpperCase()}`);
+        return;
+      }
+    }
+  }
+
+  checkGatewayAuthentication() {
+    const isVerified = localStorage.getItem('reaper_gateway_verified') === 'true';
+    const expiresAt = parseInt(localStorage.getItem('reaper_token_expires') || '0', 10);
+    const token = localStorage.getItem('reaper_verified_token');
+    const rank = localStorage.getItem('reaper_rank');
+
+    if (rank === 'owner' || (token && token.includes('OWNER'))) {
+      return true;
+    }
+
+    if (!isVerified || !token || expiresAt <= Date.now()) {
+      return false;
+    }
+    return true;
+  }
+
+  renderKeyGateModal() {
+    const gateModal = document.getElementById('key-gate-modal');
+    if (gateModal) {
+      gateModal.style.display = 'flex';
+    }
+  }
+
+  async submitGateToken() {
+    const input = document.getElementById('gate-token-input');
+    if (!input || !input.value.trim()) {
+      this.showToast("Please enter an access key or Master Token.");
+      return;
+    }
+
+    const token = input.value.trim();
+    const tokenUpper = token.toUpperCase();
+
+    // 1. Direct Master Owner Key: 679-102
+    if (tokenUpper === '679-102' || tokenUpper === '679102') {
+      const infiniteExp = Date.now() + (999999 * 3600 * 1000);
+      localStorage.setItem('reaper_verified_token', 'REAPER_MASTER_OWNER_KEY_679_102');
+      localStorage.setItem('reaper_token_expires', infiniteExp.toString());
+      localStorage.setItem('reaper_gateway_verified', 'true');
+      localStorage.setItem('reaper_admin_auth', 'true');
+      localStorage.setItem('reaper_rank', 'owner');
+      this.currentUser.rank = 'owner';
+      this.isAdmin = true;
+
+      const gateModal = document.getElementById('key-gate-modal');
+      if (gateModal) gateModal.style.display = 'none';
+      this.updateUserUI();
+      this.showToast("TOTAL MASTER OWNER AUTHENTICATED");
+      return;
+    }
+
+    // 2. Direct Access Key verification (e.g. REAPER-123 or whatever key)
+    let keyInfo = null;
+    if (window.reaperFirebase) {
+      try {
+        keyInfo = await window.reaperFirebase.fetchKeyInfo(tokenUpper);
+      } catch (e) {}
+    }
+    if (!keyInfo) {
+      const localKeys = JSON.parse(localStorage.getItem('reaper_generated_keys') || '{}');
+      keyInfo = localKeys[tokenUpper] || localKeys['REAPER-' + tokenUpper];
+    }
+
+    if (keyInfo) {
+      const hours = keyInfo.hours || 24;
+      const rank = keyInfo.rank || 'member';
+      const expiresAt = Date.now() + (hours * 3600 * 1000);
+
+      // Increment usage
+      if (window.reaperFirebase) {
+        window.reaperFirebase.incrementKeyUsage(tokenUpper);
+      }
+
+      localStorage.setItem('reaper_verified_token', `KEY_AUTH_${tokenUpper}`);
+      localStorage.setItem('reaper_token_expires', expiresAt.toString());
+      localStorage.setItem('reaper_gateway_verified', 'true');
+      localStorage.setItem('reaper_rank', rank);
+      this.currentUser.rank = rank;
+      if (rank === 'owner') {
+        this.isAdmin = true;
+        localStorage.setItem('reaper_admin_auth', 'true');
+      }
+
+      const gateModal = document.getElementById('key-gate-modal');
+      if (gateModal) gateModal.style.display = 'none';
+      this.updateUserUI();
+      this.showToast(`Access Key Verified. Role: ${rank.toUpperCase()}`);
+      return;
+    }
+
+    // 3. Base64 HWID-Locked Master Token
+    try {
+      const payloadBase64 = token.split('.')[0];
+      const decoded = atob(payloadBase64);
+      if (decoded.startsWith('REAPER_SECURE_TOKEN::')) {
+        const parts = decoded.split('::');
+        const rank = parts[2] || 'member';
+        const expiresAt = parseInt(parts[4], 10);
+        const tokenHWID = parts[5];
+        const localHWID = this.getDeviceHWID();
+
+        if (rank !== 'owner' && tokenHWID && localHWID && tokenHWID !== localHWID) {
+          alert("[HWID LOCK ERROR]\nThis Master Token is locked to another hardware device. Please verify on this device.");
+          return;
+        }
+
+        if (expiresAt > Date.now()) {
+          localStorage.setItem('reaper_verified_token', token);
+          localStorage.setItem('reaper_token_expires', expiresAt.toString());
+          localStorage.setItem('reaper_gateway_verified', 'true');
+          localStorage.setItem('reaper_rank', rank);
+          this.currentUser.rank = rank;
+          if (rank === 'owner') {
+            this.isAdmin = true;
+            localStorage.setItem('reaper_admin_auth', 'true');
+          }
+          const gateModal = document.getElementById('key-gate-modal');
+          if (gateModal) gateModal.style.display = 'none';
+          this.updateUserUI();
+          this.showToast(`Access Granted: ${rank.toUpperCase()}`);
+          return;
+        }
+      }
+    } catch (e) {}
+
+    alert("[ACCESS DENIED]\nInvalid, exhausted, or expired Key/Token. Please obtain a valid key from the Owner.");
+  }
+
+  // ==========================================
+  // CUSTOM KEY CREATION WITH MAX USES & DELETION
+  // ==========================================
+  createCustomKey() {
+    const input = document.getElementById('admin-custom-key-input');
+    const durSelect = document.getElementById('admin-custom-key-duration');
+    const usesSelect = document.getElementById('admin-custom-key-maxuses');
+    const rankSelect = document.getElementById('admin-custom-key-rank');
+
+    let rawName = input && input.value.trim() ? input.value.trim().toUpperCase().replace(/\s+/g, '-') : '';
+    let keyName = '';
+    
+    if (!rawName) {
+      // Auto-generate REAPER-$$$
+      keyName = 'REAPER-' + Math.floor(100 + Math.random() * 900);
+    } else {
+      keyName = rawName.startsWith('REAPER-') ? rawName : 'REAPER-' + rawName;
+    }
+
+    const hours = parseInt(durSelect ? durSelect.value : '24', 10);
+    const maxUses = parseInt(usesSelect ? usesSelect.value : '1', 10);
+    const rank = rankSelect ? rankSelect.value : 'member';
+
+    this.saveKeyToStore(keyName, hours, maxUses, rank);
+    if (input) input.value = '';
+  }
+
+  async saveKeyToStore(keyName, hours, maxUses, rank) {
+    const keyInfo = {
+      hours: hours,
+      maxUses: maxUses,
+      usedCount: 0,
+      rank: rank,
+      createdAt: Date.now()
+    };
+
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.saveKey(keyName, keyInfo);
+    } else {
+      const existingKeys = JSON.parse(localStorage.getItem('reaper_generated_keys') || '{}');
+      existingKeys[keyName] = keyInfo;
+      localStorage.setItem('reaper_generated_keys', JSON.stringify(existingKeys));
+    }
+
+    this.renderAdminKeyList();
+    const durLabel = hours === 72 ? '3 Days' : hours === 120 ? '5 Days' : hours >= 87000 ? 'Lifetime' : `${hours}h`;
+    this.showToast(`Created Key: ${keyName} (${maxUses >= 1000 ? 'Unlimited' : maxUses + ' Uses'} | ${durLabel})`);
+  }
+
+  async deleteKey(keyName) {
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.deleteKey(keyName);
+    } else {
+      const existingKeys = JSON.parse(localStorage.getItem('reaper_generated_keys') || '{}');
+      delete existingKeys[keyName];
+      localStorage.setItem('reaper_generated_keys', JSON.stringify(existingKeys));
+    }
+    this.renderAdminKeyList();
+    this.showToast(`Deleted Key: ${keyName}`);
+  }
+
+  async clearAllKeys() {
+    if (confirm("Are you sure you want to delete all generated access keys?")) {
+      const existingKeys = JSON.parse(localStorage.getItem('reaper_generated_keys') || '{}');
+      for (const k of Object.keys(existingKeys)) {
+        if (window.reaperFirebase) await window.reaperFirebase.deleteKey(k);
+      }
+      localStorage.removeItem('reaper_generated_keys');
+      this.renderAdminKeyList();
+      this.showToast("All custom keys deleted.");
+    }
+  }
+
+  renderAdminKeyList(keysObj) {
+    const container = document.getElementById('admin-keys-list');
+    if (!container) return;
+
+    const existingKeys = keysObj || JSON.parse(localStorage.getItem('reaper_generated_keys') || '{}');
+    const entries = Object.entries(existingKeys);
+
+    if (entries.length === 0) {
+      container.innerHTML = `<div style="color: #88aacc; font-size: 0.8rem;">No custom keys active. Create one above.</div>`;
+      return;
+    }
+
+    container.innerHTML = entries.map(([key, info]) => {
+      const usesStr = info.maxUses >= 1000 ? 'Unlimited Uses' : `${info.usedCount || 0}/${info.maxUses} Uses`;
+      let durStr = `${info.hours}h`;
+      if (info.hours === 72) durStr = '3 Days';
+      else if (info.hours === 120) durStr = '5 Days';
+      else if (info.hours === 168) durStr = '7 Days';
+      else if (info.hours === 720) durStr = '30 Days';
+      else if (info.hours >= 87000) durStr = 'Lifetime';
+
+      return `
+        <div style="display: flex; justify-content: space-between; align-items: center; background: #041022; border: 1px solid var(--blue-border); padding: 0.45rem 0.75rem; border-radius: 6px; margin-bottom: 0.4rem; font-size: 0.8rem;">
+          <div>
+            <strong style="color: #00d2ff; font-family: var(--font-mono);">${key}</strong>
+            <span style="color: #aaa; margin-left: 0.4rem;">(${usesStr} | ${durStr} | ${(info.rank || 'member').toUpperCase()})</span>
+          </div>
+          <div style="display: flex; gap: 0.35rem;">
+            <button onclick="navigator.clipboard.writeText('${key}'); app.showToast('Key copied');" class="btn-stealth" style="padding: 0.2rem 0.5rem; font-size: 0.72rem;">COPY</button>
+            <button onclick="app.deleteKey('${key}')" class="btn-stealth" style="color: #ff5555; padding: 0.2rem 0.5rem; font-size: 0.72rem;">DEL</button>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  // ==========================================
+  // USER PROMOTION & DE-RANKING (OWNER ONLY)
+  // ==========================================
+  setUserRank(username, newRank) {
+    if (this.currentUser.rank !== 'owner') return;
+    if (username === this.currentUser.username && newRank !== 'owner') {
+      this.showToast("Cannot demote Owner account.");
+      return;
+    }
+
+    if (window.reaperFirebase && window.reaperFirebase.db) {
+      window.reaperFirebase.db.ref(`reaperUserRanks/${username}`).set(newRank);
+    }
+    
+    // Update local leaderboard data copy
+    const userObj = this.leaderboardData.find(u => u.username === username);
+    if (userObj) userObj.rank = newRank;
+
+    this.renderAdminUsersDirectory();
+    this.showToast(`Updated ${username} to ${newRank.toUpperCase()}`);
+  }
+
+  listenUserRanks() {
+    if (window.reaperFirebase && window.reaperFirebase.db) {
+      window.reaperFirebase.db.ref("reaperUserRanks").on("value", (snap) => {
+        const ranks = snap.val();
+        if (ranks && ranks[this.currentUser.username]) {
+          const assignedRank = ranks[this.currentUser.username];
+          if (assignedRank !== this.currentUser.rank) {
+            this.currentUser.rank = assignedRank;
+            localStorage.setItem('reaper_rank', assignedRank);
+            this.updateUserUI();
+            this.showToast(`Your rank was updated to: ${assignedRank.toUpperCase()}`);
+          }
+        }
+      });
+    }
+  }
+
+  // ==========================================
+  // TAB NAVIGATION & MOD / ADMIN SECTIONS
+  // ==========================================
+  switchTab(tabName) {
+    if (tabName === 'admin' && this.currentUser.rank !== 'owner') {
+      this.promptAdminLogin();
+      return;
+    }
+
+    if (tabName === 'mod' && this.currentUser.rank !== 'chat_mod' && this.currentUser.rank !== 'mod' && this.currentUser.rank !== 'owner') {
+      this.showToast("Access restricted to Chat Mods.");
+      return;
+    }
+
+    this.activeTab = tabName;
+    document.querySelectorAll('.nav-tab-btn').forEach(btn => {
+      btn.classList.toggle('active', btn.getAttribute('data-tab') === tabName);
+    });
+
+    document.querySelectorAll('.tab-section').forEach(sec => {
+      sec.style.display = 'none';
+    });
+
+    const activeSec = document.getElementById(`section-${tabName}`);
+    if (activeSec) {
+      activeSec.style.display = 'block';
+    }
+
+    if (tabName === 'mod') {
+      this.renderModChatLogs();
+    } else if (tabName === 'admin') {
+      this.renderAdminUsersDirectory();
+      this.renderAdminKeyList();
+      this.renderAdminChatLogs();
+      this.renderBannedUsersList();
+      const redirectToggle = document.getElementById('admin-redirect-google-toggle');
+      if (redirectToggle) redirectToggle.checked = Boolean(this.redirectGoogle);
+      const keysLockedToggle = document.getElementById('admin-keys-locked-toggle');
+      if (keysLockedToggle) keysLockedToggle.checked = Boolean(this.keysLocked);
+      const verifyLockToggle = document.getElementById('admin-verify-lockdown-toggle');
+      if (verifyLockToggle) verifyLockToggle.checked = Boolean(this.verifyLockdown);
+      const shutdownToggle = document.getElementById('admin-shutdown-toggle');
+      if (shutdownToggle) shutdownToggle.checked = Boolean(this.siteShutdownMode);
+      const lockToggle = document.getElementById('admin-lockdown-toggle');
+      if (lockToggle) lockToggle.checked = Boolean(this.siteLockdown);
+      const chatLockToggle = document.getElementById('admin-chatlock-toggle');
+      if (chatLockToggle) chatLockToggle.checked = Boolean(this.isChatLocked);
+      const bypassToggle = document.getElementById('admin-bypass-toggle');
+      if (bypassToggle) bypassToggle.checked = Boolean(this.aiBypass);
+    } else if (tabName === 'shield') {
+      this.renderShieldUI();
+    }
+  }
+
+  // ==========================================
+  // BROWSER EXTENSION SHIELD & HOOK DEFENDER
+  // ==========================================
+  renderShieldUI() {
+    const list = document.getElementById('shield-extensions-list');
+    const autoToggle = document.getElementById('auto-shield-toggle');
+    if (autoToggle && window.reaperShield) {
+      autoToggle.checked = window.reaperShield.autoShield;
+    }
+    if (!list) return;
+
+    const extensions = window.reaperShield ? window.reaperShield.scanExtensions() : [];
+    
+    if (extensions.length === 0) {
+      list.innerHTML = `<div style="color: #00ffaa; padding: 1.5rem; text-align: center; font-weight: 700; background: #040e1e; border: 1px solid var(--blue-border); border-radius: 8px;">[✓] NO ACTIVE EXTENSION HOOKS DETECTED. BROWSER IS FULLY ISOLATED.</div>`;
+      return;
+    }
+
+    list.innerHTML = extensions.map(ext => {
+      const isBlocked = ext.status === 'ACTIVE_BLOCKED';
+      const riskColor = ext.risk === 'CRITICAL' ? '#ff3333' : ext.risk === 'HIGH' ? '#ff8800' : '#ffd700';
+
+      return `
+        <div style="display: flex; justify-content: space-between; align-items: center; background: #041022; border: 1px solid ${isBlocked ? '#ff3333' : 'var(--blue-border)'}; border-radius: 8px; padding: 0.85rem 1.15rem; flex-wrap: wrap; gap: 0.75rem;">
+          <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+            <div style="display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;">
+              <strong style="color: #fff; font-size: 0.95rem;">${ext.name}</strong>
+              <span style="font-size: 0.68rem; color: ${riskColor}; border: 1px solid ${riskColor}; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: 800;">${ext.risk} RISK</span>
+              <span style="font-size: 0.68rem; color: #88aacc; background: #020814; padding: 0.15rem 0.45rem; border-radius: 4px;">${ext.category}</span>
+            </div>
+            <div style="font-size: 0.78rem; color: #88aacc;">
+              ${ext.details}
+            </div>
+          </div>
+
+          <div style="display: flex; align-items: center; gap: 0.65rem;">
+            <span style="color: #00ffaa; font-weight: 800; font-size: 0.78rem; background: rgba(0, 255, 170, 0.1); border: 1px solid #00ffaa; padding: 0.3rem 0.65rem; border-radius: 4px;">
+              🛡️ ISOLATED &amp; BLOCKED
+            </span>
+            <button onclick="app.isolateSpecificExtension('${ext.id}')" class="btn-stealth" style="color: #ff5555; border-color: #771111; font-size: 0.75rem; padding: 0.35rem 0.75rem;">
+              CUT HOOK
+            </button>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  purgeAllExtensionHooks() {
+    if (window.reaperShield) {
+      const purged = window.reaperShield.purgeSpyInjections();
+      this.renderShieldUI();
+      this.showToast(`Purged and killed all active extension hooks (${purged} removed)`);
+    } else {
+      this.showToast("All extension hooks cut and neutralized.");
+    }
+  }
+
+  refreshExtensionScan() {
+    if (window.reaperShield) {
+      window.reaperShield.scanExtensions();
+      this.renderShieldUI();
+      this.showToast("Browser extension scan completed.");
+    }
+  }
+
+  isolateSpecificExtension(extId) {
+    if (window.reaperShield) {
+      window.reaperShield.purgeSpyInjections();
+      this.renderShieldUI();
+      this.showToast(`Isolated and killed hooks for: ${extId.toUpperCase()}`);
+    }
+  }
+
+  toggleAutoShield(enabled) {
+    if (window.reaperShield) {
+      window.reaperShield.setAutoPurge(enabled);
+      this.showToast(enabled ? "Auto-Shield active on every visit." : "Auto-Shield disabled.");
+    }
+  }
+
+  renderAdminUsersDirectory() {
+    const container = document.getElementById('admin-users-directory');
+    if (!container) return;
+
+    if (this.leaderboardData.length === 0) {
+      this.leaderboardData = [
+        { username: this.currentUser.username, seconds: this.playtimeSeconds, rank: this.currentUser.rank }
+      ];
+    }
+
+    container.innerHTML = this.leaderboardData.map(u => {
+      const isSelf = u.username === this.currentUser.username;
+      const currentRank = (u.rank || 'member').toLowerCase();
+      const timeStr = this.formatPlaytime(u.seconds || 0);
+
+      return `
+        <div style="display: flex; justify-content: space-between; align-items: center; background: #041022; padding: 0.45rem 0.75rem; border-radius: 6px; border: 1px solid var(--blue-border); font-size: 0.8rem;">
+          <div>
+            <strong style="color: #fff;" class="${currentRank === 'owner' ? 'owner-animated-name' : ''}">${this.escapeHtml(u.username || 'User')}</strong>
+            <span class="rank-pill rank-${currentRank}">${currentRank.toUpperCase()}</span>
+            <span style="color: #88ccff; margin-left: 0.5rem;">Playtime: ${timeStr}</span>
+          </div>
+          <div style="display: flex; gap: 0.35rem;">
+            ${!isSelf ? `
+              ${currentRank === 'member' ? `
+                <button onclick="app.setUserRank('${u.username}', 'chat_mod')" class="btn-stealth" style="color: #00ffaa; padding: 0.2rem 0.5rem; font-size: 0.72rem;">+ PROMOTE MOD</button>
+              ` : currentRank === 'chat_mod' || currentRank === 'mod' ? `
+                <button onclick="app.setUserRank('${u.username}', 'member')" class="btn-stealth" style="color: #ffaa00; padding: 0.2rem 0.5rem; font-size: 0.72rem;">- DE-RANK MEMBER</button>
+              ` : ''}
+              <button onclick="app.banUser('${u.username}')" class="btn-stealth" style="color: #ff5555; padding: 0.2rem 0.5rem; font-size: 0.72rem;">BAN</button>
+            ` : '<span style="color: #ffd700; font-weight: 800;">YOU</span>'}
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  // ==========================================
+  // CHAT MOD DESK ACTIONS
+  // ==========================================
+  modApplyTimeout(minutes) {
+    const input = document.getElementById('mod-timeout-username');
+    if (!input || !input.value.trim()) {
+      this.showToast("Enter a username to timeout.");
+      return;
+    }
+    const targetUser = input.value.trim();
+    if (targetUser === 'owner' || targetUser === this.currentUser.username) {
+      this.showToast("Cannot timeout this account.");
+      return;
+    }
+
+    if (window.reaperFirebase && window.reaperFirebase.db) {
+      window.reaperFirebase.db.ref(`reaperTimeouts/${targetUser}`).set(Date.now() + (minutes * 60 * 1000));
+    }
+    this.showToast(`Applied ${minutes}m timeout to ${targetUser}`);
+    input.value = '';
+  }
+
+  renderModChatLogs() {
+    const container = document.getElementById('mod-chat-logs');
+    if (!container) return;
+
+    if (this.chatMessages.length === 0) {
+      container.innerHTML = `<div style="color: #88aacc; padding: 0.75rem;">No active chat messages.</div>`;
+      return;
+    }
+
+    container.innerHTML = this.chatMessages.map(msg => `
+      <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.65rem; border-bottom: 1px solid #041022; font-size: 0.8rem;">
+        <div>
+          <strong style="color: ${msg.rank === 'owner' ? '#ffd700' : '#00d2ff'};">${this.escapeHtml(msg.username || 'Anon')}:</strong>
+          <span style="color: #d0e4ff; margin-left: 0.35rem;">${this.escapeHtml(msg.message)}</span>
+        </div>
+        <div style="display: flex; gap: 0.35rem;">
+          <button onclick="app.deleteMessage('${msg.id}', '${msg.username}')" style="background: #2b0808; border: 1px solid #ff4444; color: #ff8888; border-radius: 4px; padding: 0.15rem 0.45rem; cursor: pointer; font-size: 0.7rem;">DEL</button>
+          <button onclick="document.getElementById('mod-timeout-username').value='${msg.username}'; app.modApplyTimeout(5);" style="background: #2b1f08; border: 1px solid #ffaa00; color: #ffcc66; border-radius: 4px; padding: 0.15rem 0.45rem; cursor: pointer; font-size: 0.7rem;">MUTE</button>
+        </div>
+      </div>
+    `).join('');
+  }
+
+  // ==========================================
+  // 10-SECOND INITIAL SPLASH LOADER
+  // ==========================================
+  runSplashLoader() {
+    const splash = document.getElementById('app-splash-screen');
+    const bar = document.getElementById('splash-progress-bar');
+    const status = document.getElementById('splash-status-text');
+    const quoteEl = document.getElementById('splash-quote-text');
+    if (!splash || !bar) return;
+
+    const quotes = [
+      "Bypassing school firewall protocols...",
+      "Calibrating 788 reasons to not do math homework...",
+      "Rerouting through quantum Fastly CDN tunnels...",
+      "Overclocking 60 FPS HTML5 game engines...",
+      "Loading stealth cloak matrices...",
+      "Decompiling high-speed arcade manifests...",
+      "Synchronizing real-time playtime leaderboards...",
+      "Initializing unblocked dopamine...",
+      "Warming up Friday Night Funkin rhythm tracks...",
+      "Establishing encrypted starfield link...",
+      "Optimizing potato PC performance mode...",
+      "Preparing the ultimate browser arcade...",
+      "Decrypting high-speed game ROMs...",
+      "Connecting to Firebase Realtime neural network...",
+      "Checking for homework: 0% found...",
+      "All systems nominal. Get ready to play."
+    ];
+
+    let quoteIndex = 0;
+    if (quoteEl) {
+      quoteEl.textContent = `"${quotes[0]}"`;
+    }
+
+    const quoteInterval = setInterval(() => {
+      quoteIndex = (quoteIndex + 1) % quotes.length;
+      if (quoteEl) {
+        quoteEl.style.opacity = '0';
+        quoteEl.style.transform = 'translateY(-3px)';
+        setTimeout(() => {
+          quoteEl.textContent = `"${quotes[quoteIndex]}"`;
+          quoteEl.style.opacity = '1';
+          quoteEl.style.transform = 'translateY(0)';
+        }, 200);
+      }
+    }, 1400);
+
+    let progress = 0;
+    const interval = 100;
+    
+    const timer = setInterval(() => {
+      progress += 1;
+      bar.style.width = `${progress}%`;
+
+      if (progress < 25) {
+        if (status) status.textContent = `[${progress}%] INITIALIZING REAPER CORE...`;
+      } else if (progress < 50) {
+        if (status) status.textContent = `[${progress}%] CONNECTING REALTIME FIREBASE DB...`;
+      } else if (progress < 75) {
+        if (status) status.textContent = `[${progress}%] UNBLOCKING FASTLY CDN ASSETS...`;
+      } else if (progress < 95) {
+        if (status) status.textContent = `[${progress}%] DECRYPTING 788 GAME MANIFESTS...`;
+      } else if (progress < 100) {
+        if (status) status.textContent = `[${progress}%] PREPARING STARFIELD ENGINE...`;
+      } else {
+        if (status) status.textContent = `[100%] ALL SYSTEMS ONLINE`;
+        clearInterval(timer);
+        clearInterval(quoteInterval);
+        setTimeout(() => {
+          splash.style.opacity = '0';
+          setTimeout(() => { splash.style.display = 'none'; }, 600);
+        }, 400);
+      }
+    }, interval);
+  }
+
+  // ==========================================
+  // PLAYTIME TRACKER & LEADERBOARD
+  // ==========================================
+  startPlaytimeTrackerLoop() {
+    const resetActivity = () => {
+      this.lastActivityTime = Date.now();
+      if (this.isPausedForInactivity) {
+        this.isPausedForInactivity = false;
+        this.updatePlaytimeStatusUI();
+      }
+    };
+
+    window.addEventListener('mousemove', resetActivity);
+    window.addEventListener('keydown', resetActivity);
+    window.addEventListener('mousedown', resetActivity);
+    window.addEventListener('touchstart', resetActivity);
+
+    setInterval(() => {
+      if (this.isPlayingGame) {
+        const inactiveDuration = Date.now() - this.lastActivityTime;
+
+        if (inactiveDuration >= 60000) {
+          this.isPausedForInactivity = true;
+          this.updatePlaytimeStatusUI();
+        } else {
+          this.isPausedForInactivity = false;
+          this.playtimeSeconds += 1;
+          localStorage.setItem('reaper_playtime_' + this.currentUser.username, this.playtimeSeconds.toString());
+          this.updatePlaytimeStatusUI();
+
+          if (this.playtimeSeconds % 10 === 0) {
+            this.syncPlaytimeToDB();
+          }
+        }
+      }
+    }, 1000);
+  }
+
+  updatePlaytimeStatusUI() {
+    const trackerEl = document.getElementById('player-playtime-counter');
+    const badgeEl = document.getElementById('stat-my-playtime');
+    const formatted = this.formatPlaytime(this.playtimeSeconds);
+
+    if (trackerEl) {
+      if (this.isPausedForInactivity) {
+        trackerEl.textContent = `PAUSED (INACTIVE) - ${formatted}`;
+        trackerEl.style.color = '#ffaa00';
+      } else {
+        trackerEl.textContent = `PLAYTIME: ${formatted}`;
+        trackerEl.style.color = '#00d2ff';
+      }
+    }
+
+    if (badgeEl) badgeEl.textContent = formatted;
+  }
+
+  formatPlaytime(totalSeconds) {
+    const hours = Math.floor(totalSeconds / 3600);
+    const mins = Math.floor((totalSeconds % 3600) / 60);
+    const secs = totalSeconds % 60;
+    if (hours > 0) {
+      return `${hours}h ${mins}m ${secs}s`;
+    }
+    return `${mins}m ${secs}s`;
+  }
+
+  async syncPlaytimeToDB() {
+    if (window.reaperFirebase && window.reaperFirebase.db) {
+      try {
+        await window.reaperFirebase.db.ref(`reaperPlaytime/${this.currentUser.username}`).set({
+          username: this.currentUser.username,
+          rank: this.currentUser.rank,
+          seconds: this.playtimeSeconds,
+          lastActive: Date.now()
+        });
+      } catch (e) {}
+    }
+  }
+
+  listenLeaderboard() {
+    if (window.reaperFirebase && window.reaperFirebase.db) {
+      try {
+        window.reaperFirebase.db.ref("reaperPlaytime").on("value", (snap) => {
+          const val = snap.val();
+          if (val) {
+            this.leaderboardData = Object.values(val);
+            this.leaderboardData.sort((a, b) => (b.seconds || 0) - (a.seconds || 0));
+          } else {
+            this.leaderboardData = [
+              { username: this.currentUser.username, seconds: this.playtimeSeconds, rank: this.currentUser.rank }
+            ];
+          }
+          this.renderLeaderboardUI();
+          this.renderAdminUsersDirectory();
+        });
+      } catch (e) {
+        this.renderLeaderboardUI();
+      }
+    } else {
+      this.leaderboardData = [
+        { username: this.currentUser.username, seconds: this.playtimeSeconds, rank: this.currentUser.rank }
+      ];
+      this.renderLeaderboardUI();
+    }
+  }
+
+  renderLeaderboardUI() {
+    const container = document.getElementById('leaderboard-rows-container');
+    if (!container) return;
+
+    if (this.leaderboardData.length === 0) {
+      this.leaderboardData = [
+        { username: this.currentUser.username, seconds: this.playtimeSeconds, rank: this.currentUser.rank }
+      ];
+    }
+
+    container.innerHTML = this.leaderboardData.slice(0, 20).map((player, idx) => {
+      const rankNum = idx + 1;
+      const timeStr = this.formatPlaytime(player.seconds || 0);
+      const isSelf = player.username === this.currentUser.username;
+      const isOwner = player.rank === 'owner';
+
+      return `
+        <div class="leaderboard-row ${isSelf ? 'self-row' : ''}">
+          <div class="leaderboard-rank rank-${rankNum}">#${rankNum}</div>
+          <div class="leaderboard-user">
+            <span style="color: #fff;" class="${isOwner ? 'owner-animated-name' : ''}">${this.escapeHtml(player.username || 'Member')}</span>
+            <span class="rank-pill rank-${(player.rank || 'member').toLowerCase()}">${(player.rank || 'MEMBER').toUpperCase()}</span>
+          </div>
+          <div class="leaderboard-time">${timeStr}</div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  // ==========================================
+  // CHAT SUITE (Robust Instant Messaging)
+  // ==========================================
+  startTimeoutTimerLoop() {
+    setInterval(() => {
+      this.updateChatStateUI();
+    }, 1000);
+  }
+
+  updateChatStateUI() {
+    const warningBar = document.getElementById('chat-timeout-bar');
+    const input = document.getElementById('red-chat-input');
+    const sendBtn = document.getElementById('red-chat-send-btn');
+    const lockIndicator = document.getElementById('chat-lock-indicator');
+
+    if (lockIndicator) {
+      lockIndicator.style.display = this.isChatLocked ? 'inline-block' : 'none';
+    }
+
+    if (!input || !sendBtn) return;
+
+    const isPrivileged = this.currentUser.rank === 'owner' || this.currentUser.rank === 'chat_mod' || this.currentUser.rank === 'mod';
+    const secondsLeft = window.aiModerator ? window.aiModerator.getTimeoutRemaining() : 0;
+
+    if (secondsLeft > 0 && !isPrivileged) {
+      const formatted = window.aiModerator.formatTime(secondsLeft);
+      if (warningBar) {
+        warningBar.style.display = 'block';
+        warningBar.textContent = `TIMED OUT (${formatted} REMAINING)`;
+      }
+      input.disabled = true;
+      sendBtn.disabled = true;
+      sendBtn.style.opacity = '0.5';
+      input.placeholder = `Timed out (${formatted})...`;
+    } else if (this.isChatLocked && !isPrivileged) {
+      if (warningBar) warningBar.style.display = 'none';
+      input.disabled = true;
+      sendBtn.disabled = true;
+      sendBtn.style.opacity = '0.5';
+      input.placeholder = `[CHAT LOCKED]`;
+    } else {
+      if (warningBar) warningBar.style.display = 'none';
+      input.disabled = false;
+      sendBtn.disabled = false;
+      sendBtn.style.opacity = '1';
+      input.placeholder = "Send message in Chat...";
+    }
+  }
+
+  async handleSendChatMessage() {
+    if (this.currentUser.isBanned) return;
+
+    const isPrivileged = this.currentUser.rank === 'owner' || this.currentUser.rank === 'chat_mod' || this.currentUser.rank === 'mod';
+
+    if (this.isChatLocked && !isPrivileged) {
+      this.showToast("[CHAT LOCKED] Chat is locked.");
+      return;
+    }
+
+    const secondsLeft = window.aiModerator ? window.aiModerator.getTimeoutRemaining() : 0;
+    if (secondsLeft > 0 && !isPrivileged) {
+      this.showToast("You are currently timed out.");
+      return;
+    }
+
+    const input = document.getElementById('red-chat-input');
+    if (!input || !input.value.trim()) return;
+
+    const message = input.value.trim();
+
+    if (window.aiModerator) {
+      const check = window.aiModerator.checkMessage(message, isPrivileged);
+      if (!check.allowed) {
+        input.value = '';
+        this.updateChatStateUI();
+        this.showToast("Message blocked by AI filter. You are timed out for 5 minutes.");
+        return;
+      }
+    }
+
+    input.value = '';
+
+    const msgData = {
+      username: this.currentUser.username,
+      rank: this.currentUser.rank,
+      playtimeStr: this.formatPlaytime(this.playtimeSeconds),
+      message: message,
+      timestamp: Date.now()
+    };
+
+    // Optimistically add to local messages
+    this.chatMessages.push(msgData);
+    this.renderChatMessages();
+
+    // Broadcast to Firebase
+    await window.reaperFirebase.sendChatMessage(msgData);
+  }
+
+  async deleteMessage(msgId, authorName) {
+    const isPrivileged = this.currentUser.rank === 'owner' || this.currentUser.rank === 'chat_mod' || this.currentUser.rank === 'mod';
+    const canDelete = isPrivileged || (authorName === this.currentUser.username);
+    if (!canDelete) {
+      this.showToast("You can only delete your own messages.");
+      return;
+    }
+
+    if (confirm("Delete this message?")) {
+      this.chatMessages = this.chatMessages.filter(m => m.id !== msgId);
+      this.renderChatMessages();
+      await window.reaperFirebase.deleteChatMessage(msgId);
+      this.showToast("Message deleted.");
+    }
+  }
+
+  renderChatMessages() {
+    const container = document.getElementById('red-chat-messages');
+    if (!container) return;
+
+    if (this.chatMessages.length === 0) {
+      container.innerHTML = `<div style="text-align: center; color: #88aacc; padding: 2rem; font-size: 0.8rem;">No messages in Chat.</div>`;
+      return;
+    }
+
+    container.innerHTML = this.chatMessages.map(msg => {
+      const timeStr = msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+      const initial = (msg.username || 'R').charAt(0).toUpperCase();
+      const isSelf = msg.username === this.currentUser.username;
+      const isOwner = msg.rank === 'owner';
+      const isMod = msg.rank === 'chat_mod' || msg.rank === 'mod';
+      const isPrivileged = this.currentUser.rank === 'owner' || this.currentUser.rank === 'chat_mod' || this.currentUser.rank === 'mod';
+      const showDel = isPrivileged || isSelf;
+
+      return `
+        <div class="red-msg-row ${isSelf ? 'msg-self' : 'msg-other'}">
+          <div class="red-msg-avatar" style="${isOwner ? 'background: linear-gradient(135deg, #ffd700, #ff8800); color: #000; box-shadow: 0 0 10px rgba(255,215,0,0.6);' : isMod ? 'background: #00ffaa; color: #000;' : ''}">${initial}</div>
+          <div class="red-msg-body">
+            <div class="red-msg-meta">
+              <span class="red-msg-author ${isOwner ? 'owner-animated-name' : ''}" style="${isMod ? 'color: #00ffaa;' : ''}">${this.escapeHtml(msg.username || 'Anon')}</span>
+              ${msg.playtimeStr ? `<span class="red-msg-playtime">(${msg.playtimeStr})</span>` : ''}
+              <span style="color: #666; font-size: 0.65rem;">${timeStr}</span>
+              ${showDel ? `<button class="red-btn-del" onclick="app.deleteMessage('${msg.id}', '${msg.username}')" title="Delete message">[X]</button>` : ''}
+            </div>
+            <div class="red-msg-bubble">${this.escapeHtml(msg.message)}</div>
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    container.scrollTop = container.scrollHeight;
+  }
+
+  // ==========================================
+  // GAMES CATALOGUE & PLAYER
+  // ==========================================
+  filterGames(category, search = '') {
+    this.activeCategory = category;
+    this.searchQuery = search.toLowerCase().trim();
+
+    this.filteredGames = this.games.filter(game => {
+      const gName = (game.name || '').toLowerCase();
+      const specials = game.special || [];
+
+      let matchesCat = true;
+      if (category === 'featured') {
+        matchesCat = Boolean(game.featured);
+      } else if (category === 'favorites') {
+        matchesCat = this.favorites.includes(game.id);
+      } else if (category === 'fnf') {
+        matchesCat = specials.includes('fnf') || gName.includes('friday night funkin') || gName.includes('fnf');
+      } else if (category === 'port') {
+        matchesCat = specials.includes('port');
+      } else if (category === 'flash') {
+        matchesCat = specials.includes('flash');
+      } else if (category === 'emulator') {
+        matchesCat = specials.includes('emulator');
+      } else if (category === 'tools') {
+        matchesCat = specials.includes('tools');
+      }
+
+      let matchesSearch = true;
+      if (this.searchQuery) {
+        matchesSearch = (
+          gName.includes(this.searchQuery) ||
+          (game.author && game.author.toLowerCase().includes(this.searchQuery)) ||
+          (game.id && game.id.toString() === this.searchQuery)
+        );
+      }
+
+      return matchesCat && matchesSearch;
+    });
+
+    this.renderGamesGrid();
+  }
+
+  renderGamesGrid() {
+    const grid = document.getElementById('games-grid');
+    if (!grid) return;
+
+    if (this.filteredGames.length === 0) {
+      grid.innerHTML = `
+        <div style="grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; color: #666; font-family: var(--font-mono);">
+          <div style="font-size: 1.8rem; margin-bottom: 0.5rem; color: #fff;">[!] NO GAMES FOUND</div>
+          <p>No games matching category "${this.activeCategory}".</p>
+        </div>
+      `;
+      return;
+    }
+
+    grid.innerHTML = this.filteredGames.map(game => {
+      const isFav = this.favorites.map(String).includes(String(game.id));
+      const coverUrl = game.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}`;
+
+      return `
+        <div class="game-card" onclick="app.launchGame(${game.id})">
+          <div class="game-thumb-container">
+            <img class="game-thumb" src="${coverUrl}" alt="${game.name}" loading="lazy" onerror="this.onerror=null; this.src='https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}';" />
+            ${game.featured ? '<span class="game-badge-featured">FEATURED</span>' : ''}
+          </div>
+          <div class="game-info">
+            <div class="game-title" title="${game.name}">${game.name}</div>
+            <div class="game-meta">
+              <span class="game-author">${game.author || 'GN-Math'}</span>
+              <button class="btn-fav ${isFav ? 'active' : ''}" onclick="event.stopPropagation(); app.toggleFavorite('${game.id}')" title="${isFav ? 'Remove from favorites' : 'Add to favorites'}">
+                ${isFav ? '★ SAVED' : '☆ FAV'}
+              </button>
+            </div>
+            <button class="btn-card-play">PLAY GAME</button>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  toggleFavorite(id) {
+    const strId = String(id);
+    const numId = Number(id);
+    const existingIndex = this.favorites.findIndex(f => String(f) === strId || Number(f) === numId);
+
+    if (existingIndex > -1) {
+      this.favorites.splice(existingIndex, 1);
+      this.showToast("Removed from Favorites");
+    } else {
+      this.favorites.push(numId || strId);
+      this.showToast("Saved to Favorites ★");
+    }
+    localStorage.setItem('reaper_favs', JSON.stringify(this.favorites));
+    this.updateStats();
+    if (this.activeCategory === 'favorites') {
+      this.filterGames('favorites', this.searchQuery);
+    } else {
+      this.renderGamesGrid();
+    }
+  }
+
+  async launchGame(gameId) {
+    const game = this.games.find(g => g.id === gameId);
+    if (!game) return;
+    this.currentGame = game;
+
+    const modal = document.getElementById('game-player-modal');
+    const iframe = document.getElementById('player-iframe');
+    const nameEl = document.getElementById('player-game-name');
+    const statusBadge = document.getElementById('player-status-badge');
+
+    if (modal && iframe) {
+      nameEl.textContent = game.name;
+      if (statusBadge) statusBadge.textContent = 'Loading...';
+
+      modal.style.display = 'flex';
+      document.body.style.overflow = 'hidden';
+
+      this.isPlayingGame = true;
+      this.lastActivityTime = Date.now();
+      this.isPausedForInactivity = false;
+      this.updatePlaytimeStatusUI();
+
+      const filename = game.url.split('/').pop();
+      iframe.removeAttribute('srcdoc');
+
+      try {
+        const res = await fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`);
+        if (res.ok) {
+          let html = await res.text();
+          if (html && html.length > 50) {
+            html = html.replace(/https?:\/\/cdn\.jsdelivr\.net\/gh\//g, 'https://fastly.jsdelivr.net/gh/');
+            html = html.replace(/https?:\/\/cdn\.jsdelivr\.net\/npm\//g, 'https://fastly.jsdelivr.net/npm/');
+            
+            iframe.srcdoc = html;
+            if (statusBadge) statusBadge.textContent = 'ONLINE';
+            return;
+          }
+        }
+      } catch (err) {
+        console.warn("Direct fetch fallback:", err);
+      }
+
+      iframe.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
+      if (statusBadge) statusBadge.textContent = 'FALLBACK CDN';
+    }
+  }
+
+  closePlayer() {
+    const modal = document.getElementById('game-player-modal');
+    const iframe = document.getElementById('player-iframe');
+    if (modal && iframe) {
+      iframe.src = 'about:blank';
+      iframe.removeAttribute('srcdoc');
+      modal.style.display = 'none';
+      document.body.style.overflow = 'auto';
+      this.currentGame = null;
+      
+      this.isPlayingGame = false;
+      this.syncPlaytimeToDB();
+    }
+  }
+
+  reloadPlayer() {
+    if (this.currentGame) {
+      this.launchGame(this.currentGame.id);
+      this.showToast("Reloading game...");
+    }
+  }
+
+  togglePlayerFullscreen() {
+    const frameWrapper = document.querySelector('.player-frame-wrapper');
+    if (!document.fullscreenElement) {
+      frameWrapper.requestFullscreen().catch(e => console.error(e));
+    } else {
+      document.exitFullscreen();
+    }
+  }
+
+  async openGameAboutBlank() {
+    if (!this.currentGame) return;
+    const filename = this.currentGame.url.split('/').pop();
+    const win = window.open('about:blank', '_blank');
+    if (win) {
+      const doc = win.document;
+      doc.title = "Google Classroom";
+      const link = doc.createElement('link');
+      link.rel = 'icon';
+      link.href = 'https://ssl.gstatic.com/classroom/favicon.png';
+      doc.head.appendChild(link);
+
+      const frame = doc.createElement('iframe');
+      frame.style.border = 'none';
+      frame.style.width = '100vw';
+      frame.style.height = '100vh';
+      frame.style.margin = '0';
+      frame.style.position = 'fixed';
+      frame.style.top = '0';
+      frame.style.left = '0';
+      frame.allow = 'autoplay; fullscreen; gamepad';
+      
+      try {
+        const res = await fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`);
+        if (res.ok) {
+          let html = await res.text();
+          if (html && html.length > 50) {
+            html = html.replace(/https?:\/\/cdn\.jsdelivr\.net\/gh\//g, 'https://fastly.jsdelivr.net/gh/');
+            html = html.replace(/https?:\/\/cdn\.jsdelivr\.net\/npm\//g, 'https://fastly.jsdelivr.net/npm/');
+            frame.srcdoc = html;
+          } else {
+            frame.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
+          }
+        } else {
+          frame.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
+        }
+      } catch (e) {
+        frame.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
+      }
+
+      doc.body.style.margin = '0';
+      doc.body.style.overflow = 'hidden';
+      doc.body.appendChild(frame);
+      this.showToast("Game launched in about:blank tab.");
+    }
+  }
+
+  openSiteAboutBlank() {
+    const win = window.open('about:blank', '_blank');
+    if (win) {
+      const doc = win.document;
+      doc.title = "Classes";
+      const link = doc.createElement('link');
+      link.rel = 'icon';
+      link.href = 'https://ssl.gstatic.com/classroom/favicon.png';
+      doc.head.appendChild(link);
+
+      const frame = doc.createElement('iframe');
+      frame.style.border = 'none';
+      frame.style.width = '100vw';
+      frame.style.height = '100vh';
+      frame.style.margin = '0';
+      frame.style.position = 'fixed';
+      frame.style.top = '0';
+      frame.style.left = '0';
+      frame.allow = 'autoplay; fullscreen; gamepad';
+      frame.src = window.location.href;
+      doc.body.style.margin = '0';
+      doc.body.style.overflow = 'hidden';
+      doc.body.appendChild(frame);
+      this.showToast("Site cloaked in about:blank.");
+    }
+  }
+
+  handleOpiumSearch() {
+    const input = document.getElementById('opium-search-input');
+    if (!input || !input.value.trim()) return;
+
+    const query = input.value.trim();
+
+    const matchedGame = this.games.find(g => g.name.toLowerCase().includes(query.toLowerCase()));
+    if (matchedGame) {
+      this.launchGame(matchedGame.id);
+      input.value = '';
+      return;
+    }
+
+    this.switchTab('games');
+    const sInput = document.getElementById('search-games-input');
+    if (sInput) {
+      sInput.value = query;
+      this.filterGames('all', query);
+    }
+    input.value = '';
+  }
+
+  openUpdateLogsModal() {
+    const modal = document.getElementById('update-logs-modal');
+    if (modal) modal.style.display = 'flex';
+  }
+
+  closeUpdateLogsModal() {
+    const modal = document.getElementById('update-logs-modal');
+    if (modal) modal.style.display = 'none';
+  }
+
+  renderBanScreen(customReason) {
+    document.body.innerHTML = `
+      <div style="display: flex; height: 100vh; width: 100vw; background: #000; color: #ff2a2a; font-family: var(--font-mono); align-items: center; justify-content: center; text-align: center; padding: 2rem;">
+        <div style="border: 2px solid #ff2a2a; padding: 3rem 2rem; max-width: 540px; background: #0c0202; border-radius: 10px; box-shadow: 0 0 40px rgba(255, 42, 42, 0.4);">
+          <h1 style="font-size: 2.2rem; margin-bottom: 1rem; color: #ff3333;">[PERMANENT BAN]</h1>
+          <p style="color: #ccc; margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.6;">
+            ${customReason || 'You have been permanently banned by the Reaper System.'}
+          </p>
+          <div style="font-size: 0.8rem; color: #772222; border-top: 1px solid #331111; padding-top: 1rem;">
+            IDENTIFIER BLACKLISTED // ZERO TOLERANCE POLICY
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  renderPermanentShutdownScreen() {
+    document.body.innerHTML = `
+      <div style="display: flex; height: 100vh; width: 100vw; background: #020408; color: #fff; font-family: var(--font-main); align-items: center; justify-content: center; text-align: center; padding: 2rem; box-sizing: border-box;">
+        <div style="border: 2px solid #ff3333; padding: 3.5rem 2.5rem; max-width: 580px; width: 100%; background: rgba(10, 2, 2, 0.96); border-radius: 12px; box-shadow: 0 0 50px rgba(255, 30, 30, 0.5);">
+          <div style="font-size: 3.8rem; margin-bottom: 0.5rem; font-family: var(--font-logo); font-weight: 900; color: #ff4444; letter-spacing: 0.1em;">reaper</div>
+          <h1 style="color: #ffffff; font-size: 1.85rem; font-family: var(--font-heading); margin-bottom: 1.25rem; letter-spacing: 0.05em; font-weight: 900;">WE ARE SHUTTING DOWN FOR GOOD.</h1>
+          <p style="color: #ffaaaa; font-size: 0.95rem; margin-bottom: 2rem; line-height: 1.7;">
+            Reaper Hub has been permanently closed by the Owner. All servers and services have been decommissioned. Thank you to everyone who played.
+          </p>
+          <div style="border-top: 1px solid #331111; padding-top: 1.5rem; display: flex; justify-content: center;">
+            <button onclick="app.promptAdminLogin()" class="btn-stealth" style="color: #884444; border-color: #552222; font-size: 0.72rem; padding: 0.4rem 0.8rem;">
+              OWNER EMERGENCY LOGIN
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  renderLockdownScreen() {
+    document.body.innerHTML = `
+      <div style="display: flex; height: 100vh; width: 100vw; background: #050505; color: #fff; font-family: var(--font-main); align-items: center; justify-content: center; text-align: center; padding: 2rem;">
+        <div style="border: 1.5px solid #0088ff; padding: 3rem 2rem; max-width: 550px; background: #041022; border-radius: 10px; box-shadow: 0 0 35px rgba(0, 136, 255, 0.3);">
+          <div style="font-size: 2.5rem; margin-bottom: 1rem; font-family: var(--font-logo); font-weight: 900;">REAPER HUB</div>
+          <h2 style="color: #00d2ff; margin-bottom: 1rem; font-family: var(--font-heading);">[PORTAL MAINTENANCE / LOCKDOWN]</h2>
+          <p style="color: #88aacc; font-size: 0.9rem; margin-bottom: 2rem;">
+            The portal is locked by the Owner.
+          </p>
+          <button onclick="app.promptAdminLogin()" class="btn-primary" style="padding: 0.75rem 1.5rem;">
+            OWNER LOGIN
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  generateNewUsername() {
+    const newName = typeof getRandomUsername === 'function' ? getRandomUsername() : "Reaper_" + Math.floor(Math.random() * 9999);
+    this.currentUser.username = newName;
+    localStorage.setItem('reaper_username', newName);
+    this.playtimeSeconds = parseInt(localStorage.getItem('reaper_playtime_' + newName) || '0', 10);
+    this.updateUserUI();
+    this.syncPlaytimeToDB();
+    this.showToast(`Identity: ${newName}`);
+  }
+
+  updateUserUI() {
+    const isOwner = this.currentUser.rank === 'owner';
+    const isMod = this.currentUser.rank === 'chat_mod' || this.currentUser.rank === 'mod';
+
+    const userDisp = document.getElementById('header-username-display');
+    if (userDisp) {
+      userDisp.textContent = this.currentUser.username;
+      userDisp.className = `bind-username ${isOwner ? 'owner-animated-name' : ''}`;
+    }
+
+    const rankBadge = document.getElementById('header-rank-badge');
+    if (rankBadge) {
+      rankBadge.textContent = isOwner ? 'OWNER' : isMod ? 'CHAT MOD' : 'MEMBER';
+      rankBadge.className = `bind-rank rank-pill rank-${isOwner ? 'owner' : isMod ? 'mod' : 'member'}`;
+    }
+
+    const adminNavTab = document.getElementById('nav-tab-admin');
+    if (adminNavTab) {
+      adminNavTab.style.display = isOwner ? 'inline-block' : 'none';
+    }
+
+    const modNavTab = document.getElementById('nav-tab-mod');
+    if (modNavTab) {
+      modNavTab.style.display = (isOwner || isMod) ? 'inline-block' : 'none';
+    }
+  }
+
+  updateStats() {
+    const countEl = document.getElementById('stat-game-count');
+    if (countEl) countEl.textContent = this.games.length;
+
+    const favCountEl = document.getElementById('stat-fav-count');
+    if (favCountEl) favCountEl.textContent = this.favorites.length;
+  }
+
+  // Admin / Owner Controls
+  promptAdminLogin() {
+    const key = prompt("ENTER MASTER OWNER KEY:");
+    if (!key) return;
+    const cleanKey = key.trim().toUpperCase();
+
+    if (cleanKey === "679-102" || cleanKey === "679102") {
+      this.isAdmin = true;
+      this.currentUser.rank = 'owner';
+      localStorage.setItem('reaper_admin_auth', 'true');
+      localStorage.setItem('reaper_rank', 'owner');
+      this.updateUserUI();
+      this.switchTab('admin');
+      this.showToast("TOTAL MASTER OWNER AUTHENTICATED");
+    } else {
+      this.showToast("ACCESS DENIED");
+    }
+  }
+
+  async toggleRedirectGoogle(isRedirect) {
+    this.redirectGoogle = isRedirect;
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.setRedirectGoogle(isRedirect);
+    }
+    this.showToast(isRedirect ? "GOOGLE REDIRECT PANIC MODE ENABLED" : "GOOGLE REDIRECT DISABLED");
+  }
+
+  async toggleKeysLocked(isLocked) {
+    this.keysLocked = isLocked;
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.setKeysLocked(isLocked);
+    }
+    this.showToast(isLocked ? "ALL ACCESS KEYS PAUSED (FROZEN)" : "ACCESS KEYS RESUMED");
+  }
+
+  async toggleVerifyLockdown(isLocked) {
+    this.verifyLockdown = isLocked;
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.setVerifyLockdown(isLocked);
+    }
+    this.showToast(isLocked ? "VERIFY GATEWAY LOCKED" : "VERIFY GATEWAY UNLOCKED");
+  }
+
+  async toggleSiteLockdown(isLocked) {
+    this.siteLockdown = isLocked;
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.setSiteLockdown(isLocked);
+    }
+    this.showToast(isLocked ? "MAIN PORTAL LOCKDOWN ACTIVE" : "MAIN PORTAL LOCKDOWN REMOVED");
+  }
+
+  async toggleChatLock(isLocked) {
+    this.isChatLocked = isLocked;
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.setChatLock(isLocked);
+    }
+    this.updateChatStateUI();
+    this.showToast(isLocked ? "CHAT LOCKED" : "CHAT UNLOCKED");
+  }
+
+  async toggleShutdownMode(isShutdown) {
+    this.siteShutdownMode = isShutdown;
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.setShutdownMode(isShutdown);
+    }
+    this.showToast(isShutdown ? "PERMANENT SHUTDOWN MODE ACTIVATED" : "SHUTDOWN MODE DISABLED");
+  }
+
+  async purgeAllServerData() {
+    if (confirm("WARNING: This will permanently wipe ALL chat messages, playtime leaderboard scores, and access keys across the entire server.\n\nAre you sure you want to PURGE ALL?")) {
+      if (window.reaperFirebase) {
+        await window.reaperFirebase.purgeAllServerData();
+      }
+      this.chatMessages = [];
+      this.leaderboardData = [{ username: this.currentUser.username, seconds: this.playtimeSeconds, rank: this.currentUser.rank }];
+      this.renderChatMessages();
+      this.renderAdminChatLogs();
+      this.renderModChatLogs();
+      this.renderLeaderboardUI();
+      this.renderAdminKeyList({});
+      this.showToast("ALL SERVER DATA PURGED SUCCESSFULLY");
+    }
+  }
+
+  async banUser(username) {
+    if (!username || username === 'owner') return;
+    
+    // Wipe locally
+    if (!this.bannedUsers.includes(username)) {
+      this.bannedUsers.push(username);
+    }
+    localStorage.setItem('reaper_banned_users', JSON.stringify(this.bannedUsers));
+
+    // Wipe from leaderboard array
+    this.leaderboardData = this.leaderboardData.filter(u => u.username !== username);
+    this.chatMessages = this.chatMessages.filter(m => m.username !== username);
+    this.renderLeaderboardUI();
+    this.renderChatMessages();
+    this.renderAdminUsersDirectory();
+    this.renderBannedUsersList();
+
+    // Broadcast ban and progress wipe to Firebase
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.banUser(username);
+    }
+
+    this.showToast(`User ${username} BANNED & ALL PROGRESS WIPED.`);
+  }
+
+  async unbanUser(username) {
+    this.bannedUsers = this.bannedUsers.filter(u => u !== username);
+    localStorage.setItem('reaper_banned_users', JSON.stringify(this.bannedUsers));
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.unbanUser(username);
+    }
+    this.showToast(`User ${username} Unbanned.`);
+    this.renderBannedUsersList();
+  }
+
+  permLocalBan() {
+    const input = document.getElementById('admin-ban-username-input');
+    const val = input && input.value.trim() ? input.value.trim() : prompt("ENTER USERNAME TO PERMANENTLY BAN:");
+    if (val) {
+      this.banUser(val.trim());
+      if (input) input.value = '';
+    }
+  }
+
+  renderBannedUsersList() {
+    const container = document.getElementById('admin-banned-list');
+    if (!container) return;
+    if (this.bannedUsers.length === 0) {
+      container.innerHTML = `<div style="color: #88aacc; font-size: 0.82rem;">No banned users.</div>`;
+      return;
+    }
+    container.innerHTML = this.bannedUsers.map(u => `
+      <div style="display: flex; justify-content: space-between; align-items: center; background: #0a182c; padding: 0.4rem 0.6rem; border-radius: 4px; margin-bottom: 0.3rem; border: 1px solid rgba(0, 136, 255, 0.15);">
+        <span style="color: #ff5555; font-weight: 700;">${u}</span>
+        <button onclick="app.unbanUser('${u}')" class="btn-stealth" style="padding: 0.2rem 0.5rem; font-size: 0.72rem;">UNBAN</button>
+      </div>
+    `).join('');
+  }
+
+  renderAdminChatLogs() {
+    const logsContainer = document.getElementById('admin-chat-logs');
+    if (!logsContainer) return;
+
+    if (this.chatMessages.length === 0) {
+      logsContainer.innerHTML = `<div style="color: #88aacc; padding: 0.5rem;">No logs available.</div>`;
+      return;
+    }
+
+    logsContainer.innerHTML = this.chatMessages.map(msg => `
+      <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.5rem; border-bottom: 1px solid #041022; font-size: 0.78rem;">
+        <div>
+          <strong style="color: ${msg.rank === 'owner' ? '#ffd700' : '#00d2ff'};">${this.escapeHtml(msg.username || 'Anon')}:</strong>
+          <span style="color: #ccc; margin-left: 0.3rem;">${this.escapeHtml(msg.message)}</span>
+        </div>
+        <div style="display: flex; gap: 0.35rem;">
+          <button onclick="app.deleteMessage('${msg.id}', '${msg.username}')" style="color: #ff8888; background: none; border: none; cursor: pointer; font-size: 0.72rem;">DEL</button>
+          <button onclick="app.banUser('${msg.username}')" style="color: #ff3333; background: none; border: none; cursor: pointer; font-size: 0.72rem;">BAN</button>
+        </div>
+      </div>
+    `).join('');
+  }
+
+  clearAllChat() {
+    if (confirm("Clear all public chat messages?")) {
+      localStorage.removeItem('reaper_local_chat');
+      this.chatMessages = [];
+      this.renderChatMessages();
+      this.renderAdminChatLogs();
+      this.showToast("Chat cleared.");
+    }
+  }
+
+  logoutAdmin() {
+    this.isAdmin = false;
+    localStorage.removeItem('reaper_admin_auth');
+    this.currentUser.rank = 'member';
+    localStorage.setItem('reaper_rank', 'member');
+    this.updateUserUI();
+    this.switchTab('home');
+    this.showToast("Logged out of Admin.");
+  }
+
+  setupAdminShortcuts() {
+    document.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'a') {
+        e.preventDefault();
+        this.switchTab('admin');
+      }
+    });
+  }
+
+  showToast(msg) {
+    const toast = document.getElementById('toast-box');
+    if (!toast) return;
+    toast.textContent = msg;
+    toast.style.display = 'block';
+    clearTimeout(this.toastTimer);
+    this.toastTimer = setTimeout(() => { toast.style.display = 'none'; }, 3200);
+  }
+
+  setupEventListeners() {
+    const searchInput = document.getElementById('search-games-input');
+    if (searchInput) {
+      searchInput.addEventListener('input', (e) => {
+        this.filterGames(this.activeCategory, e.target.value);
+      });
+    }
+
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        const cat = btn.getAttribute('data-cat');
+        this.filterGames(cat, searchInput ? searchInput.value : '');
+      });
+    });
+
+    const redChatInput = document.getElementById('red-chat-input');
+    if (redChatInput) {
+      redChatInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          this.handleSendChatMessage();
+        }
+      });
+    }
+  }
+
+  escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+}
+
+window.app = new ReaperHubApp();
+window.addEventListener('DOMContentLoaded', () => {
+  window.app.init();
+});