reaper-arcade-hub 1.0.0 → 1.0.2

package/css/styles.css

@@ -452,20 +452,37 @@ body {
 }
 
 .game-card {
-  background: var(--bg-card);
-  border: 1px solid var(--blue-border);
+  background: linear-gradient(145deg, rgba(8, 18, 36, 0.95) 0%, rgba(4, 10, 22, 0.98) 100%);
+  border: 1.5px solid var(--blue-border);
   border-radius: var(--radius-md);
   overflow: hidden;
   cursor: pointer;
-  transition: all 0.25s ease;
+  transition: transform 0.15s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
   display: flex;
   flex-direction: column;
+  position: relative;
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+
+.game-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 210, 255, 0.25) 0%, transparent 65%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+
+.game-card:hover::after {
+  opacity: 1;
 }
 
 .game-card:hover {
-  transform: translateY(-4px);
   border-color: var(--blue-bright);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 136, 255, 0.3);
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 136, 255, 0.45);
 }
 
 .game-thumb-container {
@@ -971,10 +988,83 @@ body {
   border: 1px solid var(--blue-bright);
   color: #fff;
   padding: 0.65rem 1.4rem;
-  border-radius: 25px;
-  font-size: 0.82rem;
+  border-radius: 24px;
+  font-size: 0.85rem;
   font-weight: 700;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px var(--blue-glow);
-  z-index: 999999;
+  box-shadow: 0 0 25px var(--blue-glow);
+  z-index: 99999;
   display: none;
+  animation: toastPop 0.3s ease;
+}
+
+/* Fluid Tab Slide & Fade */
+.tab-section {
+  animation: tabSlideFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes tabSlideFade {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.99);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Recently Played Carousel Grid */
+.recent-bar-container {
+  width: 100%;
+  max-width: 680px;
+  margin-bottom: 1.5rem;
+  background: rgba(4, 12, 24, 0.85);
+  border: 1.5px solid var(--blue-border);
+  border-radius: var(--radius-md);
+  padding: 0.85rem 1.15rem;
+  box-shadow: 0 0 20px rgba(0, 136, 255, 0.15);
+}
+
+.recent-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
+  gap: 0.65rem;
+  margin-top: 0.65rem;
+}
+
+.recent-card {
+  background: #020712;
+  border: 1px solid var(--blue-border);
+  border-radius: 6px;
+  padding: 0.4rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.recent-card:hover {
+  border-color: var(--blue-bright);
+  transform: translateY(-3px) scale(1.04);
+  box-shadow: 0 6px 18px rgba(0, 136, 255, 0.45);
+}
+
+.recent-card-img {
+  width: 100%;
+  aspect-ratio: 16/10;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 0.3rem;
+}
+
+.recent-card-name {
+  font-size: 0.68rem;
+  font-weight: 700;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
 }

package/index.html

@@ -94,6 +94,11 @@
   <!-- Starfield Space Canvas -->
   <canvas id="bg-canvas"></canvas>
 
+  <!-- Global Live Broadcast Alert Banner -->
+  <div id="global-broadcast-banner" style="display: none; background: linear-gradient(90deg, #ff0055, #ff8800); color: #fff; padding: 0.55rem 1rem; text-align: center; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.05em; z-index: 99990; position: sticky; top: 0; box-shadow: 0 4px 15px rgba(255, 0, 85, 0.5);">
+    <span id="global-broadcast-text">🚨 SYSTEM ALERT</span>
+  </div>
+
   <!-- App Header -->
   <header class="app-header">
     <div class="nav-container">
@@ -106,12 +111,19 @@
         <button class="nav-tab-btn active" data-tab="home" onclick="app.switchTab('home')">Home</button>
         <button class="nav-tab-btn" data-tab="games" onclick="app.switchTab('games')">Games (788)</button>
         <button class="nav-tab-btn" data-tab="leaderboard" onclick="app.switchTab('leaderboard')">Leaderboard</button>
-        <button class="nav-tab-btn" data-tab="shield" style="color: #00d2ff;" onclick="app.switchTab('shield')">🛡️ Shield</button>
         <button class="nav-tab-btn" id="nav-tab-mod" style="display: none; color: #00ffaa;" data-tab="mod" onclick="app.switchTab('mod')">Mod</button>
         <button class="nav-tab-btn" id="nav-tab-admin" style="display: none; color: #ffd700;" data-tab="admin" onclick="app.switchTab('admin')">Admin</button>
       </nav>
 
       <div class="header-right">
+        <button class="btn-stealth" id="btn-sfx-toggle" onclick="app.toggleSoundFX()" title="Toggle Sci-Fi SFX">
+          🔊 SFX
+        </button>
+
+        <button class="btn-stealth" onclick="if(window.reaperShield) window.reaperShield.togglePanicDisguise()" title="Emergency Panic Cloak (Hotkey: ~)">
+          🚨 Panic (~)
+        </button>
+
         <button class="btn-stealth" onclick="app.openUpdateLogsModal()" title="View update logs">
           Updates
         </button>
@@ -124,6 +136,10 @@
           <span class="bind-username" id="header-username-display">Reaper</span>
           <span class="bind-rank rank-pill rank-member" id="header-rank-badge">MEMBER</span>
         </div>
+
+        <button class="btn-stealth" id="btn-settings-toggle" onclick="app.openSettingsModal()" style="border-color: var(--blue-bright); color: #00d2ff; font-weight: 800;" title="Settings & Security Shield">
+          ⚙️ Settings
+        </button>
       </div>
     </div>
   </header>
@@ -140,7 +156,16 @@
       <section id="section-home" class="tab-section">
         <div class="opium-home-container">
           <h1 class="opium-logo-title">reaper</h1>
-          <div class="opium-subtitle">788 High-Speed Unblocked Games & Live Leaderboard</div>
+          <div class="opium-subtitle">788 High-Speed Unblocked Games &amp; Live Leaderboard</div>
+
+          <!-- Recently Played Bar -->
+          <div id="recent-games-container" class="recent-bar-container" style="display: none;">
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <span style="font-size: 0.78rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.05em; text-transform: uppercase;">⚡ RECENTLY PLAYED</span>
+              <button onclick="app.clearRecentlyPlayed()" class="btn-stealth" style="font-size: 0.68rem; padding: 0.2rem 0.5rem;">CLEAR</button>
+            </div>
+            <div class="recent-grid" id="recent-games-grid"></div>
+          </div>
 
           <!-- Pill Search Bar -->
           <div class="opium-search-wrapper">
@@ -148,14 +173,20 @@
             <input type="text" id="opium-search-input" class="opium-search-input" placeholder="Search 780+ games or topics..." autocomplete="off" onkeydown="if(event.key==='Enter') app.handleOpiumSearch()">
           </div>
 
-          <!-- Quick Navigation Tiles -->
-          <div style="display: flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; max-width: 580px;">
+          <!-- Quick Navigation Tiles & Save Manager -->
+          <div style="display: flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; max-width: 650px; margin-bottom: 1.25rem;">
             <button class="btn-primary" style="padding: 0.75rem 1.4rem; font-size: 0.88rem;" onclick="app.switchTab('games')">
               BROWSE 788 GAMES
             </button>
             <button class="btn-stealth" style="padding: 0.75rem 1.4rem; font-size: 0.88rem;" onclick="app.switchTab('leaderboard')">
               PLAYTIME LEADERBOARD
             </button>
+            <button class="btn-stealth" style="padding: 0.75rem 1.4rem; font-size: 0.88rem; color: #00ffaa; border-color: rgba(0,255,170,0.3);" onclick="app.exportSaveData()" title="Backup your game saves">
+              💾 BACKUP SAVES
+            </button>
+            <button class="btn-stealth" style="padding: 0.75rem 1.4rem; font-size: 0.88rem; color: #ffd700; border-color: rgba(255,215,0,0.3);" onclick="app.importSaveData()" title="Restore game save data">
+              📥 RESTORE SAVES
+            </button>
           </div>
         </div>
       </section>
@@ -214,62 +245,6 @@
         </div>
       </section>
 
-      <!-- ========================================== -->
-      <!-- TAB: BROWSER EXTENSION SHIELD & FIREWALL   -->
-      <!-- ========================================== -->
-      <section id="section-shield" class="tab-section" style="display: none;">
-        <div class="leaderboard-container">
-          <div class="leaderboard-header" style="border-color: #00d2ff;">
-            <div>
-              <h2 style="font-size: 1.6rem; color: #00d2ff; margin-bottom: 0.25rem; font-family: var(--font-heading);">
-                🛡️ BROWSER EXTENSION FIREWALL &amp; SPY DEFENDER
-              </h2>
-              <p style="color: var(--text-sub); font-size: 0.85rem;">
-                Live extension detection engine. Scans, cuts, and isolates all school surveillance hooks and DOM sniffers.
-              </p>
-            </div>
-            <div style="text-align: right;">
-              <button class="btn-primary" onclick="app.purgeAllExtensionHooks()" style="background: #ff0055; border-color: #ff3377; padding: 0.6rem 1.2rem; font-size: 0.82rem;">
-                ⚡ DISABLE &amp; PURGE ALL HOOKS
-              </button>
-            </div>
-          </div>
-
-          <!-- Controls & Status Strip -->
-          <div style="display: flex; justify-content: space-between; align-items: center; background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
-            <div style="display: flex; gap: 1.5rem; align-items: center;">
-              <div>
-                <span style="font-size: 0.72rem; color: #88aacc; text-transform: uppercase; display: block;">SHIELD STATUS</span>
-                <strong style="color: #00ffaa; font-size: 0.95rem;">ACTIVE &amp; ENFORCING</strong>
-              </div>
-              <div>
-                <span style="font-size: 0.72rem; color: #88aacc; text-transform: uppercase; display: block;">ISOLATION INTEGRITY</span>
-                <strong style="color: #00d2ff; font-size: 0.95rem;">100% SECURE</strong>
-              </div>
-            </div>
-
-            <div style="display: flex; gap: 1rem; align-items: center;">
-              <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: #fff; font-size: 0.82rem; font-weight: 700;">
-                <input type="checkbox" id="auto-shield-toggle" style="width: 20px; height: 20px; accent-color: #0088ff;" onchange="app.toggleAutoShield(this.checked)" checked>
-                AUTO-PURGE ON EVERY VISIT
-              </label>
-              <button class="btn-stealth" onclick="app.refreshExtensionScan()" style="padding: 0.4rem 0.85rem; font-size: 0.78rem;">
-                🔄 RESCAN BROWSER
-              </button>
-            </div>
-          </div>
-
-          <!-- Detected Extensions Matrix -->
-          <div style="font-size: 0.82rem; color: #88aacc; font-weight: 800; margin-bottom: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;">
-            DETECTED EXTENSIONS &amp; SPY PROBES:
-          </div>
-
-          <div id="shield-extensions-list" style="display: flex; flex-direction: column; gap: 0.6rem;">
-            <!-- Extensions rendered dynamically -->
-          </div>
-        </div>
-      </section>
-
       <!-- ========================================== -->
       <!-- TAB 4: CHAT MOD TAB (MOD ONLY)             -->
       <!-- ========================================== -->
@@ -281,6 +256,15 @@
               <span class="rank-pill rank-mod">CHAT MOD ACCESS</span>
             </div>
 
+            <!-- Slow Mode Toggle for Mods -->
+            <div class="mod-section" style="display: flex; justify-content: space-between; align-items: center;">
+              <div>
+                <strong style="color: #fff; font-size: 0.92rem;">CHAT SLOW-MODE (5 SECONDS)</strong>
+                <p style="color: #88aacc; font-size: 0.78rem;">Enforces a 5-second cooldown between messages to prevent spamming.</p>
+              </div>
+              <input type="checkbox" id="mod-slowmode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00ffaa;" onchange="app.toggleSlowMode(this.checked)">
+            </div>
+
             <!-- Timeout User Box -->
             <div class="mod-section">
               <h3 style="font-size: 0.95rem; color: #fff; margin-bottom: 0.35rem;">TIMEOUT / MUTE USER</h3>
@@ -296,7 +280,7 @@
             <!-- Live Chat Logs with Quick Actions -->
             <div class="mod-section">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
-                <h3 style="font-size: 0.95rem; color: #fff;">LIVE CHAT LOGS & MESSAGE PURGE</h3>
+                <h3 style="font-size: 0.95rem; color: #fff;">LIVE CHAT LOGS &amp; MESSAGE PURGE</h3>
               </div>
               <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.75rem;">Click DEL to remove rulebreaking messages or TIMEOUT to mute the user.</p>
               <div id="mod-chat-logs" style="max-height: 280px; overflow-y: auto; background: #040912; border: 1px solid var(--blue-border); border-radius: 4px;"></div>
@@ -318,26 +302,47 @@
               </div>
             </div>
 
-            <!-- User Roles & Directory (Promote / Demote) -->
+            <!-- Superpower: Global Live Broadcast Alert -->
+            <div class="admin-section" style="border-color: #ff0055; background: #18030c;">
+              <h3 style="font-size: 0.95rem; color: #ff3377; margin-bottom: 0.4rem;">👑 GLOBAL LIVE BROADCAST BANNER</h3>
+              <p style="color: #ff99bb; font-size: 0.8rem; margin-bottom: 0.75rem;">Display an instant sticky banner across all players' screens in real time.</p>
+              <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+                <input type="text" id="admin-broadcast-msg" class="red-chat-input" placeholder="Type global announcement message..." autocomplete="off" style="flex: 1; min-width: 250px;">
+                <button class="btn-primary" style="background: #ff0055; border-color: #ff3377;" onclick="app.sendGlobalAlert()">BROADCAST TO ALL PLAYERS</button>
+                <button class="btn-stealth" onclick="app.clearGlobalAlert()" style="color: #ff8888;">CLEAR BANNER</button>
+              </div>
+            </div>
+
+            <!-- Superpower: Chat Slow-Mode Switch -->
+            <div class="admin-section" style="display: flex; justify-content: space-between; align-items: center;">
+              <div>
+                <strong style="color: #fff; font-size: 0.95rem;">CHAT SLOW-MODE (5-SECOND COOLDOWN)</strong>
+                <p style="color: #88aacc; font-size: 0.8rem;">Enforces a 5-second interval between chat messages for non-owner players.</p>
+              </div>
+              <input type="checkbox" id="admin-slowmode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00d2ff;" onchange="app.toggleSlowMode(this.checked)">
+            </div>
+
+            <!-- Connected Players Directory (With Promote/Demote/Kick/Ban) -->
             <div class="admin-section">
-              <h3 style="font-size: 0.95rem; color: #fff; margin-bottom: 0.35rem;">USER ROLES & PROMOTION</h3>
-              <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.85rem;">Promote members to Chat Mod, de-rank mods back to Member, or ban offenders.</p>
-              <div id="admin-users-directory" style="display: flex; flex-direction: column; gap: 0.4rem; max-height: 220px; overflow-y: auto;">
-                <!-- Users rendered dynamically -->
+              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
+                <h3 style="font-size: 0.95rem; color: #fff;">LIVE PLAYERS DIRECTORY &amp; ROLES</h3>
+                <button onclick="app.renderAdminUsersDirectory()" class="btn-stealth" style="font-size: 0.75rem;">REFRESH LIST</button>
               </div>
+              <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">Manage connected users, promote to Chat Mod, de-rank, kick, or permanently ban.</p>
+              <div id="admin-users-directory" style="max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;"></div>
             </div>
 
-            <!-- Key Generator (Duration, Max Uses, & Auto-Expiration) -->
+            <!-- Custom Access Key Generator -->
             <div class="admin-section">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
-                <h3 style="font-size: 0.95rem; color: #fff;">KEY GENERATOR & USAGE CONTROLS</h3>
-                <button onclick="app.clearAllKeys()" class="btn-stealth" style="color: #ff5555; border-color: #771111; font-size: 0.72rem;">CLEAR ALL KEYS</button>
+                <h3 style="font-size: 0.95rem; color: #fff;">CUSTOM ACCESS KEY GENERATOR</h3>
+                <button onclick="app.clearAllKeys()" class="btn-stealth" style="color: #ff5555; border-color: #771111; font-size: 0.75rem;">PURGE ALL KEYS</button>
               </div>
-              <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.85rem;">Set key name, duration, and max uses. Keys auto-expire once all uses are exhausted.</p>
+              <p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">Generate keys with custom durations (e.g. 3 Days, 5 Days, Lifetime) and usage limits.</p>
               
               <!-- Custom Key Creation Input -->
               <div style="display: flex; gap: 0.5rem; margin-bottom: 0.85rem; flex-wrap: wrap; align-items: center;">
-                <input type="text" id="admin-custom-key-input" class="red-chat-input" placeholder="Blank for REAPER-$$$ (or type name)" autocomplete="off" style="max-width: 250px;">
+                <input type="text" id="admin-custom-key-input" class="red-chat-input" placeholder="Blank for REAPER-$$$ (or custom name)" autocomplete="off" style="max-width: 250px;">
                 
                 <select id="admin-custom-key-rank" style="background: #040912; color: #fff; border: 1px solid var(--blue-border); border-radius: 6px; padding: 0.45rem 0.65rem; font-size: 0.8rem; font-weight: 700;">
                   <option value="member">Rank: Member</option>
@@ -366,7 +371,7 @@
                 <button class="btn-primary" style="padding: 0.5rem 1.15rem;" onclick="app.createCustomKey()">GENERATE KEY</button>
               </div>
 
-              <div style="font-size: 0.78rem; color: #88aacc; margin-bottom: 0.3rem;">ACTIVE KEYS & REMAINING USES:</div>
+              <div style="font-size: 0.78rem; color: #88aacc; margin-bottom: 0.3rem;">ACTIVE KEYS &amp; REMAINING USES:</div>
               <div id="admin-keys-list" style="max-height: 180px; overflow-y: auto;"></div>
             </div>
 
@@ -408,7 +413,7 @@
               <div style="display: flex; justify-content: space-between; align-items: center;">
                 <div>
                   <strong style="color: #ffbb33; font-size: 0.95rem;">PAUSE / FREEZE ALL ACCESS KEYS</strong>
-                  <p style="color: #ffe099; font-size: 0.8rem;">When paused, no new key logins can occur on the gateway. Key durations & remaining uses are frozen and preserved.</p>
+                  <p style="color: #ffe099; font-size: 0.8rem;">When paused, no new key logins can occur on the gateway. Key durations &amp; remaining uses are frozen and preserved.</p>
                 </div>
                 <input type="checkbox" id="admin-keys-locked-toggle" style="width: 24px; height: 24px; cursor: pointer; accent-color: #ffaa00;" onchange="app.toggleKeysLocked(this.checked)">
               </div>
@@ -534,6 +539,184 @@
     </div>
   </div>
 
+  <!-- Emergency Google Classroom Panic Disguise Overlay -->
+  <div id="panic-disguise-overlay" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: #f8f9fa; color: #3c4043; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, Arial, sans-serif; z-index: 999999; display: none; overflow-y: auto;">
+    <!-- Classroom Top Bar -->
+    <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>
+
+    <!-- Classroom Stream -->
+    <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>
+  </div>
+
+  <!-- Settings & Security Suite Modal -->
+  <div id="settings-modal" style="position: fixed; inset: 0; background: rgba(0, 4, 10, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 99995; display: none; align-items: center; justify-content: center; padding: 1.5rem;">
+    <div style="background: linear-gradient(145deg, #061124 0%, #030814 100%); border: 1.5px solid var(--blue-border); border-radius: 14px; width: 100%; max-width: 850px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 45px rgba(0, 136, 255, 0.35);">
+      
+      <!-- Settings Header -->
+      <div style="padding: 1rem 1.4rem; border-bottom: 1px solid var(--blue-border); display: flex; justify-content: space-between; align-items: center; background: #020712;">
+        <div style="display: flex; align-items: center; gap: 0.6rem;">
+          <span style="font-size: 1.2rem;">⚙️</span>
+          <span style="font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: #fff;">SETTINGS &amp; SECURITY SUITE</span>
+        </div>
+        <button onclick="app.closeSettingsModal()" class="btn-stealth" style="padding: 0.3rem 0.65rem; font-size: 0.9rem; font-weight: bold;">✕</button>
+      </div>
+
+      <!-- Settings Sub-Tabs -->
+      <div style="display: flex; border-bottom: 1px solid var(--blue-border); background: #030a18; padding: 0.5rem 1.4rem; gap: 0.5rem; overflow-x: auto;">
+        <button class="nav-tab-btn active" id="st-tab-btn-shield" onclick="app.switchSettingsTab('shield')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">🛡️ Security Shield</button>
+        <button class="nav-tab-btn" id="st-tab-btn-prefs" onclick="app.switchSettingsTab('prefs')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">⚡ Preferences &amp; Audio</button>
+        <button class="nav-tab-btn" id="st-tab-btn-saves" onclick="app.switchSettingsTab('saves')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">💾 Game Saves</button>
+        <button class="nav-tab-btn" id="st-tab-btn-identity" onclick="app.switchSettingsTab('identity')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">🔑 Device &amp; Rank</button>
+      </div>
+
+      <!-- Settings Content Body -->
+      <div style="padding: 1.4rem; overflow-y: auto; flex: 1;">
+        
+        <!-- SUBTAB 1: SECURITY SHIELD -->
+        <div id="st-content-shield">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;">
+            <div>
+              <h3 style="font-size: 1.15rem; color: #00d2ff; font-family: var(--font-heading); margin-bottom: 0.2rem;">
+                🛡️ BROWSER EXTENSION FIREWALL &amp; SPY DEFENDER
+              </h3>
+              <p style="color: var(--text-sub); font-size: 0.82rem;">
+                Scans, isolates, and terminates school surveillance hooks, screen snipers, and keyloggers.
+              </p>
+            </div>
+            <button class="btn-primary" onclick="app.purgeAllExtensionHooks()" style="background: #ff0055; border-color: #ff3377; padding: 0.6rem 1.2rem; font-size: 0.82rem;">
+              ⚡ DISABLE &amp; PURGE ALL HOOKS
+            </button>
+          </div>
+
+          <div style="display: flex; justify-content: space-between; align-items: center; background: #040e1e; border: 1px solid var(--blue-border); padding: 0.85rem 1.15rem; border-radius: 8px; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;">
+            <div style="display: flex; gap: 1.5rem; align-items: center;">
+              <div>
+                <span style="font-size: 0.7rem; color: #88aacc; text-transform: uppercase; display: block;">SHIELD STATUS</span>
+                <strong style="color: #00ffaa; font-size: 0.92rem;">ACTIVE &amp; ENFORCING</strong>
+              </div>
+              <div>
+                <span style="font-size: 0.7rem; color: #88aacc; text-transform: uppercase; display: block;">ISOLATION INTEGRITY</span>
+                <strong style="color: #00d2ff; font-size: 0.92rem;">100% SECURE</strong>
+              </div>
+            </div>
+
+            <div style="display: flex; gap: 1rem; align-items: center;">
+              <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: #fff; font-size: 0.8rem; font-weight: 700;">
+                <input type="checkbox" id="auto-shield-toggle" style="width: 18px; height: 18px; accent-color: #0088ff;" onchange="app.toggleAutoShield(this.checked)" checked>
+                AUTO-PURGE ON VISIT
+              </label>
+              <button class="btn-stealth" onclick="app.refreshExtensionScan()" style="padding: 0.35rem 0.75rem; font-size: 0.75rem;">
+                🔄 RESCAN BROWSER
+              </button>
+            </div>
+          </div>
+
+          <div style="font-size: 0.78rem; color: #88aacc; font-weight: 800; margin-bottom: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;">
+            DETECTED EXTENSIONS &amp; SPY PROBES:
+          </div>
+          <div id="shield-extensions-list" style="display: flex; flex-direction: column; gap: 0.55rem;"></div>
+        </div>
+
+        <!-- SUBTAB 2: PREFERENCES & AUDIO -->
+        <div id="st-content-prefs" style="display: none;">
+          <div style="display: flex; flex-direction: column; gap: 1.2rem;">
+            <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
+              <div>
+                <strong style="color: #fff; font-size: 0.95rem;">🔊 Sci-Fi Synthesizer Sound FX</strong>
+                <p style="color: #88aacc; font-size: 0.8rem;">Play high-tech audio blips on card hover, tab clicks, and game launch.</p>
+              </div>
+              <button class="btn-primary" onclick="app.toggleSoundFX()" style="font-size: 0.82rem; padding: 0.5rem 1.2rem;">TOGGLE SFX</button>
+            </div>
+
+            <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
+              <strong style="color: #00d2ff; font-size: 0.95rem;">🚨 Emergency Panic Cloak Hotkey</strong>
+              <p style="color: #88aacc; font-size: 0.8rem; margin-top: 0.35rem; line-height: 1.4;">
+                Press the <kbd style="background: #000; border: 1px solid var(--blue-bright); color: #00d2ff; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: bold;">~</kbd> (Tilde / Backquote) key at any moment to instantly disguise the site as <strong>Google Classroom</strong> with authentic assignments. Press <kbd style="background: #000; border: 1px solid var(--blue-bright); color: #00d2ff; padding: 0.15rem 0.45rem; border-radius: 4px; font-weight: bold;">~</kbd> again to exit disguise.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- SUBTAB 3: GAME SAVES -->
+        <div id="st-content-saves" style="display: none;">
+          <div style="display: flex; flex-direction: column; gap: 1.2rem;">
+            <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
+              <strong style="color: #00ffaa; font-size: 0.95rem;">💾 Export &amp; Backup Game Save Data</strong>
+              <p style="color: #88aacc; font-size: 0.8rem; margin: 0.4rem 0 0.85rem 0;">Download a single backup file containing all your local progress for Slope, Subway Surfers, BitLife, Retro Bowl, 1v1.LOL, and more.</p>
+              <button class="btn-primary" onclick="app.exportSaveData()" style="background: #00ffaa; color: #000; border-color: #00ffaa; font-size: 0.82rem;">💾 DOWNLOAD SAVE BACKUP</button>
+            </div>
+
+            <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
+              <strong style="color: #ffd700; font-size: 0.95rem;">📥 Import &amp; Restore Game Save Data</strong>
+              <p style="color: #88aacc; font-size: 0.8rem; margin: 0.4rem 0 0.85rem 0;">Upload a previously downloaded JSON save backup file to restore all your game saves instantly.</p>
+              <button class="btn-primary" onclick="app.importSaveData()" style="background: #ffd700; color: #000; border-color: #ffd700; font-size: 0.82rem;">📥 RESTORE SAVE BACKUP</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- SUBTAB 4: IDENTITY & HWID -->
+        <div id="st-content-identity" style="display: none;">
+          <div style="display: flex; flex-direction: column; gap: 1rem;">
+            <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
+              <div style="font-size: 0.72rem; color: #88aacc; text-transform: uppercase; margin-bottom: 0.25rem;">CURRENT USERNAME</div>
+              <div id="st-display-username" style="font-size: 1.1rem; font-weight: 800; color: #fff;">-</div>
+            </div>
+
+            <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
+              <div style="font-size: 0.72rem; color: #88aacc; text-transform: uppercase; margin-bottom: 0.25rem;">SECURITY ROLE / RANK</div>
+              <div id="st-display-rank" style="font-size: 1rem; font-weight: 800; color: #00d2ff;">MEMBER</div>
+            </div>
+
+            <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
+              <div style="font-size: 0.72rem; color: #88aacc; text-transform: uppercase; margin-bottom: 0.25rem;">DEVICE HARDWARE ID (HWID HASH)</div>
+              <div id="st-display-hwid" style="font-family: var(--font-mono); font-size: 0.85rem; color: #88aacc;">-</div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
   <!-- Toast -->
   <div id="toast-box" class="toast-box"></div>