From 94b524bcd705f62095740a626920cb7d22b12e7b Mon Sep 17 00:00:00 2001
From: Josue Zamudio <josuezamudio1@gmail.com>
Date: Fri, 20 Mar 2026 09:41:14 -0700
Subject: [PATCH] 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     |  2 +-
 public/js/renderer.js | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/index.html b/public/index.html
index 79149e6..e04b386 100644
--- a/public/index.html
+++ b/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>
diff --git a/public/js/renderer.js b/public/js/renderer.js
index b5cd111..6326244 100644
--- a/public/js/renderer.js
+++ b/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);
   }