Make ghost piece outlines more vibrant

- Increase border opacity from 50% to 80%
- Increase fill opacity from 12.5% to 25%
- Thicken border from 2px to 3px

public/index.html

@@ -63,7 +63,7 @@
   <script src="/socket.io/socket.io.js"></script>
   <script src="js/network.js?v=4"></script>
   <script src="js/game.js?v=4"></script>
-  <script src="js/renderer.js?v=4"></script>
+  <script src="js/renderer.js?v=5"></script>
   <script src="js/ui.js?v=4"></script>
   <script src="js/app.js?v=4"></script>
 </body>

public/js/renderer.js

@@ -233,13 +233,13 @@ class TetrisRenderer {
     const px = x * CELL_SIZE;
     const py = y * CELL_SIZE;
 
-    // Semi-transparent fill with outlined border effect
-    ctx.strokeStyle = color + '80'; // 50% opacity border
-    ctx.lineWidth = 2;
+    // Vibrant outlined border effect
+    ctx.strokeStyle = color + 'cc'; // 80% opacity border
+    ctx.lineWidth = 3;
     ctx.strokeRect(px + 2, py + 2, CELL_SIZE - 4, CELL_SIZE - 4);
 
-    // Light fill inside
-    ctx.fillStyle = color + '20'; // 12.5% opacity
+    // More visible fill inside
+    ctx.fillStyle = color + '40'; // 25% opacity
     ctx.fillRect(px + 3, py + 3, CELL_SIZE - 6, CELL_SIZE - 6);
   }