reaper-arcade-hub 2.1.0 → 2.2.0

package/css/styles.css

@@ -936,13 +936,14 @@ body {
 
 .game-player-modal {
   display: none;
-  position: fixed !important;
-  inset: 0 !important;
-  width: 100vw !important;
-  height: 100vh !important;
-  background: #000 !important;
-  z-index: 9999999 !important;
-  flex-direction: column !important;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  z-index: 1000;
+  flex-direction: column;
 }
 
 .player-toolbar {
@@ -953,7 +954,6 @@ body {
   align-items: center;
   justify-content: space-between;
   padding: 0 1.25rem;
-  z-index: 10;
 }
 
 .player-frame-wrapper {
@@ -969,12 +969,12 @@ body {
 }
 
 .player-iframe {
-  width: 100% !important;
-  height: 100% !important;
-  border: none !important;
-  display: block !important;
-  background: #000 !important;
-  outline: none !important;
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  background: #000;
+  outline: none;
 }
 
 .reaper-watermark {
@@ -1079,52 +1079,74 @@ body {
 }
 
 /* ========================================== */
-/* POTATO PC & LOW-SPEC PERFORMANCE MODE      */
+/* TURBO MODE - ZERO-LAG PERFORMANCE ENGINE  */
 /* ========================================== */
-body.performance-mode #bg-canvas {
-  display: none !important;
+.btn-turbo {
+  background: rgba(0, 210, 255, 0.12);
+  border: 1.5px solid #00d2ff;
+  color: #00d2ff;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  font-weight: 800;
+  padding: 0.35rem 0.75rem;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: all 0.2s ease;
+  letter-spacing: 0.05em;
 }
 
-body.performance-mode *,
-body.performance-mode *::before,
-body.performance-mode *::after {
-  backdrop-filter: none !important;
-  -webkit-backdrop-filter: none !important;
-  box-shadow: none !important;
-  text-shadow: none !important;
+.btn-turbo.active {
+  background: #00e676;
+  border-color: #00ff88;
+  color: #02050a;
+  box-shadow: 0 0 16px rgba(0, 255, 136, 0.6);
+}
+
+.btn-turbo:hover {
+  transform: scale(1.04);
 }
 
-body.performance-mode {
-  background: #020712 !important;
+/* Ultra Low-Lag / Turbo Mode Active Overrides */
+body.turbo-mode-active * {
+  text-shadow: none !important;
 }
 
-body.performance-mode .app-header {
-  background: #030814 !important;
-  border-bottom: 1px solid #1a2a44 !important;
+body.turbo-mode-active .app-header,
+body.turbo-mode-active .admin-modal,
+body.turbo-mode-active .recent-bar-container,
+body.turbo-mode-active .game-card {
+  backdrop-filter: none !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
 }
 
-body.performance-mode .side-chat-panel,
-body.performance-mode .hero-card,
-body.performance-mode .admin-window,
-body.performance-mode .splash-content,
-body.performance-mode .recent-bar-container,
-body.performance-mode .game-card {
-  background: #040c18 !important;
-  box-shadow: none !important;
-  transition: border-color 0.15s ease !important;
-  transform: none !important;
+body.turbo-mode-active .game-card {
+  contain: content;
+  transform: translateZ(0);
 }
 
-body.performance-mode .game-card:hover {
-  transform: none !important;
-  border-color: #0088ff !important;
-  box-shadow: none !important;
+body.turbo-mode-active #bg-canvas {
+  opacity: 0.25;
 }
 
-body.performance-mode .game-thumb {
-  image-rendering: auto;
+/* Spotlight Featured Game Banner */
+.spotlight-banner {
+  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(0, 210, 255, 0.12) 100%);
+  border: 2px solid #ffd700;
+  border-radius: var(--radius-md);
+  padding: 1rem 1.25rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
+  animation: spotlightGlow 3s infinite alternate;
 }
 
-body.performance-mode .tab-section {
-  animation: none !important;
+@keyframes spotlightGlow {
+  from { box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); }
+  to { box-shadow: 0 0 35px rgba(255, 215, 0, 0.5); }
 }
+

package/index.html

@@ -18,48 +18,39 @@
 </head>
 <body>
 
-  <!-- Sleek Modern Cyber Loader (No Clutter / Smooth Glowing Rings) -->
-  <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #07152b 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);">
-    <div class="splash-content" style="max-width: 520px; width: 100%; text-align: center; background: rgba(4, 12, 28, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(0, 150, 255, 0.35); border-radius: 16px; padding: 2.75rem 2.25rem; box-shadow: 0 0 60px rgba(0, 136, 255, 0.2), inset 0 0 20px rgba(0, 136, 255, 0.08);">
+  <!-- 10-Second Initial Splash Screen -->
+  <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061630 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
+    <div class="splash-content" style="max-width: 580px; width: 100%; text-align: center; background: rgba(3, 10, 24, 0.85); backdrop-filter: blur(16px); border: 1.5px solid rgba(0, 136, 255, 0.4); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 50px rgba(0, 136, 255, 0.25), inset 0 0 30px rgba(0, 136, 255, 0.1);">
       
-      <!-- Futuristic Glowing Dual-Ring Orbit Spinner -->
-      <div style="position: relative; width: 72px; height: 72px; margin: 0 auto 1.5rem auto; display: flex; align-items: center; justify-content: center;">
-        <div style="position: absolute; inset: 0; border: 2.5px solid transparent; border-top-color: #00d2ff; border-right-color: #0088ff; border-radius: 50%; animation: reaperSpin 1s linear infinite;"></div>
-        <div style="position: absolute; inset: 6px; border: 2px dashed rgba(0, 210, 255, 0.4); border-radius: 50%; animation: reaperSpinRev 3s linear infinite;"></div>
-        <div style="width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0, 210, 255, 0.8);">
-          <div style="width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff;"></div>
-        </div>
+      <!-- Glowing Logo -->
+      <div style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); box-shadow: 0 0 25px #0088ff; margin-bottom: 1rem;">
+        <span style="font-size: 2rem;">⚡</span>
       </div>
 
-      <style>
-        @keyframes reaperSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        @keyframes reaperSpinRev { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
-      </style>
-
-      <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 2.8rem; font-weight: 900; color: #ffffff; letter-spacing: 0.15em; margin: 0 0 0.25rem 0; text-shadow: 0 0 25px rgba(0, 180, 255, 0.6);">REAPER</h1>
-      <div class="splash-sub" style="font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: #00d2ff; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.5rem;">HIGH-SPEED ARCADE ENGINE • 788 TITLES</div>
+      <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.2rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.2rem; text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);">reaper</h1>
+      <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.25rem;">788-GAME CORE ARCADE ENGINE</div>
       
-      <!-- Clean Minimalist Diagnostic Status Badges -->
+      <!-- Live System Diagnostic Pills -->
       <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;">
-        <span style="font-size: 0.65rem; color: #00ffaa; background: #020712; border: 1px solid rgba(0, 255, 170, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">CDN: CONNECTED</span>
-        <span style="font-size: 0.65rem; color: #00d2ff; background: #020712; border: 1px solid rgba(0, 210, 255, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">SHIELD: ARMED</span>
-        <span style="font-size: 0.65rem; color: #ffd700; background: #020712; border: 1px solid rgba(255, 215, 0, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">CORE: READY</span>
+        <span style="font-size: 0.65rem; color: #00ffaa; background: #020814; border: 1px solid #00ffaa; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">⚡ FASTLY CDN: ONLINE</span>
+        <span style="font-size: 0.65rem; color: #00d2ff; background: #020814; border: 1px solid #00d2ff; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🛡️ SPY SHIELD: ARMED</span>
+        <span style="font-size: 0.65rem; color: #ffd700; background: #020814; border: 1px solid #ffd700; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🎮 788 GAMES: READY</span>
       </div>
 
-      <!-- Rotating Feel-Good Cyber Quotes Card -->
-      <div class="splash-quote-wrapper" style="min-height: 52px; display: flex; align-items: center; justify-content: center; background: #020612; border: 1px solid rgba(0, 136, 255, 0.25); border-radius: 8px; padding: 0.85rem 1.25rem; margin-bottom: 1.5rem;">
-        <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.86rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.45;">"You are capable of more than you know. Lock in and dominate today."</div>
+      <!-- Dynamic Rotating Cyber Feel-Good Quotes -->
+      <div class="splash-quote-wrapper" style="min-height: 52px; display: flex; align-items: center; justify-content: center; background: #020612; border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 8px; padding: 0.75rem 1.2rem; margin-bottom: 1.5rem;">
+        <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.88rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.4;">"You are capable of more than you know. Lock in and dominate today."</div>
       </div>
 
-      <div class="splash-progress-track" style="height: 6px; background: #020714; border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
+      <div class="splash-progress-track" style="height: 8px; background: #020714; border: 1px solid var(--blue-border); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
         <div id="splash-progress-bar" class="splash-progress-bar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa); border-radius: 6px; transition: width 0.1s linear; box-shadow: 0 0 12px #00d2ff;"></div>
       </div>
-      <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.72rem; color: #88aacc; font-weight: 700; letter-spacing: 0.05em;">[0%] INITIALIZING REAPER CORE...</div>
+      <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.75rem; color: #88aacc; font-weight: 700;">[0%] INITIALIZING REAPER CORE...</div>
     </div>
   </div>
 
-  <!-- Key Gatekeeper Modal (Hard Wall - Blocks All Interaction) -->
-  <div id="key-gate-modal" style="display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; background: #02050a; z-index: 999999999; align-items: center; justify-content: center; padding: 1.5rem; flex-direction: column; pointer-events: all; user-select: none;">
+  <!-- Key Gatekeeper Modal (In-Page Clean UI) -->
+  <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, #07152b 0%, #02050a 100%);">
     <div class="admin-window" style="max-width: 480px; text-align: center; border-color: var(--blue-primary); box-shadow: 0 0 45px var(--blue-glow); padding: 2.5rem 2rem;">
       <div style="font-family: var(--font-logo); font-size: 3.5rem; color: #fff; font-weight: 900; margin-bottom: 0.25rem; letter-spacing: 0.1em;">reaper</div>
       <div style="color: #00d2ff; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.25rem;">AUTHENTICATION REQUIRED</div>
@@ -94,20 +85,19 @@
 
       <div style="font-size: 0.88rem; line-height: 1.7; color: #d0e4ff; display: flex; flex-direction: column; gap: 1rem;">
         <div>
-          <strong style="color: #00d2ff; font-size: 1.15rem;">🔥 Reaper Hub v1.0.9 is Live!</strong>
-          <p style="color: #88aacc; font-size: 0.82rem;">Latest Global Cyber Deployment</p>
+          <strong style="color: #00d2ff; font-size: 1.15rem;">⚡ Reaper Hub v2.2.0 Turbo Edition is Live!</strong>
+          <p style="color: #88aacc; font-size: 0.82rem;">Ultra High-FPS Turbo Engine &amp; Expanded Admin Superpowers</p>
         </div>
 
         <p style="color: #ffffff; font-weight: 600;">
-          Welcome to Reaper Hub! Here are the latest additions and improvements:
+          Welcome to Reaper Hub v2.2.0! Built on the clean, rock-solid 1.0.9 foundation with maximum lag reduction:
         </p>
 
         <ul style="padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; color: #e5f0ff;">
-          <li><strong>🔥 TOP PLAYS Counter &amp; Sort:</strong> Real-time tracking of total plays for every game! Every card displays live play counts (e.g. <code>🔥 1.4k Plays</code>). Click the new <strong>TOP PLAYS</strong> filter pill to see the most popular games ranked!</li>
-          <li><strong>🛡️ Surveillance Spy Honeypot:</strong> If GoGuardian, Securly, or a teacher screen grabber scans your tab, Reaper automatically halts games and cloaks your screen with clean educational study notes.</li>
-          <li><strong>💬 Realtime Private DMs &amp; Global Chat:</strong> Start encrypted 1-on-1 direct messages with any player on the network. Press <code>Enter</code> to instantly send messages.</li>
-          <li><strong>🎮 Perfect Game Centering &amp; Auto-Clean:</strong> Stripped all ad overlays so games are perfectly centered in full 60 FPS with instant WASD/click focus.</li>
-          <li><strong>🌟 100 Feel-Good Splash Quotes:</strong> Over 100 motivating, funny, and uplifting quotes rotating smoothly on the cyber startup loader.</li>
+          <li><strong>⚡ Turbo Anti-Lag Engine:</strong> Instant memory pre-caching for 0.01s game launches, automated background canvas pausing while playing, and GPU containment for silky 60 FPS on school Chromebooks and laptops!</li>
+          <li><strong>👑 Expanded Admin Superpowers:</strong> Real-time Hub Analytics card (FPS, games, cache, keys), Enforce Global Turbo Mode broadcast, Remote Client Force-Reload, Message of the Day (MOTD), Spotlight Featured Game Pin, Clear Chat Only, and Custom Slow-Mode intervals!</li>
+          <li><strong>🎮 Direct 788-Game Streaming:</strong> Ultra-fast game delivery directly via official GitHub Pages CDN (<code>gn-math.github.io/html/</code>) with guaranteed click delegation.</li>
+          <li><strong>🔒 Hardened Key Gatekeeper:</strong> Complete protection for the hub with instant Master Owner Key (<code>679-102</code>) bypass.</li>
         </ul>
       </div>
     </div>
@@ -138,10 +128,6 @@
       </nav>
 
       <div class="header-right">
-        <button class="btn-stealth" id="btn-turbo-toggle" onclick="app.togglePerformanceMode()" style="color: #00ffaa; border-color: #00ffaa; font-weight: 800;" title="Toggle Potato PC Turbo Performance Mode (Auto ON)">
-          ⚡ TURBO: ON
-        </button>
-
         <button class="btn-stealth" id="btn-sfx-toggle" onclick="app.toggleSoundFX()" title="Toggle Sci-Fi SFX">
           🔊 SFX
         </button>
@@ -163,6 +149,11 @@
           <span class="bind-rank rank-pill rank-member" id="header-rank-badge">MEMBER</span>
         </div>
 
+        <!-- Turbo Anti-Lag Engine Button -->
+        <button class="btn-turbo" id="header-turbo-btn" onclick="app.toggleTurboMode()" title="Toggle High-FPS Turbo Mode (Kills canvas particle lag & boosts game performance)">
+          <span id="turbo-btn-icon">⚡</span> <span id="turbo-btn-text">TURBO: OFF</span>
+        </button>
+
         <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>
@@ -220,6 +211,9 @@
           <p class="hero-desc" style="color: var(--text-sub); font-size: 0.85rem;">788 High-Speed HTML5 Games with instant in-site player & active playtime tracker.</p>
         </div>
 
+        <!-- Admin Spotlight / Featured Game Banner -->
+        <div id="spotlight-game-container" style="display: none;"></div>
+
         <div class="controls-bar">
           <div class="search-box">
             <span style="color: #0088ff; font-size: 0.75rem; font-weight: 700;">FILTER</span>
@@ -228,6 +222,7 @@
 
           <div class="filter-pills">
             <button class="filter-btn active" data-cat="all">ALL</button>
+            <button class="filter-btn" data-cat="top" style="color: #00ffaa; border-color: rgba(0, 255, 170, 0.4); background: rgba(0, 255, 170, 0.1);">🔥 TOP PLAYS</button>
             <button class="filter-btn" data-cat="featured">FEATURED</button>
             <button class="filter-btn" data-cat="favorites">FAVORITES</button>
             <button class="filter-btn" data-cat="fnf">FNF (50+)</button>
@@ -322,6 +317,73 @@
               </div>
             </div>
 
+            <!-- Superpower 1: Live Real-Time Analytics Dashboard -->
+            <div class="admin-section" style="border-color: #00d2ff; background: rgba(0, 210, 255, 0.05);">
+              <h3 style="font-size: 0.95rem; color: #00d2ff; margin-bottom: 0.6rem;">📊 LIVE HUB SYSTEM ANALYTICS</h3>
+              <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.65rem;">
+                <div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
+                  <div style="font-size: 0.7rem; color: #88aacc;">TOTAL GAMES</div>
+                  <div style="font-size: 1.3rem; font-weight: 800; color: #00ffaa;" id="admin-stat-games">788</div>
+                </div>
+                <div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
+                  <div style="font-size: 0.7rem; color: #88aacc;">TURBO CACHED</div>
+                  <div style="font-size: 1.3rem; font-weight: 800; color: #00d2ff;" id="admin-stat-cached">0</div>
+                </div>
+                <div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
+                  <div style="font-size: 0.7rem; color: #88aacc;">ACTIVE KEYS</div>
+                  <div style="font-size: 1.3rem; font-weight: 800; color: #ffd700;" id="admin-stat-keys">0</div>
+                </div>
+                <div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
+                  <div style="font-size: 0.7rem; color: #88aacc;">CLIENT FPS</div>
+                  <div style="font-size: 1.3rem; font-weight: 800; color: #ff0055;" id="admin-stat-fps">60</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Superpower 2: Global Enforce Turbo Mode (Anti-Lag Broadcast) -->
+            <div class="admin-section" style="border-color: #00ffaa; background: #03140c;">
+              <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div>
+                  <strong style="color: #00ffaa; font-size: 0.95rem;">⚡ ENFORCE GLOBAL TURBO MODE (ANTI-LAG)</strong>
+                  <p style="color: #88ffcc; font-size: 0.8rem;">Forces low-lag Turbo Mode for ALL connected players across the hub, minimizing canvas load and maximizing game FPS.</p>
+                </div>
+                <input type="checkbox" id="admin-global-turbo-toggle" style="width: 24px; height: 24px; cursor: pointer; accent-color: #00ffaa;" onchange="app.toggleGlobalTurbo(this.checked)">
+              </div>
+            </div>
+
+            <!-- Superpower 3: Remote Force Client Refresh (Kick / Reload All) -->
+            <div class="admin-section" style="border-color: #ffaa00; background: #140d02;">
+              <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
+                <div>
+                  <strong style="color: #ffbb33; font-size: 0.95rem;">🔄 FORCE RELOAD ALL CONNECTED PLAYERS</strong>
+                  <p style="color: #ffe099; font-size: 0.8rem;">Broadcast an instant signal that triggers all connected clients to reload immediately to fetch latest site updates.</p>
+                </div>
+                <button class="btn-primary" style="background: #ff8800; border-color: #ffaa00;" onclick="app.broadcastForceReload()">FORCE ALL RELOAD NOW</button>
+              </div>
+            </div>
+
+            <!-- Superpower 4: Message of the Day (MOTD) Announcement -->
+            <div class="admin-section" style="border-color: #0088ff; background: #030c18;">
+              <h3 style="font-size: 0.95rem; color: #00d2ff; margin-bottom: 0.4rem;">📢 LIVE MESSAGE OF THE DAY (MOTD)</h3>
+              <p style="color: #adc4e2; font-size: 0.8rem; margin-bottom: 0.75rem;">Set a persistent Message of the Day displayed in the hub and global chat for all players.</p>
+              <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+                <input type="text" id="admin-motd-input" class="red-chat-input" placeholder="e.g. Welcome to Reaper Hub v2.2 - 60 FPS Turbo Active!" autocomplete="off" style="flex: 1; min-width: 250px;">
+                <button class="btn-primary" onclick="app.submitMotd()">SET MOTD</button>
+                <button class="btn-stealth" onclick="app.clearMotd()" style="color: #ff8888;">CLEAR</button>
+              </div>
+            </div>
+
+            <!-- Superpower 5: Pin Spotlight / Featured Game -->
+            <div class="admin-section" style="border-color: #ffd700; background: #141102;">
+              <h3 style="font-size: 0.95rem; color: #ffd700; margin-bottom: 0.4rem;">🎯 PIN SPOTLIGHT / FEATURED GAME</h3>
+              <p style="color: #ffe680; font-size: 0.8rem; margin-bottom: 0.75rem;">Choose a game to feature prominently at the very top of the Games shelf with a glowing gold banner.</p>
+              <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
+                <input type="text" id="admin-spotlight-input" class="red-chat-input" placeholder="Game Name or Game ID (e.g. Slope, Retro Bowl, 12)" autocomplete="off" style="flex: 1; min-width: 220px;">
+                <button class="btn-primary" style="background: #ffd700; color: #000; font-weight: 800; border-color: #ffe066;" onclick="app.submitSpotlightGame()">SET SPOTLIGHT</button>
+                <button class="btn-stealth" onclick="app.clearSpotlightGame()" style="color: #ff8888;">CLEAR</button>
+              </div>
+            </div>
+
             <!-- 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>
@@ -333,13 +395,21 @@
               </div>
             </div>
 
-            <!-- Superpower: Chat Slow-Mode Switch -->
-            <div class="admin-section" style="display: flex; justify-content: space-between; align-items: center;">
+            <!-- Superpower: Chat Slow-Mode Switch & Cooldown Selector -->
+            <div class="admin-section" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
               <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>
+                <strong style="color: #fff; font-size: 0.95rem;">CHAT SLOW-MODE COOLDOWN</strong>
+                <p style="color: #88aacc; font-size: 0.8rem;">Enforces a cooldown interval between chat messages for non-owner players.</p>
+              </div>
+              <div style="display: flex; gap: 0.5rem; align-items: center;">
+                <select id="admin-slowmode-interval" style="background: #040912; color: #00d2ff; border: 1px solid var(--blue-border); border-radius: 6px; padding: 0.45rem 0.65rem; font-size: 0.82rem; font-weight: 700;" onchange="app.changeSlowModeInterval(this.value)">
+                  <option value="2">2 Seconds</option>
+                  <option value="5" selected>5 Seconds (Default)</option>
+                  <option value="10">10 Seconds</option>
+                  <option value="30">30 Seconds</option>
+                </select>
+                <input type="checkbox" id="admin-slowmode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00d2ff;" onchange="app.toggleSlowMode(this.checked)">
               </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) -->
@@ -474,12 +544,15 @@
 
             <!-- Server Data Purge -->
             <div class="admin-section" style="border-color: #ffaa00;">
-              <div style="display: flex; justify-content: space-between; align-items: center;">
+              <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
                 <div>
-                  <strong style="color: #ffaa00; font-size: 0.95rem;">PURGE ALL SERVER DATA</strong>
-                  <p style="color: #88aacc; font-size: 0.8rem;">Instantly reset all chat messages, playtime leaderboard scores, and generated keys across Firebase.</p>
+                  <strong style="color: #ffaa00; font-size: 0.95rem;">PURGE SERVER DATA</strong>
+                  <p style="color: #88aacc; font-size: 0.8rem;">Wipe chat messages only, or perform a total server data reset across Firebase.</p>
+                </div>
+                <div style="display: flex; gap: 0.5rem;">
+                  <button onclick="app.clearChatOnly()" class="btn-stealth" style="color: #ffaa00; border-color: #ffaa00; font-size: 0.78rem;">CLEAR CHAT ONLY</button>
+                  <button onclick="app.purgeAllServerData()" class="btn-primary" style="background: #ff4400; border-color: #ff8800; font-size: 0.78rem;">PURGE ALL</button>
                 </div>
-                <button onclick="app.purgeAllServerData()" class="btn-primary" style="background: #ff4400; border-color: #ff8800; font-size: 0.78rem;">PURGE ALL</button>
               </div>
             </div>
 
@@ -743,15 +816,6 @@
         <div id="st-content-prefs" style="display: none;">
           <div style="display: flex; flex-direction: column; gap: 1.2rem;">
             
-            <!-- Performance Turbo Mode toggle -->
-            <div style="background: #040e1e; border: 1.5px solid rgba(0, 255, 170, 0.4); padding: 1rem 1.25rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
-              <div>
-                <strong style="color: #00ffaa; font-size: 0.95rem;">⚡ Potato PC &amp; Old Laptop Turbo Mode (Auto ON)</strong>
-                <p style="color: #88aacc; font-size: 0.8rem; margin-top: 0.2rem;">Disables 3D space particles, heavy blur filters, and 3D card tilt for max 60 FPS on Chromebooks &amp; old laptops.</p>
-              </div>
-              <input type="checkbox" id="perf-mode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00ffaa;" onchange="app.togglePerformanceMode()" checked>
-            </div>
-
             <!-- Auto about:blank toggle -->
             <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>