/* General Body and Container Styling */
body {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    background-color: #0d1117;
    color: #c9d1d9;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 15px;
    box-sizing: border-box;
}
#game-container {
    background-color: #161b22;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    max-width: none;
    width: 100%;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    line-height: 1.5;
}

/* Titles and Headings */
h1 {
    color: #58a6ff;
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 20px;
    border-bottom: 2px solid #58a6ff;
    padding-bottom: 10px;
    text-shadow: 0 0 8px rgba(88, 166, 255, 0.4);
}
.section-title {
    color: #79c0ff;
    font-size: 1.25em;
    margin-top: 10px;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 4px solid #79c0ff;
}

/* Message Box Styling */
#player-feedback-messages {
    background-color: #21262d;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9em;
    color: #b1bdcb;
    border: 1px solid #30363d;
}
/* Hide the feedback message div if it's empty */
#player-feedback-messages:empty {
    display: none;
}
#player-feedback-messages p {
    margin: 3px 0;
}

/* Morpheme Display Styling */
#morpheme-display {
    background-color: #21262d;
    padding: 12px;
    border-radius: 6px;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    border: 1px solid #30363d;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}
.morpheme-category {
    background-color: #21262d;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 10px;
    flex-basis: calc(33.333% - 10px);
    box-sizing: border-box;
    margin-bottom: 0;
    border-bottom: none;
}

/* Remove the last-child border if categories are side-by-side */
#morpheme-display .morpheme-category:last-child {
    border-bottom: none;
}
/* Specific adjustment for category title within the side-by-side boxes */
.morpheme-category h3 {
    color: #a371f7;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.05em;
    border-bottom: 1px dashed #30363d;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.morpheme-category:last-of-type h3 {
     border-bottom: 1px dashed #30363d;
}

.morpheme-item {
    position: relative;
    background-color: #1a1e24;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 0.88em;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, z-index 0.1s ease;
    z-index: 1;
}
.morpheme-item:hover {
    transform: translateY(-2px);
}
/* When a morpheme item is active (its popup is shown) */
.morpheme-item-active {
    z-index: 10;
}
.morpheme-item:last-child {
    margin-bottom: 0;
}
.morpheme-item .morpheme-title-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.morpheme-item .morpheme-main-text {
    color: #58a6ff;
    font-weight: bold;
    flex-grow: 1;
    line-height: 1.2;
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
}
.morpheme-item .morpheme-main-text .allomorph-base {
    white-space: nowrap;
}
.morpheme-item .morpheme-main-text .allomorph-list {
    display: contents;
}
.morpheme-item .morpheme-main-text .allomorph-item {
    white-space: nowrap;
}

.morpheme-item .morpheme-score-multiplier {
    font-size: 0.85em;
    color: #6aab73;
    font-weight: bold;
    flex-shrink: 0;
    margin-left: 10px;
}


.morpheme-meaning-popup {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2a2f36;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 10px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: none;
    color: #c9d1d9;
    font-size: 0.85em;
    line-height: 1.4;
    text-align: left;
}

.morpheme-meaning-popup::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #2a2f36 transparent;
}
/* Hide popups by default */
.morpheme-meaning-popup {
    display: none;
}
.morpheme-meaning-popup strong {
    color: #79c0ff;
}
.morpheme-meaning-popup .origin-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #30363d;
}

/* Input Area Styling */
#input-area {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 6px;
    background-color: #0d1117;
    color: #c9d1d9;
    font-size: 0.95em;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}
button {
    padding: 10px 20px;
    background-color: #238636;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.1s;
    white-space: nowrap;
}
button:hover {
    background-color: #2ea043;
    transform: translateY(-2px);
}
button:disabled {
    background-color: #30363d;
    cursor: not-allowed;
    color: #8b949e;
    transform: none;
}

/* Scoreboard Styling */
#scoreboard {
    background-color: #21262d;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #30363d;
    font-size: 1em;
    color: #b1bdcb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 15px;
}

#scoreboard span {
    display: flex;
    align-items: center;
    gap: 5px;
}

#scoreboard #player-score,
#scoreboard #words-found,
#scoreboard #incorrect-guesses {
    font-weight: bold;
    color: #58a6ff;
}
#incorrect-guesses {
    color: #f85149;
}
#guessed-words-display {
    background-color: #21262d;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #30363d;
    font-size: 0.9em;
    color: #b1bdcb;
    line-height: 1.4;
    display: none;
    margin-top: 15px;
}
#guessed-words-display .section-title {
    margin-top: 0;
    margin-bottom: 10px;
    color: #79c0ff;
    font-size: 1.25em;
    padding-left: 8px;
    border-left: 4px solid #79c0ff;
}
#guessed-words-display .guessed-word-item {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #30363d;
}
#guessed-words-display .guessed-word-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}
#guessed-words-display .guessed-word {
    color: #58a6ff;
    font-weight: bold;
    margin-right: 5px;
}
#guessed-words-display .guessed-score {
    color: #6aab73;
    font-weight: bold;
}
#guessed-words-display .guessed-definition {
    font-style: italic;
    color: #8b949e;
}
.guessed-breakdown {
    font-size: 0.85em;
    color: #b1bdcb;
    margin-top: 5px;
}

/* NEW: Incorrect Guesses Display Styling */
#incorrect-guesses-display {
    background-color: #21262d;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #30363d;
    font-size: 0.9em;
    color: #b1bdcb;
    line-height: 1.4;
    display: none;
    margin-top: 15px;

}
#incorrect-guesses-display .section-title {
    margin-top: 0;
    margin-bottom: 10px;
    color: #f85149;
    font-size: 1.25em;
    padding-left: 8px;
    border-left: 4px solid #f85149;
}
#incorrect-guesses-display .incorrect-guess-item {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #30363d;
}
#incorrect-guesses-display .incorrect-guess-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}
#incorrect-guesses-display .incorrect-guess-word {
    color: #f85149;
    font-weight: bold;
    margin-right: 5px;
}
/* NEW: Style for the reason text in incorrect guesses */
#incorrect-guesses-display .incorrect-guess-reason {
    font-style: italic;
    color: #8b949e;
}

/* NEW: All Possible Words Display Styling */
#all-possible-words-display {
    background-color: #21262d;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #30363d;
    font-size: 0.9em;
    color: #b1bdcb;
    line-height: 1.4;
    margin-top: 15px;
    display: none;
}
#all-possible-words-display .section-title {
    margin-top: 0;
    margin-bottom: 10px;
    color: #79c0ff;
    font-size: 1.25em;
    padding-left: 8px;
    border-left: 4px solid #79c0ff;
}
/* Table-like structure for possible words */
#all-possible-words-display .word-table {
    display: grid;
    /* Adjusted column widths: Word gets more space (2.5fr), Score (0.8fr), Breakdown (1.2fr), Definition (2.5fr) */
    grid-template-columns: minmax(120px, 2.5fr) minmax(70px, 0.8fr) minmax(80px, 1.2fr) minmax(120px, 2.5fr);
    gap: 5px 10px;
    align-items: start;
    padding-bottom: 5px;
    padding-right: 5px;
    border-bottom: 1px dashed #30363d;
}
#all-possible-words-display .word-table:last-of-type {
    border-bottom: none;
}
#all-possible-words-display .word-table-header {
    font-weight: bold;
    color: #c9d1d9;
    border-bottom: 1px solid #58a6ff;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
/* ADJUSTED: word-cell for horizontal scrolling */
#all-possible-words-display .word-cell {
    padding: 2px 0;
    white-space: normal;
    word-break: break-word;
    scrollbar-width: thin;
    scrollbar-color: #444 #21262d;
}
/* Webkit scrollbar styling for .word-cell */
#all-possible-words-display .word-cell::-webkit-scrollbar {
    height: 6px;
}
#all-possible-words-display .word-cell::-webkit-scrollbar-track {
    background: #21262d;
    border-radius: 10px;
}
#all-possible-words-display .word-cell::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}
#all-possible-words-display .word-cell::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.word-cell.word {
    font-weight: bold;
    color: #e6edf3;
}
.word-cell.score {
    color: #6aab73;
}
.word-cell.breakdown {
    color: #b1bdcb;
    font-size: 0.85em;
}
.word-cell.definition {
    font-style: italic;
    color: #8b949e;
    font-size: 0.85em;
}
/* Styling for words the player actually found */
.word-cell.found-word {
    color: #58a6ff;
}
.word-cell.found-score {
    color: #38b44d;
}

#game-end-message {
    margin-top: 20px;
    padding: 15px;
    background-color: #21262d;
    color: #c9d1d9;
    border: 1px solid #30363d;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    display: none;
}
#game-end-message .final-score {
    color: #6aab73;
    font-weight: bold;
}

/* NEW: Game Description Styling */
#game-description {
    background-color: #21262d;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #30363d;
    font-size: 0.95em;
    color: #c9d1d9;
    margin-bottom: 15px;
    line-height: 1.6;
}
#game-description p {
    margin: 0 0 8px 0;
}
#game-description p:last-child {
    margin-bottom: 0;
}
#game-description strong {
    color: #a371f7;
}
#game-description em {
    font-style: normal;
    color: #58a6ff;
}
#game-description ul {
    margin-top: 8px;
    margin-bottom: 0;
    padding-left: 20px;
    list-style-type: none;
}
#game-description ul li {
    margin-bottom: 4px;
    position: relative;
    padding-left: 15px;
}
#game-description ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #b1bdcb;
}
#game-info-footer {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #30363d;
    text-align: center;
    font-size: 0.8em;
    color: #8b949e;
}
#game-info-footer p {
    margin: 5px 0;
}
#game-info-footer a {
    color: #58a6ff;
    text-decoration: none;
}
#game-info-footer a:hover {
    text-decoration: underline;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 600px) {
    #game-container {
        padding: 15px;
        gap: 10px;
    }

    h1 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }

    #game-description {
        font-size: 0.9em;
        padding: 10px;
    }

    #morpheme-display {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .morpheme-category {
        flex-basis: auto;
        margin-bottom: 0;
    }

    .morpheme-category h3 {
        font-size: 1em;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .morpheme-item {
        padding: 6px;
        font-size: 0.8em;
    }

    .morpheme-item .morpheme-title-line {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 2px;
    }

    .morpheme-item .morpheme-main-text {
        margin-bottom: 3px;
        gap: 0 3px;
    }

    .morpheme-item .morpheme-score-multiplier {
        margin-left: 0;
        font-size: 0.75em;
    }

    .morpheme-meaning-popup {
        min-width: unset;
        max-width: 90vw;
        left: 0;
        transform: translateX(0);
    }

    .morpheme-meaning-popup::before {
        left: 20px;
        transform: translateX(0);
    }

    #input-area {
        flex-direction: column;
        gap: 8px;
    }

    input[type="text"], button {
        font-size: 0.9em;
        padding: 8px;
    }

    #scoreboard {
        font-size: 0.9em;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    #guessed-words-display,
    #all-possible-words-display {
        padding: 10px;
        font-size: 0.85em;
    }

    #guessed-words-display .section-title,
    #all-possible-words-display .section-title {
        font-size: 1.1em;
    }

    #all-possible-words-display .word-table {
        grid-template-columns: 1.5fr 0.5fr 1fr 2fr;
    }

    .word-cell.word, .word-cell.score, .word-cell.breakdown, .word-cell.definition {
        font-size: 0.8em;
    }
}