/* Import Custom Fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Playfair+Display:wght@700;800&display=swap');

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-image: url('../../assets/images/lobby_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Header/Navbar Styling */
.navbar {
    background-color: rgb(246 234 245) !important;
    border-bottom: 3px solid white !important;
    display: flex;
    align-items: center;
    height: 72px;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    left: 0;
    right: 0;
}

.navbar .container-fluid {
    width: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
}

.navbar-brand {
    color: #041945 !important;
    font-size: 31px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0;
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    transform: scale(1.02);
    text-shadow: 0 6px 12px rgba(53, 84, 146, 0.2);
}

/* Dev-only build/time indicator next to the Game Lobby title (see
   script.js's initDevBuildInfo()) — small and muted so it reads as
   secondary metadata, not part of the branded title. */
.dev-build-info {
    margin-left: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14.4px;
    font-weight: 500;
    color: #041945;
    opacity: 0.55;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Hamburger Menu Styling */
.navbar-toggler {
    margin-left: 10px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235871a5' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.sidebar {
    position: fixed;
    left: 0;
    top: 72px;
    height: calc(100vh - 72px);
    width: calc(100% / 6);
    border-right: 1px solid #ffffff;
    box-shadow: 2px 0 8px rgba(53, 84, 146, 0.08);
    margin-top: 0px;
    overflow-y: auto;
    z-index: 100;
    scrollbar-width: thin;
    scrollbar-color: #f59e0b #f0f0f0;
}

/* WebKit Browsers (Chrome, Safari, Edge) */
.sidebar::-webkit-scrollbar {
    width: 10px;
}

.sidebar::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, rgba(246, 234, 245, 0.5), rgba(226, 232, 253, 0.3));
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
    background-clip: padding-box;
}

/* Sidebar Nav Items Styling */
.sidebar .nav-link {
    color: #707690 !important;
    font-weight: 500;
    font-size: 14px;
    padding: 12px 20px !important;
    margin: 5px 0 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    position: relative;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(226, 232, 253, 0) 0%, #E2E8FD 50%, rgba(226, 232, 253, 0) 100%);
    border-image-slice: 1;
}

.sidebar .nav-link:hover {
    background-color: rgba(76, 104, 159, 0.1);
    color: #4c689f !important;
    text-shadow: 0 1px 3px rgba(53, 84, 146, 0.1);
    padding-left: 24px !important;
}

.sidebar .nav-link.active {
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%) !important;
    color: #ffffff !important;
    border-left: 4px solid #f59e0b;
    box-shadow: inset 0 2px 6px rgba(245, 158, 11, 0.3);
    text-shadow: 0 1px 3px rgba(245, 158, 11, 0.4);
    padding-left: 16px !important;
    font-weight: 600;
}

.sidebar .nav-link i {
    color: #041945;
    transition: all 0.3s ease;
}

.sidebar .nav-link:hover i {
    transform: translateX(2px);
    color: #041945;
}

.sidebar .nav-link.active i {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(245, 158, 11, 0.4);
}

.game-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 7px solid white;
    box-shadow: 0 4px 12px rgba(53, 84, 146, 0.1);
    margin-bottom: 31px;
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

/* Individual game image IDs: Game_1, Game_2, Game_3, etc. */
.game-image {
    cursor: pointer;
}

.game-card .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.3s ease;
    z-index: 10;
}

.game-card .play-overlay i {
    font-size: 64px;
    color: white;
    opacity: 0;
    transition: all 0.3s ease;
    transform: scale(0.8);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(53, 84, 146, 0.25);
}

.game-card:hover img {
    transform: scale(1.08);
}

.game-card:hover .play-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

.game-card:hover .play-overlay i {
    opacity: 1;
    transform: scale(1);
}

.game-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 12px 10px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    z-index: 15;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.5px;
}

.game-card:hover .game-title-overlay {
    background-color: rgba(0, 0, 0, 0.85);
}

/* Game Card Wrapper Animation */
/* Custom responsive grid for 8 games per row */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 calc(100% / 8);
        max-width: calc(100% / 8);
    }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .col-lg-2-4 {
        flex: 0 0 calc(100% / 4);
        max-width: calc(100% / 4);
    }
}

.game-card-wrapper {
    animation: fadeInSlideUp 0.5s ease-out;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* More Games Button Styling */
.more-games-btn {
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    padding: 12px 40px !important;
    border-radius: 25px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(88, 113, 165, 0.2) !important;
}

.more-games-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(88, 113, 165, 0.3) !important;
}

.more-games-btn:active {
    transform: translateY(-1px) !important;
}

.game-title:hover {
    color: #2a4277;
    text-shadow: 0 3px 6px rgba(53, 84, 146, 0.2);
    transform: scale(1.05);
}

/* Lobby Text Styling */
.lobby-text {
    color: #355492;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Tabs Styling */
.nav-tabs {
    border-bottom: 2px solid #f59e0b;
    gap: 10px;
}

.nav-tabs .nav-link {
    color: #010d3f !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none !important;
    border-bottom: 3px solid transparent;
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    position: relative;
}

.nav-tabs .nav-link:hover {
    color: #355492 !important;
    background-color: rgba(88, 113, 165, 0.08);
    border-bottom-color: #5871a5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(88, 113, 165, 0.15);
    text-shadow: 0 1px 3px rgba(53, 84, 146, 0.1);
}

.nav-tabs .nav-link.active {
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%) !important;
    color: #EFF3FE !important;
    border-bottom: none !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(216, 231, 6, 0.25);
    text-shadow: 0 1px 2px rgba(206, 228, 7, 0.1);
}

/* ===== MOBILE OFFCANVAS MENU STYLING ===== */
/* Mobile Menu - Offcanvas */
.offcanvas {
    background: linear-gradient(135deg, rgba(246, 234, 245, 0.98) 0%, rgba(226, 232, 253, 0.98) 100%);
    box-shadow: -2px 0 8px rgba(53, 84, 146, 0.15);
}

.offcanvas-header {
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    border-bottom: 2px solid #f59e0b;
    padding: 16px 20px;
}

.offcanvas-header h5 {
    color: white;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    margin: 0;
}

.offcanvas .btn-close {
    /*background-color: rgba(255, 255, 255, 0.8);*/
    filter: brightness(0.2);
}

.offcanvas-body {
    padding: 0;
    background: linear-gradient(to bottom, rgba(246, 234, 245, 0.95), rgba(226, 232, 253, 0.95));
}

/* Mobile Menu Navigation Items */
.offcanvas .nav {
    padding: 12px 0;
}

.offcanvas .nav-link {
    color: #707690 !important;
    font-weight: 500;
    font-size: 14px;
    padding: 12px 20px !important;
    margin: 5px 10px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(226, 232, 253, 0) 0%, #E2E8FD 50%, rgba(226, 232, 253, 0) 100%);
    border-image-slice: 1;
}

.offcanvas .nav-link:hover {
    background-color: rgba(76, 104, 159, 0.1);
    color: #4c689f !important;
    text-shadow: 0 1px 3px rgba(53, 84, 146, 0.1);
    padding-left: 24px !important;
    transform: translateX(2px);
}

.offcanvas .nav-link.active {
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%) !important;
    color: #ffffff !important;
    border-left: 4px solid #f59e0b;
    box-shadow: inset 0 2px 6px rgba(245, 158, 11, 0.3);
    text-shadow: 0 1px 3px rgba(245, 158, 11, 0.4);
    padding-left: 16px !important;
    font-weight: 600;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.offcanvas .nav-link i {
    color: #041945;
    transition: all 0.3s ease;
    margin-right: 8px;
}

.offcanvas .nav-link:hover i {
    transform: translateX(2px);
    color: #041945;
}

.offcanvas .nav-link.active i {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(245, 158, 11, 0.4);
}

/* Nav Link Styling */

/* Adjust main content for larger navbar */
main {
    padding-top: 30px !important;
}

/* Navbar Button Styles */
.navbar-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.navbar-login-btn {
    margin-right: 12px;
}

/* ===== USER INFO STYLING ===== */
/* Desktop User Info */
.user-info-section {
    display: flex;
    align-items: center;
    gap: 0;
}

.user-info-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    color: #f3f4f7;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.user-icon {
    font-size: 52px;
    color: #f3f4f7;
    transition: all 0.3s ease;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.username {
    font-weight: 600;
    color: #041945;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}

.balance {
    font-size: 12px;
    color: #5871a5;
    font-weight: 500;
}

#displayBalance {
    font-weight: 600;
    color: #f59e0b;
}

.logout-btn {
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    color: white;
    border: none;
    padding: 8px 12px !important;
    margin-left: 12px;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.logout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
}

.logout-btn:active {
    transform: translateY(0);
}

/* Mobile User Info */
.mobile-user-info {
    padding: 16px;
    border-top: 1px solid #e0e0e0;
    background: linear-gradient(135deg, rgba(253, 219, 58, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
}

.mobile-user-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mobile-user-header i {
    font-size: 36px;
    color: #355492;
}

.mobile-username {
    display: block;
    font-weight: 600;
    color: #041945;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}

.mobile-balance {
    display: block;
    font-size: 12px;
    color: #5871a5;
    font-weight: 500;
}

#mobileDisplayBalance {
    font-weight: 600;
    color: #f59e0b;
}

#mobileLogoutBtn {
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    color: white;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

#mobileLogoutBtn:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}



.navbar-register-btn {
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    color: white;
}

.navbar-register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(253, 219, 58, 0.4);
}

/* ===== LOGIN MODAL STYLES ===== */
/* Modal Overlay */
.login-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    animation: fadeIn 0.3s ease-in-out;
}

.login-modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modal Container */
.login-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    padding: 0;
    animation: slideUp 0.3s ease-in-out;
    overflow: hidden;
}

/* Modal Header */
.login-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    color: white;
}

.login-modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.login-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.login-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Modal Body */
.login-modal-body {
    padding: 30px;
}

/* Form Labels */
.login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* Form Inputs */
.login-form input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.login-form input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Error State */
.login-form input.error {
    border-color: #ff6b6b;
}

.login-form input.error:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

/* Error Message */
.login-error-message {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: -12px;
    margin-bottom: 12px;
}

/* Login Button */
.login-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    margin-bottom: 16px;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.login-btn:active {
    transform: translateY(0);
}

/* Forgot Password Link */
.login-forgot {
    text-align: center;
    margin-bottom: 20px;
}

.login-forgot a {
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.login-forgot a:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* Divider */
.login-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 20px 0;
}

/* Register Link */
.login-register {
    text-align: center;
    font-size: 14px;
    color: #666;
}

.login-register a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.login-register a:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* ===== REGISTER MODAL STYLES ===== */
.register-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    animation: fadeIn 0.3s ease-in-out;
    overflow-y: auto;
}

.register-modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Register Modal Container */
.register-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 450px;
    padding: 0;
    animation: slideUp 0.3s ease-in-out;
    overflow: hidden;
    margin: 20px auto;
}

/* Register Modal Header */
.register-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    color: white;
}

.register-modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.register-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.register-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Register Modal Body */
.register-modal-body {
    padding: 30px;
}

/* Register Form Labels */
.register-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* Register Form Inputs */
.register-form input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.register-form input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Register Error State */
.register-form input.error {
    border-color: #ff6b6b;
}

.register-form input.error:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

/* Register Error Message */
.register-error-message {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: -12px;
    margin-bottom: 12px;
}

/* Register Submit Button */
.register-submit-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.register-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.register-submit-btn:active {
    transform: translateY(0);
}

/* Register Responsive Design */
@media (max-width: 600px) {
    .register-modal {
        width: 95%;
        max-width: 100%;
    }

    .register-modal-header h2 {
        font-size: 20px;
    }

    .register-modal-body {
        padding: 20px;
    }
}

/* ===== FORGOT PASSWORD MODAL STYLES ===== */
.forgot-password-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    animation: fadeIn 0.3s ease-in-out;
}

.forgot-password-modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Forgot Password Modal Container */
.forgot-password-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    padding: 0;
    animation: slideUp 0.3s ease-in-out;
    overflow: hidden;
}

/* Forgot Password Modal Header */
.forgot-password-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    color: white;
}

.forgot-password-modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.forgot-password-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.forgot-password-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Forgot Password Modal Body */
.forgot-password-modal-body {
    padding: 30px;
}

/* Forgot Password Form Labels */
.forgot-password-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* Forgot Password Form Inputs */
.forgot-password-form input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.forgot-password-form input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Forgot Password Error State */
.forgot-password-form input.error {
    border-color: #ff6b6b;
}

.forgot-password-form input.error:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

/* Forgot Password Error Message */
.forgot-password-error-message {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: -12px;
    margin-bottom: 12px;
}

/* Forgot Password Success Message */
.forgot-password-success-message {
    color: #51cf66;
    font-size: 12px;
    margin-bottom: 16px;
}

/* Forgot Password Reset Button */
.forgot-password-reset-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #fddb3a 0%, #fbbf24 50%, #f59e0b 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.forgot-password-reset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.forgot-password-reset-btn:active {
    transform: translateY(0);
}


/* Forgot Password Responsive Design */
@media (max-width: 600px) {
    .forgot-password-modal {
        width: 95%;
        max-width: 100%;
        margin: 20px;
    }

    .forgot-password-modal-header h2 {
        font-size: 20px;
    }

    .forgot-password-modal-body {
        padding: 20px;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== LOGIN MODAL RESPONSIVE DESIGN ===== */
@media (max-width: 600px) {
    .login-modal {
        width: 95%;
        max-width: 100%;
        margin: 20px;
    }

    .login-modal-header h2 {
        font-size: 20px;
    }

    .login-modal-body {
        padding: 20px;
    }
}

/* ===== SEARCH BOX STYLING ===== */
#desktopSearchInput,
#mobileSearchInput {
    width: 100%;
    border-radius: 50px;
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(53, 84, 146, 0.05);
    background-color: rgba(255, 255, 255, 0.5) !important;
}

#desktopSearchInput:focus,
#mobileSearchInput:focus {
    outline: none;
    border-color: #5871a5;
    box-shadow: 0 4px 16px rgba(88, 113, 165, 0.2);
    transform: translateY(-2px);
}

#desktopSearchInput::placeholder,
#mobileSearchInput::placeholder {
    color: #9ca3af;
}

/* ===== RESPONSIVE FONT SIZING ===== */
/* Extra Small Devices (Mobile Phones: < 576px) */
@media (max-width: 575.98px) {
    /* User Info Mobile Styles */
    .user-icon {
        font-size: 24px;
    }

    .username {
        font-size: 12px;
    }

    .balance {
        font-size: 11px;
    }

    .logout-btn {
        padding: 6px 10px !important;
        font-size: 14px;
    }

    .mobile-user-header i {
        font-size: 28px;
    }

    .mobile-username {
        font-size: 12px;
    }

    .mobile-balance {
        font-size: 11px;
    }

    #mobileLogoutBtn {
        font-size: 12px;
    }

    /* Mobile Menu Styling */
    .offcanvas-header h5 {
        font-size: 16px;
    }

    .offcanvas .nav-link {
        font-size: 13px;
        padding: 11px 16px !important;
        margin: 4px 8px !important;
    }

    .offcanvas .nav-link:hover {
        padding-left: 20px !important;
    }

    .offcanvas .nav-link.active {
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding-left: 12px !important;
    }

    .offcanvas .nav-link i {
        margin-right: 6px;
    }
    /* Navbar Full Width */
    .navbar {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        left: 0;
        right: 0;
    }

    .navbar .container-fluid {
        width: 100% !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    .navbar-brand {
        font-size: 22px;
        margin-right: auto;
    }

    .dev-build-info {
        font-size: 12px;
        margin-left: 6px;
    }

    .d-flex {
        gap: 6px !important;
    }

    /* Navbar Buttons */
    .navbar-btn {
        padding: 6px 12px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* Sidebar Navigation Links */
    .sidebar {
        width: calc(100% / 4);
    }

    .sidebar .nav-link {
        font-size: 12px;
        padding: 10px 12px !important;
    }

    /* Game Title Overlay */
    .game-title-overlay {
        font-size: 11px;
        padding: 8px 8px;
    }

    /* Game Card Height */
    .game-card {
        height: 200px;
        margin-bottom: 15px;
    }

    /* Tabs Font Size */
    .nav-tabs .nav-link {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Main Content Padding */
    main {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
    }

    /* Modal Headers */
    .login-modal-header h2,
    .register-modal-header h2,
    .forgot-password-modal-header h2 {
        font-size: 18px;
    }

    /* Modal Body Text */
    .login-form label,
    .register-form label,
    .forgot-password-form label {
        font-size: 12px;
    }

    .login-form input,
    .register-form input,
    .forgot-password-form input {
        font-size: 12px;
        padding: 10px 12px;
    }

    /* Modal Buttons */
    .login-btn,
    .register-submit-btn,
    .forgot-password-reset-btn {
        font-size: 14px;
        padding: 10px !important;
    }

    /* Modal Error/Success Messages */
    .login-error-message,
    .register-error-message,
    .forgot-password-error-message,
    .forgot-password-success-message {
        font-size: 10px;
    }

    /* Login/Register Links */
    .login-forgot a,
    .login-register a {
        font-size: 12px;
    }

    /* Search Box Font */
    #desktopSearchInput,
    #mobileSearchInput {
        font-size: 12px;
        padding: 10px 16px;
    }

    /* More Games Button */
    .more-games-btn {
        padding: 10px 24px !important;
        font-size: 12px;
    }

    /* Close Buttons */
    .login-modal-close,
    .register-modal-close,
    .forgot-password-modal-close {
        font-size: 24px;
    }

    /* Lobbytext */
    .lobby-text {
        font-size: 13px;
    }

    /* Modal Container Max Width */
    .login-modal,
    .register-modal,
    .forgot-password-modal {
        max-width: 95%;
    }
}

/* Small Devices (Tablets: 576px - 768px) */
@media (min-width: 576px) and (max-width: 768px) {
    /* User Info Tablet Styles */
    .user-icon {
        font-size: 28px;
    }

    .username {
        font-size: 13px;
    }

    .balance {
        font-size: 12px;
    }

    .logout-btn {
        padding: 7px 11px !important;
        font-size: 15px;
    }

    .mobile-user-header i {
        font-size: 32px;
    }

    .mobile-username {
        font-size: 13px;
    }

    .mobile-balance {
        font-size: 12px;
    }

    #mobileLogoutBtn {
        font-size: 13px;
    }

    /* Navbar Full Width */
    .navbar {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        left: 0;
        right: 0;
    }

    .navbar .container-fluid {
        width: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;
    }

    /* Navbar Brand */
    .navbar-brand {
        font-size: 26px;
        margin-right: auto;
    }

    /* Navbar Buttons */
    .navbar-btn {
        padding: 7px 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Sidebar Navigation Links */
    .sidebar {
        width: calc(100% / 5);
    }

    .sidebar .nav-link {
        font-size: 13px;
        padding: 11px 14px !important;
    }

    /* Game Title Overlay */
    .game-title-overlay {
        font-size: 12px;
        padding: 9px 9px;
    }

    /* Game Card Height */
    .game-card {
        height: 220px;
        margin-bottom: 18px;
    }

    /* Tabs Font Size */
    .nav-tabs .nav-link {
        font-size: 13px;
        padding: 9px 14px;
    }

    /* Main Content Padding */
    main {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
    }

    /* Mobile Menu Styling */
    .offcanvas-header h5 {
        font-size: 17px;
    }

    .offcanvas .nav-link {
        font-size: 13px;
        padding: 11px 18px !important;
        margin: 4px 10px !important;
    }

    .offcanvas .nav-link:hover {
        padding-left: 22px !important;
    }

    .offcanvas .nav-link.active {
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding-left: 14px !important;
    }

    .offcanvas .nav-link i {
        margin-right: 7px;
    }

    /* Modal Headers */
    .login-modal-header h2,
    .register-modal-header h2,
    .forgot-password-modal-header h2 {
        font-size: 20px;
    }

    /* Modal Body Text */
    .login-form label,
    .register-form label,
    .forgot-password-form label {
        font-size: 13px;
    }

    .login-form input,
    .register-form input,
    .forgot-password-form input {
        font-size: 13px;
        padding: 11px 13px;
    }

    /* Modal Buttons */
    .login-btn,
    .register-submit-btn,
    .forgot-password-reset-btn {
        font-size: 15px;
    }

    /* Modal Error/Success Messages */
    .login-error-message,
    .register-error-message,
    .forgot-password-error-message,
    .forgot-password-success-message {
        font-size: 11px;
    }

    /* Login/Register Links */
    .login-forgot a,
    .login-register a {
        font-size: 13px;
    }

    /* Search Box Font */
    #desktopSearchInput,
    #mobileSearchInput {
        font-size: 13px;
        padding: 11px 18px;
    }

    /* More Games Button */
    .more-games-btn {
        padding: 11px 32px !important;
        font-size: 13px;
    }

    /* Close Buttons */
    .login-modal-close,
    .register-modal-close,
    .forgot-password-modal-close {
        font-size: 26px;
    }

    /* Lobby Text */
    .lobby-text {
        font-size: 14px;
    }
}

/* Medium Devices and Larger (992px+) - Desktop */
@media (min-width: 992px) {
    /* Navbar Full Width */
    .navbar {
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar .container-fluid {
        width: 100% !important;
        padding: 0 16px !important;
        margin: 0 !important;
    }

    .navbar-brand {
        font-size: 31px;
        margin-right: auto;
    }

    .navbar-btn {
        font-size: 14px;
    }

    .sidebar .nav-link {
        font-size: 14px;
    }

    .game-title-overlay {
        font-size: 14px;
    }

    .nav-tabs .nav-link {
        font-size: 14px;
    }

    /* Main Content Margin for Sidebar */
    main {
        margin-left: calc(100% / 6) !important;
    }
}

/* ============================================================
   Game iFrame Overlay
   ============================================================ */

.game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* Plain 100vh is the LARGEST possible mobile viewport (address bar
       hidden), not the currently-visible one — leaving the overlay taller
       than what's actually on screen whenever the browser chrome is showing,
       which crops/hides content at the bottom. --app-vh (kept in sync with
       the real visible height by syncOverlayViewportHeight() in script.js)
       is a broadly-compatible fix; 100dvh below wins natively wherever it's
       supported and simply overrides the calc() line where it is. */
    height: 100vh;
    height: calc(var(--app-vh, 1vh) * 100);
    height: 100dvh;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: #000;
}

.game-overlay-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: #000;
}

/* Rotate-device fallback: shown whenever the viewport is actually in
   portrait, independent of whether screen.orientation.lock() is supported
   or was granted (e.g. iOS Safari never supports it). Pure CSS so it always
   reflects the device's real current orientation. */
.game-rotate-prompt {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    background: rgba(5, 6, 20, 0.96);
    color: #ffffff;
    text-align: center;
}

.game-rotate-prompt-icon {
    font-size: 64px;
    line-height: 1;
    animation: game-rotate-prompt-spin 1.6s ease-in-out infinite;
}

.game-rotate-prompt p {
    max-width: 320px;
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

@keyframes game-rotate-prompt-spin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}

@media (orientation: portrait) {
    .game-rotate-prompt {
        display: flex;
    }
    /* The prompt fully covers the game while shown, so it doesn't matter
       that the iframe underneath is still rendering in a squeezed portrait
       viewport — nothing broken is ever visible to the player. */
}