From 78f16c68b29085cba4190da178b3911876a9dd06 Mon Sep 17 00:00:00 2001
From: DeNNiiInc <dennii.inc@gmail.com>
Date: Tue, 23 Dec 2025 19:11:23 +1100
Subject: [PATCH] UI: Increase grid line visibility for better accessibility on
 dark screens

---
 styles.css | 61 ++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/styles.css b/styles.css
index bda98f6..8052539 100644
--- a/styles.css
+++ b/styles.css
@@ -16,7 +16,7 @@
   --border-medium: rgba(255, 255, 255, 0.2);
   --success: #10b981;
   --danger: #ef4444;
-  --grid-line: rgba(147, 51, 234, 0.2);
+  --grid-line: rgba(147, 51, 234, 0.5);
   --grid-bg: #0f1420;
   --cell-hover: rgba(147, 51, 234, 0.1);
   --win-highlight: hsl(270, 70%, 60%);
@@ -342,7 +342,7 @@ body {
   height: 4px;
   background: var(--grid-line);
   border-radius: 50%;
-  opacity: 0.3;
+  opacity: 0.6;
 }
 
 .cell:hover:not(.occupied) {
@@ -482,7 +482,7 @@ body {
   color: var(--text-secondary);
   font-weight: 500;
   margin-top: 2px;
-  
+
   /* Text Truncation */
   white-space: nowrap;
   overflow: hidden;
@@ -646,7 +646,7 @@ body {
   color: var(--text-primary);
   font-size: 0.95rem;
   font-weight: 600;
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
   padding: 0.25rem 0.75rem;
   background: var(--bg-tertiary);
   border-radius: 6px;
@@ -675,7 +675,8 @@ body {
 }
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -700,7 +701,8 @@ body {
 }
 
 @keyframes pulse-error {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
     transform: scale(1);
   }
@@ -802,11 +804,29 @@ body {
 }
 
 /* Responsive Cell Sizes */
-.game-board[data-size="15"] .cell { width: 30px; height: 30px; font-size: 1.5rem; }
-.game-board[data-size="20"] .cell { width: 25px; height: 25px; font-size: 1.2rem; }
-.game-board[data-size="25"] .cell { width: 20px; height: 20px; font-size: 0.9rem; }
-.game-board[data-size="50"] .cell { width: 12px; height: 12px; font-size: 0.6rem; }
-.game-board[data-size="50"] .cell::after { font-size: 0.6rem !important; } /* Adjust ghost size for tiny cells */
+.game-board[data-size="15"] .cell {
+  width: 30px;
+  height: 30px;
+  font-size: 1.5rem;
+}
+.game-board[data-size="20"] .cell {
+  width: 25px;
+  height: 25px;
+  font-size: 1.2rem;
+}
+.game-board[data-size="25"] .cell {
+  width: 20px;
+  height: 20px;
+  font-size: 0.9rem;
+}
+.game-board[data-size="50"] .cell {
+  width: 12px;
+  height: 12px;
+  font-size: 0.6rem;
+}
+.game-board[data-size="50"] .cell::after {
+  font-size: 0.6rem !important;
+} /* Adjust ghost size for tiny cells */
 
 /* Responsive Design */
 @media (max-width: 1200px) {
@@ -1040,7 +1060,7 @@ body {
 .db-detail-value {
   color: var(--text-primary);
   font-weight: 600;
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
   font-size: 0.95rem;
 }
 
@@ -1074,7 +1094,7 @@ body {
   padding: 0.5rem 0.75rem;
   margin-bottom: 0.5rem;
   border-radius: 6px;
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
   font-size: 0.85rem;
   line-height: 1.4;
   border-left: 3px solid transparent;
@@ -1125,7 +1145,11 @@ body {
 
 /* SQL Error Banner (Testing Phase) */
 .sql-error-banner {
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
+  background: linear-gradient(
+    135deg,
+    rgba(239, 68, 68, 0.1),
+    rgba(245, 158, 11, 0.1)
+  );
   border: 2px solid #ef4444;
   border-radius: 12px;
   margin: 1rem 0;
@@ -1135,7 +1159,8 @@ body {
 }
 
 @keyframes errorPulse {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
   }
   50% {
@@ -1158,7 +1183,8 @@ body {
 }
 
 @keyframes shake {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateX(0);
   }
   25% {
@@ -1190,7 +1216,7 @@ body {
   background: rgba(239, 68, 68, 0.1);
   border-radius: 8px;
   border-left: 4px solid #ef4444;
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
 }
 
 .sql-error-details {
@@ -1214,4 +1240,3 @@ body {
     grid-template-columns: 1fr;
   }
 }
-