neuronalstar

Running

App Files Files Community

salomonsky commited on Jan 1

Commit

c6b8e79

verified ·

1 Parent(s): 9b73acc

Update index.html

Browse files

Files changed (1) hide show

index.html +755 -881

index.html CHANGED Viewed

@@ -7,932 +7,806 @@
   <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 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="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>
-        <input type="text" id="usernameInput" class="w-full p-4 rounded-lg bg-black/50 border border-white/10 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 transition-all text-lg mb-8 text-center tracking-[0.2em] font-bold" placeholder="NICKNAME">
-        <button id="saveUsernameButton" class="w-full bg-gradient-to-r from-cyan-600 to-blue-700 hover:from-cyan-500 hover:to-blue-600 text-white font-bold py-4 px-4 rounded-lg shadow-[0_0_20px_rgba(6,182,212,0.4)] transition-all uppercase text-sm tracking-widest mb-4">
-          Establecer Enlace Neural
-        </button>
-        <button id="backToStep1" class="w-full mt-2 text-gray-500 text-[10px] hover:text-white transition-colors uppercase tracking-widest">Abortar Secuencia</button>
-      </div>
-    </div>
-  </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>
-        <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-blue-500 tracking-[0.2em]">NEXUS</span>
-      </h1>
-      <div class="flex items-center gap-3">
-        <span id="authStatus" class="text-[9px] text-cyan-500/80 uppercase tracking-widest border border-cyan-500/20 px-2 py-1 rounded bg-cyan-900/10"></span>
-        <button id="mainLogoutButton" class="text-red-400/70 hover:text-red-300 text-[10px] uppercase transition-colors font-bold tracking-wider">Salir</button>
-      </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">
-      <div>
-        <label class="text-[10px] text-gray-400 flex justify-between uppercase tracking-wider mb-2">Densidad Nivel 1 <span id="level1Value" class="text-cyan-400 font-mono bg-cyan-900/20 px-1 rounded">10</span></label>
-        <input type="range" id="level1Slider" min="1" max="15" value="10" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400">
-      </div>
-      <div>
-        <label class="text-[10px] text-gray-400 flex justify-between uppercase tracking-wider mb-2">Densidad Nivel 2 <span id="level2Value" class="text-cyan-400 font-mono bg-cyan-900/20 px-1 rounded">5</span></label>
-        <input type="range" id="level2Slider" min="5" max="8" value="5" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400">
-      </div>
-      <div>
-        <label class="text-[10px] text-gray-400 flex justify-between uppercase tracking-wider mb-2">Densidad Nivel 3 <span id="level3Value" class="text-cyan-400 font-mono bg-cyan-900/20 px-1 rounded">3</span></label>
-        <input type="range" id="level3Slider" min="1" max="3" value="3" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400">
-      </div>
-    </div>
-    <details class="mb-5 bg-black/40 rounded border border-white/5 overflow-hidden group">
-      <summary class="cursor-pointer text-[10px] text-blue-300/80 font-bold p-3 uppercase tracking-wide hover:bg-white/5 hover:text-cyan-300 transition-colors list-none flex justify-between items-center">
-        <span>Configuración API</span>
-        <span class="text-xs group-open:rotate-180 transition-transform duration-300 text-cyan-500">▼</span>
-      </summary>
-      <div class="p-4 space-y-3 border-t border-white/5 bg-black/60">
-        <div>
-          <label class="block text-[9px] text-gray-500 mb-1 uppercase tracking-widest">Gemini API Key</label>
-          <input type="password" id="geminiKeyInput" class="w-full p-2 rounded bg-black/50 text-white border border-white/10 text-xs focus:border-cyan-500/50 focus:outline-none font-mono tracking-tighter" placeholder="Pegar Key aquí...">
-        </div>
-        <div class="flex items-center gap-3 justify-end">
-          <span id="geminiKeyStatus" class="text-[9px] text-green-400 italic font-mono"></span>
-          <button id="saveGeminiKeyBtn" class="bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded text-gray-300 text-[10px] border border-white/10 transition-colors uppercase tracking-wider hover:border-cyan-500/30 hover:text-cyan-300">Guardar</button>
-        </div>
-      </div>
-    </details>
-    <div class="flex gap-2 mb-2">
-      <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>
-    <div id="progressBarContainer" class="w-full bg-gray-900 rounded-full h-1 mb-4 overflow-hidden hidden border border-white/10">
-      <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/shaders/CopyShader.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.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",
-      authDomain: "neuronal-1f3b9.firebaseapp.com",
-      projectId: "neuronal-1f3b9",
-      storageBucket: "neuronal-1f3b9.firebasestorage.app",
-      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>

   <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:#020205;user-select:none}
+    body::-webkit-scrollbar{display:none}
+    .glass-panel{background:rgba(10,15,30,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px rgba(0,0,0,.6);border-radius:8px;padding:1rem}
+    @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,.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 .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"/></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 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="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>
+      <input type="text" id="usernameInput" class="w-full p-4 rounded-lg bg-black/50 border border-white/10 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 transition-all text-lg mb-8 text-center tracking-[0.2em] font-bold" placeholder="NICKNAME">
+      <button id="saveUsernameButton" class="w-full bg-gradient-to-r from-cyan-600 to-blue-700 hover:from-cyan-500 hover:to-blue-600 text-white font-bold py-4 px-4 rounded-lg shadow-[0_0_20px_rgba(6,182,212,0.4)] transition-all uppercase text-sm tracking-widest mb-4">Establecer Enlace Neural</button>
+      <button id="backToStep1" class="w-full mt-2 text-gray-500 text-[10px] hover:text-white transition-colors uppercase tracking-widest">Abortar Secuencia</button>
     </div>
   </div>
+</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><span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-blue-500 tracking-[0.2em]">NEXUS</span></h1>
+    <div class="flex items-center gap-3"><span id="authStatus" class="text-[9px] text-cyan-500/80 uppercase tracking-widest border border-cyan-500/20 px-2 py-1 rounded bg-cyan-900/10"></span><button id="mainLogoutButton" class="text-red-400/70 hover:text-red-300 text-[10px] uppercase transition-colors font-bold tracking-wider">Salir</button></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">
+    <div><label class="text-[10px] text-gray-400 flex justify-between uppercase tracking-wider mb-2">Densidad Nivel 1 <span id="level1Value" class="text-cyan-400 font-mono bg-cyan-900/20 px-1 rounded">10</span></label><input type="range" id="level1Slider" min="1" max="15" value="10" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400"></div>
+    <div><label class="text-[10px] text-gray-400 flex justify-between uppercase tracking-wider mb-2">Densidad Nivel 2 <span id="level2Value" class="text-cyan-400 font-mono bg-cyan-900/20 px-1 rounded">5</span></label><input type="range" id="level2Slider" min="5" max="8" value="5" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400"></div>
+    <div><label class="text-[10px] text-gray-400 flex justify-between uppercase tracking-wider mb-2">Densidad Nivel 3 <span id="level3Value" class="text-cyan-400 font-mono bg-cyan-900/20 px-1 rounded">3</span></label><input type="range" id="level3Slider" min="1" max="3" value="3" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400"></div>
+  </div>
+  <details class="mb-5 bg-black/40 rounded border border-white/5 overflow-hidden group">
+    <summary class="cursor-pointer text-[10px] text-blue-300/80 font-bold p-3 uppercase tracking-wide hover:bg-white/5 hover:text-cyan-300 transition-colors list-none flex justify-between items-center"><span>Configuración API</span><span class="text-xs group-open:rotate-180 transition-transform duration-300 text-cyan-500">▼</span></summary>
+    <div class="p-4 space-y-3 border-t border-white/5 bg-black/60">
+      <div><label class="block text-[9px] text-gray-500 mb-1 uppercase tracking-widest">Gemini API Key</label><input type="password" id="geminiKeyInput" class="w-full p-2 rounded bg-black/50 text-white border border-white/10 text-xs focus:border-cyan-500/50 focus:outline-none font-mono tracking-tighter" placeholder="Pegar Key aquí..."></div>
+      <div class="flex items-center gap-3 justify-end"><span id="geminiKeyStatus" class="text-[9px] text-green-400 italic font-mono"></span><button id="saveGeminiKeyBtn" class="bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded text-gray-300 text-[10px] border border-white/10 transition-colors uppercase tracking-wider hover:border-cyan-500/30 hover:text-cyan-300">Guardar</button></div>
+    </div>
+  </details>
+  <div class="flex gap-2 mb-2"><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></div>
+  <div id="progressBarContainer" class="w-full bg-gray-900 rounded-full h-1 mb-4 overflow-hidden hidden border border-white/10"><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/shaders/CopyShader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.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,setLogLevel} from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js"
+  const firebaseConfig = {
+    apiKey:"AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",
+    authDomain:"neuronal-1f3b9.firebaseapp.com",
+    projectId:"neuronal-1f3b9",
+    storageBucket:"neuronal-1f3b9.firebasestorage.app",
+    messagingSenderId:"208887839866",
+    appId:"1:208887839866:web:adbb697dd0b63195b10fc3",
+    measurementId:"G-102SEBLQFJ"
+  }
+  const app = initializeApp(firebaseConfig)
+  const auth = getAuth(app)
+  const db = getFirestore(app)
+  setLogLevel('Silent')
+  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 cometGroup,cometHead,cometLight,cometParticlesMesh,cometParticlesData,cometAngle=0
+  let solar,bridgeControls,missionList,missionPanel
+  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()})
+  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";ui.classList.remove("hidden");ui.style.transform="translateX(0)";ui.style.opacity="1";document.getElementById("gameHUD").classList.remove("hidden");setTimeout(()=>document.getElementById("gameHUD").classList.remove("opacity-0"),500);initScene();loadAllMaps()},700)
+      }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";ui.classList.remove("hidden");ui.style.transform="translateX(0)";ui.style.opacity="1";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()}} ,700)
+        }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,.005)
+    camera=new THREE.PerspectiveCamera(60,innerWidth/innerHeight,.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()
+    clock=new THREE.Clock()
+    hashtagGroup=new THREE.Group()
+    scene.add(hashtagGroup)
+    createBackground()
+    initComet()
+    solar=createNode("SOLAR",new THREE.Vector3(0,30,0))
+    solar.material.transparent=true;solar.material.opacity=0.6
+    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 mm=document.getElementById("minimap")
+    if(mm){minimapCtx=mm.getContext("2d");mm.addEventListener("click",onMinimapClick)}
+    document.getElementById("zoomInButton").addEventListener("click",()=>{minimapScale*=1.5;drawMinimap()})
+    document.getElementById("zoomOutButton").addEventListener("click",()=>{minimapScale/=1.5;drawMinimap()})
+    setInterval(()=>{if(Math.random()<0.25)spawnNode();if(Math.random()<0.1)spawnPowerUp()},2000)
+    setInterval(()=>{if(Math.random()<0.05)spawnStorm()},25000)
+    animate()
+  }
+  function createBackground(){
+    const count=5000,geo=new THREE.BufferGeometry()
+    const pos=new Float32Array(count*3),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 spawnNode(){
+    const pos=randomPos()
+    const isGold=Math.random()<0.15
+    const label=isGold?"GOLD":"REG"
+    const node=createNode(label,pos)
+    node.userData.isGolden=isGold
+  }
+  function spawnPowerUp(){
+    const types=["DOUBLE","SHIELD","SPEED"]
+    const type=types[Math.floor(Math.random()*types.length)]
+    const pu=createNode(type,randomPos())
+    pu.userData.powerType=type.toLowerCase()
+  }
+  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,parentCol=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:parentCol
+      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.hypot(dX,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 arr=new Float32Array(cnt*3)
+    for(let i=0;i<cnt*3;i++)arr[i]=(Math.random()-0.5)*2
+    geo.setAttribute("position",new THREE.BufferAttribute(arr,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()
+    scene.add(pts)
+    return pts
+  }
+  function updateComet(dt){
+    if(!cometGroup)return
+    let speed=0.35
+    if(gameState.cometActive)speed=0.8
+    cometAngle+=dt*speed
+    const rX=80,rZ=60
+    const x= cometGroup.position.x + Math.cos(cometAngle)*rX
+    const z= cometGroup.position.z + Math.sin(cometAngle)*rZ
+    const y= cometGroup.position.y + Math.sin(cometAngle*2)*20
+    cometGroup.position.set(x,y,z)
+    const positions=cometParticlesMesh.geometry.attributes.position.array
+    const colors=cometParticlesMesh.geometry.attributes.color.array
+    const sizes=cometParticlesMesh.geometry.attributes.size.array
+    let spawn=gameState.cometActive?10:5
+    for(let i=0;i<400;i++){
+      if(spawn>0 && cometParticlesData[i].life<0){
+        cometParticlesData[i].life=1
+        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;colors[i*3+1]=0.2;colors[i*3+2]=0}
+        else{colors[i*3]=0.2;colors[i*3+1]=1;colors[i*3+2]=1}
+        sizes[i]=1.2
+        spawn--
       }
     }
+    for(let i=0;i<400;i++){
+      if(cometParticlesData[i].life>0){
+        cometParticlesData[i].life-=dt*0.7
+        sizes[i]=cometParticlesData[i].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 dt=clock.getDelta()
+    controls.update()
+    if(gameState.cometActive)updateComet(dt)
+    if(gameState.stormActive){} // storm visual effect handled by background color change
+    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()
+  }
+  function setGameMode(mode){
+    gameState.mode=mode
+    document.getElementById("activeModeText").innerText=mode==="bridge"?"PUENTE NEURAL":(mode==="miner"?"MINERO DE DATOS":(mode==="comet"?"DEFENSA COMETA":"EXPLORACIÓN LIBRE"))
+    if(mode==="bridge"){
+      document.getElementById("bridgeControls").classList.remove("hidden")
+      document.getElementById("actionBtnText").innerText="CONSTRUIR NODO"
+    }else{
+      document.getElementById("bridgeControls").classList.add("hidden")
+      document.getElementById("actionBtnText").innerText="EJECUTAR ANÁLISIS"
+    }
+    if(mode==="comet"){
+      gameState.cometActive=true
+      spawnTrashNodes()
+    }else{
+      gameState.cometActive=false
+      if(trashGroup){scene.remove(trashGroup);trashGroup=null}
+    }
+  }
+  window.setGameMode=setGameMode
+  function spawnTrashNodes(){
+    if(trashGroup)scene.remove(trashGroup)
+    trashGroup=new THREE.Group()
+    scene.add(trashGroup)
+    const words=["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)
+      mesh.position.copy(randomPos())
+      mesh.userData.isTrash=true
+      mesh.userData.word=words[Math.floor(Math.random()*words.length)]
+      trashGroup.add(mesh)
+    }
+  }
+  initFirebase()
+</script>
 </body>
 </html>