:root {
    --bg-main: #e8f5e9;       /* Light Pastel Green */
    --bg-content: #1e3324;    /* Darker Pastel Green */
    --bg-tile: #f5f5dc;       /* Beige */
    --text-dark: #1e3324;     /* Dark, earthy green for text */
    --text-light: #f5f5dc;    /* Beige text for dark backgrounds */
    --accent: #81c784;       /* A slightly brighter green for buttons/accents */
    --accent-hover: #66bb6a;  /* A punchier green for hover */
    --border-color: #c8e6c9; /* A light border color */
}


/* General body styling from Google Fonts */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
}

/* Prevents page scrolling ONLY when interacting with the grid */
#grid-container {
    touch-action: none;
}

#message-overlay {
    z-index: 50;
}

/* Base styling for each letter tile on the grid */
.tile {
    /* The z-index ensures tiles are "below" the SVG lines but clickable */
    position: relative;
    z-index: 5;
    transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, transform 0.1s ease-in-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent; /* Add a transparent border to reserve space */
    background-color: var(--bg-tile);
}

/* SVG Line Styling */
#trace-svg line {
    stroke: rgba(0, 0, 0, 0.0); /* Start transparent */
    stroke-width: 8px;   /* Line thickness */
    stroke-linecap: round; /* Rounded line ends */
    transition: stroke 0.1s ease-in-out; /* Smooth color change */
}

#trace-svg line.potential {
    stroke: rgba(253, 224, 71, 0.5); /* yellow-400 with 70% opacity */
}

#trace-svg line.valid {
    stroke: rgba(74, 222, 160, 0.5); /* green-400 with 70% opacity */
}

#trace-svg line.invalid {
    stroke: rgba(248, 113, 113, 0.5); /* red-400 with 70% opacity */
}


/* Base class for a selected tile. */
.tile.selected {
    color: #1e293b; /* slate-800 */
}

/* Pastel Yellow: For a potential word or an already found word */
.tile.potential {
    background-color: #fef9c3; /* yellow-100 */
    border-color: #fde047; /* yellow-400 */
}

/* Pastel Green: For a valid, not-yet-found word */
.tile.valid {
    background-color: #dcfce7; /* green-100 */
    border-color: #4ade80; /* green-400 */
}

/* Pastel Red: For a brief flash on invalid submission */
.tile.invalid {
    background-color: #fee2e2; /* red-200 */
    border-color: #f87171; /* red-400 */
}

/* Styling for the placeholders in the 'Possible Words' list */
.word-placeholder {
    letter-spacing: 0.2em;
    color: white;
}

/* Styling for a word in the list that the user has successfully found */
.word-found {
    letter-spacing: normal;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

/* Custom scrollbar for the words list to make it look cleaner */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9; /* Tailwind's slate-100 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #64748b; /* Tailwind's slate-500 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #374151;
}

/* Styling for disabled buttons */
button:disabled {
    background-color: #94a3b8; /* Tailwind's slate-400 */
    cursor: not-allowed;
}