neuronalstar

Running

App Files Files Community

salomonsky commited on Jan 1

Commit

9b73acc

verified ·

1 Parent(s): b665289

Update index.html

Browse files

Files changed (1) hide show

index.html +717 -1112

index.html CHANGED Viewed

@@ -1,78 +1,88 @@
 <!DOCTYPE html>
 <html lang="es">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>NEXUS: Ludificación Semántica</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
   <style>
-    body {
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-        background-color: #020205;
-        user-select: none;
     }
-    body::-webkit-scrollbar { display: none; }
     .glass-panel {
-        background: rgba(10, 15, 30, 0.75);
-        backdrop-filter: blur(16px);
-        -webkit-backdrop-filter: blur(16px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
     }
     @keyframes shimmer {
-        0% { transform: translateX(-100%); }
-        100% { transform: translateX(100%); }
     }
     .animate-shimmer {
-        animation: shimmer 2s infinite;
     }
     .custom-scrollbar::-webkit-scrollbar { width: 4px; }
     .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
     .custom-scrollbar::-webkit-scrollbar-thumb { background: #22d3ee; border-radius: 4px; }
     @keyframes glitch-anim {
-        0% { transform: translate(0); }
-        20% { transform: translate(-2px, 2px); }
-        40% { transform: translate(-2px, -2px); }
-        60% { transform: translate(2px, 2px); }
-        80% { transform: translate(2px, -2px); }
-        100% { transform: translate(0); }
     }
     .glitch-active {
-        animation: glitch-anim 0.2s cubic-bezier(.25, .46, .45, .94) both infinite;
-        filter: hue-rotate(90deg) contrast(1.5);
     }
     .golden-node {
-        box-shadow: 0 0 15px #ffd700;
-        border: 1px solid #ffd700;
     }
   </style>
 </head>
 <body class="m-0 overflow-hidden font-[Orbitron] text-slate-200">
   <div id="glitchOverlay" class="fixed inset-0 pointer-events-none z-[99999] hidden mix-blend-overlay bg-red-900/20"></div>
   <div id="loginOverlay" class="fixed inset-0 bg-black/95 z-[9999] flex items-center justify-center transition-opacity duration-700 opacity-100">
     <div id="loginModal" class="glass-panel p-8 rounded-2xl w-full max-w-md text-white relative overflow-hidden border-t border-cyan-500/30">
-        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-70"></div>
       <div id="authStep1">
         <h2 class="text-4xl font-bold text-center mb-2 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 drop-shadow-[0_0_15px_rgba(34,211,238,0.5)]">NEXUS</h2>
         <p class="text-cyan-500/60 text-center mb-8 text-[10px] tracking-[0.3em] uppercase">Visualizador Semántico Neural v2.5</p>
         <button id="btnGoToAnon" class="w-full bg-white/5 hover:bg-white/10 text-cyan-300 border border-cyan-500/20 font-bold py-4 px-4 rounded-lg transition-all flex items-center justify-center gap-3 mb-6 group hover:shadow-[0_0_15px_rgba(34,211,238,0.2)]">
-          <svg class="w-5 h-5 group-hover:scale-110 transition-transform text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
           Entrar como Anónimo
         </button>
         <div class="relative flex py-2 items-center mb-4">
           <div class="flex-grow border-t border-white/10"></div>
           <span class="flex-shrink-0 mx-4 text-gray-500 text-[10px] uppercase tracking-wider">Credenciales de Acceso</span>
           <div class="flex-grow border-t border-white/10"></div>
         </div>
         <form id="emailAuthForm" class="space-y-4">
           <div class="relative group">
             <input type="email" id="loginEmail" class="w-full p-3 pl-4 rounded-lg bg-black/50 border border-white/10 text-white placeholder-gray-600 focus:border-cyan-500 focus:outline-none text-sm transition-all focus:bg-black/70" placeholder="ID de Usuario (Email)">
@@ -80,15 +90,17 @@
           </div>
           <div class="relative group">
             <input type="password" id="loginPassword" class="w-full p-3 pl-4 rounded-lg bg-black/50 border border-white/10 text-white placeholder-gray-600 focus:border-cyan-500 focus:outline-none text-sm transition-all focus:bg-black/70" placeholder="Clave de Acceso">
-             <div class="absolute inset-0 border border-cyan-500/0 rounded-lg group-hover:border-cyan-500/20 pointer-events-none transition-colors"></div>
           </div>
           <div class="flex gap-3 pt-2">
-            <button type="button" id="loginButton" class="flex-1 bg-blue-600/10 hover:bg-blue-600/30 text-blue-400 py-2 rounded border border-blue-500/30 text-xs font-bold transition-all uppercase tracking-wider hover:shadow-[0_0_10px_rgba(59,130,246,0.3)]">Entrar</button>
-            <button type="button" id="registerButton" class="flex-1 bg-green-600/10 hover:bg-green-600/30 text-green-400 py-2 rounded border border-green-500/30 text-xs font-bold transition-all uppercase tracking-wider hover:shadow-[0_0_10px_rgba(74,222,128,0.3)]">Registrar</button>
           </div>
         </form>
         <p id="loginMessage" class="text-center text-xs mt-4 min-h-[1.5rem] text-red-400 font-bold tracking-wide"></p>
       </div>
       <div id="authStep2" class="hidden">
         <h2 class="text-2xl font-bold text-white mb-2 text-center">Identidad Digital</h2>
         <p class="text-gray-400 text-xs mb-8 text-center">Asigna un nombre clave a tu constelación.</p>
@@ -102,35 +114,35 @@
   </div>
   <div id="container" class="w-screen h-screen fixed top-0 left-0 bg-[#020205]"></div>
   <div id="gameHUD" class="fixed top-0 w-full z-[90] pointer-events-none flex justify-between p-4 hidden opacity-0 transition-opacity duration-1000">
     <div class="glass-panel px-4 py-2 rounded-lg flex items-center gap-4 border-t border-yellow-500/30 pointer-events-auto">
-        <div>
-            <div class="text-[9px] text-yellow-500 uppercase tracking-widest">Energía Neural</div>
-            <div class="w-32 h-2 bg-gray-800 rounded-full mt-1 overflow-hidden border border-white/10">
-                <div id="energyBar" class="h-full bg-yellow-400 w-full transition-all duration-500 shadow-[0_0_10px_#fbbf24]"></div>
-            </div>
-        </div>
-        <div class="text-right border-l border-white/10 pl-4">
-            <div class="text-[9px] text-cyan-500 uppercase tracking-widest">Rango</div>
-            <div id="rankDisplay" class="text-sm font-bold text-white tracking-widest">OBSERVADOR</div>
-        </div>
-        <div class="text-right pl-4 border-l border-white/10">
-            <div class="text-[9px] text-purple-500 uppercase tracking-widest">Bóveda</div>
-            <div id="vaultCount" class="text-sm font-bold text-white font-mono">0</div>
         </div>
     </div>
     <div id="missionDisplay" class="glass-panel px-6 py-2 rounded-lg text-center pointer-events-auto">
-        <div class="text-[9px] text-green-400 uppercase tracking-widest mb-1">Modo Activo</div>
-        <div id="activeModeText" class="text-xs font-bold text-white tracking-[0.2em]">EXPLORACIÓN LIBRE</div>
     </div>
   </div>
   <div id="tooltip" class="absolute hidden bg-black/80 text-white px-4 py-3 rounded-none border-l-2 border-cyan-500 z-[101] pointer-events-none text-sm backdrop-blur-md shadow-[0_0_15px_rgba(6,182,212,0.2)] max-w-xs"></div>
-  <div id="ui" class="fixed top-16 left-5 z-[100] glass-panel p-6 rounded-xl max-w-[380px] text-white h-[calc(100vh-80px)] flex flex-col transition-all hidden transform duration-700 translate-x-[-20px] opacity-0 overflow-y-auto custom-scrollbar">
     <div class="flex items-center justify-between mb-4 border-b border-white/10 pb-4">
       <h1 class="text-lg font-bold text-white flex items-center space-x-3">
         <div class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse shadow-[0_0_10px_#22d3ee]"></div>
@@ -143,22 +155,23 @@
     </div>
     <div class="grid grid-cols-3 gap-2 mb-4">
-        <button onclick="setGameMode('explorer')" id="btnModeExplorer" class="bg-cyan-900/30 border border-cyan-500/50 text-cyan-300 text-[9px] py-2 rounded uppercase tracking-wider hover:bg-cyan-800/50 transition-all font-bold">Explorar</button>
-        <button onclick="setGameMode('miner')" id="btnModeMiner" class="bg-black/30 border border-white/10 text-gray-500 text-[9px] py-2 rounded uppercase tracking-wider hover:border-yellow-500/50 hover:text-yellow-400 transition-all font-bold">Minero</button>
-        <button onclick="setGameMode('bridge')" id="btnModeBridge" class="bg-black/30 border border-white/10 text-gray-500 text-[9px] py-2 rounded uppercase tracking-wider hover:border-purple-500/50 hover:text-purple-400 transition-all font-bold">Puente</button>
     </div>
     <button onclick="setGameMode('comet')" id="btnModeComet" class="w-full mb-4 bg-black/30 border border-white/10 text-gray-500 text-[9px] py-2 rounded uppercase tracking-wider hover:border-red-500/50 hover:text-red-400 transition-all font-bold">Defensa Cometa</button>
     <div id="bridgeControls" class="hidden space-y-3 mb-4 p-3 bg-purple-900/10 rounded border border-purple-500/30">
-        <div class="text-[10px] text-purple-300 uppercase tracking-widest mb-1">Objetivo del Puente</div>
-        <input type="text" id="bridgeTargetInput" class="w-full p-2 rounded bg-black/50 border border-purple-500/30 text-white text-xs mb-2" placeholder="Destino (Punto B)">
-        <div class="text-[9px] text-gray-400">Origen: <span id="bridgeOriginDisplay" class="text-white font-bold">Sin definir</span></div>
-        <div class="text-[9px] text-gray-400">Saltos: <span id="bridgeHops" class="text-white font-bold">0</span></div>
     </div>
     <div class="relative mb-5 group">
-        <div class="absolute -inset-0.5 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-lg blur opacity-20 group-hover:opacity-60 transition duration-500"></div>
-        <input type="text" id="topicInput" class="relative w-full p-4 rounded-lg bg-black/80 text-white border border-white/10 focus:outline-none focus:border-cyan-500/50 text-sm placeholder-gray-500 font-mono" placeholder="Ingresar semilla semántica...">
     </div>
     <div class="space-y-5 mb-6 px-1">
@@ -197,7 +210,7 @@
       <button id="visualizeButton" class="relative w-full overflow-hidden bg-cyan-900/20 hover:bg-cyan-800/40 text-cyan-300 font-bold py-4 px-4 rounded-lg border border-cyan-500/30 transition-all flex items-center justify-center space-x-3 group hover:shadow-[0_0_15px_rgba(34,211,238,0.2)]">
         <div class="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:animate-shimmer"></div>
         <svg class="w-4 h-4 text-cyan-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
         </svg>
         <span id="actionBtnText" class="uppercase tracking-[0.2em] text-xs">Ejecutar Análisis</span>
       </button>
@@ -207,28 +220,32 @@
       <div id="progressBar" class="bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-600 h-1 w-0 shadow-[0_0_10px_#22d3ee]"></div>
     </div>
-    <div id="userListContainer" class="flex-1 flex flex-col min-h-0 bg-black/40 rounded border border-white/5 mb-4 relative overflow-hidden group">
       <div class="absolute top-0 left-0 w-full h-4 bg-gradient-to-b from-black/80 to-transparent pointer-events-none z-10"></div>
       <h2 class="font-bold text-[9px] text-gray-500 mb-2 uppercase tracking-[0.2em] p-3 border-b border-white/5 sticky top-0 bg-black/40 backdrop-blur-sm">Exploradores Activos</h2>
       <div id="userList" class="overflow-y-auto pr-1 space-y-1 custom-scrollbar text-xs p-2"></div>
       <div class="absolute bottom-0 left-0 w-full h-4 bg-gradient-to-t from-black/80 to-transparent pointer-events-none z-10"></div>
     </div>
-    <div id="minimapContainer" class="shrink-0 relative group border-t border-white/5 pt-4">
-      <div class="flex justify-between items-center mb-1 absolute top-6 right-2 z-10 gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-        <button id="zoomOutButton" class="w-6 h-6 bg-black/80 hover:bg-cyan-900/50 rounded border border-white/20 text-white flex items-center justify-center text-xs backdrop-blur-sm transition-colors">-</button>
-        <button id="zoomInButton" class="w-6 h-6 bg-black/80 hover:bg-cyan-900/50 rounded border border-white/20 text-white flex items-center justify-center text-xs backdrop-blur-sm transition-colors">+</button>
-      </div>
-      <canvas id="minimap" width="340" height="130" class="w-full h-[130px] bg-black/60 rounded border border-white/10 cursor-crosshair shadow-inner"></canvas>
-      <div class="text-[9px] text-center text-cyan-500/40 mt-2 uppercase tracking-[0.3em]">Radar Galáctico</div>
     </div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/geometries/TextGeometry.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/FontLoader.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
@@ -237,10 +254,9 @@
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
   <script type="module">
-    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
-    import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-analytics.js";
-    import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInAnonymously, signOut, setPersistence, browserLocalPersistence } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
-    import { getFirestore, doc, addDoc, onSnapshot, collection, setDoc, getDoc, query, setLogLevel, updateDoc, arrayUnion } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
     const firebaseConfig = {
       apiKey: "AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",
@@ -250,1084 +266,673 @@
       messagingSenderId: "208887839866",
       appId: "1:208887839866:web:adbb697dd0b63195b10fc3",
       measurementId: "G-102SEBLQFJ"
-    };
-    const DEFAULT_GEMINI_KEY = 'AIzaSyDmoQNpzgzW21f_WFCU9YbaAeI1fdOJMlo';
-    function getLocalGeminiKey() { try { return localStorage.getItem('GEMINI_API_KEY') || DEFAULT_GEMINI_KEY; } catch { return DEFAULT_GEMINI_KEY; } }
-    function setLocalGeminiKey(k) { try { localStorage.setItem('GEMINI_API_KEY', k || ''); } catch {} }
-    const THREE = window.THREE;
-    const OrbitControls = THREE.OrbitControls;
-    const TextGeometry = THREE.TextGeometry;
-    const FontLoader = THREE.FontLoader;
-    let scene, camera, renderer, controls, raycaster, mouse;
-    let composer;
-    let hashtagGroup, tooltip, trashGroup;
-    let font;
-    let clock = new THREE.Clock();
-    let cometGroup, cometHead, cometLight, cometText;
-    let cometParticlesMesh, cometParticlesData = [];
-    const COMET_PARTICLE_COUNT = 400;
-    let cometAngle = 0;
-    let userCentroidForComet = new THREE.Vector3(0,0,0);
-    let bgParticles;
-    let db, auth, analytics, userId = null, appId = "neuronal-1f3b9", userProfile = null;
-    let userMaps = {}, userProfileCache = {};
-    let isAuthReady = false, isFontReady = false;
-    let minimapCtx, minimapDotCoords = [], minimapScale = 0.025;
-    let gameState = {
-        mode: 'explorer',
-        energy: 100,
-        rank: 'OBSERVADOR',
-        vault: [],
-        bridgeOrigin: null,
-        bridgeTarget: null,
-        bridgeHops: 0,
-        cometActive: false,
-        score: 0
-    };
-    const isHFStatic = /\.hf\.space$/.test(location.hostname);
-    let authMode = null;
-    const normalizeString = (str) => { if (!str) return ""; return str.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); };
-    window.setGameMode = function(mode) {
-        gameState.mode = mode;
-        const els = ['btnModeExplorer', 'btnModeMiner', 'btnModeBridge', 'btnModeComet'];
-        els.forEach(id => {
-            const btn = document.getElementById(id);
-            if(id.toLowerCase().includes(mode)) {
-                btn.classList.remove('bg-black/30', 'text-gray-500', 'bg-cyan-900/30', 'text-cyan-300');
-                if(mode==='miner') btn.classList.add('bg-yellow-900/30', 'text-yellow-400', 'border-yellow-500');
-                else if(mode==='bridge') btn.classList.add('bg-purple-900/30', 'text-purple-400', 'border-purple-500');
-                else if(mode==='comet') btn.classList.add('bg-red-900/30', 'text-red-400', 'border-red-500');
-                else btn.classList.add('bg-cyan-900/30', 'text-cyan-300', 'border-cyan-500');
-            } else {
-                btn.className = "bg-black/30 border border-white/10 text-gray-500 text-[9px] py-2 rounded uppercase tracking-wider hover:bg-white/5 transition-all font-bold";
-                if(id === 'btnModeComet') btn.classList.add('w-full', 'mb-4');
-            }
-        });
-        document.getElementById('activeModeText').innerText = mode === 'bridge' ? 'PUENTE NEURAL' : (mode === 'miner' ? 'MINERO DE DATOS' : (mode === 'comet' ? 'DEFENSA DEL COMETA' : 'EXPLORACIÓN LIBRE'));
-        const bridgeCtrl = document.getElementById('bridgeControls');
-        const actBtn = document.getElementById('actionBtnText');
-        if(mode === 'bridge') {
-            bridgeCtrl.classList.remove('hidden');
-            actBtn.innerText = "CONSTRUIR NODO";
-        } else {
-            bridgeCtrl.classList.add('hidden');
-            actBtn.innerText = "EJECUTAR ANÁLISIS";
-        }
-        if(mode === 'comet') {
-            gameState.cometActive = true;
-            spawnTrashNodes();
-        } else {
-            gameState.cometActive = false;
-            if(trashGroup) { scene.remove(trashGroup); trashGroup = null; }
-        }
-    }
-    const loader = new FontLoader();
-    loader.load('https://cdn.jsdelivr.net/npm/three@0.128.0/examples/fonts/helvetiker_regular.typeface.json', (loadedFont) => {
-        font = loadedFont;
-        isFontReady = true;
-        checkAppReady();
-    });
-    initFirebase();
-    const gkInput = document.getElementById('geminiKeyInput');
-    const gkBtn = document.getElementById('saveGeminiKeyBtn');
-    if (gkInput && gkBtn) {
-       const existing = getLocalGeminiKey();
-       if(existing && existing !== DEFAULT_GEMINI_KEY) gkInput.value = existing;
-       gkBtn.addEventListener('click', (e) => {
-         e.preventDefault();
-         setLocalGeminiKey(gkInput.value.trim());
-         document.getElementById('geminiKeyStatus').textContent = 'GUARDADO';
-         setTimeout(() => document.getElementById('geminiKeyStatus').textContent = '', 2000);
-       });
     }
-    async function initFirebase() {
-        try {
-            const app = initializeApp(firebaseConfig);
-            db = getFirestore(app);
-            auth = getAuth(app);
-            analytics = getAnalytics(app);
-            setLogLevel('Silent');
-            const els = {
-                msg: document.getElementById('loginMessage'),
-                overlay: document.getElementById('loginOverlay'),
-                step1: document.getElementById('authStep1'),
-                step2: document.getElementById('authStep2'),
-                email: document.getElementById('loginEmail'),
-                pass: document.getElementById('loginPassword'),
-                loginBtn: document.getElementById('loginButton'),
-                regBtn: document.getElementById('registerButton'),
-                anonBtn: document.getElementById('btnGoToAnon'),
-                saveUserBtn: document.getElementById('saveUsernameButton'),
-                userInput: document.getElementById('usernameInput'),
-                backBtn: document.getElementById('backToStep1'),
-                logoutBtn: document.getElementById('mainLogoutButton'),
-                ui: document.getElementById('ui')
-            };
-            els.regBtn.addEventListener('click', async () => {
-                if(els.email.value.length < 6) { els.msg.innerText = "Email/Pass muy corto"; return; }
-                els.msg.innerText = "Procesando registro...";
-                authMode = 'email';
-                try {
-                    await setPersistence(auth, browserLocalPersistence);
-                    await createUserWithEmailAndPassword(auth, els.email.value, els.pass.value);
-                } catch(e) { els.msg.innerText = "Error: " + e.message; }
-            });
-            els.loginBtn.addEventListener('click', async () => {
-                els.msg.innerText = "Autenticando...";
-                authMode = 'email';
-                try {
-                      await setPersistence(auth, browserLocalPersistence);
-                      await signInWithEmailAndPassword(auth, els.email.value, els.pass.value);
-                } catch(e) { els.msg.innerText = "Error: " + e.message; }
-            });
-            els.anonBtn.addEventListener('click', () => {
-                authMode = 'anonymous';
-                els.step1.classList.add('hidden');
-                els.step2.classList.remove('hidden');
-            });
-            els.backBtn.addEventListener('click', () => {
-                els.step2.classList.add('hidden');
-                els.step1.classList.remove('hidden');
-                els.msg.innerText = "";
-            });
-            els.saveUserBtn.addEventListener('click', async () => {
-                const name = normalizeString(els.userInput.value.trim());
-                if(name.length < 3) { els.userInput.classList.add('border-red-500'); return; }
-                els.userInput.classList.remove('border-red-500');
-                els.saveUserBtn.innerText = "ESTABLECIENDO ENLACE...";
-                els.saveUserBtn.disabled = true;
-                try {
-                    if(authMode === 'anonymous') await signInAnonymously(auth);
-                    if(auth.currentUser) {
-                        await saveUserProfile(auth.currentUser.uid, name);
-                        els.overlay.style.opacity = '0';
-                        setTimeout(() => els.overlay.style.display = 'none', 700);
-                        initScene();
-                        loadAllMaps();
-                        els.ui.classList.remove('hidden');
-                        setTimeout(() => { els.ui.style.transform = 'translateX(0)'; els.ui.style.opacity = '1'; }, 100);
-                        document.getElementById('gameHUD').classList.remove('hidden');
-                        setTimeout(() => document.getElementById('gameHUD').classList.remove('opacity-0'), 500);
-                    }
-                } catch(e) {
-                    els.saveUserBtn.innerText = "ERROR DE CONEXIÓN";
-                    els.saveUserBtn.disabled = false;
-                }
-            });
-            els.logoutBtn.addEventListener('click', async () => { await signOut(auth); location.reload(); });
-            onAuthStateChanged(auth, async (user) => {
-                if(user) {
-                    userId = user.uid;
-                    isAuthReady = true;
-                    await fetchUserProfile(userId);
-                    if(userProfile) {
-                        els.overlay.style.opacity = '0';
-                        setTimeout(() => els.overlay.style.display = 'none', 700);
-                        els.ui.classList.remove('hidden');
-                        setTimeout(() => { els.ui.style.transform = 'translateX(0)'; els.ui.style.opacity = '1'; }, 100);
-                        document.getElementById('authStatus').textContent = userProfile.username;
-                        document.getElementById('gameHUD').classList.remove('hidden');
-                        setTimeout(() => document.getElementById('gameHUD').classList.remove('opacity-0'), 500);
-                        updateHUD();
-                        if(!scene) { initScene(); loadAllMaps(); }
-                    } else {
-                        els.step1.classList.add('hidden');
-                        els.step2.classList.remove('hidden');
-                        if(authMode === 'email') els.userInput.focus();
-                    }
-                } else {
-                    els.overlay.style.display = 'flex';
-                    els.overlay.style.opacity = '1';
-                    els.step1.classList.remove('hidden');
-                    els.step2.classList.add('hidden');
-                    els.ui.classList.add('hidden');
-                }
-            });
-        } catch (e) { console.error("Firebase Error", e); }
-    }
-    async function fetchUserProfile(uid) {
-        if(!db) return;
-        try {
-            const snap = await getDoc(doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile'));
-            if(snap.exists()) {
-                userProfile = snap.data();
-                userProfileCache[uid] = userProfile;
-                gameState.energy = userProfile.energy || 100;
-                gameState.rank = userProfile.rank || 'OBSERVADOR';
-                gameState.vault = userProfile.vault || [];
-            }
-        } catch {}
-    }
-    async function saveUserProfile(uid, name) {
-        if(!db) return;
-        await setDoc(doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile'), { username: name, energy: 100, rank: 'OBSERVADOR', vault: [] });
-        userProfile = { username: name };
-        userProfileCache[uid] = userProfile;
-        document.getElementById('authStatus').textContent = name;
-    }
-    async function updateGameProfile() {
-        if(!db || !userId) return;
-        try {
-            await updateDoc(doc(db, 'artifacts', appId, 'users', userId, 'user_data', 'profile'), {
-                energy: gameState.energy,
-                rank: gameState.rank
-            });
-        } catch {}
-    }
-    async function addToVault(word) {
-        if(gameState.vault.includes(word)) return;
-        gameState.vault.push(word);
-        if(!db || !userId) return;
-        await updateDoc(doc(db, 'artifacts', appId, 'users', userId, 'user_data', 'profile'), {
-            vault: arrayUnion(word)
-        });
-        updateHUD();
     }
-    function checkAppReady() { if(isAuthReady && isFontReady && userProfile) { initScene(); loadAllMaps(); } }
-    function initScene() {
-        if(scene) return;
-        scene = new THREE.Scene();
-        scene.fog = new THREE.FogExp2(0x020205, 0.005);
-        camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 2500);
-        camera.position.set(0, 5, 30);
-        renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "high-performance" });
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
-        renderer.toneMapping = THREE.ReinhardToneMapping;
-        renderer.toneMappingExposure = 1.2;
-        document.getElementById('container').appendChild(renderer.domElement);
-        tooltip = document.getElementById('tooltip');
-        controls = new OrbitControls(camera, renderer.domElement);
-        controls.enableDamping = true;
-        controls.dampingFactor = 0.04;
-        controls.rotateSpeed = 0.5;
-        controls.zoomSpeed = 0.7;
-        controls.maxDistance = 600;
-        controls.target.set(0,0,0);
-        scene.add(new THREE.AmbientLight(0x404040, 1.0));
-        const dirLight = new THREE.DirectionalLight(0xaaccff, 1.2);
-        dirLight.position.set(50, 80, 50);
-        scene.add(dirLight);
-        const renderScene = new THREE.RenderPass(scene, camera);
-        const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
-        bloomPass.threshold = 0.15;
-        bloomPass.strength = 1.4;
-        bloomPass.radius = 0.6;
-        composer = new THREE.EffectComposer(renderer);
-        composer.addPass(renderScene);
-        composer.addPass(bloomPass);
-        raycaster = new THREE.Raycaster();
-        mouse = new THREE.Vector2();
-        hashtagGroup = new THREE.Group();
-        scene.add(hashtagGroup);
-        createAdvancedBackground();
-        initAdvancedComet();
-        const visBtn = document.getElementById('visualizeButton');
-        if(!visBtn.dataset.bound) {
-            visBtn.addEventListener('click', handleAnalysisAndVisualization);
-            visBtn.dataset.bound = '1';
-        }
-        ['level1', 'level2', 'level3'].forEach(l => {
-            document.getElementById(`${l}Slider`).addEventListener('input', e => document.getElementById(`${l}Value`).innerText = e.target.value);
-        });
-        window.addEventListener('resize', onWindowResize);
-        window.addEventListener('mousemove', onPointerMove);
-        window.addEventListener('click', onMouseClick);
-        const mmCanvas = document.getElementById('minimap');
-        if(mmCanvas) {
-            minimapCtx = mmCanvas.getContext('2d');
-            mmCanvas.addEventListener('click', onMinimapClick);
-        }
-        document.getElementById('zoomInButton').addEventListener('click', () => { minimapScale *= 1.5; drawMinimap(); });
-        document.getElementById('zoomOutButton').addEventListener('click', () => { minimapScale /= 1.5; drawMinimap(); });
-        animate();
-    }
-    function updateHUD() {
-        document.getElementById('energyBar').style.width = gameState.energy + '%';
-        document.getElementById('rankDisplay').innerText = gameState.rank;
-        document.getElementById('vaultCount').innerText = gameState.vault.length;
-        if(gameState.vault.length > 5) gameState.rank = "ARQUITECTO";
-        if(gameState.vault.length > 15) gameState.rank = "ORÁCULO";
-    }
-    function createAdvancedBackground() {
-        const pGeo = new THREE.BufferGeometry();
-        const count = 5000;
-        const pos = new Float32Array(count * 3);
-        const sizes = new Float32Array(count);
-        for(let i=0; i<count; i++) {
-            pos[i*3] = (Math.random()-0.5) * 1500;
-            pos[i*3+1] = (Math.random()-0.5) * 1500;
-            pos[i*3+2] = (Math.random()-0.5) * 1500;
-            sizes[i] = Math.random();
-        }
-        pGeo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
-        pGeo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
-        const pMat = new THREE.PointsMaterial({
-            color: 0x88ccff,
-            size: 1.0,
-            transparent: true,
-            opacity: 0.6,
-            sizeAttenuation: true
-        });
-        bgParticles = new THREE.Points(pGeo, pMat);
-        scene.add(bgParticles);
-    }
-    function initAdvancedComet() {
-        if(cometGroup) { scene.remove(cometGroup); }
-        if(cometParticlesMesh) { scene.remove(cometParticlesMesh); }
-        if(!font || !userId) return;
-        userCentroidForComet.copy(getCurrentUserCentroid());
-        cometGroup = new THREE.Group();
-        const coreGeo = new THREE.SphereGeometry(0.5, 32, 32);
-        const coreMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
-        cometHead = new THREE.Mesh(coreGeo, coreMat);
-        const haloGeo = new THREE.SphereGeometry(0.9, 32, 32);
-        const haloMat = new THREE.MeshBasicMaterial({
-            color: 0x00ffff,
-            transparent: true,
-            opacity: 0.25,
-            blending: THREE.AdditiveBlending
-        });
-        const halo = new THREE.Mesh(haloGeo, haloMat);
-        cometHead.add(halo);
-        cometGroup.add(cometHead);
-        cometLight = new THREE.PointLight(0x00ffff, 2.5, 60);
-        cometGroup.add(cometLight);
-        scene.add(cometGroup);
-        const pGeo = new THREE.BufferGeometry();
-        const positions = new Float32Array(COMET_PARTICLE_COUNT * 3);
-        const colors = new Float32Array(COMET_PARTICLE_COUNT * 3);
-        const sizes = new Float32Array(COMET_PARTICLE_COUNT);
-        pGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-        pGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-        pGeo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
-        const pMat = new THREE.PointsMaterial({
-            vertexColors: true,
-            size: 1.0,
-            transparent: true,
-            opacity: 0.9,
-            blending: THREE.AdditiveBlending,
-            depthWrite: false,
-            sizeAttenuation: true
-        });
-        cometParticlesMesh = new THREE.Points(pGeo, pMat);
-        scene.add(cometParticlesMesh);
-        cometParticlesData = [];
-        for(let i=0; i<COMET_PARTICLE_COUNT; i++) {
-            cometParticlesData.push({ life: -1, velocity: new THREE.Vector3() });
-            positions[i*3] = 99999;
         }
-    }
-    function spawnTrashNodes() {
-        if(trashGroup) scene.remove(trashGroup);
-        trashGroup = new THREE.Group();
-        scene.add(trashGroup);
-        const trashWords = ["VIRAL", "FAKE", "GLITCH", "ERROR", "NOISE", "SPAM", "BOT"];
-        for(let i=0; i<20; i++) {
-            const geo = new THREE.DodecahedronGeometry(0.8, 0);
-            const mat = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
-            const mesh = new THREE.Mesh(geo, mat);
-            const rX = 80; const rZ = 60;
-            const ang = Math.random() * Math.PI * 2;
-            const x = userCentroidForComet.x + Math.cos(ang) * rX;
-            const z = userCentroidForComet.z + Math.sin(ang) * rZ;
-            const y = userCentroidForComet.y + Math.sin(ang * 2.0) * 20;
-            mesh.position.set(x,y,z);
-            mesh.userData = { isTrash: true, word: trashWords[Math.floor(Math.random()*trashWords.length)] };
-            trashGroup.add(mesh);
         }
     }
-    function updateAdvancedComet(delta, time) {
-        if(!cometGroup || !cometParticlesMesh) return;
-        let speed = 0.35;
-        if(gameState.cometActive) speed = 0.8;
-        cometAngle += delta * speed;
-        const rX = 80; const rZ = 60;
-        const x = userCentroidForComet.x + Math.cos(cometAngle) * rX;
-        const z = userCentroidForComet.z + Math.sin(cometAngle) * rZ;
-        const y = userCentroidForComet.y + Math.sin(cometAngle * 2.0) * 20;
-        cometGroup.position.set(x, y, z);
-        if(gameState.cometActive && trashGroup) {
-            trashGroup.children.forEach(trash => {
-                if(trash.position.distanceTo(cometGroup.position) < 3) {
-                    document.getElementById('glitchOverlay').classList.remove('hidden');
-                    document.getElementById('glitchOverlay').classList.add('glitch-active');
-                    setTimeout(() => {
-                        document.getElementById('glitchOverlay').classList.add('hidden');
-                        document.getElementById('glitchOverlay').classList.remove('glitch-active');
-                    }, 500);
-                    trash.position.y += 1000;
-                }
-            });
-        }
-        const positions = cometParticlesMesh.geometry.attributes.position.array;
-        const colors = cometParticlesMesh.geometry.attributes.color.array;
-        const sizes = cometParticlesMesh.geometry.attributes.size.array;
-        let spawnCount = gameState.cometActive ? 10 : 5;
-        for(let i=0; i<COMET_PARTICLE_COUNT; i++) {
-            if(spawnCount > 0 && cometParticlesData[i].life < 0) {
-                cometParticlesData[i].life = 1.0;
-                positions[i*3] = cometGroup.position.x + (Math.random()-0.5);
-                positions[i*3+1] = cometGroup.position.y + (Math.random()-0.5);
-                positions[i*3+2] = cometGroup.position.z + (Math.random()-0.5);
-                if(gameState.cometActive) {
-                     colors[i*3] = 1.0; colors[i*3+1] = 0.2; colors[i*3+2] = 0.0;
-                } else {
-                     colors[i*3] = 0.2; colors[i*3+1] = 1.0; colors[i*3+2] = 1.0;
-                }
-                sizes[i] = 1.2;
-                spawnCount--;
-            }
-        }
-        for(let i=0; i<COMET_PARTICLE_COUNT; i++) {
-            if(cometParticlesData[i].life > 0) {
-                const d = cometParticlesData[i];
-                d.life -= delta * 0.7;
-                sizes[i] = d.life * 1.8;
-            } else {
-                positions[i*3] = 99999;
-            }
-        }
-        cometParticlesMesh.geometry.attributes.position.needsUpdate = true;
-        cometParticlesMesh.geometry.attributes.color.needsUpdate = true;
-        cometParticlesMesh.geometry.attributes.size.needsUpdate = true;
     }
-    function animate() {
-        requestAnimationFrame(animate);
-        const delta = clock.getDelta();
-        const time = clock.getElapsedTime();
-        controls.update();
-        if(bgParticles) {
-            bgParticles.rotation.y = time * 0.015;
-            bgParticles.rotation.z = time * 0.005;
         }
-        updateAdvancedComet(delta, time);
-        updateRaycaster();
-        drawMinimap();
-        hashtagGroup.children.forEach(obj => {
-            if (obj.userData.isText) {
-                obj.lookAt(camera.position);
-                const dist = obj.position.distanceTo(camera.position);
-                let scale = (1/dist) * 12;
-                scale = Math.max(0.6, Math.min(5.0, scale));
-                obj.scale.set(scale, scale, scale);
-            }
-        });
-        if(trashGroup) {
-            trashGroup.rotation.y += 0.01;
-            trashGroup.children.forEach(t => t.rotation.x += 0.02);
         }
-        composer.render();
     }
-    function getCurrentUserCentroid() {
-      if (!userId || !userMaps[userId] || userMaps[userId].length === 0) return new THREE.Vector3(0,0,0);
-      const centroid = new THREE.Vector3(0,0,0);
-      userMaps[userId].forEach(o => centroid.add(o));
-      centroid.divideScalar(userMaps[userId].length);
-      return centroid;
     }
-    function visualizeHashtags(dataList, origin, level, parentColor = null) {
-      if (!dataList || dataList.length === 0) return;
-      for (const item of dataList) {
-        let currentTag, variantsList;
         if (level === 1) {
-          currentTag = normalizeString(item.palabra_principal);
-          variantsList = item.variantes || [];
         } else if (level === 2) {
-          currentTag = normalizeString(item.palabra_variante);
-          variantsList = item.sub_variantes || [];
         } else {
-          currentTag = normalizeString(item);
-          variantsList = [];
         }
-        if (!currentTag) continue;
-        const { color, h } = stringToHslColor(currentTag);
-        let nodeColor = (level === 1) ? color : parentColor;
-        let isGolden = false;
-        if(gameState.mode === 'miner' && level >= 2) {
-            if(Math.random() < 0.15) {
-                isGolden = true;
-                nodeColor = '#fbbf24';
-            }
-        }
-        const nodeMaterial = new THREE.MeshPhysicalMaterial({
-          color: new THREE.Color(nodeColor),
-          emissive: new THREE.Color(nodeColor),
-          emissiveIntensity: isGolden ? 2.0 : (level === 1 ? 0.8 : 0.4),
           roughness: 0.2,
           metalness: 0.1,
-          transmission: 0.1,
           transparent: true,
           opacity: 0.95
-        });
-        const theta = (h / 360) * Math.PI * 2;
-        let phiHash = 0;
-        for (let i = 0; i < currentTag.length; i++) phiHash = (phiHash + currentTag.charCodeAt(i) * 13) % 180;
-        const phi = ((phiHash / 180) * 90 + 45) * (Math.PI / 180);
-        const baseRadius = 12 / (level * level);
-        const cx = baseRadius * Math.sin(phi) * Math.cos(theta);
-        const cy = baseRadius * Math.cos(phi);
-        const cz = baseRadius * Math.sin(phi) * Math.sin(theta);
-        const clusterCenter = new THREE.Vector3(cx, cy, cz).add(origin);
-        const lineMat = new THREE.LineBasicMaterial({
-            color: new THREE.Color(nodeColor),
-            transparent: true,
-            opacity: 0.25
-        });
-        const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints([origin, clusterCenter]), lineMat);
-        hashtagGroup.add(line);
-        let sRad = (level === 1) ? 0.35 : (level === 2 ? 0.18 : 0.1);
-        if(isGolden) sRad *= 1.5;
-        const sphere = new THREE.Mesh(new THREE.SphereGeometry(sRad, 16, 16), nodeMaterial);
-        sphere.position.copy(clusterCenter);
-        sphere.userData.hashtag = currentTag;
-        sphere.userData.level = level;
-        sphere.userData.isGolden = isGolden;
-        hashtagGroup.add(sphere);
-        let tSize = (level === 1) ? 0.35 : (level === 2 ? 0.18 : 0.12);
-        const tGeo = new TextGeometry(currentTag.toUpperCase(), { font: font, size: tSize, height: 0.01, bevelEnabled: false });
-        tGeo.computeBoundingBox();
-        const tMesh = new THREE.Mesh(tGeo, new THREE.MeshBasicMaterial({ color: nodeColor }));
-        tMesh.position.copy(clusterCenter);
-        tMesh.position.y += sRad + 0.15;
-        tMesh.position.x -= (tGeo.boundingBox.max.x - tGeo.boundingBox.min.x)/2;
-        tMesh.userData.isText = true;
-        hashtagGroup.add(tMesh);
-        visualizeHashtags(variantsList, clusterCenter, level + 1, nodeColor);
-      }
-    }
-    function visualizeRoot(topic, origin) {
-      const { color } = stringToHslColor(topic);
-      const mat = new THREE.MeshStandardMaterial({
-        color: new THREE.Color(color),
-        emissive: new THREE.Color(color),
-        emissiveIntensity: 2.2,
-        roughness: 0.4
-      });
-      const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.7, 32, 32), mat);
-      sphere.position.copy(origin);
-      sphere.userData.hashtag = topic;
-      sphere.userData.level = 0;
-      hashtagGroup.add(sphere);
-      const tGeo = new TextGeometry(topic.toUpperCase(), { font: font, size: 0.6, height: 0.05, bevelEnabled: false });
-      tGeo.computeBoundingBox();
-      const tMesh = new THREE.Mesh(tGeo, new THREE.MeshBasicMaterial({ color: 0xffffff }));
-      tMesh.position.copy(origin);
-      tMesh.position.y += 1.0;
-      tMesh.position.x -= (tGeo.boundingBox.max.x - tGeo.boundingBox.min.x) / 2;
-      tMesh.userData.isText = true;
-      hashtagGroup.add(tMesh);
-    }
-    function createUserSun(pos, name, isMe) {
-        const col = isMe ? 0xffaa00 : 0x00ff88;
-        const mat = new THREE.MeshStandardMaterial({
-            color: col, emissive: col, emissiveIntensity: 1.8, roughness: 0.2
-        });
-        const mesh = new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), mat);
-        mesh.position.copy(pos);
-        mesh.userData.hashtag = `Usuario: ${name}`;
-        mesh.userData.isPlaceholder = true;
-        hashtagGroup.add(mesh);
-        const tGeo = new TextGeometry(name.toUpperCase(), { font: font, size: 1.2, height: 0.1 });
-        tGeo.computeBoundingBox();
-        const tMesh = new THREE.Mesh(tGeo, new THREE.MeshBasicMaterial({ color: 0xffffff }));
-        tMesh.position.copy(pos);
-        tMesh.position.y += 4;
-        tMesh.position.x -= (tGeo.boundingBox.max.x - tGeo.boundingBox.min.x)/2;
-        tMesh.userData.isText = true;
-        hashtagGroup.add(tMesh);
-    }
-    async function fetchWithTimeout(url, options = {}, timeoutMs = 25000) {
-      const controller = new AbortController();
-      const id = setTimeout(() => controller.abort(), timeoutMs);
-      try {
-        return await fetch(url, { ...options, signal: controller.signal });
-      } finally { clearTimeout(id); }
-    }
-    async function fetchWithBackoff(url, options, retries = 2, delay = 1000) {
-      try {
-        return await fetchWithTimeout(url, options);
-      } catch (err) {
-        if (retries > 0) {
-          await new Promise(r => setTimeout(r, delay));
-          return fetchWithBackoff(url, options, retries - 1, delay * 2);
-        } else { throw err; }
-      }
-    }
-    async function callGemini(topic, mc, vc, svc) {
-        const k = getLocalGeminiKey();
-        if(!k || k.length<10) throw new Error("Falta API Key");
-        let prompt = "";
-        if(gameState.mode === 'bridge') {
-            const target = document.getElementById('bridgeTargetInput').value;
-            prompt = `Juego "Puente Semántico". Punto A: ${topic}. Punto B: ${target}. Genera palabras que sirvan de puente lógico. Genera 3 opciones principales.`;
-        } else {
-            prompt = `Tema: ${topic}. 1. Genera ${mc} palabras clave (Nivel 1). 2. Para cada una, ${vc} variantes (Nivel 2). 3. Para cada variante, ${svc} sub-variantes (Nivel 3). JSON Puro sin markdown.`;
         }
-        const schema = {
-            type: "OBJECT",
-            properties: {
-                analisis: { type: "STRING" },
-                lista_palabras: { type: "ARRAY", items: { type: "OBJECT", properties: { palabra_principal: {type:"STRING"}, variantes: {type:"ARRAY", items: {type:"OBJECT", properties: {palabra_variante: {type:"STRING"}, sub_variantes: {type:"ARRAY", items:{type:"STRING"}}}}} } } }
-            }
-        };
-        const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${k}`;
-        if (!isHFStatic) {
-            try {
-                const proxyResp = await fetchWithBackoff('/.netlify/functions/gemini-proxy', {
-                    method: 'POST', headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ model: 'gemini-2.0-flash-exp', payload: { contents: [{parts:[{text: prompt}]}] } })
-                }, 1, 1000);
-                if (proxyResp.ok) return await proxyResp.json();
-            } catch (e) {}
         }
-        const resp = await fetchWithBackoff(url, {
-            method: 'POST', headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({ contents: [{parts:[{text: prompt}]}], generationConfig: { responseMimeType: "application/json", responseSchema: schema } })
-        });
-        if(!resp.ok) throw new Error(await resp.text());
-        return await resp.json();
     }
-    async function handleAnalysisAndVisualization() {
-        if(!font) return;
-        const topic = normalizeString(document.getElementById('topicInput').value);
-        if(!topic) return;
-        if(gameState.mode === 'miner' && gameState.energy < 10) {
-            alert("Energía Insuficiente. Explora nodos existentes para recargar.");
-            return;
         }
-        const btn = document.getElementById('visualizeButton');
-        const pb = document.getElementById('progressBar');
-        const pbc = document.getElementById('progressBarContainer');
-        const originalBtnHtml = btn.innerHTML;
-        btn.disabled = true; btn.innerHTML = '<span class="animate-pulse">PROCESANDO RED...</span>';
-        pbc.classList.remove('hidden'); pb.style.width = "90%"; pb.style.transition = "width 15s ease-out";
-        try {
-            const mc = document.getElementById('level1Slider').value;
-            const vc = document.getElementById('level2Slider').value;
-            const svc = document.getElementById('level3Slider').value;
-            let origin = new THREE.Vector3(0,0,0);
-            const myMaps = userMaps[userId] || [];
-            if(myMaps.length === 0) {
-                const globalIdx = Object.keys(userMaps).length;
-                origin.set(globalIdx*800*Math.cos(globalIdx), 0, globalIdx*800*Math.sin(globalIdx));
-            } else {
-                let center = new THREE.Vector3(); myMaps.forEach(m=>center.add(m)); center.divideScalar(myMaps.length);
-                const r = Math.sqrt(myMaps.length)*40; const a = myMaps.length;
-                origin.set(center.x + r*Math.cos(a), 0, center.z + r*Math.sin(a));
-            }
-            const res = await callGemini(topic, mc, vc, svc);
-            const txt = res.candidates?.[0]?.content?.parts?.[0]?.text;
-            if(!txt) throw new Error("La IA no generó datos válidos.");
-            const json = JSON.parse(txt);
-            visualizeRoot(topic, origin);
-            visualizeHashtags(json.lista_palabras, origin, 1);
-            if(gameState.mode === 'miner') {
-                gameState.energy -= 10;
-                updateGameProfile();
-                updateHUD();
-            }
-            if(gameState.mode === 'bridge') {
-                gameState.bridgeHops++;
-                document.getElementById('bridgeHops').innerText = gameState.bridgeHops;
-                document.getElementById('bridgeOriginDisplay').innerText = topic;
-                document.getElementById('topicInput').value = "";
-            }
-            if(db && userId) await addDoc(collection(db,'artifacts',appId,'public','data','maps'), {
-                topic, depth: "3", origin: {x:origin.x, y:origin.y, z:origin.z}, data: JSON.stringify(json), createdAt: new Date(), userId
-            });
-        } catch(e) {
-            console.error(e);
-            alert("Error en análisis: " + e.message);
-        } finally {
-            btn.disabled = false; btn.innerHTML = originalBtnHtml;
-            pb.style.width = "100%"; setTimeout(()=>{pbc.classList.add('hidden'); pb.style.width="0%";}, 500);
         }
-    }
-    function loadAllMaps() {
-        if(!db || !font) { setTimeout(loadAllMaps,500); return; }
-        const q = query(collection(db,'artifacts',appId,'public','data','maps'));
-        onSnapshot(q, async (snap) => {
-            while(hashtagGroup.children.length > 0){
-                let obj = hashtagGroup.children[0];
-                hashtagGroup.remove(obj);
-                if(obj.geometry) obj.geometry.dispose();
-                if(obj.material) {
-                   if(Array.isArray(obj.material)) obj.material.forEach(m=>m.dispose());
-                   else obj.material.dispose();
-                }
-            }
-            userMaps = {};
-            snap.docs.forEach(d => {
-                const m = d.data();
-                if(!m.origin) return;
-                const o = new THREE.Vector3(m.origin.x, m.origin.y, m.origin.z);
-                if(!userMaps[m.userId]) userMaps[m.userId] = [];
-                userMaps[m.userId].push(o);
-                try {
-                    const data = JSON.parse(m.data);
-                    visualizeRoot(m.topic, o);
-                    visualizeHashtags(data.lista_palabras, o, 1);
-                } catch {}
-            });
-            const uids = Object.keys(userMaps);
-            const list = document.getElementById('userList');
-            if(list) list.innerHTML = '';
-            for(const uid of uids) {
-                const prof = await getProfile(uid);
-                const name = prof ? prof.username : "ANON " + uid.substring(0,4);
-                if(list) {
-                    const item = document.createElement('div');
-                    item.className = 'text-cyan-400 hover:text-white cursor-pointer hover:bg-white/5 p-1 rounded transition-colors text-[10px] tracking-wide';
-                    item.innerHTML = `> <span class="font-bold">${name}</span>`;
-                    item.onclick = () => teleportToUser(uid);
-                    list.appendChild(item);
-                }
-                const origins = userMaps[uid];
-                if(origins.length > 0) {
-                    const c = new THREE.Vector3(); origins.forEach(p=>c.add(p)); c.divideScalar(origins.length);
-                    createUserSun(c, name, uid === userId);
-                }
-            }
-            initAdvancedComet();
-            drawMinimap();
-            focusOnUserMaps();
-        });
-    }
-    async function getProfile(uid) {
-        if(userProfileCache[uid]) return userProfileCache[uid];
-        try {
-            const snap = await getDoc(doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile'));
-            if(snap.exists()) { userProfileCache[uid] = snap.data(); return snap.data(); }
-        } catch {}
-        return null;
-    }
-    function focusOnUserMaps() {
-        if(!controls || !userId || !userMaps[userId]) return;
-        const c = getCurrentUserCentroid();
-        controls.target.copy(c);
-        camera.position.copy(c).add(new THREE.Vector3(0,10,40));
-    }
-    function teleportToUser(uid) {
-        if(!userMaps[uid]) return;
-        const origins = userMaps[uid];
-        const c = new THREE.Vector3(); origins.forEach(p=>c.add(p)); c.divideScalar(origins.length);
-        controls.target.copy(c);
-        camera.position.copy(c).add(new THREE.Vector3(0,10,40));
-    }
-    function drawMinimap() {
-        if(!minimapCtx) return;
-        const w = minimapCtx.canvas.width; const h = minimapCtx.canvas.height;
-        minimapCtx.clearRect(0,0,w,h);
-        minimapDotCoords = [];
-        const myC = getCurrentUserCentroid();
-        Object.keys(userMaps).forEach(uid => {
-             const origins = userMaps[uid];
-             const c = new THREE.Vector3(); origins.forEach(p=>c.add(p)); c.divideScalar(origins.length);
-             const x = w/2 + (c.x - myC.x)*minimapScale;
-             const y = h/2 + (c.z - myC.z)*minimapScale;
-             const isMe = (uid === userId);
-             const mainColor = isMe ? '#22d3ee' : '#64748b';
-             minimapDotCoords.push({x, y, uid});
-             if(origins.length > 0) {
-                 const satColor = isMe ? 'rgba(34, 211, 238, 0.4)' : 'rgba(100, 116, 139, 0.4)';
-                 origins.forEach(o => {
-                    const sx = w/2 + (o.x - myC.x)*minimapScale;
-                    const sy = h/2 + (o.z - myC.z)*minimapScale;
-                    minimapCtx.beginPath();
-                    minimapCtx.arc(sx, sy, 1, 0, Math.PI*2);
-                    minimapCtx.fillStyle = satColor;
-                    minimapCtx.fill();
-                 });
-             }
-             minimapCtx.fillStyle = mainColor;
-             minimapCtx.beginPath();
-             minimapCtx.arc(x,y, isMe?4:2.5, 0, Math.PI*2);
-             minimapCtx.fill();
-             if(isMe) {
-                 minimapCtx.strokeStyle = 'rgba(34, 211, 238, 0.3)';
-                 minimapCtx.beginPath(); minimapCtx.arc(x,y, 8, 0, Math.PI*2); minimapCtx.stroke();
-             }
-        });
-        if (cometGroup) {
-            const cometX = w/2 + (cometGroup.position.x - myC.x) * minimapScale;
-            const cometY = h/2 + (cometGroup.position.z - myC.z) * minimapScale;
-            minimapCtx.beginPath(); minimapCtx.arc(cometX, cometY, 3, 0, Math.PI * 2);
-            minimapCtx.fillStyle = 'rgba(0, 255, 255, 0.4)'; minimapCtx.fill();
-            minimapCtx.beginPath(); minimapCtx.arc(cometX, cometY, 1.5, 0, Math.PI * 2);
-            minimapCtx.fillStyle = '#ffffff'; minimapCtx.fill();
         }
     }
-    function onMinimapClick(e) {
-        if(!minimapCtx) return;
-        const rect = minimapCtx.canvas.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        let closest = null; let minD = 20;
-        minimapDotCoords.forEach(dot => {
-            const d = Math.sqrt((x-dot.x)**2 + (y-dot.y)**2);
-            if(d < minD) { minD = d; closest = dot.uid; }
-        });
-        if(closest) teleportToUser(closest);
-    }
-    function onWindowResize() {
-        camera.aspect = window.innerWidth/window.innerHeight;
-        camera.updateProjectionMatrix();
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        composer.setSize(window.innerWidth, window.innerHeight);
-    }
-    function onPointerMove(e) {
-        mouse.x = (e.clientX/window.innerWidth)*2-1;
-        mouse.y = -(e.clientY/window.innerHeight)*2+1;
-        tooltip.style.left = e.clientX+20+'px';
-        tooltip.style.top = e.clientY+'px';
-    }
-    function onMouseClick(e) {
-        if(!raycaster) return;
-        raycaster.setFromCamera(mouse, camera);
-        if(gameState.cometActive && trashGroup) {
-            const intersects = raycaster.intersectObjects(trashGroup.children);
-            if(intersects.length > 0) {
-                const obj = intersects[0].object;
-                scene.add(createExplosion(obj.position));
-                trashGroup.remove(obj);
-                gameState.score += 100;
-                document.getElementById('missionText').innerText = `PUNTOS: ${gameState.score}`;
-                return;
-            }
-        }
-        if(gameState.mode === 'miner') {
-            let targets = [...hashtagGroup.children];
-            const intersects = raycaster.intersectObjects(targets, false);
-            if(intersects.length > 0) {
-                const obj = intersects[0].object;
-                if(obj.userData.isGolden) {
-                    addToVault(obj.userData.hashtag);
-                    scene.add(createExplosion(obj.position, 0xffd700));
-                    hashtagGroup.remove(obj);
-                    gameState.energy += 15;
-                    if(gameState.energy > 100) gameState.energy = 100;
-                    updateHUD();
-                }
-            }
         }
     }
-    function createExplosion(pos, color = 0xff0000) {
-        const geo = new THREE.BufferGeometry();
-        const count = 30;
-        const positions = new Float32Array(count * 3);
-        for(let i=0;i<count*3;i++) positions[i] = (Math.random()-0.5)*2;
-        geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-        const mat = new THREE.PointsMaterial({color: color, size: 0.5, transparent:true});
-        const pts = new THREE.Points(geo, mat);
-        pts.position.copy(pos);
-        let life = 1.0;
-        function animExplosion() {
-            life -= 0.05;
-            pts.scale.multiplyScalar(1.1);
-            mat.opacity = life;
-            if(life > 0) requestAnimationFrame(animExplosion);
-            else scene.remove(pts);
-        }
-        animExplosion();
-        return pts;
-    }
-    function updateRaycaster() {
-        raycaster.setFromCamera(mouse, camera);
-        let targets = [...hashtagGroup.children];
-        if(cometHead) targets.push(cometHead);
-        const intersects = raycaster.intersectObjects(targets, false);
-        if(intersects.length > 0) {
-            let o = intersects[0].object;
-            if(o.parent === cometHead || o.parent === cometGroup) o = cometHead;
-            if(o === cometHead) {
-                tooltip.classList.remove('hidden');
-                tooltip.innerHTML = `<div class="text-cyan-300 font-bold text-xs">COMETA NEURAL</div>`;
-                document.body.style.cursor = 'pointer';
-                return;
-            }
-            const d = o.userData;
-            if(d.hashtag) {
-                tooltip.classList.remove('hidden');
-                let typeColor = d.isGolden ? "text-yellow-400" : (d.isPlaceholder ? "text-green-400" : "text-cyan-300");
-                let typeText = d.isGolden ? "NODO DORADO (CLICK PARA RECOGER)" : (d.isPlaceholder ? "NODO USUARIO" : `NIVEL ${d.level}`);
-                tooltip.innerHTML = `
-                    <div class="${typeColor} font-bold tracking-widest text-sm mb-1">${d.hashtag}</div>
-                    <div class="text-gray-400 text-[10px] uppercase">${typeText}</div>
-                `;
-                document.body.style.cursor = 'pointer';
-            }
-        } else {
-            tooltip.classList.add('hidden');
-            document.body.style.cursor = 'default';
         }
     }
-    function stringToHslColor(str) {
-        let hash = 0; for (let i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash);
-        return { color: `hsl(${Math.abs(hash % 360)}, 75%, 60%)`, h: Math.abs(hash % 360) };
-    }
   </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="es">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Navegador Neuronal Semántico 3D de Twitter</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
   <style>
+    body {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      background-color: #020205;
+      user-select: none;
+    }
+    body::-webkit-scrollbar {
+      display: none;
     }
     .glass-panel {
+      background: rgba(10, 15, 30, 0.75);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
     }
     @keyframes shimmer {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
     }
     .animate-shimmer {
+      animation: shimmer 2s infinite;
     }
     .custom-scrollbar::-webkit-scrollbar { width: 4px; }
     .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
     .custom-scrollbar::-webkit-scrollbar-thumb { background: #22d3ee; border-radius: 4px; }
     @keyframes glitch-anim {
+      0% { transform: translate(0); }
+      20% { transform: translate(-2px, 2px); }
+      40% { transform: translate(-2px, -2px); }
+      60% { transform: translate(2px, 2px); }
+      80% { transform: translate(2px, -2px); }
+      100% { transform: translate(0); }
     }
     .glitch-active {
+      animation: glitch-anim 0.2s cubic-bezier(.25, .46, .45, .94) both infinite;
+      filter: hue-rotate(90deg) contrast(1.5);
     }
     .golden-node {
+      box-shadow: 0 0 15px #ffd700;
+      border: 1px solid #ffd700;
+    }
+    #missionPanel {
+      right: 1rem;
+      top: 6rem;
+      position: fixed;
+      width: 200px;
+      z-index: 95;
     }
   </style>
 </head>
 <body class="m-0 overflow-hidden font-[Orbitron] text-slate-200">
   <div id="glitchOverlay" class="fixed inset-0 pointer-events-none z-[99999] hidden mix-blend-overlay bg-red-900/20"></div>
   <div id="loginOverlay" class="fixed inset-0 bg-black/95 z-[9999] flex items-center justify-center transition-opacity duration-700 opacity-100">
     <div id="loginModal" class="glass-panel p-8 rounded-2xl w-full max-w-md text-white relative overflow-hidden border-t border-cyan-500/30">
+      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-70"></div>
       <div id="authStep1">
         <h2 class="text-4xl font-bold text-center mb-2 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 drop-shadow-[0_0_15px_rgba(34,211,238,0.5)]">NEXUS</h2>
         <p class="text-cyan-500/60 text-center mb-8 text-[10px] tracking-[0.3em] uppercase">Visualizador Semántico Neural v2.5</p>
         <button id="btnGoToAnon" class="w-full bg-white/5 hover:bg-white/10 text-cyan-300 border border-cyan-500/20 font-bold py-4 px-4 rounded-lg transition-all flex items-center justify-center gap-3 mb-6 group hover:shadow-[0_0_15px_rgba(34,211,238,0.2)]">
+          <svg class="w-5 h-5 group-hover:scale-110 transition-transform text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+          </svg>
           Entrar como Anónimo
         </button>
         <div class="relative flex py-2 items-center mb-4">
           <div class="flex-grow border-t border-white/10"></div>
           <span class="flex-shrink-0 mx-4 text-gray-500 text-[10px] uppercase tracking-wider">Credenciales de Acceso</span>
           <div class="flex-grow border-t border-white/10"></div>
         </div>
         <form id="emailAuthForm" class="space-y-4">
           <div class="relative group">
             <input type="email" id="loginEmail" class="w-full p-3 pl-4 rounded-lg bg-black/50 border border-white/10 text-white placeholder-gray-600 focus:border-cyan-500 focus:outline-none text-sm transition-all focus:bg-black/70" placeholder="ID de Usuario (Email)">
           </div>
           <div class="relative group">
             <input type="password" id="loginPassword" class="w-full p-3 pl-4 rounded-lg bg-black/50 border border-white/10 text-white placeholder-gray-600 focus:border-cyan-500 focus:outline-none text-sm transition-all focus:bg-black/70" placeholder="Clave de Acceso">
+            <div class="absolute inset-0 border border-cyan-500/0 rounded-lg group-hover:border-cyan-500/20 pointer-events-none transition-colors"></div>
           </div>
           <div class="flex gap-3 pt-2">
+            <button type="button" id="loginButton" class="flex-1 bg-blue-600/10 hover:bg-blue-600/30 text-blue-400 py-2 rounded border border-blue-500/30 text-xs font-bold uppercase tracking-wider hover:shadow-[0_0_10px_rgba(59,130,246,0.3)]">Entrar</button>
+            <button type="button" id="registerButton" class="flex-1 bg-green-600/10 hover:bg-green-600/30 text-green-400 py-2 rounded border border-green-500/30 text-xs font-bold uppercase tracking-wider hover:shadow-[0_0_10px_rgba(74,222,128,0.3)]">Registrar</button>
           </div>
         </form>
         <p id="loginMessage" class="text-center text-xs mt-4 min-h-[1.5rem] text-red-400 font-bold tracking-wide"></p>
       </div>
       <div id="authStep2" class="hidden">
         <h2 class="text-2xl font-bold text-white mb-2 text-center">Identidad Digital</h2>
         <p class="text-gray-400 text-xs mb-8 text-center">Asigna un nombre clave a tu constelación.</p>
   </div>
   <div id="container" class="w-screen h-screen fixed top-0 left-0 bg-[#020205]"></div>
   <div id="gameHUD" class="fixed top-0 w-full z-[90] pointer-events-none flex justify-between p-4 hidden opacity-0 transition-opacity duration-1000">
     <div class="glass-panel px-4 py-2 rounded-lg flex items-center gap-4 border-t border-yellow-500/30 pointer-events-auto">
+      <div>
+        <div class="text-[9px] text-yellow-500 uppercase tracking-widest">Energía Neural</div>
+        <div class="w-32 h-2 bg-gray-800 rounded-full mt-1 overflow-hidden border border-white/10">
+          <div id="energyBar" class="h-full bg-yellow-400 w-full transition-all duration-500 shadow-[0_0_10px_#fbbf24]"></div>
         </div>
+      </div>
+      <div class="text-right border-l border-white/10 pl-4">
+        <div class="text-[9px] text-cyan-500 uppercase tracking-widest">Rango</div>
+        <div id="rankDisplay" class="text-sm font-bold text-white tracking-widest">OBSERVADOR</div>
+      </div>
+      <div class="text-right pl-4 border-l border-white/10">
+        <div class="text-[9px] text-purple-500 uppercase tracking-widest">Bóveda</div>
+        <div id="vaultCount" class="text-sm font-bold text-white font-mono">0</div>
+      </div>
     </div>
     <div id="missionDisplay" class="glass-panel px-6 py-2 rounded-lg text-center pointer-events-auto">
+      <div class="text-[9px] text-green-400 uppercase tracking-widest mb-1">Modo Activo</div>
+      <div id="activeModeText" class="text-xs font-bold text-white tracking-[0.2em]">EXPLORACIÓN LIBRE</div>
     </div>
   </div>
   <div id="tooltip" class="absolute hidden bg-black/80 text-white px-4 py-3 rounded-none border-l-2 border-cyan-500 z-[101] pointer-events-none text-sm backdrop-blur-md shadow-[0_0_15px_rgba(6,182,212,0.2)] max-w-xs"></div>
+  <div id="ui" class="fixed top-16 left-5 z-[100] glass-panel p-6 rounded-xl max-w-[380px] text-white h-[calc(100vh-80px)] flex flex-col transition-all hidden transform duration-700 -translate-x-2 opacity-0 overflow-y-auto custom-scrollbar">
     <div class="flex items-center justify-between mb-4 border-b border-white/10 pb-4">
       <h1 class="text-lg font-bold text-white flex items-center space-x-3">
         <div class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse shadow-[0_0_10px_#22d3ee]"></div>
     </div>
     <div class="grid grid-cols-3 gap-2 mb-4">
+      <button onclick="setGameMode('explorer')" id="btnModeExplorer" class="bg-cyan-900/30 border border-cyan-500/50 text-cyan-300 text-[9px] py-2 rounded uppercase tracking-wider hover:bg-cyan-800/50 transition-all font-bold">Explorar</button>
+      <button onclick="setGameMode('miner')" id="btnModeMiner" class="bg-black/30 border border-white/10 text-gray-500 text-[9px] py-2 rounded uppercase tracking-wider hover:border-yellow-500/50 hover:text-yellow-400 transition-all font-bold">Minero</button>
+      <button onclick="setGameMode('bridge')" id="btnModeBridge" class="bg-black/30 border border-white/10 text-gray-500 text-[9px] py-2 rounded uppercase tracking-wider hover:border-purple-500/50 hover:text-purple-400 transition-all font-bold">Puente</button>
     </div>
     <button onclick="setGameMode('comet')" id="btnModeComet" class="w-full mb-4 bg-black/30 border border-white/10 text-gray-500 text-[9px] py-2 rounded uppercase tracking-wider hover:border-red-500/50 hover:text-red-400 transition-all font-bold">Defensa Cometa</button>
     <div id="bridgeControls" class="hidden space-y-3 mb-4 p-3 bg-purple-900/10 rounded border border-purple-500/30">
+      <div class="text-[10px] text-purple-300 uppercase tracking-widest mb-1">Objetivo del Puente</div>
+      <input type="text" id="bridgeTargetInput" class="w-full p-2 rounded bg-black/50 border border-purple-500/30 text-white text-xs mb-2" placeholder="Destino (Punto B)">
+      <div class="text-[9px] text-gray-400">Origen: <span id="bridgeOriginDisplay" class="text-white font-bold">Sin definir</span></div>
+      <div class="text-[9px] text-gray-400">Saltos: <span id="bridgeHops" class="text-white font-bold">0</span></div>
     </div>
     <div class="relative mb-5 group">
+      <div class="absolute -inset-0.5 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-lg blur opacity-20 group-hover:opacity-60 transition duration-500"></div>
+      <input type="text" id="topicInput" class="relative w-full p-4 rounded-lg bg-black/80 text-white border border-white/10 focus:outline-none focus:border-cyan-500/50 text-sm placeholder-gray-500 font-mono" placeholder="Ingresar semilla semántica...">
     </div>
     <div class="space-y-5 mb-6 px-1">
       <button id="visualizeButton" class="relative w-full overflow-hidden bg-cyan-900/20 hover:bg-cyan-800/40 text-cyan-300 font-bold py-4 px-4 rounded-lg border border-cyan-500/30 transition-all flex items-center justify-center space-x-3 group hover:shadow-[0_0_15px_rgba(34,211,238,0.2)]">
         <div class="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:animate-shimmer"></div>
         <svg class="w-4 h-4 text-cyan-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path>
         </svg>
         <span id="actionBtnText" class="uppercase tracking-[0.2em] text-xs">Ejecutar Análisis</span>
       </button>
       <div id="progressBar" class="bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-600 h-1 w-0 shadow-[0_0_10px_#22d3ee]"></div>
     </div>
+    <div id="userListContainer" class="flex-1 flex flex-col min-h-0 bg-black/40 rounded border border-white/5 relative overflow-hidden group">
       <div class="absolute top-0 left-0 w-full h-4 bg-gradient-to-b from-black/80 to-transparent pointer-events-none z-10"></div>
       <h2 class="font-bold text-[9px] text-gray-500 mb-2 uppercase tracking-[0.2em] p-3 border-b border-white/5 sticky top-0 bg-black/40 backdrop-blur-sm">Exploradores Activos</h2>
       <div id="userList" class="overflow-y-auto pr-1 space-y-1 custom-scrollbar text-xs p-2"></div>
       <div class="absolute bottom-0 left-0 w-full h-4 bg-gradient-to-t from-black/80 to-transparent pointer-events-none z-10"></div>
     </div>
+  </div>
+  <div id="minimapContainer" class="fixed bottom-4 right-4 z-[200] glass-panel p-2 rounded-lg group w-[320px] transition-opacity duration-300">
+    <div class="absolute top-2 right-2 flex gap-1 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+      <button id="zoomOutButton" class="w-6 h-6 bg-black/80 hover:bg-cyan-900/50 rounded border border-white/20 text-white flex items-center justify-center text-xs backdrop-blur-sm transition-colors">-</button>
+      <button id="zoomInButton" class="w-6 h-6 bg-black/80 hover:bg-cyan-900/50 rounded border border-white/20 text-white flex items-center justify-center text-xs backdrop-blur-sm transition-colors">+</button>
     </div>
+    <canvas id="minimap" width="320" height="130" class="w-full h-[130px] bg-black/60 rounded border border-white/10 cursor-crosshair shadow-inner"></canvas>
+    <div class="text-[9px] text-center text-cyan-500/40 mt-1 uppercase tracking-[0.3em]">Radar Galáctico</div>
+  </div>
+  <div id="missionPanel" class="glass-panel p-3">
+    <h3 class="text-sm font-bold mb-2">MISIÓN</h3>
+    <ul id="missionList" class="text-xs space-y-1"></ul>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/geometries/TextGeometry.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/FontLoader.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
   <script type="module">
+    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js"
+    import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInAnonymously, signOut, setPersistence, browserLocalPersistence } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js"
+    import { getFirestore, doc, getDoc, setDoc, updateDoc, arrayUnion, onSnapshot, collection, query } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js"
     const firebaseConfig = {
       apiKey: "AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",
       messagingSenderId: "208887839866",
       appId: "1:208887839866:web:adbb697dd0b63195b10fc3",
       measurementId: "G-102SEBLQFJ"
     }
+    const app = initializeApp(firebaseConfig)
+    const auth = getAuth(app)
+    const db = getFirestore(app)
+    const DEFAULT_GEMINI_KEY = "AIzaSyDmoQNpzgzW21f_WFCU9YbaAeI1fdOJMlo"
+    const getLocalGeminiKey = () => {
+      try { return localStorage.getItem("GEMINI_API_KEY") || DEFAULT_GEMINI_KEY } catch { return DEFAULT_GEMINI_KEY }
     }
+    const setLocalGeminiKey = (k) => { try { localStorage.setItem("GEMINI_API_KEY", k || "") } catch {} }
+    const THREE = window.THREE
+    const OrbitControls = THREE.OrbitControls
+    const FontLoader = THREE.FontLoader
+    const TextGeometry = THREE.TextGeometry
+    let scene, camera, renderer, composer, controls, raycaster, mouse, clock, font
+    let hashtagGroup, tooltip, minimapCtx, minimapDotCoords = [], minimapScale = 0.025
+    let userId = null, userProfile = null, isAuthReady = false, isFontReady = false
+    let userMaps = {}, userProfileCache = {}
+    let gameState = { mode: "explorer", energy: 100, rank: "OBSERVADOR", vault: [], score: 0, shield: false, speedMultiplier: 1, cometActive: false, stormActive: false }
+    const missions = [
+      { type: "gold", target: 5, progress: 0 },
+      { type: "visit", target: 3, progress: 0 },
+      { type: "bridge", target: 2, progress: 0 }
+    ]
+    const normalizeString = (s) => s ? s.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : ""
+    const loader = new FontLoader()
+    loader.load("https://cdn.jsdelivr.net/npm/three@0.128.0/examples/fonts/helvetiker_regular.typeface.json", f => { font = f; isFontReady = true; checkAppReady() })
+    initFirebase()
+    const gkInput = document.getElementById("geminiKeyInput")
+    const gkBtn = document.getElementById("saveGeminiKeyBtn")
+    if (gkInput && gkBtn) {
+      const existing = getLocalGeminiKey()
+      if (existing && existing !== DEFAULT_GEMINI_KEY) gkInput.value = existing
+      gkBtn.addEventListener("click", e => {
+        e.preventDefault()
+        setLocalGeminiKey(gkInput.value.trim())
+        document.getElementById("geminiKeyStatus").textContent = "GUARDADO"
+        setTimeout(() => document.getElementById("geminiKeyStatus").textContent = "", 2000)
+      })
+    }
+    async function initFirebase () {
+      const loginBtn = document.getElementById("loginButton")
+      const registerBtn = document.getElementById("registerButton")
+      const anonBtn = document.getElementById("btnGoToAnon")
+      const saveUserBtn = document.getElementById("saveUsernameButton")
+      const backBtn = document.getElementById("backToStep1")
+      const logoutBtn = document.getElementById("mainLogoutButton")
+      const msg = document.getElementById("loginMessage")
+      const email = document.getElementById("loginEmail")
+      const pass = document.getElementById("loginPassword")
+      const step1 = document.getElementById("authStep1")
+      const step2 = document.getElementById("authStep2")
+      const overlay = document.getElementById("loginOverlay")
+      const ui = document.getElementById("ui")
+      registerBtn.addEventListener("click", async () => {
+        if (email.value.length < 6) { msg.innerText = "Email/Pass muy corto"; return }
+        try {
+          await setPersistence(auth, browserLocalPersistence)
+          await createUserWithEmailAndPassword(auth, email.value, pass.value)
+        } catch (e) { msg.innerText = "Error: " + e.message }
+      })
+      loginBtn.addEventListener("click", async () => {
+        try {
+          await setPersistence(auth, browserLocalPersistence)
+          await signInWithEmailAndPassword(auth, email.value, pass.value)
+        } catch (e) { msg.innerText = "Error: " + e.message }
+      })
+      anonBtn.addEventListener("click", () => {
+        step1.classList.add("hidden")
+        step2.classList.remove("hidden")
+      })
+      backBtn.addEventListener("click", () => {
+        step2.classList.add("hidden")
+        step1.classList.remove("hidden")
+        msg.innerText = ""
+      })
+      saveUserBtn.addEventListener("click", async () => {
+        const name = normalizeString(document.getElementById("usernameInput").value.trim())
+        if (name.length < 3) { document.getElementById("usernameInput").classList.add("border-red-500"); return }
+        document.getElementById("saveUsernameButton").innerText = "ESTABLECIENDO ENLACE..."
+        document.getElementById("saveUsernameButton").disabled = true
+        try {
+          if (!auth.currentUser) await signInAnonymously(auth)
+          await setDoc(doc(db, "artifacts", "neuronal-1f3b9", "users", auth.currentUser.uid, "user_data", "profile"), { username: name, energy: 100, rank: "OBSERVADOR", vault: [] })
+          overlay.style.opacity = "0"
+          setTimeout(() => overlay.style.display = "none", 700)
+          ui.classList.remove("hidden")
+          setTimeout(() => { ui.style.transform = "translateX(0)"; ui.style.opacity = "1" }, 100)
+          document.getElementById("gameHUD").classList.remove("hidden")
+          setTimeout(() => document.getElementById("gameHUD").classList.remove("opacity-0"), 500)
+          initScene()
+          loadAllMaps()
+        } catch (e) {
+          document.getElementById("saveUsernameButton").innerText = "ERROR DE CONEXIÓN"
+          document.getElementById("saveUsernameButton").disabled = false
         }
+      })
+      logoutBtn.addEventListener("click", async () => { await signOut(auth); location.reload() })
+      onAuthStateChanged(auth, async user => {
+        if (user) {
+          userId = user.uid
+          isAuthReady = true
+          await fetchUserProfile(userId)
+          if (userProfile) {
+            overlay.style.opacity = "0"
+            setTimeout(() => overlay.style.display = "none", 700)
+            ui.classList.remove("hidden")
+            setTimeout(() => { ui.style.transform = "translateX(0)"; ui.style.opacity = "1" }, 100)
+            document.getElementById("authStatus").textContent = userProfile.username
+            document.getElementById("gameHUD").classList.remove("hidden")
+            setTimeout(() => document.getElementById("gameHUD").classList.remove("opacity-0"), 500)
+            updateHUD()
+            if (!scene) { initScene(); loadAllMaps() }
+          } else {
+            step1.classList.add("hidden")
+            step2.classList.remove("hidden")
+          }
+        } else {
+          overlay.style.display = "flex"
+          overlay.style.opacity = "1"
+          step1.classList.remove("hidden")
+          step2.classList.add("hidden")
+          ui.classList.add("hidden")
         }
+      })
+    }
+    async function fetchUserProfile (uid) {
+      const snap = await getDoc(doc(db, "artifacts", "neuronal-1f3b9", "users", uid, "user_data", "profile"))
+      if (snap.exists()) {
+        userProfile = snap.data()
+        userProfileCache[uid] = userProfile
+        gameState.energy = userProfile.energy || 100
+        gameState.rank = userProfile.rank || "OBSERVADOR"
+        gameState.vault = userProfile.vault || []
+        updateHUD()
+      }
     }
+    function updateHUD () {
+      document.getElementById("energyBar").style.width = gameState.energy + "%"
+      document.getElementById("rankDisplay").innerText = gameState.rank
+      document.getElementById("vaultCount").innerText = gameState.vault.length
+    }
+    function checkAppReady () { if (isAuthReady && isFontReady && userProfile) { initScene(); loadAllMaps() } }
+    function initScene () {
+      if (scene) return
+      scene = new THREE.Scene()
+      scene.fog = new THREE.FogExp2(0x020205, 0.005)
+      camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 2500)
+      camera.position.set(0, 5, 30)
+      renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "high-performance" })
+      renderer.setSize(innerWidth, innerHeight)
+      renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5))
+      renderer.toneMapping = THREE.ReinhardToneMapping
+      renderer.toneMappingExposure = 1.2
+      document.getElementById("container").appendChild(renderer.domElement)
+      tooltip = document.getElementById("tooltip")
+      controls = new OrbitControls(camera, renderer.domElement)
+      controls.enableDamping = true
+      controls.dampingFactor = 0.04
+      controls.rotateSpeed = 0.5
+      controls.zoomSpeed = 0.7
+      controls.maxDistance = 600
+      controls.target.set(0, 0, 0)
+      const renderPass = new RenderPass(scene, camera)
+      const bloomPass = new UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 1.5, 0.4, 0.85)
+      bloomPass.threshold = 0.15
+      bloomPass.strength = 1.4
+      bloomPass.radius = 0.6
+      composer = new EffectComposer(renderer)
+      composer.addPass(renderPass)
+      composer.addPass(bloomPass)
+      raycaster = new THREE.Raycaster()
+      mouse = new THREE.Vector2()
+      hashtagGroup = new THREE.Group()
+      scene.add(hashtagGroup)
+      createBackground()
+      initComet()
+      document.getElementById("visualizeButton").addEventListener("click", handleAnalysisAndVisualization)
+      ;["level1", "level2", "level3"].forEach(l => {
+        document.getElementById(`${l}Slider`).addEventListener("input", e => document.getElementById(`${l}Value`).innerText = e.target.value)
+      })
+      window.addEventListener("resize", onWindowResize)
+      window.addEventListener("mousemove", onPointerMove)
+      window.addEventListener("click", onMouseClick)
+      const mmCanvas = document.getElementById("minimap")
+      if (mmCanvas) {
+        minimapCtx = mmCanvas.getContext("2d")
+        mmCanvas.addEventListener("click", onMinimapClick)
+      }
+      document.getElementById("zoomInButton").addEventListener("click", () => { minimapScale *= 1.5; drawMinimap() })
+      document.getElementById("zoomOutButton").addEventListener("click", () => { minimapScale /= 1.5; drawMinimap() })
+      animate()
+    }
+    function createBackground () {
+      const count = 5000
+      const geo = new THREE.BufferGeometry()
+      const pos = new Float32Array(count * 3)
+      const sizes = new Float32Array(count)
+      for (let i = 0; i < count; i++) {
+        pos[i * 3] = (Math.random() - 0.5) * 1500
+        pos[i * 3 + 1] = (Math.random() - 0.5) * 1500
+        pos[i * 3 + 2] = (Math.random() - 0.5) * 1500
+        sizes[i] = Math.random()
+      }
+      geo.setAttribute("position", new THREE.BufferAttribute(pos, 3))
+      geo.setAttribute("size", new THREE.BufferAttribute(sizes, 1))
+      const mat = new THREE.PointsMaterial({ color: 0x88ccff, size: 1, transparent: true, opacity: 0.6, sizeAttenuation: true })
+      const particles = new THREE.Points(geo, mat)
+      scene.add(particles)
+    }
+    function initComet () {
+      cometGroup = new THREE.Group()
+      cometHead = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), new THREE.MeshBasicMaterial({ color: 0xffffff }))
+      const halo = new THREE.Mesh(new THREE.SphereGeometry(0.9, 32, 32), new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.25, blending: THREE.AdditiveBlending }))
+      cometHead.add(halo)
+      cometGroup.add(cometHead)
+      cometLight = new THREE.PointLight(0x00ffff, 2.5, 60)
+      cometGroup.add(cometLight)
+      scene.add(cometGroup)
+      const pGeo = new THREE.BufferGeometry()
+      const positions = new Float32Array(400 * 3)
+      const colors = new Float32Array(400 * 3)
+      const sizes = new Float32Array(400)
+      pGeo.setAttribute("position", new THREE.BufferAttribute(positions, 3))
+      pGeo.setAttribute("color", new THREE.BufferAttribute(colors, 3))
+      pGeo.setAttribute("size", new THREE.BufferAttribute(sizes, 1))
+      const pMat = new THREE.PointsMaterial({ vertexColors: true, size: 1, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false, sizeAttenuation: true })
+      cometParticlesMesh = new THREE.Points(pGeo, pMat)
+      scene.add(cometParticlesMesh)
+      cometParticlesData = []
+      for (let i = 0; i < 400; i++) {
+        cometParticlesData.push({ life: -1, velocity: new THREE.Vector3() })
+        positions[i * 3] = 99999
+      }
     }
+    function spawnPowerUp () {
+      const types = ["double", "shield", "speed"]
+      const type = types[Math.floor(Math.random() * types.length)]
+      const pu = createNode(type.toUpperCase(), randomPos())
+      pu.userData.powerType = type
+    }
+    function spawnStorm () {
+      gameState.stormActive = true
+      renderer.setClearColor(0x000010)
+      setTimeout(() => {
+        gameState.stormActive = false
+        renderer.setClearColor(0x020205)
+      }, 30000)
+    }
+    function randomPos () {
+      const r = 70
+      const a = Math.random() * Math.PI * 2
+      return new THREE.Vector3(Math.cos(a) * r, Math.random() * 15, Math.sin(a) * r)
+    }
+    function createNode (label, pos) {
+      const col = label === "GOLD" ? 0xffd700 : 0x22d3ee
+      const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.4, 12, 12), new THREE.MeshStandardMaterial({ color: col }))
+      sphere.position.copy(pos)
+      sphere.userData.label = label
+      hashtagGroup.add(sphere)
+      const txtGeo = new TextGeometry(label, { font, size: 0.25, height: 0.01 })
+      const txtMesh = new THREE.Mesh(txtGeo, new THREE.MeshBasicMaterial({ color: 0xffffff }))
+      txtMesh.position.copy(pos).add(new THREE.Vector3(0, 0.6, 0))
+      txtMesh.userData.isText = true
+      hashtagGroup.add(txtMesh)
+      return sphere
+    }
+    async function callGemini (topic, mc, vc, svc) {
+      const key = getLocalGeminiKey()
+      const prompt = gameState.mode === "bridge"
+        ? `Puente entre ${topic} y ${document.getElementById("bridgeTargetInput").value}. Genera 3 opciones.`
+        : `Tema: ${topic}. ${mc} palabras clave, ${vc} variantes, ${svc} sub‑variantes. JSON puro.`
+      const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${key}`
+      const resp = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })
+      })
+      if (!resp.ok) throw new Error(await resp.text())
+      return await resp.json()
+    }
+    async function handleAnalysisAndVisualization () {
+      const topic = normalizeString(document.getElementById("topicInput").value)
+      if (!topic) return
+      if (gameState.mode === "miner" && gameState.energy < 10) {
+        alert("Energía insuficiente")
+        return
+      }
+      const btn = document.getElementById("visualizeButton")
+      const pb = document.getElementById("progressBar")
+      const pbc = document.getElementById("progressBarContainer")
+      const original = btn.innerHTML
+      btn.disabled = true
+      btn.innerHTML = '<span class="animate-pulse">PROCESANDO</span>'
+      pbc.classList.remove("hidden")
+      pb.style.width = "90%"
+      pb.style.transition = "width 15s ease-out"
+      try {
+        const mc = document.getElementById("level1Slider").value
+        const vc = document.getElementById("level2Slider").value
+        const svc = document.getElementById("level3Slider").value
+        const origin = randomPos()
+        const res = await callGemini(topic, mc, vc, svc)
+        const txt = res.candidates?.[0]?.content?.parts?.[0]?.text
+        if (!txt) throw new Error("Respuesta inválida")
+        const data = JSON.parse(txt)
+        visualizeRoot(topic, origin)
+        visualizeHashtags(data.lista_palabras, origin, 1)
+        if (gameState.mode === "miner") {
+          gameState.energy = Math.max(0, gameState.energy - 10)
+          updateHUD()
         }
+        if (gameState.mode === "bridge") {
+          gameState.bridgeHops++
+          document.getElementById("bridgeHops").innerText = gameState.bridgeHops
+          document.getElementById("bridgeOriginDisplay").innerText = topic
         }
+      } catch (e) {
+        console.error(e)
+        alert("Error: " + e.message)
+      } finally {
+        btn.disabled = false
+        btn.innerHTML = original
+        pb.style.width = "100%"
+        setTimeout(() => { pbc.classList.add("hidden"); pb.style.width = "0%" }, 500)
+      }
     }
+    function visualizeRoot (topic, origin) {
+      const hue = Math.abs(topic.split("").reduce((a, b) => a + b.charCodeAt(0), 0) % 360)
+      const col = `hsl(${hue},75%,60%)`
+      const mat = new THREE.MeshStandardMaterial({ color: new THREE.Color(col), emissive: new THREE.Color(col), emissiveIntensity: 2.2, roughness: 0.4 })
+      const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.7, 32, 32), mat)
+      sphere.position.copy(origin)
+      hashtagGroup.add(sphere)
+      const txtGeo = new TextGeometry(topic.toUpperCase(), { font, size: 0.6, height: 0.05 })
+      const txtMesh = new THREE.Mesh(txtGeo, new THREE.MeshBasicMaterial({ color: 0xffffff }))
+      txtMesh.position.copy(origin).add(new THREE.Vector3(0, 1, 0))
+      hashtagGroup.add(txtMesh)
     }
+    function visualizeHashtags (list, origin, level, parentColor = null) {
+      if (!list?.length) return
+      list.forEach(item => {
+        let tag, variants
         if (level === 1) {
+          tag = normalizeString(item.palabra_principal)
+          variants = item.variantes || []
         } else if (level === 2) {
+          tag = normalizeString(item.palabra_variante)
+          variants = item.sub_variantes || []
         } else {
+          tag = normalizeString(item)
+          variants = []
         }
+        if (!tag) return
+        const hue = Math.abs(tag.split("").reduce((a, b) => a + b.charCodeAt(0), 0) % 360)
+        const col = `hsl(${hue},75%,60%)`
+        const nodeCol = level === 1 ? col : parentColor
+        const isGold = gameState.mode === "miner" && level >= 2 && Math.random() < 0.15
+        const mat = new THREE.MeshPhysicalMaterial({
+          color: new THREE.Color(isGold ? "#ffd700" : nodeCol),
+          emissive: new THREE.Color(isGold ? "#ffd700" : nodeCol),
+          emissiveIntensity: isGold ? 2 : level === 1 ? 0.8 : 0.4,
           roughness: 0.2,
           metalness: 0.1,
+          transmission: 0.1,
           transparent: true,
           opacity: 0.95
+        })
+        const theta = (hue / 360) * Math.PI * 2
+        let phi = 0
+        for (let i = 0; i < tag.length; i++) phi = (phi + tag.charCodeAt(i) * 13) % 180
+        phi = ((phi / 180) * 90 + 45) * (Math.PI / 180)
+        const radius = 12 / (level * level)
+        const cx = radius * Math.sin(phi) * Math.cos(theta)
+        const cy = radius * Math.cos(phi)
+        const cz = radius * Math.sin(phi) * Math.sin(theta)
+        const pos = new THREE.Vector3(cx, cy, cz).add(origin)
+        const lineMat = new THREE.LineBasicMaterial({ color: new THREE.Color(nodeCol), transparent: true, opacity: 0.25 })
+        const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints([origin, pos]), lineMat)
+        hashtagGroup.add(line)
+        const sphere = new THREE.Mesh(new THREE.SphereGeometry(level === 1 ? 0.35 : level === 2 ? 0.18 : 0.1, 16, 16), mat)
+        sphere.position.copy(pos)
+        sphere.userData = { label: tag, isGolden: isGold, level }
+        hashtagGroup.add(sphere)
+        const txtSize = level === 1 ? 0.35 : level === 2 ? 0.18 : 0.12
+        const txtGeo = new TextGeometry(tag.toUpperCase(), { font, size: txtSize, height: 0.01 })
+        const txtMesh = new THREE.Mesh(txtGeo, new THREE.MeshBasicMaterial({ color: new THREE.Color(nodeCol) }))
+        txtMesh.position.copy(pos).add(new THREE.Vector3(0, (level === 1 ? 0.6 : 0.4), 0))
+        txtMesh.userData.isText = true
+        hashtagGroup.add(txtMesh)
+        visualizeHashtags(variants, pos, level + 1, isGold ? "#ffd700" : nodeCol)
+      })
+    }
+    function loadAllMaps () {
+      if (!db || !font) { setTimeout(loadAllMaps, 500); return }
+      const q = query(collection(db, "artifacts", "neuronal-1f3b9", "public", "data", "maps"))
+      onSnapshot(q, snap => {
+        while (hashtagGroup.children.length) {
+          const obj = hashtagGroup.children[0]
+          hashtagGroup.remove(obj)
+          if (obj.geometry) obj.geometry.dispose()
+          if (obj.material) {
+            if (Array.isArray(obj.material)) obj.material.forEach(m => m.dispose())
+            else obj.material.dispose()
+          }
         }
+        userMaps = {}
+        snap.docs.forEach(d => {
+          const m = d.data()
+          if (!m.origin) return
+          const o = new THREE.Vector3(m.origin.x, m.origin.y, m.origin.z)
+          if (!userMaps[m.userId]) userMaps[m.userId] = []
+          userMaps[m.userId].push(o)
+          try {
+            const data = JSON.parse(m.data)
+            visualizeRoot(m.topic, o)
+            visualizeHashtags(data.lista_palabras, o, 1)
+          } catch {}
+        })
+        const list = document.getElementById("userList")
+        if (list) list.innerHTML = ""
+        Object.keys(userMaps).forEach(uid => {
+          const prof = userProfileCache[uid]
+          const name = prof ? prof.username : "ANON " + uid.slice(0, 4)
+          const item = document.createElement("div")
+          item.className = "text-cyan-400 hover:text-white cursor-pointer hover:bg-white/5 p-1 rounded transition-colors text-[10px] tracking-widest"
+          item.innerHTML = `> <span class="font-bold">${name}</span>`
+          item.onclick = () => teleportToUser(uid)
+          list.appendChild(item)
+          const cent = new THREE.Vector3()
+          userMaps[uid].forEach(p => cent.add(p))
+          cent.divideScalar(userMaps[uid].length)
+          createUserSun(cent, name, uid === userId)
+        })
+        initComet()
+        drawMinimap()
+        focusOnUserMaps()
+      })
+    }
+    function createUserSun (pos, name, isMe) {
+      const col = isMe ? 0xffaa00 : 0x00ff88
+      const mat = new THREE.MeshStandardMaterial({ color: col, emissive: col, emissiveIntensity: 1.8, roughness: 0.2 })
+      const mesh = new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), mat)
+      mesh.position.copy(pos)
+      hashtagGroup.add(mesh)
+      const txtGeo = new TextGeometry(name.toUpperCase(), { font, size: 1.2 })
+      const txtMesh = new THREE.Mesh(txtGeo, new THREE.MeshBasicMaterial({ color: 0xffffff }))
+      txtMesh.position.copy(pos).add(new THREE.Vector3(0, 4, 0))
+      hashtagGroup.add(txtMesh)
+    }
+    function focusOnUserMaps () {
+      if (!controls || !userId || !userMaps[userId]) return
+      const c = getCurrentUserCentroid()
+      controls.target.copy(c)
+      camera.position.copy(c).add(new THREE.Vector3(0, 10, 40))
+    }
+    function getCurrentUserCentroid () {
+      if (!userId || !userMaps[userId] || userMaps[userId].length === 0) return new THREE.Vector3(0, 0, 0)
+      const cen = new THREE.Vector3()
+      userMaps[userId].forEach(p => cen.add(p))
+      cen.divideScalar(userMaps[userId].length)
+      return cen
+    }
+    function teleportToUser (uid) {
+      if (!userMaps[uid]) return
+      const cen = new THREE.Vector3()
+      userMaps[uid].forEach(p => cen.add(p))
+      cen.divideScalar(userMaps[uid].length)
+      controls.target.copy(cen)
+      camera.position.copy(cen).add(new THREE.Vector3(0, 10, 40))
+    }
+    function drawMinimap () {
+      if (!minimapCtx) return
+      const w = minimapCtx.canvas.width
+      const h = minimapCtx.canvas.height
+      minimapCtx.clearRect(0, 0, w, h)
+      minimapDotCoords = []
+      const myC = getCurrentUserCentroid()
+      Object.keys(userMaps).forEach(uid => {
+        const cen = new THREE.Vector3()
+        userMaps[uid].forEach(p => cen.add(p))
+        cen.divideScalar(userMaps[uid].length)
+        const x = w / 2 + (cen.x - myC.x) * minimapScale
+        const y = h / 2 + (cen.z - myC.z) * minimapScale
+        const isMe = uid === userId
+        minimapDotCoords.push({ x, y, uid })
+        minimapCtx.fillStyle = isMe ? "#22d3ee" : "#64748b"
+        minimapCtx.beginPath()
+        minimapCtx.arc(x, y, isMe ? 4 : 2.5, 0, Math.PI * 2)
+        minimapCtx.fill()
+        if (isMe) {
+          minimapCtx.strokeStyle = "rgba(34,211,238,0.3)"
+          minimapCtx.beginPath()
+          minimapCtx.arc(x, y, 8, 0, Math.PI * 2)
+          minimapCtx.stroke()
         }
+      })
+      if (cometGroup) {
+        const cx = w / 2 + (cometGroup.position.x - myC.x) * minimapScale
+        const cy = h / 2 + (cometGroup.position.z - myC.z) * minimapScale
+        minimapCtx.beginPath()
+        minimapCtx.arc(cx, cy, 3, 0, Math.PI * 2)
+        minimapCtx.fillStyle = "rgba(0,255,255,0.4)"
+        minimapCtx.fill()
+        minimapCtx.beginPath()
+        minimapCtx.arc(cx, cy, 1.5, 0, Math.PI * 2)
+        minimapCtx.fillStyle = "#ffffff"
+        minimapCtx.fill()
+      }
     }
+    function onMinimapClick (e) {
+      const rect = minimapCtx.canvas.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      let closest = null
+      let minDist = 20
+      minimapDotCoords.forEach(d => {
+        const dX = d.x - x
+        const dY = d.y - y
+        const dist = Math.sqrt(dX * dX + dY * dY)
+        if (dist < minDist) { minDist = dist; closest = d.uid }
+      })
+      if (closest) teleportToUser(closest)
+    }
+    function onWindowResize () {
+      camera.aspect = innerWidth / innerHeight
+      camera.updateProjectionMatrix()
+      renderer.setSize(innerWidth, innerHeight)
+      composer.setSize(innerWidth, innerHeight)
+    }
+    function onPointerMove (e) {
+      mouse.x = (e.clientX / innerWidth) * 2 - 1
+      mouse.y = -(e.clientY / innerHeight) * 2 + 1
+      tooltip.style.left = e.clientX + 20 + "px"
+      tooltip.style.top = e.clientY + "px"
+    }
+    function onMouseClick () {
+      raycaster.setFromCamera(mouse, camera)
+      const objs = hashtagGroup.children.filter(o => !o.userData.isText)
+      const hits = raycaster.intersectObjects(objs, false)
+      if (!hits.length) return
+      const obj = hits[0].object
+      if (obj.userData.isGolden) {
+        gameState.vault.push(obj.userData.label)
+        scene.add(createExplosion(obj.position))
+        hashtagGroup.remove(obj)
+        gameState.energy = Math.min(100, gameState.energy + 12)
+        updateHUD()
+      }
+      if (obj.userData.powerType) {
+        if (obj.userData.powerType === "shield") {
+          gameState.shield = true
+          setTimeout(() => gameState.shield = false, 5000)
         }
+        if (obj.userData.powerType === "speed") {
+          controls.rotateSpeed *= 2
+          setTimeout(() => controls.rotateSpeed /= 2, 5000)
         }
+        if (obj.userData.powerType === "double") {
+          gameState.score *= 2
         }
+        scene.remove(obj)
+      }
     }
+    function updateRaycaster () {
+      raycaster.setFromCamera(mouse, camera)
+      const targets = [...hashtagGroup.children]
+      const hits = raycaster.intersectObjects(targets, false)
+      if (hits.length) {
+        const o = hits[0].object
+        if (o.userData.label) {
+          tooltip.classList.remove("hidden")
+          tooltip.innerHTML = `<div class="text-cyan-300 font-bold text-sm">${o.userData.label}</div><div class="text-gray-400 text-[10px] uppercase">Nivel ${o.userData.level}</div>`
+          document.body.style.cursor = "pointer"
+        } else {
+          tooltip.classList.add("hidden")
+          document.body.style.cursor = "default"
         }
+      } else {
+        tooltip.classList.add("hidden")
+        document.body.style.cursor = "default"
+      }
     }
+    function createExplosion (pos, color = 0xff0000) {
+      const geo = new THREE.BufferGeometry()
+      const cnt = 30
+      const positions = new Float32Array(cnt * 3)
+      for (let i = 0; i < cnt * 3; i++) positions[i] = (Math.random() - 0.5) * 2
+      geo.setAttribute("position", new THREE.BufferAttribute(positions, 3))
+      const mat = new THREE.PointsMaterial({ color, size: 0.5, transparent: true })
+      const pts = new THREE.Points(geo, mat)
+      pts.position.copy(pos)
+      let life = 1
+      function anim () {
+        life -= 0.05
+        pts.scale.multiplyScalar(1.1)
+        mat.opacity = life
+        if (life > 0) requestAnimationFrame(anim)
+        else scene.remove(pts)
+      }
+      anim()
+      return pts
+    }
+    function animate () {
+      requestAnimationFrame(animate)
+      const dt = clock.getDelta()
+      controls.update()
+      if (gameState.cometActive) updateComet(dt)
+      if (gameState.stormActive) updateStorm(dt)
+      updateRaycaster()
+      drawMinimap()
+      hashtagGroup.children.forEach(o => {
+        if (o.userData.isText) {
+          o.lookAt(camera.position)
+          const d = o.position.distanceTo(camera.position)
+          let s = (1 / d) * 12
+          s = Math.max(0.6, Math.min(5, s))
+          o.scale.set(s, s, s)
         }
+      })
+      composer.render()
     }
+    window.setGameMode = setGameMode
+    initScene()
   </script>
 </body>
+</html>