style.css

body {
    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 {
    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; /* 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;
}

/* 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 */