Board is now being displayed

secret/snake/styles.css

@@ -35,7 +35,7 @@ html {
 
 /* Screen */
 .screen {
-    background-color: black; /* Game Boy green screen */
+    background-color: black;
     border: 4px solid #0f380f;
     width: 90%;
     height: 55%;
@@ -55,7 +55,7 @@ html {
 
 /* Titles */
 h1 {
-    font-size: 2rem; /* Increased font size */
+    font-size: 2rem;
     margin-bottom: 10px;
     text-transform: uppercase;
     color: #9bbc0f;
@@ -69,6 +69,45 @@ h1 {
     color: white;
 }
 
+/* Grid container */
+#grid {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */
+    grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */
+    width: 400px; /* Adjust as needed */
+    height: 400px; /* Adjust as needed */
+    border: 2px solid #0f380f;
+    margin: 20px auto;
+    /* initially hide */
+    display: none;
+}
+
+/* Individual cells */
+.cell {
+    width: 100%;
+    height: 100%;
+}
+
+.cell.light-green {
+    background-color: #9bbc0f;
+}
+
+.cell.dark-green {
+    background-color: #0f380f;
+}
+
+/* Snake styling */
+.snake {
+    background-color: #e600ff; /* Snake color */
+    z-index: 1000;
+}
+
+/* Apple styling */
+.apple {
+    background-color: red; /* Apple color */
+    z-index: 999;
+}
+
 /* Controls Section */
 .controls {
     margin-top: 20px;
@@ -81,8 +120,8 @@ h1 {
 /* D-Pad */
 .dpad {
     position: relative;
-    width: 120px; /* Increased size */
-    height: 120px; /* Increased size */
+    width: 120px;
+    height: 120px;
 }
 
 /* Base Styling for D-Pad Buttons */
@@ -94,7 +133,7 @@ h1 {
     position: absolute;
     width: 42px;
     height: 42px;
-    font-size: 1.5rem; /* Increased size */
+    font-size: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -135,7 +174,7 @@ h1 {
     transform: translate(-50%, -50%);
     width: 40px;
     height: 40px;
-    border: 2px solid #9cbc0f00;
+    border: 2px solid transparent;
     z-index: 0;
     border-radius: 5px;
 }
@@ -145,7 +184,7 @@ h1 {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: 200px; /* Increased height */
+    height: 200px;
 }
 
 .btn {
@@ -155,7 +194,7 @@ h1 {
     border-radius: 50%;
     width: 60px;
     height: 60px;
-    font-size: 1.8rem; /* Increased font size */
+    font-size: 1.8rem;
     cursor: pointer;
     transition: transform 0.1s, background-color 0.2s;
 }
@@ -169,6 +208,7 @@ h1 {
     transform: scale(0.9);
 }
 
+/* Start Button */
 .start-btn {
     background-color: #0f380f;
     color: #9bbc0f;
@@ -191,27 +231,8 @@ h1 {
     transform: scale(0.9);
 }
 
+/* Hidden Canvas for Debugging or Fallback */
 canvas {
     display: none;
     z-index: 1000;
 }
-
-#grid {
-    display: grid;
-    width: 200px; /* 10 cells x 20px */
-    height: 200px; /* 10 cells x 20px */
-    grid-template-columns: repeat(10, 1fr);
-    grid-template-rows: repeat(10, 1fr);
-    display: none;
-}
-
-.cell {
-    border: 1px solid purple;
-    width: 20px;
-    height: 20px;
-    background-color: white;
-}
-
-.row {
-    display: contents; /* For proper grid layout */
-}