:root {
            --back-button-bg: var(--primary-green);
            --back-button-bg-hover: var(--primary-green-hover);
            --navbar-height: 75px;
            --navs: #111;
            --primary-green: #28a745;
            --primary-green-hover: #218838;
        }
        body {
            padding-top: calc(var(--navbar-height) + 20px);
            padding-bottom: 80px;
        }
        .password-feedback {
            display: block;
            font-size: 0.85em;
            margin-top: 10px; 
            margin-bottom: 10px; 
            min-height: 1.2em; 
            text-align: left;
            line-height: 1.4;
        }
        
        /* By default, an invalid hint is red */
        .password-feedback .invalid {
            color: #ff3a3a;
        }
        
        /* By default, a valid hint is green */
        .password-feedback .valid {
            color: #25d64e;
        }
        
        /* When the container has the 'strong' class, force ALL hints within it to be green */
        .password-feedback.strong span {
            color: #25d64e;
        }
        /* --- Navbar Styles (Copied from index.html) --- */
        .top-navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: auto; /* Auto height for wrapping */
            min-height: var(--navbar-height);
            background-color: var(--navs);
            padding: 10px 20px;
            display: flex;
            align-items: center;
            z-index: 2005;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            box-sizing: border-box;
        }

        .fa-coins { 
            color: var(--warning-yellow);
            font-size: 1.1em;
            margin-left: .3em;
        }

        .navbar-container {
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            flex-wrap: wrap; /* Allow main sections to wrap */
        }

        #navbarLogo {
    display: block; /* Removes extra space below image if it's inline */
    height: 60px; /* Default height, adjust as needed */
    /* Consider adding max-height related to --navbar-height if navbar height is strictly fixed */
    max-height: calc(var(--navbar-height) - 10px);
}

.navbar-logo-container {
    display: flex; /* Helps center the image if it has padding/margin */
    align-items: center;
}

.navbar-logo-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* This centers the logo in the middle of .navbar-container */
}

        .navbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: nowrap; /* Keep user/auth and coins together */
        }

        .navbar-right {
            display: flex;
            align-items: center;
        }

        .user-auth-section {
            display: flex; /* To contain either dropdown or auth buttons */
            align-items: center;
        }

        .user-dropdown {
            position: relative;
        }

        .user-dropdown-toggle {
            background: none;
            border: none;
            color: var(--text-white);
            cursor: pointer;
            display: flex;
            align-items: center;
            padding: 8px 0px; /* Minimal padding */
            font-size: 0.95em;
        }

        #userDisplayInfo {
            margin-right: 8px;
            max-width: 150px; /* Prevent long emails from breaking layout */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dropdown-arrow {
            font-size: 0.8em;
            margin-left: 5px;
            transition: transform 0.3s ease;
        }

        .dropdown-arrow.open {
            transform: rotate(180deg);
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            background-color: var(--modal-bg);
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.4);
            list-style: none;
            padding: 0;
            margin: 0;
            z-index: 1011;
            min-width: 120px;
        }

        .dropdown-menu.show {
            display: block;
            animation: fadeIn 0.2s ease-out;
        }

        .dropdown-item {
            background: none;
            border: none;
            border-bottom: 2px solid #4f4f4f;
            color: var(--text-white);
            padding: 10px 15px;
            text-align: left;
            width: 100%;
            cursor: pointer;
            display: block;
            font-size: 0.9em;
        }
        .dropdown-item:last-of-type {
            border-bottom: none;
        }

        .dropdown-item:hover {
            background-color: #333;
        }
        #navShopButton {
            color: var(--warning-yellow);
            font-weight: 600;
        }
        #navHomeButton, #navLeaderboardButton {
            font-weight: 600;
        }
        #navLogoutButton {
            color: #ff3a3a;
        }

        .auth-buttons-nav {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .coin-balance {
            color: var(--warning-yellow);
            font-weight: bold;
            display: flex;
            align-items: center;
            font-size: 0.95em;
        }

        .coin-balance .fa-coins {
            margin-right: 5px; /* Adjusted from original */
            font-size: 1.2em; /* Slightly larger */
        }

        .nav-button {
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            font-size: 0.9em;
            border: none;
            transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
            color: var(--text-white);
        }
        .nav-button:active {
            transform: scale(0.98);
        }
        .nav-button:disabled {
            cursor: not-allowed;
            /* Opacity will be handled by JS for navLoginButton */
        }


        .nav-button-login { background-color: var(--primary-blue); }
        .nav-button-login:hover:not(:disabled) { background-color: var(--primary-blue-hover); }


        .nav-button-signup { background-color: var(--primary-green); }
        .nav-button-signup:hover { background-color: var(--primary-green-hover); }

        .nav-button-addcoins { background-color: var(--primary-teal); }
        .nav-button-addcoins:hover { background-color: var(--primary-teal-hover); }

        /* New Coin Balance Link Styles */
        .coin-balance-wrapper {
            display: flex; /* Will be controlled by JS (none <-> flex) */
            align-items: center;
            text-decoration: none;
            color: var(--warning-yellow);
            font-weight: bold;
            font-size: 0.95em;
            padding: 6px 10px; /* Adjusted padding */
            border-radius: 5px;
            transition: background-color 0.2s ease;
            cursor: pointer;
        }
        .coin-balance-wrapper:hover,
        .coin-balance-wrapper:focus { /* Added focus style */
            background-color: rgba(255, 255, 255, 0.1);
            outline: none; /* Remove default focus outline if custom is applied */
        }
        .coin-balance-wrapper .coin-main-icon {
            margin-right: 6px;
            font-size: 1.2em; /* Main coin icon size */
        }
        .coin-balance-wrapper .add-coins-plus-icon {
            margin-left: 8px;
            font-size: 0.85em; /* Plus icon slightly smaller */
            color: var(--text-secondary); /* Subtle color for the plus */
            transition: color 0.2s ease;
            padding: 2px; /* Small padding if needed */
        }
        .coin-balance-wrapper:hover .add-coins-plus-icon,
        .coin-balance-wrapper:focus .add-coins-plus-icon {
            color: var(--text-white); /* Brighter plus on wrapper hover/focus */
        }
        @keyframes fadeInNav { from { opacity: 0; } to { opacity: 1; } }

        /* --- Styles for the new Fixed Back Button --- */
        .back-to-games-fixed {
            position: fixed;
            margin-top: -5px;
            left: 15px;
            z-index: 1000;
            background-color: var(--back-button-bg);
            color: var(--text-white);
            padding: 10px 15px;
            border-radius: 25px; /* Fully rounded */
            text-decoration: none;
            font-size: 0.95em;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            transition: background-color 0.2s ease, transform 0.2s ease;
            cursor: pointer;
        }
        .back-to-games-fixed:hover {
            background-color: var(--back-button-bg-hover);
            transform: scale(1.05);
        }
        .back-to-games-fixed:active {
            transform: scale(0.98);
        }
        .back-to-games-fixed i {
            font-size: 0.8em;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            body { padding-top: calc(var(--navbar-height) + 20px); }
            .top-navbar { padding: 10px 15px; }
            h1 { font-size: 2em; margin-bottom: 10px; }
            .shop-item-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
            #userDisplayInfo { max-width: 100px; }
            .back-to-games-fixed {
                padding: 8px 12px; font-size: 0.9em; left: 15px; margin-top: -8px;
            }
            .nav-button { font-size: 0.85em; padding: 7px 12px;}
            .coin-balance { font-size: 0.9em; }
         
        }

        @media (max-width: 600px) {
            body { padding-top: 100px;} /* Navbar stacking + fixed button */
            .navbar-container {
        /* Override existing mobile styles that might make it stack */
        flex-direction: row !important; /* Critical for single line */
        justify-content: flex-start; /* Align items to the start on mobile */
        position: static; /* No longer need relative for absolute centering */
    }

    .navbar-logo-container {
        position: static; /* Back to normal flow */
        transform: none;  /* Reset transform */
        order: 1;         /* Logo first */
        margin-right: 10px; /* Space between logo and the .navbar-left items */
    }

    #navbarLogo {
        height: 40px; /* Slightly smaller logo on mobile, adjust as needed */
    }

    .navbar-left {
        order: 2; /* Auth buttons and coin balance will come after the logo */
         width: auto !important; /* Override if existing mobile CSS makes it full width */
    }

    .navbar-right {
        order: 3; /* Any right-aligned content comes last */
        margin-left: auto; /* Pushes it to the far right */
        width: auto !important; /* Override if existing mobile CSS makes it full width */
    }
            .navbar-right .nav-button-addcoins {
                width: 100%;
                text-align: center;
            }
            .user-auth-section .auth-buttons-nav {
                flex-grow: 1; 
                justify-content: space-around;
            }
             .user-auth-section .auth-buttons-nav .nav-button {
                flex-grow: 1;
                text-align: center;
            }
            .user-dropdown-toggle { flex-grow: 1; justify-content: space-between;}
            .desktop {display: none !important;}
        
        }

        @media (max-width: 480px) {
            h1 { font-size: 1.8em; margin-bottom: 10px; }
            .shop-button { font-size: 1em; padding: 10px 18px; }
            .back-to-games-fixed {
                padding: 8px 10px; font-size: 0.85em; left: 15px;
            }
        }