/* General Body and Container Styles */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    padding: 2vw;
    box-sizing: border-box;
    /* We can drop the explicit 'font-size: 16px;' here if we're using clamp() directly
       with px values or ensuring a base elsewhere. For simplicity and clarity,
       let's let the clamp() define the fluid base. */
}

/* This container will now define the base fluid font size for its children */
.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    text-align: center;
    width: 95vw;
    max-width: 1200px;
    margin-top: 20px;
    margin-bottom: 20px;

    /* REVISED CLAMP FOR GENERAL TEXT BASE */
    /* Min: 14px (good readable minimum for body text) */
    /* Preferred: 1rem + 0.5vw (scales based on viewport) */
    /* Max: 20px (prevents body text from getting too large on very wide screens) */
    font-size: clamp(14px, 1rem + 0.5vw, 20px);
}

/* Specific text elements will then scale relative to this container's fluid font-size */

h1 {
    /* Larger than the base, but still fluid */
    font-size: clamp(28px, 2rem + 2vw, 64px); /* Scales from ~28px to ~64px */
}

/* Screen Visibility Control (controlled by JavaScript) */
#setup-screen, #game-screen {
    margin-top: 20px;
}

/* Setup Screen Specifics */
#difficulty-select {
    padding: 0.8em;
    margin: 0 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 0.9em; /* Relative to container's font size */
}

.rules-box {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1.5em;
    margin-top: 20px;
    text-align: center;
    font-size: 0.9em; /* Slightly smaller than container's base for readability */
}

.rules-box > * {
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}

.rules-box h2 {
    margin-bottom: 15px;
    font-size: 1.5em; /* Relative to .rules-box font-size */
}

.rules-box h3 {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 1.2em; /* Relative to .rules-box font-size */
}

.rules-box .rule-item,
.rules-box p,
.rules-box .rule-block {
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 1em; /* Relative to .rules-box font-size */
}


/* General Button Styling */
button {
    padding: 0.8em 1.5em;
    margin: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #f0f0f0;
    color: black;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* REVISED BUTTON FONT SIZE */
    /* Min: 14px, Preferred: 0.9rem + 0.3vw, Max: 18px */
    font-size: clamp(14px, 0.9rem + 0.3vw, 18px);
}

button:hover {
    background-color: #e0e0e0;
}

/* Specific Button Themes (no changes needed here for responsiveness) */
#start-game-btn {
    background-color: #007bff;
    color: white;
    border: none;
}
#start-game-btn:hover {
    background-color: #0056b3;
}

#restart-game-btn {
    background-color: #7f4ef0;
    color: white;
    border: none;
}
#restart-game-btn:hover {
    background-color: #ec971f;
}

.red-button {
    background-color: #dc3545;
    color: white;
    border: none;
}
.red-button:hover {
    background-color: #c82333;
}

.yellow-button {
    background-color: #ffc107;
    color: black;
    border: none;
}
.yellow-button:hover {
    background-color: #e0a800;
}

.green-button {
    background-color: #28a745;
    color: white;
    border: none;
}
.green-button:hover {
    background-color: #1e7e34;
}

/* Main Game Layout using CSS Grid for PC */
.main-game-layout {
    display: grid;
    grid-template-columns: 0.2fr 0.6fr 0.2fr;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

/* Styles for the Middle Game Board Section */
.game-board-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

/* Styles for the Right Game Info Sidebar */
.game-info-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 0.9em; /* Slightly smaller than container's base */
    box-sizing: border-box;
}

/* Game Info Bar Elements (now within .game-info-sidebar) */
#timer-container {
}

.timer-label{
    font-weight: bold;
    font-size: clamp(.5em, 1.5vw, 1.5em); /* Relative to sidebar's font size */
}

#timer-display {
    font-size: clamp(.5em, 2vw, 1.5em);
    font-weight: bold;
}

.time-warning {
    color: red;
}

#score-board {
    /* REVISED SCOREBOARD FONT SIZE */
    font-size: clamp(.5em, 1.5vw, 1.5em);
    font-weight: bold;
}

#solvable-words-fraction-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.solvable-words-label {
    font-weight: bold;
    font-size: clamp(.5em, 1.5vw, 1.5em); /* Relative to sidebar's font size */
}

.fraction {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(.5em, 1.5vw, 1.5em);
    font-weight: bold;
}

.denominator-line {
    width: 90%;
    max-width: 120px;
    height: 2px;
    background-color: black;
}

#current-word-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: 1em; /* Slightly smaller than container's base */
}

.current-word-label{
    font-weight: bold;
    font-size: clamp(.5em, 1.5vw, 1.5em); /* Relative to sidebar's font size */
}


#current-word-display {
    font-weight: bold;
    font-size: clamp(.5em, 1.5vw, 1.5em);
    display: inline-block;
    padding: 5px;
}

.current-word-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 90%;
    max-width: 600px;
    margin-top: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.current-word-buttons button {
    margin: 0;
    padding: 1em 0.5em;
    font-size: inherit;
    white-space: nowrap;
    box-sizing: border-box;
}

#submit-word-btn {
    grid-column: 1 / span 1;
}

#clear-selection-btn {
    grid-column: 2 / span 1;
}

#pass-forfeit-btn {
    grid-column: 3 / span 1;
}

#restart-game-btn {
    grid-column: 1 / -1;
    margin-top: 15px;
}

/* Grid Styles */
#grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: 2px solid #333;
    padding: 5px;
    background-color: #e0e0e0;
    flex-shrink: 1;
    flex-grow: 0;
}

.grid-cell {
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* REVISED GRID CELL FONT SIZE */
    font-size: clamp(24px, 4.5vw, 48px); /* Scales from ~24px to ~48px */
}

.grid-cell:hover {
    background-color: #e9e9e9;
}

.grid-cell.selected {
    background-color: #a0e0a0;
    color: #000;
    transform: scale(0.95);
}

.grid-cell.disabled {
    background-color: #d0d0d0;
    cursor: not-allowed;
    opacity: 0.7;
}

#grid-container.game-over {
    pointer-events: none;
    opacity: 0.8;
}

/* Found Words Lists */
.found-words-list {
    width: 100%;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    max-height: 500px;
    overflow-y: auto;
    background-color: #f9f9f9;
    text-align: left;
    box-sizing: border-box;
    font-size: 1em; /* Slightly smaller than container's base */
}

.found-words-list h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #333;
    font-size: 1.2em; /* Relative to .found-words-list font size */
}

.found-words-list ul {
    list-style-type: none;
    padding: 0;
}

.found-words-list li {
    padding: 2px 0;
    border-bottom: 1px dotted #e0e0e0;
    line-height: 1.3;
    font-size: 1em; /* Relative to .found-words-list font size */
}
.found-words-list li:last-child {
    border-bottom: none;
}


/* Message Area */
#message-area {
    margin-top: 15px;
    margin-bottom: 10px;
    min-height: 20px;
    font-weight: bold;
    text-align: center;
    /* REVISED MESSAGE AREA FONT SIZE */
    font-size: clamp(16px, 1.5vw, 22px); /* Scales from ~16px to ~22px */
}

.message-area.message-success {
    color: green;
}

.message-area.message-error {
    color: red;
}

.message-area.message-info {
    color: blue;
}
.message-area.message-warning {
    color: yellow;
}


/* Missed Words Definitions */
#missed-words-definitions {
    margin-top: 10px;
    background-color: #f8f8f8;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    max-height: 250px;
    overflow-y: auto;
    text-align: left;
    width: 90%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9em; /* Slightly smaller than container's base */
}

#missed-words-definitions h3 {
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em; /* Relative to #missed-words-definitions font size */
    text-align: center;
}

#missed-words-definitions .missed-words-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

#missed-words-definitions .missed-words-list li {
    margin-bottom: 4px;
    line-height: 1.4;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 4px;
    font-size: 1em; /* Relative to #missed-words-definitions font size */
}
#missed-words-definitions .missed-words-list li:last-child {
    border-bottom: none;
}


/* Media Queries for Mobile Responsiveness */
@media (max-width: 992px) {
    .main-game-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .game-info-sidebar {
        order: 1;
    }

    .game-board-section {
        order: 2;
    }

    .found-words-list {
        order: 3;
        max-height: 200px;
    }

    #grid-container {
        width: 95vw;
        max-width: 350px;
        gap: 3px;
        padding: 3px;
    }

    /* Adjust container's base font size for mobile if desired, or let it fluidly scale */
    /* Example: Tweak the clamp values for .container specifically on mobile */
    .container {
        font-size: clamp(14px, 1rem + 0.7vw, 18px); /* Slightly more aggressive scaling on mobile */
    }

    /* Grid cell font size on mobile */
    .grid-cell {
        font-size: clamp(20px, 5.5vw, 36px); /* Adjusted for mobile grid cells */
    }

    .current-word-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 95%;
    }

    #submit-word-btn {
        grid-column: 1 / span 1;
    }

    #clear-selection-btn {
        grid-column: 2 / span 1;
    }

    #pass-forfeit-btn {
        grid-column: 1 / span 2;
        margin-top: 0;
    }

    #restart-game-btn {
        grid-column: 1 / -1;
        margin-top: 15px;
    }

    /* Rules box font sizes for mobile - These are relative to .rules-box font-size,
       which itself is relative to .container's fluid font-size */
    .rules-box h2 {
        font-size: 1.3em;
    }
    .rules-box h3 {
        font-size: 1.1em;
    }
    .rules-box .rule-item,
    .rules-box p,
    .rules-box .rule-block {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
        font-size: clamp(12px, 1rem + 0.8vw, 16px); /* Even smaller base on very small screens */
    }

    #grid-container {
        max-width: 300px;
    }

    .current-word-buttons {
        grid-template-columns: 1fr;
    }
    #submit-word-btn, #clear-selection-btn, #pass-forfeit-btn, #restart-game-btn {
        grid-column: 1 / -1;
    }
    #pass-forfeit-btn {
        margin-top: 5px;
    }
    #restart-game-btn {
        margin-top: 10px;
    }
}