neuronalstar

Running

App Files Files Community

salomonsky commited on Jan 1

Commit

7fe5e0e

verified ·

1 Parent(s): c6b8e79

Update index.html

Browse files

Files changed (1) hide show

index.html +458 -367

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="es">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Navegador Neuronal Semántico 3D de Twitter</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
@@ -97,7 +97,10 @@
     <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>
@@ -113,15 +116,32 @@
     </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>
@@ -168,7 +188,7 @@
   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}
@@ -181,365 +201,445 @@
   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)
@@ -551,70 +651,70 @@
   }
   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)"
@@ -627,143 +727,122 @@
   }
   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)
       }
     })
@@ -771,39 +850,51 @@
   }
   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()

 <html lang="es">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Navegador Neuronal Semántico 3D de Twitter</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
     <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>
   </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>
   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,trashGroup
   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 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() })
+  /* ------------ UI - Gemini Key ------------ */
+  const gkInput = document.getElementById("geminiKeyInput")
+  const gkBtn   = document.getElementById("saveGeminiKeyBtn")
+  if (gkInput && gkBtn){
+    const stored = getLocalGeminiKey()
+    if (stored && stored !== DEFAULT_GEMINI_KEY) gkInput.value = stored
+    gkBtn.addEventListener("click", e => {
+      e.preventDefault()
+      setLocalGeminiKey(gkInput.value.trim())
+      document.getElementById("geminiKeyStatus").textContent = "GUARDADO"
+      setTimeout(() => document.getElementById("geminiKeyStatus").textContent = "", 2000)
+    })
   }
+  /* ------------ AUTH ------------ */
   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("authStatus").textContent = name
+          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() } }
+  /* ------------ SCENE ------------ */
   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()
+    clock = new THREE.Clock()
+    hashtagGroup = new THREE.Group()
     scene.add(hashtagGroup)
+    scene.add(new THREE.AmbientLight(0x404040,1))
+    const dir = new THREE.DirectionalLight(0xaaccff,1.2)
+    dir.position.set(50,80,50)
+    scene.add(dir)
     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()},2000)
+    setInterval(()=>{if(Math.random()<0.1)spawnPowerUp()},8000)
     setInterval(()=>{if(Math.random()<0.05)spawnStorm()},25000)
     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 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
   }
+  function spawnNode(){ const pos = randomPos(); const isGold = Math.random()<0.15; const node = createNode(isGold?"GOLD":"REG",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)
+  }
   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)
     })
   }
+  /* ------------ MAPS & USERS ------------ */
   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)
   }
   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))
   }
+  /* ------------ MINIMAP ------------ */
   function drawMinimap(){
+    if (!minimapCtx) return
+    const w = minimapCtx.canvas.width, 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)"
   }
   function onMinimapClick(e){
+    const rect = minimapCtx.canvas.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    let closest=null, minDist=20
     minimapDotCoords.forEach(d=>{
+      const dx = d.x - x, dy = d.y - y
+      const dist = Math.hypot(dx,dy)
+      if (dist < minDist){ minDist = dist; closest = d.uid }
     })
+    if (closest) teleportToUser(closest)
   }
+  /* ------------ EVENTS ------------ */
   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 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)
     }
   }
   function animate(){
     requestAnimationFrame(animate)
+    const dt = clock.getDelta()
     controls.update()
+    if (gameState.cometActive) updateComet(dt)
+    if (gameState.stormActive) {} // color already changed in spawnStorm()
     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)
       }
     })
   }
   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 updateComet(dt){
+    if (!cometGroup) return
+    let speed = gameState.cometActive ? 0.8 : 0.35
+    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 pos = cometParticlesMesh.geometry.attributes.position.array
+    const col = cometParticlesMesh.geometry.attributes.color.array
+    const sz  = 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
+        pos[i*3]   = cometGroup.position.x + (Math.random()-0.5)
+        pos[i*3+1] = cometGroup.position.y + (Math.random()-0.5)
+        pos[i*3+2] = cometGroup.position.z + (Math.random()-0.5)
+        if (gameState.cometActive){ col[i*3]=1; col[i*3+1]=0.2; col[i*3+2]=0 }
+        else{ col[i*3]=0.2; col[i*3+1]=1; col[i*3+2]=1 }
+        sz[i] = 1.2
+        spawn--
+      }
+    }
+    for(let i=0;i<400;i++){
+      if (cometParticlesData[i].life>0){
+        cometParticlesData[i].life -= dt*0.7
+        sz[i] = cometParticlesData[i].life*1.8
+      }else pos[i*3]=99999
     }
+    cometParticlesMesh.geometry.attributes.position.needsUpdate = true
+    cometParticlesMesh.geometry.attributes.color.needsUpdate = true
+    cometParticlesMesh.geometry.attributes.size.needsUpdate = true
   }
   initFirebase()