Update index.html

index.html

@@ -51,6 +51,14 @@
         box-shadow: 0 0 15px #ffd700;
         border: 1px solid #ffd700;
     }
+    .ui-spark {
+        position: fixed;
+        pointer-events: none;
+        background: radial-gradient(circle, #fff, #22d3ee);
+        border-radius: 50%;
+        mix-blend-mode: screen;
+        z-index: 999999;
+    }
   </style>
 </head>
 
@@ -64,7 +72,7 @@
       <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)]">
+        <button id="btnGoToAnon" class="game-btn 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>
@@ -83,8 +91,8 @@
              <div class="absolute inset-0 border border-cyan-500/0 rounded-lg group-hover:border-cyan-500/20 pointer-events-none transition-colors"></div>
           </div>
           <div class="flex gap-3 pt-2">
-            <button type="button" id="loginButton" class="flex-1 bg-blue-600/10 hover:bg-blue-600/30 text-blue-400 py-2 rounded border border-blue-500/30 text-xs font-bold transition-all uppercase tracking-wider hover:shadow-[0_0_10px_rgba(59,130,246,0.3)]">Entrar</button>
-            <button type="button" id="registerButton" class="flex-1 bg-green-600/10 hover:bg-green-600/30 text-green-400 py-2 rounded border border-green-500/30 text-xs font-bold transition-all uppercase tracking-wider hover:shadow-[0_0_10px_rgba(74,222,128,0.3)]">Registrar</button>
+            <button type="button" id="loginButton" class="game-btn flex-1 bg-blue-600/10 hover:bg-blue-600/30 text-blue-400 py-2 rounded border border-blue-500/30 text-xs font-bold transition-all uppercase tracking-wider hover:shadow-[0_0_10px_rgba(59,130,246,0.3)]">Entrar</button>
+            <button type="button" id="registerButton" class="game-btn flex-1 bg-green-600/10 hover:bg-green-600/30 text-green-400 py-2 rounded border border-green-500/30 text-xs font-bold transition-all uppercase tracking-wider hover:shadow-[0_0_10px_rgba(74,222,128,0.3)]">Registrar</button>
           </div>
         </form>
         <p id="loginMessage" class="text-center text-xs mt-4 min-h-[1.5rem] text-red-400 font-bold tracking-wide"></p>
@@ -93,10 +101,10 @@
         <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">
+        <button id="saveUsernameButton" class="game-btn 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>
+        <button id="backToStep1" class="game-btn w-full mt-2 text-gray-500 text-[10px] hover:text-white transition-colors uppercase tracking-widest">Abortar Secuencia</button>
       </div>
     </div>
   </div>
@@ -138,16 +146,16 @@
       </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>
+        <button id="mainLogoutButton" class="game-btn 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>
+        <button onclick="setGameMode('explorer')" id="btnModeExplorer" class="game-btn 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="game-btn 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="game-btn 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>
+    <button onclick="setGameMode('comet')" id="btnModeComet" class="game-btn 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>
@@ -188,13 +196,13 @@
         </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>
+          <button id="saveGeminiKeyBtn" class="game-btn 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)]">
+      <button id="visualizeButton" class="game-btn 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" />
@@ -217,8 +225,8 @@
 
   <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>
+      <button id="zoomOutButton" class="game-btn 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="game-btn 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>
@@ -274,6 +282,8 @@
     let userCentroidForComet = new THREE.Vector3(0,0,0);
     let bgParticles;
 
+    let meteors, meteorGeo;
+
     let db, auth, analytics, userId = null, appId = "neuronal-1f3b9", userProfile = null;
     let userMaps = {}, userProfileCache = {};
     let isAuthReady = false, isFontReady = false;
@@ -295,6 +305,43 @@
     let authMode = null;
     const normalizeString = (str) => { if (!str) return ""; return str.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); };
 
+    function spawnUIExplosion(x, y) {
+        const colors = ['#22d3ee', '#ffffff', '#ffd700'];
+        const particleCount = 20;
+        
+        for (let i = 0; i < particleCount; i++) {
+            const spark = document.createElement('div');
+            spark.classList.add('ui-spark');
+            const size = Math.random() * 4 + 2;
+            spark.style.width = `${size}px`;
+            spark.style.height = `${size}px`;
+            spark.style.left = `${x}px`;
+            spark.style.top = `${y}px`;
+            spark.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+            
+            document.body.appendChild(spark);
+            
+            const angle = Math.random() * Math.PI * 2;
+            const vel = Math.random() * 80 + 20;
+            const tx = Math.cos(angle) * vel;
+            const ty = Math.sin(angle) * vel;
+            
+            spark.animate([
+                { transform: 'translate(0,0) scale(1)', opacity: 1 },
+                { transform: `translate(${tx}px, ${ty}px) scale(0)`, opacity: 0 }
+            ], {
+                duration: 600,
+                easing: 'cubic-bezier(0, .9, .57, 1)',
+            }).onfinish = () => spark.remove();
+        }
+    }
+
+    document.addEventListener('click', (e) => {
+        if (e.target.closest('button') || e.target.closest('.game-btn')) {
+            spawnUIExplosion(e.clientX, e.clientY);
+        }
+    });
+
     window.setGameMode = function(mode) {
         gameState.mode = mode;
         const els = ['btnModeExplorer', 'btnModeMiner', 'btnModeBridge', 'btnModeComet'];
@@ -307,7 +354,7 @@
                 else if(mode==='comet') btn.classList.add('bg-red-900/30', 'text-red-400', 'border-red-500');
                 else btn.classList.add('bg-cyan-900/30', 'text-cyan-300', 'border-cyan-500');
             } else {
-                btn.className = "bg-black/30 border border-white/10 text-gray-500 text-[9px] py-2 rounded uppercase tracking-wider hover:bg-white/5 transition-all font-bold";
+                btn.className = "game-btn bg-black/30 border border-white/10 text-gray-500 text-[9px] py-2 rounded uppercase tracking-wider hover:bg-white/5 transition-all font-bold";
                 if(id === 'btnModeComet') btn.classList.add('w-full', 'mb-4');
             }
         });
@@ -332,6 +379,8 @@
             gameState.cometActive = false;
             if(trashGroup) { scene.remove(trashGroup); trashGroup = null; }
         }
+        
+        if(meteors) meteors.visible = (mode === 'miner');
     }
 
     const loader = new FontLoader();
@@ -548,7 +597,7 @@
         const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
         bloomPass.threshold = 0.15; 
         bloomPass.strength = 1.4;    
-        bloomPass.radius = 0.6;      
+        bloomPass.radius = 0.6;       
         
         composer = new THREE.EffectComposer(renderer);
         composer.addPass(renderScene);
@@ -562,6 +611,7 @@
 
         createAdvancedBackground();
         initAdvancedComet();
+        initMeteorShower();
 
         const visBtn = document.getElementById('visualizeButton');
         if(!visBtn.dataset.bound) {
@@ -588,6 +638,59 @@
         animate();
     }
 
+    function initMeteorShower() {
+        const count = 200;
+        const geo = new THREE.BufferGeometry();
+        const positions = new Float32Array(count * 3);
+        const velocities = []; 
+        
+        for(let i=0; i<count; i++) {
+            positions[i*3] = (Math.random()-0.5) * 800;
+            positions[i*3+1] = Math.random() * 400 + 100;
+            positions[i*3+2] = (Math.random()-0.5) * 800;
+            velocities.push({
+                x: (Math.random()-0.5) * 2,
+                y: -(Math.random() * 5 + 5),
+                z: (Math.random()-0.5) * 2
+            });
+        }
+        
+        geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        const mat = new THREE.PointsMaterial({
+            color: 0x00ffff,
+            size: 2,
+            transparent: true,
+            opacity: 0.8,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false
+        });
+        
+        meteors = new THREE.Points(geo, mat);
+        meteors.userData = { velocities: velocities };
+        meteors.visible = false; 
+        scene.add(meteors);
+    }
+
+    function updateMeteors() {
+        if(!meteors || !meteors.visible) return;
+        
+        const positions = meteors.geometry.attributes.position.array;
+        const vels = meteors.userData.velocities;
+        
+        for(let i=0; i<vels.length; i++) {
+            positions[i*3] += vels[i].x;
+            positions[i*3+1] += vels[i].y;
+            positions[i*3+2] += vels[i].z;
+            
+            if(positions[i*3+1] < -50) {
+                positions[i*3] = (Math.random()-0.5) * 800 + camera.position.x;
+                positions[i*3+1] = 400;
+                positions[i*3+2] = (Math.random()-0.5) * 800 + camera.position.z;
+            }
+        }
+        meteors.geometry.attributes.position.needsUpdate = true;
+    }
+
     function updateHUD() {
         document.getElementById('energyBar').style.width = gameState.energy + '%';
         document.getElementById('rankDisplay').innerText = gameState.rank;
@@ -787,6 +890,7 @@
         updateAdvancedComet(delta, time);
         updateRaycaster();
         drawMinimap();
+        if(gameState.mode === 'miner') updateMeteors();
 
         hashtagGroup.children.forEach(obj => {
             if (obj.userData.isText) {