Update style.css

style.css

@@ -1,28 +1,177 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Lilita One', cursive;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #a0e7e5; /* Light turquoise background */
+    color: #004d40; /* Dark teal text */
+    padding: 15px;
+    margin: 0;
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+    color: #ff6f61; /* Coral color */
+    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
+    margin-bottom: 5px;
+    font-size: 2em;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+p#prompt {
+    margin-bottom: 10px;
+    font-size: 1em;
+    text-align: center;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* 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 */
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+#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; /* 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; /* 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; /* 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; /* 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 to match grid width*/
+}
+
+/* Individual Axis Label Styling */
+.axis-label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    color: #5d4037; /* Darker brown */
+    flex-shrink: 0;
+    box-sizing: border-box;
+    /* Size set by JS */
+}
+.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; /* Old paper / sand color */
+    padding: 0;
+    position: relative;
+    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
+    /* Size & grid templates set by JS */
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+/* Grid Cell Styling */
+.grid-cell {
+    /* Size set by JS */
+    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.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; /* 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;
+}
+
+/* Animations */
+@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 {
+    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 */