:root {
    --primary-bg: #000;
    --text-color: #fff;
    --secondary-text-color: rgba(255, 255, 255, 0.6);
    --accent-color: #6499C3;
    --accent-color2: #B81F26;
    --button-bg-color: rgba(255, 255, 255, 0.08);
    --button-border-color: rgba(255, 255, 255, 0.06);
    --leaderboard-item-border: rgba(255, 255, 255, 0.02);
    --animation-color: #4D0A05; /* UPDATED: Darker red color */
    --error-color: #B81F26;
    --input-bg: rgba(255, 255, 255, 0.025);
    --input-border: rgba(255, 255, 255, 0.05);
}

/* * DEFAULT BODY STYLE 
 * This applies to index.html and onboarding.html
 */
body {
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
    /* DEFAULT BACKGROUND */
    background: linear-gradient(135deg, var(--primary-bg) 0%, #0A0A0A 100%);
    color: var(--text-color);
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* RE-ADDED: Ensure index and onboarding do not scroll */
    overflow: hidden; 
    text-align: center;
}

/* Specific body style for gameover.html */
#gameover-body {
    /* The body is now fixed and centered, preventing full page scroll. */
    overflow: hidden; /* CRUCIAL FIX: Prevent body scroll */
    justify-content: center; /* REVERT: Center the content vertically */
    min-height: 100svh; /* Use 100svh for viewport height consistency */
    
    /* Apply the final dark background directly */
    background: linear-gradient(135deg, var(--primary-bg) 0%, #0A0A0A 100%);
}

/* NEW: Overlay for the slow fade effect */
#red-flash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Start with the solid error color */
    background-color: var(--animation-color);
    opacity: 1; /* Fully visible at the start */
    z-index: 100; /* Ensure it is above the content */
    /* KEY FIX: Animate ONLY opacity. Revealing the black body underneath creates the "fade to black" effect. */
    transition: opacity 5s ease-out; 
}

/* NEW: Class to trigger the fade out effect */
#red-flash-overlay.fade-out-to-black {
    /* Set the final state for the transition */
    opacity: 0; 
    /* REMOVED: background-color: var(--primary-bg); - This was causing the transition issue. */
}

.container {
    max-width: 380px;
    width: 100%;
    /* FIX 3: Reduced padding for better fit */
    padding: 0px 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    /* FIX 4: Reduced the primary gap between elements */
    gap: 15px;
    /* FIX 5: Allow container to stretch vertically to fill space */
    flex-shrink: 0;
    /* ADD: Make the container grow to fill the center space on gameover-body */
    flex-grow: 1; 
    box-sizing: border-box;
    /* Ensure the container is visible above the overlay */
    position: relative; 
    z-index: 101;
    /* REVISED: Use a single max-height to respect the viewport boundary and allow the container to shrink if content is small. */
    /* UPDATED: Ensure the max-height leaves space for the footer at the bottom. */
    max-height: calc(100svh - 60px); /* Increased from 50px to 60px as a safer margin */ 
    min-height: 0; /* Ensures it can shrink if necessary */
}

h1 {
    font-size: 2em;
    margin-bottom: 6px;
    margin-top: 0;
    font-weight: 700;
    letter-spacing: -0.04em;
}

/* Specific h1 style for gameover.html */
#gameover-h1 {
    /* FIX 8: Reduced size and margin to save vertical space */
    font-size: 2.2em;
    margin-bottom: 0; 
}

p.subtitle, .container > p {
    font-size: 0.8em;
    color: var(--secondary-text-color);
    line-height: 1.3;
}

.container > p {
    margin-bottom: 20px; /* Reduced margin */
}

#game-over-score {
    font-size: 1.1em; /* Reduced size */
    margin: 5px 0 10px 0; /* Reduced margins */
    color: var(--accent-color2);
    font-weight: 600;
}

button, .play-button {
    width: 100%; /* Default is full width for single buttons on other pages */
    padding: 12px 20px;
    background-color: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    border-radius: 22px;
    color: var(--text-color);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Ensure padding is included */
}

button:active, .play-button:active {
    transform: scale(0.99);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    outline: none;
}

button:hover, .play-button:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

/* --- START INDEX BUTTON GROUP FIXES --- */

/* 1. Container for the two side-by-side buttons */
.index-button-group {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    gap: 15px; /* Spacing between the two buttons */
    /* Must be treated as one item in the column flow, maintaining the 20px gap from .container */
}

/* 2. Override the full-width property for buttons inside the group */
.index-button-group .play-button {
    width: auto; /* Set buttons to be content-width */
    flex-grow: 0; /* Prevent them from stretching to fill space */
    white-space: nowrap; /* Prevent button text from wrapping */
}

/* --- END INDEX BUTTON GROUP FIXES --- */

/* --- START GAMEOVER BUTTON GROUP FIXES (Updated) --- */
.gameover-button-group {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    flex-direction: column; /* Default stack vertically for three buttons */
    /* FIX 9: Reduced gap */
    gap: 8px;
}

.gameover-button-group button {
    width: 100%;
    flex: none;
}

/* NEW: Specific styling for the 'restart-button' */
#restart-button {
    /* Override the default dark button background */
    background-color: var(--text-color); /* Use the white text color variable */
    /* Change text color to the primary background color (black) for contrast */
    color: var(--primary-bg);
    /* Override the border to be the primary background color (black) */
    border-color: var(--primary-bg); 
}

/* Medium screens and up: make the last two buttons align horizontally */
@media (min-width: 320px) {
    .gameover-button-group {
        flex-direction: column; /* Still stack top button */
    }

    /* Wrap the last two buttons to put them side-by-side */
    .gameover-button-group:has(#home-button, #onboarding-button) {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        gap: 8px; /* Reduced gap */
    }
    
    /* Ensure only the first button takes up the full width */
    .gameover-button-group #restart-button {
        grid-column: 1 / -1; /* Spans all columns */
        width: 100%;
    }

    .gameover-button-group #home-button, 
    .gameover-button-group #onboarding-button {
        width: 100%; /* Fill their grid cell */
    }
}

/* For very small screens (e.g., iPhone 5/SE), revert to full stack */
@media (max-width: 350px) {
    .gameover-button-group {
        display: flex;
        flex-direction: column;
    }
    .gameover-button-group button {
        width: 100%;
    }
}
/* --- END GAMEOVER BUTTON GROUP FIXES --- */

.leaderboard-section {
    /* FIX 10: Reduced margin and added flex-grow to fill remaining space */
    padding: 10px 0;
    border-radius: 8px;
    display: flex; /* Turn section into a flex container */
    flex-direction: column; /* Stack contents vertically */
    /* ADD: Allow the leaderboard section to grow and fill the remaining container space */
    flex-grow: 1; 
    min-height: 0; /* Important for flex items to shrink correctly */
}

h2 {
    font-size: 1.0em; /* Reduced size */
    font-weight: 600;
    margin-bottom: 8px; /* Reduced margin */
    margin-top: 0;
    letter-spacing: -0.02em;
    color: var(--secondary-text-color);
    /* FIX 11: Prevent shrinking to keep title visible */
    flex-shrink: 0;
}

.leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    /* NEW: Use flex-grow 1 to fill the space in the leaderboard-section */
    flex-grow: 1; 
    /* NEW: Set max-height to none, as flex-grow will dictate the size */
    max-height: none; 
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.leaderboard-list::-webkit-scrollbar {
    display: none;
}

.leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--leaderboard-item-border);
    font-size: 0.85em;
    color: var(--secondary-text-color);
    transition: background-color 0.2s ease;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.leaderboard-item:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.leaderboard-item .rank {
    font-weight: 600;
    color: var(--accent-color2);
    width: 25px;
    text-align: left;
}

.leaderboard-item .username {
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
}

.leaderboard-item .score {
    font-weight: 600;
    color: var(--text-color);
    text-align: right;
}

/* NEW: Style for the current logged-in user's leaderboard score */
.leaderboard-item.current-user-score .username, 
.leaderboard-item.current-user-score .score {
    font-weight: 700; /* Make it bold */
    color: var(--accent-color2); /* Use the accent color (blue) */
}

/* NEW: Style for message list items (e.g., 'loading', 'no scores', 'error') */
.leaderboard-item.leaderboard-message {
    /* Ensure the list item itself does not justify space */
    justify-content: center;
}

.leaderboard-item.leaderboard-message .username {
    /* Override flex-grow to ensure the entire width is taken up */
    flex-grow: 1; 
    /* Center the text within the full-width span */
    text-align: center; 
    /* Clear padding so it truly centers */
    padding: 0;
}

.leaderboard-item.leaderboard-message .rank,
.leaderboard-item.leaderboard-message .score {
    /* Hide the rank and score elements for message rows */
    display: none;
}

#leaderboard-loading {
    /* REMOVED: This element is being removed from HTML */
    display: none;
}

/* Onboarding/Auth specific styles */
.form-group {
    margin-bottom: 18px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.8em;
    color: var(--secondary-text-color);
}

/* NEW: Password Wrapper for icon positioning */
.password-wrapper {
    position: relative; /* Establish positioning context for the toggle button */
}

/* Adjusted input selector to exclude input inside .password-wrapper to avoid style duplication,
   but we'll adjust the sizing for the password input below. */
.form-group input[type="text"],
.form-group input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 22px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 0.9em;
    font-size: 1rem;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    appearance: none;
}

/* Style for input elements inside the new password wrapper */
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] { /* Includes the state when it is changed to text */
    width: 100%;
    /* PADDING CHANGE: Reduced right padding to make space for the toggle button */
    padding: 10px 40px 10px 12px; 
    border: 1px solid var(--input-border);
    border-radius: 22px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 0.9em;
    font-size: 1rem;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    appearance: none;
}

/* Combined focus state for all relevant inputs */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.password-wrapper input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(100, 153, 195, 0.2);
    outline: none;
}

/* NEW: Password Toggle Button Styling */
.password-toggle {
    /* Override button's default styles */
    position: absolute;
    top: 50%;
    right: 5px; /* Position it slightly in from the right edge */
    transform: translateY(-50%);
    
    /* Remove default button styling for a clean icon look */
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    transition: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* Icon specific styles */
    color: var(--secondary-text-color);
    font-size: 1.2em; /* Make the 'i' symbol prominent */
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7; /* Subtler default state */
    z-index: 10;
}

.password-toggle:hover {
    background: none; /* Override button:hover style */
    opacity: 1;
}

.password-toggle:active {
    transform: translateY(-50%) scale(0.95);
    box-shadow: none;
}


.toggle-form {
    margin-top: 20px;
    font-size: 0.8em;
    color: #AAAAAA;
}

.toggle-form a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.toggle-form a:hover {
    color: #8bbce1;
}

/* In common.css */

#signin-error-message, #signup-error-message, #guest-message {
    color: var(--error-color);
    margin-top: 8px; /* Reduced margin */
    font-size: 0.75em;
    font-weight: 500;
    display: none;
    /* FIX 14: Prevent shrinking */
    flex-shrink: 0;
}

/* iOS/Safari specific height fixes (Common to all) */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: 100dvh;
    }
}

/* FIX 15: Media query for extra small heights (e.g., landscape mobile) */
@media (max-height: 600px) {
    .container {
        padding: 10px 15px;
        gap: 10px;
        /* UPDATED: Also use the reduced height calculation for small screens */
        min-height: calc(100vh - 30px); /* 10vh - (2*10px container padding + 10px for footer) */
        max-height: calc(100vh - 30px);
    }
    #gameover-body {
        /* REVERTED: Remove scroll-inducing padding/height styles */
        padding: 16px; /* Match default body padding */
    }
    #gameover-h1 {
        font-size: 2em;
    }
    #game-over-score {
        font-size: 1em;
        margin: 5px 0 5px 0;
    }
    .gameover-button-group {
        gap: 6px;
    }
    button, .play-button {
        padding: 8px 15px;
        font-size: 0.85em;
    }
    h2 {
        font-size: 0.9em;
        margin-bottom: 5px;
    }
    .leaderboard-item {
        font-size: 0.8em;
        padding: 4px 0;
    }
}

/* NEW: Class for elements that should be hidden until scripts confirm state */
.initially-hidden {
    visibility: hidden !important; /* Use !important to ensure it overrides default button styling */
}

#control-instructions {
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    /* CHANGE: Use a variable for color consistency */
    color: var(--secondary-text-color); 
    opacity: 0.4;
    font-size: 8px;
    /* NEW: Explicitly set background to transparent to remove any perceived background */
    background-color: transparent; 
}