/* style.css (Complete - Final Version with Logo, Tooltips, Answer Area, Button FX) */

/* --- Base Styles & Dark Theme Variables --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --container-bg: #1e1e1e;
    --border-color: #3a3a3c;
    --input-bg: #2c2c2e;
    --button-bg: #4a4a4c;
    --button-hover-bg: #5a5a5e;
    --suggestion-hover-bg: #3a3a3c;
    --tooltip-bg: #2d2d2d;

    --color-green: #538d4e;
    --color-yellow: #b59f3b;
    --color-grey: #3a3a3c; /* Hint background grey */
    --color-lightgrey: #818384; /* Subtle text */

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6; /* Increased slightly */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px; /* More general padding */
    padding-top: 70px; /* Keep space for absolute logo */
    font-size: 16px; /* Base font size */
}

/* --- Logo Styles --- */
#logo-link {
    position: absolute; /* Position relative to the viewport */
    top: 15px;
    left: 15px;
    display: block;
    z-index: 10;
    transition: transform 0.2s ease-in-out;
}
#logo-link:hover {
    transform: scale(1.08); /* Slight zoom on hover */
}
#logo-img {
    display: block;
    height: 35px; /* Control size by height */
    width: auto;  /* Let width adjust automatically */
    max-width: 150px; /* Prevent excessive width */
    border-radius: 4px; /* Optional: slightly rounded corners */
}

/* --- Header, Main, Footer Layout --- */
header, main, footer {
    width: 100%;
    max-width: 700px; /* Slightly wider max-width */
    text-align: center;
}
header {
    margin-bottom: 35px; /* Increased spacing */
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px; /* Increased padding */
    position: relative;
    padding-top: 0;
}
header h1 {
    margin-top: 0;
    margin-bottom: 8px; /* Increased spacing */
    font-size: 2.6em; /* Slightly larger */
}
header p {
    color: var(--color-lightgrey);
    font-size: 1.1em;
}

main {
    flex-grow: 1;
}

footer {
    margin-top: 50px; /* Increased spacing */
    font-size: 0.85em;
    color: var(--color-lightgrey);
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

/* --- Message Area --- */
.message {
    min-height: 2.2em; /* Slightly taller */
    margin-bottom: 25px; /* Increased spacing */
    font-weight: bold;
    font-size: 1.1em;
}
.message.success { color: var(--color-green); }
.message.error { color: var(--color-yellow); }

/* --- Input Area & Autocomplete --- */
.input-container {
    position: relative;
    max-width: 480px; /* Slightly wider */
    margin: 0 auto 25px auto; /* Center container, reduced bottom margin */
}

#guess-form {
    display: flex;
    gap: 10px;
    justify-content: center;
}

#guess-input {
    padding: 12px 15px; /* Increased padding */
    font-size: 1.05em; /* Slightly larger */
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 5px; /* Slightly more rounded */
    flex-grow: 1;
}
#guess-input:focus {
    outline: none;
    border-color: var(--color-lightgrey);
}

/* Button Styles with Push Effect */
#guess-form button {
    padding: 12px 20px; /* Increased padding */
    font-size: 1em;
    background-color: var(--button-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    top: 0;
}
#guess-form button:not(:disabled):hover {
    background-color: var(--button-hover-bg);
    border-color: var(--color-lightgrey);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
#guess-form button:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background-color: var(--button-bg);
    transition-duration: 0.05s;
}
#guess-form button:disabled {
    opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none;
    background-color: var(--button-bg); border-color: var(--border-color);
}

/* Autocomplete Suggestions Container */
#suggestions-container {
    display: none;
    position: absolute;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 5px 5px;
    /* Adjust width relative to input container */
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    z-index: 10;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    font-size: 1em; /* Slightly larger */
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover, .suggestion-item.active { background-color: var(--suggestion-hover-bg); }
.suggestion-item .suggestion-country { font-size: 0.9em; color: var(--color-lightgrey); margin-left: 8px; }

/* --- Answer Reveal Area --- */
#answer-reveal-area {
    width: 100%;
    max-width: 700px; /* Match main content width */
    margin: 25px auto 20px auto; /* Spacing above and below */
    padding-top: 15px; /* Spacing from separator */
    border-top: 1px dashed var(--border-color); /* Separator line */
}
/* Styling for the answer row itself */
#answer-reveal-area .guess-row {
    opacity: 0.95; /* Slightly different opacity */
     /* You could add a specific border or background here */
     /* border: 1px solid var(--color-green); */
}
#answer-reveal-area .guess-row .guess-name {
    font-style: italic; /* Differentiate answer name */
}


/* --- Guesses Area --- */
#guesses-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Increased space between rows */
    width: 100%;
    margin-top: 0; /* Reduced margin as answer area provides space */
}

.guess-header,
.guess-row {
    display: grid;
    /* Adjusted columns: More base width for hints */
    grid-template-columns: minmax(150px, 2.5fr) repeat(4, minmax(65px, 1fr));
    gap: 8px; /* Increased space between hint boxes */
    align-items: stretch;
    text-align: center;
    padding: 2px 0;
}
.guess-header {
    font-weight: bold;
    font-size: 0.85em; /* Slightly larger */
    color: var(--color-lightgrey);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
    margin-bottom: 5px;
}
.guess-header > div {
    position: relative; display: flex; align-items: center; justify-content: center;
}
.guess-header > div:first-child { justify-content: flex-start; padding-left: 5px; }
.guess-row > div:first-child { text-align: left; padding-left: 5px; display: flex; align-items: center; }

.guess-name {
    font-weight: bold;
    padding: 5px;
    word-break: break-word;
    font-size: 1em; /* Match base font size */
}

.hint {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px; /* Increased hint box height */
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 5px; /* Slightly more rounded */
    color: var(--text-color);
    padding: 8px 5px; /* More padding */
    font-size: 0.9em; /* Adjusted for better fit */
    word-break: break-word;
    line-height: 1.3; /* Adjusted line height */
    text-align: center;
    font-weight: 500; /* Slightly bolder */
}

/* Hint Colors */
.hint.green { background-color: var(--color-green); border-color: var(--color-green);}
.hint.yellow { background-color: var(--color-yellow); border-color: var(--color-yellow);}
.hint.grey { background-color: var(--color-grey); border-color: var(--color-grey);}

/* --- Info Icons --- */
.info-icon {
    display: inline-block; margin-left: 5px; font-size: 1em;
    color: var(--color-lightgrey); cursor: help; user-select: none; line-height: 1;
}
.info-icon:hover { color: var(--text-color); }

/* --- Tooltip Popup --- */
#tooltip-popup {
    display: none; position: absolute; background-color: var(--tooltip-bg);
    color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px;
    padding: 10px 14px; /* Increased padding */ font-size: 0.9em; /* Slightly larger */
    max-width: 280px; z-index: 20; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    pointer-events: none; white-space: pre-wrap; /* Respect \n (converted to <br> by JS) */
}

/* --- Disabled State (Input) --- */
#guess-input:disabled { opacity: 0.6; cursor: not-allowed; }


/* --- Media Query for Smaller Screens --- */
@media screen and (max-width: 500px) {
     body {
         padding: 15px 8px; /* Reduce padding */
         padding-top: 60px; /* Adjust body padding for smaller logo */
         font-size: 15px; /* Slightly smaller base font on mobile */
     }
     header, main, footer {
        max-width: 100%; /* Allow full width */
     }
     #logo-link {
        top: 12px;
        left: 12px;
     }
     #logo-img {
        height: 30px;
     }
     header {
        margin-bottom: 20px;
     }
     header h1 {
        font-size: 1.8rem; /* Smaller title */
     }
     header p {
        font-size: 1em;
     }
     .input-container {
        max-width: 100%;
        margin-bottom: 25px;
     }
     #guess-input {
        padding: 10px 12px;
        font-size: 1em;
     }
     #guess-form button {
        padding: 10px 15px;
     }
     /* Adjust suggestion container to stay within bounds */
     #suggestions-container {
         left: 0;
         width: 100%;
     }
     #answer-reveal-area {
         margin-top: 20px;
         margin-bottom: 15px;
         padding-top: 8px;
     }
     #guesses-container {
         gap: 6px; /* Slightly tighter rows */
         margin-top: 0;
     }
     .guess-header, .guess-row {
         /* Adjust grid for smaller screens - allow hints to shrink more */
         grid-template-columns: minmax(100px, 2fr) repeat(4, minmax(45px, 1fr));
         gap: 4px;
     }
     .guess-header {
         font-size: 0.7em; /* Smaller header text */
     }
     .hint {
         min-height: 40px; /* Slightly shorter boxes */
         font-size: 0.75em; /* Smaller hint text */
         padding: 4px;
         line-height: 1.2;
         font-weight: 400; /* Less bold */
     }
     .guess-name {
         font-size: 0.9em;
     }
     #tooltip-popup {
        max-width: 240px; /* Narrower tooltip */
        font-size: 0.8em;
     }
}



/*
 * Universal Banner Styles (Red Alert)
 */

/* The main banner container */
.universal-banner-alert {
  /* Positioning */
  position: fixed; /* Keeps the banner at the top, even on scroll */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* Ensures the banner is on top of all other content */

  /* Styling */
  background-color: #D93025; /* A strong red for alerts */
  color: #fff; /* White text for high contrast */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  font-family: sans-serif;
}

/* Inner content wrapper for centering and padding */
.banner-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px; /* Slightly more padding for emphasis */
  text-align: center;
}

/* Style for the text within the banner */
.banner-content p {
  margin: 0;
  font-size: 1.1em; /* Slightly larger font for importance */
}

/*
 * IMPORTANT: Prevents the fixed banner from overlapping your page content.
 * Add padding to the top of your main content area.
 * Adjust the '70px' value if you change the banner's height.
 */