ft-scout 7.0.7 → 7.0.8

package/web/app.js

@@ -1,6 +1,6 @@
 /* ==========================================================================
- FrontTerrain Scout — Account & Paid Tiers Dashboard Controller
- ========================================================================== */
+   FrontTerrain Scout — Multi-Page Application Engine v7.0.8
+   ========================================================================== */
 
 const FIREBASE_CONFIG = {
     apiKey: 'AIzaSyCMVNDgR8EejfXofUy87L7hsKxi3E_C3lg',
@@ -15,19 +15,19 @@ const TIER_DETAILS = {
         name: 'Developer Free Tier',
         badge: 'ACTIVE',
         desc: 'Standard access to Scout CLI features & local execution.',
-        icon: '<i class="fa-solid fa-star text-warning" style="font-size: 24px;"></i>',
+        icon: '<i class="fa-solid fa-star text-warning" style="font-size: 28px;"></i>',
     },
     pro: {
         name: 'Pro Developer Tier',
         badge: 'PRO ACTIVE',
         desc: 'High-power AI co-pilot capabilities, priority quota & 5 active CLI sessions.',
-        icon: '<i class="fa-solid fa-bolt text-primary" style="font-size: 24px;"></i>',
+        icon: '<i class="fa-solid fa-bolt text-primary" style="font-size: 28px;"></i>',
     },
     enterprise: {
         name: 'Team & Enterprise Tier',
         badge: 'ENTERPRISE ACTIVE',
         desc: 'Organization controls, security policies & dedicated scale.',
-        icon: '<i class="fa-solid fa-building text-warning" style="font-size: 24px;"></i>',
+        icon: '<i class="fa-solid fa-building text-warning" style="font-size: 28px;"></i>',
     },
 };
 
@@ -36,7 +36,6 @@ let state = {
     user: null,
     token: null,
     refreshToken: null,
-    activeTab: 'account',
     serverConnected: false,
     apiBaseUrl: '',
     sessions: [],
@@ -53,103 +52,73 @@ let state = {
 
 let pendingCheckoutTier = null;
 
-// DOM Elements Reference
-const elements = {
-    // Views
-    authSection: document.getElementById('auth-section'),
-    dashboardSection: document.getElementById('dashboard-section'),
-
-    // Auth Controls
-    tabLoginBtn: document.getElementById('tab-login-btn'),
-    tabSignupBtn: document.getElementById('tab-signup-btn'),
-    loginForm: document.getElementById('login-form'),
-    signupForm: document.getElementById('signup-form'),
-    btnOpenAuth: document.getElementById('btn-open-auth'),
-    btnDemoMode: document.getElementById('btn-demo-mode'),
-    btnForgotPwd: document.getElementById('btn-forgot-pwd'),
-
-    // Navigation & User Menu
-    mainNav: document.getElementById('main-nav'),
-    userMenu: document.getElementById('user-menu'),
-    userMenuToggle: document.getElementById('user-menu-toggle'),
-    userDropdown: document.getElementById('user-dropdown'),
-    navAvatar: document.getElementById('nav-avatar'),
-    navUserName: document.getElementById('nav-user-name'),
-    dropdownName: document.getElementById('dropdown-name'),
-    dropdownEmail: document.getElementById('dropdown-email'),
-    btnDropdownLogout: document.getElementById('btn-dropdown-logout'),
-    btnDropdownProfile: document.getElementById('btn-dropdown-profile'),
-    btnDropdownTiers: document.getElementById('btn-dropdown-tiers'),
-    navTenantTag: document.getElementById('nav-tenant-tag'),
-    navTenantName: document.getElementById('nav-tenant-name'),
-
-    // Account & Header Controls
-    userDisplayName: document.getElementById('user-display-name'),
-    btnNavTiersHero: document.getElementById('btn-nav-tiers-hero'),
-    sessionTableBody: document.getElementById('session-table-body'),
-
-    // Credit Quota & Usage Controls
-    valCreditsUsed: document.getElementById('val-credits-used'),
-    valCreditsRemaining: document.getElementById('val-credits-remaining'),
-    valCreditsTotal: document.getElementById('val-credits-total'),
-    valCreditsPct: document.getElementById('val-credits-pct'),
-    creditProgressFill: document.getElementById('credit-progress-fill'),
-    valRenewDatetime: document.getElementById('val-renew-datetime'),
-    btnUpgradeCreditsHero: document.getElementById('btn-upgrade-credits-hero'),
-    creditStatusBadge: document.getElementById('credit-status-badge'),
-    labelCreditConsumption: document.getElementById('label-credit-consumption'),
-    byokBannerNote: document.getElementById('byok-banner-note'),
-
-    // BYOK & Custom Proxy Endpoint Inputs
-    byokForm: document.getElementById('byok-form'),
-    selectByokProvider: document.getElementById('select-byok-provider'),
-    inputByokEndpoint: document.getElementById('input-byok-endpoint'),
-    inputByokKey: document.getElementById('input-byok-key'),
-    checkboxEnableByok: document.getElementById('checkbox-enable-byok'),
-    byokStatusBadge: document.getElementById('byok-status-badge'),
-
-    // Profile Settings Inputs
-    settingsDisplayName: document.getElementById('settings-display-name'),
-    settingsEmail: document.getElementById('settings-email'),
-    settingsUid: document.getElementById('settings-uid'),
-    settingsActiveTier: document.getElementById('settings-active-tier'),
-    profileForm: document.getElementById('profile-form'),
-    btnAccountLogout: document.getElementById('btn-account-logout'),
-
-    // Paid Tiers UI
-    currentPlanTitle: document.getElementById('current-plan-title'),
-    currentPlanBadge: document.getElementById('current-plan-badge'),
-    currentPlanDesc: document.getElementById('current-plan-desc'),
-    tierActiveIcon: document.getElementById('tier-active-icon'),
-    toggleBillingCycle: document.getElementById('toggle-billing-cycle'),
-    priceProVal: document.getElementById('price-pro-val'),
-    priceProPeriod: document.getElementById('price-pro-period'),
-    priceEntVal: document.getElementById('price-ent-val'),
-    priceEntPeriod: document.getElementById('price-ent-period'),
-
-    // Checkout Modal Controls
-    checkoutModal: document.getElementById('checkout-modal'),
-    checkoutModalTitle: document.getElementById('checkout-modal-title'),
-    checkoutPlanName: document.getElementById('checkout-plan-name'),
-    checkoutBillingCycle: document.getElementById('checkout-billing-cycle'),
-    checkoutPlanPrice: document.getElementById('checkout-plan-price'),
-    checkoutPricePeriod: document.getElementById('checkout-price-period'),
-    checkoutQuotaVal: document.getElementById('checkout-quota-val'),
-    btnCloseCheckout: document.getElementById('btn-close-checkout'),
-    btnCancelCheckout: document.getElementById('btn-cancel-checkout'),
-    btnConfirmCheckout: document.getElementById('btn-confirm-checkout'),
-
-    // Toast Container
-    toastContainer: document.getElementById('toast-container'),
-};
+// Audio Synthesizer via Web Audio API
+let audioCtx = null;
+
+function playRetroBeep(freq = 440, duration = 0.08, type = 'square') {
+    try {
+        if (!audioCtx) {
+            const AudioContext = window.AudioContext || window.webkitAudioContext;
+            audioCtx = new AudioContext();
+        }
+        if (audioCtx.state === 'suspended') audioCtx.resume();
+
+        const osc = audioCtx.createOscillator();
+        const gain = audioCtx.createGain();
+        osc.type = type;
+        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
+
+        gain.gain.setValueAtTime(0.08, audioCtx.currentTime);
+        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
+
+        osc.connect(gain);
+        gain.connect(audioCtx.destination);
+        osc.start();
+        osc.stop(audioCtx.currentTime + duration);
+    } catch { }
+}
+
+// DOM Helper Getter
+function getEl(id) {
+    return document.getElementById(id);
+}
+
+// Helper to determine current page basename
+function getCurrentPage() {
+    const path = window.location.pathname.toLowerCase();
+    if (path.includes('/auth')) return '/auth';
+    if (path.includes('/plans')) return '/plans';
+    if (path.includes('/cli')) return '/cli';
+    return 'index.html';
+}
+
+// Highlight current active nav link in navbar
+function highlightActiveNav() {
+    const currentPage = getCurrentPage();
+    document.querySelectorAll('.nav-links .nav-btn').forEach((link) => {
+        const href = link.getAttribute('href');
+        if (href === currentPage || (currentPage === 'index.html' && (href === 'index.html' || href === './'))) {
+            link.classList.add('active');
+        } else {
+            link.classList.remove('active');
+        }
+    });
+}
 
 // Initialize Application
 document.addEventListener('DOMContentLoaded', async () => {
+    highlightActiveNav();
     loadTierAndCreditsFromStorage();
     loadSessionsFromStorage();
     initEventListeners();
+    initFAQAccordions();
+    initTerminalSimulator();
     renderAllDynamicComponents();
     await checkServerStatusAndSession();
+
+    if (getEl('pacman-canvas')) {
+        initPacmanGame();
+    }
 });
 
 // Time Helper Function for Dynamic Relative Timestamps
@@ -169,7 +138,7 @@ function timeAgo(dateInput) {
     return `${days}d ago`;
 }
 
-// Load Subscription Tier & Dynamic Credits from Local Storage / Config
+// Load Subscription Tier & Dynamic Credits from Local Storage
 function loadTierAndCreditsFromStorage() {
     const savedTier = localStorage.getItem('scout_current_tier');
     if (savedTier && TIER_DETAILS[savedTier]) {
@@ -177,11 +146,7 @@ function loadTierAndCreditsFromStorage() {
     }
 
     const savedUsed = localStorage.getItem('scout_credits_used');
-    if (savedUsed !== null) {
-        state.creditsUsed = parseInt(savedUsed, 10) || 0;
-    } else {
-        state.creditsUsed = 0;
-    }
+    state.creditsUsed = savedUsed !== null ? parseInt(savedUsed, 10) || 0 : 0;
 
     const savedTotal = localStorage.getItem('scout_credits_total');
     if (savedTotal !== null) {
@@ -209,6 +174,7 @@ function renderAllDynamicComponents() {
     renderSessionsTable();
     renderCreditUsageUI();
     renderTiersUI();
+    updateUserUI();
 }
 
 // Open / Close Checkout Modal
@@ -228,67 +194,71 @@ function openCheckoutModal(targetTier) {
         quota = '10,000 Credits / mo';
     }
 
-    if (elements.checkoutPlanName) elements.checkoutPlanName.innerText = tierInfo.name;
-    if (elements.checkoutBillingCycle) elements.checkoutBillingCycle.innerText = isAnnual ? 'Billed Annually (20% Off)' : 'Billed Monthly';
-    if (elements.checkoutPlanPrice) elements.checkoutPlanPrice.innerText = price;
-    if (elements.checkoutPricePeriod) elements.checkoutPricePeriod.innerText = isAnnual ? '/ mo (annual)' : '/ mo';
-    if (elements.checkoutQuotaVal) elements.checkoutQuotaVal.innerText = quota;
+    if (getEl('checkout-plan-name')) getEl('checkout-plan-name').innerText = tierInfo.name;
+    if (getEl('checkout-billing-cycle')) getEl('checkout-billing-cycle').innerText = isAnnual ? 'Billed Annually (20% Off)' : 'Billed Monthly';
+    if (getEl('checkout-plan-price')) getEl('checkout-plan-price').innerText = price;
+    if (getEl('checkout-price-period')) getEl('checkout-price-period').innerText = isAnnual ? '/ mo (annual)' : '/ mo';
+    if (getEl('checkout-quota-val')) getEl('checkout-quota-val').innerText = quota;
 
-    if (elements.checkoutModal) elements.checkoutModal.classList.remove('hidden');
+    const modal = getEl('checkout-modal');
+    if (modal) modal.classList.remove('hidden');
 }
 
 function closeCheckoutModal() {
     pendingCheckoutTier = null;
-    if (elements.checkoutModal) elements.checkoutModal.classList.add('hidden');
+    const modal = getEl('checkout-modal');
+    if (modal) modal.classList.add('hidden');
 }
 
 // Setup Event Handlers
 function initEventListeners() {
     // Auth Form Tabs Switcher
-    elements.tabLoginBtn?.addEventListener('click', () => switchAuthForm('login'));
-    elements.tabSignupBtn?.addEventListener('click', () => switchAuthForm('signup'));
+    getEl('tab-login-btn')?.addEventListener('click', () => switchAuthForm('login'));
+    getEl('tab-signup-btn')?.addEventListener('click', () => switchAuthForm('signup'));
 
     // Form Submissions
-    elements.loginForm?.addEventListener('submit', handleSignIn);
-    elements.signupForm?.addEventListener('submit', handleSignUp);
-    elements.btnDemoMode?.addEventListener('click', launchDemoSession);
+    getEl('login-form')?.addEventListener('submit', handleSignIn);
+    getEl('signup-form')?.addEventListener('submit', handleSignUp);
+    getEl('btn-demo-mode')?.addEventListener('click', launchDemoSession);
+
+    // Password Strength Checker
+    getEl('signup-password')?.addEventListener('input', (e) => {
+        const val = e.target.value;
+        const bar = getEl('pwd-strength-bar');
+        if (!bar) return;
+
+        let strength = 0;
+        if (val.length >= 6) strength += 33;
+        if (/[A-Z]/.test(val) && /[0-9]/.test(val)) strength += 33;
+        if (/[^A-Za-z0-9]/.test(val) && val.length >= 10) strength += 34;
+
+        bar.style.width = `${strength}%`;
+        bar.style.backgroundColor = strength < 40 ? '#ef4444' : strength < 80 ? '#eab308' : '#22c55e';
+    });
 
-    elements.btnForgotPwd?.addEventListener('click', (e) => {
+    getEl('btn-forgot-pwd')?.addEventListener('click', (e) => {
         e.preventDefault();
         handleForgotPassword();
     });
 
-    // Navigation Tabs Switcher
-    document.querySelectorAll('.nav-btn').forEach((btn) => {
-        btn.addEventListener('click', () => {
-            const targetTab = btn.getAttribute('data-tab');
-            if (targetTab) switchDashboardTab(targetTab);
-        });
-    });
-
     // User Dropdown Menu
-    elements.userMenuToggle?.addEventListener('click', (e) => {
+    getEl('user-menu-toggle')?.addEventListener('click', (e) => {
         e.stopPropagation();
-        elements.userDropdown?.classList.toggle('show');
+        getEl('user-dropdown')?.classList.toggle('show');
     });
 
     document.addEventListener('click', () => {
-        elements.userDropdown?.classList.remove('show');
+        getEl('user-dropdown')?.classList.remove('show');
     });
 
-    elements.btnDropdownLogout?.addEventListener('click', handleLogout);
-    elements.btnAccountLogout?.addEventListener('click', handleLogout);
-    elements.btnDropdownProfile?.addEventListener('click', () => switchDashboardTab('account'));
-    elements.btnDropdownTiers?.addEventListener('click', () => switchDashboardTab('tiers'));
-    elements.btnNavTiersHero?.addEventListener('click', () => switchDashboardTab('tiers'));
-    elements.btnUpgradeCreditsHero?.addEventListener('click', () => switchDashboardTab('tiers'));
-    elements.btnOpenAuth?.addEventListener('click', showAuthSection);
+    getEl('btn-dropdown-logout')?.addEventListener('click', handleLogout);
+    getEl('btn-account-logout')?.addEventListener('click', handleLogout);
 
     // Checkout Modal Events
-    elements.btnCloseCheckout?.addEventListener('click', closeCheckoutModal);
-    elements.btnCancelCheckout?.addEventListener('click', closeCheckoutModal);
+    getEl('btn-close-checkout')?.addEventListener('click', closeCheckoutModal);
+    getEl('btn-cancel-checkout')?.addEventListener('click', closeCheckoutModal);
 
-    elements.btnConfirmCheckout?.addEventListener('click', () => {
+    getEl('btn-confirm-checkout')?.addEventListener('click', () => {
         if (!pendingCheckoutTier) return;
 
         const targetTier = pendingCheckoutTier;
@@ -314,7 +284,7 @@ function initEventListeners() {
     document.querySelectorAll('.btn-toggle-pwd').forEach((btn) => {
         btn.addEventListener('click', () => {
             const targetId = btn.getAttribute('data-target');
-            const input = document.getElementById(targetId);
+            const input = getEl(targetId);
             if (input) {
                 const isPwd = input.type === 'password';
                 input.type = isPwd ? 'text' : 'password';
@@ -324,9 +294,10 @@ function initEventListeners() {
     });
 
     // Profile Form Submission
-    elements.profileForm?.addEventListener('submit', (e) => {
+    getEl('profile-form')?.addEventListener('submit', (e) => {
         e.preventDefault();
-        const newName = elements.settingsDisplayName.value.trim();
+        const inputDisp = getEl('settings-display-name');
+        const newName = inputDisp ? inputDisp.value.trim() : '';
         if (newName && state.user) {
             state.user.name = newName;
             saveSessionToStorage();
@@ -336,7 +307,7 @@ function initEventListeners() {
         }
     });
 
-    elements.selectByokProvider?.addEventListener('change', (e) => {
+    getEl('select-byok-provider')?.addEventListener('change', (e) => {
         const provider = e.target.value;
         const defaultEndpoints = {
             nvidia: 'https://integrate.api.nvidia.com/v1',
@@ -345,18 +316,19 @@ function initEventListeners() {
             openai: 'https://api.openai.com/v1',
             custom: 'http://localhost:11434/v1',
         };
-        if (elements.inputByokEndpoint && defaultEndpoints[provider]) {
-            elements.inputByokEndpoint.value = defaultEndpoints[provider];
+        const epInput = getEl('input-byok-endpoint');
+        if (epInput && defaultEndpoints[provider]) {
+            epInput.value = defaultEndpoints[provider];
         }
     });
 
     // BYOK & Custom Proxy Form Submission
-    elements.byokForm?.addEventListener('submit', (e) => {
+    getEl('byok-form')?.addEventListener('submit', (e) => {
         e.preventDefault();
-        state.customLlmProvider = elements.selectByokProvider?.value || 'nvidia';
-        state.customBaseUrl = elements.inputByokEndpoint?.value.trim() || '';
-        state.customApiKey = elements.inputByokKey?.value.trim() || '';
-        state.byokEnabled = elements.checkboxEnableByok?.checked || false;
+        state.customLlmProvider = getEl('select-byok-provider')?.value || 'nvidia';
+        state.customBaseUrl = getEl('input-byok-endpoint')?.value.trim() || '';
+        state.customApiKey = getEl('input-byok-key')?.value.trim() || '';
+        state.byokEnabled = getEl('checkbox-enable-byok')?.checked || false;
 
         localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
         localStorage.setItem('scout_byok_provider', state.customLlmProvider);
@@ -374,7 +346,7 @@ function initEventListeners() {
         }
     });
 
-    elements.checkboxEnableByok?.addEventListener('change', (e) => {
+    getEl('checkbox-enable-byok')?.addEventListener('change', (e) => {
         state.byokEnabled = e.target.checked;
         localStorage.setItem('scout_byok_enabled', String(state.byokEnabled));
         syncAuthWithServer();
@@ -382,7 +354,7 @@ function initEventListeners() {
     });
 
     // Billing Cycle Toggle Switcher
-    elements.toggleBillingCycle?.addEventListener('change', (e) => {
+    getEl('toggle-billing-cycle')?.addEventListener('change', (e) => {
         state.billingCycle = e.target.checked ? 'annual' : 'monthly';
         renderTiersUI();
     });
@@ -409,7 +381,105 @@ function initEventListeners() {
     });
 }
 
-// Data Storage & Session Loaders
+// FAQ Accordion Handler
+function initFAQAccordions() {
+    document.querySelectorAll('.faq-question').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const item = btn.closest('.faq-item');
+            if (item) item.classList.toggle('open');
+        });
+    });
+}
+
+// Interactive Web Terminal Simulator
+function initTerminalSimulator() {
+    const form = getEl('cli-terminal-form');
+    const input = getEl('terminal-input-field');
+    const logs = getEl('terminal-logs');
+
+    if (!form || !input || !logs) return;
+
+    // Quick Command Chip Click Handlers
+    document.querySelectorAll('.btn-cli-chip').forEach((chip) => {
+        chip.addEventListener('click', () => {
+            const cmd = chip.getAttribute('data-cmd');
+            if (cmd) {
+                input.value = cmd;
+                runTerminalCommand(cmd);
+            }
+        });
+    });
+
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const cmd = input.value.trim();
+        if (cmd) {
+            runTerminalCommand(cmd);
+            input.value = '';
+        }
+    });
+
+    function runTerminalCommand(cmd) {
+        const line = document.createElement('div');
+        line.className = 'terminal-line';
+        line.innerHTML = `<span class="prompt-user">developer@scout</span>:$ <span class="cmd-text">${escapeHtml(cmd)}</span>`;
+        logs.appendChild(line);
+
+        const response = document.createElement('div');
+        response.style.margin = '4px 0 12px 0';
+
+        const lower = cmd.toLowerCase().trim();
+        if (lower === 'clear') {
+            logs.innerHTML = '';
+            return;
+        } else if (lower === 'help' || lower === 'scout help' || lower === 'scout --help' || lower === 'scout') {
+            response.innerHTML = `
+<span class="term-yellow">Available Scout Commands:</span><br>
+↳ <code>scout agent</code> - Launch autonomous AI co-pilot agent & reasoning loop<br>
+↳ <code>scout status</code> - Inspect CLI authentication, active workspace & credit balance<br>
+↳ <code>scout analyze</code> - Run instant AST codebase teardown and entry point indexing<br>
+↳ <code>scout teardown</code> - Generate strategic onboarding map & architectural moat report<br>
+↳ <code>scout byok</code> - Verify custom LLM proxy endpoint connection<br>
+↳ <code>clear</code> - Clear terminal buffer<br>
+`;
+        } else if (lower.includes('agent')) {
+            response.innerHTML = `
+<span class="term-bg-purple"> SCOUT AUTONOMOUS CO-PILOT AGENT </span><br>
+<span class="term-green">✔ Agent Orchestrator active (Gemini 2.5 Flash / Deep Reasoning Engine)</span><br>
+<span class="term-cyan">↳ Workspace Vector Memory:</span> 124 files indexed and loaded<br>
+<span class="term-yellow">↳ Pair-Programming Status:</span> Ready for interactive tasks & refactoring loops<br>
+<span class="term-dim">↳ Try typing 'scout analyze' or 'scout teardown' to execute automated codebase operations.</span><br>
+`;
+        } else if (lower.includes('status')) {
+            response.innerHTML = `
+<span class="term-green">✔ Scout CLI Engine: v7.0.8 Online</span><br>
+↳ User: <strong>${escapeHtml(state.user ? state.user.name : 'Guest Session')}</strong><br>
+↳ Active Subscription: <strong>${escapeHtml(TIER_DETAILS[state.currentTier].name)}</strong><br>
+↳ Credit Quota: <strong>${state.byokEnabled ? 'BYOK Mode (Unlimited)' : `${state.creditsUsed} / ${state.creditsTotal} Credits Used`}</strong><br>
+`;
+        } else if (lower.includes('analyze') || lower.includes('teardown')) {
+            response.innerHTML = `
+<span class="term-bg-cyan"> FRONTTERRAIN SCOUT AST ENGINE </span><br>
+<span class="term-green">✔ Indexed 124 workspace files in 42ms.</span><br>
+<span class="term-yellow">↳ Primary Entry Point:</span> src/index.ts<br>
+<span class="term-purple">↳ Core Dependencies:</span> TypeScript, Commander, Clack, Express, Firebase SDK<br>
+`;
+        } else if (lower.includes('byok')) {
+            response.innerHTML = `
+<span class="term-yellow">↳ BYOK Mode Status:</span> ${state.byokEnabled ? '<span class="term-green">ACTIVE (Scout Credits Bypassed)</span>' : '<span class="term-dim">DISABLED (Using Scout Default Key)</span>'}<br>
+↳ Provider: ${escapeHtml(state.customLlmProvider)}<br>
+↳ Endpoint: ${escapeHtml(state.customBaseUrl || 'Default Proxy')}<br>
+`;
+        } else {
+            response.innerHTML = `<span class="term-purple">scout: command not found: '${escapeHtml(cmd)}'. Type 'help' for available commands.</span>`;
+        }
+
+        logs.appendChild(response);
+        logs.scrollTop = logs.scrollHeight;
+    }
+}
+
+// Sessions Storage Loader
 function loadSessionsFromStorage() {
     try {
         const stored = localStorage.getItem('scout_cli_sessions');
@@ -440,10 +510,11 @@ function saveSessionsToStorage() {
 }
 
 function renderSessionsTable() {
-    if (!elements.sessionTableBody) return;
+    const tbody = getEl('session-table-body');
+    if (!tbody) return;
 
     if (!state.sessions || state.sessions.length === 0) {
-        elements.sessionTableBody.innerHTML = `
+        tbody.innerHTML = `
  <tr>
  <td colspan="4" class="empty-table-notice">No active CLI authorization sessions found.</td>
  </tr>
@@ -451,12 +522,12 @@ function renderSessionsTable() {
         return;
     }
 
-    elements.sessionTableBody.innerHTML = state.sessions
+    tbody.innerHTML = state.sessions
         .map((sess) => {
             return `
  <tr data-id="${escapeHtml(sess.id)}">
  <td>
- <div class="flex-center-gap">
+ <div class="flex-center-gap" style="display: flex; align-items: center; gap: 8px;">
  <i class="fa-solid fa-terminal text-primary"></i>
  <div>
  <strong>${escapeHtml(sess.host)}</strong>
@@ -482,40 +553,49 @@ function revokeSession(sessionId) {
 
 // Render Dynamic Credit Usage & BYOK Status UI
 function renderCreditUsageUI() {
+    const byokStatusBadge = getEl('byok-status-badge');
+    const creditStatusBadge = getEl('credit-status-badge');
+    const valUsed = getEl('val-credits-used');
+    const valRemaining = getEl('val-credits-remaining');
+    const valTotal = getEl('val-credits-total');
+    const valPct = getEl('val-credits-pct');
+    const progressFill = getEl('credit-progress-fill');
+    const labelConsumption = getEl('label-credit-consumption');
+    const byokNote = getEl('byok-banner-note');
+    const valRenew = getEl('val-renew-datetime');
+
     if (state.byokEnabled) {
-        if (elements.byokStatusBadge) {
-            elements.byokStatusBadge.innerText = 'BYOK Mode Active';
-            elements.byokStatusBadge.className = 'badge badge-accent';
+        if (byokStatusBadge) {
+            byokStatusBadge.innerText = 'BYOK Mode Active';
+            byokStatusBadge.className = 'badge badge-accent';
         }
-        if (elements.creditStatusBadge) {
-            elements.creditStatusBadge.innerText = 'Custom Endpoint Active';
-            elements.creditStatusBadge.className = 'badge badge-accent';
+        if (creditStatusBadge) {
+            creditStatusBadge.innerText = 'Custom Endpoint Active';
+            creditStatusBadge.className = 'badge badge-accent';
         }
-        if (elements.valCreditsUsed) elements.valCreditsUsed.innerText = 'Unmonitored';
-        if (elements.valCreditsRemaining) elements.valCreditsRemaining.innerText = 'Unlimited (BYOK)';
-        if (elements.valCreditsTotal) elements.valCreditsTotal.innerText = 'Custom Provider';
-        if (elements.valCreditsPct) elements.valCreditsPct.innerText = 'BYOK';
-
-        if (elements.creditProgressFill) {
-            elements.creditProgressFill.style.width = '100%';
-            elements.creditProgressFill.style.background = 'linear-gradient(90deg, #a855f7 0%, #ec4899 100%)';
+        if (valUsed) valUsed.innerText = 'Unmonitored';
+        if (valRemaining) valRemaining.innerText = 'Unlimited (BYOK)';
+        if (valTotal) valTotal.innerText = 'Custom Provider';
+        if (valPct) valPct.innerText = 'BYOK';
+
+        if (progressFill) {
+            progressFill.style.width = '100%';
+            progressFill.style.background = 'linear-gradient(90deg, #a855f7 0%, #ec4899 100%)';
         }
 
-        if (elements.labelCreditConsumption) {
-            elements.labelCreditConsumption.innerText = 'Direct Custom Endpoint Routing (Scout Credits Bypassed)';
+        if (labelConsumption) {
+            labelConsumption.innerText = 'Direct Custom Endpoint Routing (Scout Credits Bypassed)';
         }
 
-        if (elements.byokBannerNote) {
-            elements.byokBannerNote.classList.remove('hidden');
-        }
+        if (byokNote) byokNote.classList.remove('hidden');
     } else {
-        if (elements.byokStatusBadge) {
-            elements.byokStatusBadge.innerText = 'Scout Default';
-            elements.byokStatusBadge.className = 'badge';
+        if (byokStatusBadge) {
+            byokStatusBadge.innerText = 'Scout Default';
+            byokStatusBadge.className = 'badge';
         }
-        if (elements.creditStatusBadge) {
-            elements.creditStatusBadge.innerText = 'Quota Active';
-            elements.creditStatusBadge.className = 'badge badge-success';
+        if (creditStatusBadge) {
+            creditStatusBadge.innerText = 'Quota Active';
+            creditStatusBadge.className = 'badge badge-success';
         }
 
         const defaultTotal = state.currentTier === 'pro' ? 1000 : state.currentTier === 'enterprise' ? 10000 : 100;
@@ -524,23 +604,21 @@ function renderCreditUsageUI() {
         const remaining = Math.max(0, total - used);
         const pct = Math.min(100, Math.round((used / total) * 100));
 
-        if (elements.valCreditsUsed) elements.valCreditsUsed.innerText = used.toLocaleString();
-        if (elements.valCreditsRemaining) elements.valCreditsRemaining.innerText = remaining.toLocaleString();
-        if (elements.valCreditsTotal) elements.valCreditsTotal.innerText = total.toLocaleString();
-        if (elements.valCreditsPct) elements.valCreditsPct.innerText = `${pct}%`;
+        if (valUsed) valUsed.innerText = used.toLocaleString();
+        if (valRemaining) valRemaining.innerText = remaining.toLocaleString();
+        if (valTotal) valTotal.innerText = total.toLocaleString();
+        if (valPct) valPct.innerText = `${pct}%`;
 
-        if (elements.creditProgressFill) {
-            elements.creditProgressFill.style.width = `${pct}%`;
-            elements.creditProgressFill.style.background = 'linear-gradient(90deg, #6366f1 0%, #38bdf8 60%, #34d399 100%)';
+        if (progressFill) {
+            progressFill.style.width = `${pct}%`;
+            progressFill.style.background = 'linear-gradient(90deg, #6366f1 0%, #38bdf8 60%, #34d399 100%)';
         }
 
-        if (elements.labelCreditConsumption) {
-            elements.labelCreditConsumption.innerText = 'Monthly Credit Consumption';
+        if (labelConsumption) {
+            labelConsumption.innerText = 'Monthly Credit Consumption';
         }
 
-        if (elements.byokBannerNote) {
-            elements.byokBannerNote.classList.add('hidden');
-        }
+        if (byokNote) byokNote.classList.add('hidden');
     }
 
     let renewDateStr = '';
@@ -556,32 +634,28 @@ function renderCreditUsageUI() {
         renewDateStr = `${nextMonth.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} at 00:00:00 UTC`;
     }
 
-    if (elements.valRenewDatetime) {
-        elements.valRenewDatetime.innerText = renewDateStr;
-    }
+    if (valRenew) valRenew.innerText = renewDateStr;
 }
 
 // Render Paid Tiers UI
 function renderTiersUI() {
     const current = TIER_DETAILS[state.currentTier] || TIER_DETAILS.free;
 
-    if (elements.currentPlanTitle) elements.currentPlanTitle.innerText = current.name;
-    if (elements.currentPlanBadge) elements.currentPlanBadge.innerText = current.badge;
-    if (elements.currentPlanDesc) elements.currentPlanDesc.innerText = current.desc;
-    if (elements.tierActiveIcon) elements.tierActiveIcon.innerHTML = current.icon;
+    if (getEl('current-plan-title')) getEl('current-plan-title').innerText = current.name;
+    if (getEl('current-plan-badge')) getEl('current-plan-badge').innerText = current.badge;
+    if (getEl('current-plan-desc')) getEl('current-plan-desc').innerText = current.desc;
+    if (getEl('tier-active-icon')) getEl('tier-active-icon').innerHTML = current.icon;
 
-    // Billing Cycle Pricing Adjustments
     const isAnnual = state.billingCycle === 'annual';
-    if (elements.priceProVal) elements.priceProVal.innerText = isAnnual ? '15' : '19';
-    if (elements.priceProPeriod) elements.priceProPeriod.innerText = isAnnual ? '/ month (billed annually)' : '/ month';
+    if (getEl('price-pro-val')) getEl('price-pro-val').innerText = isAnnual ? '15' : '19';
+    if (getEl('price-pro-period')) getEl('price-pro-period').innerText = isAnnual ? '/ month (billed annually)' : '/ month';
 
-    if (elements.priceEntVal) elements.priceEntVal.innerText = isAnnual ? '39' : '49';
-    if (elements.priceEntPeriod) elements.priceEntPeriod.innerText = isAnnual ? '/ month (billed annually)' : '/ month';
+    if (getEl('price-ent-val')) getEl('price-ent-val').innerText = isAnnual ? '39' : '49';
+    if (getEl('price-ent-period')) getEl('price-ent-period').innerText = isAnnual ? '/ month (billed annually)' : '/ month';
 
-    // Highlight Active Tier Card
     ['free', 'pro', 'enterprise'].forEach((t) => {
-        const card = document.getElementById(`tier-card-${t}`);
-        const btn = document.getElementById(`btn-tier-${t}`);
+        const card = getEl(`tier-card-${t}`);
+        const btn = getEl(`btn-tier-${t}`);
         if (!card || !btn) return;
 
         if (t === state.currentTier) {
@@ -635,10 +709,6 @@ async function checkServerStatusAndSession() {
     if (connected && data) {
         state.serverConnected = true;
 
-        if (elements.navTenantName) {
-            elements.navTenantName.innerText = `CLI Local Sync Active (${data.repoName || 'Workspace'})`;
-        }
-
         if (data.isLoggedIn && data.auth?.user) {
             state.user = data.auth.user;
             state.token = data.auth.token;
@@ -653,19 +723,6 @@ async function checkServerStatusAndSession() {
             if (typeof data.auth.customApiKey === 'string') state.customApiKey = data.auth.customApiKey;
             if (typeof data.auth.customBaseUrl === 'string') state.customBaseUrl = data.auth.customBaseUrl;
 
-            const localCliSession = {
-                id: 'sess_cli_local',
-                host: `Local Workstation (${data.repoName || 'FT-CLI'})`,
-                platform: `Node.js CLI (~/.ft/auth.json)`,
-                lastActive: data.auth.loggedInAt || new Date().toISOString(),
-                ip: '127.0.2.1 (Local Sync)',
-                active: true,
-            };
-
-            const otherSessions = state.sessions.filter(s => s.id !== 'sess_cli_local');
-            state.sessions = [localCliSession, ...otherSessions];
-            saveSessionsToStorage();
-
             saveSessionToStorage();
             showDashboard();
             updateUserUI();
@@ -676,10 +733,6 @@ async function checkServerStatusAndSession() {
     }
 
     state.serverConnected = false;
-    if (elements.navTenantName) {
-        elements.navTenantName.innerText = FIREBASE_CONFIG.tenantId;
-    }
-
     checkLocalStorageSession();
 }
 
@@ -707,27 +760,31 @@ function checkLocalStorageSession() {
 // Switch Auth View Forms
 function switchAuthForm(mode) {
     if (mode === 'login') {
-        elements.tabLoginBtn?.classList.add('active');
-        elements.tabSignupBtn?.classList.remove('active');
-        elements.loginForm?.classList.remove('hidden');
-        elements.signupForm?.classList.add('hidden');
+        getEl('tab-login-btn')?.classList.add('active');
+        getEl('tab-signup-btn')?.classList.remove('active');
+        getEl('login-form')?.classList.remove('hidden');
+        getEl('signup-form')?.classList.add('hidden');
     } else {
-        elements.tabSignupBtn?.classList.add('active');
-        elements.tabLoginBtn?.classList.remove('active');
-        elements.signupForm?.classList.remove('hidden');
-        elements.loginForm?.classList.add('hidden');
+        getEl('tab-signup-btn')?.classList.add('active');
+        getEl('tab-login-btn')?.classList.remove('active');
+        getEl('signup-form')?.classList.remove('hidden');
+        getEl('login-form')?.classList.add('hidden');
     }
 }
 
 // Handle Sign In Submission
 async function handleSignIn(e) {
     e.preventDefault();
-    const email = document.getElementById('login-email').value.trim();
-    const password = document.getElementById('login-password').value;
-    const btnSubmit = document.getElementById('btn-submit-login');
+    const email = getEl('login-email')?.value.trim();
+    const password = getEl('login-password')?.value;
+    const btnSubmit = getEl('btn-submit-login');
 
-    btnSubmit.disabled = true;
-    btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Authenticating...';
+    if (!email || !password) return;
+
+    if (btnSubmit) {
+        btnSubmit.disabled = true;
+        btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Authenticating...';
+    }
 
     try {
         let authRes;
@@ -757,33 +814,42 @@ async function handleSignIn(e) {
 
         saveSessionToStorage();
         syncAuthWithServer();
-        showDashboard();
         updateUserUI();
         showToast(`Signed in successfully as ${state.user.name}!`, 'success');
+
+        if (getCurrentPage() === '/auth') {
+            setTimeout(() => { window.location.href = 'index.html'; }, 400);
+        } else {
+            showDashboard();
+        }
     } catch (error) {
         showToast(error.message || 'Login failed.', 'error');
     } finally {
-        btnSubmit.disabled = false;
-        btnSubmit.innerHTML = '<span>Sign In to Scout</span><i class="fa-solid fa-arrow-right"></i>';
+        if (btnSubmit) {
+            btnSubmit.disabled = false;
+            btnSubmit.innerHTML = '<span>Sign In to Scout</span><i class="fa-solid fa-arrow-right"></i>';
+        }
     }
 }
 
 // Handle Sign Up Submission
 async function handleSignUp(e) {
     e.preventDefault();
-    const name = document.getElementById('signup-name').value.trim();
-    const email = document.getElementById('signup-email').value.trim();
-    const password = document.getElementById('signup-password').value;
-    const confirmPassword = document.getElementById('signup-confirm-password').value;
-    const btnSubmit = document.getElementById('btn-submit-signup');
+    const name = getEl('signup-name')?.value.trim();
+    const email = getEl('signup-email')?.value.trim();
+    const password = getEl('signup-password')?.value;
+    const confirmPassword = getEl('signup-confirm-password')?.value;
+    const btnSubmit = getEl('btn-submit-signup');
 
     if (password !== confirmPassword) {
         showToast('Passwords do not match.', 'error');
         return;
     }
 
-    btnSubmit.disabled = true;
-    btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Creating Account...';
+    if (btnSubmit) {
+        btnSubmit.disabled = true;
+        btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Creating Account...';
+    }
 
     try {
         let authRes;
@@ -813,18 +879,24 @@ async function handleSignUp(e) {
 
         saveSessionToStorage();
         syncAuthWithServer();
-        showDashboard();
         updateUserUI();
         showToast(`Account created! Welcome to FrontTerrain, ${name}.`, 'success');
+
+        if (getCurrentPage() === '/auth') {
+            setTimeout(() => { window.location.href = 'index.html'; }, 400);
+        } else {
+            showDashboard();
+        }
     } catch (error) {
         showToast(error.message || 'Registration failed.', 'error');
     } finally {
-        btnSubmit.disabled = false;
-        btnSubmit.innerHTML = '<span>Create Scout Account</span><i class="fa-solid fa-user-check"></i>';
+        if (btnSubmit) {
+            btnSubmit.disabled = false;
+            btnSubmit.innerHTML = '<span>Create Scout Account</span><i class="fa-solid fa-user-check"></i>';
+        }
     }
 }
 
-// Forgot Password Flow
 function handleForgotPassword() {
     const email = prompt('Enter your registered email address for password reset:');
     if (email && email.includes('@')) {
@@ -834,7 +906,7 @@ function handleForgotPassword() {
     }
 }
 
-// Demo Mode Session Launcher
+// Demo Session Launcher
 function launchDemoSession() {
     state.token = 'ft_demo_token_' + Date.now().toString(36);
     state.user = {
@@ -846,9 +918,14 @@ function launchDemoSession() {
 
     saveSessionToStorage();
     syncAuthWithServer();
-    showDashboard();
     updateUserUI();
     showToast('Demo Developer Session Active!', 'info');
+
+    if (getCurrentPage() === '/auth') {
+        setTimeout(() => { window.location.href = 'index.html'; }, 300);
+    } else {
+        showDashboard();
+    }
 }
 
 // Firebase Direct REST API
@@ -920,64 +997,65 @@ function parseFirebaseError(errData, defaultMsg) {
 
 // UI State Renderers
 function showAuthSection() {
-    elements.authSection?.classList.remove('hidden');
-    elements.dashboardSection?.classList.add('hidden');
-    elements.userMenu?.classList.add('hidden');
-    elements.btnOpenAuth?.classList.remove('hidden');
+    const authSec = getEl('auth-section');
+    const dashSec = getEl('dashboard-section');
+    const userMenu = getEl('user-menu');
+    const btnOpenAuth = getEl('btn-open-auth');
+
+    if (authSec) authSec.classList.remove('hidden');
+    if (dashSec) dashSec.classList.add('hidden');
+    if (userMenu) userMenu.classList.add('hidden');
+    if (btnOpenAuth) btnOpenAuth.classList.remove('hidden');
 }
 
 function showDashboard() {
-    elements.authSection?.classList.add('hidden');
-    elements.dashboardSection?.classList.remove('hidden');
-    elements.userMenu?.classList.remove('hidden');
-    elements.btnOpenAuth?.classList.add('hidden');
+    const authSec = getEl('auth-section');
+    const dashSec = getEl('dashboard-section');
+    const userMenu = getEl('user-menu');
+    const btnOpenAuth = getEl('btn-open-auth');
+
+    if (authSec) authSec.classList.add('hidden');
+    if (dashSec) dashSec.classList.remove('hidden');
+    if (userMenu) userMenu.classList.remove('hidden');
+    if (btnOpenAuth) btnOpenAuth.classList.add('hidden');
 
     renderAllDynamicComponents();
 }
 
 function updateUserUI() {
-    if (!state.user) return;
+    if (!state.user) {
+        const userMenu = getEl('user-menu');
+        const btnOpenAuth = getEl('btn-open-auth');
+        if (userMenu) userMenu.classList.add('hidden');
+        if (btnOpenAuth) btnOpenAuth.classList.remove('hidden');
+        return;
+    }
+
+    const userMenu = getEl('user-menu');
+    const btnOpenAuth = getEl('btn-open-auth');
+    if (userMenu) userMenu.classList.remove('hidden');
+    if (btnOpenAuth) btnOpenAuth.classList.add('hidden');
 
     const name = state.user.name || 'Developer';
     const initial = name.charAt(0).toUpperCase();
 
-    if (elements.navAvatar) elements.navAvatar.innerText = initial;
-    if (elements.navUserName) elements.navUserName.innerText = name;
-    if (elements.userDisplayName) elements.userDisplayName.innerText = name;
-    if (elements.dropdownName) elements.dropdownName.innerText = name;
-    if (elements.dropdownEmail) elements.dropdownEmail.innerText = state.user.email;
+    if (getEl('nav-avatar')) getEl('nav-avatar').innerText = initial;
+    if (getEl('nav-user-name')) getEl('nav-user-name').innerText = name;
+    if (getEl('user-display-name')) getEl('user-display-name').innerText = name;
+    if (getEl('dropdown-name')) getEl('dropdown-name').innerText = name;
+    if (getEl('dropdown-email')) getEl('dropdown-email').innerText = state.user.email;
 
-    if (elements.settingsDisplayName) elements.settingsDisplayName.value = name;
-    if (elements.settingsEmail) elements.settingsEmail.value = state.user.email;
-    if (elements.settingsUid) elements.settingsUid.value = state.user.id;
+    if (getEl('settings-display-name')) getEl('settings-display-name').value = name;
+    if (getEl('settings-email')) getEl('settings-email').value = state.user.email;
+    if (getEl('settings-uid')) getEl('settings-uid').value = state.user.id;
 
     const tierInfo = TIER_DETAILS[state.currentTier] || TIER_DETAILS.free;
-    if (elements.settingsActiveTier) elements.settingsActiveTier.value = tierInfo.name;
-
-    if (elements.selectByokProvider) elements.selectByokProvider.value = state.customLlmProvider || 'nvidia';
-    if (elements.inputByokEndpoint) elements.inputByokEndpoint.value = state.customBaseUrl || '';
-    if (elements.inputByokKey) elements.inputByokKey.value = state.customApiKey || '';
-    if (elements.checkboxEnableByok) elements.checkboxEnableByok.checked = Boolean(state.byokEnabled);
-}
+    if (getEl('settings-active-tier')) getEl('settings-active-tier').value = tierInfo.name;
 
-function switchDashboardTab(tabId) {
-    state.activeTab = tabId;
-
-    document.querySelectorAll('.nav-btn').forEach((btn) => {
-        if (btn.getAttribute('data-tab') === tabId) {
-            btn.classList.add('active');
-        } else {
-            btn.classList.remove('active');
-        }
-    });
-
-    document.querySelectorAll('.tab-pane').forEach((pane) => {
-        if (pane.id === `tab-${tabId}`) {
-            pane.classList.add('active');
-        } else {
-            pane.classList.remove('active');
-        }
-    });
+    if (getEl('select-byok-provider')) getEl('select-byok-provider').value = state.customLlmProvider || 'nvidia';
+    if (getEl('input-byok-endpoint')) getEl('input-byok-endpoint').value = state.customBaseUrl || '';
+    if (getEl('input-byok-key')) getEl('input-byok-key').value = state.customApiKey || '';
+    if (getEl('checkbox-enable-byok')) getEl('checkbox-enable-byok').checked = Boolean(state.byokEnabled);
 }
 
 async function handleLogout() {
@@ -995,8 +1073,8 @@ async function handleLogout() {
     localStorage.removeItem('scout_auth_token');
     localStorage.removeItem('scout_refresh_token');
 
-    showAuthSection();
     showToast('Signed out of Scout session.', 'info');
+    window.location.href = '/auth';
 }
 
 function saveSessionToStorage() {
@@ -1039,23 +1117,24 @@ async function syncAuthWithServer() {
 
 // Copy Utility
 function copyText(text, successMsg = 'Copied to clipboard!') {
-  navigator.clipboard.writeText(text).then(
-    () => showToast(successMsg, 'success'),
-    () => showToast('Failed to copy to clipboard', 'error')
-  );
+    navigator.clipboard.writeText(text).then(
+        () => showToast(successMsg, 'success'),
+        () => showToast('Failed to copy to clipboard', 'error')
+    );
 }
 
 document.addEventListener('click', (e) => {
-  const copyBtn = e.target.closest('#btn-copy-terminal-cmd');
-  if (copyBtn) {
-    const cmdText = document.getElementById('terminal-cmd-display')?.innerText || 'npx -y ft-scout@latest';
-    copyText(cmdText, 'CLI Command copied to clipboard!');
-  }
+    const copyBtn = e.target.closest('#btn-copy-terminal-cmd');
+    if (copyBtn) {
+        const cmdText = getEl('terminal-cmd-display')?.innerText || 'npx -y ft-scout@latest';
+        copyText(cmdText, 'CLI Command copied to clipboard!');
+    }
 });
 
 // Toast System
 function showToast(message, type = 'info') {
-    if (!elements.toastContainer) return;
+    const container = getEl('toast-container');
+    if (!container) return;
 
     const toast = document.createElement('div');
     toast.className = `toast toast-${type}`;
@@ -1064,8 +1143,8 @@ function showToast(message, type = 'info') {
     if (type === 'success') iconClass = 'fa-circle-check';
     if (type === 'error') iconClass = 'fa-circle-exclamation';
 
-    toast.innerHTML = `<i class="fa-solid ${iconClass}"></i> <span>${message}</span>`;
-    elements.toastContainer.appendChild(toast);
+    toast.innerHTML = `<i class="fa-solid ${iconClass}"></i> <span>${escapeHtml(message)}</span>`;
+    container.appendChild(toast);
 
     setTimeout(() => {
         toast.style.opacity = '0';
@@ -1083,3 +1162,382 @@ function escapeHtml(str) {
         .replace(/>/g, '&gt;')
         .replace(/"/g, '&quot;');
 }
+
+/* ==========================================================================
+   Interactive 60 FPS Pacman Retro Arcade Game Loop Engine
+   ========================================================================== */
+function initPacmanGame() {
+    const canvas = getEl('pacman-canvas');
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    const overlay = getEl('arcade-overlay');
+    const overlayTitle = getEl('overlay-title');
+    const overlaySubtitle = getEl('overlay-subtitle');
+    const btnAction = getEl('btn-arcade-action');
+    const scoreValEl = getEl('pacman-score');
+    const highScoreValEl = getEl('pacman-highscore');
+
+    let gameLoopId = null;
+    let score = 0;
+    let highScore = parseInt(localStorage.getItem('scout_pacman_highscore') || '12400', 10);
+    let level = 1;
+    let lives = 3;
+    let gameState = 'STOPPED'; // STOPPED, PLAYING, PAUSED, GAMEOVER
+    let crtEnabled = true;
+    let soundEnabled = true;
+
+    if (highScoreValEl) highScoreValEl.innerText = String(highScore).padStart(5, '0');
+
+    // Classic Grid Map (1: wall, 0: pellet, 2: power pellet, 3: empty)
+    const originalGrid = [
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+        [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
+        [1, 2, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 2, 1],
+        [1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1],
+        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
+        [1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1],
+        [1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+        [1, 1, 1, 1, 0, 1, 1, 1, 3, 1, 3, 1, 1, 1, 0, 1, 1, 1, 1],
+        [3, 3, 3, 1, 0, 1, 3, 3, 3, 3, 3, 3, 3, 1, 0, 1, 3, 3, 3],
+        [1, 1, 1, 1, 0, 1, 3, 1, 1, 3, 1, 1, 3, 1, 0, 1, 1, 1, 1],
+        [3, 3, 3, 3, 0, 3, 3, 1, 3, 3, 3, 1, 3, 3, 0, 3, 3, 3, 3],
+        [1, 1, 1, 1, 0, 1, 3, 1, 1, 1, 1, 1, 3, 1, 0, 1, 1, 1, 1],
+        [3, 3, 3, 1, 0, 1, 3, 3, 3, 3, 3, 3, 3, 1, 0, 1, 3, 3, 3],
+        [1, 1, 1, 1, 0, 1, 3, 1, 1, 1, 1, 1, 3, 1, 0, 1, 1, 1, 1],
+        [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
+        [1, 2, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 2, 1],
+        [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],
+        [1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1],
+        [1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+    ];
+
+    let grid = JSON.parse(JSON.stringify(originalGrid));
+    const tileSize = 22;
+    const offsetX = (canvas.width - 19 * tileSize) / 2;
+    const offsetY = (canvas.height - 20 * tileSize) / 2;
+
+    const pacman = {
+        x: 9,
+        y: 14,
+        px: 9 * tileSize + tileSize / 2,
+        py: 14 * tileSize + tileSize / 2,
+        dirX: 0,
+        dirY: 0,
+        nextDirX: 0,
+        nextDirY: 0,
+        speed: 2,
+        mouthAngle: 0.2,
+        mouthSpeed: 0.03,
+    };
+
+    const ghosts = [
+        { name: 'Blinky', color: '#ef4444', x: 9, y: 9, px: 9 * tileSize + tileSize / 2, py: 9 * tileSize + tileSize / 2, dirX: 1, dirY: 0, scared: 0 },
+        { name: 'Pinky', color: '#ec4899', x: 9, y: 10, px: 9 * tileSize + tileSize / 2, py: 10 * tileSize + tileSize / 2, dirX: -1, dirY: 0, scared: 0 },
+        { name: 'Inky', color: '#38bdf8', x: 8, y: 10, px: 8 * tileSize + tileSize / 2, py: 10 * tileSize + tileSize / 2, dirX: 0, dirY: -1, scared: 0 },
+        { name: 'Clyde', color: '#fbbf24', x: 10, y: 10, px: 10 * tileSize + tileSize / 2, py: 10 * tileSize + tileSize / 2, dirX: 0, dirY: 1, scared: 0 },
+    ];
+
+    function resetPositions() {
+        pacman.x = 9;
+        pacman.y = 14;
+        pacman.px = 9 * tileSize + tileSize / 2;
+        pacman.py = 14 * tileSize + tileSize / 2;
+        pacman.dirX = 0;
+        pacman.dirY = 0;
+        pacman.nextDirX = 0;
+        pacman.nextDirY = 0;
+
+        ghosts[0].px = 9 * tileSize + tileSize / 2; ghosts[0].py = 8 * tileSize + tileSize / 2; ghosts[0].dirX = 1; ghosts[0].dirY = 0; ghosts[0].scared = 0;
+        ghosts[1].px = 9 * tileSize + tileSize / 2; ghosts[1].py = 10 * tileSize + tileSize / 2; ghosts[1].dirX = -1; ghosts[1].dirY = 0; ghosts[1].scared = 0;
+        ghosts[2].px = 8 * tileSize + tileSize / 2; ghosts[2].py = 10 * tileSize + tileSize / 2; ghosts[2].dirX = 0; ghosts[2].dirY = -1; ghosts[2].scared = 0;
+        ghosts[3].px = 10 * tileSize + tileSize / 2; ghosts[3].py = 10 * tileSize + tileSize / 2; ghosts[3].dirX = 0; ghosts[3].dirY = 1; ghosts[3].scared = 0;
+    }
+
+    function startGame() {
+        score = 0;
+        lives = 3;
+        level = 1;
+        grid = JSON.parse(JSON.stringify(originalGrid));
+        resetPositions();
+        gameState = 'PLAYING';
+        if (overlay) overlay.classList.add('hidden');
+        if (scoreValEl) scoreValEl.innerText = '00000';
+        updateLivesUI();
+        if (!gameLoopId) loop();
+    }
+
+    function togglePause() {
+        if (gameState === 'PLAYING') {
+            gameState = 'PAUSED';
+            if (overlayTitle) overlayTitle.innerText = 'PAUSED';
+            if (overlaySubtitle) overlaySubtitle.innerText = 'Press SPACE to Resume';
+            if (btnAction) btnAction.innerHTML = '<i class="fa-solid fa-play"></i> RESUME';
+            if (overlay) overlay.classList.remove('hidden');
+        } else if (gameState === 'PAUSED') {
+            gameState = 'PLAYING';
+            if (overlay) overlay.classList.add('hidden');
+        }
+    }
+
+    function updateLivesUI() {
+        const livesEl = getEl('pacman-lives');
+        if (livesEl) {
+            livesEl.innerHTML = Array(Math.max(0, lives)).fill('<span class="life-pacman">🟡</span>').join('');
+        }
+    }
+
+    function canMoveTo(gx, gy) {
+        if (gy < 0 || gy >= grid.length || gx < 0 || gx >= grid[0].length) return false;
+        return grid[gy][gx] !== 1;
+    }
+
+    function update() {
+        if (gameState !== 'PLAYING') return;
+
+        // Pacman mouth animation
+        pacman.mouthAngle += pacman.mouthSpeed;
+        if (pacman.mouthAngle > 0.4 || pacman.mouthAngle < 0.05) pacman.mouthSpeed = -pacman.mouthSpeed;
+
+        const currentTileX = Math.floor(pacman.px / tileSize);
+        const currentTileY = Math.floor(pacman.py / tileSize);
+        const centerX = currentTileX * tileSize + tileSize / 2;
+        const centerY = currentTileY * tileSize + tileSize / 2;
+
+        if (Math.abs(pacman.px - centerX) < pacman.speed && Math.abs(pacman.py - centerY) < pacman.speed) {
+            pacman.px = centerX;
+            pacman.py = centerY;
+
+            if (pacman.nextDirX !== 0 || pacman.nextDirY !== 0) {
+                if (canMoveTo(currentTileX + pacman.nextDirX, currentTileY + pacman.nextDirY)) {
+                    pacman.dirX = pacman.nextDirX;
+                    pacman.dirY = pacman.nextDirY;
+                }
+            }
+
+            if (!canMoveTo(currentTileX + pacman.dirX, currentTileY + pacman.dirY)) {
+                pacman.dirX = 0;
+                pacman.dirY = 0;
+            }
+
+            // Eat Pellets
+            if (grid[currentTileY] && grid[currentTileY][currentTileX] === 0) {
+                grid[currentTileY][currentTileX] = 3;
+                score += 10;
+                if (soundEnabled) playRetroBeep(580, 0.04, 'triangle');
+            } else if (grid[currentTileY] && grid[currentTileY][currentTileX] === 2) {
+                grid[currentTileY][currentTileX] = 3;
+                score += 50;
+                ghosts.forEach(g => g.scared = 300);
+                if (soundEnabled) playRetroBeep(880, 0.12, 'sawtooth');
+            }
+
+            if (score > highScore) {
+                highScore = score;
+                localStorage.setItem('scout_pacman_highscore', String(highScore));
+                if (highScoreValEl) highScoreValEl.innerText = String(highScore).padStart(5, '0');
+            }
+
+            if (scoreValEl) scoreValEl.innerText = String(score).padStart(5, '0');
+        }
+
+        pacman.px += pacman.dirX * pacman.speed;
+        pacman.py += pacman.dirY * pacman.speed;
+
+        // Ghosts move
+        ghosts.forEach((g) => {
+            if (g.scared > 0) g.scared--;
+            const gSpeed = g.scared > 0 ? 1 : 2;
+
+            const gtx = Math.floor(g.px / tileSize);
+            const gty = Math.floor(g.py / tileSize);
+            const gcx = gtx * tileSize + tileSize / 2;
+            const gcy = gty * tileSize + tileSize / 2;
+
+            if (Math.abs(g.px - gcx) < gSpeed && Math.abs(g.py - gcy) < gSpeed) {
+                g.px = gcx;
+                g.py = gcy;
+
+                const allDirs = [
+                    { x: 1, y: 0 }, { x: -1, y: 0 }, { x: 0, y: 1 }, { x: 0, y: -1 }
+                ];
+                let validDirs = allDirs.filter(d =>
+                    (d.x !== -g.dirX || d.y !== -g.dirY) && canMoveTo(gtx + d.x, gty + d.y)
+                );
+                if (validDirs.length === 0) {
+                    validDirs = allDirs.filter(d => canMoveTo(gtx + d.x, gty + d.y));
+                }
+
+                if (validDirs.length > 0) {
+                    const chosen = validDirs[Math.floor(Math.random() * validDirs.length)];
+                    g.dirX = chosen.x;
+                    g.dirY = chosen.y;
+                }
+            }
+
+            g.px += g.dirX * gSpeed;
+            g.py += g.dirY * gSpeed;
+
+            // Collision with Pacman
+            const dist = Math.hypot(pacman.px - g.px, pacman.py - g.py);
+            if (dist < tileSize * 0.85) {
+                if (g.scared > 0) {
+                    score += 200;
+                    g.px = 9 * tileSize + tileSize / 2;
+                    g.py = 8 * tileSize + tileSize / 2;
+                    g.scared = 0;
+                    if (soundEnabled) playRetroBeep(1200, 0.15, 'sine');
+                } else {
+                    lives--;
+                    updateLivesUI();
+                    if (soundEnabled) playRetroBeep(220, 0.3, 'sawtooth');
+                    if (lives <= 0) {
+                        gameState = 'GAMEOVER';
+                        if (overlayTitle) overlayTitle.innerText = 'GAME OVER';
+                        if (overlaySubtitle) overlaySubtitle.innerText = `Final Score: ${score}`;
+                        if (btnAction) btnAction.innerHTML = '<i class="fa-solid fa-rotate-right"></i> PLAY AGAIN';
+                        if (overlay) overlay.classList.remove('hidden');
+                    } else {
+                        resetPositions();
+                    }
+                }
+            }
+        });
+    }
+
+    function render() {
+        ctx.fillStyle = '#08090c';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        ctx.save();
+        ctx.translate(offsetX, offsetY);
+
+        // Draw Map Grid
+        for (let r = 0; r < grid.length; r++) {
+            for (let c = 0; c < grid[r].length; c++) {
+                const tile = grid[r][c];
+                const x = c * tileSize;
+                const y = r * tileSize;
+
+                if (tile === 1) {
+                    ctx.fillStyle = '#1c202d';
+                    ctx.strokeStyle = '#38bdf8';
+                    ctx.lineWidth = 1.5;
+                    ctx.fillRect(x, y, tileSize, tileSize);
+                    ctx.strokeRect(x + 2, y + 2, tileSize - 4, tileSize - 4);
+                } else if (tile === 0) {
+                    ctx.fillStyle = '#fbbf24';
+                    ctx.beginPath();
+                    ctx.arc(x + tileSize / 2, y + tileSize / 2, 3, 0, Math.PI * 2);
+                    ctx.fill();
+                } else if (tile === 2) {
+                    ctx.fillStyle = '#f8fafc';
+                    ctx.beginPath();
+                    ctx.arc(x + tileSize / 2, y + tileSize / 2, 7, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+        }
+
+        // Draw Pacman
+        let startAngle = pacman.mouthAngle;
+        let endAngle = Math.PI * 2 - pacman.mouthAngle;
+        if (pacman.dirX === -1) { startAngle += Math.PI; endAngle += Math.PI; }
+        if (pacman.dirY === 1) { startAngle += Math.PI / 2; endAngle += Math.PI / 2; }
+        if (pacman.dirY === -1) { startAngle -= Math.PI / 2; endAngle -= Math.PI / 2; }
+
+        ctx.fillStyle = '#facc15';
+        ctx.beginPath();
+        ctx.arc(pacman.px, pacman.py, tileSize / 2 - 2, startAngle, endAngle);
+        ctx.lineTo(pacman.px, pacman.py);
+        ctx.fill();
+
+        // Draw Ghosts
+        ghosts.forEach((g) => {
+            ctx.fillStyle = g.scared > 0 ? '#3b82f6' : g.color;
+            ctx.beginPath();
+            ctx.arc(g.px, g.py, tileSize / 2 - 2, Math.PI, 0, false);
+            ctx.lineTo(g.px + tileSize / 2 - 2, g.py + tileSize / 2 - 2);
+            ctx.lineTo(g.px - tileSize / 2 + 2, g.py + tileSize / 2 - 2);
+            ctx.fill();
+
+            // Eyes
+            ctx.fillStyle = '#ffffff';
+            ctx.beginPath();
+            ctx.arc(g.px - 3, g.py - 3, 3, 0, Math.PI * 2);
+            ctx.arc(g.px + 3, g.py - 3, 3, 0, Math.PI * 2);
+            ctx.fill();
+
+            ctx.fillStyle = '#1e1b4b';
+            ctx.beginPath();
+            ctx.arc(g.px - 3 + g.dirX * 1.5, g.py - 3 + g.dirY * 1.5, 1.5, 0, Math.PI * 2);
+            ctx.arc(g.px + 3 + g.dirX * 1.5, g.py - 3 + g.dirY * 1.5, 1.5, 0, Math.PI * 2);
+            ctx.fill();
+        });
+
+        ctx.restore();
+    }
+
+    function loop() {
+        update();
+        render();
+        gameLoopId = requestAnimationFrame(loop);
+    }
+
+    // Input Listeners
+    window.addEventListener('keydown', (e) => {
+        const active = document.activeElement;
+        if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.tagName === 'SELECT' || active.isContentEditable)) {
+            return;
+        }
+
+        if (['ArrowUp', 'KeyW'].includes(e.code)) { pacman.nextDirX = 0; pacman.nextDirY = -1; }
+        if (['ArrowDown', 'KeyS'].includes(e.code)) { pacman.nextDirX = 0; pacman.nextDirY = 1; }
+        if (['ArrowLeft', 'KeyA'].includes(e.code)) { pacman.nextDirX = -1; pacman.nextDirY = 0; }
+        if (['ArrowRight', 'KeyD'].includes(e.code)) { pacman.nextDirX = 1; pacman.nextDirY = 0; }
+        if (e.code === 'Space') {
+            e.preventDefault();
+            if (gameState === 'STOPPED' || gameState === 'GAMEOVER') startGame();
+            else togglePause();
+        }
+    });
+
+    btnAction?.addEventListener('click', startGame);
+    getEl('btn-pacman-pause')?.addEventListener('click', togglePause);
+    getEl('btn-pacman-restart')?.addEventListener('click', startGame);
+
+    const handleDir = (dx, dy) => (e) => {
+        if (e.type === 'touchstart') e.preventDefault();
+        pacman.nextDirX = dx;
+        pacman.nextDirY = dy;
+    };
+
+    ['click', 'pointerdown', 'touchstart'].forEach((evt) => {
+        getEl('dpad-up')?.addEventListener(evt, handleDir(0, -1));
+        getEl('dpad-down')?.addEventListener(evt, handleDir(0, 1));
+        getEl('dpad-left')?.addEventListener(evt, handleDir(-1, 0));
+        getEl('dpad-right')?.addEventListener(evt, handleDir(1, 0));
+    });
+
+    getEl('btn-toggle-crt')?.addEventListener('click', () => {
+        const screen = getEl('arcade-screen');
+        if (screen) {
+            crtEnabled = !crtEnabled;
+            screen.classList.toggle('crt-active', crtEnabled);
+            showToast(`CRT Filter ${crtEnabled ? 'ENABLED' : 'DISABLED'}`, 'info');
+        }
+    });
+
+    getEl('btn-toggle-sound')?.addEventListener('click', () => {
+        soundEnabled = !soundEnabled;
+        const btn = getEl('btn-toggle-sound');
+        if (btn) {
+            btn.innerHTML = soundEnabled
+                ? '<i class="fa-solid fa-volume-high text-success"></i> Sound ON'
+                : '<i class="fa-solid fa-volume-xmark text-danger"></i> Sound OFF';
+        }
+    });
+
+    render();
+}