Update style.css

style.css

@@ -3,83 +3,104 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: #a0e7e5;
-    color: #004d40;
-    padding: 10px; /* Reduced padding slightly */
+    background-color: #a0e7e5; /* Light turquoise background */
+    color: #004d40; /* Dark teal text */
+    padding: 15px;
     margin: 0;
-    min-height: 100vh; /* Ensure body takes at least full height */
 }
 
-h1 { /* ... */ }
-p#prompt { /* ... */ }
-#score-display { /* ... */ }
-#instructions { /* ... */ }
+h1 {
+    color: #ff6f61; /* Coral color */
+    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
+    margin-bottom: 5px;
+    font-size: 2em;
+}
+
+p#prompt {
+    margin-bottom: 10px;
+    font-size: 1em;
+    text-align: center;
+}
+
+/* Score Display Styling */
+#score-display {
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #1a237e; /* Dark blue */
+    background-color: #e8eaf6; /* Light indigo */
+    padding: 5px 15px;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    border: 2px solid #5c6bc0; /* Indigo border */
+}
+
+#instructions {
+    background-color: #fff3cd; /* Light yellow */
+    padding: 8px 15px;
+    border-radius: 15px;
+    border: 3px dashed #f5a623; /* Dashed orange border */
+    font-size: 1.1em;
+    margin-bottom: 15px;
+    text-align: center;
+    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
+}
+
+#instructions strong { color: #d9534f; font-size: 1.1em; }
+#instructions #item-name { color: #00796b; font-style: italic; }
+
 
 /* Container for grid and Y-axis */
 #game-area {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 0;
-    /* Make it take more width, but not necessarily full width */
-    width: auto; /* Allow it to size based on content */
-    max-width: 90vw; /* Limit max width to 90% of viewport width */
-    /* Centering it if max-width applies */
-    margin-left: auto;
-    margin-right: auto;
+    display: flex; /* Place Y-axis next to grid */
+    align-items: flex-start; /* Align items at the top */
+    margin-bottom: 0; /* No space before X-axis container */
 }
 
 /* Y-Axis Label Container */
 #y-axis-labels {
     display: flex;
-    flex-direction: column-reverse;
-    margin-right: 5px;
-    padding-top: 0;
-    flex-shrink: 0;
+    flex-direction: column-reverse; /* Labels go 1, 2, 3... upwards */
+    margin-right: 5px; /* Space between Y labels and grid */
+    padding-top: 0; /* Align with grid top edge */
+    flex-shrink: 0; /* Prevent shrinking */
     /* Height set by JS */
 }
 
 /* X-Axis Label Container Wrapper */
 #x-axis-container {
-    display: flex;
-    margin-top: 5px;
-    width: auto; /* Size based on content */
-    max-width: 90vw; /* Match game-area max-width */
-    /* Centering */
-    margin-left: auto;
-    margin-right: auto;
-    /* Adjust position slightly if needed based on exact centering */
-     justify-content: flex-start; /* Align inner content to the start */
+    display: flex; /* Use flex to manage inner content alignment */
+    /* Width set by JS to include Y-axis space + grid width */
+    margin-top: 5px; /* Space between grid and X labels */
 }
 
 /* Inner X-Axis Labels Div */
 #x-axis-labels {
-    display: flex;
+    display: flex; /* Ensure labels stay in a row */
     margin-left: calc(20px + 5px); /* Width of Y labels (20px) + its margin (5px) */
     flex-shrink: 0;
-    /* Width set by JS */
+    /* Width set by JS to match grid width*/
 }
 
-
 /* Individual Axis Label Styling */
 .axis-label {
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: bold;
-    color: #5d4037;
+    color: #5d4037; /* Darker brown */
     flex-shrink: 0;
     box-sizing: border-box;
     /* Size set by JS */
 }
-.y-axis-label { width: 20px; }
-.x-axis-label { height: 20px; }
+.y-axis-label { width: 20px; } /* Fixed width */
+.x-axis-label { height: 20px; } /* Fixed height */
 
 
 /* Grid Container */
 #grid-container {
     /* display: grid; <== SET BY JAVASCRIPT */
     border: 3px solid #8b4513;
-    background-color: #fdf5e6;
+    background-color: #fdf5e6; /* Old paper / sand color */
     padding: 0;
     position: relative;
     box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
@@ -90,32 +111,67 @@ p#prompt { /* ... */ }
 /* Grid Cell Styling */
 .grid-cell {
     /* Size set by JS */
-    border: 1px solid #bcaaa4;
+    border: 1px solid #bcaaa4; /* Light brown grid lines */
     box-sizing: border-box;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 1.4em; /* Adjust emoji size if needed for new cell size */
-    color: black;
+    font-size: 1.5em; /* Emoji size */
+    color: black; /* Default text color (emoji) */
     position: relative;
     transition: background-color 0.2s ease;
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
-    overflow: hidden;
+    overflow: hidden; /* Hide potential text overflow */
+}
+/* Make visually empty if no emoji */
+.grid-cell:empty {
+    color: transparent;
+}
+
+/* Hover effect only on clickable cells */
+.grid-cell:hover:not(.found-item) {
+    background-color: #d7ccc8;
+}
+
+/* Correct Cell Styling - item just found */
+.grid-cell.just-found {
+    background-color: #a5d6a7 !important; /* Green highlight */
+    animation: pulse 0.5s;
+}
+/* Correct Cell Styling - item found previously */
+.grid-cell.found-item {
+     background-color: #c8e6c9; /* Lighter green, no animation */
+     cursor: not-allowed; /* Indicate it's done */
+}
+
+/* Incorrect Cell Styling */
+.grid-cell.incorrect {
+    background-color: #ef9a9a !important;
+    animation: shake 0.5s;
 }
-.grid-cell:empty { color: transparent; }
-.grid-cell:hover:not(.found-item) { background-color: #d7ccc8; }
-.grid-cell.just-found { background-color: #a5d6a7 !important; animation: pulse 0.5s; }
-.grid-cell.found-item { background-color: #c8e6c9; cursor: not-allowed; }
-.grid-cell.incorrect { background-color: #ef9a9a !important; animation: shake 0.5s; }
 
 /* Animations */
-@keyframes shake { /* same */ }
-@keyframes pulse { /* same */ }
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
 
 /* Feedback Text */
-#feedback { /* same */ }
-#feedback.correct-feedback { /* same */ }
-#feedback.incorrect-feedback { /* same */ }
+#feedback {
+    margin-top: 15px;
+    font-size: 1.2em;
+    font-weight: bold;
+    min-height: 25px; /* Prevent layout shift */
+    text-align: center;
+}
+#feedback.correct-feedback { color: #2e7d32; } /* Dark Green */
+#feedback.incorrect-feedback { color: #c62828; } /* Dark Red */