/* word-game.css */

/* main-layout, container, main-nav는 style.css에서 처리되므로 여기서는 제거 */

.word-game-area {
    width: 100%;
    /* The container already provides padding and max-width.
       This area will take up 100% of the container's width. */
    text-align: center;
    font-family: 'DungGeunMo', sans-serif;
    /* Apply game-specific background, similar to math-game.css's .math-board */
    background-color: var(--game-bg-color);
    border: 2px solid var(--game-grid-color);
    border-radius: 12px;
    padding: 20px; /* Add some padding inside the game area */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    min-height: 300px; /* Ensure a minimum height for the game area */
}


#question-text {
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Responsive font size */
    margin-bottom: 2rem; /* Increased margin for better spacing */
    min-height: 50px; /* Ensure space for question */
    color: var(--text-color); /* Use theme variable */
}

#options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1rem; /* Adjust margin-top to separate from question */
    width: 100%; /* Options should take full width of word-game-area */
    max-width: 400px; /* Optional: limit max width for options for better readability */
}

.option-button {
    font-family: 'DungGeunMo', sans-serif;
    background-color: var(--panel-color); /* Use theme variable for panel-like background */
    color: var(--text-color); /* Use theme variable */
    border: 4px solid #000; /* Consistent pixel art border */
    padding: 12px 20px;
    font-size: 1.1rem; /* Use rem for better scaling */
    cursor: pointer;
    box-shadow: 4px 4px 0px #000; /* Consistent pixel art shadow */
    transition: transform 0.1s, box-shadow 0.1s;
    width: 100%; /* Ensure buttons take full width */
    box-sizing: border-box;
    white-space: nowrap; /* Prevent text wrapping */
}

.option-button:hover {
    background-color: var(--accent-color); /* Use theme variable for accent color */
    color: white; /* Text color should remain white on accent background */
}

.option-button:active {
    transform: translate(2px, 2px); /* Consistent active state */
    box-shadow: 2px 2px 0px #000;
}

.option-button.correct {
    background-color: var(--info-color); /* Green for correct answer, use info-color for consistency */
    color: white;
    border-color: #000; /* Ensure border remains black */
}

.option-button.wrong {
    background-color: #e74c3c; /* Red for wrong answer */
    color: white;
    border-color: #000; /* Ensure border remains black */
}

/* Start button is now handled by .btn class in style.css, but keep specific margin for layout */
#start-button {
    margin-top: 2rem; /* Add more margin from options */
    /* .btn class already provides most styles,
       just ensure proper spacing. */
}

/* Hearts display uses game-info and info-box from style.css */
/* Just set color for the hearts symbol itself */
#hearts {
    color: var(--info-color); /* Use info-color for consistency */
    font-weight: bold;
}

/* Responsive adjustments already handled by clamp() and main-layout for overall page */
/* specific adjustments for word-game-area if needed */
@media (max-width: 600px) {
    .word-game-area {
        min-height: 250px;
        padding: 15px;
    }

    #question-text {
        font-size: clamp(1.2rem, 4vw, 2rem);
    }

    .option-button {
        font-size: 1rem;
        padding: 10px 15px;
    }

    #options-container {
        max-width: 100%; /* Allow full width on smaller screens */
    }
}