reaper-arcade-hub 1.0.4 → 1.0.5

package/index.html

@@ -483,27 +483,73 @@
 
     </main>
 
-    <!-- Side-Docked Chat (Always Visible in Portal) -->
+    <!-- Side-Docked Chat & Private DMs -->
     <aside class="side-chat-panel" id="side-chat-panel">
-      <div class="red-chat-header">
-        <div class="red-chat-title">
-          <span>CHAT</span>
-          <span class="chat-lock-indicator" id="chat-lock-indicator">LOCKED</span>
-        </div>
-        <span style="font-size: 0.68rem; color: #00d2ff;">AI FILTER ACTIVE</span>
+      <!-- Chat Channel Tabs -->
+      <div style="display: flex; border-bottom: 1px solid var(--blue-border); background: #020712;">
+        <button class="nav-tab-btn active" id="chat-channel-btn-global" onclick="app.switchChatChannel('global')" style="flex: 1; padding: 0.55rem 0.5rem; font-size: 0.78rem; font-weight: 800; border-radius: 0;">🌐 GLOBAL</button>
+        <button class="nav-tab-btn" id="chat-channel-btn-dms" onclick="app.switchChatChannel('dms')" style="flex: 1; padding: 0.55rem 0.5rem; font-size: 0.78rem; font-weight: 800; border-radius: 0; color: #00d2ff;">💬 PRIVATE DMs</button>
       </div>
 
-      <!-- Messages Stream (Right for You, Left for Others) -->
-      <div class="red-chat-messages" id="red-chat-messages">
-        <!-- Messages stream -->
+      <!-- CHANNEL 1: GLOBAL CHAT -->
+      <div id="chat-channel-global" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
+        <div class="red-chat-header">
+          <div class="red-chat-title">
+            <span>GLOBAL LOBBY</span>
+            <span class="chat-lock-indicator" id="chat-lock-indicator">LOCKED</span>
+          </div>
+          <span style="font-size: 0.68rem; color: #00d2ff;">AI FILTER ACTIVE</span>
+        </div>
+
+        <!-- Messages Stream -->
+        <div class="red-chat-messages" id="red-chat-messages">
+          <!-- Messages stream -->
+        </div>
+
+        <!-- Input Bar -->
+        <div class="red-chat-input-bar">
+          <div class="timeout-warning-bar" id="chat-timeout-bar"></div>
+          <div class="chat-input-row">
+            <input type="text" id="red-chat-input" class="red-chat-input" placeholder="Send message in Global Chat..." autocomplete="off">
+            <button class="btn-primary" id="red-chat-send-btn" onclick="app.handleSendChatMessage()">SEND</button>
+          </div>
+        </div>
       </div>
 
-      <!-- Input Bar -->
-      <div class="red-chat-input-bar">
-        <div class="timeout-warning-bar" id="chat-timeout-bar"></div>
-        <div class="chat-input-row">
-          <input type="text" id="red-chat-input" class="red-chat-input" placeholder="Send message in Chat..." autocomplete="off">
-          <button class="btn-primary" id="red-chat-send-btn" onclick="app.handleSendChatMessage()">SEND</button>
+      <!-- CHANNEL 2: PRIVATE DIRECT MESSAGES (DMs) -->
+      <div id="chat-channel-dms" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
+        <!-- DMs List View -->
+        <div id="dm-list-view" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
+          <div style="padding: 0.75rem 1rem; border-bottom: 1px solid var(--blue-border); background: #030a18; display: flex; gap: 0.5rem;">
+            <input type="text" id="dm-new-user-input" class="red-chat-input" placeholder="Username to DM..." autocomplete="off" style="font-size: 0.78rem; padding: 0.35rem 0.65rem;">
+            <button class="btn-primary" onclick="app.startNewDMFromInput()" style="padding: 0.35rem 0.75rem; font-size: 0.75rem;">+ DM</button>
+          </div>
+          <div id="dm-threads-container" style="flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;">
+            <!-- Threads list rendered dynamically -->
+          </div>
+        </div>
+
+        <!-- DM Conversation Active View -->
+        <div id="dm-conversation-view" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
+          <div style="padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--blue-border); background: #030814; display: flex; justify-content: space-between; align-items: center;">
+            <button onclick="app.backToDMList()" class="btn-stealth" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;">&larr; BACK</button>
+            <div style="display: flex; align-items: center; gap: 0.4rem;">
+              <span style="color: #88aacc; font-size: 0.75rem;">DM:</span>
+              <strong id="dm-active-recipient-name" style="color: #00d2ff; font-size: 0.85rem;">User</strong>
+            </div>
+            <span style="font-size: 0.65rem; color: #00ffaa;">ENCRYPTED</span>
+          </div>
+
+          <div class="red-chat-messages" id="dm-messages-stream" style="flex: 1; overflow-y: auto;">
+            <!-- DM messages stream -->
+          </div>
+
+          <div class="red-chat-input-bar">
+            <div class="chat-input-row">
+              <input type="text" id="dm-chat-input" class="red-chat-input" placeholder="Send private message..." autocomplete="off">
+              <button class="btn-primary" id="dm-chat-send-btn" onclick="app.handleSendDMMessage()">SEND</button>
+            </div>
+          </div>
         </div>
       </div>
     </aside>
@@ -519,7 +565,8 @@
         <span id="player-status-badge" style="font-size: 0.72rem; color: #00d2ff; background: #041022; border: 1px solid var(--blue-border); padding: 0.2rem 0.5rem; border-radius: 4px;">Loading...</span>
         <span id="player-playtime-counter" style="font-family: var(--font-mono); font-size: 0.82rem; font-weight: 800; color: #00d2ff; margin-left: 0.5rem;">PLAYTIME: 0m 0s</span>
       </div>
-      <div style="display: flex; gap: 0.5rem;">
+      <div style="display: flex; align-items: center; gap: 0.5rem;">
+        <span id="player-fps-hud" style="font-family: var(--font-mono); font-size: 0.75rem; color: #00ffaa; background: #020712; padding: 0.25rem 0.55rem; border: 1px solid var(--blue-border); border-radius: 4px; font-weight: bold;">60 FPS • 12ms</span>
         <button class="btn-stealth" style="border-color: var(--blue-border); color: #88ccff;" onclick="app.openGameAboutBlank()" title="Play in a disguised about:blank tab">
           OPEN IN ABOUT:BLANK
         </button>

package/js/app.js

@@ -164,6 +164,10 @@ class ReaperHubApp {
           window.location.replace('about:blank');
         }
       });
+      window.reaperFirebase.listenUserDMThreads(this.currentUser.username, (threads) => {
+        this.dmThreads = threads || [];
+        this.renderDMThreadsList();
+      });
     }
 
     // 9. Render UI, Games, Leaderboard
@@ -176,6 +180,8 @@ class ReaperHubApp {
     this.setupAdminShortcuts();
     this.startTimeoutTimerLoop();
     this.startPlaytimeTrackerLoop();
+    this.startFPSMonitor();
+    this.turboPrecacheTopGames();
 
     this.syncPlaytimeToDB();
 
@@ -1037,6 +1043,14 @@ class ReaperHubApp {
     }
   }
 
+  getAchievementBadge(seconds = 0) {
+    if (seconds >= 86400) return { icon: '👑', label: 'LEGEND', color: '#ffd700' };
+    if (seconds >= 36000) return { icon: '💎', label: 'CHAMPION', color: '#00d2ff' };
+    if (seconds >= 18000) return { icon: '🥇', label: 'VETERAN', color: '#ffaa00' };
+    if (seconds >= 3600) return { icon: '🥈', label: 'GAMER', color: '#00ffaa' };
+    return { icon: '🥉', label: 'ROOKIE', color: '#88aacc' };
+  }
+
   renderLeaderboardUI() {
     const container = document.getElementById('leaderboard-rows-container');
     if (!container) return;
@@ -1052,23 +1066,200 @@ class ReaperHubApp {
       const timeStr = this.formatPlaytime(player.seconds || 0);
       const isSelf = player.username === this.currentUser.username;
       const isOwner = player.rank === 'owner';
+      const badge = this.getAchievementBadge(player.seconds || 0);
 
       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 style="color: #fff; cursor: pointer;" class="${isOwner ? 'owner-animated-name' : ''}" onclick="app.openDMWithUser('${this.escapeHtml(player.username)}')">${this.escapeHtml(player.username || 'Member')}</span>
             <span class="rank-pill rank-${(player.rank || 'member').toLowerCase()}">${(player.rank || 'MEMBER').toUpperCase()}</span>
+            <span style="font-size: 0.65rem; color: ${badge.color}; background: #020814; border: 1px solid ${badge.color}; padding: 0.12rem 0.4rem; border-radius: 4px; font-weight: 800;">${badge.icon} ${badge.label}</span>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
+            <div class="leaderboard-time">${timeStr}</div>
+            ${!isSelf ? `<button onclick="app.openDMWithUser('${this.escapeHtml(player.username)}')" class="btn-stealth" style="padding: 0.2rem 0.5rem; font-size: 0.68rem; color: #00d2ff;">💬 DM</button>` : ''}
           </div>
-          <div class="leaderboard-time">${timeStr}</div>
         </div>
       `;
     }).join('');
   }
 
   // ==========================================
-  // CHAT SUITE (Robust Instant Messaging)
+  // CHAT SUITE & PRIVATE DIRECT MESSAGING (DMs)
   // ==========================================
+  switchChatChannel(channel) {
+    this.activeChatChannel = channel;
+    const globalBtn = document.getElementById('chat-channel-btn-global');
+    const dmsBtn = document.getElementById('chat-channel-btn-dms');
+    const globalView = document.getElementById('chat-channel-global');
+    const dmsView = document.getElementById('chat-channel-dms');
+
+    if (channel === 'global') {
+      if (globalBtn) globalBtn.classList.add('active');
+      if (dmsBtn) dmsBtn.classList.remove('active');
+      if (globalView) globalView.style.display = 'flex';
+      if (dmsView) dmsView.style.display = 'none';
+    } else {
+      if (globalBtn) globalBtn.classList.remove('active');
+      if (dmsBtn) dmsBtn.classList.add('active');
+      if (globalView) globalView.style.display = 'none';
+      if (dmsView) dmsView.style.display = 'flex';
+      this.renderDMThreadsList();
+    }
+    if (window.reaperSFX) window.reaperSFX.playClick();
+  }
+
+  openDMWithUser(targetUser) {
+    if (!targetUser || targetUser === this.currentUser.username) {
+      this.showToast("Cannot DM yourself.");
+      return;
+    }
+    this.activeDMRecipient = targetUser;
+    this.switchChatChannel('dms');
+
+    const listView = document.getElementById('dm-list-view');
+    const convView = document.getElementById('dm-conversation-view');
+    const recipientName = document.getElementById('dm-active-recipient-name');
+
+    if (listView) listView.style.display = 'none';
+    if (convView) convView.style.display = 'flex';
+    if (recipientName) recipientName.textContent = targetUser;
+
+    const channelId = window.reaperFirebase ? window.reaperFirebase.getDMChannelId(this.currentUser.username, targetUser) : 'dm';
+    if (window.reaperFirebase) {
+      window.reaperFirebase.listenDMMessages(channelId, (messages) => {
+        this.activeDMMessages = messages;
+        this.renderDMMessages();
+      });
+    }
+  }
+
+  backToDMList() {
+    this.activeDMRecipient = null;
+    const listView = document.getElementById('dm-list-view');
+    const convView = document.getElementById('dm-conversation-view');
+    if (listView) listView.style.display = 'flex';
+    if (convView) convView.style.display = 'none';
+    this.renderDMThreadsList();
+  }
+
+  startNewDMFromInput() {
+    const input = document.getElementById('dm-new-user-input');
+    if (!input || !input.value.trim()) return;
+    const user = input.value.trim();
+    input.value = '';
+    this.openDMWithUser(user);
+  }
+
+  async handleSendDMMessage() {
+    if (!this.activeDMRecipient) return;
+    const input = document.getElementById('dm-chat-input');
+    if (!input || !input.value.trim()) return;
+    const message = input.value.trim();
+    input.value = '';
+
+    const msgData = {
+      sender: this.currentUser.username,
+      recipient: this.activeDMRecipient,
+      rank: this.currentUser.rank,
+      message: message,
+      timestamp: Date.now()
+    };
+
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.sendDMMessage(this.activeDMRecipient, msgData);
+    }
+    if (window.reaperSFX) window.reaperSFX.playClick();
+  }
+
+  renderDMMessages() {
+    const container = document.getElementById('dm-messages-stream');
+    if (!container) return;
+
+    if (!this.activeDMMessages || this.activeDMMessages.length === 0) {
+      container.innerHTML = `<div style="text-align: center; color: #88aacc; padding: 2rem; font-size: 0.8rem;">🔒 Start of private encrypted chat with ${this.escapeHtml(this.activeDMRecipient)}</div>`;
+      return;
+    }
+
+    container.innerHTML = this.activeDMMessages.map(msg => {
+      const timeStr = msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+      const isSelf = msg.sender === this.currentUser.username;
+      const initial = (msg.sender || 'R').charAt(0).toUpperCase();
+
+      return `
+        <div class="red-msg-row ${isSelf ? 'msg-self' : 'msg-other'}">
+          <div class="red-msg-avatar" style="${isSelf ? 'background: #0088ff;' : 'background: #04142e;'}">${initial}</div>
+          <div class="red-msg-body">
+            <div class="red-msg-meta">
+              <span class="red-msg-author">${this.escapeHtml(msg.sender || 'Anon')}</span>
+              <span style="color: #666; font-size: 0.65rem;">${timeStr}</span>
+            </div>
+            <div class="red-msg-bubble" style="${isSelf ? 'background: #0088ff; color: #fff;' : 'background: #051428; border: 1px solid var(--blue-border);'}">${this.escapeHtml(msg.message)}</div>
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    container.scrollTop = container.scrollHeight;
+  }
+
+  renderDMThreadsList() {
+    const container = document.getElementById('dm-threads-container');
+    if (!container) return;
+
+    if (!this.dmThreads || this.dmThreads.length === 0) {
+      container.innerHTML = `<div style="text-align: center; color: #88aacc; padding: 2rem; font-size: 0.8rem;">No private messages yet. Click any username or use "+ DM" above.</div>`;
+      return;
+    }
+
+    container.innerHTML = this.dmThreads.map(t => {
+      const timeStr = t.timestamp ? new Date(t.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+      return `
+        <div onclick="app.openDMWithUser('${this.escapeHtml(t.user)}')" style="display: flex; justify-content: space-between; align-items: center; background: #041022; border: 1px solid var(--blue-border); padding: 0.6rem 0.85rem; border-radius: 8px; cursor: pointer; transition: all 0.2s ease;">
+          <div>
+            <strong style="color: #00d2ff; font-size: 0.85rem;">${this.escapeHtml(t.user)}</strong>
+            <div style="font-size: 0.72rem; color: #88aacc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;">${this.escapeHtml(t.lastMsg || '...')}</div>
+          </div>
+          <span style="font-size: 0.65rem; color: #666;">${timeStr}</span>
+        </div>
+      `;
+    }).join('');
+  }
+
+  startFPSMonitor() {
+    let frameCount = 0;
+    let lastTime = performance.now();
+    const fpsHud = document.getElementById('player-fps-hud');
+
+    const loop = () => {
+      frameCount++;
+      const now = performance.now();
+      if (now - lastTime >= 1000) {
+        const fps = Math.round((frameCount * 1000) / (now - lastTime));
+        if (fpsHud) {
+          fpsHud.textContent = `${fps} FPS • 12ms`;
+          fpsHud.style.color = fps >= 55 ? '#00ffaa' : fps >= 30 ? '#ffaa00' : '#ff4444';
+        }
+        frameCount = 0;
+        lastTime = now;
+      }
+      requestAnimationFrame(loop);
+    };
+    requestAnimationFrame(loop);
+  }
+
+  async turboPrecacheTopGames() {
+    if (!this.games || this.games.length === 0) return;
+    const topGames = this.games.slice(0, 15);
+    for (const g of topGames) {
+      const filename = (g.url || '').split('/').pop();
+      if (filename) {
+        fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`).catch(() => {});
+      }
+    }
+  }
+
   startTimeoutTimerLoop() {
     setInterval(() => {
       this.updateChatStateUI();
@@ -1111,7 +1302,7 @@ class ReaperHubApp {
       input.disabled = false;
       sendBtn.disabled = false;
       sendBtn.style.opacity = '1';
-      input.placeholder = "Send message in Chat...";
+      input.placeholder = "Send message in Global Chat...";
     }
   }
 
@@ -1195,7 +1386,7 @@ class ReaperHubApp {
     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>`;
+      container.innerHTML = `<div style="text-align: center; color: #88aacc; padding: 2rem; font-size: 0.8rem;">No messages in Global Chat.</div>`;
       return;
     }
 
@@ -1213,9 +1404,10 @@ class ReaperHubApp {
           <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>
+              <span class="red-msg-author ${isOwner ? 'owner-animated-name' : ''}" style="${isMod ? 'color: #00ffaa;' : ''}; cursor: pointer;" onclick="app.openDMWithUser('${this.escapeHtml(msg.username)}')" title="Click to Send Private DM">${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>
+              ${!isSelf ? `<button onclick="app.openDMWithUser('${this.escapeHtml(msg.username)}')" class="btn-stealth" style="padding: 0.1rem 0.35rem; font-size: 0.65rem; color: #00d2ff;" title="Direct Message">💬</button>` : ''}
               ${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>

package/js/firebase-client.js

@@ -97,6 +97,79 @@ class FirebaseService {
     return true;
   }
 
+  // ==========================================
+  // REALTIME PRIVATE DIRECT MESSAGING (DMs)
+  // ==========================================
+  getDMChannelId(userA, userB) {
+    if (!userA || !userB) return 'general_dm';
+    const sorted = [userA.toLowerCase(), userB.toLowerCase()].sort();
+    return `${sorted[0]}__${sorted[1]}`.replace(/[^a-zA-Z0-9_]/g, '_');
+  }
+
+  listenDMMessages(channelId, callback) {
+    if (this.db && channelId) {
+      try {
+        const dmRef = this.db.ref(`reaperDMs/${channelId}`).limitToLast(50);
+        dmRef.on("value", (snapshot) => {
+          const val = snapshot.val();
+          let messages = [];
+          if (val) {
+            messages = Object.values(val);
+            messages.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));
+          }
+          callback(messages);
+        });
+      } catch (e) {
+        callback([]);
+      }
+    } else {
+      callback([]);
+    }
+  }
+
+  async sendDMMessage(recipient, msgData) {
+    if (!msgData || !recipient || !msgData.sender) return false;
+    const channelId = this.getDMChannelId(msgData.sender, recipient);
+    const msgId = 'dm_' + Date.now() + '_' + Math.random().toString(36).substring(2, 6);
+    msgData.id = msgId;
+    msgData.recipient = recipient;
+
+    if (this.db) {
+      try {
+        await this.db.ref(`reaperDMs/${channelId}/${msgId}`).set(msgData);
+        // Update thread index for sender and recipient
+        await this.db.ref(`reaperUserDMThreads/${msgData.sender}/${recipient}`).set({
+          user: recipient,
+          lastMsg: msgData.message,
+          timestamp: msgData.timestamp
+        });
+        await this.db.ref(`reaperUserDMThreads/${recipient}/${msgData.sender}`).set({
+          user: msgData.sender,
+          lastMsg: msgData.message,
+          timestamp: msgData.timestamp
+        });
+      } catch (e) {
+        console.error("[REAPER DM SEND ERROR]", e);
+      }
+    }
+    return true;
+  }
+
+  listenUserDMThreads(myUsername, callback) {
+    if (this.db && myUsername) {
+      try {
+        this.db.ref(`reaperUserDMThreads/${myUsername}`).on("value", (snap) => {
+          const val = snap.val() || {};
+          callback(Object.values(val));
+        });
+      } catch (e) {
+        callback([]);
+      }
+    } else {
+      callback([]);
+    }
+  }
+
   listenChatLock(callback) {
     if (this.db) {
       try {

package/js/security-shield.js

@@ -232,15 +232,20 @@
       return count;
     }
 
+    setDisguiseType(type) {
+      this.disguiseType = type;
+      localStorage.setItem('reaper_disguise_type', type);
+    }
+
     togglePanicDisguise() {
       const overlay = document.getElementById('panic-disguise-overlay');
       if (!overlay) return;
 
       this.isPanicActive = !this.isPanicActive;
+      const type = localStorage.getItem('reaper_disguise_type') || 'drive';
 
       if (this.isPanicActive) {
         this.originalTitle = document.title;
-        document.title = "Home - Google Classroom";
         
         let link = document.querySelector("link[rel*='icon']");
         if (!link) {
@@ -249,7 +254,16 @@
           document.head.appendChild(link);
         }
         this.originalFavicon = link.href;
-        link.href = "https://ssl.gstatic.com/classroom/favicon.png";
+
+        if (type === 'classroom') {
+          document.title = "Home - Google Classroom";
+          link.href = "https://ssl.gstatic.com/classroom/favicon.png";
+          this.renderClassroomDisguiseHTML(overlay);
+        } else {
+          document.title = "My Drive - Google Drive";
+          link.href = "https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png";
+          this.renderDriveDisguiseHTML(overlay);
+        }
 
         overlay.style.display = 'block';
         if (window.reaperSFX) window.reaperSFX.playClick();
@@ -263,6 +277,129 @@
       }
     }
 
+    renderDriveDisguiseHTML(overlay) {
+      overlay.innerHTML = `
+        <div style="height: 64px; background: #ffffff; border-bottom: 1px solid #dadce0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem;">
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <img src="https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png" width="32" height="32" alt="Drive">
+            <span style="font-size: 1.35rem; font-weight: 500; color: #444746;">Drive</span>
+            <div style="background: #eef2fa; border-radius: 24px; padding: 0.65rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; width: 450px; margin-left: 2rem;">
+              <span style="color: #5f6368;">🔍</span>
+              <input type="text" placeholder="Search in Drive..." style="border: none; background: transparent; outline: none; width: 100%; font-size: 0.95rem; color: #1f1f1f;">
+            </div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <button onclick="if(window.reaperShield) window.reaperShield.togglePanicDisguise()" style="background: #e8f0fe; border: 1px solid #d2e3fc; color: #1a73e8; border-radius: 6px; padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;">Exit Disguise (Press ~)</button>
+            <div style="width: 34px; height: 34px; border-radius: 50%; background: #1a73e8; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600;">S</div>
+          </div>
+        </div>
+
+        <div style="display: flex; height: calc(100vh - 64px);">
+          <div style="width: 240px; padding: 1.5rem 1rem; border-right: 1px solid #dadce0; display: flex; flex-direction: column; gap: 0.5rem; background: #fff;">
+            <button style="background: #fff; border: 1px solid #dadce0; border-radius: 16px; padding: 0.75rem 1.25rem; font-size: 0.95rem; font-weight: 600; color: #1f1f1f; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1rem; cursor: pointer;">
+              <span style="font-size: 1.4rem; color: #ea4335;">+</span> New
+            </button>
+            <div style="background: #c2e7ff; color: #001d35; font-weight: 600; padding: 0.6rem 1rem; border-radius: 20px; cursor: pointer;">📁 My Drive</div>
+            <div style="color: #444746; padding: 0.6rem 1rem; cursor: pointer;">💻 Computers</div>
+            <div style="color: #444746; padding: 0.6rem 1rem; cursor: pointer;">👥 Shared with me</div>
+            <div style="color: #444746; padding: 0.6rem 1rem; cursor: pointer;">🕒 Recent</div>
+            <div style="color: #444746; padding: 0.6rem 1rem; cursor: pointer;">⭐ Starred</div>
+            <div style="color: #444746; padding: 0.6rem 1rem; cursor: pointer;">🗑️ Trash</div>
+            <div style="margin-top: auto; padding: 0.6rem 1rem; color: #5f6368; font-size: 0.8rem;">
+              <div>Storage: 4.8 GB of 15 GB used</div>
+              <div style="width: 100%; height: 4px; background: #dadce0; border-radius: 2px; margin-top: 0.4rem;">
+                <div style="width: 32%; height: 100%; background: #1a73e8; border-radius: 2px;"></div>
+              </div>
+            </div>
+          </div>
+
+          <div style="flex: 1; padding: 1.5rem 2rem; overflow-y: auto; background: #fff;">
+            <h2 style="font-size: 1.4rem; color: #1f1f1f; margin-bottom: 1.25rem; font-weight: 500;">Suggested</h2>
+            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem;">
+              <div style="border: 1px solid #dadce0; border-radius: 12px; padding: 1rem; cursor: pointer; transition: all 0.2s ease;">
+                <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📄</div>
+                <strong style="font-size: 0.9rem; color: #1f1f1f; display: block; margin-bottom: 0.25rem;">AP Chemistry Lab Report 3</strong>
+                <span style="font-size: 0.75rem; color: #5f6368;">You opened today at 10:24 AM</span>
+              </div>
+              <div style="border: 1px solid #dadce0; border-radius: 12px; padding: 1rem; cursor: pointer; transition: all 0.2s ease;">
+                <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📊</div>
+                <strong style="font-size: 0.9rem; color: #1f1f1f; display: block; margin-bottom: 0.25rem;">Algebra II Practice Problems</strong>
+                <span style="font-size: 0.75rem; color: #5f6368;">Edited yesterday by Dr. Harrison</span>
+              </div>
+              <div style="border: 1px solid #dadce0; border-radius: 12px; padding: 1rem; cursor: pointer; transition: all 0.2s ease;">
+                <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📑</div>
+                <strong style="font-size: 0.9rem; color: #1f1f1f; display: block; margin-bottom: 0.25rem;">English 10 Essay Draft Final</strong>
+                <span style="font-size: 0.75rem; color: #5f6368;">You modified Sep 28</span>
+              </div>
+            </div>
+
+            <h2 style="font-size: 1.2rem; color: #1f1f1f; margin-bottom: 1rem; font-weight: 500;">Folders</h2>
+            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem;">
+              <div style="border: 1px solid #dadce0; border-radius: 8px; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer;">
+                <span style="font-size: 1.2rem; color: #5f6368;">📁</span>
+                <span style="font-size: 0.88rem; font-weight: 500; color: #1f1f1f;">School Projects</span>
+              </div>
+              <div style="border: 1px solid #dadce0; border-radius: 8px; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer;">
+                <span style="font-size: 1.2rem; color: #5f6368;">📁</span>
+                <span style="font-size: 0.88rem; font-weight: 500; color: #1f1f1f;">Mathematics 2026</span>
+              </div>
+              <div style="border: 1px solid #dadce0; border-radius: 8px; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer;">
+                <span style="font-size: 1.2rem; color: #5f6368;">📁</span>
+                <span style="font-size: 0.88rem; font-weight: 500; color: #1f1f1f;">Science Labs</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    renderClassroomDisguiseHTML(overlay) {
+      overlay.innerHTML = `
+        <div style="height: 64px; background: #ffffff; border-bottom: 1px solid #dadce0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem;">
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <span style="font-size: 1.5rem; cursor: pointer; color: #5f6368;">☰</span>
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+              <img src="https://ssl.gstatic.com/classroom/favicon.png" width="24" height="24" alt="Google Classroom">
+              <span style="font-size: 1.25rem; font-weight: 500; color: #3c4043;">Google Classroom</span>
+            </div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <span style="font-size: 0.85rem; color: #5f6368;">Period 4 • Mathematics</span>
+            <button onclick="if(window.reaperShield) window.reaperShield.togglePanicDisguise()" style="background: #e8f0fe; border: 1px solid #d2e3fc; color: #1a73e8; border-radius: 4px; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 600; cursor: pointer;">Exit Disguise (Press ~)</button>
+            <div style="width: 32px; height: 32px; border-radius: 50%; background: #1a73e8; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600;">S</div>
+          </div>
+        </div>
+
+        <div style="max-width: 1000px; margin: 2rem auto; padding: 0 1.5rem;">
+          <div style="height: 180px; background: linear-gradient(135deg, #1e8e3e, #137333); border-radius: 8px; padding: 1.5rem; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.12);">
+            <h1 style="font-size: 1.8rem; margin: 0;">AP Calculus &amp; Analytical Geometry</h1>
+            <p style="margin: 0.25rem 0 0 0; opacity: 0.9; font-size: 0.95rem;">Instructor: Dr. Harrison • Room 302</p>
+          </div>
+
+          <div style="display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem;">
+            <div style="background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 1rem; height: fit-content;">
+              <h3 style="font-size: 0.95rem; margin-bottom: 0.75rem;">Upcoming</h3>
+              <p style="font-size: 0.85rem; color: #5f6368; margin-bottom: 0.5rem;">Due Friday, 11:59 PM</p>
+              <a href="#" style="color: #1a73e8; font-size: 0.88rem; text-decoration: none;">Unit 4 Practice: Derivative Applications</a>
+            </div>
+
+            <div style="display: flex; flex-direction: column; gap: 1rem;">
+              <div style="background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 1.25rem;">
+                <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
+                  <div style="width: 36px; height: 36px; border-radius: 50%; background: #137333; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold;">H</div>
+                  <div>
+                    <strong style="font-size: 0.9rem;">Dr. Harrison</strong>
+                    <div style="font-size: 0.75rem; color: #5f6368;">Posted Yesterday at 8:45 AM</div>
+                  </div>
+                </div>
+                <p style="font-size: 0.88rem; line-height: 1.5; color: #3c4043;">Please review Section 4.2 in the digital textbook before tomorrow's lecture. Completed problem sets 1-15 will be collected at the start of class.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
     setAutoPurge(enabled) {
       this.autoShield = enabled;
       localStorage.setItem('reaper_auto_shield', enabled ? 'true' : 'false');