/* Basic Reset & Global Styles*/ 

@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Delius&family=Honk&family=Sixtyfour+Convergence&display=swap');

* {
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin: 0;
    padding: 0;
}

body {
   /* font-family: 'Arial', sans-serif; */
    font-family: 'Delius', sans-serif;
    background-color: #e0f2f7;
    color: #333;
    display: flex;
    flex-direction: column; /* CHANGE: Make body a column flex container */
    /* REMOVE: justify-content: center; */ /* No longer needed as game-container has auto margins */
    /* REMOVE: align-items: center; */ /* No longer needed, game-container will center with auto margins */
    min-height: 100vh; /* CHANGE: Use min-height so body can grow taller than viewport */
    height: auto; /* Ensure height adapts to content */
    margin: 0;
    overflow-y: auto; /* Keep this to allow body to scroll if content overflows */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

#game-container {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: 30px;
    text-align: center;
    max-width: 600px;
    width: 90%;
    /* Keep this for horizontal centering and top/bottom spacing relative to the body */
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 20px; /* Keep this for spacing between its direct children */
    
    /* REMOVE THESE LINES to allow game-container to grow as needed */
    /* max-height: calc(100vh - 40px); */
    /* overflow-y: auto; */
    /* REMOVE THIS LINE (it was removed in last step, just confirming its absence) */
    /* min-height: 500px; */
    
    -webkit-overflow-scrolling: touch; /* This is fine to keep */
}

/* Add this to manage the layout of top-left and top-right buttons */
#top-row-buttons {
    display: flex;
    justify-content: space-between; /* Pushes children to opposite ends */
    align-items: center;
    width: 100%;
    margin-bottom: 20px; /* Space below this row */
    /* If your #share-button-container already has absolute positioning, you might need to adjust or remove it. */
}

/*Styles for the Info button */
#info-button {
    padding: 10px 15px;
    font-size: 0.9em;
    font-weight: bold;
    color: #fff;
    background-color: #27ae60; /* A nice green color */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* margin-right: auto will push it to the far left in a flex container if nothing else is left of it */
    margin-right: auto;
}

#info-button:hover {
    background-color: #2ecc71; /* Lighter green on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

#info-button:active {
    background-color: #2c3e50; /* Darker on click */
    transform: translateY(0);
}

/* Ensure share button container aligns correctly within the new flex container */
#share-button-container {
    position: static;
    margin-left: auto;
    /* We'll remove 'display: none;' and let JavaScript handle visibility */
}

/* Update share button style - combine with existing .key.disabled style */
#share-button {
    background-color: #1DA1F2; /* Twitter blue */
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 15px; /* Smaller padding for a less intrusive button */
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#share-button:hover:not(.disabled) {
    background-color: #0c85d0;
}

/* Re-apply disabled style for the share button as well */
#share-button.disabled {
    background-color: #ccc; /* Grey out disabled share button */
    cursor: not-allowed;
    opacity: 0.7;
} 

#current-streak-display,
#max-streak-display {
    font-weight: bold;
    color: #2c3e50; /* A dark blue-grey for emphasis */
}

/* General Modal Styles */
.modal {
    display: none; /* This is the correct default: hidden */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    
    /* These properties are for centering, and they will only take effect
       when 'display' is set to 'flex' by JavaScript. */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 80%; /* Responsive width */
    max-width: 450px; /* Maximum width for larger screens */
    position: relative; /* Needed for positioning the close button */
    text-align: center;
    color: #333; /* Default text color */
}

.modal-content h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.modal-content p {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.5; /* Improved readability for paragraphs */
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

h1 {
    font-family: 'Sixtyfour Convergence', sans-serif; /* Your chosen heading font */
    /*font-size: 3.5em;*/
    font-size: 3.5em;
    color: #333;
    margin-bottom: 20px;
    text-transform: uppercase; /* Bebas Neue looks good uppercase */
    letter-spacing: 2px;
}

#game-status {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 0px; /* Keep this to separate from emoji clue */
    margin-top: 0; /* Ensure no unwanted top margin */
}

#emoji-clue {
    font-size: 3em; /* Very large for visibility */
    margin-bottom: 0px;
    letter-spacing: 5px; /* Space out emojis a bit */
}

#answer-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px; /* This gap is for spacing *within* answer-display (between words/blanks) */
    /* Ensure this is 0 to rely on #game-container's gap */
    margin-bottom: 0;
    min-height: 40px;
    align-items: center;
}

/*Style for the word container */
.word-container {
    display: flex; /* Makes letters inside stay in a row */
    /* Remove gap here if you want gap on #answer-display to control space between words */
    /* And rely on individual .letter-blank for internal spacing if necessary */
    gap: 8px; /* Space between letters within a word */
    /* white-space: nowrap; - not strictly needed if using flex for word-container,
       but is a good reminder for similar issues with inline elements */
}

/* This style will apply to spans we generate with JS for each letter/blank */
.letter-blank {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 45px;
    border-bottom: 3px solid #4a90e2;
    font-size: 1.8em;
    font-weight: bold;
    text-transform: uppercase;
    color: #2a6a8c; /* Default color of guessed letters */
}

/* Style for spaces and punctuation (no underline) */
.letter-blank.space,
.letter-blank.punctuation {
    border-bottom: none;
    width: 20px; /* Smaller width for spaces */
    color: #666; /* Lighter color for punctuation */
    font-size: 1.5em;
    pointer-events: none;
}


#hangman-area {
    /* REMOVE the margin-top: 80px; as it's no longer needed in this position */
    /* It's now at the top, so it doesn't need to push away previous content. */
    margin-bottom: 0px; /* Keep a bottom margin to separate from the game status/clue */
    margin-top: 0; /* Explicitly set to 0 or remove */
}

#hangman-visual {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto 0 auto; /* Center the image; margin-bottom is handled by #hangman-area */
    transition: opacity 0.5s ease-in-out;
    max-height: 200px;
    object-fit: contain;
}

#keyboard {
    display: grid;
    /* Use minmax to allow columns to be at least 40px but stretch to fill available space equally */
    /* auto-fit will create as many columns as can fit, auto-fill will create as many as possible even if empty */
    /* For a fixed number of keys per row, repeat(X, 1fr) is usually best after defining base key size */
    grid-template-columns: repeat(10, minmax(40px, 1fr)); /* Keys at least 30px, then share space */
    gap: 8px;
    margin-top: 0px;
    justify-content: center; /* Centers the whole grid within its container if total width is less than max-width */
    /* Add a max-width to the keyboard itself to prevent keys from becoming too wide on large screens */
    max-width: 600px; /* Aligns with game-container max-width for better visual consistency */
    margin-left: auto; /* Center the keyboard element itself */
    margin-right: auto;
}

#keyboard-second-row {
    display: grid;
    grid-template-columns: repeat(9, minmax(40px, 1fr));
    gap: 8px;
    margin-top: 0px;
    justify-content: center;
    max-width: 600px; /* Match main keyboard max-width */
    margin-left: auto;
    margin-right: auto;
}

#keyboard-third-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(40px, 1fr));
    gap: 8px;
    margin-top: 0px;
    justify-content: center;
    max-width: 600px; /* Match main keyboard max-width */
    margin-left: auto;
    margin-right: auto;
}

#keyboard-fourth-row {
    display: grid;
    /* 10 columns for numbers (1-9, then 0) */
    grid-template-columns: repeat(10, minmax(40px, 1fr));
    gap: 8px;
    margin-top: 0; /* Rely on parent gap for spacing */
    justify-content: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#countdown-timer {
    font-size: 0.9em;
    font-weight: bold;
    color: #4a90e2; /* A nice blue color */
    text-align: center;
    min-width: 150px;
}

/* IMPORTANT: You no longer need `min-width` on the `.key` rule itself for width control,
   as it's now handled by the grid's column definition. You can keep it if you want
   a slight buffer, but it's not strictly necessary for this approach. */
.key {
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 15px 10px; /* Keep padding for internal spacing */
    font-size: 1.2em; /* This is the key: font size should also be flexible */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    /* REMOVE min-width: 45px; as the grid column will control this */
    /*
    min-width: 45px;
    */
    /* Instead of fixed min-width, let flex/grid handle it.
       If you really want a minimum size, it should be on the grid-template-columns
       or use clamp() for font-size.
    */
    /* Optional: Use `min-width` on the key if the `1fr` causes them to become too small.
       However, the `font-size` will also need to adjust. */
}

.key:hover:not(.disabled):not(.correct):not(.incorrect) {
    background-color: #357ABD; /* Darker blue on hover for non-guessed, non-disabled keys */
    transform: translateY(-2px); /* Slight lift on hover */
}

.key:active:not(.disabled):not(.correct):not(.incorrect) {
    transform: translateY(0); /* Press effect for non-guessed, non-disabled keys */
}

/* Styles for guessed keys */
.key.correct {
    background-color: #27ae60; /* Green for correct guesses */
    cursor: default; /* No pointer cursor after guessing */
}

/*Hover for correct keys */
.key.correct:hover {
    background-color: #1e8449; /* Slightly darker green on hover */
}

.key.incorrect {
    background-color: #c0392b; /* Red for incorrect guesses */
    cursor: default; /* No pointer cursor after guessing */
}

/*Hover for incorrect keys */
.key.incorrect:hover {
    background-color: #a93226; /* Slightly darker red on hover */
}

.key.disabled {
    background-color: #ccc; /* Grey out disabled keys (this should still override hovers) */
    cursor: not-allowed;
    opacity: 0.7;
}

.hidden {
    display: none !important; /* Use !important to override other display properties */
}


/* Let's reintroduce media queries for font size and padding for keys to handle smaller screens more gracefully */
@media (max-width: 600px) { /* For very small phones in portrait */
     #keyboard { grid-template-columns: repeat(10, minmax(25px, 1fr)); }
     #keyboard-second-row { grid-template-columns: repeat(9, minmax(25px, 1fr)); }
     #keyboard-third-row { grid-template-columns: repeat(7, minmax(25px, 1fr)); }
     #keyboard-fourth-row { grid-template-columns: repeat(10, minmax(25px, 1fr)); }
     .key {
        font-size: 0.75em;
        padding: 8px 4px;
     }
     #keyboard, #keyboard-second-row, #keyboard-third-row, #keyboard-fourth-row {
        gap: 4px;
        margin-top: 0;
    }

    h1 {
  
     font-size: 1.5em;
  
    }

    .letter-blank {
  
        width: 15px;
        height: 25px;
        border-bottom: 3px solid #4a90e2;
        font-size: 0.8em;
  
    }

    /* Style for spaces and punctuation (no underline) */
    .letter-blank.space,
    .letter-blank.punctuation {
  
        width: 5px; /* Smaller width for spaces */
        font-size: 0.5em;
      
    }

}