html { 
    height: 100%; /* Ensure html takes full height */
    overflow: hidden; /* Prevent html element scrolling */
}

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    height: 100%; /* Make body fill html */
    overflow-y: auto; /* Allow vertical scroll within body */
    position: relative; /* Establish positioning context */
    margin: 0;
    background-color: #f0f0f0;
}

.game-container { 
    /* Removed width, max-width, padding, shadow, etc. */
    /* Now primarily a logical container for header/modals */
    /* Max-width is controlled by top-bar inside */
    /* width: 100%; Removed as potentially interfering with display: contents */
    display: contents; /* Treat container as non-existent for layout */
}

.top-bar {
    width: 100%;
    position: sticky; /* Default: sticky (better for mobile) */
    top: 0; 
    left: 0;
    right: 0; 
    z-index: 100;
    max-width: 800px; 
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #eee; /* Ensure solid background */
    border-bottom: 1px solid #ccc;
    height: 60px; 
}

.nav-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-group-left {
    justify-content: flex-start;
}
.nav-group-right {
    justify-content: flex-end;
}

.score-container {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    flex-grow: 1;
    display: flex; /* Add flex display */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically if needed */
    gap: 2px; /* Optional: Small gap between title and score */
    padding-top: 10px; /* Add padding above the logo */
}

.score-display {
    font-size: 0.84em; /* 70% of 1.2em */
    font-weight: normal; /* Maybe remove bold from score */
    font-family: 'Lora', serif; /* Apply Lora font */
}

.title-keys {
    display: inline-flex; /* Arrange keys in a row */
    gap: 3px; /* Space between keys */
    /* margin-right: 10px; Removed - no longer needed */
    /* vertical-align: middle; Removed - no longer needed */
}

.title-key {
    display: inline-block;
    padding: 5px 8px;
    border: 1px solid #a0a0a0;
    border-radius: 4px;
    font-weight: bold;
    color: #5C4033; /* Dark Brown */
    text-align: center;
    box-shadow: 0 2px 0 #888;
    position: relative;
    top: -1px;
}

.nav-button {
    padding: 5px 10px;
    cursor: pointer;
}

.word-sections { 
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 5px; /* Keep original internal padding */
    padding-top: 20px; /* Reduce padding-top to match top-bar height (60px) */
    background-color: #fff;
    flex-grow: 1;
}

/* --- Layout Control Classes for .word-sections --- */
.word-sections.layout-vertical {
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.word-sections.layout-horizontal {
    flex-direction: row;
    justify-content: space-between; /* Spread sections */
    align-items: flex-start;
    gap: 20px; /* Gap between sections */
}

/* --- .word-section Styles Based on Parent Layout --- */
.layout-vertical .word-section {
    width: 90%;
    max-width: 450px; /* Slightly wider max for vertical */
    flex: none; /* Don't flex grow in column */
    margin-bottom: 0; /* Gap handled by parent */
}

.layout-horizontal .word-section {
    flex: 1; /* Allow equal stretching */
    max-width: 32%; /* Limit growth */
    margin-bottom: 0;
}

/* --- .word-display Styles Based on Parent Layout --- */
.layout-vertical .word-display {
    flex-wrap: wrap; /* Allow wrapping in vertical */
    justify-content: center;
}

.layout-horizontal .word-display {
    flex-wrap: nowrap; /* CRITICAL: Prevent wrapping letters */
    justify-content: center;
}

.word-section {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 150px; /* Keep a minimum width */
    /* flex: 1; Removed, handled by layout classes */
    /* max-width: 30%; Removed, handled by layout classes */
    box-sizing: border-box;
}

.snippet {
    font-family: 'Lora', serif;
    font-style: italic;
    color: #555;
    margin-bottom: 10px;
    min-height: 3em;
    font-size: 0.9em;
}

.word-display {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    flex-wrap: wrap; 
    justify-content: center;
    min-height: 30px;
}

/* Style inputs to look like letter boxes */
input.letter-box {
    /* Reset Appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    border: 1px solid #aaa;
    background-color: white;
    padding: 0;
    margin: 0;
    /* Box Model */
    width: 21px; /* Reduced from 22px */
    height: 21px; /* Reduced from 22px */
    /* Text Styling */
    font-size: 0.85em; /* Reduced from 0.9em */
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    caret-color: transparent; /* Hide the cursor */
}

/* Color coding for letter boxes (now inputs) */
/* Readonly state for revealed letters */
input.letter-box:read-only,
input.letter-box.revealed {
    background-color: #e0ffe0; /* Light green background */
    color: #006400; /* Dark green text */
    border-color: #90ee90;
    cursor: default;
}

input.letter-box.manual {
    background-color: #e0e0ff; /* Light blue background */
    color: #00008B; /* Dark blue text */
    border-color: #add8e6;
    caret-color: #00008B; /* Show blue cursor for manual */
}

/* Keep focus style */
input.letter-box:focus {
    border-color: #007bff;
    box-shadow: 0 0 3px #007bff;
    outline: none;
}

.guess-input {
    width: 80%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.guess-button {
    padding: 8px 15px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    margin-top: 10px; /* Add some space above the button */
    display: none; /* Hide button by default */
}

.guess-button.visible {
    display: block; /* Show button when conditions are met */
}

.keyboard-panel {
    width: 100%; /* Take full width */
    box-sizing: border-box;
    padding: 20px;
    background-color: #eee;
    border-top: 1px solid #ccc;
    /* margin-top: auto; Removed */
    margin-top: 20px; /* Add some space above footer */
}

#keyboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    max-width: 800px; /* Center keyboard content like header */
    margin: 0 auto; /* Center the keys within the panel */
}

.key {
    padding: 10px;
    min-width: 40px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    position: relative;
    font-weight: bold;
}

.key.used {
    background-color: #ddd;
    cursor: default;
}

.key .score {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 0.7em;
    color: #777;
}

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1000;
}

.splash-screen.hidden {
    display: none;
}

.splash-screen h2 {
    margin-bottom: 20px;
}

.splash-screen p {
    margin: 10px 0;
    font-size: 1.2em;
}

.share-buttons button,
.nav-splash-button {
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}

.nav-splash-button {
    display: none; /* Hide nav buttons by default */
}

/* Responsive Design - REMOVE specific desktop overrides for position */
/* @media (min-width: 768px) { */ /* Apply fixed positioning for larger screens */
    /* .top-bar { */
        /* position: fixed; */ /* Switch back to fixed for desktop - REMOVED */
    /* } */

    /* .word-sections { */
        /* margin-top: 60px; */ /* Re-add margin when header is fixed - REMOVED */
    /* } */
/* } */

/* Shake animation for incorrect guess */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Modal Base Styles (Apply to both splash and how-to-play) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.modal.hidden {
    opacity: 0;
    pointer-events: none; /* Prevent interaction when hidden */
    /* display: none; // Using opacity for transition */
}

.modal-content {
    background-color: #fff;
    color: #333; /* Text color for modals */
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    max-width: 90%;
    width: 500px; /* Max width for modal content */
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    color: #888;
}

/* Splash Screen Specific Styles (If needed beyond base .modal) */
.splash-screen .modal-content {
     /* Example: different background or text color if needed */
     background-color: #333; 
     color: #fff;
}

#how-to-play-modal p {
    margin: 15px 0;
    line-height: 1.6;
}

#how-to-play-modal strong {
    color: #007bff; /* Highlight key numbers */
}

/* Blur effect for background content when modal is open */
.blur-effect {
    filter: blur(4px);
    transition: filter 0.3s ease-in-out;
    /* Prevent interaction with blurred content */
    pointer-events: none;
    user-select: none; 
}

/* --- Responsive Adjustments for Top Bar --- */
@media (max-width: 600px) {
    .top-bar {
        padding-left: 10px; /* Reduce side padding */
        padding-right: 10px;
        height: auto; /* Allow height to adjust */
        min-height: 50px; /* Set a minimum height */
    }

    .nav-group {
        gap: 3px; /* Reduce gap in nav groups */
    }

    .nav-button {
        padding: 4px 8px; /* Smaller buttons */
        font-size: 0.9em;
    }

    .score-container {
        font-size: 1.1em; /* Slightly smaller base font for logo area */
        padding-top: 5px; /* Adjust top padding if needed */
        gap: 1px; /* Reduce gap between title/score */
    }

    .score-display {
        font-size: 0.8em; /* Adjust score size relative to container */
    }

    .title-keys {
        gap: 2px; /* Reduce gap between title keys */
    }

    .title-key {
        padding: 3px 5px; /* Smaller title keys */
        font-size: 0.9em;
        box-shadow: 0 1px 0 #888; /* Adjust shadow */
        flex-shrink: 1; /* Allow keys to shrink if needed */
    }
}