reaper-arcade-hub 1.0.0 → 1.0.1

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

@@ -112,6 +112,14 @@
       </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>
@@ -140,7 +148,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 +165,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>
@@ -534,6 +557,54 @@
     </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>
+
   <!-- Toast -->
   <div id="toast-box" class="toast-box"></div>
 

package/js/app.js

@@ -146,6 +146,7 @@ class ReaperHubApp {
     this.updateStats();
     this.renderChatMessages();
     this.renderGamesGrid();
+    this.renderRecentlyPlayed();
     this.setupEventListeners();
     this.setupAdminShortcuts();
     this.startTimeoutTimerLoop();
@@ -1210,6 +1211,125 @@ class ReaperHubApp {
         </div>
       `;
     }).join('');
+
+    this.attachCardTiltListeners();
+  }
+
+  attachCardTiltListeners() {
+    const cards = document.querySelectorAll('.game-card');
+    cards.forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        if (window.reaperSFX) window.reaperSFX.playHover();
+      });
+
+      card.addEventListener('mousemove', (e) => {
+        const rect = card.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        
+        const rotateX = ((y - centerY) / centerY) * -12;
+        const rotateY = ((x - centerX) / centerX) * 12;
+
+        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.03, 1.03, 1.03)`;
+        card.style.setProperty('--mouse-x', `${x}px`);
+        card.style.setProperty('--mouse-y', `${y}px`);
+      });
+
+      card.addEventListener('mouseleave', () => {
+        card.style.transform = '';
+      });
+    });
+  }
+
+  recordRecentlyPlayed(game) {
+    if (!game) return;
+    let recent = JSON.parse(localStorage.getItem('reaper_recently_played') || '[]');
+    recent = recent.filter(r => r.id !== game.id);
+    recent.unshift({ id: game.id, name: game.name, cover: game.cover });
+    if (recent.length > 6) recent = recent.slice(0, 6);
+    localStorage.setItem('reaper_recently_played', JSON.stringify(recent));
+    this.renderRecentlyPlayed();
+  }
+
+  renderRecentlyPlayed() {
+    const container = document.getElementById('recent-games-container');
+    const grid = document.getElementById('recent-games-grid');
+    if (!container || !grid) return;
+
+    const recent = JSON.parse(localStorage.getItem('reaper_recently_played') || '[]');
+    if (recent.length === 0) {
+      container.style.display = 'none';
+      return;
+    }
+
+    container.style.display = 'block';
+    grid.innerHTML = recent.map(g => {
+      const coverUrl = g.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(g.name)}`;
+      return `
+        <div class="recent-card" onclick="app.launchGame(${g.id})">
+          <img class="recent-card-img" src="${coverUrl}" alt="${g.name}" loading="lazy" onerror="this.onerror=null; this.src='https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(g.name)}';" />
+          <div class="recent-card-name" title="${g.name}">${this.escapeHtml(g.name)}</div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  clearRecentlyPlayed() {
+    localStorage.removeItem('reaper_recently_played');
+    this.renderRecentlyPlayed();
+    this.showToast("Recently played list cleared.");
+  }
+
+  exportSaveData() {
+    const backup = {};
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      backup[key] = localStorage.getItem(key);
+    }
+    const blob = new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `reaper_save_backup_${new Date().toISOString().slice(0,10)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    this.showToast("Game save data downloaded! 💾");
+  }
+
+  importSaveData() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    input.onchange = (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        try {
+          const data = JSON.parse(event.target.result);
+          Object.entries(data).forEach(([k, v]) => {
+            localStorage.setItem(k, v);
+          });
+          this.showToast("Save data restored! Reloading...");
+          setTimeout(() => window.location.reload(), 1200);
+        } catch (err) {
+          alert("Invalid backup file.");
+        }
+      };
+      reader.readAsText(file);
+    };
+    input.click();
+  }
+
+  toggleSoundFX() {
+    if (window.reaperSFX) {
+      const enabled = window.reaperSFX.toggleSound();
+      const btn = document.getElementById('btn-sfx-toggle');
+      if (btn) btn.textContent = enabled ? '🔊 SFX' : '🔇 MUTED';
+      this.showToast(enabled ? "Sound FX Enabled" : "Sound FX Muted");
+    }
   }
 
   toggleFavorite(id) {
@@ -1237,6 +1357,13 @@ class ReaperHubApp {
     const game = this.games.find(g => g.id === gameId);
     if (!game) return;
     this.currentGame = game;
+    this.recordRecentlyPlayed(game);
+
+    if (window.reaperSFX) window.reaperSFX.playLaunch();
+    if (window.reaperStarfield) {
+      window.reaperStarfield.setWarpSpeed(true);
+      setTimeout(() => window.reaperStarfield.setWarpSpeed(false), 1200);
+    }
 
     const modal = document.getElementById('game-player-modal');
     const iframe = document.getElementById('player-iframe');

package/js/security-shield.js

@@ -49,6 +49,14 @@
           e.stopPropagation();
           return false;
         }
+        // Emergency Panic Cloak Hotkey (~ or Backquote)
+        if (e.key === '`' || e.key === '~') {
+          e.preventDefault();
+          this.togglePanicDisguise();
+          return false;
+        }
+
+        // Ctrl + U (View Source)
         if (e.ctrlKey && (e.key === 'U' || e.key === 'u')) {
           e.preventDefault();
           e.stopPropagation();
@@ -215,6 +223,37 @@
       return count;
     }
 
+    togglePanicDisguise() {
+      const overlay = document.getElementById('panic-disguise-overlay');
+      if (!overlay) return;
+
+      this.isPanicActive = !this.isPanicActive;
+
+      if (this.isPanicActive) {
+        this.originalTitle = document.title;
+        document.title = "Home - Google Classroom";
+        
+        let link = document.querySelector("link[rel*='icon']");
+        if (!link) {
+          link = document.createElement('link');
+          link.rel = 'shortcut icon';
+          document.head.appendChild(link);
+        }
+        this.originalFavicon = link.href;
+        link.href = "https://ssl.gstatic.com/classroom/favicon.png";
+
+        overlay.style.display = 'block';
+        if (window.reaperSFX) window.reaperSFX.playClick();
+      } else {
+        document.title = this.originalTitle || "REAPER // Games & Leaderboard";
+        const link = document.querySelector("link[rel*='icon']");
+        if (link && this.originalFavicon) {
+          link.href = this.originalFavicon;
+        }
+        overlay.style.display = 'none';
+      }
+    }
+
     setAutoPurge(enabled) {
       this.autoShield = enabled;
       localStorage.setItem('reaper_auto_shield', enabled ? 'true' : 'false');

package/js/visuals.js

@@ -1,4 +1,4 @@
-// REAPER HUB - Opium Starfield Canvas Engine
+// REAPER HUB - Next-Gen Starfield & Web Audio SFX Synthesizer Engine
 
 class StarfieldCanvas {
   constructor() {
@@ -6,9 +6,11 @@ class StarfieldCanvas {
     if (!this.canvas) return;
     this.ctx = this.canvas.getContext('2d');
     this.stars = [];
-    this.numStars = 220;
+    this.numStars = 240;
     this.width = window.innerWidth;
     this.height = window.innerHeight;
+    this.isWarping = false;
+    this.warpSpeedMultiplier = 1;
     
     this.init();
   }
@@ -17,16 +19,17 @@ class StarfieldCanvas {
     this.resize();
     window.addEventListener('resize', () => this.resize());
 
-    // Generate Stars
+    // Generate Space Particle Stars
     this.stars = [];
     for (let i = 0; i < this.numStars; i++) {
       this.stars.push({
         x: Math.random() * this.width,
         y: Math.random() * this.height,
-        radius: Math.random() * 1.5 + 0.5,
+        radius: Math.random() * 1.6 + 0.4,
         alpha: Math.random() * 0.8 + 0.2,
         twinkleSpeed: (Math.random() * 0.02 + 0.005) * (Math.random() > 0.5 ? 1 : -1),
-        speedY: (Math.random() * 0.15 + 0.05)
+        speedY: (Math.random() * 0.25 + 0.08),
+        color: Math.random() > 0.8 ? '#00d2ff' : Math.random() > 0.9 ? '#8800ff' : '#ffffff'
       });
     }
 
@@ -42,8 +45,15 @@ class StarfieldCanvas {
     }
   }
 
+  setWarpSpeed(enabled) {
+    this.isWarping = enabled;
+  }
+
   animate() {
-    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.ctx.fillStyle = 'rgba(2, 5, 10, 0.25)';
+    this.ctx.fillRect(0, 0, this.width, this.height);
+
+    const speedMult = this.isWarping ? 12 : 1;
 
     for (let star of this.stars) {
       star.alpha += star.twinkleSpeed;
@@ -51,24 +61,171 @@ class StarfieldCanvas {
         star.twinkleSpeed = -star.twinkleSpeed;
       }
 
-      star.y -= star.speedY;
+      star.y -= star.speedY * speedMult;
       if (star.y < 0) {
         star.y = this.height;
         star.x = Math.random() * this.width;
       }
 
       this.ctx.beginPath();
-      this.ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
-      this.ctx.fillStyle = `rgba(255, 255, 255, ${star.alpha})`;
-      this.ctx.shadowBlur = star.radius > 1.2 ? 6 : 0;
-      this.ctx.shadowColor = 'rgba(255, 255, 255, 0.8)';
-      this.ctx.fill();
+      if (this.isWarping) {
+        this.ctx.moveTo(star.x, star.y);
+        this.ctx.lineTo(star.x, star.y + star.speedY * 18);
+        this.ctx.strokeStyle = star.color;
+        this.ctx.lineWidth = star.radius;
+        this.ctx.stroke();
+      } else {
+        this.ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
+        this.ctx.fillStyle = star.color;
+        this.ctx.globalAlpha = Math.max(0.1, Math.min(1, star.alpha));
+        this.ctx.shadowBlur = 4;
+        this.ctx.shadowColor = star.color;
+        this.ctx.fill();
+        this.ctx.shadowBlur = 0;
+        this.ctx.globalAlpha = 1;
+      }
     }
 
     requestAnimationFrame(() => this.animate());
   }
 }
 
-window.addEventListener('DOMContentLoaded', () => {
-  window.starfield = new StarfieldCanvas();
+// Web Audio Sci-Fi Synthesizer (Zero Dependencies)
+class ReaperSoundFX {
+  constructor() {
+    this.audioCtx = null;
+    this.isEnabled = localStorage.getItem('reaper_sfx_enabled') !== 'false';
+  }
+
+  initContext() {
+    if (!this.audioCtx) {
+      const AudioContext = window.AudioContext || window.webkitAudioContext;
+      if (AudioContext) {
+        this.audioCtx = new AudioContext();
+      }
+    }
+    if (this.audioCtx && this.audioCtx.state === 'suspended') {
+      this.audioCtx.resume();
+    }
+  }
+
+  playHover() {
+    if (!this.isEnabled) return;
+    try {
+      this.initContext();
+      if (!this.audioCtx) return;
+      const osc = this.audioCtx.createOscillator();
+      const gain = this.audioCtx.createGain();
+      
+      osc.type = 'sine';
+      osc.frequency.setValueAtTime(880, this.audioCtx.currentTime);
+      osc.frequency.exponentialRampToValueAtTime(1200, this.audioCtx.currentTime + 0.04);
+      
+      gain.gain.setValueAtTime(0.03, this.audioCtx.currentTime);
+      gain.gain.exponentialRampToValueAtTime(0.0001, this.audioCtx.currentTime + 0.04);
+      
+      osc.connect(gain);
+      gain.connect(this.audioCtx.destination);
+      
+      osc.start();
+      osc.stop(this.audioCtx.currentTime + 0.04);
+    } catch (e) {}
+  }
+
+  playClick() {
+    if (!this.isEnabled) return;
+    try {
+      this.initContext();
+      if (!this.audioCtx) return;
+      const osc = this.audioCtx.createOscillator();
+      const gain = this.audioCtx.createGain();
+      
+      osc.type = 'triangle';
+      osc.frequency.setValueAtTime(520, this.audioCtx.currentTime);
+      osc.frequency.exponentialRampToValueAtTime(180, this.audioCtx.currentTime + 0.08);
+      
+      gain.gain.setValueAtTime(0.08, this.audioCtx.currentTime);
+      gain.gain.exponentialRampToValueAtTime(0.001, this.audioCtx.currentTime + 0.08);
+      
+      osc.connect(gain);
+      gain.connect(this.audioCtx.destination);
+      
+      osc.start();
+      osc.stop(this.audioCtx.currentTime + 0.08);
+    } catch (e) {}
+  }
+
+  playLaunch() {
+    if (!this.isEnabled) return;
+    try {
+      this.initContext();
+      if (!this.audioCtx) return;
+      const now = this.audioCtx.currentTime;
+      
+      const osc1 = this.audioCtx.createOscillator();
+      const osc2 = this.audioCtx.createOscillator();
+      const gain = this.audioCtx.createGain();
+      
+      osc1.type = 'sawtooth';
+      osc2.type = 'sine';
+      
+      osc1.frequency.setValueAtTime(220, now);
+      osc1.frequency.exponentialRampToValueAtTime(880, now + 0.35);
+      
+      osc2.frequency.setValueAtTime(440, now);
+      osc2.frequency.exponentialRampToValueAtTime(1760, now + 0.35);
+      
+      gain.gain.setValueAtTime(0.09, now);
+      gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.4);
+      
+      osc1.connect(gain);
+      osc2.connect(gain);
+      gain.connect(this.audioCtx.destination);
+      
+      osc1.start(now);
+      osc2.start(now);
+      osc1.stop(now + 0.4);
+      osc2.stop(now + 0.4);
+    } catch (e) {}
+  }
+
+  playUnlock() {
+    if (!this.isEnabled) return;
+    try {
+      this.initContext();
+      if (!this.audioCtx) return;
+      const now = this.audioCtx.currentTime;
+      const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
+      
+      notes.forEach((freq, idx) => {
+        const osc = this.audioCtx.createOscillator();
+        const gain = this.audioCtx.createGain();
+        const start = now + (idx * 0.07);
+        
+        osc.type = 'sine';
+        osc.frequency.setValueAtTime(freq, start);
+        
+        gain.gain.setValueAtTime(0.08, start);
+        gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.22);
+        
+        osc.connect(gain);
+        gain.connect(this.audioCtx.destination);
+        
+        osc.start(start);
+        osc.stop(start + 0.22);
+      });
+    } catch (e) {}
+  }
+
+  toggleSound() {
+    this.isEnabled = !this.isEnabled;
+    localStorage.setItem('reaper_sfx_enabled', this.isEnabled ? 'true' : 'false');
+    if (this.isEnabled) this.playClick();
+    return this.isEnabled;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  window.reaperStarfield = new StarfieldCanvas();
+  window.reaperSFX = new ReaperSoundFX();
 });