Update index.html

Author: infrareactive

index.html

@@ -8,7 +8,7 @@
   <script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script>
-  
+
   <style>
     :root {
       --neon-cyan: #00ffff;
@@ -25,7 +25,7 @@
       -webkit-background-clip: text; -webkit-text-fill-color: transparent;
       margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px;
     }
-    
+
     #lobbyPanel {
       max-width: 500px; margin: 10px auto; border: 1px solid var(--neon-cyan);
       background: rgba(0, 255, 255, 0.05); border-radius: 8px; padding: 15px;
@@ -47,13 +47,13 @@
       padding: 0.8rem 1.5rem; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: 0.3s; width: 180px;
     }
     .mode-btn.active-mode { border-color: var(--neon-cyan); color: #000; background: var(--neon-cyan); box-shadow: 0 0 20px var(--neon-cyan); }
-    
+
     .scoreboard { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; font-size: 1.2rem; }
     .score-box { background: var(--glass); border: 1px solid #333; padding: 0.5rem 1.5rem; border-radius: 4px; min-width: 130px; text-align: center; transition: 0.3s; }
     .score-box.active { border-color: currentColor; box-shadow: 0 0 15px currentColor; background: rgba(255,255,255,0.1); }
     .score-white { color: #fff; }
     .score-black { color: var(--neon-magenta); }
-    
+
     .status-display { text-align: center; font-size: 1.1rem; color: #888; min-height: 1.5em; margin-bottom: 10px; }
     .status-display.alert { color: var(--alert-red); animation: textPulse 1s infinite; }
     @keyframes textPulse { 0%{opacity:1} 50%{opacity:0.7} 100%{opacity:1} }
@@ -64,21 +64,21 @@
       border: 4px solid var(--neon-cyan); background: #000; transform: rotateX(5deg); transition: 0.3s;
     }
     .chessboard.danger-state { border-color: var(--alert-red); box-shadow: 0 0 30px rgba(255,0,0,0.3); }
-    
+
     .square { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
     .square.light { background: #2a2a2a; }
     .square.dark { background: #1a1a1a; }
     .square.valid-move::after { content: ''; position: absolute; width: 15px; height: 15px; background: rgba(0, 255, 0, 0.4); border-radius: 50%; box-shadow: 0 0 10px #0f0; }
     .square.capture-move::after { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(255, 0, 0, 0.3); box-shadow: inset 0 0 15px #f00; }
     .square.selected { background: rgba(0, 255, 255, 0.2) !important; box-shadow: inset 0 0 15px var(--neon-cyan); }
-    
+
     .piece { font-size: clamp(2rem, 9vw, 3.5rem); user-select: none; z-index: 2; transition: transform 0.2s; }
     .piece.white { color: #e0e0e0; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
     .piece.black { color: #ff00ff; text-shadow: 0 0 10px rgba(255,0,255,0.5); }
-    
+
     .cyber-btn { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--neon-cyan); color: var(--neon-cyan); padding: 0.5rem 1.5rem; text-transform: uppercase; cursor: pointer; transition: 0.3s; margin: 0 5px; font-weight: bold; }
     .cyber-btn:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 15px var(--neon-cyan); }
-    
+
     #chatToggle { position: fixed; bottom: 20px; right: 20px; z-index: 1000; border-radius: 50%; width: 50px; height: 50px; }
     #chatPanel { position: fixed; top: 0; right: -320px; width: 320px; height: 100vh; background: rgba(10, 10, 10, 0.98); border-left: 2px solid var(--neon-cyan); z-index: 999; transition: 0.4s; display: flex; flex-direction: column; padding: 15px; }
     #chatPanel.open { right: 0; }
@@ -92,7 +92,7 @@
   <section id="cyberChessSection">
     <div class="container">
       <h2 class="chess-title">Cyber Chess v12</h2>
-      
+
       <div id="lobbyPanel">
         <div class="d-flex justify-content-between align-items-center">
             <small id="status" class="text-info">Connecting to Matrix...</small>
@@ -140,7 +140,7 @@ <h5 class="text-info">SECURE CHAT</h5>
     const firebaseConfig = { databaseURL: "https://cyber-chess-lobby-default-rtdb.firebaseio.com" };
     firebase.initializeApp(firebaseConfig);
     const db = firebase.database();
-    
+
     const lobby = {
         updateList(snapshot) {
             const listEl = document.getElementById('lobbyList');
@@ -234,7 +234,7 @@ <h5 class="text-info">SECURE CHAT</h5>
         this.render(); this.updateUI();
       },
       setMode(m) { this.mode = m; document.getElementById('btnPvP').classList.toggle('active-mode', m==='pvp'); document.getElementById('btnAI').classList.toggle('active-mode', m==='ai'); this.init(); },
-      
+
       evaluateBoard(b) {
         let total = 0;
         for(let r=0; r<8; r++) for(let c=0; c<8; c++) {
@@ -308,7 +308,7 @@ <h5 class="text-info">SECURE CHAT</h5>
         const type = p.toLowerCase(); const dx = t.c-f.c, dy = t.r-f.r;
         const target = this.board[t.r][t.c];
         if(target && (p===p.toLowerCase()) === (target===target.toLowerCase())) return false;
-        
+
         let geo = false;
         if(type==='p') {
           const dir = p==='p'?-1:1;