/* Reset and Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
    /* Dark mode colors (default) */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #ffffff;
    --text-secondary: #a0a6ad;
    --text-muted: #7d8590;
    --border-primary: #30363d;
    --border-secondary: #21262d;
    --accent-primary: #58a6ff;
    --accent-hover: #388bfd;
    --success: #238636;
    --error: #f85149;
    --warning: #d29922;
    
    /* Customizable accent color */
    --accent-color: var(--accent-primary);
    --hover-color: var(--bg-tertiary);
    --cursor-color: var(--text-primary);
    --bg-secondary-transparent: rgba(22, 27, 34, 0.85);
    --jg-font-weight: 900;
}

/* Apply accent color to key elements */
.jg-switch-input:checked + .jg-switch:before {
    background: var(--accent-color) !important;
}

.update-check-btn, .control-btn, .icon-btn {
    background: var(--accent-color) !important;
}

.update-check-btn:hover, .control-btn:hover, .icon-btn:hover {
    background: var(--accent-hover) !important;
    filter: brightness(1.1);
}

.nav-item.active .nav-link {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--accent-color) !important;
}

.cat-tab.active {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--accent-color) !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: var(--jg-font-weight);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Unified form controls to keep dark theme styling consistent */
input[type="text"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="email"],
input[type="search"],
textarea,
select {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.25);
    background: var(--bg-tertiary);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

select {
    background: var(--bg-primary);
    color: var(--text-primary);
}
/* Enforce Nunito across interactive/text elements */
button, input, select, textarea, .nav-link, .stat-item, .section-title, .game-card, .game-info-bottom, .cat-tab, .setting-group, .update-check-btn, .control-btn, .icon-btn {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: var(--jg-font-weight) !important;
}

/* Make general text bold by default to match the reference weight */
h1, h2, h3, h4, h5, h6,
p, span, a, li, label,
input, select, textarea, button,
.nav-link, .stat-item, .section-title,
.game-card, .game-info-bottom, .cat-tab,
.setting-group, .update-check-btn, .control-btn, .icon-btn,
.friends-tab, .friends-panel, .friends-list li,
.games-grid, .game-title, .game-description,
.header-status, .header-actions, .section-header,
.profile-form, .settings-card, .settings-grid,
.toast, .notification-card {
    font-weight: var(--jg-font-weight) !important;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
/* Removed override that interfered with Font Awesome font-family */
/* ===== Global App Page Loader (Full-screen Logo Spinner) ===== */
.app-page-loader {position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:30000; overflow:hidden;} 
.app-page-loader::before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 40% 35%, #161b22 0%, #0d1117 70%); opacity:1; transition:opacity .58s ease;} 
.app-page-loader > * {position:relative; z-index:1;} 
.app-page-loader.fade-out {pointer-events:none;} 
.app-page-loader.fade-out::before {opacity:0;} 
.apl-full {display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 20px; width:min(520px, 100%); position:relative; transform:scale(1); opacity:1; transition:transform .62s cubic-bezier(.22,.68,.2,1), opacity .45s ease;} 
.app-page-loader.fade-out .apl-full {transform:scale(.72); opacity:0;} 
.apl-logo-wrap {position:relative; width:78px; height:78px; margin:0 0 6px;} 
.apl-logo {width:100%; height:100%; object-fit:contain; user-select:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));} 
/* Indeterminate loading bar (Windows copy-style marquee) */
.apl-bar {
    width: min(340px, 72vw);
    height: 12px;
    margin: 10px 0 0;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #30363d;
}

.apl-bar-line {
    position: absolute;
    top: 1px;
    left: 0;
    height: calc(100% - 2px);
    width: 30%;
    background: #58a6ff;
    box-shadow: none;
    will-change: transform;
    animation: aplBarSweep 1.25s linear infinite;
}
.apl-network-text {position:absolute; left:50%; bottom:14px; transform:translateX(-50%) scale(1); text-align:center; font-size:13px; letter-spacing:.04em; text-transform:lowercase; color:#9ea7b1; opacity:.95; pointer-events:none; white-space:nowrap; transition:transform .55s cubic-bezier(.22,.68,.2,1), opacity .4s ease;}
.app-page-loader.fade-out .apl-network-text {transform:translateX(-50%) scale(.84); opacity:0;}
/* Hide any text elements if present */
.apl-title, .apl-sub, .apl-warning {display:none !important;}
@keyframes aplBarSweep {
    0% {transform: translateX(-140%);}
    100% {transform: translateX(410%);}
}
/* Removed float & glow animations for static logo */
@keyframes flashWarn {0%{opacity:.55;}100%{opacity:1;}}

/* ===== Game Loading Overlay Enhanced Animation ===== */
#gameLoadingOverlay {transition:opacity .5s ease, transform .55s cubic-bezier(.4,.8,.2,1);}
#gameLoadingOverlay.fade-out {opacity:0; transform:translateY(18px);} 
.loading-inner {animation:glowPulse 2.5s ease-in-out infinite;}
@keyframes glowPulse {0%,100%{filter:drop-shadow(0 0 4px rgba(31,111,235,0.35));}50%{filter:drop-shadow(0 0 10px rgba(139,92,246,0.55));}}
/* ===== Custom Cursor (Enhanced with CSS Variables) ===== */
body.custom-cursor-enabled, body.custom-cursor-enabled * { cursor: none !important; }
.custom-cursor-dot { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: var(--cursor-size, 8px); 
    height: var(--cursor-size, 8px); 
    border-radius: 50%; 
    background: var(--cursor-color, #ffffff); 
    pointer-events: none; 
    z-index: 100000; 
    transform: translate(-50%, -50%); 
    box-shadow: 0 0 0 4px rgba(255,255,255,0.15), 0 0 6px 2px rgba(255,255,255,0.25); 
    transition: opacity .25s;
    display: var(--cursor-display, block);
}
.cursor-hidden .custom-cursor-dot { opacity: 0; }
@media (hover:none), (pointer:coarse) { 
    body, body * { cursor: auto !important; } 
    .custom-cursor-dot { display: none !important; } 
}
/* Update check button */
.update-check-btn {background:#238636; border:1px solid #2ea043; color:#fff; padding:8px 14px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:.25s;}
.update-check-btn:hover:not(:disabled){background:#2ea043;}
.update-check-btn:disabled{opacity:.6; cursor:wait;}
.muted-hint{display:block; margin-top:6px; color:#7d8590; font-style:normal; text-align:left;}
/* Account page */
.single-account-frame {display:flex; flex-direction:column; gap:16px;}
.account-iframe {width:100%; height:520px; border:1px solid #30363d; border-radius:14px; background:#0d1117;}
.account-inline-actions {display:flex; gap:10px; flex-wrap:wrap;}
.account-action-btn {background:#1b1f24; border:1px solid #30363d; color:#fff; padding:8px 14px; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; transition:.25s;}
.account-action-btn:hover {background:#262e36;}
.account-action-btn.danger {background:#f85149; border-color:#da3633;}
.account-action-btn.danger:hover {background:#da3633;}
.nav-bottom {display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:10px 14px 16px; gap:10px;}
.nav-bottom .nav-item {flex:0 0 auto;}

/* Create a row container for account and settings */
.nav-bottom .nav-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.nav-bottom .nav-account {order: 1; margin-right:auto; position:relative;}
.nav-bottom .nav-settings {order: 2; margin-left:auto;}
.nav-bottom .nav-link {display:flex; align-items:center; gap:8px;}
.nav-bottom .nav-settings .nav-link {padding:10px; border-radius:10px; width:40px; justify-content:center;}
.nav-bottom .nav-settings .nav-link i {margin:0;}

.sidebar-section-item {
    margin: 8px 12px 0;
}

.sidebar-section {
    margin: 0;
    padding: 12px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.sidebar-section-title {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-mini-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-section > .sidebar-mini-list:first-child {
    margin-top: 0;
}

.sidebar-plain {
    margin: 8px 12px 0;
    padding: 0;
    list-style: none;
}

.sidebar-plain-list {
    margin: 0;
}

.sidebar-section-separator {
    margin: 8px 12px;
    border-bottom: 1px solid var(--border-primary);
    opacity: 0.8;
    list-style: none;
}

.sidebar-mini-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sidebar-mini-item:hover {
    background: var(--hover-color);
    border-color: var(--accent-color);
    transform: translateX(2px);
}

.sidebar-mini-item .mini-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.mini-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mini-text {
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.mini-subtext {
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 12px;
}

.sidebar-mini-item .mini-pill {
    background: var(--accent-color);
    color: #0d1117;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sidebar-mini-item.active-game {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.2);
}

.sidebar-mini-progress {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
    position: relative;
    background: conic-gradient(var(--accent-color) var(--progress, 0%), rgba(255,255,255,0.08) 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}

.sidebar-mini-progress::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--bg-tertiary);
    border-radius: 50%;
}

.mini-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b1f24, #0f131a);
    border: 2px solid var(--border-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c9d1d9;
    font-weight: 700;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-online-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sidebar-online-item:hover {
    background: var(--hover-color);
    border-color: var(--accent-color);
    transform: translateX(2px);
}

.sidebar-online-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sidebar-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: 8px 4px;
    list-style: none;
}

.nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
    background: linear-gradient(135deg, #1b1f24, #0f131a);
    background-size: cover;
    background-position: center;
    margin-right: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c9d1d9;
    font-weight: 700;
    font-size: 12px;
    overflow: hidden;
}

.account-dropdown {
    position: absolute;
    bottom: 64px;
    left: 0;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    min-width: 180px;
    padding: 8px 0;
    display: none;
    z-index: 200;
}
.account-dropdown[aria-hidden="false"] {display:block;}
.account-dropdown ul {list-style:none; margin:0; padding:0;}
.account-dropdown li {margin:0;}
.account-dropdown button {width:100%; background:transparent; border:none; color:#c9d1d9; display:flex; align-items:center; gap:10px; padding:10px 14px; text-align:left; cursor:pointer; font-weight:600;}
.account-dropdown button:hover {background:#1f2630;}
.account-dropdown button.danger {color:#f85149;}
.account-dropdown button i {width:16px; text-align:center;}

/* Header Status Indicator Styles */
.header-status {
    display: flex;
    align-items: center;
    margin-right: 16px;
}

.header-status .status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
}

.header-status .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7d8590;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 2px rgba(125, 133, 144, 0.2);
}

.header-status .status-dot.online {
    background: #2ea043;
    box-shadow: 0 0 0 2px rgba(46, 160, 67, 0.3), 0 0 8px rgba(46, 160, 67, 0.4);
    animation: pulse-online-modern 2s infinite;
}

.header-status .status-dot.offline {
    background: #f85149;
    box-shadow: 0 0 0 2px rgba(248, 81, 73, 0.3);
}

.header-status .status-dot.time-dot {
    background: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.35), 0 0 10px rgba(88, 166, 255, 0.45);
}

@keyframes pulse-online-modern {
    0%, 100% { 
        transform: scale(1);
        opacity: 1; 
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8; 
    }
}

.header-status .status-text {
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.header-status .status-text.online {
    color: #2ea043;
}

.header-status .status-text.offline {
    color: #f85149;
}

/* Offline Overlays */
.offline-overlays {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;
}

.game-offline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 17, 23, 0.95);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: auto;
}

.main-offline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 17, 23, 0.98);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: auto;
}

.ads-offline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 17, 23, 0.9);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: auto;
    border-radius: 16px;
}

.offline-content {
    text-align: center;
    color: var(--text-primary);
    padding: 32px;
    max-width: 400px;
}

.offline-content i {
    font-size: 48px;
    color: #f85149;
    margin-bottom: 16px;
    opacity: 0.8;
}

.offline-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.offline-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.offline-content p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.offline-content span {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Hide content when offline */
.offline-mode .games-grid,
.offline-mode #categoryTabs,
.offline-mode #allGamesTitle,
.offline-mode #favoritesTitle,
.offline-mode #favoriteGamesSection,
.offline-mode #favoritesPageGrid,
.offline-mode .ad-column {
    display: none !important;
}
@media (max-width:1200px){ .account-iframe {height:300px;} }
/* Update modal */
.update-modal {position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; font-family:inherit;}
.update-modal-backdrop {position:absolute; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);}
.update-modal-dialog {position:relative; width:100%; max-width:400px; background:#161b22; border:1px solid #30363d; border-radius:16px; padding:22px 22px 18px; box-shadow:0 10px 40px rgba(0,0,0,.6); animation:scaleIn .35s cubic-bezier(.4,.8,.2,1);}
@keyframes scaleIn {0%{transform:scale(.85) translateY(12px); opacity:0;} 100%{transform:scale(1) translateY(0); opacity:1;}}
.update-modal-header h3 {margin:0 0 8px; font-size:20px; font-weight:600;}
.update-modal-body p {margin:0 0 18px; color:#9ba3af; line-height:1.5;}
.update-modal-actions {display:flex; justify-content:flex-end; gap:12px;}
.update-btn-primary, .update-btn-secondary {border:1px solid #30363d; background:#1b2129; color:#fff; padding:8px 16px; font-size:14px; border-radius:8px; cursor:pointer; font-weight:600; transition:.25s;}
.update-btn-primary {background:#238636; border-color:#2ea043;}
.update-btn-primary:hover {background:#2ea043;}
.update-btn-secondary:hover {background:#262e38;}
.update-btn-primary:focus, .update-btn-secondary:focus {outline:2px solid #58a6ff; outline-offset:2px;}
.update-modal[aria-hidden="true"] {display:none;}
.logout-btn {background:#1b1f24; border:1px solid #30363d; color:#fff; padding:8px 14px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:.25s; font-family:inherit;}
.logout-btn:hover {background:#262e36;}
.logout-btn.danger {background:#f85149; border-color:#da3633; color:#fff;}
.logout-btn.danger:hover {background:#da3633;}
.logout-btn:focus {outline:2px solid #58a6ff; outline-offset:2px;}

.legal-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    padding: 16px 18px;
    color: var(--text-secondary);
    line-height: 1.6;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.legal-card p {
    margin: 0 0 12px;
}

.legal-card h3 {
    margin: 12px 0 8px;
    color: var(--text-primary);
    font-size: 16px;
}

.legal-list {
    list-style: disc;
    padding-left: 22px;
    margin: 6px 0 14px;
}

.legal-list li {
    margin: 6px 0;
    color: var(--text-secondary);
}

.proxy-toggle-btn {
    border: 2px solid var(--border-primary) !important;
    border-radius: 12px;
    width: 48px;
    height: 48px;
    background: transparent;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.proxy-toggle-btn i {
    font-size: 20px;
}

.proxy-toggle-btn:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color);
    transform: translateY(-1px);
}

.proxy-toggle-btn.on {
    border-color: var(--accent-color) !important;
    color: var(--accent-color);
}

.proxy-toggle-btn.off {
    border-color: var(--border-primary) !important;
    color: var(--text-muted);
}

.auth-modal-shell {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 14000;
}

.auth-modal-shell .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.auth-modal {
    position: relative;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 14px;
    padding: 22px 22px 18px;
    width: 320px;
    z-index: 1;
    box-shadow: 0 12px 50px rgba(0,0,0,0.6);
}

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.auth-tab {
    background: #1b1f24;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.auth-tab.active { border-color: var(--accent-color); color: #fff; }

.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #c9d1d9; }
.auth-form input { background:#0d1117; border:1px solid #30363d; color:#fff; padding:10px; border-radius:10px; }
.auth-form .update-check-btn { width: 100%; justify-content: center; text-align: center; }
.auth-feedback { color:#f85149; font-size:12px; min-height:16px; }

.close-auth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.close-auth:hover {
    background: var(--hover-color);
    color: var(--text-primary);
    border-color: var(--accent-color);
}

.close-auth:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.close-auth i {
    pointer-events: none;
}

.auth-modal .close-auth {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Custom Confirmation Dialog */
#customConfirmDialog {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

#customConfirmDialog .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

#customConfirmDialog .custom-confirm-dialog {
    position: relative;
    background: #161b22;
    border: 1px solid #30363d;
    padding: 20px 24px;
    border-radius: 12px;
    width: 320px;
    font-family: inherit;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    animation: scaleIn 0.35s cubic-bezier(0.4, 0.8, 0.2, 1);
    outline: none;
}

#customConfirmDialog .modal-header {
    margin: 0 0 12px 0;
    padding: 0;
    border: none;
}

#customConfirmDialog .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

#customConfirmDialog .modal-close {
    display: none;
}

#customConfirmDialog .modal-body {
    padding: 0;
    margin: 0 0 18px 0;
}

#customConfirmDialog .modal-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #a0a6ad;
}

#customConfirmDialog .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0;
    margin: 0;
}

#customConfirmDialog .modal-footer button {
    background: #1b1f24;
    border: 1px solid #30363d;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s;
    font-family: inherit;
}

#customConfirmDialog .modal-footer .confirm-cancel:hover {
    background: #262e36;
}

#customConfirmDialog .modal-footer .confirm-ok {
    background: #f85149;
    border-color: #da3633;
}

#customConfirmDialog .modal-footer .confirm-ok:hover {
    background: #da3633;
}

#customConfirmDialog .modal-footer button:focus {
    outline: 2px solid #58a6ff;
    outline-offset: 2px;
}
/* Mobile unsupported overlay */
.mobile-unsupported {position:fixed; inset:0; background:#0d1117; z-index:20000; display:flex; align-items:center; justify-content:center; padding:40px; text-align:center;}
.mobile-unsupported .mu-content {max-width:520px;}
.mobile-unsupported h1 {margin:0 0 14px; font-size:34px; background:linear-gradient(90deg,#6366f1,#8b5cf6); -webkit-background-clip:text; background-clip:text; color:transparent;}
.mobile-unsupported p {margin:0; font-size:16px; line-height:1.5; color:#9ba3af;}

.report-game-meta {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: #9ba3af;
}

.report-meta-line {
    margin-top: 6px;
    font-size: 12px;
    color: #8b949e;
}

/* App Container */
.app-container {
    display: flex;
    flex: 1;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 220px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-primary);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-primary);
    height: 72px; /* Match top header height */
    display: flex;
    align-items: center;
    transition: border-color 0.3s ease;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary-transparent, rgba(22,27,34,0.85));
    backdrop-filter: blur(6px);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: transparent; /* removed gradient */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon i {
    font-size: 18px;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.sidebar-nav {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.nav-list {
    list-style: none;
    padding: 16px 0;
}

.nav-list:first-child {
    flex-grow: 1; /* Main navigation takes available space */
}

.nav-bottom {
    border-top: 1px solid var(--border-primary);
    padding: 8px 0 16px 0;
    flex-shrink: 0;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--bg-secondary-transparent, rgba(22,27,34,0.85));
    backdrop-filter: blur(6px);
    z-index: 5;
}

.nav-settings {
    margin: 2px 12px;
}

.nav-settings .nav-link {
    justify-content: flex-start;
    padding: 8px; /* Reduced padding to fit icon only */
    width: 36px; /* Fixed width for icon only */
    height: 36px; /* Fixed height for icon only */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-settings .nav-icon {
    margin-right: 0;
}

.nav-item {
    margin: 2px 12px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Truncate long account label to prevent sidebar scrollbar */
#accountLabel {
    max-width: 90px; /* slimmer to reduce sidebar scrollbar risk */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.nav-link:hover {
    background: var(--hover-color);
    color: var(--text-primary);
}

.nav-legal-link {
    margin: 0 12px 0;
}

.nav-legal-link .nav-link {
    font-size: 13px;
    color: var(--text-muted);
    padding-top: 8px;
    padding-bottom: 8px;
}

.nav-legal-link .nav-link:hover {
    color: var(--text-primary);
}

.nav-item.active .nav-link {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--accent-color);
}

/* Simple page footer with no floating container */
.site-footer {
    margin-left: 220px;
    padding: 20px 32px 26px;
    border-top: 1px solid var(--border-primary);
}

.site-footer-nav {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.footer-nav-item {
    margin: 0;
}

.site-footer-link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    text-decoration: none;
    font-size: 13px;
}

.site-footer-link:hover {
    color: var(--text-primary);
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-nav-item.active .site-footer-link {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-separator {
    color: var(--text-muted);
    opacity: 0.75;
    user-select: none;
}

.nav-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 220px;
    background: var(--bg-primary);
}

/* Top Header */
.top-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    padding: 16px 32px;
    height: 72px; /* Match sidebar header height */
    position: sticky;
    top: 0;
    z-index: 90; /* Below sidebar (100) */
    display: flex;
    align-items: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: var(--bg-secondary-transparent, rgba(22,27,34,0.85));
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.top-header.scrolled {
    box-shadow: 0 4px 14px -2px rgba(0,0,0,0.55);
    border-bottom-color: var(--border-secondary);
}

.header-content {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: nowrap;
    width: 100%; /* Keep header actions stretched across the row */
}

.header-actions {margin-left:auto; display:flex; align-items:center; gap:14px;}

.welcome-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.welcome-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    color: white;
}

.welcome-icon i {
    font-size: 24px;
}

.welcome-text h2 {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.welcome-text p {
    font-size: 14px;
    color: #7d8590;
}

.header-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #7d8590;
}

.stat-icon {
    font-size: 16px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-card-actions {
    position: absolute;
    bottom: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    justify-content: flex-end;
    width: calc(100% - 24px);
    left: 12px;
}

.game-card:hover .game-card-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.game-card-actions .fav-toggle i {pointer-events:none;}

/* Content Area */
.content-area {
    padding: 0;
    /* In case some element introduced margin collapse, enforce min offset */
    margin-top: 0;
    overflow: hidden;
    position: relative;
}
.friends-columns {margin-top:8px;}
.friends-panel {background: var(--bg-secondary); border:1px solid var(--border-primary); padding:16px 18px 18px; border-radius:14px; position:relative; overflow:hidden; margin-bottom: 24px;}
.friends-panel:last-child {margin-bottom: 0;}
.friends-panel h3 {font-size:16px; font-weight:600; margin:0 0 12px; display:flex; align-items:center; gap:6px;}
.friends-panel h4 {font-size:14px; font-weight:600; margin:10px 0 8px;}

/* Friends page layout improvements */
#friendsPage .games-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    min-height: 420px;
}
#friendsPage .games-section {display:flex; flex-direction:column; gap:18px;}

#friendsPage .empty-state {
    margin-top: 0;
}

#friendsContent {
    width: 100%;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
#friendsContent {width:100%;}
.friends-tabs-shell {display:flex; flex-direction:column; gap:16px;}
.friends-tab-nav {display:flex; gap:10px; flex-wrap:wrap; margin-left:auto;}
.section-header .friends-tab-nav {margin-bottom:0;}
.friends-tab {padding:6px 14px; border-radius:999px; font-weight:600;}

#adminTabNav {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

#adminTabNav .admin-tab-buttons,
#adminTabNav .admin-tab-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#adminTabNav .admin-tab-actions {
    margin-left: auto;
    justify-content: flex-end;
}

#adminTabNav .admin-tab-actions .friends-tab {
    height: 34px;
    display: inline-flex;
    align-items: center;
}

.admin-tab-search {
    width: 240px;
    max-width: 32vw;
    height: 34px;
    box-sizing: border-box;
    border-radius: 999px !important;
    padding: 6px 14px;
    font-size: 13px;
}
.friends-tab-panels {width:100%;}
.friends-tab-panel {display:none; opacity:0; transform:translateY(8px); transition:opacity .24s ease, transform .24s cubic-bezier(.22,.61,.36,1);}
.friends-tab-panel.active {display:block; opacity:1; transform:translateY(0);}
.friends-tab-panel.entering {opacity:0; transform:translateY(8px);}
.friends-tab-panel.leaving {opacity:0; transform:translateY(8px);}
.manage-header-row {display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.friends-add-panel {background:var(--bg-secondary); border:1px solid var(--border-primary); padding:16px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.friends-add-panel p {margin:0; color:var(--text-secondary);}
.friends-list .friend-item {background:var(--bg-tertiary); border:1px solid var(--border-primary); padding:8px 10px; border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; line-height:1.3; transition:.25s;}
.friends-list .friend-item.online {border-color:#2ea04333; box-shadow:0 0 0 1px #2ea04333;}
.friends-list .friend-item:hover {background:#1e242c;}
.friends-list .friend-actions {display:flex; gap:6px;}
.friends-list .friend-row {background:var(--bg-tertiary); border:1px solid var(--border-primary); padding:10px 12px; border-radius:12px; display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.3; transition:.25s;}
.friends-list .friend-row:hover {background:#1e242c;}
.friends-list .friend-meta {display:flex; flex-direction:column; gap:2px;}
.friends-list .friend-actions {margin-left:auto; display:flex; align-items:center; gap:8px;}
.friend-action-btn {width:34px; height:34px; border-radius:10px; border:1px solid #30363d; background:#1b1f24; color:#c9d1d9; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.2s ease;}
.friend-action-btn:hover {background:#262e38;}
.friend-action-btn.positive {background:#1f6f3f; border-color:#2ea043; color:#d5f6df;}

.admin-page-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-title-dot {
    color: var(--text-muted);
}

#adminSubpageTitle {
    color: var(--text-secondary);
    font-size: 0.92em;
}

#adminTabPanels {
    margin-top: 14px;
}

#adminTabPanels > .friends-tab-panel > .section-header > .section-title {
    display: none;
}
.friend-action-btn.danger {background:#2a1515; border-color:#432020; color:#f1c0c0;}
.friend-action-btn i {pointer-events:none;}

/* Admin search inputs */
.admin-search {width:100%; margin:0 0 10px;}

/* Admin notice layout */
.admin-notice-grid {display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start;}
.admin-notice-toggles {grid-column:1; grid-row:1; align-self:start;}
.admin-notice-fields {grid-column:2; grid-row:1;}
.admin-notice-toggles {display:flex; flex-direction:column; gap:10px; background:var(--bg-tertiary); border:1px solid var(--border-primary); padding:12px; border-radius:10px;}
.admin-notice-fields {display:flex; flex-direction:column; gap:12px;}
.admin-notice-grid .setting-inline {gap:12px;}
.toggle-row {display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:700;}
.toggle-row input[type="number"] {width:100%; margin-left:10px;}
.profile-form.admin-notice-grid {display:grid; grid-template-columns:240px minmax(0,1fr); gap:16px; align-items:start;}
.admin-notice-toggles {min-width:220px;}

/* Admin user list styling */
.admin-user-subline {display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px;}
.admin-user-email {color:var(--text-secondary); font-size:13px;}
.admin-user-logins {background:transparent; border:1px dashed var(--border-primary); color:var(--text-primary); padding:6px 10px; border-radius:8px; cursor:pointer; transition:background .2s, border-color .2s; font-size:13px; white-space:nowrap;}
.admin-user-logins:hover {background:var(--hover-color); border-color:var(--accent-color);}
.admin-user-avatar {width:56px; height:56px; font-size:18px;}

@media (max-width: 800px) {
    .admin-notice-grid, .profile-form.admin-notice-grid {grid-template-columns:1fr;}
}

/* Preset grids */
.admin-presets-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); gap:12px; align-items:start;}
.admin-presets-list {display:flex; flex-direction:column; gap:10px;}
.admin-preset-card {display:flex; align-items:flex-start; justify-content:space-between; gap:12px; background:var(--bg-tertiary); border:1px solid var(--border-primary); padding:12px 14px; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,0.18);}
.admin-preset-meta {display:flex; flex-direction:column; gap:4px; min-width:0;}
.admin-preset-name {font-weight:700; font-size:14px; color:var(--text-primary);}
.admin-preset-url {color:var(--text-secondary); font-size:13px; text-decoration:none; word-break:break-all;}
.admin-preset-url:hover {color:var(--accent-color);}
.admin-preset-keybind {color:var(--text-muted); font-size:12px;}
.admin-preset-actions {display:flex; gap:8px; align-items:center;}
.admin-preset-row {display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; align-items:center; margin-bottom:10px;}

/* Generic modal card */
.modal-card {background:#161b22; border:1px solid #30363d; padding:18px 20px; border-radius:12px; width:420px; position:relative; box-shadow:0 14px 30px rgba(0,0,0,0.4);}
.modal-header {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.modal-header h3 {margin:0; font-size:18px;}
.modal-message {margin:0 0 12px; color:var(--text-secondary); line-height:1.4;}
.modal-input-row {display:flex; flex-direction:column; gap:6px; margin:0 0 12px;}
.modal-actions {display:flex; justify-content:flex-end; gap:10px;}
.modal-actions .logout-btn.danger {background:#f85149; border-color:#da3633; color:#fff;}
.modal-actions .logout-btn.danger:hover {background:#da3633;}
.modal-actions .logout-btn.positive {background:#2ea043; border-color:#2ea043; color:#fff;}
.modal-actions .logout-btn.positive:hover {background:#29903c;}

/* Login history list */
.login-history-list {display:flex; flex-direction:column; gap:8px;}
.login-history-row {display:flex; align-items:center; justify-content:space-between; padding:10px; border:1px solid var(--border-primary); border-radius:10px; background:var(--bg-tertiary);}
.login-history-ip {font-weight:800;}
.login-history-meta {color:var(--text-secondary); font-size:13px;}
.game-friend-avatars {display:flex; align-items:center; gap:8px; margin-right:10px;}
.game-friend-avatars .card-avatar-pill {width:30px; height:30px; border:2px solid #00000055;}
.friends-tab-panel.animating {display:block;}
.mini-btn {background:#1b2129; border:1px solid #30363d; color:#fff; padding:4px 8px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; transition:.25s;}
.mini-btn:hover {background:#262e38;}
.mini-btn.danger {background:#3a1414; border-color:#432020;}
.mini-btn.danger:hover {background:#541f1f;}
.presence-pill {background:#1b2129; padding:2px 6px; border-radius:12px; font-size:11px; color:#7d8590;}
.friend-item.online .presence-pill {background:#142a19; color:#399251;}
#addFriendForm input {background:#1b2129; border:1px solid #30363d; color:#fff; padding:8px 10px; border-radius:8px; font-size:13px;}
#addFriendForm input:focus {outline:2px solid var(--accent-color); outline-offset:2px;}

/* Enhanced Friends Tab System (aligned with category pills) */
.friends-tab-content {display:none;}
.friends-tab-content.active {display:block;}
.add-friend-modal {max-width:360px; width:90%;}

/* Notification stack */
.notification-stack {position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; z-index:12000; pointer-events:none;}
.notification-card {--notif-accent:#58a6ff; --notif-duration:4500ms; width:340px; max-width:calc(100vw - 32px); background:#11161f; border:1px solid var(--border-primary); border-radius:12px; padding:12px 14px 16px 16px; box-shadow:0 14px 36px rgba(0,0,0,0.45); color:var(--text-primary); display:flex; gap:12px; align-items:flex-start; opacity:0; transform:translate3d(48px,0,0); animation:notifIn .7s cubic-bezier(.22,1,.36,1) forwards; pointer-events:auto; position:relative; overflow:hidden; will-change:transform,opacity;}
.notification-card::before {content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--notif-accent); border-top-left-radius:12px; border-bottom-left-radius:12px;}
.notification-card.info {--notif-accent:#58a6ff;}
.notification-card.success {--notif-accent:#2ea043;}
.notification-card.warning {--notif-accent:#d29922;}
.notification-card.error {--notif-accent:#f85149;}
.notification-icon {width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); color:var(--notif-accent); flex-shrink:0;}
.notification-body {flex:1;}
.notification-title {font-weight:700; font-size:14px; margin-bottom:4px;}
.notification-text {font-size:13px; color:var(--text-secondary);}
.notification-close {background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; border-radius:8px;}
.notification-close:hover {color:#fff; background:rgba(255,255,255,0.06);}
.notification-progress {position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.08); overflow:hidden;}
.notification-progress-bar {display:block; height:100%; width:100%; background:var(--notif-accent); animation:notifProgress var(--notif-duration) linear forwards; transform-origin:left center;}
.notification-card.exiting {animation:notifOut .7s cubic-bezier(.22,1,.36,1) forwards !important;}
@keyframes notifIn {0% {opacity:0; transform:translate3d(48px,0,0);} 72% {opacity:1; transform:translate3d(-6px,0,0);} 100% {opacity:1; transform:translate3d(0,0,0);} }
@keyframes notifOut {0% {opacity:1; transform:translate3d(0,0,0);} 100% {opacity:0; transform:translate3d(48px,0,0);} }
@keyframes notifProgress {from {transform:scaleX(1);} to {transform:scaleX(0);} }

/* Add Friend Form primary button styling */
.add-friend-form button.primary {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    transition: background .25s, filter .25s, transform .15s;
}

.add-friend-form button.primary i { font-size: 14px; }

.add-friend-form button.primary:hover {
    background: var(--accent-hover);
    filter: brightness(1.05);
}

.add-friend-form button.primary:active {
    transform: translateY(1px);
}

.add-friend-form button.primary:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Friends Stats Cards */
.friends-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-number {
    font-size: 32px;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Add Friend Form */
.add-friend-form {
    max-width: 400px;
}

.form-group {
    margin-bottom: 16px;
}

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

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 14px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

.form-feedback {
    margin-top: 8px;
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
    display: none;
}

.form-feedback.show {
    display: block;
}

.form-feedback.success {
    background: rgba(0, 210, 106, 0.1);
    border: 1px solid rgba(0, 210, 106, 0.3);
    color: #00d26a;
}

.form-feedback.error {
    background: rgba(215, 58, 73, 0.1);
    border: 1px solid rgba(215, 58, 73, 0.3);
    color: #d73a49;
}

/* Tips List */
.tips-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tips-list li {
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
    position: relative;
    padding-left: 20px;
}

.tips-list li::before {
    content: '💡';
    position: absolute;
    left: 0;
    top: 8px;
}

/* Activity Feed */
.activity-feed {
    max-height: 200px;
    overflow-y: auto;
}

.muted-hint {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Profile dropdown (raise-up menu) */
.profile-dropdown {position:fixed; left:0; top:0; transform:none; background:var(--bg-secondary); border:1px solid var(--border-primary); border-radius:14px; width:220px; padding:10px 10px 12px; box-shadow:0 8px 34px -6px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:4000; display:none; }
.profile-dropdown.open {display:block; opacity:1; pointer-events:auto;}
.profile-dropdown ul {list-style:none; margin:0; padding:4px 0; display:flex; flex-direction:column; gap:4px;}
.profile-dropdown li {margin:0;}
.profile-dropdown button {width:100%; background:#1b2129; border:1px solid #30363d; color:#fff; padding:8px 10px; border-radius:8px; font-size:13px; font-weight:500; text-align:left; cursor:pointer; transition:.25s; display:flex; align-items:center; gap:8px;}
.profile-dropdown button:hover {background:#262e38;}
.profile-dropdown button.danger {background:#3a1414; border-color:#432020;}
.profile-dropdown button.danger:hover {background:#541f1f;}

/* Profile settings panel */
#profileSettingsPage.page {display:none;}
.profile-settings-wrapper {max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:28px;}
.profile-card {background:var(--bg-secondary); border:1px solid var(--border-primary); padding:22px 24px 26px; border-radius:16px; position:relative;}
.profile-card h2 {margin:0 0 12px; font-size:20px; font-weight:600;}
.profile-row {display:flex; gap:22px; flex-wrap:wrap; align-items:stretch;}
.avatar-uploader {width:128px; height:128px; border:2px dashed #30363d; border-radius:20px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; background:#1b2129;}
.avatar-uploader img {width:100%; height:100%; object-fit:cover;}
.avatar-uploader input {display:none;}
.avatar-uploader:hover {border-color:var(--accent-color);}
.profile-form {flex:1; min-width:240px; display:flex; flex-direction:column; gap:12px;}
.profile-form label {font-size:13px; font-weight:600; color:#a0a6ad; display:flex; flex-direction:column; gap:6px;}
.profile-form input {background:#1b2129; border:1px solid #30363d; color:#fff; padding:10px 12px; border-radius:8px; font-size:14px;}
.profile-form input:focus {outline:2px solid var(--accent-color); outline-offset:2px;}
.profile-actions {display:flex; gap:10px;}
.profile-actions button {background:#1b2129; border:1px solid #30363d; color:#fff; padding:10px 14px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:.25s;}
.profile-actions button.primary {background:#238636; border-color:#2ea043;}
.profile-actions button.primary:hover {background:#2ea043;}
.profile-actions button.secondary:hover {background:#262e38;}
.profile-actions button:disabled {opacity:.6; cursor:wait;}
.save-indicator {font-size:12px; color:#7d8590; margin-left:auto; display:flex; align-items:center; gap:6px;}
.save-indicator.success {color:#2ea043;}
.save-indicator.error {color:#f85149;}

.page {
    padding: 16px 32px 16px;
    box-sizing: border-box;
    display: none;
    width: 100%;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
    will-change: opacity, transform;
    position: relative;
}

.page.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.page.is-visible {
    display: block;
    position: relative;
}

.page.leaving {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.page.entering {
    opacity: 0;
    transform: translateY(8px);
}

.overlay-enter,
.overlay-leave {
    position: absolute !important;
    inset: 0;
    width: 100%;
}

.overlay-enter { z-index: 2; }
.overlay-leave { z-index: 1; }

/* Games Section */
.games-section {
    margin-bottom: 48px;
}

.section-header {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

/* Games Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Admin Analytics */
.analytics-toolbar {align-items:center; gap:12px; flex-wrap:wrap;}
.analytics-range-control {display:flex; align-items:center; gap:8px; background:var(--bg-tertiary); border:1px solid var(--border-primary); padding:6px 10px; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,0.18);} 
.analytics-range-control label {font-size:13px; color:var(--text-secondary); font-weight:600; letter-spacing:0.2px;}
.analytics-range-control select {background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border-primary); border-radius:8px; padding:6px 10px; font-weight:600; font-size:13px; min-width:150px;}
.analytics-card-header {display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap;}
.analytics-card-header h3 {margin:0;}
.analytics-card-body {margin-top:10px;}
.analytics-range-pill {background:var(--bg-tertiary); color:var(--text-secondary); border:1px solid var(--border-primary); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; letter-spacing:0.2px; text-transform:uppercase;}
.analytics-card-actions {display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.analytics-max-btn {background:var(--bg-secondary); border:1px solid var(--border-primary); color:var(--text-primary); padding:6px 10px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; transition:0.2s;}
.analytics-max-btn:hover {background:var(--bg-primary);}
.analytics-chart-text {display:flex; flex-direction:column; gap:4px; line-height:1.3; margin-bottom:8px;}
.analytics-subtext {color:var(--text-secondary); font-size:13px; font-weight:600;}
.analytics-note {color:var(--text-secondary); font-size:14px; margin:6px 0; padding:0; text-align:left; font-style:normal;}
.analytics-note + .analytics-note {margin-top:4px;}
#adminAnalyticsPanel .muted-hint {font-style:normal; padding:0; text-align:left; margin:0; color:var(--text-secondary);} 
.analytics-chart {background:var(--bg-tertiary); border:1px solid var(--border-primary); border-radius:10px; padding:8px; box-shadow:0 6px 16px rgba(0,0,0,0.18);} 
.analytics-chart-plot {display:grid; grid-template-columns:48px 1fr; gap:8px; align-items:stretch;} 
.analytics-chart-svg {display:flex; flex-direction:column; gap:6px;} 
.analytics-chart-svg svg {width:100%; height:180px; display:block;} 
.analytics-x-axis {display:flex; justify-content:space-between; font-size:12px; color:var(--text-secondary); padding:0 4px 4px;}
.analytics-x-label {white-space:nowrap;}
.analytics-y-axis {display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; font-size:12px; color:var(--text-secondary); padding:4px 6px 4px 0; height:180px; line-height:1;} 
.analytics-y-label {opacity:0.9;} 
.analytics-legend {display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; font-size:12px; color:var(--text-secondary);}
.analytics-legend-item {display:flex; align-items:center; gap:6px;}
.analytics-legend-swatch {width:12px; height:12px; border-radius:3px; display:inline-block;}
.analytics-game-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:6px;}
.analytics-game-card {position:relative; border:1px solid var(--border-primary); border-radius:12px; overflow:hidden; background:var(--bg-tertiary); aspect-ratio:16 / 9; min-height:140px; box-shadow:0 8px 20px rgba(0,0,0,0.28);}
.analytics-game-card.disabled {filter:saturate(0.65) brightness(0.8);}
.analytics-game-thumb {position:absolute; inset:0; background:linear-gradient(135deg, #11161f, #0d1117); background-size:cover; background-position:center;}
.analytics-game-thumb::after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.75) 100%);} 
.analytics-game-meta {position:absolute; left:12px; right:12px; bottom:10px; display:flex; flex-direction:column; gap:6px; z-index:2;}
.analytics-game-title {font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.45);}
.analytics-game-stats {display:flex; gap:12px; color:#f0f6fc; font-size:13px; text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.analytics-search-inline input {min-width:220px; margin-left:auto;}

/* Analytics modal */
.analytics-modal {position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:14000; background:rgba(0,0,0,0.55); backdrop-filter:blur(2px);} 
.analytics-modal.open {display:flex;} 
.analytics-modal-overlay {position:absolute; inset:0; cursor:pointer;} 
.analytics-modal-content {position:relative; background:var(--bg-secondary); border:1px solid var(--border-primary); border-radius:14px; padding:16px; width:min(1100px, 92vw); max-height:90vh; overflow-y:auto; box-shadow:0 12px 42px rgba(0,0,0,0.4); z-index:1; margin:0 auto;} 
.analytics-modal-close {position:absolute; top:10px; right:10px; background:transparent; border:1px solid var(--border-primary); border-radius:50%; width:32px; height:32px; color:var(--text-primary); font-size:18px; cursor:pointer;}
#analyticsModalBody {margin-top:12px;}

/* Admin user relations */
.admin-user-online {display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary);}
.admin-user-online .dot {width:10px; height:10px; border-radius:50%; background:#2ea043; box-shadow:0 0 0 4px rgba(46,160,67,0.15);} 
.admin-user-offline .dot {background:#6e7681; box-shadow:none;}
.relations-list {display:grid; gap:12px; padding:6px 0 12px;}
.relations-group {border:1px solid var(--border-primary); border-radius:10px; padding:10px 12px; background:var(--bg-tertiary);} 
.relations-group h4 {margin:0 0 8px; font-size:14px; color:var(--text-primary);} 
.relations-chips {display:flex; flex-wrap:wrap; gap:8px;} 
.relations-chip {background:var(--bg-secondary); border:1px solid var(--border-primary); border-radius:999px; padding:6px 10px; font-size:13px; color:var(--text-primary);} 
.relations-chip .status-dot {width:8px; height:8px; border-radius:50%; margin-right:6px; display:inline-block; background:#6e7681;} 
.relations-chip.online .status-dot {background:#2ea043;} 
.friend-name .admin-user-online {margin-left:8px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text-secondary);} 

.featured-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.game-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    /* Use 16:9 ratio for consistency; fixed height replaced */
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 140px; /* fallback for browsers without aspect-ratio */
    display: block;
}

.game-card--skeleton {
    pointer-events: none;
    cursor: default;
    opacity: 1;
    animation: none;
    border-color: #3a414c;
    background: #2a2f36;
}

.game-card--skeleton:hover {
    transform: none;
    box-shadow: none;
    border-color: #3a414c;
}

.game-skeleton-thumb {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2a2f36 0%, #323843 55%, #2a2f36 100%);
    overflow: hidden;
}

.game-skeleton-thumb::after {
    content: "";
    position: absolute;
    inset: -30% -70%;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-140%) rotate(8deg);
    animation: skeletonSweep 3.4s ease-in-out infinite;
}

.game-skeleton-content {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-skeleton-line {
    height: 10px;
    border-radius: 999px;
    background: rgba(230, 236, 244, 0.18);
}

.game-skeleton-line--title {
    width: 68%;
    height: 13px;
}

.game-skeleton-line--meta {
    width: 44%;
}

@keyframes skeletonSweep {
    0% {
        transform: translateX(-140%) rotate(8deg);
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    42% {
        transform: translateX(140%) rotate(8deg);
        opacity: 1;
    }
    43%, 100% {
        transform: translateX(140%) rotate(8deg);
        opacity: 0;
    }
}

.game-card .card-friend-avatars {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
}

.card-friend-avatars .card-avatar-pill {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #1b1f24, #0f131a);
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.card-friend-avatars .card-avatar-pill.more {
    background: rgba(0,0,0,0.35);
    border-color: rgba(255,255,255,0.2);
}

.featured-grid .game-card {
    height: 180px; /* Fixed height for featured cards */
}

.game-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: brightness(0.9);
}

.game-thumb {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.game-thumb img {object-fit: cover;}

.game-thumb img.thumb-fallback-logo {
    object-fit: contain;
    object-position: center;
    padding: 22px;
    filter: grayscale(1) brightness(0.78) contrast(1.05);
    background: linear-gradient(135deg, #c6c9cf 0%, #d8dbe0 100%);
}

.featured-grid .game-card img {
    height: 100%;
}

.game-card-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.game-card-title {
    font-size: 14px;
    font-weight: 900 !important;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.game-card-category {
    font-size: 12px;
    color: var(--text-secondary);
    pointer-events: none;
    text-transform: capitalize;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.game-card-overlay {
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.game-card:hover .game-card-overlay {
    opacity: 1;
}

.game-card-actions {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.game-card-actions .game-card-category {margin:0; font-weight:600; color:#e5e5e5;}
.game-card-actions .fav-toggle i {pointer-events:none;}

.game-card:hover .game-card-actions {
    opacity: 1;
    transform: translateY(0);
}

.game-card .fav-toggle {
    pointer-events: auto;
    color: #ffffff;
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: 50%;
    transition: color 0.2s ease, transform 0.2s ease;
    position: absolute;
    right: 12px;
    bottom: 12px;
}

.game-card .fav-toggle:hover {color: #e5e7eb; transform: scale(1.05); background: transparent;}

.game-card .fav-toggle.active {
    color: #e25555;
    background: transparent;
}

.game-card:hover .game-card-content,
.game-card:hover .game-card-overlay {
    opacity: 1;
}

/* Inline ad cards inside game grid */
.game-card.ad-card {position:relative; border:2px solid #1f6feb; box-shadow:0 0 0 1px rgba(31,111,235,0.35);}
/* Remove hover lift for ads */
.game-card.ad-card:hover {transform:none; box-shadow:0 0 0 1px rgba(31,111,235,0.55);} 
/* Remove gradient & overlay text for inline ads */
.game-card.ad-card .game-card-overlay {display:none !important;}
/* Keep small corner label */
.game-card.ad-card::after {content:'Ad'; position:absolute; top:6px; left:8px; background:rgba(31,111,235,0.85); padding:3px 8px; border-radius:6px; font-size:11px; letter-spacing:.5px; text-transform:uppercase; font-weight:600;}
/* Ad aspect wrapper ensures iframe stays 16:9 irrespective of ad creative */
.game-card.ad-card .ad-aspect {position:relative; width:100%; aspect-ratio:16/9; background:rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center;}
.game-card.ad-card .ad-slot {position:relative; width:100%; height:100%;}
.game-card.ad-card .ad-frame {position:relative; width:100%; height:100%;}
.game-card.ad-card iframe {width:100%; height:100%; display:block; object-fit:cover;}

.overlay-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.overlay-category {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: capitalize;
}

/* Suggested Games (sidebar) – full-width 16:9 thumbnails */
/* Ad Column */
.ad-column { display:flex; flex-direction:column; gap:22px; padding-top:4px; }
.ad-slot { width:100%; aspect-ratio:1/1; background:#161b22; border:1px solid #30363d; border-radius:16px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.ad-slot iframe { 
    width:100% !important; 
    height:100% !important; 
    border:0; 
    border-radius:inherit; 
    background:#0d1117; 
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    object-fit:cover;
}
.ad-slot img, 
.ad-slot object, 
.ad-slot embed,
.ad-slot video { 
    width:100% !important; 
    height:100% !important; 
    border:0; 
    border-radius:inherit; 
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    object-fit:cover;
}
.ad-slot::after { content:'Ad'; position:absolute; top:6px; left:10px; font-size:10px; letter-spacing:.8px; text-transform:uppercase; background:#30363d; color:#9ba3af; padding:3px 7px; border-radius:6px; font-weight:600; z-index:1; }
.ad-slot.loading::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,#1a1f25 8%,#222a33 18%,#1a1f25 33%); background-size:200% 100%; animation:adShimmer 1.4s linear infinite; }
@keyframes adShimmer { to { background-position:-200% 0; } }

/* Favorite heart button clarity */
.fav-btn { color:#7d8590; }
.fav-btn.active { color:#e25555; }

/* Centered favorites empty state */
#favoritesEmptyState {
    min-height: 0;
    width: 100%;
    height: 100%;
    display: none; /* toggled to flex in JS */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}

/* Center the entire section when empty state is visible */
#favoritesPage .games-section {
    display: block;
    min-height: 60vh;
    position: relative;
}
#favoritesPage .games-section.center-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#favoritesEmptyState h3 { font-size:24px; }
#favoritesEmptyState p { font-size:14px; }

/* Game Loading Overlay */
#gameLoadingOverlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(13,17,23,0.9), rgba(22,27,34,0.92)); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:20; }
#gameLoadingOverlay .loading-inner { width:min(420px,90%); text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.game-loading-spinner { width:48px; height:48px; }
.loading-status { font-size:15px; font-weight:700; letter-spacing:.3px; }
.loading-hint { font-size:12px; color:#9da5b4; min-height:16px; }
.game-frame-wrapper { position:relative; }

/* Loading Message */
.loading-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-size: 16px;
    color: #8b949e;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    margin: 20px 0;
    font-weight: 500;
    animation: pulse 2s infinite;
}

.jg-inline-loading {
    gap: 10px;
    width: 100%;
}

.jg-inline-loading-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(125, 133, 144, 0.35);
    border-top-color: var(--accent-color);
    animation: aplSpin .8s linear infinite;
    flex: 0 0 auto;
}

.update-check-btn.loading,
.logout-btn.loading,
.friend-action-btn.loading {
    cursor: wait;
    opacity: 0.75;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

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

.game-card:nth-child(2) { animation-delay: 0.1s; }
.game-card:nth-child(3) { animation-delay: 0.2s; }
.game-card:nth-child(4) { animation-delay: 0.3s; }
.game-card:nth-child(5) { animation-delay: 0.4s; }
.game-card:nth-child(6) { animation-delay: 0.5s; }

/* Game Page - New Layout */
.game-page-container {
    display: flex;
    width: 100%;
    background: #0d1117;
    gap: 8px;
}

.game-main-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 0 40px 0;
}

.game-frame-wrapper {
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:24px;
    position:relative;
}

.game-disabled-notice {
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(135deg, rgba(13,17,23,0.9), rgba(13,17,23,0.94));
    color:#f0f6fc;
    z-index:25;
    padding:24px;
}

.game-disabled-notice .disabled-inner {
    max-width:520px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}

.game-disabled-notice .disabled-inner i {
    font-size:28px;
    color:#f85149;
}

.game-disabled-notice h3 { margin:6px 0 4px; font-size:20px; }
.game-disabled-notice p { margin:0; color:#9da5b4; }

.game-content-wrapper { /* No longer used but keep safe */ display:none; }

#gameFrame {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent; /* Remove black background */
    min-height: 400px; /* Minimum height for the iframe */
}

.game-sidebar {
    width: 25%;
    padding: 16px;
    margin: 16px;
    margin-left: 8px; /* Half gap */
    overflow: hidden; /* Remove scrollbar from sidebar */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px); /* Adjust height to account for header and padding */
    background: transparent; /* Remove background to match page background */
    max-height: calc(100vh - 120px); /* Ensure it doesn't exceed viewport */
}

.game-ad-rail {
    width: 25%;
    padding: 16px 12px 24px 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 74px;
    align-self: flex-start;
}

.ad-rail-title {
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ad-slot-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ad-slot-placeholder {
    background: linear-gradient(135deg, rgba(88,166,255,0.12), rgba(88,166,255,0.06));
    border: 1px dashed var(--border-primary);
    border-radius: 12px;
    min-height: 160px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
}

.suggested-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 16px;
    flex-shrink: 0; /* Don't shrink the title */
    background: transparent; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
}

.suggested-games {
    background: transparent; /* Remove background */
    border: none; /* Remove border */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.suggested-games-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1; /* Take remaining space */
    overflow: hidden; /* Remove scrolling to prevent scrollbar */
    max-height: 100%; /* Don't exceed parent height */
}

.suggested-game-card {
    background: transparent; /* Remove background */
    border: none; /* Remove border */
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    height: 0; /* Use aspect ratio instead */
    aspect-ratio: 16/9; /* 16:9 ratio like homepage */
    flex-shrink: 0; /* Don't shrink individual cards */
}

.suggested-game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.suggested-game-card img {
    width: 100%;
    height: 100%; /* Full height of the card */
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.suggested-game-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    padding: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.suggested-game-card:hover .suggested-game-info {
    opacity: 1;
}

.suggested-game-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.suggested-game-category {
    font-size: 12px;
    color: #8b949e;
    text-transform: capitalize;
}

.no-games-message {
    color: #8b949e;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* ===== Game Page Button Consistent Styling ===== */
.game-info-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 16px 0;
    height: auto;
    min-height: 60px;
    flex-shrink: 0;
    margin-bottom: 16px;
    width: 100%;
    opacity: 1;
}

.game-info-bottom .icon-btn {
    background: transparent !important;
    border: 2px solid var(--border-primary) !important;
    color: var(--text-primary);
    padding: 12px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.game-info-bottom .icon-btn:hover {
    background: transparent !important;
    border: 2px solid var(--accent-color) !important;
    outline: none;
    transform: translateY(-1px);
    filter: none !important;
}

.game-info-bottom .icon-btn:active {
    transform: translateY(0);
}

.game-info-bottom .fav-btn.active {
    background: transparent !important;
    color: #e25555;
    border: 2px solid #e25555 !important;
}

.game-info-bottom .fav-btn.active:hover {
    background: transparent !important;
    border-color: #ff6b6b !important;
    outline: none;
    filter: none !important;
}

.fav-btn {position:relative;}
.fav-btn.active i {color:#e25555; animation:pulse .6s ease;}
@keyframes pulse {0%{transform:scale(1);}50%{transform:scale(1.3);}100%{transform:scale(1);}}

/* Home banner */
.home-banner-slot {margin-bottom: 20px;}
.home-banner {display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; border:1px solid rgba(255,255,255,0.06); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,0.35);}
.home-banner-text {display:flex; flex-direction:column; gap:6px;}
.home-banner-title {font-size:18px; font-weight:700; color:inherit;}
.home-banner-description {font-size:14px; color:inherit; opacity:0.9;}
.home-banner-actions {display:flex; align-items:center; gap:10px; margin-left:auto;}
.banner-btn {display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:10px; font-weight:700; font-size:13px; text-decoration:none; border:1px solid transparent; box-shadow:0 8px 24px rgba(0,0,0,0.25);} 
.banner-btn:hover {filter:brightness(1.05);} 
.banner-dismiss {background:transparent; border:1px solid rgba(255,255,255,0.14); color:inherit; padding:7px 9px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.2s;}
.banner-dismiss:hover {background:rgba(255,255,255,0.06);}

/* Category tabs */
.category-bar {display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px;}
.category-tabs {display:flex; gap:10px; flex-wrap:wrap; margin:0; justify-content:flex-start; flex:1 1 auto;}
.category-bar .search-container {margin-left:auto;}
#homePage .games-grid {padding-top: 8px;}
.category-tab {background:#1b1f24; color:#c9d1d9; border:1px solid #30363d; padding:6px 14px; border-radius:999px; font-size:13px; cursor:pointer; transition:.25s;}
.category-tab:hover {background:#30363d;}
.category-tab.active {background:#1f6feb; color:#fff; border-color:#1f6feb;}
/* New generated category buttons (JS uses .cat-tab) */
.cat-tab {background:#1b1f24; color:#c9d1d9; border:1px solid #30363d; padding:6px 14px; border-radius:999px; font-size:13px; cursor:pointer; font-weight:500; letter-spacing:.25px; display:inline-flex; align-items:center; gap:6px; position:relative; transition:background .25s, border-color .25s, color .25s, transform .25s;}
.cat-tab:hover {background:#212a34; color:#fff;}
.cat-tab:active {transform:translateY(1px);}
.cat-tab.active {background: transparent; color: var(--text-primary); border: 2px solid var(--accent-color); box-shadow: none;}
.cat-tab:focus-visible {outline:2px solid #58a6ff; outline-offset:2px;}
.cat-tab i {font-size:14px; color:inherit; opacity:.9;}
.cat-tab.active i {opacity:1;}

/* Current game sidebar tab */
.current-game-tab {display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; background:#1b1f24; margin:8px 12px; cursor:pointer; animation:slideIn .35s ease; position:relative;}
.current-game-tab.removing {animation:slideOut .35s ease forwards;}
.current-game-tab i {color:#1f6feb;}
@keyframes slideIn {from{opacity:0; transform:translateX(-12px);} to{opacity:1; transform:translateX(0);}}
@keyframes slideOut {to{opacity:0; transform:translateX(-12px); height:0; margin:0; padding:0;}}

/* Favorites section grid margin tweak */
#favoriteGamesSection {margin-bottom:32px;}

.game-description {
    background: transparent; /* Remove background */
    border: none; /* Remove border */
    border-radius: 0; /* Remove border radius */
    padding: 20px 0; /* Remove horizontal padding, keep vertical */
    margin-bottom: 20px;
    overflow-y: auto; /* Allow scrolling if description is long */
    flex: 1; /* Take remaining space */
}

.game-description h3 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}

.game-description p {
    font-size: 14px;
    color: #8b949e;
    line-height: 1.6;
    margin: 0;
}

.game-info-left h1 {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.game-info-left span {
    font-size: 14px;
    color: #8b949e;
    text-transform: capitalize;
}

.game-info-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.proxy-toggle-container {
    display: flex;
    align-items: center;
}

.proxy-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #8b949e;
    gap: 8px;
}

.proxy-toggle-label input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #30363d;
    border-radius: 3px;
    background: #21262d;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.proxy-toggle-label input[type="checkbox"]:checked {
    background: #1f6feb;
    border-color: #1f6feb;
}

.proxy-toggle-label input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -1px;
    left: 2px;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.proxy-toggle-text {
    font-size: 12px;
    color: #8b949e;
}

.icon-btn {
    background: #21262d;
    border: 1px solid #30363d;
    color: #8b949e;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background: #30363d;
    color: #ffffff;
}

.play-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.play-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.game-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.proxy-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.proxy-toggle input {
    display: none;
}

.toggle-slider {
    width: 44px;
    height: 24px;
    background: #30363d;
    border-radius: 12px;
    position: relative;
    transition: all 0.2s ease;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #7d8590;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.proxy-toggle input:checked + .toggle-slider {
    background: #1f6feb;
}

.proxy-toggle input:checked + .toggle-slider::after {
    transform: translateX(20px);
    background: #ffffff;
}

.toggle-label {
    font-size: 14px;
    color: #7d8590;
    font-weight: 500;
}

.icon-btn {
    background: #21262d;
    border: 1px solid #30363d;
    color: #7d8590;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.icon-btn:hover {
    background: #30363d;
    color: #ffffff;
}

/* Fullscreen Overlay */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0d1117;
    z-index: 1000;
    display: none;
}

.fullscreen-overlay.active {
    display: block;
}

.fullscreen-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
}

.exit-fullscreen-btn {
    background: rgba(22, 27, 34, 0.9);
    border: 1px solid #30363d;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exit-fullscreen-btn:hover {
    background: #30363d;
}

#fullscreenFrame {
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .main-content {
        margin-left: 0;
    }

    .site-footer {
        margin-left: 0;
        padding: 18px 24px 24px;
    }
    
    .game-container {
        flex-direction: column;
    }
    
    .game-sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .content-area {
        padding: 0;
    }
    .page {
        padding: 16px 16px 48px !important;
    }

    .site-footer {
        padding: 16px 16px 22px;
    }

    .site-footer-nav {
        gap: 10px;
    }
    
    .top-header {
        padding: 16px 20px;
    }
    
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .header-stats {
        display: none;
    }

    .category-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .category-bar .search-container {
        width: 100%;
    }
    
    #searchInput {
        width: 100%;
        max-width: 300px;
    }
    
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }
    
    .featured-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .game-page-header {
        padding: 16px 20px;
    }
    
    .game-meta {
        flex-direction: column;
        gap: 16px;
    }
    
    .game-actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    
    .featured-grid {
        grid-template-columns: 1fr;
    }
    
    .welcome-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* Navigation Bar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(44, 62, 80, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}

.logo {
    cursor: pointer;
}

.logo img {
    height: 45px;
    width: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.1);
}

.logo:hover img {
    filter: brightness(1.3);
    transform: scale(1.05);
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 40px;
}

.category-filters {
    display: flex;
    gap: 15px;
}

.filter-btn {
    background: rgba(52, 73, 94, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Nunito', sans-serif;
}

.filter-btn:hover {
    background: rgba(52, 73, 94, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.filter-btn.active {
    background: rgba(74, 144, 226, 0.9);
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
    border-color: rgba(74, 144, 226, 0.8);
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-container input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#searchInput {
    background: rgba(52, 73, 94, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 6px 38px 6px 14px;
    border-radius: 999px;
    width: 280px;
    font-size: 13px;
    font-family: 'Nunito', sans-serif;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#searchInput:focus {
    background: rgba(52, 73, 94, 1);
    border-color: rgba(74, 144, 226, 0.8);
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.2);
}

#searchInput::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Nunito', sans-serif;
}

.search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #c9d1d9;
    font-size: 14px;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
}

/* Main Content */
#mainContent {
    margin-top: 120px;
    padding: 30px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.page {
    padding: 16px 32px 16px;
    box-sizing: border-box;
    display: none;
    width: 100%;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
    will-change: opacity, transform;
    position: relative;
}

.page.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.page.is-visible {
    display: block;
    position: relative;
}

.page.leaving {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.page.entering {
    opacity: 0;
    transform: translateY(8px);
}

/* Homepage Game Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 30px 0;
}

.game-card {
    position: relative;
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(52, 73, 94, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    border-color: rgba(74, 144, 226, 0.5);
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.game-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    padding: 25px 20px 20px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-card:hover .game-info-overlay {
    transform: translateY(0);
}

.game-info-overlay h3 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
}

.game-info-overlay .category {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 400;
    font-family: 'Nunito', sans-serif;
    text-transform: capitalize;
}

/* Game Page */
.game-container {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    height: 650px;
}

.game-main {
    flex: 1;
    max-width: 80%;
}

#gameFrame {
    width: 100%;
    height: 90%;
    border-radius: 15px;
    background: rgba(52, 73, 94, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.game-controls-section {
    height: 10%;
    display: flex;
    align-items: center;
    padding: 15px 0;
}

.game-sidebar {
    width: 320px;
    background: rgba(52, 73, 94, 0.8);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.game-sidebar h3 {
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 1.2rem;
    font-family: 'Nunito', sans-serif;
}

.recommended-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.recommended-item {
    display: flex;
    gap: 12px;
    padding: 15px;
    background: rgba(44, 62, 80, 0.6);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.recommended-item:hover {
    background: rgba(44, 62, 80, 0.8);
    border-color: rgba(74, 144, 226, 0.3);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.recommended-item img {
    width: 65px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
}

.recommended-item-info h4 {
    color: #ffffff;
    font-size: 0.95rem;
    margin-bottom: 5px;
    font-weight: 500;
    font-family: 'Nunito', sans-serif;
}

.recommended-item-info .category {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-family: 'Nunito', sans-serif;
    text-transform: capitalize;
}

/* Game Info Section */
.game-info {
    display: flex;
    gap: 30px;
    background: rgba(52, 73, 94, 0.8);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.game-description {
    flex: 0 0 80%;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
}

.game-description::-webkit-scrollbar {
    width: 6px;
}

.game-description::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.game-description::-webkit-scrollbar-thumb {
    background: rgba(74, 144, 226, 0.6);
    border-radius: 3px;
}

.game-description p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-size: 0.95rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
}

.bottom-recommendations {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bottom-recommendations .recommended-item {
    height: 70px;
}

.bottom-recommendations .recommended-item img {
    width: 50px;
    height: 40px;
}

.bottom-recommendations .recommended-item-info h4 {
    font-size: 0.85rem;
}

.bottom-recommendations .recommended-item-info .category {
    font-size: 0.75rem;
}

.game-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#gameTitle {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
    font-family: 'Nunito', sans-serif;
}

.game-controls {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Proxy Toggle */
.proxy-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.proxy-toggle input {
    display: none;
}

.toggle-slider {
    width: 54px;
    height: 28px;
    background: rgba(44, 62, 80, 0.8);
    border-radius: 28px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.proxy-toggle input:checked + .toggle-slider {
    background: rgba(74, 144, 226, 0.8);
    border-color: rgba(74, 144, 226, 1);
}

.proxy-toggle input:checked + .toggle-slider::after {
    transform: translateX(26px);
    background: #4a90e2;
}

.toggle-label {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Nunito', sans-serif;
}

/* Control Buttons */
.control-btn {
    background: rgba(52, 73, 94, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Nunito', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-btn:hover {
    background: rgba(74, 144, 226, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

/* Fullscreen Overlay */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.98);
    z-index: 2000;
    display: none;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fullscreen-overlay.active {
    display: block;
    opacity: 1;
}

.fullscreen-controls {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 2001;
}

#fullscreenFrame {
    width: 100%;
    height: 100%;
    border: none;
}

/* Animations */

/* Responsive Design */
@media (max-width: 1200px) {
    .game-container {
        flex-direction: column;
        height: auto;
        gap: 25px;
    }
    
    .game-main {
        max-width: 100%;
    }
    
    .game-sidebar {
        width: 100%;
        margin-top: 20px;
    }
    
    #gameFrame {
        height: 500px;
    }
    
    .game-info {
        flex-direction: column;
        gap: 25px;
    }
    
    .game-description {
        flex: none;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .bottom-recommendations {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #mainContent {
        margin-top: 140px;
        padding: 20px;
    }
    
    .nav-container {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
    }
    
    .nav-controls {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    
    .category-filters {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .filter-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    
    #searchInput {
        width: 100%;
        max-width: 300px;
    }
    
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
        padding: 20px 0;
    }
    
    .game-card {
        height: 200px;
    }
    
    .game-container {
        gap: 20px;
    }
    
    .game-title-row {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .game-controls {
        gap: 20px;
        flex-wrap: wrap;
    }
    
    #gameFrame {
        height: 350px;
    }
    
    /* Game page responsive */
    .game-page-container {
        flex-direction: column;
        overflow-y: auto;
    }
    
    .game-main-area {
        width: 100%;
        padding: 0 0 16px 0;
    }
    
    .game-frame-wrapper {
        height: 60vh; /* Use viewport height for mobile */
        margin-bottom: 16px;
    }
    
    .game-sidebar {
        width: 100%;
        margin: 0;
        margin-top: 16px;
        max-height: 300px;
        height: auto;
    }
    
    .suggested-games-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
    }
    
    .suggested-game-card {
        min-width: 120px;
        flex-shrink: 0;
    }
    
    .suggested-game-card img {
        height: 60px;
    }
    
    .game-info-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        height: auto;
    }
    
    .logo img {
        height: 35px;
    }
    
    .navbar {
        padding: 15px 0;
    }
    
    .game-info {
        padding: 20px;
        gap: 20px;
    }
    
    .game-sidebar {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    #mainContent {
        padding: 15px;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .game-card {
        height: 180px;
    }
    
    #gameFrame {
        height: 300px;
    }
    
    .logo img {
        height: 30px;
    }
    
    .nav-container {
        padding: 0 15px;
    }
    
    .filter-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    #searchInput {
        padding: 10px 15px;
        font-size: 0.85rem;
    }
    
    .game-controls {
        justify-content: center;
    }
    
    .control-btn {
        padding: 10px 18px;
        font-size: 0.85rem;
    }
    
    /* New Game Page Layout - Mobile */
    .game-page-container {
        height: calc(100vh - 80px);
    }
    
    .game-header-overlay {
        padding: 12px 16px;
    }
    
    .game-title-overlay h1 {
        font-size: 18px;
    }
    
    .game-title-overlay span {
        font-size: 12px;
    }
    
    .back-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .icon-btn {
        width: 36px;
        height: 36px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .game-header-overlay {
        padding: 8px 12px;
    }
    
    .game-title-overlay h1 {
        font-size: 16px;
    }
    
    .back-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .icon-btn {
        width: 32px;
        height: 32px;
    }
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.category-card {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-card:hover {
    border-color: #1f6feb;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.category-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.category-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.category-card p {
    font-size: 14px;
    color: #7d8590;
    margin: 0;
}

/* Favorites */
.favorites-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.empty-state {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: #7d8590;
    margin: 0;
}

.empty-state-icon {
    font-size: 48px;
    margin-top: 16px;
    opacity: 0.7;
}

.empty-state-icon i {
    font-size: 48px;
}

.notice-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 32px 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px auto 32px;
    width: 100%;
    max-width: 1100px;
}

.notice-box .empty-state {
    margin: 0;
    padding: 0;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.notice-box .empty-state-icon {
    margin: 0 auto 6px;
}

.notice-box .update-check-btn {
    margin-top: 16px;
}

/* Unauthenticated page prompts should be center-screen and box-free */
#favoritesLoginBox,
#friendsAuthNoticeBox,
#settingsLoginBox {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 220px);
}

#favoritesLoginBox .empty-state,
#favoritesLoginNotice,
#friendsAuthNotice,
#settingsLoginNotice {
    margin: 0;
    padding: 0;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

#favoritesLoginBox .empty-state-icon,
#favoritesLoginNotice .empty-state-icon,
#friendsAuthNotice .empty-state-icon,
#settingsLoginNotice .empty-state-icon {
    margin: 0 auto 6px;
}

/* Settings */
.settings-content {
    max-width: 600px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.settings-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Page-level shells should not hide the site background */
.page > .profile-card,
.page > .legal-card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* Smaller section cards use glass blur instead of flat solid fills */
.settings-card,
.friends-panel,
.friends-add-panel,
.stat-card,
.notice-box,
.setting-group,
.profile-row .profile-card,
.profile-playtime,
.profile-achievements {
    background: rgba(22, 27, 34, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.settings-card h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
}

.settings-card label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.settings-card input[type="number"],
.settings-card input[type="color"] {
    width: 110px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    padding: 6px 8px;
    border-radius: 8px;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.setting-select {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    padding: 8px;
    border-radius: 8px;
}

.fetch-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.fetch-row input {
    flex: 1;
}

.setting-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-secondary);
}

.setting-label { font-size: 14px; color: var(--text-primary); }
.setting-hint { font-size: 12px; color: var(--text-muted); }

.setting-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.input-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    color: var(--text-secondary);
}

.input-stack input {
    width: 100%;
}

.setting-inline label {
    flex-direction: column;
    align-items: flex-start;
    font-size: 12px;
    color: var(--text-secondary);
}

.setting-inline input {
    width: 100%;
}

.setting-color {
    width: 48px !important;
    height: 32px;
    padding: 4px;
}

.ios-toggle {
    position: relative;
    width: 46px;
    height: 26px;
    display: inline-flex;
    align-items: center;
}

.ios-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.ios-toggle-slider {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--border-primary);
    border-radius: 999px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    cursor: pointer;
}

.ios-toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    top: 3px;
    background: #fdfdfd;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    transition: transform 0.25s ease;
}

.ios-toggle input:checked + .ios-toggle-slider {
    background: var(--accent-color);
    box-shadow: 0 6px 18px rgba(88,166,255,0.35);
}

.ios-toggle input:checked + .ios-toggle-slider::before {
    transform: translateX(20px);
}

.settings-actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0 0 6px;
    margin-top: 10px;
}

.settings-footer-meta .muted-hint {
    font-style: normal;
    text-align: left;
    padding: 0;
    margin: 0;
}

.setting-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.setting-group.collapsed {
    overflow: hidden;
}

.setting-group.collapsible .setting-group-header {
    padding: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.setting-group.collapsible .setting-group-header:hover {
    background: var(--hover-color);
}

.setting-group.collapsible.collapsed .setting-group-header {
    border-bottom: none;
}

.setting-group.collapsible .setting-group-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.setting-group-arrow {
    font-size: 14px;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.setting-group-content {
    padding: 24px 20px 32px 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.setting-group:not(.collapsed) .setting-group-content {
    max-height: none !important;
}

.setting-group.collapsed .setting-group-content {
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
}

/* Non-collapsible setting groups (fallback) */
.setting-group:not(.collapsible) {
    padding: 20px;
}

.setting-group:not(.collapsible) h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.setting-item {
    margin-bottom: 12px;
}

.setting-item:last-child {
    margin-bottom: 0;
}

.setting-item label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
}

.setting-item input[type="checkbox"] {
    margin-right: 12px;
    accent-color: #1f6feb;
}

/* Themed switch rows */
.switch-row {display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;}
.switch-text {display:flex; flex-direction:column;}
.switch-text .setting-title {font-weight:600; font-size:14px;}
.switch-text .setting-sub {font-size:12px; color:#7d8590;}
.jg-switch-input {position:absolute; opacity:0; width:0; height:0;}
.jg-switch {position:relative; display:inline-block; width:46px; height:26px; background:#30363d; border:1px solid #30363d; border-radius:999px; transition:.2s;}
.jg-switch::after {content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#7d8590; border-radius:50%; transition:.2s;}
label .jg-switch-input:checked + .jg-switch {background:#1f6feb; border-color:#1f6feb;}
label .jg-switch-input:checked + .jg-switch::after {transform:translateX(20px); background:#fff;}

/* Settings links */
.settings-links .link-row {display:flex; gap:12px; flex-wrap:wrap;}
.themed-link {display:inline-flex; align-items:center; gap:8px; background:#1b1f24; border:1px solid #30363d; color:#c9d1d9; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:600; font-size:14px; transition:.2s;}
.themed-link:hover {background:#212a34; border-color:#38414b; color:#fff;}
.themed-link i {color:#8b949e;}

/* === FINAL OVERRIDES (cleanup & visibility fixes) === */
/* Ensure game layout controls always visible */
.game-main-area {overflow-y:auto;}
#gameTitle {line-height:1; font-size:26px;}
#gameCategory {display:inline-block; margin-top:4px; font-size:14px;}
.game-info-bottom {background:transparent !important; border:none !important;}
.game-info-bottom * {opacity:1 !important; visibility:visible !important;}

/* Frame & sizing */
/* Enforce ~16:9 aspect ratio instead of tall 90vh */
.game-frame-wrapper { 
        max-width:100%; 
        width:100%;
        aspect-ratio:16 / 9; 
        height:auto !important; 
        max-height:none !important; 
        position:relative; 
        background:#000; 
}
#gameFrame {position:absolute; inset:0; width:100%; height:100%; background:#000 !important; border:none !important;}
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16/9) {
    .game-frame-wrapper {height:0 !important; padding-top:56.25%;}
    #gameFrame {position:absolute; inset:0;}
}

/* Sidebar / suggested games */
.game-sidebar {background:transparent !important; border:none !important; box-shadow:none !important;}
.game-sidebar h3 {background:transparent !important; border:none !important;}
.suggested-games {background:transparent !important;}
.suggested-games-list {margin:0; padding:0;}
.suggested-game-card {border:none !important; background:#111 !important;}
.suggested-game-card img {border-radius:12px;}
.suggested-game-info {background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));}

/* Buttons */
.game-info-bottom .icon-btn {background: transparent !important; border: 2px solid var(--border-primary) !important;}
.game-info-bottom .icon-btn:hover {background: transparent !important; border-color: var(--accent-color) !important; filter: none !important;}

@media (max-width: 1200px) {
    .game-page-container {flex-direction:column;}
    .game-sidebar {width:100%; margin:0 0 32px 0; padding:8px 4px 16px;}
    .suggested-games-list {flex-direction:row; flex-wrap:wrap; gap:12px;}
    .suggested-game-card {flex:1 1 calc(50% - 12px);}  
}

/* === POST-OVERRIDE (remove fixed heights & ensure visibility) === */
.game-page-container, .game-main-area, .game-sidebar, .suggested-games-list {height:auto !important; max-height:none !important; overflow:visible !important;}
.game-ad-rail {display:none;}
.game-main-area {padding-bottom:60px;}
.suggested-games-list {display:flex !important; flex-direction:column; gap:14px;}
.suggested-game-card {background:rgba(255,255,255,0.04) !important; border:1px solid rgba(255,255,255,0.06) !important;}
.suggested-game-card:hover {background:rgba(255,255,255,0.08) !important;}
.suggested-game-card img {aspect-ratio:16/9; object-fit:cover; width:120px;}
.game-frame-wrapper {margin-bottom:28px !important;}
/* === FINAL EXTRA OVERRIDES === */
.category-tab {font-family:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;}
.games-grid .game-card {height:auto !important; aspect-ratio:16/9;}
.games-grid .game-card img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* Main game collections: remove all internal spacing; keep only outer page/section spacing */
#allGames.games-grid,
#favoritesGrid.games-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 0 !important;
    padding: 0 !important;
}

#allGames.games-grid .game-card,
#favoritesGrid.games-grid .game-card {
    border-radius: 0 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    #allGames.games-grid,
    #favoritesGrid.games-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 0 !important;
        padding: 0 !important;
    }
}
/* Modern proxy toggle */
.proxy-toggle-container {display:flex; align-items:center;}
.proxy-toggle-visual {position:relative; width:44px; height:44px; border-radius:14px; background:#1b1f24; border:1px solid #30363d; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s;}
.proxy-toggle-visual .cloud-icon {font-size:20px; color:#848d97; transition:.3s;}
.proxy-toggle-visual .status-badge {position:absolute; bottom:-4px; right:-4px; width:22px; height:22px; border-radius:50%; background:#222; display:flex; align-items:center; justify-content:center; border:2px solid #0d1117;}
.proxy-toggle-visual .check-icon, .proxy-toggle-visual .times-icon {font-size:12px; display:none;}
.proxy-toggle-visual.on {border-color:#238636;}
.proxy-toggle-visual.on .cloud-icon {color:#58d07c;}
.proxy-toggle-visual.on .check-icon {display:block; color:#58d07c;}
.proxy-toggle-visual.off {border-color:#f85149;}
.proxy-toggle-visual.off .cloud-icon {color:#f85149;}
.proxy-toggle-visual.off .times-icon {display:block; color:#f85149;}
.proxy-toggle-visual:active {transform:scale(.95);} 
/* live-user-badge removed */

/* Staged game-card hover choreography: thumb -> title -> category -> favorite */
.games-grid .game-card .game-thumb img {
    transform-origin: center center;
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.34s ease;
    will-change: transform;
}

.games-grid .game-card:hover .game-thumb img {
    transform: scale(1.12) rotate(-2deg);
    filter: brightness(1);
}

.games-grid .game-card .game-card-content {
    opacity: 0;
    transition: opacity 0.22s ease;
}

.games-grid .game-card .game-card-title,
.games-grid .game-card .game-card-category,
.games-grid .game-card .fav-toggle {
    opacity: 0;
}

.games-grid .game-card .game-card-title,
.games-grid .game-card .game-card-category,
.games-grid .game-card .game-card-description {
    transform: translateY(20px);
    transition-property: transform, opacity;
    transition-duration: 0.46s, 0.26s;
    transition-timing-function: cubic-bezier(0.18, 0.9, 0.26, 1.22), ease;
}

.games-grid .game-card .fav-toggle {
    transform: translateY(18px);
    transition-property: transform, opacity, color;
    transition-duration: 0.44s, 0.26s, 0.2s;
    transition-timing-function: cubic-bezier(0.18, 0.9, 0.26, 1.22), ease, ease;
    bottom: 14px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

.games-grid .game-card:hover .game-card-content {
    opacity: 1;
    transition-delay: 0.16s;
}

.games-grid .game-card:hover .game-card-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s, 0.2s;
}

.games-grid .game-card:hover .game-card-category {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.32s, 0.32s;
}

.games-grid .game-card:hover .game-card-description {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.32s, 0.32s;
}

.games-grid .game-card:hover .fav-toggle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.44s, 0.44s, 0s;
}

/* Exit sequence (reverse order) when the cursor leaves the card */
.games-grid .game-card:not(:hover) .fav-toggle {
    transition-delay: 0s, 0s, 0s;
}

.games-grid .game-card:not(:hover) .game-card-category {
    transition-delay: 0.08s, 0.08s;
}

.games-grid .game-card:not(:hover) .game-card-description {
    transition-delay: 0.08s, 0.08s;
}

.games-grid .game-card:not(:hover) .game-card-title {
    transition-delay: 0.16s, 0.16s;
}

.games-grid .game-card:not(:hover) .game-card-content {
    transition-delay: 0.16s;
}

.games-grid .game-card .fav-toggle,
.games-grid .game-card .fav-toggle:hover,
.games-grid .game-card .fav-toggle:focus,
.games-grid .game-card .fav-toggle:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.games-grid .game-card .fav-toggle i {
    color: #ffffff;
    transition: color 0.2s ease;
}

.games-grid .game-card .fav-toggle.active i {
    color: #e25555;
}

@media (prefers-reduced-motion: reduce) {
    .games-grid .game-card .game-thumb img,
    .games-grid .game-card .game-card-content,
    .games-grid .game-card .game-card-title,
    .games-grid .game-card .game-card-category,
    .games-grid .game-card .fav-toggle {
        transition: none !important;
    }

    .games-grid .game-card .game-card-content,
    .games-grid .game-card .game-card-title,
    .games-grid .game-card .game-card-category,
    .games-grid .game-card .fav-toggle {
        opacity: 1;
        transform: none;
    }
}
/* Align ad column top with iframe top */
.game-sidebar {margin-top:0 !important; padding-top:16px !important;}
.ad-column {padding-top:0 !important;}
/* Particle background */
.particle-bg-canvas {position:fixed; inset:0 0 0 0; width:100%; height:100%; z-index:0; pointer-events:none; display:none;}
.main-content, .content-area, .page {position:relative; z-index:1;}

/* ===== Notification System (Bottom-Right Corner) ===== */
.notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 15000;
    display: flex;
    flex-direction: column-reverse; /* New notifications appear at bottom, pushing others up */
    gap: 12px;
    max-width: 400px;
    pointer-events: none; /* Allow clicking through container */
}

.notification {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0.8, 0.2, 1);
    backdrop-filter: blur(8px);
    pointer-events: auto; /* Allow clicking on notifications */
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notification-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.notification-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.notification-type {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.notification-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.notification-message {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

/* Console Error Notifications */
.console-error-notification {
    border-left-color: #f85149;
    background: rgba(248, 81, 73, 0.1);
}

.console-error-notification .notification-message {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
}

/* ===== Notification Animations ===== */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.notification button {
    transition: opacity 0.2s ease;
}

.notification button:hover {
    opacity: 0.8;
}

/* ===== Settings Page Enhancements ===== */
.color-setting {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.color-setting .setting-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.color-setting .setting-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.color-input {
    width: 60px;
    height: 32px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-primary);
    cursor: pointer;
    padding: 0;
}

.range-setting {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.range-setting .setting-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.range-setting .setting-sub {
    color: var(--text-muted);
    font-size: 12px;
}

.range-setting .range-input {
    width: 100%;
    margin: 8px 0;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
}

.range-setting .range-input:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.range-setting .range-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

/* WebKit (Chrome, Safari, Edge) */
.range-setting .range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.range-setting .range-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.range-setting .range-input::-webkit-slider-thumb:active {
    transform: scale(1.05);
}

/* Firefox */
.range-setting .range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.range-setting .range-input::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.range-setting .range-input::-moz-range-track {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    border: 1px solid var(--border-primary);
}

.range-setting span:last-child {
    color: var(--accent-color);
    font-weight: 500;
    font-size: 12px;
    align-self: flex-end;
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-secondary);
}

.select-setting {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.select-setting .setting-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.select-setting .setting-sub {
    color: var(--text-muted);
    font-size: 12px;
}

.select-input {
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    margin-top: 8px;
}

.file-setting {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.file-setting .setting-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.file-setting .setting-sub {
    color: var(--text-muted);
    font-size: 12px;
}

.file-input {
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    margin-top: 8px;
    cursor: pointer;
}

.file-input::-webkit-file-upload-button {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 8px;
}

/* Notification System */
.notifications-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 300px;
    pointer-events: none;
}

.notification {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    animation: slideIn 0.3s ease-out;
    pointer-events: auto;
    position: relative;
}

.notification.success {
    border-left: 4px solid var(--success);
}

.notification.error {
    border-left: 4px solid var(--error);
}

.notification.info {
    border-left: 4px solid var(--accent-primary);
}

.notification.warning {
    border-left: 4px solid var(--warning);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-primary));
    animation: notificationProgress 4s linear;
}

@keyframes notificationProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Friend Avatar Styles */
.friend-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    border: 2px solid var(--border-primary);
    background: linear-gradient(135deg, #1b1f24, #0f131a);
    background-size: cover;
    background-position: center;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.friend-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    margin-right: 12px;
    border: 2px solid var(--border-primary);
}

.notification-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    border: 1px solid var(--border-primary);
}

.notification-message {
    flex: 1;
}

.friend-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.friend-item span:not(.presence-pill):not(.notification-message) {
    flex: 1;
    margin-right: 8px;
}

/* Navigation Profile Picture */
.nav-profile-picture {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-primary);
}

/* Global typography + shape override requested by user */
body,
body *:not(i):not(.fa):not([class^='fa-']):not([class*=' fa-']):not(input):not(textarea):not(select):not(option) {
    font-family: 'Share Tech Mono', 'Consolas', 'Courier New', monospace !important;
    text-transform: uppercase !important;
}

*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* Ensure all search bars keep coding font and sharp corners. */
input[type="search"],
#searchInput,
#adminTabSearch,
.admin-tab-search {
    font-family: 'Share Tech Mono', 'Consolas', 'Courier New', monospace !important;
    border-radius: 0 !important;
}

#searchInput::placeholder,
#adminTabSearch::placeholder,
.admin-tab-search::placeholder {
    font-family: 'Share Tech Mono', 'Consolas', 'Courier New', monospace !important;
}

/* Input fields should keep normal case. */
input,
textarea,
select,
option,
input::placeholder,
textarea::placeholder {
    font-family: 'Share Tech Mono', 'Consolas', 'Courier New', monospace !important;
    text-transform: none !important;
}