help

secret/snake/styles.css

@@ -1,3 +1,4 @@
+/* Base Reset */
 body,
 html {
     margin: 0;
@@ -10,8 +11,9 @@ html {
     height: 100vh;
 }
 
+/* GameBoy Layout */
 .gameboy {
-    background-color: #5900ff;
+    background-color: #5f4c82; /* Game Boy Color purple shell */
     width: 441px;
     height: 735px;
     border-radius: 20px;
@@ -31,8 +33,9 @@ html {
     }
 }
 
+/* Screen */
 .screen {
-    background-color: black;
+    background-color: black; /* Game Boy green screen */
     border: 4px solid #0f380f;
     width: 90%;
     height: 55%;
@@ -45,28 +48,28 @@ html {
     overflow: hidden;
 }
 
+.game {
+    text-align: center;
+    width: 90%;
+}
+
+/* Titles */
 h1 {
-    font-size: 2rem;
+    font-size: 2rem; /* Increased font size */
     margin-bottom: 10px;
     text-transform: uppercase;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
     color: #9bbc0f;
 }
 
 .description,
-.description p,
-.description h1 {
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+.description p {
     font-size: 1.2rem;
     margin: 0 auto;
     padding: 0 auto;
-    color: #ffffff;
+    color: white;
 }
 
+/* Controls Section */
 .controls {
     margin-top: 20px;
     display: flex;
@@ -75,12 +78,14 @@ h1 {
     align-items: center;
 }
 
+/* D-Pad */
 .dpad {
     position: relative;
-    width: 120px;
-    height: 120px;
+    width: 120px; /* Increased size */
+    height: 120px; /* Increased size */
 }
 
+/* Base Styling for D-Pad Buttons */
 .dpad-btn {
     background-color: #0f380f;
     color: #9bbc0f;
@@ -89,7 +94,7 @@ h1 {
     position: absolute;
     width: 42px;
     height: 42px;
-    font-size: 1.5rem;
+    font-size: 1.5rem; /* Increased size */
     display: flex;
     justify-content: center;
     align-items: center;
@@ -121,6 +126,7 @@ h1 {
     transform: translateY(-50%);
 }
 
+/* D-Pad Center to Connect Buttons */
 .dpad-center {
     background-color: #0f380f;
     position: absolute;
@@ -134,11 +140,12 @@ h1 {
     border-radius: 5px;
 }
 
+/* A and B Buttons */
 .action-buttons {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: 200px;
+    height: 200px; /* Increased height */
 }
 
 .btn {
@@ -148,7 +155,7 @@ h1 {
     border-radius: 50%;
     width: 60px;
     height: 60px;
-    font-size: 1.8rem;
+    font-size: 1.8rem; /* Increased font size */
     cursor: pointer;
     transition: transform 0.1s, background-color 0.2s;
 }
@@ -183,3 +190,27 @@ h1 {
 .start-btn:active {
     transform: scale(0.9);
 }
+
+canvas {
+    display: none;
+}
+
+#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 */
+}