@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
:root {
       --color-primary: #FFD700;
       --color-primary-dark: #FFA500;
       --color-primary-light: #FFF8DC;
       --color-accent: #00D4FF;
       --color-accent-dark: #0099CC;
       --color-success: #00FF88;
       --color-warning: #FFB800;
       --color-error: #FF4757;
       --bg-primary: #0A0A0F;
       --bg-secondary: #1A1A2E;
       --bg-tertiary: #16213E;
       --bg-card: rgba(15, 15, 25, 0.85);
       --bg-card-hover: rgba(20, 20, 35, 0.95);
       --bg-glass: rgba(15, 15, 25, 0.7);
       --bg-glass-strong: rgba(15, 15, 25, 0.9);
       --text-primary: #FFFFFF;
       --text-secondary: rgba(255, 255, 255, 0.8);
       --text-tertiary: rgba(255, 255, 255, 0.6);
       --text-muted: rgba(255, 255, 255, 0.4);
       --border-color: rgba(255, 215, 0, 0.2);
       --border-color-hover: rgba(255, 215, 0, 0.4);
       --border-color-active: rgba(255, 215, 0, 0.6);
       --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
       --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
       --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
       --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.5);
       --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);
       --shadow-glow-strong: 0 0 30px rgba(255, 215, 0, 0.5);
       --spacing-xs: 4px;
       --spacing-sm: 8px;
       --spacing-md: 16px;
       --spacing-lg: 24px;
       --spacing-xl: 32px;
       --spacing-2xl: 48px;
       --spacing-3xl: 64px;
       --font-primary: 'Inter', 'Segoe UI', sans-serif;
       --font-display: 'Poppins', 'Inter', sans-serif;
       --font-size-xs: 11px;
       --font-size-sm: 13px;
       --font-size-base: 16px;
       --font-size-lg: 18px;
       --font-size-xl: 24px;
       --font-size-2xl: 32px;
       --font-size-3xl: 48px;
       --font-weight-light: 300;
       --font-weight-normal: 400;
       --font-weight-medium: 500;
       --font-weight-semibold: 600;
       --font-weight-bold: 700;
       --font-weight-extrabold: 800;
       --radius-sm: 8px;
       --radius-md: 12px;
       --radius-lg: 16px;
       --radius-xl: 20px;
       --radius-2xl: 24px;
       --radius-full: 9999px;
       --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
       --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
       --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
       --z-background: -1;
       --z-base: 1;
       --z-elevated: 10;
       --z-sticky: 100;
       --z-modal: 1000;
       --z-tooltip: 2000;
       --z-max: 10000;
   }
* {
       box-sizing: border-box;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       -webkit-touch-callout: none;
       -webkit-tap-highlight-color: transparent;
   }
/* Fix header and visitor counter on game pages - no sidebar */
body:has(.premium-game-page) #visitorCounter,
.premium-game-page ~ * #visitorCounter {
    margin-left: 0 !important;
    width: 100% !important;
}
body:has(.premium-game-page) header,
.premium-game-page ~ * header {
    margin-left: 0 !important;
    width: 100% !important;
}
/* Ensure back button is on top of everything */
.premium-back-btn {
    z-index: 99999 !important;
}
body {
    margin: 0;
    padding-top: 30px;
    font-family: var(--font-primary);
    color: var(--text-primary);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 60px;
}
@media (max-width: 768px) {
    body {
        padding-top: 15px;
        padding-bottom: 30px;
    }
}
   .page-border-frame {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-48%, -50%);
       width: 140%;
       height: 140%;
       min-width: 100vw;
       min-height: 100vh;
       object-fit: cover;
       object-position: center;
       z-index: 10000;
       pointer-events: none;
       opacity: 0.15;
   }
   input,
   textarea,
   [contenteditable="true"] {
       -webkit-user-select: text;
       -moz-user-select: text;
       -ms-user-select: text;
       user-select: text;
   }
   @keyframes gradientShift {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
#interactiveBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.55;
    will-change: transform;
    transform: translateZ(0);
}
#starCanvas {
    will-change: transform;
    transform: translateZ(0);
}
.home-background-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.035), transparent 65%);
}
.home-background-gradient {
    position: absolute;
    inset: -30%;
    background:
        conic-gradient(from 120deg at 30% 25%, rgba(0, 214, 255, 0.16), rgba(255, 215, 120, 0.12), rgba(125, 92, 255, 0.16), rgba(0, 214, 255, 0.16));
    filter: blur(90px);
    opacity: 0.85;
    animation: homeAurora 32s ease-in-out infinite alternate;
}
.home-background-glow {
    position: absolute;
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
    filter: blur(75px);
    opacity: 0.38;
    mix-blend-mode: screen;
    animation: homeGlowPulse 22s ease-in-out infinite;
}
.home-background-glow-one {
    top: -15%;
    left: -10%;
    background: radial-gradient(circle, rgba(0, 214, 255, 0.35), transparent 60%);
}
.home-background-glow-two {
    bottom: -20%;
    right: -12%;
    background: radial-gradient(circle, rgba(255, 199, 120, 0.32), rgba(125, 92, 255, 0.28) 45%, transparent 65%);
    animation-delay: -8s;
}
.home-background-grid {
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04), transparent 55%);
    background-size: 180px 180px, 180px 180px, 100% 100%;
    background-position: center;
    mix-blend-mode: overlay;
    opacity: 0.2;
    animation: homeGridDrift 80s linear infinite;
}
.home-background-shimmer {
    position: absolute;
    inset: -15%;
    background: linear-gradient(120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 38%,
        rgba(255, 215, 120, 0.18) 50%,
        rgba(0, 214, 255, 0.16) 62%,
        rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: screen;
    filter: blur(25px);
    opacity: 0.35;
    animation: homeShimmerSlide 24s linear infinite;
}
.home-background-ornate {
    position: absolute;
    width: 65vw;
    height: 65vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 58%);
    border: 1px solid rgba(255, 215, 0, 0.18);
    box-shadow:
        0 0 120px rgba(0, 214, 255, 0.08),
        inset 0 0 80px rgba(255, 255, 255, 0.04);
    mix-blend-mode: screen;
    opacity: 0.22;
    animation: homeOrnateDrift 34s ease-in-out infinite;
}
.home-background-ornate-left {
    top: -22%;
    left: -28%;
    animation-delay: -10s;
}
.home-background-ornate-right {
    bottom: -32%;
    right: -22%;
}
.home-background-starfield {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 215, 120, 0.22) 1px, transparent 1px);
    background-size: 160px 160px, 260px 260px;
    opacity: 0.42;
    animation: homeStarBlink 18s ease-in-out infinite;
}
@keyframes homeAurora {
    0% {
        transform: translate3d(-2%, -2%, 0) scale(0.96) rotate(0deg);
    }
    50% {
        transform: translate3d(1%, 2%, 0) scale(1.02) rotate(2deg);
    }
    100% {
        transform: translate3d(3%, -1%, 0) scale(1.04) rotate(-2deg);
    }
}
@keyframes homeGlowPulse {
    0% {
        opacity: 0.25;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.48;
        transform: scale(1.04);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.94);
    }
}
@keyframes homeGridDrift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(-5%, -5%, 0) rotate(1.5deg);
    }
}
@keyframes homeShimmerSlide {
    0% {
        transform: translateX(-16%);
    }
    100% {
        transform: translateX(16%);
    }
}
@keyframes homeOrnateDrift {
    0% {
        transform: scale(0.9) rotate(-2deg);
        opacity: 0.18;
    }
    50% {
        transform: scale(1.05) rotate(3deg);
        opacity: 0.3;
    }
    100% {
        transform: scale(0.94) rotate(0deg);
        opacity: 0.18;
    }
}
@keyframes homeStarBlink {
    0%, 100% {
        opacity: 0.32;
    }
    50% {
        opacity: 0.55;
    }
}

   #adminModal {
       animation: modalFadeIn 0.3s ease-out;
   }
   @keyframes modalFadeIn {
       from {
           opacity: 0;
           backdrop-filter: blur(0px);
       }
       to {
           opacity: 1;
           backdrop-filter: blur(8px);
       }
   }
   #adminModal > div {
       animation: adminModalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   @keyframes adminModalSlideIn {
       from {
           opacity: 0;
           transform: translateY(-30px) scale(0.95);
       }
       to {
           opacity: 1;
           transform: translateY(0) scale(1);
       }
   }
   #closeAdminBtn {
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   #closeAdminBtn:hover {
       background: rgba(255, 0, 0, 0.2) !important;
       border-color: rgba(255, 0, 0, 0.4) !important;
       transform: rotate(90deg) scale(1.1);
       color: #ff4444 !important;
   }
   #adminContent button,
   #adminPassword button {
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       font-weight: 600;
       letter-spacing: 0.3px;
       text-transform: uppercase;
       font-size: 13px;
       position: relative;
       overflow: hidden;
   }
   #adminContent button i,
   #adminPassword button i {
       transition: transform 0.3s ease;
   }
   #adminContent button:hover i,
   #adminPassword button:hover i {
       transform: scale(1.2);
   }
   #adminContent button::before,
   #adminPassword button::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }
   #adminContent button:hover::before,
   #adminPassword button:hover::before {
       width: 300px;
       height: 300px;
   }
   #adminContent button:hover,
   #adminPassword button:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
   }
   #adminContent button:active,
   #adminPassword button:active {
       transform: translateY(0);
   }
   #deleteChatHistoryBtn {
       background: linear-gradient(135deg, #dc3545, #c82333) !important;
       border: 2px solid rgba(220, 53, 69, 0.5) !important;
       box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3) !important;
   }
   #deleteChatHistoryBtn:hover {
       background: linear-gradient(135deg, #c82333, #bd2130) !important;
       box-shadow: 0 6px 25px rgba(220, 53, 69, 0.5) !important;
   }
   #clearCanvasAdminBtn {
       background: linear-gradient(135deg, #ffc107, #e0a800) !important;
       border: 2px solid rgba(255, 193, 7, 0.5) !important;
       box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3) !important;
       color: #000 !important;
   }
   #clearCanvasAdminBtn:hover {
       background: linear-gradient(135deg, #e0a800, #d39e00) !important;
       box-shadow: 0 6px 25px rgba(255, 193, 7, 0.5) !important;
   }
   #resetVisitorsBtn {
       background: linear-gradient(135deg, #007bff, #0056b3) !important;
       border: 2px solid rgba(0, 123, 255, 0.5) !important;
       box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important;
   }
   #resetVisitorsBtn:hover {
       background: linear-gradient(135deg, #0056b3, #004085) !important;
       box-shadow: 0 6px 25px rgba(0, 123, 255, 0.5) !important;
   }
   #logoutAdminBtn {
       background: linear-gradient(135deg, #6c757d, #5a6268) !important;
       border: 2px solid rgba(108, 117, 125, 0.5) !important;
       box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3) !important;
   }
   #logoutAdminBtn:hover {
       background: linear-gradient(135deg, #5a6268, #495057) !important;
       box-shadow: 0 6px 25px rgba(108, 117, 125, 0.5) !important;
   }
   #adminLoginBtn {
       background: linear-gradient(135deg, #007bff, #0056b3) !important;
       border: 2px solid rgba(0, 123, 255, 0.5) !important;
       box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important;
   }
   #adminLoginBtn:hover {
       background: linear-gradient(135deg, #0056b3, #004085) !important;
       box-shadow: 0 6px 25px rgba(0, 123, 255, 0.5) !important;
   }
   #refreshChatListBtn {
       transition: all 0.3s ease;
   }
   #refreshChatListBtn:hover {
       transform: rotate(180deg);
       background: rgba(255, 215, 0, 0.2) !important;
   }
   #adminPasswordInput {
       transition: all 0.3s ease;
       border: 2px solid rgba(255, 215, 0, 0.2) !important;
       background: rgba(255, 255, 255, 0.05) !important;
       color: rgba(255, 255, 255, 0.9) !important;
   }
   #adminPasswordInput:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.6) !important;
       background: rgba(255, 255, 255, 0.08) !important;
       box-shadow: 0 0 20px rgba(255, 215, 0, 0.2) !important;
   }
   #adminPassword label {
       color: #FFD700 !important;
       font-weight: 600;
       font-size: 14px;
       margin-bottom: 10px !important;
   }
   #adminChatList {
       scrollbar-width: thin;
       scrollbar-color: rgba(255, 215, 0, 0.3) rgba(255, 255, 255, 0.05);
   }
   #adminChatList::-webkit-scrollbar {
       width: 8px;
   }
   #adminChatList::-webkit-scrollbar-track {
       background: rgba(255, 255, 255, 0.05);
       border-radius: 4px;
   }
   #adminChatList::-webkit-scrollbar-thumb {
       background: rgba(255, 215, 0, 0.3);
       border-radius: 4px;
   }
   #adminChatList::-webkit-scrollbar-thumb:hover {
       background: rgba(255, 215, 0, 0.5);
   }
   .friends-container {
       animation: friendsFadeIn 0.4s ease-out;
   }
   @keyframes friendsFadeIn {
       from {
           opacity: 0;
           transform: translateY(20px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   .friends-header {
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
   }
   .friends-close-btn:hover {
       background: rgba(255, 0, 0, 0.2) !important;
       border-color: rgba(255, 0, 0, 0.4) !important;
       transform: rotate(90deg) scale(1.1);
       color: #ff4444 !important;
   }
   .friends-tabs {
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   }
   .friends-tab {
       position: relative;
       overflow: hidden;
   }
   .friends-tab::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
       transition: left 0.5s;
   }
   .friends-tab:hover::before {
       left: 100%;
   }
   .friends-tab.active {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.2)) !important;
       border-color: rgba(255, 215, 0, 0.6) !important;
       color: #FFD700 !important;
       box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
       transform: translateY(-2px);
   }
   .friends-count-badge {
       font-weight: 700;
       animation: badgePulse 2s ease-in-out infinite;
   }
   @keyframes badgePulse {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.1); }
   }
   .friends-grid {
       animation: gridFadeIn 0.3s ease-out;
   }
   @keyframes gridFadeIn {
       from {
           opacity: 0;
           transform: scale(0.95);
       }
       to {
           opacity: 1;
           transform: scale(1);
       }
   }
   .friend-card {
       background: rgba(15, 15, 25, 0.8);
       backdrop-filter: blur(10px);
       border: 2px solid rgba(255, 215, 0, 0.2);
       border-radius: 16px;
       padding: 20px;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
       cursor: pointer;
   }
   .friend-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700);
       transform: scaleX(0);
       transition: transform 0.3s ease;
   }
   .friend-card:hover {
       transform: translateY(-5px);
       border-color: rgba(255, 215, 0, 0.5);
       box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
   }
   .friend-card:hover::before {
       transform: scaleX(1);
   }
   .friend-card.online {
       border-color: rgba(40, 167, 69, 0.4);
   }
   .friend-card.online::before {
       background: linear-gradient(90deg, #28a745, #20c997, #28a745);
   }
.friend-profile-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 6, 15, 0.85);
    backdrop-filter: blur(18px);
    z-index: 17000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.friend-profile-modal.visible {
    display: flex;
    opacity: 1;
}
.friend-profile-card {
    position: relative;
    width: min(520px, 95vw);
    background: rgba(10, 12, 25, 0.95);
    border-radius: 24px;
    border: 1px solid rgba(255, 215, 0, 0.25);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
    padding: 28px;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
}
.friend-profile-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.08);
    color: #FFD700;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.friend-profile-close:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.05);
}
.friend-profile-header {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
}
.friend-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: 3px solid rgba(255, 215, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    position: relative;
    overflow: hidden;
}
.friend-profile-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
}
.friend-profile-header-text h3 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 0.02em;
}
.friend-profile-presence {
    margin: 4px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 6px;
}
.friend-profile-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 2px rgba(10, 12, 25, 1);
}
.friend-profile-status-dot.online {
    background: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.7);
}
.friend-profile-status-text {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}
.friend-profile-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.friend-profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    gap: 12px;
    flex-wrap: wrap;
}
.friend-profile-row strong {
    color: #ffffff;
    font-size: 15px;
}
.friend-profile-row-color {
    align-items: center;
}
.friend-profile-color {
    display: flex;
    align-items: center;
    gap: 10px;
}
.friend-profile-color span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}
.friend-profile-section h4 {
    margin: 18px 0 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FFD700;
}
.friend-profile-bio {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
}
.friend-profile-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.friend-profile-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.friend-profile-empty {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}
.friend-profile-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    background: rgba(6, 8, 20, 0.8);
    backdrop-filter: blur(4px);
}
.friend-profile-card.loading .friend-profile-loading {
    display: flex;
}
.friend-profile-card.loading .friend-profile-header,
.friend-profile-card.loading .friend-profile-body {
    filter: blur(1px);
    opacity: 0.45;
}
   .friend-avatar {
       width: 70px;
       height: 70px;
       border-radius: 50%;
       border: 3px solid rgba(255, 215, 0, 0.4);
       position: relative;
       transition: transform 0.3s ease;
   }
   .friend-card:hover .friend-avatar {
       transform: scale(1.1) rotate(5deg);
   }
   .friend-status-indicator {
       position: absolute;
       bottom: 2px;
       right: 2px;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       border: 3px solid rgba(15, 15, 25, 0.9);
       background: #6c757d;
   }
   .friend-status-indicator.online {
       background: #28a745;
       box-shadow: 0 0 10px rgba(40, 167, 69, 0.6);
       animation: statusPulse 2s ease-in-out infinite;
   }
   @keyframes statusPulse {
       0%, 100% { box-shadow: 0 0 10px rgba(40, 167, 69, 0.6); }
       50% { box-shadow: 0 0 20px rgba(40, 167, 69, 0.8); }
   }
   .friend-actions {
       display: flex;
       gap: 8px;
       margin-top: 15px;
       flex-wrap: wrap;
   }
   .friend-action-btn {
       flex: 1;
       padding: 10px 14px;
       border-radius: 10px;
       border: 2px solid;
       cursor: pointer;
       font-weight: 600;
       font-size: 13px;
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       min-width: 100px;
       position: relative;
       overflow: hidden;
   }
   .friend-action-btn::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }
   .friend-action-btn:hover::before {
       width: 300px;
       height: 300px;
   }
   .friend-action-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   }
   .friend-action-btn.primary {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
       border-color: rgba(255, 215, 0, 0.4);
       color: #FFD700;
   }
   .friend-action-btn.danger {
       background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(200, 35, 51, 0.15));
       border-color: rgba(220, 53, 69, 0.4);
       color: #dc3545;
   }
   .friend-action-btn.success {
       background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(33, 136, 56, 0.15));
       border-color: rgba(40, 167, 69, 0.4);
       color: #28a745;
   }
   .friend-action-btn.secondary {
       background: rgba(255, 255, 255, 0.05);
       border-color: rgba(255, 255, 255, 0.2);
       color: rgba(255, 255, 255, 0.8);
   }
   .friend-info h3 {
       margin: 0 0 8px 0;
       color: #FFD700;
       font-size: 18px;
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   .friend-info p {
       margin: 4px 0;
       color: rgba(255, 255, 255, 0.7);
       font-size: 13px;
   }
   .friend-info .friend-status {
       color: rgba(255, 255, 255, 0.5);
       font-size: 12px;
       font-style: italic;
   }
   .request-card {
       background: rgba(15, 15, 25, 0.6);
       backdrop-filter: blur(10px);
       border: 2px solid rgba(255, 215, 0, 0.2);
       border-radius: 12px;
       padding: 15px;
       margin-bottom: 12px;
       transition: all 0.3s ease;
   }
   .request-card:hover {
       border-color: rgba(255, 215, 0, 0.4);
       transform: translateX(5px);
   }
   .empty-state {
       text-align: center;
       padding: 60px 20px;
       color: rgba(255, 255, 255, 0.5);
   }
   .empty-state i {
       font-size: 64px;
       margin-bottom: 20px;
       opacity: 0.5;
   }
   .empty-state h3 {
       color: rgba(255, 255, 255, 0.7);
       margin: 0 0 10px 0;
   }
   .friends-tab-content {
       animation: tabFadeIn 0.3s ease-out;
   }
   @keyframes tabFadeIn {
       from {
           opacity: 0;
           transform: translateY(10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   @media (max-width: 768px) {
       .friends-grid {
           grid-template-columns: 1fr !important;
       }
       .friends-tabs {
           flex-direction: column;
       }
       .friends-tab {
           width: 100%;
       }
       .friend-actions {
           flex-direction: column;
       }
       .friend-action-btn {
           width: 100%;
       }
   }
   .friends-full-modal {
       animation: friendsModalFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   @keyframes friendsModalFadeIn {
       from {
           opacity: 0;
           backdrop-filter: blur(0px);
       }
       to {
           opacity: 1;
           backdrop-filter: blur(10px);
       }
   }
   .friends-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 30px 20px;
       min-height: 100vh;
   }
      .friends-header-section {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
       backdrop-filter: blur(12px);
       border: 2px solid rgba(255, 215, 0, 0.3);
       border-radius: 24px;
       padding: 35px 40px;
       margin-bottom: 30px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.1);
       position: relative;
       overflow: hidden;
   }
   .friends-header-section::before {
       content: '';
       position: absolute;
       top: -50%;
       right: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
       animation: friendsHeaderGlow 8s ease-in-out infinite;
   }
   @keyframes friendsHeaderGlow {
       0%, 100% { transform: rotate(0deg); }
       50% { transform: rotate(180deg); }
   }
   .friends-header-content {
       display: flex;
       justify-content: space-between;
       align-items: center;
       position: relative;
       z-index: 1;
   }
   .friends-header-title {
       display: flex;
       align-items: center;
       gap: 20px;
   }
   .friends-icon-wrapper {
       width: 70px;
       height: 70px;
       background: linear-gradient(135deg, #FFD700, #FFA500);
       border-radius: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 32px;
       color: rgba(0, 0, 0, 0.8);
       box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
       animation: friendsIconPulse 3s ease-in-out infinite;
   }
   @keyframes friendsIconPulse {
       0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4); }
       50% { transform: scale(1.05); box-shadow: 0 15px 40px rgba(255, 215, 0, 0.6); }
   }
   .friends-main-title {
       margin: 0;
       font-size: 42px;
       font-weight: 800;
       background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
       letter-spacing: -1px;
   }
   .friends-subtitle {
       margin: 8px 0 0 0;
       color: rgba(255, 255, 255, 0.7);
       font-size: 16px;
       font-weight: 400;
   }
   .friends-close-button {
       width: 50px;
       height: 50px;
       border-radius: 14px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       font-size: 22px;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       display: flex;
       align-items: center;
       justify-content: center;
       backdrop-filter: blur(10px);
   }
   .friends-close-button:hover {
       background: rgba(255, 0, 0, 0.2);
       border-color: rgba(255, 0, 0, 0.4);
       color: #ff4444;
       transform: rotate(90deg) scale(1.1);
       box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3);
   }
      .friends-tabs-container {
       display: flex;
       gap: 12px;
       margin-bottom: 30px;
       background: rgba(15, 15, 25, 0.6);
       backdrop-filter: blur(10px);
       padding: 10px;
       border-radius: 18px;
       border: 1px solid rgba(255, 215, 0, 0.15);
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   }
   .friends-tab-btn {
       flex: 1;
       padding: 16px 24px;
       border-radius: 14px;
       border: 2px solid transparent;
       background: rgba(255, 255, 255, 0.03);
       color: rgba(255, 255, 255, 0.6);
       cursor: pointer;
       font-weight: 600;
       font-size: 15px;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       position: relative;
       overflow: hidden;
   }
   .friends-tab-btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
       transition: left 0.5s;
   }
   .friends-tab-btn:hover::before {
       left: 100%;
   }
   .friends-tab-btn.active {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.2));
       border-color: rgba(255, 215, 0, 0.5);
       color: #FFD700;
       box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
       transform: translateY(-2px);
   }
   .friends-tab-btn i {
       font-size: 18px;
   }
   .friends-badge {
       background: rgba(255, 215, 0, 0.3);
       color: #FFD700;
       padding: 4px 10px;
       border-radius: 12px;
       font-size: 12px;
       font-weight: 700;
       min-width: 24px;
       text-align: center;
       animation: badgeBounce 2s ease-in-out infinite;
   }
   .friends-badge-alert {
       background: rgba(255, 0, 0, 0.3);
       color: #ff4444;
       animation: badgePulse 1.5s ease-in-out infinite;
   }
   @keyframes badgeBounce {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.1); }
   }
   @keyframes badgePulse {
       0%, 100% {
           transform: scale(1);
           box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
       }
       50% {
           transform: scale(1.15);
           box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
       }
   }
      .friends-content-wrapper {
       position: relative;
       min-height: 500px;
   }
   .friends-tab-panel {
       display: none;
       animation: tabPanelFadeIn 0.4s ease-out;
   }
   .friends-tab-panel.active {
       display: block;
   }
   @keyframes tabPanelFadeIn {
       from {
           opacity: 0;
           transform: translateY(20px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
      .friends-toolbar {
       display: flex;
       gap: 15px;
       margin-bottom: 25px;
       flex-wrap: wrap;
   }
   .friends-search-box {
       flex: 1;
       min-width: 250px;
       position: relative;
       display: flex;
       align-items: center;
   }
   .friends-search-box i {
       position: absolute;
       left: 18px;
       color: rgba(255, 215, 0, 0.6);
       font-size: 16px;
       z-index: 1;
   }
   .friends-search-input {
       width: 100%;
       padding: 14px 18px 14px 48px;
       border-radius: 14px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 255, 255, 0.05);
       color: rgba(255, 255, 255, 0.9);
       font-size: 15px;
       transition: all 0.3s ease;
       backdrop-filter: blur(10px);
   }
   .friends-search-input:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.5);
       background: rgba(255, 255, 255, 0.08);
       box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1);
   }
   .friends-sort-select {
       padding: 14px 20px;
       border-radius: 14px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 255, 255, 0.05);
       color: rgba(255, 255, 255, 0.9);
       font-size: 15px;
       cursor: pointer;
       min-width: 200px;
       transition: all 0.3s ease;
       backdrop-filter: blur(10px);
   }
   .friends-sort-select:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.5);
       box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1);
   }
      .friends-search-header {
       margin-bottom: 25px;
   }
   .friends-search-box-large {
       position: relative;
       display: flex;
       align-items: center;
   }
   .friends-search-box-large i {
       position: absolute;
       left: 22px;
       color: rgba(255, 215, 0, 0.6);
       font-size: 20px;
       z-index: 1;
   }
   .friends-search-input-large {
       width: 100%;
       padding: 18px 60px 18px 60px;
       border-radius: 16px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       background: rgba(255, 255, 255, 0.05);
       color: rgba(255, 255, 255, 0.9);
       font-size: 17px;
       transition: all 0.3s ease;
       backdrop-filter: blur(10px);
   }
   .friends-search-input-large:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.6);
       background: rgba(255, 255, 255, 0.08);
       box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.15), 0 8px 25px rgba(255, 215, 0, 0.2);
   }
   .friends-search-clear {
       position: absolute;
       right: 15px;
       width: 36px;
       height: 36px;
       border-radius: 10px;
       border: none;
       background: rgba(255, 255, 255, 0.1);
       color: rgba(255, 255, 255, 0.7);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }
   .friends-search-clear:hover {
       background: rgba(255, 0, 0, 0.2);
       color: #ff4444;
       transform: rotate(90deg);
   }
      .friends-grid-container {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 20px;
       animation: gridFadeIn 0.5s ease-out;
   }
   @keyframes gridFadeIn {
       from {
           opacity: 0;
           transform: scale(0.95);
       }
       to {
           opacity: 1;
           transform: scale(1);
       }
   }
      .friend-card-modern {
       background: rgba(15, 15, 25, 0.8);
       backdrop-filter: blur(10px);
       border: 2px solid rgba(255, 215, 0, 0.2);
       border-radius: 20px;
       padding: 24px;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
       cursor: pointer;
   }
   .friend-card-modern::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700);
       transform: scaleX(0);
       transform-origin: left;
       transition: transform 0.4s ease;
   }
   .friend-card-modern:hover {
       transform: translateY(-8px) scale(1.02);
       border-color: rgba(255, 215, 0, 0.5);
       box-shadow: 0 20px 50px rgba(255, 215, 0, 0.25), 0 0 30px rgba(255, 215, 0, 0.1);
   }
   .friend-card-modern:hover::before {
       transform: scaleX(1);
   }
   .friend-card-modern.online {
       border-color: rgba(40, 167, 69, 0.4);
   }
   .friend-card-modern.online::before {
       background: linear-gradient(90deg, #28a745, #20c997, #28a745);
   }
   .friend-card-header {
       display: flex;
       align-items: center;
       gap: 18px;
       margin-bottom: 18px;
   }
   .friend-avatar-modern {
       width: 75px;
       height: 75px;
       border-radius: 50%;
       border: 3px solid rgba(255, 215, 0, 0.4);
       position: relative;
       transition: transform 0.4s ease;
       flex-shrink: 0;
       overflow: hidden;
   }
   .friend-card-modern:hover .friend-avatar-modern {
       transform: scale(1.15) rotate(5deg);
       border-color: rgba(255, 215, 0, 0.7);
   }
   .friend-status-dot {
       position: absolute;
       bottom: 4px;
       right: 4px;
       width: 20px;
       height: 20px;
       border-radius: 50%;
       border: 3px solid rgba(15, 15, 25, 0.95);
       background: #6c757d;
       box-shadow: 0 0 0 2px rgba(15, 15, 25, 0.5);
   }
   .friend-status-dot.online {
       background: #28a745;
       box-shadow: 0 0 0 2px rgba(15, 15, 25, 0.5), 0 0 15px rgba(40, 167, 69, 0.6);
       animation: statusPulse 2s ease-in-out infinite;
   }
   @keyframes statusPulse {
       0%, 100% {
           box-shadow: 0 0 0 2px rgba(15, 15, 25, 0.5), 0 0 15px rgba(40, 167, 69, 0.6);
       }
       50% {
           box-shadow: 0 0 0 2px rgba(15, 15, 25, 0.5), 0 0 25px rgba(40, 167, 69, 0.9);
       }
   }
   .friend-info-modern {
       flex: 1;
       min-width: 0;
   }
   .friend-name-modern {
       margin: 0 0 8px 0;
       color: #FFD700;
       font-size: 20px;
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 8px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   .friend-status-text {
       margin: 4px 0;
       color: rgba(255, 255, 255, 0.7);
       font-size: 13px;
       display: flex;
       align-items: center;
       gap: 6px;
   }
   .friend-status-message {
       margin: 8px 0 0 0;
       color: rgba(255, 255, 255, 0.5);
       font-size: 12px;
       font-style: italic;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   .friend-actions-modern {
       display: flex;
       gap: 10px;
       margin-top: 18px;
       flex-wrap: wrap;
   }
   .friend-action-btn-modern {
       flex: 1;
       min-width: 100px;
       padding: 12px 16px;
       border-radius: 12px;
       border: 2px solid;
       cursor: pointer;
       font-weight: 600;
       font-size: 13px;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       position: relative;
       overflow: hidden;
       backdrop-filter: blur(10px);
   }
   .friend-action-btn-modern::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }
   .friend-action-btn-modern:hover::before {
       width: 400px;
       height: 400px;
   }
   .friend-action-btn-modern:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
   }
   .friend-action-btn-modern.primary {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
       border-color: rgba(255, 215, 0, 0.4);
       color: #FFD700;
   }
   .friend-action-btn-modern.primary:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.25));
       border-color: rgba(255, 215, 0, 0.6);
   }
   .friend-action-btn-modern.danger {
       background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(200, 35, 51, 0.15));
       border-color: rgba(220, 53, 69, 0.4);
       color: #dc3545;
   }
   .friend-action-btn-modern.danger:hover {
       background: linear-gradient(135deg, rgba(220, 53, 69, 0.3), rgba(200, 35, 51, 0.25));
       border-color: rgba(220, 53, 69, 0.6);
   }
   .friend-action-btn-modern.success {
       background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(33, 136, 56, 0.15));
       border-color: rgba(40, 167, 69, 0.4);
       color: #28a745;
   }
   .friend-action-btn-modern.success:hover {
       background: linear-gradient(135deg, rgba(40, 167, 69, 0.3), rgba(33, 136, 56, 0.25));
       border-color: rgba(40, 167, 69, 0.6);
   }
   .friend-action-btn-modern.secondary {
       background: rgba(255, 255, 255, 0.05);
       border-color: rgba(255, 255, 255, 0.2);
       color: rgba(255, 255, 255, 0.8);
   }
   .friend-action-btn-modern.secondary:hover {
       background: rgba(255, 255, 255, 0.1);
       border-color: rgba(255, 255, 255, 0.3);
   }
      .requests-split-view {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 25px;
   }
   .requests-column {
       background: rgba(15, 15, 25, 0.6);
       backdrop-filter: blur(10px);
       border: 2px solid rgba(255, 215, 0, 0.2);
       border-radius: 20px;
       padding: 25px;
   }
   .requests-column-header {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 20px;
       padding-bottom: 15px;
       border-bottom: 2px solid rgba(255, 215, 0, 0.1);
   }
   .requests-column-header i {
       font-size: 24px;
       color: #FFD700;
   }
   .requests-column-header h3 {
       margin: 0;
       color: #FFD700;
       font-size: 20px;
       font-weight: 700;
   }
   .requests-list {
       max-height: 500px;
       overflow-y: auto;
       padding-right: 10px;
   }
   .requests-list::-webkit-scrollbar {
       width: 8px;
   }
   .requests-list::-webkit-scrollbar-track {
       background: rgba(255, 255, 255, 0.05);
       border-radius: 10px;
   }
   .requests-list::-webkit-scrollbar-thumb {
       background: rgba(255, 215, 0, 0.3);
       border-radius: 10px;
   }
   .requests-list::-webkit-scrollbar-thumb:hover {
       background: rgba(255, 215, 0, 0.5);
   }
   .request-card-modern {
       background: rgba(255, 255, 255, 0.03);
       backdrop-filter: blur(10px);
       border: 2px solid rgba(255, 215, 0, 0.15);
       border-radius: 16px;
       padding: 20px;
       margin-bottom: 15px;
       transition: all 0.3s ease;
   }
   .request-card-modern:hover {
       border-color: rgba(255, 215, 0, 0.4);
       transform: translateX(5px);
       box-shadow: 0 8px 25px rgba(255, 215, 0, 0.15);
   }
   .request-card-header {
       display: flex;
       align-items: center;
       gap: 15px;
       margin-bottom: 15px;
   }
   .request-avatar {
       width: 55px;
       height: 55px;
       border-radius: 50%;
       border: 2px solid rgba(255, 215, 0, 0.3);
       flex-shrink: 0;
   }
   .request-info h4 {
       margin: 0 0 5px 0;
       color: #FFD700;
       font-size: 18px;
       font-weight: 700;
   }
   .request-info p {
       margin: 0;
       color: rgba(255, 255, 255, 0.6);
       font-size: 13px;
   }
   .request-actions {
       display: flex;
       gap: 10px;
   }
   .request-actions .friend-action-btn-modern {
       flex: 1;
   }
      .friends-empty-state {
       text-align: center;
       padding: 80px 20px;
       color: rgba(255, 255, 255, 0.5);
   }
   .friends-empty-state i {
       font-size: 80px;
       margin-bottom: 25px;
       opacity: 0.4;
       display: block;
       animation: emptyStateFloat 3s ease-in-out infinite;
   }
   @keyframes emptyStateFloat {
       0%, 100% { transform: translateY(0); }
       50% { transform: translateY(-15px); }
   }
   .friends-empty-state h3 {
       color: rgba(255, 255, 255, 0.7);
       margin: 0 0 12px 0;
       font-size: 24px;
       font-weight: 600;
   }
   .friends-empty-state p {
       margin: 0;
       font-size: 15px;
       color: rgba(255, 255, 255, 0.5);
   }
      @media (max-width: 1024px) {
       .friends-grid-container {
           grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       }
       .requests-split-view {
           grid-template-columns: 1fr;
       }
   }
   @media (max-width: 768px) {
       .friends-container {
           padding: 20px 15px;
       }
       .friends-header-section {
           padding: 25px 20px;
       }
       .friends-main-title {
           font-size: 32px;
       }
       .friends-icon-wrapper {
           width: 60px;
           height: 60px;
           font-size: 28px;
       }
       .friends-tabs-container {
           flex-direction: column;
           gap: 8px;
       }
       .friends-tab-btn {
           width: 100%;
       }
       .friends-grid-container {
           grid-template-columns: 1fr;
       }
       .friends-toolbar {
           flex-direction: column;
       }
       .friends-search-box,
       .friends-sort-select {
           width: 100%;
       }
   }
  #visitorCounter {
      display: none !important;
  }

.chat-embed-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    background: rgba(0, 0, 20, 0.65);
    border-radius: 16px;
    border: 1px solid rgba(0, 128, 255, 0.6);
    box-shadow:
      0 0 12px rgba(0, 128, 255, 0.45),
      0 0 28px rgba(0, 0, 255, 0.35),
      inset 0 0 18px rgba(0, 128, 255, 0.25);
}

.visitor-counter-bar {
    width: 100%;
    margin: 0 0 12px 0;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.92), rgba(18, 16, 28, 0.9));
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    font-size: 14px;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 1002;
    text-align: center;
    border-radius: 0 0 16px 16px;
  }
  .visitor-counter-title {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .visitor-counter-widget {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .visitor-counter-embed {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .visitor-counter-bar .counter-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
  }
  .visitor-counter-bar .counter-link:hover {
    text-decoration: underline;
  }
header.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 15000;
    background: linear-gradient(110deg, rgba(18, 16, 32, 0.95), rgba(26, 22, 46, 0.92));
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
}
header.site-header::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 12px;
    background: radial-gradient(circle at 50% 100%, rgba(255, 215, 0, 0.28), transparent 60%);
    pointer-events: none;
    opacity: 0.75;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    width: 100%;
    position: relative;
}
.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    position: relative;
    padding: 8px 10px;
    border-radius: 14px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.brand-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 215, 0, 0.15);
}
.brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.brand-name {
    font-weight: 900;
    letter-spacing: 0.5px;
    font-size: 18px;
}
.brand-tagline {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.primary-actions {
    flex: 1;
    justify-content: flex-end;
}
.quick-actions {
    justify-content: flex-end;
    gap: 8px;
}
.site-header .header-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    transition: all var(--transition-base);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.site-header .header-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
.site-header .header-action-btn.is-primary {
    background: linear-gradient(135deg, #7C3AED, #C084FC);
    border-color: rgba(192, 132, 252, 0.5);
    box-shadow: 0 14px 34px rgba(124, 58, 237, 0.45);
    text-transform: uppercase;
}
.site-header .header-action-btn.is-primary:hover {
    box-shadow: 0 18px 40px rgba(124, 58, 237, 0.55);
}
.site-header .header-action-btn.is-ghost {
    background: rgba(255, 255, 255, 0.02);
    border-style: dashed;
}
.header-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
    padding: 0;
}
.header-icon-btn i {
    font-size: 20px;
}
.header-icon-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
.header-thumb-btn {
    padding: 0;
    overflow: hidden;
}
.header-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.header-icon-btn.discord {
    background: rgba(114, 137, 218, 0.2);
    border-color: rgba(114, 137, 218, 0.4);
    color: #d7dcff;
}
.header-icon-btn.discord:hover {
    background: rgba(114, 137, 218, 0.28);
}
.youtube-watcher-btn {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ffb3b3;
}
.youtube-watcher-btn:hover {
    background: rgba(239, 68, 68, 0.3);
}
@media (max-width: 900px) {
    .site-header__inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .brand-link {
        width: 100%;
        justify-content: center;
    }
    .primary-actions {
        justify-content: center;
    }
    .quick-actions {
        width: 100%;
        justify-content: center;
    }
}
#adminBtn,
#creditsBtn,
#notificationBellBtn {
    position: absolute;
    z-index: var(--z-elevated);
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-weight: var(--font-weight-semibold);
    font-size: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: linear-gradient(145deg, rgba(18, 20, 26, 0.9), rgba(24, 27, 34, 0.85));
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #f6d574;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
/* Hide mobile menu button on desktop */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
}
#adminBtn::before,
#creditsBtn::before,
#notificationBellBtn::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
       opacity: 0;
       transition: opacity var(--transition-base);
   }
#adminBtn:hover::before,
#creditsBtn:hover::before,
#notificationBellBtn:hover::before {
       opacity: 1;
   }
#adminBtn {
       left: calc(50% - 60px);
       transform: translateY(0);
   }
#adminBtn i,
#notificationBellBtn i {
       filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
       transition: transform 0.3s ease;
   }
#adminBtn:hover,
#creditsBtn:hover,
#notificationBellBtn:hover {
      background: linear-gradient(145deg, rgba(28, 32, 42, 0.95), rgba(34, 38, 48, 0.9));
      border-color: rgba(255, 215, 0, 0.38);
      transform: translateY(-50%) translateY(-3px) scale(1.08);
      box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 215, 0, 0.25);
      color: #f6d574;
   }
#adminBtn:hover i,
#notificationBellBtn:hover i {
       transform: rotate(15deg) scale(1.1);
   }
#adminBtn:active,
#notificationBellBtn:active {
       transform: translateY(-50%) scale(0.95);
       box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
   }
   .main-navigation {
       display: none !important;
   }
   .main-navigation.hidden {
       transform: translateY(-100%);
       opacity: 0;
       pointer-events: none;
       position: fixed;
   }
   .main-navigation:not(.hidden) {
       position: sticky;
   }
   .main-navigation::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 1px;
       background: linear-gradient(90deg,
           transparent,
           rgba(255, 215, 0, 0.3),
           transparent);
   }
   .nav-container {
       max-width: none;
       width: 100%;
       margin: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-wrap: wrap;
       gap: var(--spacing-sm);
       padding: var(--spacing-md) var(--spacing-xl);
       overflow: visible;
       position: relative;
       row-gap: var(--spacing-xs);
       transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                   opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                   padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       max-height: 500px;
       opacity: 1;
   }
   /* Collapsed state */
   .main-navigation.collapsed .nav-container {
       max-height: 0;
       opacity: 0;
       padding-top: 0;
       padding-bottom: 0;
       overflow: hidden;
   }
   /* Collapse button */
   .nav-collapse-btn {
       position: absolute;
       bottom: -22px;
       left: 50%;
       transform: translateX(-50%);
       width: 44px;
       height: 22px;
       background: linear-gradient(180deg,
           rgba(15, 15, 25, 0.98) 0%,
           rgba(26, 26, 46, 0.95) 100%);
       backdrop-filter: blur(20px) saturate(200%);
       -webkit-backdrop-filter: blur(20px) saturate(200%);
       border: 2px solid rgba(255, 215, 0, 0.4);
       border-top: none;
       border-radius: 0 0 var(--radius-lg) var(--radius-lg);
       color: var(--color-primary);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: calc(var(--z-sticky) + 5);
       box-shadow:
           0 4px 12px rgba(0, 0, 0, 0.4),
           0 0 15px rgba(255, 215, 0, 0.2);
       padding: 0;
       margin: 0;
   }
   .nav-collapse-btn i {
       font-size: 0.9em;
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .nav-collapse-btn:hover {
       background: linear-gradient(180deg,
           rgba(26, 26, 46, 0.98) 0%,
           rgba(15, 15, 25, 0.95) 100%);
       border-color: var(--color-primary);
       box-shadow:
           0 6px 20px rgba(0, 0, 0, 0.5),
           0 0 25px rgba(255, 215, 0, 0.3);
       transform: translateX(-50%) translateY(-2px);
   }
   .nav-collapse-btn:active {
       transform: translateX(-50%) translateY(0);
   }
   /* Rotate arrow when collapsed */
   .main-navigation.collapsed .nav-collapse-btn i {
       transform: rotate(180deg);
   }
   .nav-item {
       position: relative;
       display: flex;
       align-items: center;
       gap: var(--spacing-sm);
       padding: var(--spacing-md) var(--spacing-lg);
       border-radius: var(--radius-lg);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       text-decoration: none;
       color: #FFFFFF;
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-semibold);
       font-family: var(--font-display);
       cursor: pointer;
       border: 2px solid transparent;
       background: rgba(15, 15, 25, 0.75);
       overflow: hidden; /* Clip pseudo-elements to prevent bleed */
       letter-spacing: 0.3px;
       isolation: isolate; /* Create new stacking context */
       contain: layout style paint; /* Contain effects within this element */
   }
   /* For dropdown nav-items, allow dropdown content to overflow */
   .nav-item.nav-dropdown {
       position: relative !important; /* Create positioning context for dropdown */
       overflow: visible !important; /* Allow dropdown to show */
       contain: none !important; /* Remove contain to allow dropdown to overflow */
   }
   /* Disable gradient sweep effect for dropdown items to prevent bleeding */
   .nav-item.nav-dropdown::before {
       display: none !important; /* Completely hide the gradient sweep */
   }
   /* Suppress the border highlight effect for dropdown nav-items (keep bridge ::after separate) */
   .nav-item.nav-dropdown:hover::after {
       opacity: 0 !important; /* Hide border effect, but keep the element for bridge functionality */
   }
   .nav-item::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg,
           transparent,
           rgba(255, 215, 0, 0.2),
           transparent);
       transition: left 0.5s ease;
       z-index: 0;
       pointer-events: none;
       clip-path: inset(0); /* Clip to nav-item bounds */
   }
   .nav-item:hover::before {
       left: 100%;
   }
   .nav-item::after {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: var(--radius-lg);
       padding: 2px;
       background: linear-gradient(135deg,
           rgba(255, 215, 0, 0.3),
           rgba(0, 212, 255, 0.3),
           rgba(255, 215, 0, 0.3));
      -webkit-mask: linear-gradient(#fff 0 0) content-box,
                     linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       opacity: 0;
       transition: opacity 0.3s ease;
       z-index: 0;
       pointer-events: none;
   }
   .nav-item:hover::after {
       opacity: 1;
   }
   .nav-item i {
       font-size: 1.1em;
       color: var(--color-accent);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.4));
       position: relative;
       z-index: 1;
   }
   .nav-item span {
       white-space: nowrap;
       position: relative;
       z-index: 1;
       text-shadow: 
           0 2px 4px rgba(0, 0, 0, 0.8),
           0 0 8px rgba(0, 0, 0, 0.5),
           0 1px 2px rgba(0, 0, 0, 0.9);
       font-weight: 600;
   }
   .nav-item:hover {
       background: linear-gradient(135deg,
           rgba(255, 215, 0, 0.25),
           rgba(0, 212, 255, 0.2));
       border-color: rgba(255, 215, 0, 0.6);
       color: #FFFFFF;
   }
   .nav-item:active {
       transform: translateY(-1px) scale(0.98);
   }
   .nav-item:hover i {
       color: var(--color-primary);
       transform: scale(1.15) rotate(5deg);
       filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
   }
   .nav-item.nav-home {
       background: linear-gradient(135deg,
           rgba(255, 215, 0, 0.2),
           rgba(255, 165, 0, 0.15));
       border-color: rgba(255, 215, 0, 0.4);
       box-shadow:
           0 4px 15px rgba(255, 215, 0, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
   }
   .nav-item.nav-home i {
       color: var(--color-primary);
       filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
   }
   .nav-item.nav-home:hover {
       background: linear-gradient(135deg,
           rgba(255, 215, 0, 0.3),
           rgba(255, 165, 0, 0.2));
       border-color: var(--color-primary);
       box-shadow:
           0 8px 30px rgba(255, 215, 0, 0.4),
           0 0 25px rgba(255, 215, 0, 0.3),
           inset 0 1px 0 rgba(255, 255, 255, 0.2);
   }
      .nav-dropdown {
       position: relative;
       overflow: visible !important; /* Allow dropdown to show outside nav-item bounds */
   }
   /* Ensure dropdown content is positioned relative to nav-dropdown, not nav-item */
   /* Ensure dropdown content is positioned relative to nav-dropdown, not nav-item */
   .nav-item.nav-dropdown .nav-dropdown-content {
       position: absolute !important;
       top: calc(100% + 8px) !important;
       left: 0 !important;
       right: auto !important;
       margin-left: 0 !important;
       margin-right: 0 !important;
   }
   /* Override any transforms that might be affecting positioning */
   .nav-item.nav-dropdown.active .nav-dropdown-content {
       left: 0 !important;
       right: auto !important;
       transform: translateY(0) scale(1) !important;
       margin-left: 0 !important;
   }
   /* Ensure hover state also uses correct positioning */
   .nav-item.nav-dropdown:hover .nav-dropdown-content {
       position: absolute !important;
       left: 0 !important;
       right: auto !important;
       margin-left: 0 !important;
       margin-right: 0 !important;
   }
   /* Bridge element to maintain hover through gap */
   .nav-dropdown::after {
       content: '';
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       height: 8px;
       z-index: calc(var(--z-sticky) + 9);
       pointer-events: none;
   }
   .nav-dropdown:hover::after {
       pointer-events: auto;
   }
   .nav-dropdown-content {
       position: absolute;
       top: calc(100% + 8px);
       left: 0;
       right: auto;
       pointer-events: none;
       display: block;
       background: linear-gradient(180deg,
           rgba(15, 15, 25, 0.98) 0%,
           rgba(26, 26, 46, 0.95) 100%);
       backdrop-filter: blur(30px) saturate(200%);
       -webkit-backdrop-filter: blur(30px) saturate(200%);
       border: 2px solid rgba(255, 215, 0, 0.3);
       border-radius: var(--radius-lg);
       box-shadow:
           0 12px 40px rgba(0, 0, 0, 0.6),
           0 0 30px rgba(255, 215, 0, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
       min-width: 240px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(-15px) scale(0.95);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 10000 !important; /* High z-index to ensure it's above everything */
       padding: var(--spacing-sm) 0;
       overflow: visible; /* Changed from hidden to visible */
   }
   /* Position "More" dropdown to the right */
   .nav-more-dropdown .nav-dropdown-content {
       left: auto;
       right: 0;
       background: linear-gradient(180deg,
           rgba(15, 15, 25, 0.98) 0%,
           rgba(26, 26, 46, 0.95) 100%);
       backdrop-filter: blur(30px) saturate(200%);
       -webkit-backdrop-filter: blur(30px) saturate(200%);
       border: 2px solid rgba(255, 215, 0, 0.3);
       border-radius: var(--radius-lg);
       box-shadow:
           0 12px 40px rgba(0, 0, 0, 0.6),
           0 0 30px rgba(255, 215, 0, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
       min-width: 240px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(-15px) scale(0.95);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: calc(var(--z-sticky) + 10);
       padding: var(--spacing-sm) 0;
       overflow: hidden;
   }
   .nav-dropdown-content::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 1px;
       background: linear-gradient(90deg,
           transparent,
           rgba(255, 215, 0, 0.5),
           transparent);
   }
   /* Show dropdown on hover for dropdowns with real links (like "All Games") */
   .nav-dropdown:hover .nav-dropdown-content:not(.click-only) {
       opacity: 1 !important;
       visibility: visible !important;
       transform: translateY(0) scale(1) !important;
       pointer-events: auto !important;
       display: block !important;
       z-index: 10000 !important;
       position: absolute !important;
   }
   /* Show dropdown on hover and when active - must override base hidden state */
   .nav-dropdown:hover .nav-dropdown-content,
   .nav-dropdown.active .nav-dropdown-content,
   .nav-item.nav-dropdown:hover .nav-dropdown-content,
   .nav-item.nav-dropdown:hover > .nav-dropdown-content {
       opacity: 1 !important;
       visibility: visible !important;
       transform: translateY(0) scale(1) !important;
       pointer-events: auto !important;
       display: block !important;
       z-index: 10000 !important;
       position: absolute !important;
   }
   /* Specific rule for More dropdown hover/active - needs higher specificity */
   .nav-more-dropdown:hover .nav-dropdown-content,
   .nav-more-dropdown.active .nav-dropdown-content {
       opacity: 1 !important;
       visibility: visible !important;
       transform: translateY(0) scale(1) !important;
       pointer-events: auto !important;
       display: block !important;
       position: absolute !important;
   }
   /* Keep dropdown visible when hovering over it */
   .nav-dropdown.active .nav-dropdown-content:hover,
   .nav-dropdown:hover .nav-dropdown-content:hover {
       opacity: 1 !important;
       visibility: visible !important;
       transform: translateY(0) scale(1) !important;
       pointer-events: auto !important;
       display: block !important;
   }
   /* Ensure hover rule has highest specificity - must come after hide rule */
   .nav-item.nav-dropdown:hover .nav-dropdown-content,
   .nav-item.nav-dropdown.nav-dropdown:hover .nav-dropdown-content {
       opacity: 1 !important;
       visibility: visible !important;
       transform: translateY(0) scale(1) !important;
       pointer-events: auto !important;
       display: block !important;
       z-index: 10000 !important;
       position: absolute !important;
   }
   /* Hide dropdown content when parent is not active and not hovered - lower specificity */
   .nav-dropdown:not(.active):not(:hover) .nav-dropdown-content {
       opacity: 0 !important;
       visibility: hidden !important;
       pointer-events: none !important;
   }
   /* CRITICAL: Override hide rule when hovering - highest specificity, must come after hide rule */
   .nav-item.nav-dropdown:hover .nav-dropdown-content,
   .nav-item.nav-dropdown.nav-dropdown:hover .nav-dropdown-content,
   .nav-item.nav-dropdown:hover > .nav-dropdown-content,
   .nav-item.nav-dropdown .nav-link:hover ~ .nav-dropdown-content,
   .nav-item.nav-dropdown .nav-link:hover + .nav-dropdown-content {
       opacity: 1 !important;
       visibility: visible !important;
       transform: translateY(0) scale(1) !important;
       pointer-events: auto !important;
       display: block !important;
       z-index: 10000 !important;
       position: absolute !important;
   }
   /* Same for More dropdown */
   .nav-more-dropdown:not(.active):not(:hover) .nav-dropdown-content {
       opacity: 0 !important;
       visibility: hidden !important;
       pointer-events: none !important;
       transform: translateY(-15px) scale(0.95) !important;
   }
   /* Force show when active - highest specificity */
   .nav-more-dropdown.active .nav-dropdown-content {
       opacity: 1 !important;
       visibility: visible !important;
       display: block !important;
       pointer-events: auto !important;
       transform: translateY(0) scale(1) !important;
       position: absolute !important;
       z-index: 9999 !important;
       top: calc(100% + 8px) !important;
       right: 0 !important;
       left: auto !important;
   }
   /* Active dropdown styling */
   .nav-dropdown.active .nav-dropdown-content {
       background: linear-gradient(180deg,
           rgba(15, 15, 25, 0.98) 0%,
           rgba(26, 26, 46, 0.95) 100%) !important;
       min-width: 240px !important;
       max-width: none !important;
       z-index: 10000 !important;
       position: absolute !important;
       top: calc(100% + 8px) !important;
       left: 0 !important;
       right: auto !important;
       transform: translateY(0) scale(1) !important;
       opacity: 1 !important;
       visibility: visible !important;
       pointer-events: auto !important;
       display: block !important;
   }
   .nav-dropdown-content a {
       position: relative;
       display: flex;
       align-items: center;
       gap: var(--spacing-md);
       padding: var(--spacing-md) var(--spacing-lg);
       color: var(--text-primary);
       text-decoration: none;
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-medium);
       margin: 2px var(--spacing-xs);
       border-radius: var(--radius-md);
       overflow: hidden;
   }
   .nav-dropdown-content a::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 3px;
       background: linear-gradient(180deg,
           var(--color-primary),
           var(--color-accent));
       transform: scaleY(0);
       transition: transform 0.3s ease;
   }
   .nav-dropdown-content a i {
       color: var(--color-accent);
       width: 22px;
       text-align: center;
       font-size: 1.1em;
       transition: all 0.3s ease;
       filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.3));
   }
   .nav-dropdown-content a:hover {
       background: linear-gradient(90deg,
           rgba(255, 215, 0, 0.15),
           rgba(0, 212, 255, 0.1));
       color: var(--color-primary);
       padding-left: var(--spacing-xl);
       transform: translateX(4px);
       box-shadow:
           0 4px 12px rgba(0, 0, 0, 0.3),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
   }
   .nav-dropdown-content a:hover::before {
       transform: scaleY(1);
   }
      .nav-dropdown-content a:hover i {
          color: var(--color-primary);
          transform: scale(1.2) rotate(5deg);
          filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
      }
      .nav-dropdown-divider {
          height: 1px;
          background: linear-gradient(90deg,
              transparent,
              rgba(255, 215, 0, 0.3),
              transparent);
          margin: 8px var(--spacing-xs);
          border: none;
      }
      .nav-button {
       background: linear-gradient(135deg,
           rgba(0, 212, 255, 0.15),
           rgba(255, 215, 0, 0.1));
       border: 2px solid rgba(0, 212, 255, 0.3);
       box-shadow:
           0 4px 15px rgba(0, 212, 255, 0.15),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
   }
   .nav-button i {
       color: var(--color-accent);
       filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.4));
   }
   .nav-button:hover {
       background: linear-gradient(135deg,
           rgba(0, 212, 255, 0.25),
           rgba(255, 215, 0, 0.2));
       border-color: rgba(0, 212, 255, 0.5);
       box-shadow:
           0 8px 30px rgba(0, 212, 255, 0.3),
           0 0 25px rgba(0, 212, 255, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.15);
   }
   .nav-button:hover i {
       color: var(--color-accent);
       filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
   }
   /* Drawing Button Styling */
   #openDrawingBtn.nav-featured,
   button[id*="Drawing"].nav-featured {
       background: linear-gradient(135deg,
           rgba(255, 20, 147, 0.3),
           rgba(255, 69, 0, 0.3),
           rgba(255, 215, 0, 0.3),
           rgba(50, 205, 50, 0.25)) !important;
       background-size: 300% 300% !important;
       border: 2px solid rgba(255, 20, 147, 0.6) !important;
       box-shadow:
           0 4px 25px rgba(255, 20, 147, 0.4),
           0 0 20px rgba(255, 69, 0, 0.3),
           0 0 25px rgba(255, 215, 0, 0.3),
           inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
       animation: drawingPulse 2s ease-in-out infinite, drawingGradient 5s ease infinite !important;
       position: relative;
       overflow: hidden;
   }
   #openDrawingBtn.nav-featured::before,
   button[id*="Drawing"].nav-featured::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle,
           rgba(255, 255, 255, 0.15) 0%,
           transparent 70%);
       animation: drawingSparkle 3s ease-in-out infinite;
   }
   #openDrawingBtn.nav-featured i,
   button[id*="Drawing"].nav-featured i {
       color: #FF1493 !important;
       filter: drop-shadow(0 0 8px rgba(255, 20, 147, 0.9))
               drop-shadow(0 0 12px rgba(255, 69, 0, 0.7))
               drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) !important;
       animation: drawingIconBrush 2.5s ease-in-out infinite !important;
       position: relative;
       z-index: 1;
   }
   #openDrawingBtn.nav-featured:hover,
   button[id*="Drawing"].nav-featured:hover {
       background: linear-gradient(135deg,
           rgba(255, 20, 147, 0.5),
           rgba(255, 69, 0, 0.45),
           rgba(255, 215, 0, 0.4),
           rgba(50, 205, 50, 0.35)) !important;
       border-color: rgba(255, 20, 147, 0.9) !important;
       box-shadow:
           0 8px 40px rgba(255, 20, 147, 0.6),
           0 0 30px rgba(255, 69, 0, 0.5),
           0 0 35px rgba(255, 215, 0, 0.5),
           0 0 25px rgba(50, 205, 50, 0.4),
           inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
       transform: translateY(-3px) scale(1.05);
   }
   #openDrawingBtn.nav-featured:hover i,
   button[id*="Drawing"].nav-featured:hover i {
       transform: scale(1.25) rotate(-10deg);
       color: #FF69B4 !important;
   }

   /* General nav-featured fallback for other featured buttons */
  .nav-featured:not(#openDrawingBtn):not(button[id*="Drawing"]) {
       background: linear-gradient(135deg,
           rgba(255, 215, 0, 0.25),
           rgba(0, 212, 255, 0.2)) !important;
       border: 2px solid rgba(255, 215, 0, 0.5) !important;
       box-shadow:
           0 4px 20px rgba(255, 215, 0, 0.3),
           0 0 15px rgba(0, 212, 255, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
       animation: featuredPulse 2s ease-in-out infinite;
   }
  .nav-featured:not(#openDrawingBtn):not(button[id*="Drawing"]) i {
       color: #FFD700 !important;
       filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8)) !important;
   }
  .nav-featured:not(#openDrawingBtn):not(button[id*="Drawing"]):hover {
       background: linear-gradient(135deg,
           rgba(255, 215, 0, 0.35),
           rgba(0, 212, 255, 0.3)) !important;
       border-color: rgba(255, 215, 0, 0.7) !important;
       box-shadow:
           0 8px 35px rgba(255, 215, 0, 0.5),
           0 0 25px rgba(0, 212, 255, 0.3),
           inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
       transform: translateY(-2px);
   }

   /* Animations */
   @keyframes shimmerRotate {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }
   @keyframes drawingPulse {
       0%, 100% { 
           box-shadow: 0 4px 25px rgba(255, 20, 147, 0.4),
                       0 0 20px rgba(255, 69, 0, 0.3),
                       0 0 25px rgba(255, 215, 0, 0.3),
                       inset 0 1px 0 rgba(255, 255, 255, 0.3);
       }
       50% { 
           box-shadow: 0 6px 35px rgba(255, 20, 147, 0.6),
                       0 0 30px rgba(255, 69, 0, 0.5),
                       0 0 35px rgba(255, 215, 0, 0.5),
                       inset 0 1px 0 rgba(255, 255, 255, 0.4);
       }
   }
   @keyframes drawingGradient {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   @keyframes drawingSparkle {
       0%, 100% { opacity: 0.3; transform: scale(1) rotate(0deg); }
       50% { opacity: 0.6; transform: scale(1.2) rotate(180deg); }
   }
   @keyframes drawingIconBrush {
       0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
       25% { transform: translateY(-2px) rotate(-5deg) scale(1.1); }
       75% { transform: translateY(-2px) rotate(5deg) scale(1.1); }
   }
   @keyframes featuredPulse {
       0%, 100% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), 0 0 15px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
       50% { box-shadow: 0 4px 25px rgba(255, 215, 0, 0.4), 0 0 20px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
   }
      @media (max-width: 1024px) {
       .nav-container {
           gap: var(--spacing-xs);
           padding: var(--spacing-sm) var(--spacing-md);
       }
       .nav-item {
           padding: var(--spacing-sm) var(--spacing-md);
           font-size: var(--font-size-xs);
       }
       .nav-item span {
           display: none;
       }
       .nav-item i {
           font-size: 1.3em;
       }
   }
   @media (max-width: 768px) {
       .main-navigation {
           padding: 0;
       }
       .nav-container {
           justify-content: space-around;
           padding: var(--spacing-sm);
           gap: 4px;
       }
       .nav-item {
           flex: 1;
           justify-content: center;
           padding: var(--spacing-sm) 6px;
           min-width: 0;
           border-radius: var(--radius-md);
           font-size: 0.85rem;
       }
       .nav-item span {
           display: none;
       }
       .nav-item i {
           font-size: 1.2em;
       }
       .nav-dropdown-content {
           left: auto;
           right: 0;
           min-width: 200px;
           max-width: 90vw;
       }
       /* Position "More" dropdown to the right on mobile */
       .nav-more-dropdown .nav-dropdown-content {
           left: auto;
           right: 0;
       }
       .nav-dropdown-content a {
           padding: var(--spacing-sm) var(--spacing-md);
           font-size: 0.9rem;
       }
   }
   @media (max-width: 480px) {
       .nav-container {
           gap: 3px;
           padding: 8px 4px;
       }
       .nav-item {
           padding: 10px 6px;
           border-radius: var(--radius-md);
           min-width: 44px;
       }
       .nav-item i {
           font-size: 1.1em;
       }
       .nav-dropdown-content {
           min-width: 180px;
           max-width: 85vw;
           right: 0;
       }
       .nav-dropdown-content a {
           padding: 10px 12px;
           font-size: 0.85rem;
       }
       .nav-dropdown-content {
           min-width: 200px;
           font-size: var(--font-size-xs);
           padding: var(--spacing-xs) 0;
       }
       .nav-dropdown-content a {
           padding: var(--spacing-sm) var(--spacing-md);
       }
   }
   #adminBtn:hover i {
       animation: spin 0.6s ease-in-out;
   }
   @keyframes spin {
       0%, 100% { transform: rotate(0deg); }
       50% { transform: rotate(180deg); }
   }
      .home-link-btn {
       display: flex;
       align-items: center;
       gap: var(--spacing-sm);
       text-decoration: none;
       color: var(--color-primary);
       transition: all var(--transition-base);
       padding: var(--spacing-xs) var(--spacing-md);
       border-radius: var(--radius-lg);
       background: transparent;
       border: 2px solid transparent;
   }
   .home-link-btn:hover {
       background: var(--bg-glass);
       border-color: var(--border-color);
       transform: translateX(-3px);
   }
   .home-link-text {
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-semibold);
       display: flex;
       align-items: center;
       gap: 6px;
       color: var(--color-primary);
       opacity: 0;
       transition: opacity var(--transition-base);
       white-space: nowrap;
   }
   .home-link-btn:hover .home-link-text {
       opacity: 1;
   }
      .header-actions {
       display: flex;
       align-items: center;
       gap: var(--spacing-md);
       margin-top: var(--spacing-sm);
       flex-wrap: wrap;
       justify-content: center; /* Center buttons to match Game of the Season */
   }
.header-action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
       border-radius: var(--radius-lg);
       border: 2px solid var(--border-color);
       background: var(--bg-glass);
       backdrop-filter: blur(10px);
       color: var(--color-primary);
       text-decoration: none;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   transition: all var(--transition-base);
   cursor: pointer;
   box-shadow: var(--shadow-md);
    position: relative;
    overflow: visible;
}
/* Force unread badge visibility on header chat button */
.header-action-btn .chat-unread-badge {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 22px;
    line-height: 22px;
    text-align: center;
}
   .header-action-btn:hover {
       background: var(--bg-card-hover);
       border-color: var(--border-color-active);
       transform: translateY(-2px);
       box-shadow: var(--shadow-lg), var(--shadow-glow);
       color: var(--color-primary);
   }
   .header-action-btn i {
       filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
       transition: transform 0.3s ease;
   }
   .header-action-btn:hover i {
       transform: scale(1.15) rotate(5deg);
   }
.header-action-btn span {
    font-family: var(--font-display);
    letter-spacing: 0.5px;
}
.header-action-img-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-lg);
    border: 3px solid #8a2be2;
    background: linear-gradient(135deg, rgba(138,43,226,0.18), rgba(0,0,0,0.35));
    box-shadow: 0 8px 20px rgba(138,43,226,0.3), var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    width: 72px;
    height: 72px;
    overflow: hidden;
    position: relative;
}
.header-action-img-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent 60%);
    opacity: 0.4;
    pointer-events: none;
}
/* Hide legacy YouTube modal */
#youtubeWatcherModal {
    display: none !important;
}
.header-action-img-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 36px rgba(138,43,226,0.45), var(--shadow-lg);
    border-color: #b266ff;
    background: linear-gradient(135deg, rgba(138,43,226,0.25), rgba(0,0,0,0.4));
}
.header-action-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-lg) - 4px);
}

   /* First-load onboarding tip */
   .nav-onboarding-tip {
       position: absolute;
       z-index: 9999;
       background: rgba(12, 12, 18, 0.96);
       border: 1px solid rgba(255, 215, 0, 0.5);
       border-radius: 14px;
       padding: 14px 16px;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
       color: #fdfaf3;
       width: min(260px, 80vw);
       pointer-events: auto;
       backdrop-filter: blur(8px);
       opacity: 0;
       transition: opacity 0.25s ease;
   }
   .nav-onboarding-tip strong {
       display: block;
       font-size: 15px;
       margin-bottom: 6px;
       color: #ffd700;
   }
   .nav-onboarding-tip p {
       margin: 0 0 10px;
       font-size: 13px;
       line-height: 1.5;
       color: rgba(255, 255, 255, 0.85);
   }
   .nav-onboarding-tip button {
       margin-top: 4px;
       width: 100%;
       padding: 8px 10px;
       border: none;
       border-radius: 10px;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 165, 0, 0.8));
       color: #0a0a0f;
       font-weight: 800;
       cursor: pointer;
       box-shadow: 0 10px 24px rgba(255, 215, 0, 0.3);
   }
   .nav-onboarding-tip::after {
       content: '';
       position: absolute;
       top: -10px;
       left: var(--arrow-offset, 24px);
       width: 0;
       height: 0;
       border-left: 10px solid transparent;
       border-right: 10px solid transparent;
       border-bottom: 10px solid rgba(12, 12, 18, 0.96);
       filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.35));
   }

   /* Header Drawing Button */
   #openDrawingBtnHeader.header-action-btn {
       background: linear-gradient(135deg,
           rgba(255, 20, 147, 0.25),
           rgba(255, 69, 0, 0.2),
           rgba(255, 215, 0, 0.2)) !important;
       background-size: 300% 300% !important;
       border: 2px solid rgba(255, 20, 147, 0.5) !important;
       box-shadow:
           0 4px 20px rgba(255, 20, 147, 0.3),
           0 0 15px rgba(255, 69, 0, 0.25),
           0 0 20px rgba(255, 215, 0, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
       animation: drawingGradient 5s ease infinite, headerDrawingPulse 2.5s ease-in-out infinite !important;
       color: #FF1493 !important;
   }
   #openDrawingBtnHeader.header-action-btn::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
       animation: drawingSparkle 3s ease-in-out infinite;
   }
   #openDrawingBtnHeader.header-action-btn i {
       color: #FF1493 !important;
       filter: drop-shadow(0 0 6px rgba(255, 20, 147, 0.8))
               drop-shadow(0 0 10px rgba(255, 69, 0, 0.6)) !important;
       animation: drawingIconBrush 2.5s ease-in-out infinite !important;
   }
   #openDrawingBtnHeader.header-action-btn:hover {
       background: linear-gradient(135deg,
           rgba(255, 20, 147, 0.4),
           rgba(255, 69, 0, 0.35),
           rgba(255, 215, 0, 0.3)) !important;
       border-color: rgba(255, 20, 147, 0.8) !important;
       box-shadow:
           0 8px 35px rgba(255, 20, 147, 0.5),
           0 0 25px rgba(255, 69, 0, 0.4),
           0 0 30px rgba(255, 215, 0, 0.35),
           inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
       transform: translateY(-3px) scale(1.05);
       color: #FF69B4 !important;
   }
   #openDrawingBtnHeader.header-action-btn:hover i {
       transform: scale(1.2) rotate(-8deg) !important;
       color: #FF69B4 !important;
   }
   @keyframes headerDrawingPulse {
       0%, 100% { 
           box-shadow: 0 4px 20px rgba(255, 20, 147, 0.3),
                       0 0 15px rgba(255, 69, 0, 0.25),
                       0 0 20px rgba(255, 215, 0, 0.2),
                       inset 0 1px 0 rgba(255, 255, 255, 0.2);
       }
       50% { 
           box-shadow: 0 6px 30px rgba(255, 20, 147, 0.5),
                       0 0 25px rgba(255, 69, 0, 0.4),
                       0 0 30px rgba(255, 215, 0, 0.35),
                       inset 0 1px 0 rgba(255, 255, 255, 0.3);
       }
   }
      #youtubeWatcherBtn {
       position: relative;
       z-index: var(--z-elevated);
       padding: var(--spacing-md) var(--spacing-xl);
       border-radius: var(--radius-lg);
       border: 2px solid rgba(255, 0, 0, 0.4);
       background: linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(200, 0, 0, 0.15));
       backdrop-filter: blur(10px);
       color: #ff0000;
       font-weight: var(--font-weight-bold);
       font-size: var(--font-size-sm);
       transition: all var(--transition-base);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-sm);
       font-family: var(--font-display);
       overflow: hidden;
       box-shadow: var(--shadow-md), 0 0 15px rgba(255, 0, 0, 0.2);
       white-space: nowrap;
   }
   #youtubeWatcherBtn::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), rgba(200, 0, 0, 0.1));
       opacity: 0;
       transition: opacity var(--transition-base);
   }
   #youtubeWatcherBtn:hover {
       background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(200, 0, 0, 0.25));
       border-color: rgba(255, 0, 0, 0.6);
       transform: translateY(-3px);
       box-shadow: var(--shadow-lg), 0 0 25px rgba(255, 0, 0, 0.4);
   }
   #youtubeWatcherBtn:hover::before {
       opacity: 1;
   }
   #youtubeWatcherBtn:active {
       transform: translateY(-1px);
   }
   #youtubeWatcherBtn .youtube-btn-text {
       font-family: var(--font-display);
       font-weight: var(--font-weight-bold);
       letter-spacing: 0.8px;
       text-shadow: 0 2px 8px rgba(255, 0, 0, 0.4);
       font-size: var(--font-size-sm);
   }
   #youtubeWatcherBtn i {
       font-size: 22px;
       filter: drop-shadow(0 2px 6px rgba(255, 0, 0, 0.5));
       animation: youtubePulse 2s ease-in-out infinite;
       transition: transform var(--transition-base);
   }
   #youtubeWatcherBtn:hover i {
       transform: scale(1.15);
   }
   @keyframes youtubePulse {
       0%, 100% {
           transform: scale(1);
           opacity: 1;
       }
       50% {
           transform: scale(1.1);
           opacity: 0.9;
       }
   }
      @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   @keyframes scaleIn {
       from {
           opacity: 0;
           transform: scale(0.9);
       }
       to {
           opacity: 1;
           transform: scale(1);
       }
   }
   .animate-on-scroll {
       animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
   }
      html {
       scroll-behavior: smooth;
   }
      *:focus-visible {
       outline: 2px solid var(--color-primary);
       outline-offset: 2px;
       border-radius: var(--radius-sm);
   }
      .youtube-modal-content {
       animation: modalSlideIn 0.4s ease-out;
   }
   @keyframes modalSlideIn {
       from {
           opacity: 0;
           transform: translateY(-30px) scale(0.95);
       }
       to {
           opacity: 1;
           transform: translateY(0) scale(1);
       }
   }
   #youtubeUrlInput:focus {
       outline: none;
       border-color: rgba(255, 0, 0, 0.6);
       background: rgba(255, 255, 255, 0.08);
       box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
   }
   #watchYoutubeBtn:hover {
       background: linear-gradient(135deg, #cc0000, #990000);
       transform: translateY(-2px);
       box-shadow: 0 6px 25px rgba(255, 0, 0, 0.6);
   }
   #watchYoutubeBtn:active {
       transform: translateY(0);
   }
   #closeYoutubeWatcherBtn:hover {
       background: rgba(255, 0, 0, 0.3);
       border-color: rgba(255, 0, 0, 0.5);
       transform: rotate(90deg);
   }
      .notification-dropdown {
       position: fixed;
       top: 80px;
       right: 80px;
       width: 380px;
       max-height: 500px;
       background: rgba(15, 15, 25, 0.98);
       backdrop-filter: blur(12px);
       border-radius: 20px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.15);
       z-index: 20000;
       display: none;
       flex-direction: column;
       overflow: hidden;
       animation: notificationSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   /* Smaller notification dropdown on small devices */
   @media (max-width: 1024px) {
       .notification-dropdown {
           width: 320px;
           max-height: 400px;
           top: 70px;
           right: 20px;
           border-radius: 16px;
       }
       .notification-dropdown-header {
           padding: 16px 20px;
       }
       .notification-dropdown-header h3 {
           font-size: 16px;
       }
   }
   @media (max-width: 768px) {
       .notification-dropdown {
           width: 280px;
           max-height: 350px;
           top: 60px;
           right: 15px;
           border-radius: 14px;
       }
       .notification-dropdown-header {
           padding: 14px 18px;
       }
       .notification-dropdown-header h3 {
           font-size: 15px;
       }
       .notification-item {
           padding: 12px 16px;
       }
       .notification-text {
           font-size: 13px;
       }
       .notification-avatar {
           width: 40px;
           height: 40px;
       }
   }
   @media (max-width: 480px) {
       .notification-dropdown {
           width: calc(100vw - 20px);
           max-height: calc(100vh - 100px);
           top: 70px;
           right: 10px;
           left: 10px;
           border-radius: 12px;
       }
       .notification-dropdown-header {
           padding: 12px 16px;
       }
       .notification-dropdown-header h3 {
           font-size: 14px;
       }
       .notification-item {
           padding: 10px 14px;
       }
       .notification-text {
           font-size: 12px;
           margin: 0 0 8px 0;
       }
       .notification-avatar {
           width: 36px;
           height: 36px;
       }
       .notification-action-btn {
           padding: 6px 10px;
           font-size: 11px;
       }
   }
   .notification-dropdown.active {
       display: flex;
   }
   @keyframes notificationSlideIn {
       from {
           opacity: 0;
           transform: translateY(-10px) scale(0.95);
       }
       to {
           opacity: 1;
           transform: translateY(0) scale(1);
       }
   }
   .notification-dropdown-header {
       padding: 20px 24px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 2px solid rgba(255, 215, 0, 0.15);
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
       position: relative;
   }
   .notification-dropdown-header::before {
       content: '';
       position: absolute;
       inset: 8px 16px auto 16px;
       height: 12px;
       background: linear-gradient(90deg, rgba(255, 215, 0, 0) 0%, rgba(255, 215, 0, 0.4) 25%, rgba(255, 165, 0, 0.45) 50%, rgba(255, 215, 0, 0.4) 75%, rgba(255, 215, 0, 0) 100%);
       border-radius: 12px;
       filter: drop-shadow(0 4px 14px rgba(255, 215, 0, 0.35));
       animation: shimmer 4s ease-in-out infinite;
       z-index: 2;
       pointer-events: none;
   }
   .notification-dropdown-header h3 {
       margin: 0;
       font-size: 18px;
       font-weight: 700;
       color: #FFD700;
       display: flex;
       align-items: center;
       gap: 10px;
   }
   .clear-notifications-btn {
       width: 32px;
       height: 32px;
       border-radius: 8px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       font-size: 14px;
       position: relative;
   }
   .clear-notifications-btn:hover {
       background: rgba(255, 0, 0, 0.2);
       border-color: rgba(255, 0, 0, 0.4);
       color: #ff4444;
       transform: scale(1.1);
   }
   .clear-notifications-btn::after {
       content: attr(title);
       position: absolute;
       bottom: calc(100% + 10px);
       left: 50%;
       transform: translateX(-50%) translateY(5px);
       padding: 8px 12px;
       background: linear-gradient(135deg, rgba(15, 15, 25, 0.98), rgba(20, 20, 30, 0.98));
       backdrop-filter: blur(10px);
       color: #FFD700;
       font-size: 12px;
       font-weight: 600;
       white-space: nowrap;
       border-radius: 8px;
       border: 2px solid rgba(255, 215, 0, 0.4);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.2);
       z-index: 10000;
       pointer-events: none;
       opacity: 0;
       transition: opacity 0.2s ease, transform 0.2s ease;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
       letter-spacing: 0.3px;
   }
   .clear-notifications-btn::before {
       content: '';
       position: absolute;
       bottom: calc(100% + 2px);
       left: 50%;
       transform: translateX(-50%);
       border: 6px solid transparent;
       border-top-color: rgba(255, 215, 0, 0.4);
       z-index: 10001;
       pointer-events: none;
       opacity: 0;
       transition: opacity 0.2s ease;
       filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
   }
   .clear-notifications-btn:hover::after {
       opacity: 1;
       transform: translateX(-50%) translateY(0);
   }
   .clear-notifications-btn:hover::before {
       opacity: 1;
   }
   .notification-list {
       flex: 1;
       overflow-y: auto;
       padding: 12px;
       max-height: 400px;
   }
   .notification-list::-webkit-scrollbar {
       width: 8px;
   }
   .notification-list::-webkit-scrollbar-track {
       background: rgba(255, 255, 255, 0.05);
       border-radius: 10px;
   }
   .notification-list::-webkit-scrollbar-thumb {
       background: rgba(255, 215, 0, 0.3);
       border-radius: 10px;
   }
   .notification-list::-webkit-scrollbar-thumb:hover {
       background: rgba(255, 215, 0, 0.5);
   }
   .notification-empty {
       text-align: center;
       padding: 60px 20px;
       color: rgba(255, 255, 255, 0.5);
   }
   .notification-empty i {
       font-size: 48px;
       margin-bottom: 16px;
       opacity: 0.5;
   }
   .notification-empty p {
       margin: 0;
       font-size: 14px;
       font-weight: 500;
   }
   .notification-item {
       display: flex;
       gap: 12px;
       padding: 16px;
       background: rgba(255, 255, 255, 0.03);
       border-radius: 12px;
       margin-bottom: 10px;
       border: 1px solid rgba(255, 215, 0, 0.1);
       transition: all 0.3s ease;
   }
   .notification-item:hover {
       background: rgba(255, 255, 255, 0.05);
       border-color: rgba(255, 215, 0, 0.2);
       transform: translateX(4px);
   }
   .notification-avatar {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       border: 2px solid rgba(255, 215, 0, 0.3);
       flex-shrink: 0;
   }
   .notification-content {
       flex: 1;
       min-width: 0;
   }
   .notification-text {
       margin: 0 0 10px 0;
       color: rgba(255, 255, 255, 0.9);
       font-size: 14px;
       line-height: 1.4;
   }
   .notification-text strong {
       color: #FFD700;
       font-weight: 600;
   }
   .notification-actions {
       display: flex;
       gap: 8px;
   }
   .notification-action-btn {
       flex: 1;
       padding: 8px 12px;
       border-radius: 8px;
       border: 1px solid;
       background: transparent;
       color: rgba(255, 255, 255, 0.9);
       cursor: pointer;
       font-size: 12px;
       font-weight: 600;
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
   }
   .notification-action-btn.accept {
       border-color: rgba(40, 167, 69, 0.4);
       color: #28a745;
   }
   .notification-action-btn.accept:hover {
       background: rgba(40, 167, 69, 0.2);
       border-color: rgba(40, 167, 69, 0.6);
       transform: translateY(-2px);
   }
   .notification-action-btn.decline {
       border-color: rgba(220, 53, 69, 0.4);
       color: #dc3545;
   }
   .notification-action-btn.decline:hover {
       background: rgba(220, 53, 69, 0.2);
       border-color: rgba(220, 53, 69, 0.6);
       transform: translateY(-2px);
   }
   @media (max-width: 768px) {
       header.site-header {
           padding: 15px 20px;
           min-height: auto;
       }
       header.site-header .site-header__inner {
           gap: 10px;
       }
       #notificationBellBtn {
           right: 70px;
       }
       .notification-dropdown {
           right: 20px;
           left: 20px;
           width: auto;
           top: 70px;
       }
       #youtubeWatcherBtn {
           padding: 8px 16px;
           font-size: 12px;
       }
       #youtubeWatcherBtn .youtube-btn-text {
           font-size: 11px;
           letter-spacing: 0.5px;
       }
       #youtubeWatcherBtn i {
           font-size: 18px;
       }
   }
   @media (max-width: 480px) {
       #youtubeWatcherBtn .youtube-btn-text {
           display: none;
       }
       #youtubeWatcherBtn {
           padding: 10px 14px;
       }
   }
   #adminBtn,
   .header-icon-btn#adminBtn {
       left: 20px;
       top: 30px;
       transform: translateY(0);
   }
   .header-icon-btn#creditsBtn {
       right: 20px;
       top: 30px;
       z-index: 1000;
       transform: translateY(0);
   }
   /* Credits button stays in place when sidebar is hovered */
   /* Admin button stays in place when sidebar is hovered */
   #notificationBellBtn {
       left: calc(50% + 60px);
       right: auto;
       transform: translateY(0);
   }
   #notificationBadge {
       position: absolute;
       top: -4px;
       right: -4px;
       background: #ff4444;
       color: white;
       font-size: 11px;
       font-weight: 700;
       padding: 2px 6px;
       border-radius: 12px;
       min-width: 20px;
       text-align: center;
       display: none;
       align-items: center;
       justify-content: center;
       border: 2px solid rgba(15, 15, 25, 0.95);
       box-shadow: 0 2px 8px rgba(255, 68, 68, 0.5), 0 0 12px rgba(255, 68, 68, 0.3);
       animation: notificationPulse 2s ease-in-out infinite;
       z-index: 10;
   }
   @keyframes notificationPulse {
       0%, 100% {
           transform: scale(1);
           box-shadow: 0 2px 8px rgba(255, 68, 68, 0.5), 0 0 12px rgba(255, 68, 68, 0.3);
       }
       50% {
           transform: scale(1.1);
           box-shadow: 0 4px 12px rgba(255, 68, 68, 0.7), 0 0 20px rgba(255, 68, 68, 0.5);
       }
   }
      .controls {
          background: var(--bg-glass);
          backdrop-filter: blur(30px) saturate(180%);
          padding: 0;
          position: relative;
          z-index: var(--z-elevated);
          margin: var(--spacing-xl) auto;
          margin-left: 50%; /* Center on screen */
          transform: translateX(-50%);
          max-width: 1400px;
          border-radius: var(--radius-2xl);
          border: 2px solid var(--border-color);
          box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.05);
          box-sizing: border-box;
          overflow: hidden;
          transition: all var(--transition-base);
      }
   .controls:hover {
       border-color: var(--border-color-hover);
       box-shadow: var(--shadow-xl), var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
   }
   .control-section {
       border-bottom: 1px solid var(--border-color);
       transition: all var(--transition-base);
   }
   .control-section:last-child {
       border-bottom: none;
   }
   .control-section:hover {
       background: rgba(255, 215, 0, 0.02);
   }
   .control-section-header {
       padding: var(--spacing-lg) var(--spacing-xl);
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       transition: all var(--transition-base);
       background: transparent;
       position: relative;
   }
   .control-section-header::after {
       content: '';
       position: absolute;
       bottom: -6px;
       left: 50%;
       width: 180px;
       height: 14px;
       transform: translateX(-50%);
       background: radial-gradient(circle, rgba(255, 215, 0, 0.45) 0%, rgba(255, 215, 0, 0) 70%);
       filter: blur(6px);
       opacity: 0.9;
       z-index: 1;
       pointer-events: none;
   }
   .control-section-header:hover::after {
       opacity: 1;
   }
   .control-section-header:hover {
       background: rgba(255, 215, 0, 0.04);
       padding-left: calc(var(--spacing-xl) + 4px);
   }
   .control-section-header h3 {
       margin: 0;
       font-size: var(--font-size-base);
       font-weight: var(--font-weight-semibold);
       color: var(--text-primary);
       text-transform: uppercase;
       letter-spacing: 1.2px;
       font-family: var(--font-display);
       display: flex;
       align-items: center;
       gap: var(--spacing-sm);
   }
   .control-section-header i {
       transition: transform 0.3s ease;
       color: rgba(255, 215, 0, 0.6);
   }
   .control-section.active .control-section-header i {
       transform: rotate(180deg);
   }
   .control-group {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
       gap: 0;
       padding: 0 24px;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                   padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                   padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                   gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .control-section.active .control-group {
       max-height: 800px;
       padding: 20px 24px;
       gap: 12px;
   }
      .control-section:not(.active) .control-group {
       max-height: 0 !important;
       padding-top: 0 !important;
       padding-bottom: 0 !important;
       gap: 0 !important;
   }
   .controls button {
       padding: var(--spacing-md) var(--spacing-lg);
       border: 2px solid var(--border-color);
       background: var(--bg-card);
       color: var(--text-secondary);
       cursor: pointer;
       border-radius: var(--radius-lg);
       font-size: var(--font-size-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-sm);
       transition: all var(--transition-base);
       font-weight: var(--font-weight-medium);
       position: relative;
       overflow: hidden;
       backdrop-filter: blur(10px);
       letter-spacing: 0.4px;
       font-family: var(--font-primary);
   }
   .controls button::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255,215,0,0.15), transparent);
       transition: left 0.5s ease;
   }
   .controls button:hover::before {
       left: 100%;
   }
   .controls button:hover {
       background: var(--bg-card-hover);
       border-color: var(--border-color-active);
       transform: translateY(-3px);
       box-shadow: var(--shadow-lg), var(--shadow-glow);
       color: var(--color-primary);
   }


   /* Control Button - Drawing */
   .controls button[id*="Drawing"],
   .controls button[id*="drawing"] {
       background: linear-gradient(135deg,
           rgba(255, 20, 147, 0.25),
           rgba(255, 69, 0, 0.2),
           rgba(255, 215, 0, 0.2),
           rgba(50, 205, 50, 0.15)) !important;
       background-size: 300% 300% !important;
       border: 2px solid rgba(255, 20, 147, 0.5) !important;
       color: #FF1493 !important;
       box-shadow:
           0 4px 15px rgba(255, 20, 147, 0.3),
           0 0 15px rgba(255, 69, 0, 0.25),
           0 0 20px rgba(255, 215, 0, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
       animation: drawingGradient 5s ease infinite, controlDrawingPulse 2.5s ease-in-out infinite !important;
   }
   .controls button[id*="Drawing"] i,
   .controls button[id*="drawing"] i {
       color: #FF1493 !important;
       filter: drop-shadow(0 0 6px rgba(255, 20, 147, 0.9))
               drop-shadow(0 0 10px rgba(255, 69, 0, 0.7)) !important;
       animation: drawingIconBrush 2.5s ease-in-out infinite !important;
   }
   .controls button[id*="Drawing"]:hover,
   .controls button[id*="drawing"]:hover {
       background: linear-gradient(135deg,
           rgba(255, 20, 147, 0.4),
           rgba(255, 69, 0, 0.35),
           rgba(255, 215, 0, 0.3),
           rgba(50, 205, 50, 0.25)) !important;
       border-color: rgba(255, 20, 147, 0.8) !important;
       box-shadow:
           0 6px 25px rgba(255, 20, 147, 0.5),
           0 0 25px rgba(255, 69, 0, 0.4),
           0 0 30px rgba(255, 215, 0, 0.35),
           inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
       color: #FF69B4 !important;
       transform: translateY(-4px) scale(1.05) !important;
   }
   .controls button[id*="Drawing"]:hover i,
   .controls button[id*="drawing"]:hover i {
       transform: scale(1.25) rotate(-10deg) !important;
       color: #FF69B4 !important;
   }
   @keyframes controlDrawingPulse {
       0%, 100% { 
           box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3),
                       0 0 15px rgba(255, 69, 0, 0.25),
                       0 0 20px rgba(255, 215, 0, 0.2),
                       inset 0 1px 0 rgba(255, 255, 255, 0.2);
       }
       50% { 
           box-shadow: 0 6px 25px rgba(255, 20, 147, 0.5),
                       0 0 25px rgba(255, 69, 0, 0.4),
                       0 0 30px rgba(255, 215, 0, 0.35),
                       inset 0 1px 0 rgba(255, 255, 255, 0.3);
       }
   }
   .controls button i {
       transition: transform var(--transition-base);
   }
   .controls button:hover i {
       transform: scale(1.15);
   }
   .controls button:active {
       transform: translateY(0);
   }
   .games-grid-container {
       width: 100%;
       margin: 30px 0 30px 0;
       padding: 30px;
       position: relative;
       z-index: 10;
       box-sizing: border-box;
   }
   .games-grid-header {
       text-align: center;
       margin-bottom: var(--spacing-2xl);
       padding: var(--spacing-2xl);
       background: var(--bg-glass);
       backdrop-filter: blur(30px) saturate(180%);
       border-radius: var(--radius-2xl);
       border: 2px solid var(--border-color);
       position: relative;
       overflow: visible;
       box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
       transition: all var(--transition-base);
   }
   .games-grid-header:hover {
       border-color: var(--border-color-hover);
       box-shadow: var(--shadow-xl), var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
   }
   .games-grid-header::before {
       content: '';
       position: absolute;
       inset: 8px 16px auto 16px;
       height: 12px;
       background: linear-gradient(90deg, rgba(255, 215, 0, 0) 0%, rgba(255, 215, 0, 0.4) 25%, rgba(255, 165, 0, 0.45) 50%, rgba(255, 215, 0, 0.4) 75%, rgba(255, 215, 0, 0) 100%);
       border-radius: 12px;
       filter: drop-shadow(0 4px 14px rgba(255, 215, 0, 0.35));
       animation: shimmer 4s ease-in-out infinite;
       z-index: 2;
       pointer-events: none;
   }
   .games-grid-header::after {
       content: '';
       position: absolute;
       bottom: -6px;
       left: 50%;
       width: 180px;
       height: 14px;
       transform: translateX(-50%);
       background: radial-gradient(circle, rgba(255, 215, 0, 0.45) 0%, rgba(255, 215, 0, 0) 70%);
       filter: blur(6px);
       opacity: 0.9;
       z-index: 1;
       pointer-events: none;
   }
   .games-grid-header h2 {
       font-size: var(--font-size-2xl);
       color: var(--color-primary);
       margin: 0 0 var(--spacing-md);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-md);
       font-family: var(--font-display);
       font-weight: var(--font-weight-bold);
       text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
   }
   .games-grid-header p {
       color: var(--text-secondary);
       font-size: var(--font-size-base);
       margin: 0;
       font-weight: var(--font-weight-medium);
   }
   .games-search-container {
       display: flex;
       gap: 20px;
       margin-bottom: 30px;
       align-items: center;
       flex-wrap: wrap;
       justify-content: center;
       max-width: 1400px;
       margin-left: auto;
       margin-right: auto;
       padding: 0 30px;
       box-sizing: border-box;
   }

/* Cosmic search bar styling */
.all-games-page .games-search-container {
   margin-bottom: 40px;
   padding: 0 30px;
}

.all-games-page .games-search-wrapper {
   position: relative;
   flex: 0 1 600px;
   min-width: 320px;
   max-width: 720px;
   box-sizing: border-box;
   background: linear-gradient(135deg,
       rgba(15, 23, 42, 0.9) 0%,
       rgba(30, 41, 59, 0.8) 100%);
   backdrop-filter: blur(20px);
   border: 2px solid rgba(99, 102, 241, 0.3);
   border-radius: 25px;
   padding: 4px;
   box-shadow:
       0 8px 32px rgba(0, 0, 0, 0.4),
       0 0 0 1px rgba(99, 102, 241, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
   transition: all 0.3s ease;
   overflow: hidden;
}

.all-games-page .games-search-wrapper::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
   animation: searchGlow 8s ease-in-out infinite;
   pointer-events: none;
}

.all-games-page .games-search-wrapper:hover {
   border-color: rgba(99, 102, 241, 0.5);
   box-shadow:
       0 12px 40px rgba(0, 0, 0, 0.5),
       0 0 0 1px rgba(99, 102, 241, 0.2),
       0 0 25px rgba(99, 102, 241, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.15);
   transform: translateY(-2px);
}

@keyframes searchGlow {
   0%, 100% { opacity: 0.2; transform: scale(1); }
   50% { opacity: 0.4; transform: scale(1.1); }
}

.all-games-page .games-search-icon {
   position: absolute;
   left: 25px;
   top: 50%;
   transform: translateY(-50%);
   color: rgba(99, 102, 241, 0.7);
   font-size: 20px;
   z-index: 2;
   filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
   transition: all 0.3s ease;
}

.all-games-page .games-search-wrapper:hover .games-search-icon {
   color: rgba(99, 102, 241, 0.9);
   transform: translateY(-50%) scale(1.1);
   filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.6));
}

.all-games-page .games-search-input {
   width: 100%;
   padding: 16px 20px 16px 60px;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: 20px;
   color: #e0e7ff;
   font-size: 16px;
   transition: all 0.3s ease;
   outline: none;
   font-family: var(--font-primary);
   font-weight: 500;
   position: relative;
   z-index: 1;
}

.all-games-page .games-search-input::placeholder {
   color: rgba(99, 102, 241, 0.5);
   font-weight: 400;
}

.all-games-page .games-search-input:focus {
   border-color: rgba(99, 102, 241, 0.6);
   background: rgba(255, 255, 255, 0.08);
   box-shadow:
       0 0 0 3px rgba(99, 102, 241, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
   transform: translateY(-1px);
}

.all-games-page .clear-search-btn {
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   background: linear-gradient(135deg,
       rgba(239, 68, 68, 0.2) 0%,
       rgba(220, 38, 38, 0.15) 100%);
   border: 1px solid rgba(239, 68, 68, 0.4);
   border-radius: 50%;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: #fca5a5;
   transition: all 0.3s ease;
   z-index: 2;
   box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.all-games-page .clear-search-btn:hover {
   background: linear-gradient(135deg,
       rgba(239, 68, 68, 0.3) 0%,
       rgba(220, 38, 38, 0.25) 100%);
   border-color: rgba(239, 68, 68, 0.6);
   box-shadow:
       0 4px 12px rgba(239, 68, 68, 0.3),
       0 0 15px rgba(239, 68, 68, 0.2);
   transform: translateY(-50%) scale(1.1) rotate(90deg);
   color: #fecaca;
}
   .games-search-wrapper {
       position: relative;
       flex: 0 1 600px;
       min-width: 320px;
       max-width: 720px;
       box-sizing: border-box;
   }
   @media (max-width: 768px) {
       .games-search-container {
           padding: 0 15px !important;
           gap: 15px !important;
           margin-bottom: 20px !important;
           justify-content: center !important;
       }
       .games-search-wrapper {
           min-width: 100% !important;
           max-width: 100% !important;
       }
       .games-categories {
           justify-content: center !important;
           padding: 0 15px !important;
       }
   }
   @media (max-width: 480px) {
       .games-search-container {
           padding: 0 10px !important;
           gap: 10px !important;
           justify-content: center !important;
       }
       .games-categories {
           justify-content: center !important;
           padding: 0 10px !important;
       }
   }
   .games-search-icon {
       position: absolute;
       left: 20px;
       top: 50%;
       transform: translateY(-50%);
       color: rgba(255, 215, 0, 0.6);
       font-size: 18px;
       z-index: 1;
       pointer-events: none;
   }
   .games-search-input {
       width: 100%;
       padding: var(--spacing-md) var(--spacing-2xl) var(--spacing-md) 55px;
       background: var(--bg-glass);
       backdrop-filter: blur(10px);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-lg);
       color: var(--color-primary);
       font-size: var(--font-size-base);
       transition: all var(--transition-base);
       outline: none;
       font-family: var(--font-primary);
       font-weight: var(--font-weight-medium);
   }
   .games-search-input::placeholder {
       color: rgba(255, 215, 0, 0.4);
   }
   .games-search-input:focus {
       border-color: var(--border-color-active);
       box-shadow: var(--shadow-glow);
       background: var(--bg-glass-strong);
       transform: translateY(-1px);
   }
   .clear-search-btn {
       position: absolute;
       right: var(--spacing-md);
       top: 50%;
       transform: translateY(-50%);
       background: var(--bg-glass);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-full);
       width: 32px;
       height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: var(--color-primary);
       transition: all var(--transition-base);
       z-index: 2;
   }
   .clear-search-btn:hover {
       background: var(--bg-card-hover);
       border-color: var(--border-color-active);
       transform: translateY(-50%) scale(1.1);
       box-shadow: var(--shadow-glow);
   }
   .clear-search-btn:hover {
       background: rgba(255, 215, 0, 0.4);
       transform: translateY(-50%) scale(1.1);
   }
   .default-game-btn {
       padding: var(--spacing-md) var(--spacing-xl);
       background: var(--bg-glass);
       backdrop-filter: blur(10px);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-lg);
       color: var(--color-primary);
       font-size: var(--font-size-base);
       font-weight: var(--font-weight-semibold);
       cursor: pointer;
       transition: all var(--transition-base);
       display: flex;
       align-items: center;
       gap: var(--spacing-sm);
       white-space: nowrap;
       font-family: var(--font-display);
       position: relative;
       overflow: hidden;
   }
   .default-game-btn::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
       opacity: 0;
       transition: opacity var(--transition-base);
   }
   .default-game-btn:hover {
       background: var(--bg-card-hover);
       border-color: var(--border-color-active);
       box-shadow: var(--shadow-glow);
       transform: translateY(-3px);
       color: var(--color-primary);
   }
   .default-game-btn:hover::before {
       opacity: 1;
   }
   .default-game-btn:active {
       transform: translateY(-1px);
   }
   .default-game-btn:active {
       transform: translateY(0);
   }
   .games-categories {
       display: flex;
       gap: 15px;
       margin-bottom: 25px;
       flex-wrap: wrap;
       justify-content: center;
       max-width: 1400px;
       margin-left: auto;
       margin-right: auto;
       padding: 0 30px;
   }

/* Cosmic category buttons styling */
.all-games-page .games-categories {
   margin-bottom: 35px;
   padding: 0 30px;
   gap: 12px;
}

.all-games-page .category-btn {
   padding: 14px 24px;
   background: linear-gradient(135deg,
       rgba(15, 23, 42, 0.8) 0%,
       rgba(30, 41, 59, 0.7) 100%);
   backdrop-filter: blur(15px);
   border: 2px solid rgba(99, 102, 241, 0.3);
   border-radius: 20px;
   color: rgba(224, 231, 255, 0.8);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-display);
   position: relative;
   overflow: hidden;
   box-shadow:
       0 4px 16px rgba(0, 0, 0, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.all-games-page .category-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg,
       transparent,
       rgba(99, 102, 241, 0.2),
       transparent);
   transition: left 0.5s ease;
}

.all-games-page .category-btn:hover::before {
   left: 100%;
}

.all-games-page .category-btn:hover {
   background: linear-gradient(135deg,
       rgba(30, 41, 59, 0.9) 0%,
       rgba(15, 23, 42, 0.85) 100%);
   border-color: rgba(99, 102, 241, 0.5);
   color: #e0e7ff;
   transform: translateY(-3px) scale(1.02);
   box-shadow:
       0 8px 25px rgba(0, 0, 0, 0.4),
       0 0 20px rgba(99, 102, 241, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.all-games-page .category-btn.active {
   background: linear-gradient(135deg,
       rgba(99, 102, 241, 0.3) 0%,
       rgba(168, 85, 247, 0.25) 100%);
   border-color: rgba(99, 102, 241, 0.6);
   color: #c7d2fe;
   box-shadow:
       0 6px 20px rgba(99, 102, 241, 0.3),
       0 0 25px rgba(168, 85, 247, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.2);
   font-weight: 700;
   text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.all-games-page .category-btn.active::after {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: linear-gradient(45deg,
       rgba(99, 102, 241, 0.4),
       rgba(168, 85, 247, 0.4),
       rgba(99, 102, 241, 0.4));
   border-radius: 22px;
   z-index: -1;
   animation: activeGlow 2s ease-in-out infinite alternate;
}

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

.all-games-page .category-btn i {
   color: rgba(99, 102, 241, 0.7);
   font-size: 16px;
   transition: all 0.3s ease;
   filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.3));
}

.all-games-page .category-btn:hover i {
   color: rgba(99, 102, 241, 0.9);
   transform: scale(1.1) rotate(5deg);
   filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
}

.all-games-page .category-btn.active i {
   color: #a855f7;
   filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
}
   .category-btn {
       padding: var(--spacing-md) var(--spacing-xl);
       background: var(--bg-glass);
       backdrop-filter: blur(10px);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-lg);
       color: var(--text-tertiary);
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-semibold);
       cursor: pointer;
       transition: all var(--transition-base);
       display: flex;
       align-items: center;
       gap: var(--spacing-sm);
       font-family: var(--font-display);
       position: relative;
       overflow: hidden;
   }
   .category-btn::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
       opacity: 0;
       transition: opacity var(--transition-base);
   }
   .category-btn:hover {
       background: var(--bg-card-hover);
       border-color: var(--border-color-hover);
       color: var(--color-primary);
       transform: translateY(-3px);
       box-shadow: var(--shadow-md);
   }
   .category-btn:hover::before {
       opacity: 1;
   }
   .category-btn.active {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
       border-color: var(--border-color-active);
       color: var(--color-primary);
       box-shadow: var(--shadow-glow);
       font-weight: var(--font-weight-bold);
   }
   .category-btn.active::before {
       opacity: 1;
   }
   .category-btn.active:hover {
       transform: translateY(-2px);
   }
   .games-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
       gap: var(--spacing-xl);
       padding: var(--spacing-xl) 0;
   }
   /* Search results grid on main page - bigger cubes, smaller gap */
#searchResultsGrid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 8px !important;
}
#searchResultsGrid .big-game-cube {
    min-width: 200px !important;
    max-width: 240px !important;
    width: 100% !important;
}
   .games-grid .game-cube-rating {
       display: flex !important;
       visibility: visible !important;
   }
   .games-grid .game-cube-stars {
       display: flex !important;
       visibility: visible !important;
   }
   .games-grid .game-cube-stars .fa-star {
       display: inline-block !important;
       visibility: visible !important;
       opacity: 1 !important;
   }
   .all-games-page .games-grid {
       grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
       grid-auto-rows: minmax(200px, auto);
       padding-bottom: var(--spacing-2xl);
       gap: 12px;
       width: 100%;
       margin: 0 auto;
   }
   .all-games-page .games-grid .big-game-cube {
       width: 100% !important;
       min-width: 180px !important;
       max-width: 100% !important;
       aspect-ratio: 1;
       height: auto;
   }
.all-games-page #categorySidePanel {
       position: fixed;
       top: 50%;
       left: 0;
       bottom: auto;
       transform: translateY(-50%);
       overflow-y: auto;
       padding-bottom: 20px;
}
.all-games-page .category-panel-content,
.all-games-page .category-panel-nav {
       display: flex;
       flex-direction: column;
       gap: 6px;
}
   @media (min-width: 1920px) {
       .all-games-page .games-grid {
           gap: 16px;
       }
   }
   @media (min-width: 2560px) {
       .all-games-page .games-grid {
           gap: 20px;
       }
   }
   .all-games-page .game-cube {
       min-height: 240px;
   }
   .all-games-page .game-cube-inner {
       padding-bottom: 32px;
   }
   .all-games-page .game-cube-rating {
       min-height: 72px;
   }

/* Futuristic game cards styling */
.all-games-page .game-cube-inner {
   background: linear-gradient(135deg,
       rgba(15, 23, 42, 0.9) 0%,
       rgba(30, 41, 59, 0.8) 50%,
       rgba(15, 23, 42, 0.9) 100%);
   backdrop-filter: blur(20px);
   border: 2px solid rgba(99, 102, 241, 0.3);
   border-radius: 24px;
   padding: 16px;
   box-shadow:
       0 8px 32px rgba(0, 0, 0, 0.4),
       0 0 0 1px rgba(99, 102, 241, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
   position: relative;
   overflow: hidden;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.all-games-page .game-cube-inner::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
   animation: cardCosmicDrift 12s ease-in-out infinite;
   pointer-events: none;
   z-index: 0;
}

@keyframes cardCosmicDrift {
   0%, 100% { opacity: 0.3; transform: scale(1) rotate(0deg); }
   50% { opacity: 0.6; transform: scale(1.2) rotate(5deg); }
}

.all-games-page .game-cube:hover .game-cube-inner {
   transform: translateY(-8px) rotateX(5deg) rotateY(5deg) scale(1.02);
   border-color: rgba(99, 102, 241, 0.5);
   box-shadow:
       0 20px 50px rgba(0, 0, 0, 0.5),
       0 0 30px rgba(99, 102, 241, 0.3),
       0 0 40px rgba(168, 85, 247, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.all-games-page .game-cube:hover .game-cube-inner::after {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: linear-gradient(45deg,
       rgba(99, 102, 241, 0.4),
       rgba(168, 85, 247, 0.4),
       rgba(59, 130, 246, 0.4),
       rgba(99, 102, 241, 0.4));
   border-radius: 26px;
   z-index: -1;
   animation: cardBorderGlow 2s ease-in-out infinite alternate;
}

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

.all-games-page .game-cube-image {
   width: 100%;
   min-height: 180px;
   height: 180px;
   max-height: 180px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 16px;
   filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.3));
   transition: all 0.4s ease;
   position: relative;
   z-index: 1;
   border: 1px solid rgba(99, 102, 241, 0.2);
}

.all-games-page .game-cube:hover .game-cube-image {
   transform: scale(1.08) rotate(2deg);
   filter: drop-shadow(0 8px 20px rgba(99, 102, 241, 0.5));
   border-color: rgba(99, 102, 241, 0.4);
}

.all-games-page .game-cube-title {
   font-size: 14px;
   font-weight: 700;
   color: #e0e7ff;
   text-align: center;
   line-height: 1.4;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
   word-wrap: break-word;
   max-width: 100%;
   transition: all 0.3s ease;
   margin-bottom: 12px;
   position: relative;
   z-index: 2;
   font-family: var(--font-display);
}

.all-games-page .game-cube:hover .game-cube-title {
   color: #c7d2fe;
   text-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
   transform: translateY(-2px);
}

.all-games-page .game-cube-rating {
   margin-top: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   z-index: 10;
   position: relative;
   width: 100%;
   padding: 12px 8px 10px 8px;
   flex-shrink: 0;
   min-height: 70px;
   background: rgba(255, 255, 255, 0.02);
   border-radius: 12px;
   border: 1px solid rgba(99, 102, 241, 0.15);
   backdrop-filter: blur(8px);
   transition: all 0.3s ease;
}

.all-games-page .game-cube:hover .game-cube-rating {
   background: rgba(99, 102, 241, 0.05);
   border-color: rgba(99, 102, 241, 0.3);
   box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
   transform: translateY(-2px);
}

.all-games-page .game-cube-stars {
   display: flex;
   gap: 6px;
   align-items: center;
   justify-content: center;
   flex-wrap: nowrap;
   width: 100%;
   padding: 0 4px;
   box-sizing: border-box;
   min-height: 24px;
   transition: all 0.3s ease;
   position: relative;
   z-index: 2;
}

.all-games-page .game-cube-stars .fa-star {
   font-size: 18px;
   color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
   padding: 4px;
   display: inline-block;
   width: auto;
   height: auto;
   line-height: 1;
   user-select: none;
   -webkit-user-select: none;
   pointer-events: auto;
}

.all-games-page .game-cube-stars .fa-star:hover {
   color: rgba(99, 102, 241, 0.8);
   transform: scale(1.3) rotate(10deg);
   filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.6));
}

.all-games-page .game-cube-stars .fa-star.active {
   color: #a855f7;
   filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8));
   animation: starPulse 1.5s ease-in-out infinite;
}

@keyframes starPulse {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(1.1); }
}

.all-games-page .game-cube-rating-text {
   font-size: 12px;
   color: rgba(224, 231, 255, 0.7);
   font-weight: 600;
   text-align: center;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
   visibility: visible !important;
   opacity: 1 !important;
   display: block !important;
   transition: all 0.3s ease;
   position: relative;
   z-index: 2;
}

.all-games-page .game-cube:hover .game-cube-rating-text {
    color: rgba(199, 210, 254, 0.9);
    text-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

/* Enhanced spacing and layout for better visual hierarchy */

/* === CENTER THE ENTIRE ALL-GAMES LAYOUT === */

.all-games-page .games-grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;          /* Centers children horizontally */
    justify-content: flex-start;
    width: 100%;
    margin: 20px 0 40px 0;
    padding: 40px 30px;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

/* Center the search bar */
.games-search-container,
.games-search-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Make the search input centered + fixed reasonable width */
.games-search-input {
    width: 60%;
    max-width: 500px;
    min-width: 250px;
}

/* Center the category buttons */
.games-categories {
    width: 100%;
    display: flex;
    justify-content: center;      /* Center categories */
    flex-wrap: wrap;
    gap: 10px;
}

/* Center the games grid */
#gamesGrid {
    width: 100%;
    display: grid;
    justify-content: center;      /* Center the game cards */
}

.all-games-page .games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.all-games-page .games-grid-container::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background: linear-gradient(90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.4) 20%,
    rgba(168, 85, 247, 0.4) 50%,
    rgba(99, 102, 241, 0.4) 80%,
    transparent 100%);
border-radius: 1px;
opacity: 0.6;
}

.all-games-page .games-grid-container::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: linear-gradient(90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.3) 50%,
    transparent 100%);
border-radius: 1px;
opacity: 0.4;
}

/* Load more button styling */
.all-games-page .load-more-container {
display: flex;
justify-content: center;
margin: 50px 0;
padding: 30px;
}

.all-games-page .load-more-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.2) 0%,
    rgba(168, 85, 247, 0.15) 100%);
border: 2px solid rgba(99, 102, 241, 0.4);
border-radius: 25px;
color: #c7d2fe;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
font-family: var(--font-display);
position: relative;
overflow: hidden;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.all-games-page .load-more-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
    transparent,
    rgba(99, 102, 241, 0.2),
    transparent);
transition: left 0.5s ease;
}

.all-games-page .load-more-btn:hover::before {
left: 100%;
}

.all-games-page .load-more-btn:hover {
background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.3) 0%,
    rgba(168, 85, 247, 0.25) 100%);
border-color: rgba(99, 102, 241, 0.6);
transform: translateY(-3px) scale(1.02);
box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
color: #e0e7ff;
}

.all-games-page .load-more-btn i {
font-size: 18px;
transition: transform 0.3s ease;
}

.all-games-page .load-more-btn:hover i {
transform: translateX(3px);
}

/* Smooth animations and transitions throughout */
.all-games-page * {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
.all-games-page .games-grid-container {
    padding: 20px 15px;
    margin: 15px 0 30px 0;
}

.all-games-page .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    padding: 15px 0;
}

.all-games-page .page-header {
    margin: 15px 15px;
    padding: 15px 20px;
}

.all-games-page .page-header h1 {
    font-size: 2rem;
}

.all-games-page .games-search-container,
.all-games-page .games-categories {
    padding: 0 15px;
}
}

@media (max-width: 480px) {
.all-games-page .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.all-games-page .games-grid-container {
    padding: 15px 10px;
}

.all-games-page .page-header {
    margin: 10px 10px;
    padding: 12px 16px;
}

.all-games-page .page-header h1 {
    font-size: 1.8rem;
}
}

/* ===== BLUE GALAXY THEME FOR ALL GAMES PAGE ===== */

/* Background with blue galaxy gradient and starfield */
.all-games-page {
    background: linear-gradient(135deg,
        #0a0a1a 0%,
        #1a0a2e 25%,
        #0d1b2a 50%,
        #1b263b 75%,
        #0a0a1a 100%);
    background-attachment: scroll;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
}

.all-games-page::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-image:
       radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
       radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.2) 0%, transparent 50%),
       radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.25) 0%, transparent 50%);
   background-size: 400px 400px, 300px 300px, 500px 500px;
   background-position: 0% 0%, 100% 100%, 50% 50%;
   animation: galaxyDrift 20s ease-in-out infinite;
   pointer-events: none;
   z-index: -1;
}

.all-games-page::after {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-image:
       radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.8), transparent 1px),
       radial-gradient(1px 1px at 40px 70px, rgba(173, 216, 230, 0.6), transparent 1px),
       radial-gradient(1.5px 1.5px at 90px 40px, rgba(255, 182, 193, 0.7), transparent 1px),
       radial-gradient(1px 1px at 160px 90px, rgba(255, 255, 255, 0.9), transparent 1px),
       radial-gradient(2px 2px at 220px 60px, rgba(173, 216, 230, 0.5), transparent 1px);
   background-size: 250px 250px;
   animation: starTwinkle 8s ease-in-out infinite alternate;
   pointer-events: none;
   z-index: -1;
}

@keyframes galaxyDrift {
   0%, 100% {
       background-position: 0% 0%, 100% 100%, 50% 50%;
       opacity: 0.6;
   }
   50% {
       background-position: 10% 10%, 90% 90%, 60% 40%;
       opacity: 0.8;
   }
}

@keyframes starTwinkle {
   0%, 100% {
       opacity: 0.4;
       transform: scale(1);
   }
   50% {
       opacity: 0.7;
       transform: scale(1.05);
   }
}
  .game-cube {
      min-height: 320px;
      perspective: 1200px;
      cursor: pointer;
      animation: cubeFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
      overflow: visible;
      display: flex;
      align-items: stretch;
  }
   @keyframes cubeFadeIn {
       from {
           opacity: 0;
           transform: translateY(40px) rotateX(-20deg) scale(0.9);
       }
       to {
           opacity: 1;
           transform: translateY(0) rotateX(0) scale(1);
       }
   }
  .game-cube-inner {
      width: 100%;
      min-height: 100%;
      height: auto;
      position: relative;
      transform-style: preserve-3d;
      transition: all var(--transition-slow);
      background: var(--bg-glass);
      backdrop-filter: blur(30px) saturate(180%);
      border-radius: var(--radius-2xl);
      border: 2px solid var(--border-color);
      padding: 14px 14px 20px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      overflow: visible;
  }
   .game-cube-inner::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
       opacity: 0;
       transition: opacity var(--transition-base);
       z-index: 0;
   }
   .game-cube:hover .game-cube-inner {
       transform: translateY(-12px) rotateX(8deg) rotateY(8deg) scale(1.02);
       border-color: var(--border-color-active);
       box-shadow: var(--shadow-xl), var(--shadow-glow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.1);
       background: var(--bg-card-hover);
   }
   .game-cube:hover .game-cube-inner::before {
       opacity: 1;
   }
   .game-cube:active .game-cube-inner {
       transform: translateY(-5px) scale(0.98);
   }
   .game-cube-image {
       width: 100%;
       min-height: 160px;
       height: 160px;
       max-height: 160px;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       border-radius: 12px;
       filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4));
       transition: all 0.3s ease;
       animation: imageFloat 3s ease-in-out infinite;
       margin-bottom: 0;
       flex-shrink: 0;
   }
   .all-games-page .game-cube-image {
       min-height: 250px;
       height: 250px;
       max-height: 250px;
   }
   @keyframes imageFloat {
       0%, 100% { transform: translateY(0) scale(1); }
       50% { transform: translateY(-5px) scale(1.02); }
   }
   .game-cube:hover .game-cube-image {
       transform: scale(1.1);
       filter: drop-shadow(0 6px 12px rgba(255, 215, 0, 0.6));
   }
   .game-cube-title {
       font-size: 13px;
       font-weight: 600;
       color: #FFD700;
       text-align: center;
       line-height: 1.3;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
       word-wrap: break-word;
       max-width: 100%;
       transition: all 0.3s ease;
       margin-bottom: 8px;
       flex-shrink: 0;
       position: relative;
       z-index: 2;
   }
   .game-cube:hover .game-cube-title {
       color: #fff !important;
       text-shadow: 0 2px 12px rgba(255, 215, 0, 0.8) !important;
       transform: none !important;
       text-align: left !important;
       position: absolute !important;
       top: 8px !important;
       left: 12px !important;
       margin: 0 !important;
       max-width: calc(100% - 80px) !important;
       font-size: 14px !important;
       font-weight: 700 !important;
       z-index: 15 !important;
   }
   .game-cube-rating {
      margin-top: auto;
      display: flex !important;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 10;
      position: relative;
      width: 100%;
      padding: 10px 6px 8px 6px;
      flex-shrink: 0;
      min-height: 60px;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto;
      transition: all 0.3s ease;
  }
   .game-cube:hover .game-cube-rating {
       margin-top: 0 !important;
       padding: 0 !important;
       min-height: auto !important;
       position: absolute !important;
       top: 8px !important;
       right: 12px !important;
       align-items: flex-end !important;
       width: auto !important;
       background: none !important;
       flex-direction: row !important;
       gap: 4px !important;
       z-index: 15 !important;
   }
   /* Hide rating text on hover, show only stars */
   .game-cube:hover .game-cube-rating-text {
       display: none !important;
   }
   /* Style the "New" span in rating overlay */
   .game-cube-rating span {
       font-size: 12px;
       color: rgba(255, 215, 0, 0.8);
       font-weight: 600;
   }
   .game-cube:hover .game-cube-rating span {
       display: inline-block;
       color: #FFD700 !important;
       text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
   }
   .game-cube-stars {
       display: flex !important;
       gap: 4px;
       align-items: center;
       justify-content: center;
       flex-wrap: nowrap;
       width: 100%;
       padding: 0 2px;
       box-sizing: border-box;
       visibility: visible !important;
       opacity: 1 !important;
       min-height: 20px;
       transition: all 0.3s ease;
       position: relative;
       z-index: 2;
   }
   .game-cube:hover .game-cube-stars {
       position: static !important;
       width: auto !important;
       justify-content: flex-end !important;
       padding: 0 !important;
       min-height: auto !important;
   }
   .game-cube-stars .fa-star {
       font-size: 16px;
       color: rgba(255, 255, 255, 0.6);
       cursor: pointer;
       transition: all 0.2s ease;
       filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
       padding: 4px;
       display: inline-block !important;
       visibility: visible !important;
       opacity: 1 !important;
       width: auto;
       height: auto;
       line-height: 1;
       user-select: none;
       -webkit-user-select: none;
       pointer-events: auto;
   }
   .game-cube-stars .fa-star:hover {
       color: rgba(255, 215, 0, 1);
       transform: scale(1.4);
       filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
   }
   .game-cube-stars .fa-star:active {
       transform: scale(1.2);
   }
   .game-cube-stars .fa-star.active {
       color: #FFD700;
       filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
   }
   .game-cube-rating-text {
       font-size: 11px;
       color: rgba(255, 255, 255, 0.8);
       font-weight: 600;
       text-align: center;
       text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
       visibility: visible !important;
       opacity: 1 !important;
       display: block !important;
       transition: all 0.3s ease;
   }
   .game-cube:hover .game-cube-rating-text {
       display: none !important;
   }
   .game-cube-description {
       font-size: 11px;
       color: rgba(255, 255, 255, 0.6);
       line-height: 1.4;
       margin: 8px 0;
       padding: 0 8px;
       flex-shrink: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       text-align: center;
       max-height: 50px;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       line-clamp: 3;
       -webkit-box-orient: vertical;
       flex-shrink: 1;
       opacity: 0;
       max-height: 0;
       transition: all 0.3s ease;
       position: relative;
       z-index: 2;
   }
   .game-cube:hover .game-cube-description {
       opacity: 1 !important;
       max-height: 100px !important;
       margin: 0 !important;
       padding: 12px 12px 8px 12px !important;
       text-align: left !important;
       position: absolute !important;
       top: 45px !important;
       left: 0 !important;
       right: 0 !important;
       bottom: auto !important;
       -webkit-line-clamp: 4 !important;
       line-clamp: 4 !important;
       background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.6) 100%) !important;
       border-radius: 0 0 16px 16px !important;
       z-index: 12 !important;
   }
   /* Add divider before description on hover */
   .game-cube:hover .game-cube-description::before {
       content: '';
       position: absolute;
       top: 0;
       left: 12px;
       right: 12px;
       height: 1px;
       background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);
       margin-bottom: 8px;
   }
   .game-cube-glow {
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
       opacity: 0;
       transition: opacity 0.4s ease;
       pointer-events: none;
       animation: glowRotate 8s linear infinite;
   }
  @media (max-width: 768px) {
      .game-cube {
          min-height: 280px;
      }
      .game-cube-inner {
          padding: 12px 12px 16px 12px;
          gap: 6px;
      }
      .game-cube-rating {
          min-height: 52px;
          padding: 8px 4px 6px 4px;
      }
  }
  @media (max-width: 480px) {
      .game-cube {
          min-height: 250px;
      }
      .game-cube-inner {
          padding: 10px 10px 14px 10px;
      }
  }
   @media (max-width: 1024px) {
       .all-games-page .games-grid {
           grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
           gap: 12px;
       }
       .all-games-page .games-grid .big-game-cube {
           min-width: 160px !important;
       }
       .all-games-page .page-container {
           margin-left: 200px;
           width: calc(100% - 200px);
           display: flex;
           flex-direction: column;
           align-items: center;
       }
   
   /* Cosmic header styling */
   .all-games-page .page-header {
       background: linear-gradient(135deg,
           rgba(15, 23, 42, 0.95) 0%,
           rgba(30, 41, 59, 0.9) 50%,
           rgba(15, 23, 42, 0.95) 100%);
       backdrop-filter: blur(20px);
       border: 1px solid rgba(99, 102, 241, 0.3);
       border-radius: 20px;
       margin: 20px 30px;
       padding: 20px 30px;
       box-shadow:
           0 8px 32px rgba(0, 0, 0, 0.4),
           0 0 0 1px rgba(99, 102, 241, 0.1),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
       position: relative;
       overflow: hidden;
   }
   
   .all-games-page .page-header::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
       animation: headerGlow 6s ease-in-out infinite;
       pointer-events: none;
   }
   
   .all-games-page .page-header::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 2px;
       background: linear-gradient(90deg,
           transparent 0%,
           rgba(99, 102, 241, 0.6) 20%,
           rgba(168, 85, 247, 0.6) 50%,
           rgba(99, 102, 241, 0.6) 80%,
           transparent 100%);
       animation: headerBorderFlow 4s ease-in-out infinite;
   }
   
   @keyframes headerGlow {
       0%, 100% { opacity: 0.3; transform: scale(1); }
       50% { opacity: 0.6; transform: scale(1.1); }
   }
   
   @keyframes headerBorderFlow {
       0%, 100% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
   }
   
   .all-games-page .page-header h1 {
       color: #e0e7ff;
       font-size: 2.5rem;
       font-weight: 800;
       text-shadow:
           0 0 20px rgba(99, 102, 241, 0.5),
           0 2px 4px rgba(0, 0, 0, 0.5);
       margin: 0;
       display: flex;
       align-items: center;
       gap: 15px;
       position: relative;
       z-index: 2;
   }
   
   .all-games-page .page-header h1 i {
       color: #a855f7;
       font-size: 2rem;
       filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
       animation: iconPulse 3s ease-in-out infinite;
   }
   
   @keyframes iconPulse {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.1); }
   }
   
   .all-games-page .header-icon-btn {
       background: linear-gradient(135deg,
           rgba(99, 102, 241, 0.2) 0%,
           rgba(168, 85, 247, 0.15) 100%);
       border: 1px solid rgba(99, 102, 241, 0.4);
       color: #c7d2fe;
       box-shadow:
           0 4px 12px rgba(99, 102, 241, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
       transition: all 0.3s ease;
   }
   
   .all-games-page .header-icon-btn:hover {
       background: linear-gradient(135deg,
           rgba(99, 102, 241, 0.3) 0%,
           rgba(168, 85, 247, 0.25) 100%);
       border-color: rgba(99, 102, 241, 0.6);
       box-shadow:
           0 6px 20px rgba(99, 102, 241, 0.4),
           0 0 20px rgba(168, 85, 247, 0.3),
           inset 0 1px 0 rgba(255, 255, 255, 0.15);
       transform: translateY(-2px) scale(1.05);
   }
   }
   @media (max-width: 768px) {
       .all-games-page .page-container {
           margin-left: 0;
           width: 100%;
       }
       .all-games-page header {
           margin-left: 0;
           width: 100%;
       }
       .all-games-page #visitorCounter {
           margin-left: 0;
           width: 100%;
       }
       .all-games-page .games-grid {
           grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
           gap: 10px;
       }
       .all-games-page .games-grid .big-game-cube {
           min-width: 150px !important;
       }
       .all-games-page .game-cube {
           min-height: 210px;
       }
       .all-games-page .game-cube-inner {
           padding-bottom: 26px;
       }
       .all-games-page .game-cube-rating {
           min-height: 64px;
       }
       .all-games-page .game-cube-image {
           min-height: 160px;
           height: 160px;
           max-height: 160px;
       }
   }
   @media (max-width: 520px) {
       .all-games-page .games-grid {
           grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
           gap: 8px;
       }
       .all-games-page .games-grid .big-game-cube {
           min-width: 120px !important;
       }
       .all-games-page .game-cube {
           min-height: 190px;
       }
       .all-games-page .game-cube-image {
           min-height: 120px;
           height: 120px;
           max-height: 120px;
       }
   }
   @keyframes glowRotate {
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
   }
   @keyframes slideInItem {
       from {
           opacity: 0;
           transform: translateY(20px) scale(0.95);
       }
       to {
           opacity: 1;
           transform: translateY(0) scale(1);
       }
   }
   .game-cube:hover .game-cube-glow {
       opacity: 1;
   }
      .festive-game-cube {
       position: relative;
       border: 3px solid;
       border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24, #f0932b, #eb4d4b) 1;
       animation: festiveBorder 3s ease-in-out infinite;
       box-shadow: 0 0 20px rgba(255, 107, 107, 0.5), 0 0 40px rgba(78, 205, 196, 0.3);
   }
   @keyframes festiveBorder {
       0%, 100% { border-image-source: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24, #f0932b, #eb4d4b); }
       25% { border-image-source: linear-gradient(135deg, #4ecdc4, #45b7d1, #f9ca24, #f0932b, #eb4d4b, #ff6b6b); }
       50% { border-image-source: linear-gradient(225deg, #45b7d1, #f9ca24, #f0932b, #eb4d4b, #ff6b6b, #4ecdc4); }
       75% { border-image-source: linear-gradient(315deg, #f9ca24, #f0932b, #eb4d4b, #ff6b6b, #4ecdc4, #45b7d1); }
   }
   .festive-game-cube::before {
       content: '⭐';
       position: absolute;
       top: -10px;
       right: -10px;
       font-size: 24px;
       z-index: 10;
       animation: festiveSpin 2s linear infinite;
   }
   @keyframes festiveSpin {
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
   }

   /* DEV announcement strip (homepage) */
   /* Keep only the announcement container (no full-width bar behind it) */
   .dev-announcement-strip {
       width: 100%;
       margin: 22px 0 0;
       padding: 0;
       box-sizing: border-box;
       position: relative;
       overflow: visible;
       background: transparent;
       border: none;
   }
   .dev-announcement-strip::before,
   .dev-announcement-strip::after {
       content: none;
   }
   .dev-announcement-inner.glass-effect {
       max-width: 1400px;
       width: calc(100% - 40px);
       margin: 0;
       margin-left: 50%; /* match home centering */
       transform: translateX(-50%);
      padding: 12px 14px;
      border-radius: 18px;
       box-sizing: border-box;
       position: relative;
       z-index: 1;
       background:
           radial-gradient(circle at 10% 20%, rgba(0, 212, 255, 0.12), transparent 55%),
           radial-gradient(circle at 90% 0%, rgba(255, 215, 0, 0.10), transparent 55%),
           linear-gradient(150deg, rgba(15, 15, 25, 0.92), rgba(10, 12, 18, 0.86));
       border: 1px solid rgba(255, 255, 255, 0.12);
       box-shadow: var(--shadow-lg), 0 0 28px rgba(0, 212, 255, 0.06), 0 0 28px rgba(255, 215, 0, 0.05);
   }
   .dev-announcement-inner.glass-effect::before {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: inherit;
       padding: 1px;
       background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(255, 215, 0, 0.28), rgba(255, 255, 255, 0.08));
       -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       pointer-events: none;
       opacity: 0.55;
   }
   .dev-announcement-top {
       display: flex;
       align-items: center;
       justify-content: space-between;
      gap: 8px;
       flex-wrap: wrap;
   }
   .dev-announcement-title {
       display: inline-flex;
       align-items: center;
      gap: 10px;
       font-family: var(--font-display);
       font-weight: 900;
       letter-spacing: 0.10em;
       text-transform: uppercase;
       color: var(--text-primary);
   }
   .dev-announcement-title i {
      width: 32px;
      height: 32px;
      border-radius: 12px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: #0b0c12;
       background: linear-gradient(135deg, rgba(0, 212, 255, 0.95), rgba(255, 215, 0, 0.92));
       box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 22px rgba(0, 212, 255, 0.18);
   }
   .dev-announcement-title span {
       background: linear-gradient(90deg, rgba(255, 215, 0, 0.95), rgba(0, 212, 255, 0.95));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   .dev-announcement-subtitle {
       color: rgba(255, 255, 255, 0.78);
      font-size: 11px;
       letter-spacing: 0.10em;
       text-transform: uppercase;
       font-weight: 800;
      padding: 6px 9px;
       border-radius: var(--radius-full);
       background: rgba(255, 255, 255, 0.04);
       border: 1px solid rgba(255, 255, 255, 0.10);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
   }
   .dev-announcement-body {
      margin-top: 10px;
       display: flex;
       flex-direction: column;
      gap: 12px;
   }
   .dev-announcement-plans {
       position: relative;
       overflow: hidden;
      border-radius: 16px;
      padding: 10px 12px;
       background: linear-gradient(150deg, rgba(10, 12, 18, 0.88), rgba(18, 18, 28, 0.86));
       border: 1px solid rgba(255, 255, 255, 0.14);
       box-shadow: var(--shadow-md);
   }
   .dev-announcement-plans::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 4px;
       background: linear-gradient(180deg, rgba(255, 215, 0, 0.95), rgba(0, 212, 255, 0.85));
       opacity: 0.9;
   }
   .dev-announcement-plans-label {
       display: inline-flex;
       align-items: center;
       gap: 8px;
      font-size: 11px;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       font-weight: 900;
       color: rgba(255, 255, 255, 0.85);
       margin-bottom: 8px;
   }
   .dev-announcement-plans-list {
       margin: 0;
       padding-left: 18px;
       color: rgba(255, 255, 255, 0.90);
      font-size: 14px;
       font-weight: 600;
       line-height: 1.75;
       text-wrap: pretty;
   }
   .dev-announcement-plans-list li {
      margin: 6px 0;
   }
   .dev-announcement-body p {
       margin: 0;
       color: rgba(255, 255, 255, 0.82);
       font-size: 16px;
       line-height: 1.65;
   }
   .dev-announcement-grid {
       display: grid;
       grid-template-columns: 1fr 1.25fr;
      gap: 10px;
       align-items: start;
   }
   .dev-announcement-block {
       position: relative;
       overflow: hidden;
       background: rgba(255, 255, 255, 0.03);
       border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 16px;
      padding: 10px 12px;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
   }
   .dev-announcement-block::before {
       content: '';
       position: absolute;
       inset: -40%;
       background: radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.12), transparent 45%),
                   radial-gradient(circle at 70% 0%, rgba(255, 215, 0, 0.10), transparent 45%);
       filter: blur(60px);
       opacity: 0.55;
       pointer-events: none;
   }
   .dev-announcement-label {
      margin-bottom: 8px;
      font-size: 11px;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.80);
       font-weight: 900;
   }
   .dev-announcement-list {
       margin: 0;
       padding: 0;
       list-style: none;
       color: rgba(255, 255, 255, 0.80);
       display: grid;
      gap: 6px;
   }
   .dev-announcement-list li {
       position: relative;
      padding-left: 18px;
       margin: 0;
   }
   .dev-announcement-list li::before {
       content: '';
       position: absolute;
       left: 0;
      top: 8px;
      width: 9px;
      height: 9px;
       border-radius: 4px;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.90), rgba(0, 212, 255, 0.85));
       box-shadow: 0 0 18px rgba(255, 215, 0, 0.12), 0 0 18px rgba(0, 212, 255, 0.10);
   }
   .dev-announcement-links {
       margin: 0;
       padding: 0;
       list-style: none;
       display: flex;
       flex-direction: column;
      gap: 8px;
   }
   .dev-announcement-links li {
       display: flex;
       align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 14px;
       background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(255, 215, 0, 0.05));
       border: 1px solid rgba(255, 255, 255, 0.10);
       box-shadow: var(--shadow-sm);
       transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
   }
   .dev-announcement-links li:hover {
       transform: translateY(-1px);
       border-color: rgba(0, 212, 255, 0.22);
       box-shadow: var(--shadow-md), 0 0 24px rgba(0, 212, 255, 0.08);
   }
   .dev-announcement-links a {
       flex: 1;
       color: rgba(199, 245, 255, 0.96);
       text-decoration: none;
       word-break: break-word;
   }
   .dev-announcement-links a:hover {
       text-decoration: underline;
   }
   .dev-announcement-links a:focus-visible {
       outline: 2px solid rgba(0, 212, 255, 0.55);
       outline-offset: 3px;
       border-radius: 10px;
   }
   .dev-announcement-tag {
       display: inline-flex;
       align-items: center;
       padding: 4px 10px;
       border-radius: var(--radius-full);
      font-size: 11px;
       font-weight: 900;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       background: rgba(0, 212, 255, 0.14);
       border: 1px solid rgba(0, 212, 255, 0.34);
       color: rgba(199, 245, 255, 0.98);
       white-space: nowrap;
   }
   .dev-announcement-tag.is-new {
       background: rgba(255, 215, 0, 0.13);
       border-color: rgba(255, 215, 0, 0.34);
       color: rgba(255, 226, 138, 0.98);
   }
   @media (max-width: 1024px) {
       .dev-announcement-inner.glass-effect {
           margin-left: 50%;
           width: calc(100% - 200px);
       }
   }
   @media (max-width: 768px) {
       .dev-announcement-strip {
           margin: 18px 0 0;
           padding: 0;
       }
       .dev-announcement-inner.glass-effect {
           width: calc(100% - 30px) !important;
           margin: 0 15px !important;
           transform: none !important;
           border-radius: 18px;
          padding: 12px 12px;
       }
       .dev-announcement-grid {
           grid-template-columns: 1fr;
       }
   }
   @media (max-width: 480px) {
       .dev-announcement-inner.glass-effect {
           margin: 0 10px !important;
           width: calc(100% - 20px) !important;
          padding: 11px 10px;
       }
       .dev-announcement-body p {
           font-size: 14px;
       }
   }
   .random-game-cta {
       max-width: 1400px;
       margin: 24px auto 0;
       margin-left: 50%; /* Center on screen */
       transform: translateX(-50%);
       padding: 14px 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: var(--spacing-md);
       border-radius: var(--radius-lg);
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 212, 255, 0.08));
       border: 1px solid rgba(255, 215, 0, 0.25);
       box-shadow: var(--shadow-md);
       box-sizing: border-box;
   }
   .random-game-copy {
       color: var(--text-secondary);
       font-size: var(--font-size-lg);
       font-weight: var(--font-weight-semibold);
   }
   .random-game-btn {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 12px 18px;
       border-radius: var(--radius-lg);
       border: 1px solid rgba(0, 212, 255, 0.4);
       background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(255, 215, 0, 0.18));
       color: var(--text-primary);
       font-weight: var(--font-weight-semibold);
       cursor: pointer;
       box-shadow: var(--shadow-sm), var(--shadow-glow);
       transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   }
   .random-game-btn:hover {
       transform: translateY(-1px);
       box-shadow: var(--shadow-md), var(--shadow-glow-strong);
       border-color: rgba(255, 215, 0, 0.6);
   }
   .random-game-btn i {
       font-size: 16px;
   }
      .game-of-season-container {
          max-width: 1400px;
          margin: 30px auto;
          margin-left: 50%; /* Center on screen */
          transform: translateX(-50%);
          padding: 0 20px;
          position: relative;
          z-index: 10;
          box-sizing: border-box;
      }
   @media (max-width: 1024px) {
       .game-of-season-container {
           margin-left: 50%;
           width: calc(100% - 200px);
       }
       .random-game-cta {
           margin-left: 50%;
           width: calc(100% - 200px);
       }
   }
   @media (max-width: 768px) {
       .game-of-season-container {
           width: 100% !important;
           padding: 0 15px !important;
           margin: 20px auto !important;
       }
       .random-game-cta {
           width: calc(100% - 30px) !important;
           margin: 20px 15px 0 !important;
       }
   }
   @media (max-width: 480px) {
       .game-of-season-container {
           padding: 0 10px !important;
           margin: 15px auto !important;
       }
       .random-game-cta {
           margin: 15px 10px 0 !important;
           width: calc(100% - 20px) !important;
           padding: 12px 16px !important;
           flex-direction: column !important;
           align-items: stretch !important;
       }
       .random-game-copy {
           font-size: 14px !important;
       }
       .random-game-btn {
           width: 100% !important;
           justify-content: center !important;
       }
   }
   .game-of-season-header {
       text-align: center;
       margin-bottom: 30px;
   }
   .game-of-season-header h2 {
       font-size: 42px;
       font-weight: 800;
       background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #f9ca24 75%, #f0932b 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 10px;
       text-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
   }
   .game-of-season-header p {
       color: rgba(255, 255, 255, 0.7);
       font-size: 18px;
   }
   .game-of-season-browser-cta {
       margin: 16px auto 0;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       max-width: 1200px;
       padding: 0 12px 8px;
       box-sizing: border-box;
       text-align: center;
   }
   .browser-btn {
       min-width: 220px;
       justify-content: center;
       gap: 10px;
   }
   .festive-game-card {
       --festive-scale: 1;
       background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(33, 150, 243, 0.15) 20%, rgba(244, 67, 54, 0.15) 40%, rgba(255, 255, 255, 0.15) 60%, rgba(76, 175, 80, 0.15) 80%, rgba(33, 150, 243, 0.15) 100%);
       background-size: 400% 400%;
       backdrop-filter: blur(30px) saturate(180%);
       border-radius: 30px;
       border: 4px solid transparent;
       padding: clamp(20px, 4vw, 36px);
       position: relative;
       overflow: hidden;
       box-shadow: 
           0 25px 80px rgba(0, 0, 0, 0.6),
           0 0 40px rgba(76, 175, 80, 0.25),
           0 0 60px rgba(33, 150, 243, 0.2),
           0 0 80px rgba(244, 67, 54, 0.2),
           inset 0 0 40px rgba(255, 255, 255, 0.15);
       animation: festiveCardGlow 4s ease-in-out infinite, gradientShift 8s ease infinite, cardFloat 6s ease-in-out infinite;
       transform-style: preserve-3d;
       width: 100%;
       max-width: 1200px;
       margin: 0 auto;
       aspect-ratio: 16 / 9;
       min-height: 320px;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }
   .festive-game-card::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
       animation: shimmer 3s infinite;
       pointer-events: none;
   }
   .festive-game-card::after {
       content: '';
       position: absolute;
       top: -2px;
       left: -2px;
       right: -2px;
       bottom: -2px;
       background: linear-gradient(45deg, #4caf50, #2196f3, #f44336, #ffffff, #4caf50, #2196f3, #f44336, #ffffff, #4caf50);
       background-size: 400% 400%;
       border-radius: 30px;
       z-index: -1;
       animation: borderGlow 3s linear infinite;
       filter: blur(8px);
   }
   @keyframes festiveCardGlow {
       0%, 100% { 
           box-shadow: 
               0 25px 80px rgba(0, 0, 0, 0.6),
               0 0 40px rgba(76, 175, 80, 0.25),
               0 0 60px rgba(33, 150, 243, 0.2),
               0 0 80px rgba(244, 67, 54, 0.2),
               inset 0 0 40px rgba(255, 255, 255, 0.15);
       }
       50% { 
           box-shadow: 
               0 25px 80px rgba(0, 0, 0, 0.6),
               0 0 50px rgba(244, 67, 54, 0.35),
               0 0 70px rgba(33, 150, 243, 0.3),
               0 0 90px rgba(76, 175, 80, 0.3),
               0 0 100px rgba(255, 255, 255, 0.2),
               inset 0 0 50px rgba(33, 150, 243, 0.2);
       }
   }
   @keyframes gradientShift {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   @keyframes borderGlow {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   @keyframes shimmer {
       0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
       100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
   }
   @keyframes cardFloat {
       0%, 100% { transform: translateY(0px) rotateX(0deg) scale(var(--festive-scale, 1)); }
       50% { transform: translateY(-10px) rotateX(2deg) scale(var(--festive-scale, 1)); }
   }
   @media (max-width: 900px) {
       .festive-game-card {
           --festive-scale: 0.94;
           aspect-ratio: auto;
           height: auto;
           border-width: 3px;
           min-height: 260px;
       }
   }
   @media (max-width: 600px) {
       .festive-game-card {
           --festive-scale: 0.9;
           aspect-ratio: auto;
           height: auto;
           border-radius: 20px;
           border-width: 2px;
           min-height: 220px;
           animation: festiveCardGlow 4s ease-in-out infinite, gradientShift 8s ease infinite;
           transform-origin: top center;
       }
   }
   .festive-badge {
       position: absolute;
       top: 20px;
       right: 20px;
       background: linear-gradient(135deg, #4caf50, #2196f3, #f44336, #ffffff, #4caf50);
       background-size: 200% 200%;
       color: white;
       padding: 12px 24px;
       border-radius: 25px;
       font-weight: 700;
       font-size: 14px;
       box-shadow: 
           0 6px 20px rgba(76, 175, 80, 0.5),
           0 0 30px rgba(33, 150, 243, 0.4),
           0 0 35px rgba(244, 67, 54, 0.4),
           inset 0 1px 0 rgba(255, 255, 255, 0.3);
       animation: festiveBadgePulse 2s ease-in-out infinite, badgeGradient 3s ease infinite;
       z-index: 5;
       border: 2px solid rgba(255, 255, 255, 0.3);
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
   }
   @keyframes festiveBadgePulse {
       0%, 100% { transform: scale(1) rotate(0deg); }
       25% { transform: scale(1.08) rotate(-2deg); }
       50% { transform: scale(1.1) rotate(0deg); }
       75% { transform: scale(1.08) rotate(2deg); }
   }
   @keyframes badgeGradient {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   .festive-game-content {
       display: flex;
       gap: 40px;
       align-items: center;
   }
   .festive-game-image {
       width: 300px;
       height: 300px;
       border-radius: 20px;
       background-size: cover;
       background-position: center;
       box-shadow: 
           0 15px 40px rgba(0, 0, 0, 0.6),
           0 0 20px rgba(76, 175, 80, 0.25),
           0 0 35px rgba(33, 150, 243, 0.2),
           0 0 45px rgba(244, 67, 54, 0.2),
           inset 0 0 20px rgba(255, 255, 255, 0.15);
       border: 4px solid;
       border-image: linear-gradient(45deg, #4caf50, #2196f3, #f44336, #ffffff, #4caf50) 1;
       flex-shrink: 0;
       position: relative;
       overflow: hidden;
       animation: imageGlow 3s ease-in-out infinite;
   }
   .festive-game-image::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
       animation: imageShimmer 4s infinite;
   }
   @keyframes imageGlow {
       0%, 100% { 
           box-shadow: 
               0 15px 40px rgba(0, 0, 0, 0.6),
               0 0 20px rgba(76, 175, 80, 0.25),
               0 0 35px rgba(33, 150, 243, 0.2),
               0 0 45px rgba(244, 67, 54, 0.2);
       }
       50% { 
           box-shadow: 
               0 15px 40px rgba(0, 0, 0, 0.6),
               0 0 30px rgba(244, 67, 54, 0.35),
               0 0 45px rgba(33, 150, 243, 0.3),
               0 0 55px rgba(76, 175, 80, 0.3),
               0 0 65px rgba(255, 255, 255, 0.2);
       }
   }
   @keyframes imageShimmer {
       0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
       100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
   }
   .festive-game-info {
       flex: 1;
   }
   .festive-game-title {
       font-size: 48px;
       font-weight: 800;
       background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 20px;
   }
   .festive-game-description {
       font-size: 16px;
       line-height: 1.8;
       color: rgba(255, 255, 255, 0.9);
       margin-bottom: 25px;
   }
   .festive-game-rating {
       margin-bottom: 30px;
   }
   .festive-game-stars {
       display: flex;
       gap: 8px;
       margin-bottom: 10px;
   }
   .festive-game-stars .fa-star {
       font-size: 24px;
       color: rgba(255, 255, 255, 0.4);
       cursor: pointer;
       transition: all 0.2s ease;
   }
   .festive-game-stars .fa-star.active {
       color: #4caf50;
       filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.8));
   }
   .festive-game-stars .fa-star:hover {
       transform: scale(1.3);
       color: #4caf50;
   }
   .festive-rating-text {
       color: rgba(255, 255, 255, 0.8);
       font-size: 16px;
       font-weight: 600;
   }
   .festive-play-btn {
       background: linear-gradient(135deg, #4caf50, #2196f3, #f44336);
       color: white;
       border: none;
       padding: 18px 40px;
       border-radius: 50px;
       font-size: 18px;
       font-weight: 700;
       cursor: pointer;
       box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4), 0 0 20px rgba(33, 150, 243, 0.3);
       transition: all 0.3s ease;
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   .festive-play-btn:hover {
       transform: translateY(-3px) scale(1.05);
       box-shadow: 0 12px 35px rgba(244, 67, 54, 0.6), 0 0 30px rgba(33, 150, 243, 0.4);
   }
   .festive-particles {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       pointer-events: none;
       overflow: hidden;
   }
   .festive-particles::before {
       content: '✨';
       position: absolute;
       font-size: 24px;
       top: 15%;
       left: 8%;
       animation: festiveFloat 3s ease-in-out infinite;
       text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 107, 107, 0.6);
       animation-delay: 0s;
   }
   .festive-particles::after {
       content: '⭐';
       position: absolute;
       font-size: 24px;
       top: 55%;
       right: 12%;
       animation: festiveFloat 3s ease-in-out infinite;
       text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(78, 205, 196, 0.6);
       animation-delay: 1.5s;
   }
   @keyframes festiveFloat {
       0%, 100% { 
           transform: translateY(0) rotate(0deg) scale(1); 
           opacity: 0.8; 
       }
       25% { 
           transform: translateY(-15px) rotate(90deg) scale(1.2); 
           opacity: 1; 
       }
       50% { 
           transform: translateY(-25px) rotate(180deg) scale(1); 
           opacity: 0.9; 
       }
       75% { 
           transform: translateY(-15px) rotate(270deg) scale(1.1); 
           opacity: 1; 
       }
   }
   /* Keep full layout on all screen sizes - only adjust for very small screens */
   @media (max-width: 768px) {
       .festive-game-card {
           padding: 22px !important;
           aspect-ratio: auto;
           min-height: unset;
       }
       .festive-game-content {
           flex-direction: column;
           align-items: center;
           text-align: center;
           gap: 18px;
       }
       .festive-game-image {
           width: min(320px, 88vw);
           height: auto;
           aspect-ratio: 1;
       }
       .festive-game-title {
           font-size: 32px;
       }
    }
    @media (max-width: 480px) {
       .festive-game-card {
           padding: 16px !important;
           aspect-ratio: auto;
           min-height: unset;
       }
       .festive-game-content {
           flex-direction: column;
           gap: 14px;
       }
       .festive-game-image {
           width: min(260px, 92vw);
           height: auto;
           aspect-ratio: 1;
       }
       .festive-game-title {
           font-size: 26px;
       }
       .festive-game-description {
           font-size: 14px;
       }
    }
      .slope-rider-center-container {
       max-width: 1400px;
       margin: 30px auto;
       padding: 0 20px;
       display: flex !important;
       justify-content: center;
       align-items: center;
       position: relative;
       z-index: 10;
       min-height: 400px;
   }
   .slope-rider-center-card {
       width: 280px;
       height: 380px;
       margin: 0 auto;
       position: relative;
       cursor: pointer;
       transform: scale(1);
       transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       animation: cardPulse 3s ease-in-out infinite;
       filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.3));
   }
   .slope-rider-center-card:hover {
       transform: scale(1.08) rotateY(5deg);
       filter: drop-shadow(0 0 12px rgba(76, 175, 80, 0.4)) drop-shadow(0 0 16px rgba(33, 150, 243, 0.3)) drop-shadow(0 0 18px rgba(244, 67, 54, 0.3));
   }
   @keyframes cardPulse {
       0%, 100% { 
           filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.3)) drop-shadow(0 0 10px rgba(33, 150, 243, 0.2)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
       }
       50% { 
           filter: drop-shadow(0 0 12px rgba(244, 67, 54, 0.4)) drop-shadow(0 0 14px rgba(33, 150, 243, 0.3)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.3));
       }
   }
      .slope-rider-center-card.game-cube,
   .slope-rider-center-card.festive-game-cube {
       width: 280px !important;
       height: 380px !important;
       aspect-ratio: auto !important;
   }
   .slope-rider-center-card .game-cube-inner {
       width: 100%;
       height: 100%;
       position: relative;
   }
   .slope-rider-center-card .game-cube-glow {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: calc(100% + 10px);
       height: calc(100% + 10px);
       background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(33, 150, 243, 0.2), rgba(244, 67, 54, 0.2), rgba(255, 255, 255, 0.2), rgba(76, 175, 80, 0.2));
       background-size: 400% 400%;
       border-radius: inherit;
       opacity: 0.4;
       z-index: -1;
       filter: blur(10px);
       animation: glowPulse 3s ease-in-out infinite, glowGradient 5s ease infinite;
   }
   @keyframes glowPulse {
       0%, 100% { 
           opacity: 0.3;
           transform: translate(-50%, -50%) scale(1);
       }
       50% { 
           opacity: 0.5;
           transform: translate(-50%, -50%) scale(1.05);
       }
   }
   @keyframes glowGradient {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   #featuredGamesSections {
       width: 100%;
       max-width: none;
       margin: 40px 0 10px;
       padding: 10px 0 20px;
       position: relative;
       z-index: 10;
       display: flex;
       flex-direction: column;
       gap: 32px;
       background: radial-gradient(120% 140% at 15% 10%, rgba(255, 215, 0, 0.08), transparent 35%),
                   radial-gradient(110% 130% at 85% 0%, rgba(255, 165, 0, 0.06), transparent 40%);
   }
   .featured-section {
       position: relative;
       margin: 0;
       padding: 22px 22px 26px;
       width: 100%;
       max-width: none;
       margin-left: 0;
       box-sizing: border-box;
       border-radius: 20px;
       background: linear-gradient(135deg, rgba(12, 12, 18, 0.92), rgba(17, 17, 26, 0.82));
       border: 1px solid rgba(255, 215, 0, 0.12);
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.02);
       overflow: hidden;
       backdrop-filter: blur(6px);
   }
   @media (max-width: 1100px) {
       #featuredGamesSections {
           gap: 22px;
       }
       .featured-section {
           padding: 18px;
           border-radius: 16px;
       }
       .featured-games-scroll-container.prime-carousel {
           padding: 14px;
       }
       .featured-section-header h3 {
           font-size: 22px;
       }
   }
   @media (max-width: 820px) {
       #featuredGamesSections {
           gap: 18px;
       }
       .featured-section {
           padding: 14px;
           border-radius: 14px;
           box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
       }
       .featured-section-header {
           padding: 10px 12px;
       }
       .featured-section-header h3 {
           font-size: 20px;
       }
       .featured-games-scroll-container.prime-carousel {
           padding: 12px;
       }
       .scroll-arrow-left.primeCarouselArrow,
       .scroll-arrow-right.primeCarouselArrow {
           width: 44px;
           height: 44px;
       }
       .featured-section-header-actions {
           width: 100%;
           justify-content: flex-end;
       }
   }
   @media (max-width: 640px) {
       .featured-section {
           padding: 12px;
           gap: 8px;
       }
       .featured-section-header {
           padding: 10px;
           gap: 8px;
       }
       .featured-section-header h3 {
           font-size: 18px;
       }
       .featured-games-grid.primeCarouselContainer {
           gap: 14px;
           padding: 4px;
       }
       .featured-games-grid.primeCarouselContainer > li:first-child {
           margin-right: 14px;
       }
       .scroll-arrow-left.primeCarouselArrow,
       .scroll-arrow-right.primeCarouselArrow {
           width: 44px;
           height: 44px;
       }
       .scroll-arrow-left.primeCarouselArrow .scroll-arrow-overlay,
       .scroll-arrow-right.primeCarouselArrow .scroll-arrow-overlay {
           width: 44px;
       }
   }
   .featured-section::before {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(100% 120% at 10% 20%, rgba(255, 255, 255, 0.04), transparent 45%);
       pointer-events: none;
   }
   .featured-section::after {
       content: '';
       position: absolute;
       top: -40%;
       right: -10%;
       width: 320px;
       height: 320px;
       background: radial-gradient(circle, rgba(255, 215, 0, 0.12), transparent 55%);
       filter: blur(6px);
       opacity: 0.7;
       pointer-events: none;
   }
   .featured-section-header {
       position: relative;
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
       padding: 14px 16px;
       border: 1px solid rgba(255, 215, 0, 0.14);
       border-radius: 14px;
       box-sizing: border-box;
       margin-left: 0;
       width: 100%;
       background: linear-gradient(120deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   }
   .featured-section-header-actions {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 6px 8px;
       border-radius: 12px;
       background: rgba(255, 255, 255, 0.03);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
       backdrop-filter: blur(6px);
   }
   .clear-recently-played-btn {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 9px 16px;
       background: rgba(220, 53, 69, 0.16);
       border: 1px solid rgba(220, 53, 69, 0.45);
       border-radius: 12px;
       color: #ff6b81;
       font-size: 13px;
       font-weight: 700;
       cursor: pointer;
       transition: all 0.3s ease;
       font-family: var(--font-primary);
       box-shadow: 0 8px 24px rgba(220, 53, 69, 0.18);
   }
   .clear-recently-played-btn:hover {
       background: rgba(220, 53, 69, 0.25);
       border-color: rgba(220, 53, 69, 0.65);
       transform: translateY(-2px);
       box-shadow: 0 10px 28px rgba(220, 53, 69, 0.32);
   }
   .clear-recently-played-btn i {
       font-size: 12px;
   }
   /* Recently played carousel specific styles */
   .recently-played-carousel .featured-games-grid {
       scroll-snap-type: x mandatory;
       scroll-behavior: auto;
       direction: ltr !important; /* Ensure left-to-right reading */
       justify-content: flex-start !important;
   }
   .recently-played-carousel .featured-games-grid li:first-child {
       scroll-snap-align: start;
   }
   /* Force scroll to start (left) on load for recently played - handled via JavaScript */
   @media (max-width: 1024px) {
       .featured-section-header {
           padding: 14px 16px;
       }
       .featured-games-scroll-container.prime-carousel {
           width: 100%;
           margin-left: 0;
       }
   }
   @media (max-width: 768px) {
       .featured-section-header {
           padding: 12px 12px 12px 12px !important;
           flex-direction: column;
           align-items: flex-start;
           gap: 10px;
       }
       .featured-section-header h3 {
           font-size: 22px !important;
       }
       .featured-games-scroll-container.prime-carousel {
           width: 100% !important;
           margin-left: 0 !important;
       }
       .view-more-btn {
           font-size: 12px !important;
           padding: 10px 16px !important;
       }
   }
   @media (max-width: 480px) {
       .featured-section-header {
           padding: 12px !important;
       }
       .featured-section-header h3 {
           font-size: 18px !important;
       }
       .featured-section-header h3 i {
           font-size: 18px !important;
       }
   }
   .featured-section-header h3 {
       font-size: 26px;
       font-weight: 800;
       color: #fdfaf3;
       letter-spacing: 0.3px;
       text-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
       background: linear-gradient(120deg, #ffd700, #ffb347, #ffd700);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       display: flex;
       align-items: center;
       gap: 12px;
       margin: 0;
   }
   .featured-section-header h3 i {
       font-size: 24px;
       color: #ffd700;
       -webkit-text-fill-color: #ffd700;
       filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
   }
   .view-more-btn {
       padding: 12px 22px;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.28), rgba(255, 165, 0, 0.22));
       border: 1px solid rgba(255, 215, 0, 0.6);
       border-radius: 14px;
       color: #0a0a0f;
       font-size: 14px;
       font-weight: 800;
       letter-spacing: 0.2px;
       text-decoration: none;
       display: flex;
       align-items: center;
       gap: 8px;
       transition: all var(--transition-base);
       cursor: pointer;
       box-shadow: 0 12px 30px rgba(255, 215, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
   }
   .view-more-btn:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 165, 0, 0.3));
       border-color: rgba(255, 215, 0, 0.7);
       transform: translateY(-2px) scale(1.01);
       box-shadow: 0 14px 34px rgba(255, 215, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
   }
   .featured-games-scroll-container.prime-carousel {
       position: relative;
       width: 100%;
       max-width: none;
       margin-left: 0;
       overflow: hidden;
       padding: 18px 18px 12px;
       box-sizing: border-box;
       border-radius: 16px;
       border: 1px solid rgba(255, 215, 0, 0.12);
       background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   }
   /* Move games further left - remove all left padding/margin */
   .featured-games-grid.primeCarouselContainer {
       padding-left: 0 !important;
       padding-right: 0;
       margin-left: 0;
   }
   /* Ensure first game item starts exactly at the left edge with no gap - use negative margin to counteract any spacing */
   .featured-games-grid.primeCarouselContainer > li:first-child {
       margin-left: 0 !important;
       padding-left: 0 !important;
       margin-right: 18px; /* Keep gap after first item */
   }
   .scroll-arrow-left.primeCarouselArrow {
       position: absolute;
       left: 14px;
       top: 50%;
       bottom: auto;
       transform: translateY(-50%);
       width: 52px;
       height: 52px;
       display: none;
       align-items: center;
       justify-content: center;
       background: rgba(5, 6, 12, 0.85);
       cursor: pointer;
       z-index: 10;
       transition: opacity 0.25s ease, transform 0.25s ease;
       border: 1px solid rgba(255, 215, 0, 0.45);
       padding: 0;
       margin: 0;
       border-radius: 14px;
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03);
   }
   .scroll-arrow-left.primeCarouselArrow.show {
       display: flex;
   }
   .featured-games-scroll-container.prime-carousel:hover .scroll-arrow-left.primeCarouselArrow.show {
       opacity: 1;
       transform: translateY(-50%) scale(1.03);
   }
   .scroll-arrow-left.primeCarouselArrow i {
       font-size: 18px;
       color: #FFD700;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
       transition: transform 0.25s ease;
   }
   .scroll-arrow-left.primeCarouselArrow:hover i {
       transform: translateX(-5px);
   }
   .scroll-arrow-left.primeCarouselArrow .scroll-arrow-overlay {
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 52px;
       background: rgba(0, 0, 0, 0.5);
       opacity: 0;
       transition: opacity 0.3s ease;
       pointer-events: none;
   }
   .scroll-arrow-left.primeCarouselArrow:hover .scroll-arrow-overlay {
       opacity: 1;
   }
   .featured-games-grid.primeCarouselContainer {
       display: flex;
       flex-direction: row;
       gap: 18px;
       width: 100%;
       overflow-x: auto;
       overflow-y: hidden;
       scroll-behavior: smooth;
       padding: 6px;
       margin: 0;
       list-style: none;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: thin;
       scrollbar-color: rgba(255, 215, 0, 0.3) transparent;
   }
   /* Remove gap before first item - games should start immediately at left edge */
   .featured-games-grid.primeCarouselContainer > li:first-child {
       margin-left: 0 !important;
   }
   /* Move games further left in each category - reduce gap from sidebar */
   .featured-games-grid.primeCarouselContainer li:first-child {
       margin-left: 0;
       padding-left: 0;
   }
   /* Remove padding to align with sidebar */
   .featured-games-grid.primeCarouselContainer {
       padding-left: 0;
       padding-right: 0;
   }
   .featured-games-grid.primeCarouselContainer::-webkit-scrollbar {
       height: 8px;
   }
   .featured-games-grid.primeCarouselContainer::-webkit-scrollbar-track {
       background: transparent;
   }
   .featured-games-grid.primeCarouselContainer::-webkit-scrollbar-thumb {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.45), rgba(255, 165, 0, 0.35));
       border-radius: 4px;
   }
   .featured-games-grid.primeCarouselContainer::-webkit-scrollbar-thumb:hover {
       background: rgba(255, 215, 0, 0.5);
   }
   .primeCarouselLi {
       flex-shrink: 0;
       list-style: none;
       margin: 0;
       padding: 0;
   }
   /* Big game in single li - make it a square */
   .primeCarouselLi > .big-game-cube {
       width: 380px;
       height: 380px;
       aspect-ratio: 1;
       min-width: 380px;
       max-width: 380px;
   }
   /* Small games container - sized so 4 small cubes = 1 big cube (380px × 380px) */
   .small-games-container {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(2, 1fr);
       gap: 10px;
       width: 380px;
       height: 380px;
   }
   .small-games-container .big-game-cube {
       width: 100%;
       height: 100%;
       aspect-ratio: 1;
       min-width: auto;
       max-width: none;
   }
   .featured-games-grid .big-game-cube {
       flex: 0 0 auto;
   }
   .scroll-arrow-right.primeCarouselArrow {
       position: absolute;
       right: 14px;
       top: 50%;
       bottom: auto;
       transform: translateY(-50%);
       width: 52px;
       height: 52px;
       display: none;
       align-items: center;
       justify-content: center;
       background: rgba(5, 6, 12, 0.85);
       cursor: pointer;
       z-index: 10;
       transition: opacity 0.25s ease, transform 0.25s ease;
       border: 1px solid rgba(255, 215, 0, 0.45);
       padding: 0;
       margin: 0;
       border-radius: 14px;
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03);
   }
   .scroll-arrow-right.primeCarouselArrow.show {
       display: flex;
   }
   .featured-games-scroll-container.prime-carousel:hover .scroll-arrow-right.primeCarouselArrow.show {
       opacity: 1;
       transform: translateY(-50%) scale(1.03);
   }
   .scroll-arrow-right i {
       font-size: 18px;
       color: #FFD700;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
       transition: transform 0.25s ease;
   }
   .scroll-arrow-right:hover i {
       transform: translateX(5px);
   }
   .scroll-arrow-overlay {
       position: absolute;
       right: 0;
       top: 0;
       bottom: 0;
       width: 52px;
       background: rgba(0, 0, 0, 0.5);
       opacity: 0;
       transition: opacity 0.3s ease;
       pointer-events: none;
   }
   .scroll-arrow-right:hover .scroll-arrow-overlay {
       opacity: 1;
   }
   .games-grid .big-game-cube {
       flex: 0 0 auto;
       width: calc((100% - (var(--spacing-xl) * 7)) / 8);
       min-width: 180px;
       max-width: 220px;
   }
   @media (max-width: 1920px) {
       .featured-games-grid .game-cube {
           width: calc((100% - (var(--spacing-xl) * 6)) / 7);
       }
   }
   @media (max-width: 1600px) {
       .featured-games-grid .game-cube {
           width: calc((100% - (var(--spacing-xl) * 5)) / 6);
       }
   }
   @media (max-width: 1400px) {
       .featured-games-grid .game-cube {
           width: calc((100% - (var(--spacing-xl) * 4)) / 5);
       }
   }
   @media (max-width: 1200px) {
       .featured-games-grid .game-cube {
           width: calc((100% - (var(--spacing-xl) * 3)) / 4);
       }
   }
   @media (max-width: 900px) {
       .featured-games-grid .game-cube {
           width: calc((100% - (var(--spacing-xl) * 2)) / 3);
       }
   }
   @media (max-width: 600px) {
       .featured-games-grid .game-cube {
           width: calc((100% - var(--spacing-xl)) / 2);
       }
   }
   
   /* Snow Animation */
   html {
     height: 100%;
     background: linear-gradient(#123 30%, #667);
   }
.snow, .snow:before, .snow:after {
  position: absolute;
  top: -600px;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  background-image:
    radial-gradient(4px 4px at 120px 180px, rgba(255,255,255,0.8) 50%, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 480px 120px, rgba(255,255,255,0.6) 50%, rgba(0,0,0,0)),
    radial-gradient(5px 5px at 360px 540px, rgba(255,255,255,0.9) 50%, rgba(0,0,0,0)),
       radial-gradient(4px 4px at 240px 300px, rgba(255,255,255,0.7) 50%, rgba(0,0,0,0)),
       radial-gradient(3px 3px at 600px 420px, rgba(255,255,255,0.5) 50%, rgba(0,0,0,0)),
       radial-gradient(5px 5px at 60px 480px, rgba(255,255,255,0.8) 50%, rgba(0,0,0,0)),
       radial-gradient(4px 4px at 420px 60px, rgba(255,255,255,0.6) 50%, rgba(0,0,0,0)),
       radial-gradient(3px 3px at 180px 360px, rgba(255,255,255,0.9) 50%, rgba(0,0,0,0)),
       radial-gradient(5px 5px at 540px 240px, rgba(255,255,255,0.7) 50%, rgba(0,0,0,0)),
       radial-gradient(4px 4px at 300px 120px, rgba(255,255,255,0.5) 50%, rgba(0,0,0,0));
     background-size: 600px 600px;
     animation: snow 3s linear infinite;
     content: "";
   }
   .snow:after {
     margin-left: -200px;
     opacity: .4;
     animation-duration: 6s;
     animation-direction: reverse;
     filter: blur(3px);
   }
   .snow:before {
     animation-duration: 9s;
     animation-direction: reverse;
     margin-left: -300px;
     opacity: .65;
     filter: blur(1.5px);
   }
   @keyframes snow {
     to {
       transform: translateY(600px);
     }
   }
   .featured-games-grid .game-cube-rating {
       display: flex !important;
       visibility: visible !important;
   }
   .featured-games-grid .game-cube-stars {
       display: flex !important;
       visibility: visible !important;
   }
   .featured-games-grid .game-cube-stars .fa-star {
       display: inline-block !important;
       visibility: visible !important;
       opacity: 1 !important;
   }
   .view-all-games-container {
       max-width: 1400px;
       margin: 40px auto;
       padding: 0 30px;
       text-align: center;
   }
   .category-showcase {
       max-width: 1400px;
       margin: 10px auto 30px;
       padding: 0 30px;
   }
   .category-showcase-header h3 {
       font-size: 24px;
       font-weight: 800;
       color: #FFD700;
       display: flex;
       align-items: center;
       gap: 10px;
       margin: 0 0 6px;
   }
   .category-showcase-header p {
       margin: 0 0 14px;
       color: rgba(255, 255, 255, 0.75);
   }
   .category-showcase-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
       gap: 14px;
   }
   .category-card {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 14px 16px;
       border-radius: 14px;
       background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
       border: 1px solid rgba(255, 215, 0, 0.18);
       color: #fdfaf3;
       text-decoration: none;
       font-weight: 700;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
       transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   }
   .category-card i {
       color: #FFD700;
       font-size: 16px;
   }
   .category-card:hover {
       transform: translateY(-2px);
       border-color: rgba(255, 215, 0, 0.4);
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
   }
   .view-all-games-btn {
       display: inline-flex;
       align-items: center;
       gap: 12px;
       padding: 18px 36px;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.2));
       border: 2px solid rgba(255, 215, 0, 0.5);
       border-radius: var(--radius-xl);
       color: #FFD700;
       font-size: 18px;
       font-weight: 700;
       text-decoration: none;
       transition: all var(--transition-base);
       box-shadow: var(--shadow-lg);
       cursor: pointer;
   }
   .view-all-games-btn:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 165, 0, 0.3));
       border-color: rgba(255, 215, 0, 0.7);
       transform: translateY(-3px);
       box-shadow: var(--shadow-xl), var(--shadow-glow);
   }
   .view-all-games-btn i {
       font-size: 20px;
   }
   .load-more-container {
       display: flex;
       justify-content: center;
       margin: 40px 0;
       padding: 20px;
   }
   .load-more-btn {
       display: inline-flex;
       align-items: center;
       gap: 12px;
       padding: 16px 32px;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.2));
       border: 2px solid rgba(255, 215, 0, 0.5);
       border-radius: var(--radius-xl);
       color: #FFD700;
       font-size: 16px;
       font-weight: 700;
       cursor: pointer;
       transition: all var(--transition-base);
       box-shadow: var(--shadow-lg);
   }
   .load-more-btn:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 165, 0, 0.3));
       border-color: rgba(255, 215, 0, 0.7);
       transform: translateY(-3px);
       box-shadow: var(--shadow-xl), var(--shadow-glow);
   }
   .load-more-btn i {
       font-size: 18px;
   }
   .scattered-games-section {
       margin-top: 60px;
       padding: 20px 30px;
       width: 100%;
       margin-left: 0;
       box-sizing: border-box;
   }
   .scattered-games-header {
       margin-bottom: 30px;
       padding-bottom: 20px;
       border-bottom: 2px solid rgba(255, 215, 0, 0.2);
   }
   .scattered-games-header h3 {
       font-size: 28px;
       font-weight: 800;
       color: #FFD700;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
       display: flex;
       align-items: center;
       gap: 12px;
       margin: 0;
   }
   .scattered-games-header h3 i {
       font-size: 24px;
   }
  .scattered-games-grid {
       display: flex;
       flex-wrap: wrap;
       gap: var(--spacing-xl);
       width: 100%;
       justify-content: flex-start;
  }
   .random-games-section {
       margin-top: 50px;
       padding: 0 30px 40px;
       width: calc(100% - 200px);
       margin-left: 200px;
       box-sizing: border-box;
   }
   .random-games-header {
       margin-bottom: 18px;
       padding-bottom: 10px;
       border-bottom: 1px solid rgba(255, 215, 0, 0.2);
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       flex-wrap: wrap;
   }
   .random-games-heading h3 {
       font-size: 26px;
       font-weight: 800;
       color: #FFD700;
       display: flex;
       align-items: center;
       gap: 10px;
       margin: 0 0 6px;
   }
   .random-games-heading p {
       margin: 0;
       color: rgba(255, 255, 255, 0.7);
   }
   .random-games-refresh {
       padding: 10px 14px;
       border-radius: 10px;
       border: 1px solid rgba(255, 215, 0, 0.5);
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
       color: #fdfaf3;
       font-weight: 700;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
   .random-games-refresh:hover {
       transform: translateY(-1px);
       box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
   }
   .random-games-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
       gap: 16px;
   }
   .random-game-card {
       position: relative;
       border-radius: 16px;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       overflow: hidden;
       cursor: pointer;
       min-height: 170px;
       border: 1px solid rgba(255, 255, 255, 0.08);
       box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
   .random-game-card.size-big {
       grid-column: span 2;
       grid-row: span 2;
       min-height: 280px;
   }
   .random-game-card.size-medium {
       min-height: 220px;
   }
   .random-game-card.size-small {
       min-height: 170px;
   }
   .random-game-card:hover {
       transform: translateY(-2px) scale(1.01);
       box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
   }
   .random-game-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.15));
       padding: 14px;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       gap: 6px;
   }
   .random-game-tag {
       align-self: flex-start;
       padding: 4px 10px;
       background: rgba(255, 215, 0, 0.2);
       border-radius: 10px;
       color: #FFD700;
       font-weight: 700;
       font-size: 12px;
   }
   .random-game-title {
       font-weight: 800;
       font-size: 16px;
       color: #fff;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
   }
   .random-game-meta {
       color: rgba(255, 255, 255, 0.8);
       font-size: 13px;
       display: flex;
       align-items: center;
       gap: 6px;
   }
   @media (max-width: 900px) {
       .random-games-section {
           width: 100%;
           margin-left: 0;
           padding: 0 20px 30px;
       }
       .random-game-card.size-big {
           grid-column: span 2;
           grid-row: span 2;
           min-height: 240px;
       }
   }
   @media (max-width: 700px) {
       .random-games-section {
           padding: 0 16px 24px;
       }
       .random-games-grid {
           grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
           gap: 12px;
       }
       .random-game-card.size-big {
           grid-column: span 2;
           grid-row: span 2;
           min-height: 220px;
       }
       .random-game-card.size-medium {
           min-height: 180px;
       }
       .random-game-card.size-small {
           min-height: 150px;
       }
   }
   /* Ensure scattered games grid only contains big-game-cube, not regular game-cube */
   .scattered-games-grid .game-cube {
       display: none !important;
   }
   .scattered-games-grid .big-game-cube {
       display: block !important;
   }
   .big-game-cube {
       flex: 0 0 auto;
       width: calc((100% - (var(--spacing-xl) * 3)) / 4);
       min-width: 280px;
       max-width: 350px;
       aspect-ratio: 1;
       cursor: pointer;
       position: relative;
       background-size: cover !important;
       background-position: center center !important;
       background-repeat: no-repeat !important;
       border-radius: 16px;
       overflow: hidden;
       transition: all 0.3s ease;
       display: block !important;
       /* Override any game-cube styles */
       min-height: auto !important;
       perspective: none !important;
       animation: none !important;
       padding: 0 !important;
       margin: 0 !important;
       border: none !important;
       box-shadow: none !important;
       background-color: rgba(0, 0, 0, 0.2) !important;
       backdrop-filter: none !important;
   }
   .big-game-cube.admin-draggable {
       cursor: grab;
   }
   .big-game-cube.admin-draggable:active {
       cursor: grabbing;
   }
   .big-game-cube.dragging {
       opacity: 0.5;
       transform: scale(0.95);
       z-index: 1000;
   }
   .big-game-cube.drag-over {
       border: 3px dashed #FFD700;
       box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
   }
   .admin-drag-indicator {
       position: absolute;
       top: 10px;
       right: 10px;
       background: rgba(0, 0, 0, 0.7);
       color: #FFD700;
       padding: 8px;
       border-radius: 8px;
       font-size: 16px;
       z-index: 10;
       pointer-events: none;
       opacity: 0.8;
   }
   .big-game-cube.admin-draggable:hover .admin-drag-indicator {
       opacity: 1;
       background: rgba(0, 0, 0, 0.9);
   }
   /* Better image fitting for horizontal rectangles */
   .primeCarouselLi > .big-game-cube {
       background-size: cover !important;
       background-position: center center !important;
       object-fit: cover;
   }
   /* Better image fitting for small games */
   .small-games-container .big-game-cube {
       background-size: cover !important;
       background-position: center center !important;
       object-fit: cover;
   }
   /* Override aspect-ratio for horizontal big games */
   .primeCarouselLi > .big-game-cube {
       aspect-ratio: auto !important;
   }
   /* Hide any child elements that might show title/rating by default */
   .big-game-cube > * {
       opacity: 0 !important;
       transition: opacity 0.3s ease;
   }
   /* Ensure big-game-cube doesn't have game-cube-inner styling */
   .big-game-cube .game-cube-inner,
   .big-game-cube .game-cube-image,
   .big-game-cube .game-cube-rating,
   .big-game-cube .game-cube-title,
   .big-game-cube .game-cube-stars {
       display: none !important;
   }
   .big-game-cube-gradient-ring {
       position: absolute;
       inset: 8px;
       border-radius: 12px;
       background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
       opacity: 0;
       transition: opacity 0.3s ease;
       pointer-events: none;
   }
   .big-game-cube-hover-overlay {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       padding: 0;
       background: none;
       opacity: 0;
       transition: opacity 0.3s ease;
       pointer-events: none;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: stretch;
   }
   .big-game-cube-title-overlay {
       color: #fff !important;
       font-size: 16px !important;
       font-weight: 700 !important;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 215, 0, 0.6) !important;
       position: absolute !important;
       top: 12px !important;
       left: 12px !important;
       right: auto !important;
       bottom: auto !important;
       max-width: calc(100% - 100px) !important;
       text-align: left !important;
       z-index: 12 !important;
   }
   .big-game-cube-rating-overlay {
       color: #FFD700 !important;
       font-size: 16px !important;
       font-weight: 700 !important;
       display: flex !important;
       align-items: center !important;
       gap: 6px !important;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 215, 0, 0.6) !important;
       position: absolute !important;
       top: 12px !important;
       right: 12px !important;
       left: auto !important;
       bottom: auto !important;
       z-index: 12 !important;
   }
   .big-game-cube-rating-overlay i {
       font-size: 14px !important;
   }
   .big-game-cube-rating-overlay span {
       color: #FFD700 !important;
       font-weight: 700 !important;
   }
   .big-game-cube-description-overlay {
       position: absolute !important;
       bottom: 0 !important;
       left: 0 !important;
       right: 0 !important;
       top: auto !important;
       padding: 50px 12px 12px 12px !important;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%) !important;
       color: rgba(255, 255, 255, 0.9) !important;
       font-size: 12px !important;
       line-height: 1.4 !important;
       text-align: left !important;
       z-index: 11 !important;
       opacity: 0 !important;
       transition: opacity 0.3s ease !important;
       border-radius: 0 0 16px 16px !important;
   }
   .big-game-cube-description-overlay::before {
       content: '';
       position: absolute;
       top: 12px;
       left: 12px;
       right: 12px;
       height: 1px;
       background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   .big-game-cube:hover .big-game-cube-description-overlay {
       opacity: 1 !important;
   }
   .big-game-cube:hover .big-game-cube-description-overlay::before {
       opacity: 1;
   }
   .big-game-cube-gold-ring {
       position: absolute;
       inset: -4px;
       border: 3px solid transparent;
       border-radius: 20px;
       opacity: 0;
       transition: opacity 0.3s ease;
       pointer-events: none;
   }
   .big-game-cube:hover {
       transform: scale(1.05);
   }
   .big-game-cube:hover .big-game-cube-gradient-ring {
       opacity: 1 !important;
   }
   .big-game-cube:hover .big-game-cube-hover-overlay {
       opacity: 1 !important;
   }
   .big-game-cube:hover .big-game-cube-hover-overlay > * {
       opacity: 1 !important;
   }
   .big-game-cube:hover .big-game-cube-gold-ring {
       opacity: 1 !important;
       border-color: #FFD700;
       box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
   }
   @media (max-width: 1600px) {
       .big-game-cube {
           width: calc((100% - (var(--spacing-xl) * 2)) / 3);
       }
       .primeCarouselLi > .big-game-cube {
           width: 310px;
           height: 310px;
           min-width: 310px;
           max-width: 310px;
       }
       .small-games-container {
           width: 310px;
           height: 310px;
       }
   }
   @media (max-width: 1200px) {
       .big-game-cube {
           width: calc((100% - var(--spacing-xl)) / 2);
       }
       .primeCarouselLi > .big-game-cube {
           width: 253px;
           height: 253px;
           min-width: 253px;
           max-width: 253px;
       }
       .small-games-container {
           width: 253px;
           height: 253px;
       }
   }
   @media (max-width: 768px) {
       .primeCarouselLi > .big-game-cube {
           width: 180px;
           height: 180px;
           min-width: 180px;
           max-width: 180px;
       }
       .small-games-container {
           width: 180px;
           height: 180px;
           gap: 8px;
       }
       .featured-games-grid.primeCarouselContainer {
           gap: 12px;
       }
       /* Improve main games grid responsiveness */
       .games-grid {
           grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
           gap: 12px !important;
       }
       .games-grid .game-cube {
           min-height: 140px !important;
       }
   }
   @media (max-width: 560px) {
       .primeCarouselLi > .big-game-cube {
           width: 168px;
           height: 168px;
           min-width: 168px;
           max-width: 168px;
       }
       .small-games-container {
           width: 168px;
           height: 168px;
           gap: 6px;
       }
       .featured-games-scroll-container.prime-carousel {
           padding: 10px;
       }
   }
   @media (max-width: 900px) {
       .big-game-cube {
           width: 100%;
           max-width: 400px;
       }
   }
   .category-side-panel {
       position: fixed;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: auto;
       max-width: 90%;
       height: 70px;
       background: linear-gradient(180deg,
           rgba(15, 23, 42, 0.95) 0%,
           rgba(30, 41, 59, 0.92) 50%,
           rgba(15, 23, 42, 0.95) 100%) !important;
       backdrop-filter: blur(20px) saturate(180%) !important;
       -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
       border-top: 2px solid rgba(255, 215, 0, 0.25);
       border-left: 2px solid rgba(255, 215, 0, 0.25);
       border-right: 2px solid rgba(255, 215, 0, 0.25);
       border-radius: 32px 32px 0 0;
       z-index: 10001 !important;
       overflow-x: auto;
       overflow-y: hidden;
       padding: 0 16px;
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       gap: 8px;
       opacity: 0.95 !important;
       box-shadow:
           0 -4px 20px rgba(0, 0, 0, 0.4),
           0 0 40px rgba(255, 215, 0, 0.08),
           inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important;
       transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .category-side-panel:hover {
       height: 80px;
       padding: 0 20px;
   }
   .category-side-panel::before,
   .category-side-panel::after {
       display: none !important;
       opacity: 0 !important;
   }
   .category-side-panel::-webkit-scrollbar {
       height: 6px;
   }
   .category-side-panel::-webkit-scrollbar-track {
       background: rgba(255, 255, 255, 0.05);
       border-radius: 4px;
   }
   .category-side-panel::-webkit-scrollbar-thumb {
       background: linear-gradient(90deg, rgba(255, 215, 0, 0.4), rgba(255, 165, 0, 0.3));
       border-radius: 4px;
       border: 1px solid rgba(255, 255, 255, 0.1);
       transition: all 0.3s ease;
   }
   .category-side-panel::-webkit-scrollbar-thumb:hover {
       background: linear-gradient(90deg, rgba(255, 215, 0, 0.6), rgba(255, 165, 0, 0.5));
       transform: scaleY(1.2);
   }
   .category-side-panel::-webkit-scrollbar-corner {
       background: transparent;
   }
   .category-panel-header {
       display: none;
   }
   .category-panel-content {
       padding: 0 4px;
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 8px;
       flex-wrap: nowrap;
   }
   .category-side-panel:not(:hover) .category-panel-content {
       padding: 0 2px;
   }
   .category-panel-group {
       padding: 2px 0;
   }
   .category-side-panel:not(:hover) .category-panel-group {
       padding: 0;
   }
   .category-panel-title {
       padding: 6px 14px 4px;
       font-size: 11px;
       letter-spacing: 0.5px;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.55);
       font-weight: 700;
       opacity: 0;
       transition: opacity 0.4s ease;
       margin-bottom: 10px;
   }
   .category-side-panel:not(:hover) .category-panel-title {
       margin-bottom: 0;
   }
   /* Remove category titles completely */
   .category-panel-title {
       display: none;
   }
   /* Hide unwanted sidebar buttons */
   #sidePanelYouTubeBtn,
   #sidePanelPollsBtn,
   #sidePanelRandomGameBtn {
       display: none !important;
   }
   .category-panel-item {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 10px 14px;
       color: rgba(255, 255, 255, 0.85);
       text-decoration: none;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       font-weight: 600;
       font-size: 13px;
       border-radius: 12px;
       position: relative;
       min-width: auto;
       flex-shrink: 0;
       box-sizing: border-box;
       margin: 0;
       backdrop-filter: blur(10px);
       border: 1px solid transparent;
       overflow: hidden;
       white-space: nowrap;
   }
   .category-side-panel:not(:hover) .category-panel-item {
       padding: 10px 12px;
       margin: 0;
       justify-content: center;
       gap: 0;
       background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
       border-radius: 12px;
       border: 1px solid rgba(255, 255, 255, 0.15);
       box-shadow:
           0 2px 8px rgba(0, 0, 0, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(8px);
   }
   .category-panel-item:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
       color: #FFD700;
       border-color: rgba(255, 215, 0, 0.3);
       transform: translateY(0) translateX(4px) scale(1.02);
       box-shadow:
           0 4px 12px rgba(255, 215, 0, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.1);
   }
   .category-side-panel:hover .category-panel-item {
       transform: translateY(0) scale(1);
       opacity: 1;
       animation: slideInItem 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
   }
   .category-side-panel:hover .category-panel-item:nth-child(1) { animation-delay: 0.05s; }
   .category-side-panel:hover .category-panel-item:nth-child(2) { animation-delay: 0.1s; }
   .category-side-panel:hover .category-panel-item:nth-child(3) { animation-delay: 0.15s; }
   .category-side-panel:hover .category-panel-item:nth-child(4) { animation-delay: 0.2s; }
   .category-side-panel:hover .category-panel-item:nth-child(5) { animation-delay: 0.25s; }
   .category-side-panel:hover .category-panel-item:nth-child(6) { animation-delay: 0.3s; }
   .category-side-panel:hover .category-panel-item:nth-child(7) { animation-delay: 0.35s; }
   .category-side-panel:hover .category-panel-item:nth-child(8) { animation-delay: 0.4s; }
   .category-panel-item.active {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.15));
       color: #FFD700;
       font-weight: 700;
       border-color: rgba(255, 215, 0, 0.5);
       box-shadow:
           0 4px 16px rgba(255, 215, 0, 0.3),
           inset 0 1px 0 rgba(255, 255, 255, 0.2);
       transform: translateY(0) scale(1.02);
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   }

   /* Responsive sidebar adjustments for smaller screens */
   @media (max-width: 768px) {
       .category-side-panel {
           height: 65px;
           max-width: 95%;
           padding: 0 12px;
       }
       .category-side-panel:hover {
           height: 75px;
           padding: 0 16px;
       }
   }

   @media (max-width: 480px) {
       .category-side-panel {
           height: 60px;
           max-width: 98%;
           padding: 0 8px;
       }
       .category-side-panel:hover {
           height: 70px;
           padding: 0 12px;
       }
       .category-panel-item {
           padding: 8px 10px;
           font-size: 12px;
       }
       .category-panel-item i {
           font-size: 16px;
       }
   }
   
   /* Sidebar Drawing Button */
   #sidePanelDrawingBtn.category-panel-item,
   .category-panel-item[id*="Drawing"] {
       background: transparent !important;
       background-size: 200% 200% !important;
       border-left: 3px solid rgba(255, 20, 147, 0.6) !important;
       color: #FF1493 !important;
       position: relative;
       overflow: hidden;
       animation: drawingGradient 5s ease infinite !important;
   }
   #sidePanelDrawingBtn.category-panel-item::before,
   .category-panel-item[id*="Drawing"]::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 20, 147, 0.2), transparent);
       transition: left 0.5s ease;
   }
   #sidePanelDrawingBtn.category-panel-item:hover::before,
   .category-panel-item[id*="Drawing"]:hover::before {
       left: 100%;
   }
   #sidePanelDrawingBtn.category-panel-item:hover,
   .category-panel-item[id*="Drawing"]:hover {
       background: transparent !important;
       border-left-color: rgba(255, 20, 147, 0.9) !important;
       color: #FF69B4 !important;
       box-shadow: inset 0 0 15px rgba(255, 20, 147, 0.3);
   }
   #sidePanelDrawingBtn.category-panel-item i,
   .category-panel-item[id*="Drawing"] i {
       color: #FF1493 !important;
       filter: drop-shadow(0 0 4px rgba(255, 20, 147, 0.8))
               drop-shadow(0 0 6px rgba(255, 69, 0, 0.6)) !important;
       animation: drawingIconBrush 2.5s ease-in-out infinite !important;
   }
   #sidePanelDrawingBtn.category-panel-item:hover i,
   .category-panel-item[id*="Drawing"]:hover i {
       color: #FF69B4 !important;
       transform: scale(1.2) rotate(-8deg);
   }
   .category-panel-item.active::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 3px;
       background: #FFD700;
   }
   .category-panel-item.disabled {
       opacity: 0.5;
       cursor: not-allowed;
       pointer-events: none;
   }
   .category-panel-item i {
       font-size: 18px;
       width: 20px;
       text-align: center;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 1 !important;
   }
   .category-panel-item img {
       width: 20px;
       height: 20px;
       object-fit: contain;
       opacity: 1 !important;
   }
   .category-panel-label-container {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       opacity: 0;
       transition: opacity 0.4s ease;
       max-width: 0;
       overflow: hidden;
   }
   .category-side-panel:hover .category-panel-label-container {
       opacity: 1;
       max-width: 200px;
       margin-left: 6px;
   }
   /* Make all elements stretch across full page width always */
   .games-grid-container {
       margin-left: 0 !important;
       width: 100% !important;
   }
   #visitorCounter {
       margin-left: 0 !important;
       width: 100% !important;
   }
   .scattered-games-section {
       margin-left: 0 !important;
       width: 100% !important;
   }
   .random-games-section {
       margin-left: 0 !important;
       width: 100% !important;
   }
   .game-of-season-container {
       width: 100% !important;
   }
   .random-game-cta {
       width: calc(100% - 30px) !important;
   }
   /* Hide game categories except "All Games" and "Recently played" */
   .category-panel-item[href*="category=racing"],
   .category-panel-item[href*="category=action"],
   .category-panel-item[href*="category=puzzle"],
   .category-panel-item[href*="category=shooting"],
   .category-panel-item[href*="games-new.html"],
   .category-panel-item[href*="popular"],
   .category-panel-item[href*="trending"] {
       display: none !important;
   }
   .category-panel-item button {
       background: none;
       border: none;
       width: 100%;
       text-align: left;
       padding: 0;
       margin: 0;
       font: inherit;
       color: inherit;
       cursor: pointer;
       display: flex;
       align-items: center;
       gap: 12px;
   }
   .category-panel-divider {
       width: 1px;
       height: 40px;
       background: rgba(255, 255, 255, 0.1);
       margin: 0 4px;
       border: none;
       flex-shrink: 0;
   }
   .category-panel-actions {
       padding: 4px 0;
       margin: 8px 0;
       display: flex;
       flex-direction: column;
       gap: 6px;
   }
   .category-side-panel:not(:hover) .category-panel-actions {
       padding: 0;
       margin: 0;
   }
   .category-panel-action-btn {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1)) !important;
       border: 2px solid rgba(255, 215, 0, 0.4) !important;
       border-radius: 12px !important;
       margin: 0 8px !important;
       font-weight: 700 !important;
       width: calc(100% - 20px) !important;
       box-sizing: border-box !important;
       padding: 12px 16px !important;
       font-size: 14px !important;
       white-space: nowrap !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       justify-content: center !important;
       align-items: center !important;
       box-shadow:
           0 4px 12px rgba(255, 215, 0, 0.2),
           inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
       backdrop-filter: blur(10px) !important;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
       position: relative !important;
       overflow: hidden !important;
   }
   .category-panel-action-btn .category-panel-label-container {
       white-space: nowrap !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
   }
   .category-panel-action-btn:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.2)) !important;
       border-color: rgba(255, 215, 0, 0.6) !important;
       color: #FFD700 !important;
       transform: translateY(-2px) scale(1.02) !important;
       box-shadow:
           0 6px 16px rgba(255, 215, 0, 0.3),
           inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
   }
   .category-panel-action-btn i.fab.fa-youtube {
       color: #FF0000 !important;
       flex-shrink: 0 !important;
   }
   .category-panel-action-btn:hover i.fab.fa-youtube {
       color: #FF4444 !important;
   }
   .category-panel-action-btn i.fas.fa-dice {
       flex-shrink: 0 !important;
   }
   .category-panel-nav {
       padding: 0 4px;
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 8px;
       flex-wrap: nowrap;
   }
   .category-side-panel:not(:hover) .category-panel-nav {
       padding: 0 2px;
   }
   .category-side-panel {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       animation: sidebarGlow 4s ease-in-out infinite;
   }
   @keyframes sidebarGlow {
       0%, 100% {
           box-shadow:
               4px 0 20px rgba(0, 0, 0, 0.4),
               0 0 40px rgba(255, 215, 0, 0.08),
               inset 0 1px 0 rgba(255, 255, 255, 0.1);
       }
       50% {
           box-shadow:
               4px 0 25px rgba(0, 0, 0, 0.5),
               0 0 50px rgba(255, 215, 0, 0.12),
               inset 0 1px 0 rgba(255, 255, 255, 0.15);
       }
   }
   @media (max-width: 1024px) {
       #visitorCounter {
           width: 100%;
           margin-left: 0;
       }
       header {
           margin-left: 0;
           width: 100%;
       }
       .games-grid-container {
           margin-left: 0;
           width: 100%;
       }
      #searchResultsGrid {
          grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
          gap: 10px !important;
      }
   }
   /* Responsive styles for sidebar on smaller screens - ensure all buttons visible without scrolling */
   @media (max-width: 1024px) {
       .category-side-panel {
           padding: 15px 0;
       }
       .category-side-panel:hover {
           width: 200px;
       }
       .category-panel-item {
           padding: 7px 11px;
           font-size: 12.5px;
           gap: 9px;
       }
       .category-panel-item i {
           font-size: 15px;
           width: 17px;
       }
       .category-panel-divider {
           margin: 5px 11px;
       }
       .category-panel-content {
           padding: 5px 0;
       }
       .category-panel-actions {
           padding: 5px 0;
           margin: 10px 0;
           gap: 5px;
       }
       .category-side-panel:not(:hover) .category-panel-actions {
           padding: 0;
           margin: 0;
       }
       .category-panel-action-btn {
           padding: 7px 9px !important;
           font-size: 11.5px !important;
           margin: 0 5px !important;
       }
       .category-panel-nav {
           padding: 5px 0;
       }
       .category-side-panel:not(:hover) .category-panel-nav {
           padding: 0;
       }
   }
   /* For very small screens or short heights */
   @media (max-height: 700px) {
       .category-side-panel {
           padding: 10px 0 !important;
       }
       .category-panel-item {
           padding: 4px 8px !important;
           font-size: 11px !important;
           gap: 6px !important;
       }
       .category-panel-item i {
           font-size: 13px !important;
           width: 14px !important;
       }
       .category-panel-divider {
           margin: 2px 8px !important;
       }
       .category-panel-content {
           padding: 2px 0 !important;
       }
       .category-panel-actions {
           padding: 2px 0 !important;
           margin: 4px 0 !important;
           gap: 2px !important;
       }
       .category-side-panel:not(:hover) .category-panel-actions {
           padding: 0 !important;
           margin: 0 !important;
       }
       .category-panel-action-btn {
           padding: 4px 6px !important;
           font-size: 10px !important;
           margin: 0 3px !important;
       }
       .category-panel-nav {
           padding: 2px 0 !important;
       }
       .category-side-panel:not(:hover) .category-panel-nav {
           padding: 0 !important;
       }
   }
   @media (max-width: 768px) {
       .category-side-panel {
           height: 65px;
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
           max-width: 95%;
           padding: 0 12px !important;
           overflow-x: auto;
           overflow-y: hidden;
           z-index: 16000;
       }
       .category-side-panel:hover {
           height: 75px;
           padding: 0 16px !important;
       }
       .category-side-panel.open {
           height: 75px;
           padding: 0 16px !important;
       }
       /* Header buttons and content are already centered by default on mobile */
       .category-panel-item {
           padding: 6px 10px !important;
           font-size: 12px !important;
           gap: 8px !important;
       }
       .category-panel-item i {
           font-size: 14px !important;
           width: 16px !important;
       }
       .category-panel-divider {
           margin: 4px 10px !important;
           height: 1px !important;
       }
       .category-panel-content {
           padding: 4px 0 !important;
       }
       .category-panel-actions {
           padding: 4px 0 !important;
           margin: 8px 0 !important;
           gap: 4px !important;
       }
       .category-side-panel:not(:hover) .category-panel-actions {
           padding: 0 !important;
           margin: 0 !important;
       }
       .category-panel-action-btn {
           padding: 6px 8px !important;
           font-size: 11px !important;
           margin: 0 4px !important;
       }
       .category-panel-nav {
           padding: 4px 0 !important;
       }
       .category-side-panel:not(:hover) .category-panel-nav {
           padding: 0 !important;
       }
       .category-panel-label-container {
           font-size: inherit !important;
       }
       .category-side-panel {
           z-index: 10001 !important;
       }
       .category-side-panel.open {
           left: 0;
       }
       .category-panel-action-btn {
           font-size: 12px !important;
           padding: 8px 10px !important;
           margin: 0 6px !important;
           width: calc(100% - 12px) !important;
       }
       .category-panel-action-btn .category-panel-label-container {
           font-size: 11px !important;
       }
       #visitorCounter {
           left: 0;
           width: 100% !important;
           margin-left: 0 !important;
       }
       .visitor-counter-bar {
           width: 100% !important;
           margin-left: 0 !important;
           border-radius: 0;
       }
       header {
           margin-left: 0 !important;
           width: 100% !important;
       }
       .games-grid-container {
           margin-left: 0 !important;
           width: 100% !important;
           padding: 20px 15px !important;
       }
      #searchResultsGrid {
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
          gap: 8px !important;
      }
      #searchResultsGrid .big-game-cube {
          min-width: 150px !important;
          max-width: 180px !important;
      }
       .games-search-container {
           padding: 0 15px !important;
       }
       .games-search-wrapper {
           min-width: 100% !important;
           max-width: 100% !important;
       }
   }
   @media (max-width: 480px) {
       .category-side-panel {
           width: 60px;
           z-index: 10001 !important;
           padding-top: 25px !important;
       }
       .category-side-panel:hover {
           width: 160px;
       }
       .category-panel-item {
           padding: 5px 8px !important;
           font-size: 11px !important;
           gap: 6px !important;
       }
       .category-panel-item i {
           font-size: 13px !important;
           width: 14px !important;
       }
       .category-panel-divider {
           margin: 3px 8px !important;
       }
       .category-panel-content {
           padding: 3px 0 !important;
       }
       .category-panel-actions {
           padding: 3px 0 !important;
           margin: 6px 0 !important;
           gap: 3px !important;
       }
       .category-side-panel:not(:hover) .category-panel-actions {
           padding: 0 !important;
           margin: 0 !important;
       }
       .category-panel-action-btn {
           font-size: 10px !important;
           padding: 5px 6px !important;
           margin: 0 3px !important;
           width: calc(100% - 6px) !important;
       }
       .category-panel-action-btn .category-panel-label-container {
           font-size: 10px !important;
       }
       .category-panel-action-btn i {
           font-size: 12px !important;
       }
       .category-panel-nav {
           padding: 3px 0 !important;
       }
       .category-side-panel:not(:hover) .category-panel-nav {
           padding: 0 !important;
       }
       #searchResultsGrid {
           grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
           gap: 8px !important;
       }
       #searchResultsGrid .big-game-cube {
           min-width: 150px !important;
           max-width: 180px !important;
       }
       .games-grid-container {
           padding: 15px 10px !important;
       }
   }
    @media (max-width: 360px) {
       .category-side-panel {
           width: 60px;
       }
       .category-side-panel:hover {
           width: 140px;
       }
       .category-panel-action-btn {
           font-size: 10px !important;
           padding: 6px 6px !important;
       }
       .category-panel-action-btn .category-panel-label-container {
           font-size: 9px !important;
       }
        #searchResultsGrid {
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        }
        #searchResultsGrid .big-game-cube {
            min-width: 130px !important;
            max-width: 160px !important;
        }
    }
      #iframeContainer {
       position: relative;
       margin: 30px auto;
       max-width: 1400px;
       border-radius: 24px;
       overflow: hidden;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
       border: 1px solid rgba(255, 215, 0, 0.1);
       background: rgba(15, 15, 25, 0.3);
       backdrop-filter: blur(10px);
       display: none;
   }
   .iframe-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 15px 25px;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
       border-bottom: 2px solid rgba(255, 215, 0, 0.2);
   }
   .back-to-games-btn {
       padding: 10px 20px;
       border-radius: 12px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       font-weight: 600;
       font-size: 14px;
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   .iframe-fullscreen-btn {
       padding: 10px 16px;
       border-radius: 12px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       background: rgba(15, 15, 25, 0.8);
       color: #FFD700;
       cursor: pointer;
       font-weight: 600;
       font-size: 14px;
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   .iframe-fullscreen-btn:hover {
       background: rgba(255, 215, 0, 0.15);
       border-color: rgba(255, 215, 0, 0.5);
       transform: translateY(-1px);
   }
   .back-to-games-btn:hover {
       background: rgba(255, 215, 0, 0.2);
       border-color: rgba(255, 215, 0, 0.5);
       transform: translateX(-3px);
   }
   .current-site-title {
       font-size: 18px;
       font-weight: 700;
       color: #FFD700;
       text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
   }
   #embeddedSite {
       width: 100%;
       height: calc(100vh - 450px);
       min-height: 600px;
       border: none;
       border-radius: 0 0 24px 24px;
       box-sizing: border-box;
       transition: all 0.3s ease;
       background: #ffffff;
       display: block;
   }
   #iframeContainer:fullscreen,
   #iframeContainer:-webkit-full-screen {
       margin: 0;
       width: 100vw;
       max-width: none;
       height: 100vh;
       border-radius: 0;
       box-shadow: none;
       background: #0b0b12;
   }
   #iframeContainer:fullscreen .iframe-header,
   #iframeContainer:-webkit-full-screen .iframe-header {
       border-radius: 0;
   }
   #iframeContainer:fullscreen #embeddedSite,
   #iframeContainer:-webkit-full-screen #embeddedSite {
       height: calc(100vh - 70px);
       min-height: 0;
       border-radius: 0;
   }
      @keyframes neonPulse {
       0%, 100% {
           box-shadow:
               0 0 20px rgba(0, 150, 255, 0.8),
               0 0 40px rgba(0, 150, 255, 0.6),
               0 0 60px rgba(0, 150, 255, 0.4),
               0 0 80px rgba(255, 255, 255, 0.3),
               inset 0 0 20px rgba(0, 150, 255, 0.2);
       }
       50% {
           box-shadow:
               0 0 30px rgba(0, 150, 255, 1),
               0 0 60px rgba(0, 150, 255, 0.8),
               0 0 90px rgba(0, 150, 255, 0.6),
               0 0 120px rgba(255, 255, 255, 0.5),
               inset 0 0 30px rgba(0, 150, 255, 0.4);
       }
   }
   @keyframes neonRotate {
       0% {
           transform: rotate(0deg);
           border-color: rgba(0, 150, 255, 0.8);
       }
       25% {
           border-color: rgba(255, 255, 255, 0.9);
       }
       50% {
           transform: rotate(180deg);
           border-color: rgba(0, 150, 255, 0.8);
       }
       75% {
           border-color: rgba(255, 255, 255, 0.9);
       }
       100% {
           transform: rotate(360deg);
           border-color: rgba(0, 150, 255, 0.8);
       }
   }
   @keyframes neonRotateReverse {
       0% {
           transform: rotate(360deg);
           border-color: rgba(255, 255, 255, 0.9);
       }
       25% {
           border-color: rgba(0, 150, 255, 0.8);
       }
       50% {
           transform: rotate(180deg);
           border-color: rgba(255, 255, 255, 0.9);
       }
       75% {
           border-color: rgba(0, 150, 255, 0.8);
       }
       100% {
           transform: rotate(0deg);
           border-color: rgba(255, 255, 255, 0.9);
       }
   }
   #fullscreenPopup {
       position: fixed; top:0; left:0; width:100%; height:100%; display:flex;
       justify-content:center; align-items:center; z-index:10001; opacity:0; pointer-events:none;
       background: linear-gradient(135deg, rgba(0,0,0,0.95), rgba(0, 50, 100, 0.3)); backdrop-filter:blur(10px);
       flex-direction: column; color:#ffffff; text-align:center;
       transition: opacity 0.3s ease;
   }
   #fullscreenPopup.show { opacity:1; pointer-events:auto; }
   #fullscreenPopup .popupContent {
       max-width: 900px; width: 90%; padding: 30px 40px;
       background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(0, 50, 100, 0.3));
       backdrop-filter:blur(25px); border-radius: 30px;
       box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
       color: #ffffff; position: relative; overflow: visible;
       cursor: pointer;
       animation: neonPulse 2s ease-in-out infinite;
       border: 3px solid rgba(0, 150, 255, 0.5);
   }
   .neon-ring {
       position: absolute;
       border-radius: 30px;
       pointer-events: none;
       z-index: -1;
       top: -6px;
       left: -6px;
       right: -6px;
       bottom: -6px;
       border-radius: 30px;
       overflow: hidden;
   }
   .neon-ring::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       border-radius: 30px;
       padding: 3px;
       background: linear-gradient(
           90deg,
           rgba(0, 150, 255, 0.9) 0%,
           rgba(255, 255, 255, 0.9) 25%,
           rgba(0, 150, 255, 0.9) 50%,
           rgba(255, 0, 150, 0.9) 75%,
           rgba(0, 150, 255, 0.9) 100%
       );
       background-size: 300% 100%;
       -webkit-mask:
           linear-gradient(#fff 0 0) content-box,
           linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask:
           linear-gradient(#fff 0 0) content-box,
           linear-gradient(#fff 0 0);
       mask-composite: exclude;
       animation: colorFlow 3s ease-in-out infinite;
   }
   @keyframes colorFlow {
       0%, 100% {
           background-position: 0% 50%;
       }
       50% {
           background-position: 100% 50%;
       }
   }
   .neon-ring-1 {
       display: block;
   }
   .neon-ring-2,
   .neon-ring-3 {
       display: none;
   }
   .popup-header h1 {
       font-size: 36px;
       margin: 0 0 15px 0;
       font-weight: 800;
       color: #ffffff;
       text-shadow:
           0 0 20px rgba(0, 150, 255, 0.8),
           0 0 40px rgba(0, 150, 255, 0.6),
           0 0 60px rgba(255, 255, 255, 0.4);
       letter-spacing: 1px;
   }
   .popup-body {
       text-align: left;
   }
   .popup-intro {
       font-size: 18px;
       margin: 0 0 20px 0;
       line-height: 1.5;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       text-align: center;
       text-shadow: 0 2px 10px rgba(0, 150, 255, 0.4);
   }
   .popup-features {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 15px;
       margin: 20px 0;
   }
   .popup-feature {
       background: rgba(0, 50, 100, 0.2);
       padding: 15px 20px;
       border-radius: 15px;
       border: 2px solid rgba(0, 150, 255, 0.3);
       transition: all 0.3s ease;
       backdrop-filter: blur(10px);
   }
   .popup-feature:hover {
       transform: translateY(-5px);
       border-color: rgba(0, 150, 255, 0.6);
       box-shadow: 0 10px 30px rgba(0, 150, 255, 0.3);
   }
   .popup-feature i {
       font-size: 24px;
       color: rgba(0, 150, 255, 0.9);
       margin-bottom: 10px;
       display: block;
       text-shadow: 0 0 15px rgba(0, 150, 255, 0.6);
   }
   .popup-feature h3 {
       font-size: 16px;
       margin: 0 0 8px 0;
       color: #ffffff;
       font-weight: 700;
   }
   .popup-feature p {
       font-size: 13px;
       margin: 0;
       color: rgba(255, 255, 255, 0.8);
       line-height: 1.4;
   }
   .popup-footer {
       margin-top: 20px;
       padding-top: 15px;
       border-top: 2px solid rgba(0, 150, 255, 0.3);
       text-align: center;
   }
   .popup-cta {
       font-size: 16px;
       margin: 0 0 10px 0;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 600;
       text-shadow: 0 2px 10px rgba(0, 150, 255, 0.4);
   }
   .popup-dont-show {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       color: rgba(229, 231, 235, 0.9);
       cursor: pointer;
       user-select: none;
   }
   .popup-dont-show input[type="checkbox"] {
       width: 14px;
       height: 14px;
       accent-color: #fbbf24;
   }
   #fullscreenPopup .closeBtn {
       position:absolute; top:25px; right:25px; border: none;
       background: rgba(0, 150, 255, 0.3); color:#ffffff;
       font-size:28px; cursor:pointer; width: 50px; height: 50px;
       border-radius: 50%; backdrop-filter:blur(10px);
       transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;
       border: 2px solid rgba(0, 150, 255, 0.6);
       z-index: 10;
       box-shadow: 0 0 15px rgba(0, 150, 255, 0.4);
   }
   #fullscreenPopup .closeBtn:hover {
       background: rgba(0, 150, 255, 0.6);
       transform: scale(1.15) rotate(90deg);
       box-shadow: 0 0 25px rgba(0, 150, 255, 0.8);
   }
   @media (max-width: 768px) {
       #fullscreenPopup .popupContent {
           max-width: 95%;
           padding: 40px 30px;
       }
       .popup-features {
           grid-template-columns: 1fr;
           gap: 20px;
       }
       .popup-header h1 {
           font-size: 32px;
       }
   }
      #closeThemeBtn:hover, #closeAchievementsBtn:hover, #closeStatsBtn:hover, #closeAdminBtn:hover {
     background: rgba(255, 215, 0, 0.2) !important;
     transform: scale(1.05);
   }
      #starCanvas {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       z-index: -1;
   }
      #interactiveBackground {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       z-index: -1;
   }
      #sparkleCanvas {
       position: absolute;
       top:0;
       left:0;
       width:100%;
       height:100%;
       pointer-events: none;    }
     #customContextMenu {
       position: fixed;
       background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.16), rgba(15, 23, 42, 0.96));
       backdrop-filter: blur(18px);
       border: 1px solid rgba(148, 163, 184, 0.4);
       border-radius: 16px;
       padding: 6px 0;
       box-shadow:
         0 18px 45px rgba(15, 23, 42, 0.85),
         0 0 0 1px rgba(15, 23, 42, 0.75);
       z-index: 10000;
       display: none;
       min-width: 210px;
       color: #e5e7eb;
       overflow: hidden;
   }
   #customContextMenu .menu-section-label {
       padding: 6px 14px 4px;
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.12em;
       color: rgba(148, 163, 184, 0.9);
       opacity: 0.9;
   }
   #customContextMenu .menu-separator {
       height: 1px;
       margin: 4px 8px;
       background: radial-gradient(circle, rgba(148, 163, 184, 0.45), rgba(15, 23, 42, 0.2));
   }
   #customContextMenu .menu-item {
       display: flex;
       align-items: center;
       gap: 10px;
       width: 100%;
       padding: 7px 14px;
       background: none;
       border: none;
       color: inherit;
       text-align: left;
       cursor: pointer;
       font-size: 13px;
       font-weight: 500;
       transition: background 0.16s ease, color 0.16s ease, transform 0.08s ease;
   }
   #customContextMenu .menu-item i {
       width: 16px;
       text-align: center;
       color: rgba(148, 163, 184, 0.95);
       font-size: 14px;
   }
   #customContextMenu .menu-item span {
       flex: 1;
   }
   #customContextMenu .menu-item:hover {
       background: linear-gradient(90deg, rgba(56, 189, 248, 0.18), rgba(59, 130, 246, 0.22));
       color: #f9fafb;
       transform: translateY(-1px);
   }
.chat-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: clamp(360px, 82vw, 600px);
    max-height: min(78vh, 820px);
    overflow: hidden;
    background: rgba(15, 15, 25, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.1);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    z-index: 15000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: chatSlideIn 0.4s ease-out;
  }

.chat-container.chat-glass {
    width: 380px;
    height: 520px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    right: 20px;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.chat-glass iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.chat-container.chat-glass .chat-header,
.chat-container.chat-glass .chat-input-area {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.chat-container.chat-glass .chat-header::before {
    display: none;
}

.chat-container.chat-glass .chat-icon-wrapper {
    background: rgba(255, 255, 255, 0.22);
    color: #0b0c12;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.chat-container.chat-glass .chat-title {
    -webkit-text-fill-color: initial;
    color: #f5f6fa;
}

.chat-container.chat-glass .chat-header-btn,
.chat-container.chat-glass .chat-toolbar-btn {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #f5f6fa;
}

.chat-container.chat-glass .chat-header-btn:hover,
.chat-container.chat-glass .chat-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}

.chat-container.chat-glass .chat-input {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.chat-container.chat-glass .chat-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.chat-container.chat-glass .chat-send-btn {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
    box-shadow: none;
}

.chat-container.chat-glass .chat-send-btn:hover {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.chat-container.chat-glass .emoji-picker {
    background: rgba(15, 15, 25, 0.88);
    border-color: rgba(255, 255, 255, 0.25);
}

  /* Responsive chat sizing */
  @media (max-width: 1024px) {
    .chat-container {
      width: clamp(340px, 90vw, 560px);
      bottom: 16px;
      right: 16px;
      max-height: min(74vh, 760px);
    }
    .chat-container.chat-glass {
      width: min(420px, 90vw);
      height: 520px;
      bottom: 16px;
      right: 16px;
      max-height: calc(100vh - 32px);
    }
  }
  @media (max-width: 768px) {
    .chat-container {
      width: clamp(320px, 94vw, 520px);
      bottom: 12px;
      right: 12px;
      left: 12px;
      margin: 0 auto;
      max-height: min(70vh, 700px);
    }
    .chat-container.chat-glass {
      width: calc(100vw - 24px);
      left: 12px;
      right: 12px;
      height: min(480px, calc(100vh - 32px));
    }
  }
  @media (max-width: 540px) {
    .chat-container {
      width: 96vw;
      left: 2vw;
      right: 2vw;
      bottom: 10px;
      max-height: 66vh;
    }
    .chat-container.chat-glass {
      width: calc(100vw - 16px);
      left: 8px;
      right: 8px;
      bottom: 10px;
      height: min(460px, calc(100vh - 20px));
    }
  }
   @keyframes chatSlideIn {
       from {
           transform: translateY(20px) scale(0.95);
           opacity: 0;
       }
       to {
           transform: translateY(0) scale(1);
           opacity: 1;
       }
   }
.chat-header {
    padding: 12px 18px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 2px solid rgba(255, 215, 0, 0.15);
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
       position: relative;
       overflow: hidden;
   }
   .chat-header::before {
       content: '';
       position: absolute;
       inset: 8px 16px auto 16px;
       height: 12px;
       background: linear-gradient(90deg, rgba(255, 215, 0, 0) 0%, rgba(255, 215, 0, 0.4) 25%, rgba(255, 165, 0, 0.45) 50%, rgba(255, 215, 0, 0.4) 75%, rgba(255, 215, 0, 0) 100%);
       border-radius: 12px;
       filter: drop-shadow(0 4px 14px rgba(255, 215, 0, 0.35));
       animation: shimmer 4s ease-in-out infinite;
       z-index: 2;
       pointer-events: none;
   }

   /* Blog quick topics */
   .blog-quick-topics {
       margin-top: 40px;
       padding-top: 30px;
       border-top: 1px solid rgba(148, 163, 184, 0.3);
   }
   .blog-quick-topics h2 {
       font-size: 24px;
       margin-bottom: 8px;
   }
   .blog-quick-intro {
       margin-bottom: 18px;
       color: rgba(148, 163, 184, 0.95);
       font-size: 14px;
   }
   .blog-quick-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 16px;
   }
   .blog-quick-item {
       display: block;
       padding: 14px 16px;
       border-radius: 14px;
       background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
       border: 1px solid rgba(148, 163, 184, 0.35);
       box-shadow: 0 14px 36px rgba(15, 23, 42, 0.65);
       text-decoration: none;
       color: inherit;
   }
   .blog-quick-item h3 {
       font-size: 15px;
       margin-bottom: 6px;
   }
   .blog-quick-item p {
       font-size: 13px;
       color: rgba(148, 163, 184, 0.98);
   }
   @keyframes headerGlow {
       0%, 100% { opacity: 0.5; }
       50% { opacity: 1; }
   }
   .chat-header-left {
       display: flex;
       align-items: center;
       gap: 15px;
   }
   .chat-icon-wrapper {
       width: 45px;
       height: 45px;
       background: linear-gradient(135deg, #FFD700, #FFA500);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       color: rgba(0, 0, 0, 0.8);
       box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
   }
   .chat-title {
       margin: 0;
       font-size: 20px;
       font-weight: 700;
       background: linear-gradient(135deg, #FFD700, #FFA500);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   .typing-indicator {
       font-size: 12px;
       color: rgba(255, 255, 255, 0.6);
       font-style: italic;
   }
   .chat-header-right {
       display: flex;
       gap: 8px;
   }
   .chat-header-btn {
       width: 36px;
       height: 36px;
       border-radius: 10px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       font-size: 14px;
   }
   .chat-header-btn:hover {
       background: rgba(255, 215, 0, 0.2);
       border-color: rgba(255, 215, 0, 0.4);
       transform: scale(1.1);
   }
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    min-height: 240px;
    max-height: calc(min(72vh, 540px));
    scroll-behavior: smooth;
}
   .chat-messages::-webkit-scrollbar {
       width: 8px;
   }
   .chat-messages::-webkit-scrollbar-track {
       background: rgba(255, 255, 255, 0.05);
       border-radius: 10px;
   }
   .chat-messages::-webkit-scrollbar-thumb {
       background: rgba(255, 215, 0, 0.3);
       border-radius: 10px;
   }
   .chat-messages::-webkit-scrollbar-thumb:hover {
       background: rgba(255, 215, 0, 0.5);
   }
.chat-input-area {
    padding: 10px 18px;
       border-top: 2px solid rgba(255, 215, 0, 0.15);
       background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
   }
   .chat-toolbar {
       display: flex;
       gap: 8px;
       margin-bottom: 12px;
       flex-wrap: wrap;
   }
   .chat-toolbar-btn {
       width: 36px;
       height: 36px;
       border-radius: 10px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       font-size: 14px;
   }
   .chat-toolbar-btn:hover {
       background: rgba(255, 215, 0, 0.2);
       border-color: rgba(255, 215, 0, 0.4);
       transform: translateY(-2px);
   }
   .chat-input-wrapper {
       display: flex;
       gap: 10px;
       align-items: center;
   }
   .chat-input {
       flex: 1;
       padding: 14px 18px;
       border-radius: 14px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 255, 255, 0.05);
       color: rgba(255, 255, 255, 0.9);
       font-size: 14px;
       transition: all 0.3s ease;
   }
   .chat-input:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.5);
       background: rgba(255, 255, 255, 0.08);
       box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1);
   }
   .chat-input::placeholder {
       color: rgba(255, 255, 255, 0.4);
   }
   .chat-send-btn {
       width: 48px;
       height: 48px;
       border-radius: 14px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       font-size: 16px;
   }
   .chat-send-btn:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.25));
       border-color: rgba(255, 215, 0, 0.5);
       transform: translateY(-2px) scale(1.05);
       box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
   }
   .emoji-picker {
       position: absolute;
       bottom: 80px;
       right: 24px;
       background: rgba(15, 15, 25, 0.98);
       backdrop-filter: blur(12px);
       border: 2px solid rgba(255, 215, 0, 0.3);
       border-radius: 16px;
       padding: 20px;
       max-width: 320px;
       max-height: 250px;
       overflow-y: auto;
       z-index: 10001;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
       display: none;    }
   .emoji-grid {
       display: grid;
       grid-template-columns: repeat(8, 1fr);
       gap: 10px;
   }
   .emoji-option {
       cursor: pointer;
       font-size: 24px;
       padding: 8px;
       text-align: center;
       border-radius: 8px;
       transition: all 0.2s ease;
       background: rgba(255, 255, 255, 0.03);
   }
   .emoji-option:hover {
       background: rgba(255, 215, 0, 0.2);
       transform: scale(1.2);
   }
   .voice-indicator {
       position: absolute;
       bottom: 80px;
       left: 24px;
       background: rgba(220, 53, 69, 0.95);
       backdrop-filter: blur(10px);
       color: white;
       padding: 12px 18px;
       border-radius: 12px;
       font-weight: 600;
       display: none;
       align-items: center;
       gap: 10px;
       box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
       animation: voicePulse 1s ease-in-out infinite;
       z-index: 10002;
   }
   .fullscreen-voice-indicator {
       position: fixed;
       bottom: 120px;
       left: 50%;
       transform: translateX(-50%);
       background: rgba(220, 53, 69, 0.95);
       backdrop-filter: blur(10px);
       color: white;
       padding: 16px 24px;
       border-radius: 16px;
       font-weight: 600;
       display: none;
       align-items: center;
       gap: 12px;
       box-shadow: 0 12px 35px rgba(220, 53, 69, 0.5);
       animation: voicePulse 1s ease-in-out infinite;
       z-index: 20001;
   }
   @keyframes voicePulse {
       0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4); }
       50% { transform: scale(1.05); box-shadow: 0 12px 35px rgba(220, 53, 69, 0.6); }
   }
   .fullscreen-chat-modal {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.98);
       backdrop-filter: blur(10px);
       z-index: 20000;
       display: none;
       animation: fullscreenChatFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   @keyframes fullscreenChatFadeIn {
       from {
           opacity: 0;
           backdrop-filter: blur(0px);
       }
       to {
           opacity: 1;
           backdrop-filter: blur(10px);
       }
   }
   .fullscreen-chat-container {
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
       max-width: 1800px;
       margin: 0 auto;
   }
.fullscreen-chat-header {
    padding: 16px 22px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 2px solid rgba(255, 215, 0, 0.2);
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
       backdrop-filter: blur(12px);
       position: relative;
       overflow: hidden;
   }
   .fullscreen-chat-header::before {
       content: '';
       position: absolute;
       inset: 8px 16px auto 16px;
       height: 12px;
       background: linear-gradient(90deg, rgba(255, 215, 0, 0) 0%, rgba(255, 215, 0, 0.4) 25%, rgba(255, 165, 0, 0.45) 50%, rgba(255, 215, 0, 0.4) 75%, rgba(255, 215, 0, 0) 100%);
       border-radius: 12px;
       filter: drop-shadow(0 4px 14px rgba(255, 215, 0, 0.35));
       animation: shimmer 4s ease-in-out infinite;
       z-index: 2;
       pointer-events: none;
   }
   .fullscreen-chat-header-left {
       display: flex;
       align-items: center;
       gap: 20px;
   }
   .fullscreen-chat-icon {
       width: 70px;
       height: 70px;
       background: linear-gradient(135deg, #FFD700, #FFA500);
       border-radius: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 32px;
       color: rgba(0, 0, 0, 0.8);
       box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
   }
   .fullscreen-chat-title {
       margin: 0;
       font-size: 42px;
       font-weight: 800;
       background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   .fullscreen-chat-subtitle {
       margin: 8px 0 0 0;
       color: rgba(255, 255, 255, 0.7);
       font-size: 16px;
   }
   .fullscreen-chat-header-right {
       display: flex;
       gap: 12px;
       align-items: center;
   }
   .fullscreen-chat-btn {
       width: 50px;
       height: 50px;
       border-radius: 14px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       font-size: 18px;
       position: relative;
   }
   .fullscreen-chat-btn:hover {
       background: rgba(255, 215, 0, 0.2);
       border-color: rgba(255, 215, 0, 0.5);
       transform: scale(1.1);
   }
   .fullscreen-chat-close:hover {
       background: rgba(255, 0, 0, 0.2);
       border-color: rgba(255, 0, 0, 0.4);
       color: #ff4444;
   }
   .fullscreen-chat-badge {
       position: absolute;
       top: -5px;
       right: -5px;
       background: rgba(255, 0, 0, 0.8);
       color: white;
       font-size: 11px;
       font-weight: 700;
       padding: 3px 7px;
       border-radius: 12px;
       min-width: 20px;
       text-align: center;
   }
   .fullscreen-chat-content {
       flex: 1;
       display: flex;
       overflow: hidden;
       position: relative;
   }
   .fullscreen-chat-sidebar {
       width: 300px;
       background: rgba(15, 15, 25, 0.8);
       backdrop-filter: blur(10px);
       border-right: 2px solid rgba(255, 215, 0, 0.2);
       display: flex;
       flex-direction: column;
       transition: transform 0.3s ease, left 0.3s ease;
       position: relative;
   }
      .fullscreen-chat-sidebar:not(.open) {
       transform: translateX(-100%);
   }
   .fullscreen-chat-sidebar.open {
       transform: translateX(0);
   }
   .fullscreen-chat-sidebar-header {
       padding: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 2px solid rgba(255, 215, 0, 0.1);
   }
   .fullscreen-chat-sidebar-header h3 {
       margin: 0;
       color: #FFD700;
       font-size: 20px;
       font-weight: 700;
   }
   .sidebar-toggle-btn {
       width: 36px;
       height: 36px;
       border-radius: 10px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }
   .sidebar-toggle-btn:hover {
       background: rgba(255, 215, 0, 0.2);
       border-color: rgba(255, 215, 0, 0.4);
   }
   .fullscreen-chat-online-users {
       flex: 1;
       overflow-y: auto;
       padding: 15px;
   }
   .fullscreen-chat-main {
       flex: 1;
       display: flex;
       flex-direction: column;
       overflow: hidden;
   }
   .fullscreen-chat-search-bar {
       padding: 20px 30px;
       background: rgba(15, 15, 25, 0.6);
       border-bottom: 2px solid rgba(255, 215, 0, 0.1);
       display: flex;
       align-items: center;
       gap: 15px;
   }
   .fullscreen-chat-search-bar i {
       color: rgba(255, 215, 0, 0.6);
       font-size: 18px;
   }
   .fullscreen-chat-search-bar input {
       flex: 1;
       padding: 12px 18px;
       border-radius: 12px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 255, 255, 0.05);
       color: rgba(255, 255, 255, 0.9);
       font-size: 15px;
   }
   .fullscreen-chat-search-bar input:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.5);
       background: rgba(255, 255, 255, 0.08);
   }
   .close-search-btn {
       width: 36px;
       height: 36px;
       border-radius: 10px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }
   .close-search-btn:hover {
       background: rgba(255, 0, 0, 0.2);
       border-color: rgba(255, 0, 0, 0.4);
       color: #ff4444;
   }
.fullscreen-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px;
    scroll-behavior: smooth;
}
   .fullscreen-chat-messages::-webkit-scrollbar {
       width: 12px;
   }
   .fullscreen-chat-messages::-webkit-scrollbar-track {
       background: rgba(255, 255, 255, 0.05);
       border-radius: 10px;
   }
   .fullscreen-chat-messages::-webkit-scrollbar-thumb {
       background: rgba(255, 215, 0, 0.3);
       border-radius: 10px;
   }
   .fullscreen-chat-messages::-webkit-scrollbar-thumb:hover {
       background: rgba(255, 215, 0, 0.5);
   }
.fullscreen-chat-input-area {
    padding: 14px 22px;
    border-top: 2px solid rgba(255, 215, 0, 0.2);
    background: rgba(255, 255, 255, 0.02);
}
   .fullscreen-chat-toolbar {
       display: flex;
/* Centering fixes for All Games page */
.all-games-page .games-grid-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.all-games-page .games-search-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.all-games-page .games-search-wrapper {
    width: 100%;
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.all-games-page .games-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
}

/* Override margin-left rules on larger screens to ensure centering */
@media (min-width: 769px) {
    .all-games-page .games-grid-container {
        margin-left: auto !important;
    }
}

@media (min-width: 1920px) {
    .all-games-page .games-grid-container {
        margin-left: auto !important;
    }
}
       gap: 10px;
       margin-bottom: 15px;
       flex-wrap: wrap;
   }
   .fullscreen-chat-toolbar-btn {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       font-size: 16px;
   }
   .fullscreen-chat-toolbar-btn:hover {
       background: rgba(255, 215, 0, 0.2);
       border-color: rgba(255, 215, 0, 0.4);
       transform: translateY(-2px);
   }
   .fullscreen-chat-input-wrapper {
       display: flex;
       gap: 15px;
       align-items: center;
   }
   .fullscreen-chat-input {
       flex: 1;
       padding: 18px 24px;
       border-radius: 16px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 255, 255, 0.05);
       color: rgba(255, 255, 255, 0.9);
       font-size: 16px;
       transition: all 0.3s ease;
   }
   .fullscreen-chat-input:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.5);
       background: rgba(255, 255, 255, 0.08);
       box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1);
   }
   .fullscreen-chat-input::placeholder {
       color: rgba(255, 255, 255, 0.4);
   }
   .fullscreen-chat-send-btn {
       width: 60px;
       height: 60px;
       border-radius: 16px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       font-size: 20px;
   }
   .fullscreen-chat-send-btn:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.25));
       border-color: rgba(255, 215, 0, 0.5);
       transform: translateY(-2px) scale(1.05);
       box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
   }
   .fullscreen-typing-indicator {
       margin-top: 12px;
       font-size: 14px;
       color: rgba(255, 255, 255, 0.6);
       font-style: italic;
       min-height: 20px;
   }
   .online-user-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px;
       border-radius: 12px;
       margin-bottom: 8px;
       background: rgba(255, 255, 255, 0.03);
       transition: all 0.3s ease;
       cursor: pointer;
   }
   .online-user-item:hover {
       background: rgba(255, 215, 0, 0.1);
       transform: translateX(5px);
   }
   .online-user-avatar {
       width: 45px;
       height: 45px;
       border-radius: 50%;
       border: 2px solid rgba(255, 215, 0, 0.3);
       position: relative;
       flex-shrink: 0;
   }
   .online-user-status-dot {
       position: absolute;
       bottom: 2px;
       right: 2px;
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: #28a745;
       border: 2px solid rgba(15, 15, 25, 0.95);
       box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
   }
   .online-user-info {
       flex: 1;
       min-width: 0;
   }
   .online-user-name {
       font-weight: 600;
       color: #FFD700;
       font-size: 14px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   .online-user-status {
       font-size: 12px;
       color: rgba(255, 255, 255, 0.6);
       margin-top: 4px;
   }
   .empty-state {
       text-align: center;
       padding: 40px 20px;
       color: rgba(255, 255, 255, 0.5);
       font-style: italic;
   }
   @media (max-width: 1100px) {
      .fullscreen-chat-sidebar {
          width: 260px;
      }
   }
   @media (max-width: 768px) {
       .chat-container {
           width: calc(100% - 48px);
           right: 24px;
           left: 24px;
           max-height: 80vh;
       }
       .fullscreen-chat-sidebar {
           position: absolute;
           top: 0;
           left: 0;
           width: min(320px, 85vw);
           height: 100%;
           z-index: 20;
           transform: translateX(-110%);
           box-shadow: 12px 0 30px rgba(0, 0, 0, 0.35);
       }
       .fullscreen-chat-sidebar:not(.open) {
           transform: translateX(-110%);
       }
       .fullscreen-chat-sidebar.open {
           transform: translateX(0);
       }
   }
      #drawingModal {
     position: fixed;
     top: 0; left: 0; right: 0; bottom: 0;
     background: rgba(0, 0, 0, 0.85);
     backdrop-filter: blur(10px);
     z-index: 20000;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 20px;
   }
   #drawingModal .modalInner {
      width: min(1200px, 96%);
      max-height: 92%;
      overflow: auto;
      border-radius: 24px;
      background: rgba(15, 15, 25, 0.95);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 215, 0, 0.2);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
      padding: 30px;
      position: relative;
      color: rgba(255, 255, 255, 0.9);
   }
   #drawingModal .closeDrawing {
     position: absolute;
     top: 10px; right: 10px;
     border: none; background: #007bff; color:#ffffff; font-size: 20px; cursor: pointer;
     width:30px; height:30px; border-radius:4px;
   }
   #sharedCanvasContainer {
     width: 100%;
     background: rgba(15, 15, 25, 0.4);
     backdrop-filter: blur(10px);
     border-radius: 16px;
     padding:20px;
     box-sizing:border-box;
     border: 1px solid rgba(255,215,0,0.1);
     box-shadow: 0 8px 32px rgba(0,0,0,0.3);
   }
   #canvasArea {
     border: 2px solid rgba(255,215,0,0.2);
     border-radius: 12px;
     overflow:hidden;
     background: rgba(255,255,255,0.05);
     display:block;
     box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
   }
   #sharedCanvas {
     width:100%;
     height:500px;
     display:block;
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     touch-action:none;
     border-radius:12px;
     box-shadow: 0 4px 20px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
     border: 2px solid rgba(255,215,0,0.2);
   }
   #toggleCanvasBtn { padding: 8px 16px; border-radius: 4px; cursor:pointer; border: 1px solid #007bff; background: #007bff; color: #ffffff; font-weight: 500; transition: all 0.2s ease; }
   #toggleCanvasBtn:hover { background: #0056b3; }
      .theme-light body {
     background: linear-gradient(135deg, #f8f9fa, #e9ecef);
     color: #212529;
     animation: none;
   }
   .theme-light #visitorCounter {
     background: linear-gradient(90deg, #ffffff, #f8f9fa);
     color: #007bff;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     border-bottom: 1px solid #dee2e6;
     text-shadow: none;
   }
   .theme-light header {
     background: linear-gradient(135deg, #ffffff, #f8f9fa);
     color: #007bff;
     border-bottom: 1px solid #dee2e6;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     text-shadow: none;
   }
   .theme-light .controls {
     background: linear-gradient(135deg, #f8f9fa, #e9ecef);
     border-bottom: 1px solid #dee2e6;
   }
   .theme-light .controls button {
     border-color: #007bff;
     background: #007bff;
     color: #ffffff;
   }
   .theme-light .controls button:hover {
     background: #0056b3;
   }
   .theme-light #chatContainer {
     background: #ffffff;
     border: 1px solid #dee2e6;
     color: #212529;
   }
   .theme-light #drawingModal .modalInner {
     background: #ffffff;
     border: 1px solid #dee2e6;
   }
      .theme-neon body {
     background: linear-gradient(135deg, #0a0e27, #1a1a3e);
     color: #ffffff;
     animation: neonPulse 3s ease-in-out infinite;
   }
   @keyframes neonPulse {
     0%, 100% { filter: brightness(1); }
     50% { filter: brightness(1.1); }
   }
   .theme-neon #visitorCounter {
     background: linear-gradient(90deg, #1a1a3e, #2a2a5e);
     color: #ff00ff;
     box-shadow: 0 0 20px rgba(255,0,255,0.5);
     border-bottom: 2px solid #ff00ff;
     text-shadow: 0 0 10px rgba(255,0,255,0.8);
   }
   .theme-neon header {
     background: linear-gradient(135deg, #1e1e4e, #2a2a6e);
     color: #00ffff;
     border-bottom: 2px solid #00ffff;
     box-shadow: 0 0 30px rgba(0,255,255,0.4);
     text-shadow: 0 0 15px rgba(0,255,255,0.8);
   }
   .theme-neon .controls {
     background: linear-gradient(135deg, #1a1a3e, #2a2a5e);
     border-bottom: 1px solid #00ffff;
   }
   .theme-neon .controls button {
     border-color: #ff00ff;
     background: rgba(255,0,255,0.2);
     color: #ff00ff;
     box-shadow: 0 0 10px rgba(255,0,255,0.3);
   }
   .theme-neon .controls button:hover {
     background: rgba(255,0,255,0.4);
     box-shadow: 0 0 20px rgba(255,0,255,0.6);
   }
   .theme-neon #iframeContainer #embeddedSite {
     border-color: #00ffff;
     box-shadow: 0 0 30px rgba(0,255,255,0.5);
   }
   .theme-neon #chatContainer {
     background: rgba(26,26,62,0.95);
     border: 1px solid #00ffff;
     box-shadow: 0 0 20px rgba(0,255,255,0.3);
     color: #ffffff;
   }
   .theme-neon #drawingModal .modalInner {
     background: #1a1a3e;
     border: 1px solid #00ffff;
     box-shadow: 0 0 30px rgba(0,255,255,0.3);
     color: #ffffff;
   }
      .theme-ocean body {
     background: linear-gradient(135deg, #001122, #003344);
     color: #00ffff;
     animation: oceanWave 8s ease-in-out infinite;
   }
   @keyframes oceanWave {
     0%, 100% { background: linear-gradient(135deg, #001122, #003344); }
     50% { background: linear-gradient(135deg, #002233, #004455); }
   }
   .theme-ocean #visitorCounter {
     background: linear-gradient(90deg, #002244, #003355);
     color: #00ffff;
     box-shadow: 0 0 15px rgba(0,255,255,0.4);
     border-bottom: 1px solid #00ffff;
     text-shadow: 0 0 8px rgba(0,255,255,0.6);
   }
   .theme-ocean header {
     background: linear-gradient(135deg, #001133, #002244);
     color: #00ffff;
     border-bottom: 2px solid #00ffff;
     box-shadow: 0 0 25px rgba(0,255,255,0.3);
     text-shadow: 0 0 12px rgba(0,255,255,0.7);
   }
   .theme-ocean .controls {
     background: linear-gradient(135deg, #001122, #002233);
     border-bottom: 1px solid #00ffff;
   }
   .theme-ocean .controls button {
     border-color: #00ffff;
     background: rgba(0,255,255,0.1);
     color: #00ffff;
   }
   .theme-ocean .controls button:hover {
     background: rgba(0,255,255,0.3);
     box-shadow: 0 0 15px rgba(0,255,255,0.5);
   }
      .theme-forest body {
     background: linear-gradient(135deg, #0a1a0a, #1a2a1a);
     color: #00ff88;
   }
   .theme-forest #visitorCounter {
     background: linear-gradient(90deg, #1a2a1a, #2a3a2a);
     color: #00ff88;
     box-shadow: 0 0 15px rgba(0,255,136,0.4);
     border-bottom: 1px solid #00ff88;
     text-shadow: 0 0 8px rgba(0,255,136,0.6);
   }
   .theme-forest header {
     background: linear-gradient(135deg, #0a1a0a, #1a2a1a);
     color: #00ff88;
     border-bottom: 2px solid #00ff88;
     box-shadow: 0 0 25px rgba(0,255,136,0.3);
     text-shadow: 0 0 12px rgba(0,255,136,0.7);
   }
   .theme-forest .controls {
     background: linear-gradient(135deg, #1a2a1a, #2a3a2a);
     border-bottom: 1px solid #00ff88;
   }
   .theme-forest .controls button {
     border-color: #00ff88;
     background: rgba(0,255,136,0.1);
     color: #00ff88;
   }
   .theme-forest .controls button:hover {
     background: rgba(0,255,136,0.3);
     box-shadow: 0 0 15px rgba(0,255,136,0.5);
   }
      .theme-sunset body {
     background: linear-gradient(135deg, #2a1810, #3a2415);
     color: #ffaa00;
   }
   .theme-sunset #visitorCounter {
     background: linear-gradient(90deg, #3a2415, #4a301a);
     color: #ffaa00;
     box-shadow: 0 0 15px rgba(255,170,0,0.4);
     border-bottom: 1px solid #ffaa00;
     text-shadow: 0 0 8px rgba(255,170,0,0.6);
   }
   .theme-sunset header {
     background: linear-gradient(135deg, #2a1810, #3a2415);
     color: #ffaa00;
     border-bottom: 2px solid #ffaa00;
     box-shadow: 0 0 25px rgba(255,170,0,0.3);
     text-shadow: 0 0 12px rgba(255,170,0,0.7);
   }
   .theme-sunset .controls {
     background: linear-gradient(135deg, #3a2415, #4a301a);
     border-bottom: 1px solid #ffaa00;
   }
   .theme-sunset .controls button {
     border-color: #ffaa00;
     background: rgba(255,170,0,0.1);
     color: #ffaa00;
   }
   .theme-sunset .controls button:hover {
     background: rgba(255,170,0,0.3);
     box-shadow: 0 0 15px rgba(255,170,0,0.5);
   }
      @media (max-width: 768px) {
          .controls {
              margin: 20px 10px;
              border-radius: 16px;
          }
          .control-group {
              grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
              gap: 10px;
              padding: 16px 18px;
          }
          .control-section-header {
              padding: 16px 18px;
          }
          .controls button {
              font-size: 12px;
              padding: 12px 14px;
          }
          #chatContainer {
              width: calc(100% - 20px);
              right: 10px;
              bottom: 10px;
              max-height: 60vh;
          }
          #iframeContainer {
              margin: 20px 10px;
              border-radius: 16px;
          }
          #embeddedSite {
              height: calc(100vh - 500px);
              min-height: 400px;
          }
          header {
              padding: 16px 20px;
              font-size: 20px;
          }
          header small {
              font-size: 11px;
          }
          .header-icon-btn,
          #adminBtn {
              width: 42px;
              height: 42px;
              font-size: 16px;
          }
          #adminBtn,
          .header-icon-btn#adminBtn {
              left: 12px;
          }
          #sharedCanvas { height: 400px; }
  
          /* Additional mobile improvements */
          .games-grid-container {
              padding: 10px !important;
          }
          .games-search-container {
              margin: 15px 0;
              padding: 0 10px;
          }
          .game-cube {
              min-height: 120px;
              font-size: 14px;
          }
          .game-cube .game-title {
              font-size: 13px;
              line-height: 1.3;
          }
          .main-navigation {
              padding: 10px;
              font-size: 14px;
          }
          .nav-item {
              padding: 8px 12px;
          }
          .random-game-cta {
              margin: 15px 10px;
              padding: 15px;
          }
          .game-of-season-container {
              margin: 15px 10px;
          }
          .featured-games-grid {
              grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
              gap: 12px;
          }
          .primeCarouselLi {
              padding: 8px;
          }
          .primeCarouselLi > .big-game-cube {
              min-height: 160px;
          }
      }
   @media (max-width: 480px) {
       .control-group {
           grid-template-columns: 1fr;
       }
       #chatContainer {
           width: calc(100% - 16px);
           right: 8px;
           bottom: 8px;
       }
       #sharedCanvas { height: 300px; }
       header {
           font-size: 18px;
           padding: 14px 16px;
       }

       /* Extra small screen improvements */
       .games-grid-container {
           padding: 8px !important;
       }
       .games-search-container {
           margin: 10px 0;
           padding: 0 8px;
       }
       .games-search-input {
           font-size: 14px;
           padding: 10px 12px;
       }
       .game-cube {
           min-height: 100px;
           font-size: 13px;
       }
       .game-cube .game-title {
           font-size: 12px;
       }
       .main-navigation {
           padding: 8px;
           font-size: 13px;
       }
       .nav-item {
           padding: 6px 10px;
       }
       .random-game-cta {
           margin: 10px 8px;
           padding: 12px;
       }
       .random-game-copy p {
           font-size: 14px;
       }
       .game-of-season-container {
           margin: 10px 8px;
       }
       .featured-games-grid {
           grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
           gap: 10px;
       }
       .primeCarouselLi > .big-game-cube {
           min-height: 140px;
       }
       .controls {
           margin: 15px 8px;
       }
       .control-group {
           padding: 12px 14px;
       }
       .controls button {
           font-size: 11px;
           padding: 10px 12px;
       }
       #iframeContainer {
           margin: 15px 8px;
       }
       #embeddedSite {
           height: calc(100vh - 450px);
           min-height: 350px;
       }
       .header-icon-btn,
       #adminBtn {
           width: 38px;
           height: 38px;
           font-size: 14px;
       }
       .mobile-menu-btn {
           width: 38px;
           height: 38px;
           font-size: 14px;
       }

       /* Additional mobile touch improvements */
       button, .game-cube, .nav-item, .category-panel-item {
           min-height: 44px;
           touch-action: manipulation;
       }
       .game-cube {
           cursor: pointer;
       }
       .category-side-panel {
           width: 160px;
       }
       .category-panel-item {
           padding: 12px 16px;
           font-size: 14px;
       }
       .notification-dropdown {
           width: calc(100vw - 20px);
           max-width: 350px;
       }
       .chat-container {
           width: min(600px, calc(100vw - 32px));
           max-height: 50vh;
       }
       .fullscreen-chat-modal .fullscreen-chat-container {
           width: min(1200px, calc(100vw - 32px));
           height: calc(100vh - 16px);
       }
   }
      .back-to-top-btn {
       position: fixed;
       bottom: 80px;        right: 30px;
       width: 50px;
       height: 50px;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 165, 0, 0.8));
       backdrop-filter: blur(10px);
       border: 2px solid rgba(255, 215, 0, 0.5);
       border-radius: 50%;
       color: #fff;
       font-size: 20px;
       cursor: pointer;
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 1000;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.3);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       opacity: 0;
       transform: translateY(20px) scale(0.8);
   }
   .back-to-top-btn.show {
       display: flex;
       opacity: 1;
       transform: translateY(0) scale(1);
   }
   .back-to-top-btn:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 1), rgba(255, 165, 0, 0.95));
       border-color: rgba(255, 215, 0, 0.8);
       transform: translateY(-5px) scale(1.1);
       box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.5);
   }
   .back-to-top-btn:active {
       transform: translateY(-2px) scale(1.05);
   }
   .back-to-top-btn i {
       transition: transform 0.3s ease;
   }
   .back-to-top-btn:hover i {
       transform: translateY(-2px);
   }
   @media (max-width: 768px) {
       .back-to-top-btn {
           bottom: 20px;
           right: 20px;
           width: 45px;
           height: 45px;
           font-size: 18px;
       }
   }
      html {
       scroll-behavior: smooth;
   }
      button {
       position: relative;
       overflow: hidden;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   button::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }
   button:active::after {
       width: 300px;
       height: 300px;
   }
      .modalInner, #chatContainer, .control-section {
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   .modalInner:hover, #chatContainer:hover {
       transform: translateY(-2px);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
   }
      .glass-effect {
       background: rgba(255, 255, 255, 0.05);
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       border: 1px solid rgba(255, 255, 255, 0.1);
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   }
      input[type="text"], input[type="password"], input[type="color"], textarea {
       transition: all 0.3s ease;
       border: 1px solid rgba(255, 215, 0, 0.2);
   }
   input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.6);
       box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
       transform: translateY(-1px);
   }
      @keyframes pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.5; }
   }
   @keyframes slideInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   @keyframes slideInDown {
       from {
           opacity: 0;
           transform: translateY(-30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   @keyframes fadeInScale {
       from {
           opacity: 0;
           transform: scale(0.9);
       }
       to {
           opacity: 1;
           transform: scale(1);
       }
   }
   @keyframes shimmer {
       0% { background-position: -1000px 0; }
       100% { background-position: 1000px 0; }
   }
   .loading-shimmer {
       background: linear-gradient(90deg,
           rgba(255, 255, 255, 0.05) 0%,
           rgba(255, 255, 255, 0.15) 50%,
           rgba(255, 255, 255, 0.05) 100%);
       background-size: 1000px 100%;
       animation: shimmer 2s infinite;
   }
      .modal-enter {
       animation: fadeInScale 0.3s ease-out;
   }
   .modal-exit {
       animation: fadeOutScale 0.3s ease-in;
   }
   @keyframes fadeOutScale {
       from {
           opacity: 1;
           transform: scale(1);
       }
       to {
           opacity: 0;
           transform: scale(0.9);
       }
   }
      #chatMessages > div {
       animation: slideInUp 0.3s ease-out;
       width: 100%;
   }
   #chatMessages > div > div {
       flex: 1 1 auto;
       min-width: 0;
       max-width: none;
   }
   .custom-tooltip {
       position: fixed;
       padding: 10px 16px;
       background: linear-gradient(135deg, rgba(15, 15, 25, 0.98), rgba(20, 20, 30, 0.98));
       backdrop-filter: blur(10px);
       color: #FFD700;
       font-size: 13px;
       font-weight: 600;
       white-space: nowrap;
       border-radius: 10px;
       border: 2px solid rgba(255, 215, 0, 0.4);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.2);
       z-index: 999999;
       pointer-events: none;
       animation: tooltipFadeIn 0.2s ease-out;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
       letter-spacing: 0.3px;
   }
   .custom-tooltip::after {
       content: '';
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       border: 8px solid transparent;
       border-top-color: rgba(255, 215, 0, 0.4);
       filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
   }
   .custom-tooltip.tooltip-below::after {
       top: auto;
       bottom: 100%;
       border-top-color: transparent;
       border-bottom-color: rgba(255, 215, 0, 0.4);
       filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.3));
   }
   @keyframes tooltipFadeIn {
       from {
           opacity: 0;
           transform: translateX(-50%) translateY(5px);
       }
       to {
           opacity: 1;
           transform: translateX(-50%) translateY(0);
       }
   }
      .chat-header-btn[title]:hover::after,
   .chat-toolbar-btn[title]:hover::after,
   .fullscreen-chat-btn[title]:hover::after,
   .fullscreen-chat-toolbar-btn[title]:hover::after {
       bottom: calc(100% + 12px);
   }
   /* Tooltip auto-dismiss on hover end */
   [title]:not(:hover)::after,
   [title]:not(:hover)::before {
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.2s ease;
   }
   [title]:hover::after,
   [title]:hover::before {
       opacity: 1;
       transition: opacity 0.1s ease;
   }
   .chat-header-btn[title]:hover::after,
   .fullscreen-chat-btn[title]:hover::after {
       left: auto;
       right: 0;
       transform: translateX(0);
   }
   .chat-header-btn[title]:hover::before,
   .fullscreen-chat-btn[title]:hover::before {
       left: auto;
       right: 12px;
       transform: translateX(0);
       bottom: calc(100% + 2px);
   }
   .chat-name-color-popup {
       position: fixed;
       bottom: 100px;
       right: 30px;
       width: 340px;
       background: rgba(15, 15, 25, 0.98);
       backdrop-filter: blur(12px);
       border-radius: 20px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.15);
       z-index: 20000;
       color: rgba(255, 255, 255, 0.9);
       overflow: hidden;
       animation: popupSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   @keyframes popupSlideIn {
       from {
           opacity: 0;
           transform: translateY(20px) scale(0.95);
       }
       to {
           opacity: 1;
           transform: translateY(0) scale(1);
       }
   }
   .chat-popup-header {
       padding: 20px 24px;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
       border-bottom: 2px solid rgba(255, 215, 0, 0.2);
       display: flex;
       justify-content: space-between;
       align-items: center;
       position: relative;
   }
   .chat-popup-header::before {
       content: '';
       position: absolute;
       inset: 8px 16px auto 16px;
       height: 12px;
       background: linear-gradient(90deg, rgba(255, 215, 0, 0) 0%, rgba(255, 215, 0, 0.4) 25%, rgba(255, 165, 0, 0.45) 50%, rgba(255, 215, 0, 0.4) 75%, rgba(255, 215, 0, 0) 100%);
       border-radius: 12px;
       filter: drop-shadow(0 4px 14px rgba(255, 215, 0, 0.35));
       animation: shimmer 4s ease-in-out infinite;
       z-index: 2;
       pointer-events: none;
   }
   .chat-popup-header h3 {
       margin: 0;
       font-size: 18px;
       font-weight: 700;
       color: #FFD700;
       display: flex;
       align-items: center;
       gap: 10px;
   }
   .chat-popup-close {
       width: 32px;
       height: 32px;
       border-radius: 8px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       font-size: 14px;
   }
   .chat-popup-close:hover {
       background: rgba(255, 0, 0, 0.2);
       border-color: rgba(255, 0, 0, 0.4);
       color: #ff4444;
       transform: rotate(90deg) scale(1.1);
   }
   .chat-popup-content {
       padding: 24px;
   }
   .chat-popup-label {
       display: flex;
       flex-direction: column;
       gap: 8px;
       margin-bottom: 20px;
   }
   .chat-popup-label span {
       font-weight: 600;
       color: #FFD700;
       font-size: 14px;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   .chat-popup-input {
       width: 100%;
       padding: 12px 16px;
       border-radius: 12px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 255, 255, 0.05);
       color: rgba(255, 255, 255, 0.9);
       font-size: 14px;
       transition: all 0.3s ease;
   }
   .chat-popup-input:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.5);
       background: rgba(255, 255, 255, 0.08);
       box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1);
   }
   .chat-popup-input::placeholder {
       color: rgba(255, 255, 255, 0.4);
   }
   .chat-popup-color-input {
       width: 100%;
       height: 50px;
       border-radius: 12px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 255, 255, 0.05);
       cursor: pointer;
       transition: all 0.3s ease;
   }
   .chat-popup-color-input:hover {
       border-color: rgba(255, 215, 0, 0.5);
       transform: scale(1.02);
   }
   .chat-popup-save-btn {
       width: 100%;
       padding: 14px 20px;
       border-radius: 12px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
       color: #FFD700;
       cursor: pointer;
       font-weight: 600;
       font-size: 15px;
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       margin-top: 10px;
   }
   .chat-popup-save-btn:hover {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.25));
       border-color: rgba(255, 215, 0, 0.5);
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
   }
   .chat-settings-modal {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.95);
       backdrop-filter: blur(10px);
       z-index: 25000;
       display: none;
       align-items: center;
       justify-content: center;
       animation: modalFadeIn 0.3s ease-out;
   }
   @keyframes modalFadeIn {
       from {
           opacity: 0;
           backdrop-filter: blur(0px);
       }
       to {
           opacity: 1;
           backdrop-filter: blur(10px);
       }
   }
   .chat-settings-content {
       width: min(500px, 90%);
       background: rgba(15, 15, 25, 0.98);
       backdrop-filter: blur(12px);
       border-radius: 24px;
       border: 2px solid rgba(255, 215, 0, 0.3);
       box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.15);
       overflow: hidden;
   }
   .chat-settings-header {
       padding: 25px 30px;
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
       border-bottom: 2px solid rgba(255, 215, 0, 0.2);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .chat-settings-header h2 {
       margin: 0;
       font-size: 24px;
       font-weight: 700;
       color: #FFD700;
       display: flex;
       align-items: center;
       gap: 12px;
   }
   .chat-settings-close {
       width: 40px;
       height: 40px;
       border-radius: 10px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       font-size: 16px;
   }
   .chat-settings-close:hover {
       background: rgba(255, 0, 0, 0.2);
       border-color: rgba(255, 0, 0, 0.4);
       color: #ff4444;
       transform: rotate(90deg) scale(1.1);
   }
   .chat-settings-body {
       padding: 30px;
   }
   .chat-setting-item {
       margin-bottom: 20px;
   }
   .chat-setting-item label {
       display: flex;
       align-items: center;
       justify-content: space-between;
       color: rgba(255, 255, 255, 0.9);
       font-size: 15px;
       cursor: pointer;
   }
   .chat-setting-item input[type="checkbox"] {
       width: 20px;
       height: 20px;
       cursor: pointer;
       accent-color: #FFD700;
   }
   .chat-setting-select {
       padding: 8px 12px;
       border-radius: 8px;
       border: 2px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 255, 255, 0.05);
       color: rgba(255, 255, 255, 0.9);
       font-size: 14px;
       cursor: pointer;
       min-width: 100px;
   }
   .chat-setting-select:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.5);
       background: rgba(255, 255, 255, 0.08);
   }
      ::-webkit-scrollbar {
       width: 10px;
       height: 10px;
   }
   ::-webkit-scrollbar-track {
       background: rgba(255, 255, 255, 0.05);
       border-radius: 10px;
   }
   ::-webkit-scrollbar-thumb {
       background: rgba(255, 215, 0, 0.3);
       border-radius: 10px;
       transition: background 0.3s ease;
   }
   ::-webkit-scrollbar-thumb:hover {
       background: rgba(255, 215, 0, 0.5);
   }
      *:focus-visible {
       outline: 2px solid rgba(255, 215, 0, 0.6);
       outline-offset: 2px;
       border-radius: 4px;
   }
      ::selection {
       background: rgba(255, 215, 0, 0.3);
       color: #ffffff;
   }
   ::-moz-selection {
       background: rgba(255, 215, 0, 0.3);
       color: #ffffff;
   }
      .notification {
       position: fixed;
       top: 20px;
       right: 20px;
       padding: 16px 24px;
       background: rgba(15, 15, 25, 0.95);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 215, 0, 0.3);
       border-radius: 12px;
       color: white;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
       z-index: 100000;
       animation: slideInDown 0.3s ease-out;
       max-width: 400px;
   }
   /* Smaller notifications on small devices */
   @media (max-width: 1024px) {
       .notification {
           max-width: 320px;
           padding: 12px 18px;
           font-size: 14px;
           top: 15px;
           right: 15px;
       }
   }
   @media (max-width: 768px) {
       .notification {
           max-width: 280px;
           padding: 10px 16px;
           font-size: 13px;
           top: 10px;
           right: 10px;
       }
   }
   @media (max-width: 480px) {
       .notification {
           max-width: calc(100vw - 20px);
           padding: 10px 14px;
           font-size: 12px;
           top: 10px;
           right: 10px;
           left: 10px;
       }
   }
   .notification.success {
       border-color: rgba(40, 167, 69, 0.5);
       background: rgba(40, 167, 69, 0.1);
   }
   .notification.error {
       border-color: rgba(220, 53, 69, 0.5);
       background: rgba(220, 53, 69, 0.1);
   }
   .notification.info {
       border-color: rgba(0, 123, 255, 0.5);
       background: rgba(0, 123, 255, 0.1);
   }
      .badge {
       display: inline-block;
       padding: 4px 8px;
       font-size: 11px;
       font-weight: 600;
       border-radius: 12px;
       background: rgba(255, 215, 0, 0.2);
       color: #FFD700;
       border: 1px solid rgba(255, 215, 0, 0.3);
   }
      .avatar {
       position: relative;
       display: inline-block;
   }
   .avatar::after {
       content: '';
       position: absolute;
       bottom: 0;
       right: 0;
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: #28a745;
       border: 2px solid rgba(15, 15, 25, 0.9);
       box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3);
   }
   .avatar.offline::after {
       background: #6c757d;
   }
      .skeleton {
       background: linear-gradient(90deg,
           rgba(255, 255, 255, 0.05) 25%,
           rgba(255, 255, 255, 0.1) 50%,
           rgba(255, 255, 255, 0.05) 75%);
       background-size: 200% 100%;
       animation: shimmer 1.5s infinite;
       border-radius: 8px;
   }
      .modal-backdrop {
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
   }
      .gradient-text {
       background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       background-size: 200% 200%;
       animation: gradientShift 3s ease infinite;
   }
      .card {
       background: rgba(255, 255, 255, 0.05);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 215, 0, 0.1);
       border-radius: 16px;
       padding: 24px;
       transition: all 0.3s ease;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   }
   .card:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
       border-color: rgba(255, 215, 0, 0.3);
   }
      .divider {
       height: 1px;
       background: linear-gradient(90deg,
           transparent,
           rgba(255, 215, 0, 0.3),
           transparent);
       margin: 20px 0;
   }
      .button-group {
       display: flex;
       gap: 12px;
       flex-wrap: wrap;
   }
   .button-group button {
       flex: 1;
       min-width: 120px;
   }
      .form-group {
       margin-bottom: 20px;
   }
   .form-label {
       display: block;
       margin-bottom: 8px;
       font-weight: 500;
       color: rgba(255, 255, 255, 0.9);
       font-size: 14px;
   }
   .form-input {
       width: 100%;
       padding: 12px 16px;
       border-radius: 8px;
       border: 1px solid rgba(255, 215, 0, 0.2);
       background: rgba(255, 255, 255, 0.05);
       color: rgba(255, 255, 255, 0.9);
       font-size: 14px;
       transition: all 0.3s ease;
   }
   .form-input:focus {
       outline: none;
       border-color: rgba(255, 215, 0, 0.5);
       background: rgba(255, 255, 255, 0.08);
       box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
   }
      .table {
       width: 100%;
       border-collapse: collapse;
       background: rgba(255, 255, 255, 0.05);
       border-radius: 12px;
       overflow: hidden;
   }
   .table th {
       background: rgba(255, 215, 0, 0.1);
       padding: 12px;
       text-align: left;
       font-weight: 600;
       color: #FFD700;
       border-bottom: 1px solid rgba(255, 215, 0, 0.2);
   }
   .table td {
       padding: 12px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   }
   .table tr:hover {
       background: rgba(255, 215, 0, 0.05);
   }
      .progress {
       width: 100%;
       height: 8px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 4px;
       overflow: hidden;
       position: relative;
   }
   .progress-bar {
       height: 100%;
       background: linear-gradient(90deg, #FFD700, #FFA500);
       border-radius: 4px;
       transition: width 0.3s ease;
       position: relative;
       overflow: hidden;
   }
   .progress-bar::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       background: linear-gradient(90deg,
           transparent,
           rgba(255, 255, 255, 0.3),
           transparent);
       animation: shimmer 2s infinite;
   }
      .dropdown {
       position: relative;
       display: inline-block;
   }
   .dropdown-menu {
       position: absolute;
       top: 100%;
       left: 0;
       margin-top: 8px;
       background: rgba(15, 15, 25, 0.95);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 215, 0, 0.2);
       border-radius: 12px;
       padding: 8px;
       min-width: 200px;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
       z-index: 1000;
       opacity: 0;
       transform: translateY(-10px);
       pointer-events: none;
       transition: all 0.3s ease;
   }
   .dropdown.active .dropdown-menu {
       opacity: 1;
       transform: translateY(0);
       pointer-events: all;
   }
   .dropdown-item {
       display: block;
       padding: 10px 16px;
       color: rgba(255, 255, 255, 0.9);
       text-decoration: none;
       border-radius: 8px;
       transition: all 0.2s ease;
       cursor: pointer;
   }
   .dropdown-item:hover {
       background: rgba(255, 215, 0, 0.1);
       color: #FFD700;
   }
      .toggle-switch {
       position: relative;
       display: inline-block;
       width: 50px;
       height: 26px;
   }
   .toggle-switch input {
       opacity: 0;
       width: 0;
       height: 0;
   }
   .toggle-slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: rgba(255, 255, 255, 0.1);
       transition: 0.3s;
       border-radius: 26px;
   }
   .toggle-slider:before {
       position: absolute;
       content: "";
       height: 20px;
       width: 20px;
       left: 3px;
       bottom: 3px;
       background-color: white;
       transition: 0.3s;
       border-radius: 50%;
   }
   input:checked + .toggle-slider {
       background-color: rgba(255, 215, 0, 0.5);
   }
   input:checked + .toggle-slider:before {
       transform: translateX(24px);
   }
      .tag {
       display: inline-block;
       padding: 4px 12px;
       font-size: 12px;
       font-weight: 500;
       border-radius: 16px;
       background: rgba(255, 215, 0, 0.15);
       color: #FFD700;
       border: 1px solid rgba(255, 215, 0, 0.3);
       margin: 2px;
   }
   .tag.primary {
       background: rgba(0, 123, 255, 0.15);
       color: #007bff;
       border-color: rgba(0, 123, 255, 0.3);
   }
   .tag.success {
       background: rgba(40, 167, 69, 0.15);
       color: #28a745;
       border-color: rgba(40, 167, 69, 0.3);
   }
   .tag.danger {
       background: rgba(220, 53, 69, 0.15);
       color: #dc3545;
       border-color: rgba(220, 53, 69, 0.3);
   }
      @media (max-width: 768px) {
       .notification {
           right: 10px;
           left: 10px;
           max-width: none;
       }
       .card {
           padding: 16px;
       }
       .button-group {
           flex-direction: column;
       }
       .button-group button {
           width: 100%;
       }
   }
      .spinner {
       border: 3px solid rgba(255, 255, 255, 0.1);
       border-top: 3px solid #FFD700;
       border-radius: 50%;
       width: 40px;
       height: 40px;
       animation: spin 1s linear infinite;
   }
   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }
   .spinner-small {
       width: 20px;
       height: 20px;
       border-width: 2px;
   }
      .empty-state {
       text-align: center;
       padding: 60px 20px;
       color: rgba(255, 255, 255, 0.5);
   }
   .empty-state-icon {
       font-size: 64px;
       margin-bottom: 20px;
       opacity: 0.3;
   }
   .empty-state-title {
       font-size: 20px;
       font-weight: 600;
       margin-bottom: 10px;
       color: rgba(255, 255, 255, 0.7);
   }
   .empty-state-description {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.5);
   }
      .status-indicator {
       display: inline-block;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #6c757d;
       margin-right: 8px;
   }
   .status-indicator.online {
       background: #28a745;
       box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
   }
   .status-indicator.away {
       background: #ffc107;
       box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
   }
   .status-indicator.busy {
       background: #dc3545;
       box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
   }
      .image-hover {
       transition: transform 0.3s ease, filter 0.3s ease;
       cursor: pointer;
   }
   .image-hover:hover {
       transform: scale(1.05);
       filter: brightness(1.1);
   }
      .text-glow {
       text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
   }
   .text-shadow {
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   }
      .container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 20px;
   }
   .container-fluid {
       width: 100%;
       padding: 0 20px;
   }
      .grid {
       display: grid;
       gap: 20px;
   }
   .grid-2 {
       grid-template-columns: repeat(2, 1fr);
   }
   .grid-3 {
       grid-template-columns: repeat(3, 1fr);
   }
   .grid-4 {
       grid-template-columns: repeat(4, 1fr);
   }
   @media (max-width: 768px) {
       .grid-2, .grid-3, .grid-4 {
           grid-template-columns: 1fr;
       }
   }
      .flex {
       display: flex;
   }
   .flex-center {
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .flex-between {
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   .flex-column {
       flex-direction: column;
   }
   .flex-wrap {
       flex-wrap: wrap;
   }
   .gap-sm { gap: 8px; }
   .gap-md { gap: 16px; }
   .gap-lg { gap: 24px; }
      .mt-sm { margin-top: 8px; }
   .mt-md { margin-top: 16px; }
   .mt-lg { margin-top: 24px; }
   .mb-sm { margin-bottom: 8px; }
   .mb-md { margin-bottom: 16px; }
   .mb-lg { margin-bottom: 24px; }
   .p-sm { padding: 8px; }
   .p-md { padding: 16px; }
   .p-lg { padding: 24px; }
      .text-xs { font-size: 12px; }
   .text-sm { font-size: 14px; }
   .text-md { font-size: 16px; }
   .text-lg { font-size: 18px; }
   .text-xl { font-size: 24px; }
   .text-2xl { font-size: 32px; }
   .font-light { font-weight: 300; }
   .font-normal { font-weight: 400; }
   .font-medium { font-weight: 500; }
   .font-semibold { font-weight: 600; }
   .font-bold { font-weight: 700; }
   .text-center { text-align: center; }
   .text-left { text-align: left; }
   .text-right { text-align: right; }
      .text-primary { color: #FFD700; }
   .text-secondary { color: rgba(255, 255, 255, 0.7); }
   .text-muted { color: rgba(255, 255, 255, 0.5); }
   .text-success { color: #28a745; }
   .text-danger { color: #dc3545; }
   .text-warning { color: #ffc107; }
   .text-info { color: #17a2b8; }
      .border { border: 1px solid rgba(255, 215, 0, 0.2); }
   .border-top { border-top: 1px solid rgba(255, 215, 0, 0.2); }
   .border-bottom { border-bottom: 1px solid rgba(255, 215, 0, 0.2); }
   .border-radius { border-radius: 8px; }
   .border-radius-lg { border-radius: 16px; }
   .border-radius-full { border-radius: 50%; }
      .shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
   .shadow-md { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
   .shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }
   .shadow-xl { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); }
      .backdrop-blur { backdrop-filter: blur(10px); }
   .backdrop-blur-sm { backdrop-filter: blur(10px); }
   .backdrop-blur-lg { backdrop-filter: blur(12px); }
      .transition { transition: all 0.3s ease; }
   .transition-fast { transition: all 0.15s ease; }
   .transition-slow { transition: all 0.5s ease; }
      .hover-lift:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
   }
   .hover-glow:hover {
       box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
   }
   .hover-scale:hover {
       transform: scale(1.05);
   }
      .cursor-pointer { cursor: pointer; }
   .cursor-not-allowed { cursor: not-allowed; }
   .cursor-wait { cursor: wait; }
      .overflow-hidden { overflow: hidden; }
   .overflow-auto { overflow: auto; }
   .overflow-scroll { overflow: scroll; }
      .relative { position: relative; }
   .absolute { position: absolute; }
   .fixed { position: fixed; }
   .sticky { position: sticky; }
      .z-0 { z-index: 0; }
   .z-10 { z-index: 10; }
   .z-20 { z-index: 20; }
   .z-30 { z-index: 30; }
   .z-40 { z-index: 40; }
   .z-50 { z-index: 50; }
      .w-full { width: 100%; }
   .h-full { height: 100%; }
   .w-auto { width: auto; }
   .h-auto { height: auto; }
      .block { display: block; }
   .inline-block { display: inline-block; }
   .inline { display: inline; }
   .flex { display: flex; }
   .grid { display: grid; }
   .hidden { display: none; }
      .opacity-0 { opacity: 0; }
   .opacity-50 { opacity: 0.5; }
   .opacity-100 { opacity: 1; }
      .transform { transform: translateZ(0); }
   .scale-0 { transform: scale(0); }
   .scale-100 { transform: scale(1); }
   .rotate-0 { transform: rotate(0deg); }
   .rotate-90 { transform: rotate(90deg); }
   .rotate-180 { transform: rotate(180deg); }
      .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border-width: 0;
   }
      @media print {
       .no-print {
           display: none !important;
       }
       body {
           background: white;
           color: black;
       }
   }
      @media (prefers-color-scheme: dark) {
       body {
           color-scheme: dark;
       }
   }
   #snowCanvas {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       z-index: 1;
       opacity: 0.2; /* Reduced visibility for cleaner look */
   }
      .christmas-decorations {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       opacity: 0.12; /* Reduced opacity for cleaner look */
       pointer-events: none;
       z-index: 1;
       overflow: visible;
   }
      .snowflake {
       position: absolute;
       color: rgba(255, 255, 255, 0.25); /* Reduced opacity for cleaner look */
       font-size: 20px;
       animation: snowfall linear infinite;
       text-shadow: 0 0 5px rgba(255, 255, 255, 0.2); /* Reduced shadow */
       will-change: transform;
       transform: translateZ(0);    }
      .snowflake-1 { left: 5%; animation-duration: 12s; animation-delay: 0s; font-size: 18px; }
   .snowflake-2 { left: 95%; animation-duration: 14s; animation-delay: 1.5s; font-size: 20px; }
   .snowflake-3 { left: 10%; animation-duration: 13s; animation-delay: 3s; font-size: 16px; }
   .snowflake-4 { left: 90%; animation-duration: 15s; animation-delay: 4.5s; font-size: 18px; }
   .snowflake-5 { left: 20%; animation-duration: 11s; animation-delay: 0.5s; font-size: 19px; }
   .snowflake-6 { left: 80%; animation-duration: 16s; animation-delay: 2s; font-size: 17px; }
   .snowflake-7 { left: 30%; animation-duration: 13.5s; animation-delay: 1s; font-size: 21px; }
   .snowflake-8 { left: 70%; animation-duration: 14.5s; animation-delay: 2.5s; font-size: 15px; }
   .snowflake-9 { left: 40%; animation-duration: 12.5s; animation-delay: 0.8s; font-size: 18px; }
   .snowflake-10 { left: 60%; animation-duration: 15.5s; animation-delay: 3.5s; font-size: 20px; }
   .snowflake-11 { left: 50%; animation-duration: 13s; animation-delay: 1.2s; font-size: 16px; }
   .snowflake-12 { left: 15%; animation-duration: 14s; animation-delay: 2.8s; font-size: 19px; }
   .snowflake-13 { left: 25%; animation-duration: 12s; animation-delay: 0.3s; font-size: 17px; }
   .snowflake-14 { left: 75%; animation-duration: 15s; animation-delay: 3.2s; font-size: 19px; }
   .snowflake-15 { left: 35%; animation-duration: 13.5s; animation-delay: 1.5s; font-size: 18px; }
   .snowflake-16 { left: 65%; animation-duration: 14.5s; animation-delay: 2.2s; font-size: 20px; }
   .snowflake:nth-child(11) { left: 25%; animation-duration: 16s; animation-delay: 2.2s; font-size: 20px; }
   .snowflake:nth-child(12) { left: 35%; animation-duration: 12s; animation-delay: 0.7s; font-size: 16px; }
   .snowflake:nth-child(13) { left: 45%; animation-duration: 14s; animation-delay: 1.7s; font-size: 22px; }
   .snowflake:nth-child(14) { left: 55%; animation-duration: 13s; animation-delay: 0.4s; font-size: 18px; }
   .snowflake:nth-child(15) { left: 65%; animation-duration: 15s; animation-delay: 2.4s; font-size: 20px; }
   .snowflake:nth-child(16) { left: 75%; animation-duration: 11s; animation-delay: 0.9s; font-size: 16px; }
   .snowflake:nth-child(17) { left: 85%; animation-duration: 12s; animation-delay: 1.9s; font-size: 22px; }
   .snowflake:nth-child(18) { left: 5%; animation-duration: 14s; animation-delay: 0.6s; font-size: 18px; }
   .snowflake:nth-child(19) { left: 95%; animation-duration: 13s; animation-delay: 1.6s; font-size: 20px; }
   .snowflake:nth-child(20) { left: 8%; animation-duration: 15s; animation-delay: 2.6s; font-size: 16px; }
   .snowflake:nth-child(21) { left: 18%; animation-duration: 11s; animation-delay: 0.2s; font-size: 22px; }
   .snowflake:nth-child(22) { left: 28%; animation-duration: 14s; animation-delay: 1.3s; font-size: 18px; }
   .snowflake:nth-child(23) { left: 38%; animation-duration: 12s; animation-delay: 2.3s; font-size: 20px; }
   .snowflake:nth-child(24) { left: 48%; animation-duration: 16s; animation-delay: 0.1s; font-size: 16px; }
   .snowflake:nth-child(25) { left: 58%; animation-duration: 13s; animation-delay: 1.1s; font-size: 22px; }
   .snowflake:nth-child(26) { left: 68%; animation-duration: 15s; animation-delay: 2.1s; font-size: 18px; }
   .snowflake:nth-child(27) { left: 78%; animation-duration: 11s; animation-delay: 0.5s; font-size: 20px; }
   .snowflake:nth-child(28) { left: 88%; animation-duration: 14s; animation-delay: 1.5s; font-size: 16px; }
   .snowflake:nth-child(29) { left: 12%; animation-duration: 12s; animation-delay: 2.5s; font-size: 22px; }
   .snowflake:nth-child(30) { left: 22%; animation-duration: 15s; animation-delay: 0.4s; font-size: 18px; }
   @keyframes snowfall {
       0% {
           transform: translate3d(0, -100px, 0) rotate(0deg);
           opacity: 1;
       }
       100% {
           transform: translate3d(0, calc(100vh + 100px), 0) rotate(360deg);
           opacity: 0.3;
       }
   }
      @keyframes floatOrnament {
       0%, 100% {
           transform: translate3d(0, 0, 0) rotate(0deg);
       }
       50% {
           transform: translate3d(0, -20px, 0) rotate(10deg);
       }
   }
      .decoration-img {
       position: fixed;
       pointer-events: none;
       z-index: 1;
       filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
       animation: floatOrnament 5s ease-in-out infinite;
       will-change: transform;
       transform: translateZ(0);
       opacity: 0.7;
   }
      .corner-tree-top-left {
       top: 10px;
       left: 10px;
       width: 60px;
       height: auto;
       animation-delay: 0s;
       transform: rotate(-5deg);
   }
   .corner-tree-top-right {
       top: 10px;
       right: 10px;
       width: 60px;
       height: auto;
       animation-delay: 1s;
       transform: rotate(5deg) scaleX(-1);
   }
   .corner-tree-top-center {
       top: 10px;
       left: 50%;
       transform: translateX(-50%) rotate(-2deg);
       width: 55px;
       height: auto;
       animation-delay: 0.5s;
   }
      .side-ornament-left-1 {
       top: 25%;
       left: 5px;
       width: 40px;
       height: auto;
       animation-delay: 0.5s;
   }
   .side-ornament-left-2 {
       top: 65%;
       left: 5px;
       width: 45px;
       height: auto;
       animation-delay: 2s;
   }
   .side-ornament-left-3 {
       top: 45%;
       left: 5px;
       width: 42px;
       height: auto;
       animation-delay: 1.2s;
   }
   .side-ornament-left-4 {
       top: 20%;
       left: 5px;
       width: 40px;
       height: auto;
       animation-delay: 0.8s;
   }
      .side-ornament-right-1 {
       top: 25%;
       right: 5px;
       width: 40px;
       height: auto;
       animation-delay: 1.5s;
   }
   .side-ornament-right-2 {
       top: 65%;
       right: 5px;
       width: 45px;
       height: auto;
       animation-delay: 2.5s;
   }
   .side-ornament-right-3 {
       top: 45%;
       right: 5px;
       width: 42px;
       height: auto;
       animation-delay: 1.8s;
   }
   .side-ornament-right-4 {
       top: 20%;
       right: 5px;
       width: 40px;
       height: auto;
       animation-delay: 1.5s;
   }
      .corner-hat-bottom-left {
       bottom: 10px;
       left: 10px;
       width: 50px;
       height: auto;
       animation-delay: 1s;
       transform: rotate(-10deg);
   }
   .corner-hat-bottom-right {
       bottom: 10px;
       right: 10px;
       width: 50px;
       height: auto;
       animation-delay: 2s;
       transform: rotate(10deg) scaleX(-1);
   }
   .corner-hat-bottom-center {
       bottom: 10px;
       left: 50%;
       transform: translateX(-50%) rotate(-5deg);
       width: 48px;
       height: auto;
       animation-delay: 1.5s;
   }
      .emoji-accent {
       position: fixed;
       font-size: 28px;
       pointer-events: none;
       z-index: 1;
       opacity: 0.7;
       animation: floatOrnament 4s ease-in-out infinite;
       filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
   }
   .accent-1 {
       top: 12%;
       right: 8%;
       animation-delay: 0s;
   }
   .accent-2 {
       bottom: 18%;
       left: 8%;
       animation-delay: 2s;
   }
   .accent-3 {
       top: 25%;
       left: 10%;
       animation-delay: 1s;
       font-size: 26px;
   }
   .accent-4 {
       bottom: 30%;
       right: 12%;
       animation-delay: 2.5s;
       font-size: 30px;
   }
   .accent-5 {
       top: 40%;
       right: 5%;
       animation-delay: 1.5s;
       font-size: 24px;
   }
   .accent-6 {
       bottom: 25%;
       left: 5%;
       animation-delay: 3s;
       font-size: 26px;
   }
   .accent-7 {
       top: 60%;
       left: 12%;
       animation-delay: 0.5s;
       font-size: 22px;
   }
   .accent-8 {
       bottom: 15%;
       right: 8%;
       animation-delay: 3.5s;
       font-size: 20px;
   }
   .accent-9 {
       top: 35%;
       left: 15%;
       animation-delay: 1.8s;
       font-size: 25px;
   }
   .accent-10 {
       bottom: 40%;
       right: 15%;
       animation-delay: 2.2s;
       font-size: 27px;
   }
   .accent-11 {
       top: 55%;
       right: 10%;
       animation-delay: 0.8s;
       font-size: 23px;
   }
   .accent-12 {
       bottom: 35%;
       left: 10%;
       animation-delay: 3.2s;
       font-size: 24px;
   }
      .christmas-lights {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 60px;
       background: linear-gradient(90deg,
           #0000ff 0%, #00aaff 25%, #00ff00 50%, #ffffff 75%, #0000ff 100%);
       background-size: 200% 100%;
       animation: lightsMove 3s linear infinite;
       opacity: 0.6;
       z-index: 1;
       box-shadow: 0 0 20px rgba(0, 150, 255, 0.4);
   }
   @keyframes lightsMove {
       0% { background-position: 0% 0%; }
       100% { background-position: 200% 0%; }
   }
      .christmas-garland {
       position: fixed;
       left: 0;
       width: 100%;
       height: 40px;
       background: repeating-linear-gradient(
           90deg,
           #228B22 0px,
           #228B22 30px,
           #FFD700 30px,
           #FFD700 35px,
           #228B22 35px,
           #228B22 65px
       );
       z-index: 1;
       opacity: 0.7;
   }
   .garland-top {
       top: 0;
       transform: rotate(180deg);
   }
   .garland-bottom {
       bottom: 0;
   }
      .christmas-popup-decorations {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       overflow: hidden;
   }
   .popup-snowflake {
       position: absolute;
       color: rgba(255, 255, 255, 0.9);
       font-size: 24px;
       animation: popupSnowfall linear infinite;
       text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
   }
   .popup-snowflake:nth-child(1) { left: 10%; animation-duration: 8s; animation-delay: 0s; }
   .popup-snowflake:nth-child(2) { left: 30%; animation-duration: 10s; animation-delay: 1s; }
   .popup-snowflake:nth-child(3) { left: 50%; animation-duration: 9s; animation-delay: 0.5s; }
   .popup-snowflake:nth-child(4) { left: 70%; animation-duration: 11s; animation-delay: 1.5s; }
   .popup-snowflake:nth-child(5) { left: 90%; animation-duration: 8s; animation-delay: 0.3s; }
   .popup-snowflake:nth-child(6) { left: 20%; animation-duration: 10s; animation-delay: 1.2s; }
   .popup-snowflake:nth-child(7) { left: 60%; animation-duration: 9s; animation-delay: 0.8s; }
   .popup-snowflake:nth-child(8) { left: 80%; animation-duration: 11s; animation-delay: 1.7s; }
   @keyframes popupSnowfall {
       0% {
           transform: translate3d(0, -100px, 0) rotate(0deg);
           opacity: 1;
       }
       100% {
           transform: translate3d(0, 600px, 0) rotate(360deg);
           opacity: 0.2;
       }
   }
   .popup-ornament {
       position: absolute;
       font-size: 40px;
       animation: popupFloat 3s ease-in-out infinite;
       filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
   }
   .popup-orn-1 { top: 10%; left: 5%; animation-delay: 0s; }
   .popup-orn-2 { top: 15%; right: 10%; animation-delay: 0.5s; }
   .popup-orn-3 { bottom: 20%; left: 8%; animation-delay: 1s; }
   .popup-orn-4 { bottom: 15%; right: 5%; animation-delay: 1.5s; }
   .popup-santa-hat {
       top: 5%;
       right: 5%;
       width: 50px;
       height: auto;
       animation: popupFloat 3s ease-in-out infinite;
       animation-delay: 1s;
       transform: rotate(15deg);
       opacity: 0.7;
   }
   .popup-ornament {
       bottom: 5%;
       left: 5%;
       width: 45px;
       height: auto;
       animation: popupFloat 4s ease-in-out infinite;
       animation-delay: 0.5s;
       opacity: 0.7;
   }
   @keyframes popupFloat {
       0%, 100% {
           transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
       }
       50% {
           transform: translate3d(0, -15px, 0) rotate(15deg) scale(1.1);
       }
   }
         .popup-accent {
       top: 10%;
       left: 10%;
       font-size: 30px;
       opacity: 0.6;
       animation-delay: 0s;
   }
   .site-footer {
       display: block;
       background: linear-gradient(135deg, rgba(14,16,28,0.95), rgba(10,12,20,0.92));
       border-top: 1px solid rgba(255,255,255,0.08);
       margin-top: var(--spacing-3xl);
       padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
       box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
   }
   .footer-inner {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: var(--spacing-xl);
   }
   .footer-brand {
       display: flex;
       gap: 14px;
       align-items: flex-start;
   }
   .footer-brand img {
       width: 46px;
       height: 46px;
       border-radius: 12px;
       border: 1px solid rgba(255,255,255,0.1);
       box-shadow: 0 6px 14px rgba(0,0,0,0.35);
   }
   .footer-brand h4 {
       margin: 0 0 6px;
       color: #ffd700;
       font-weight: 800;
       font-size: 16px;
       letter-spacing: 0.3px;
   }
   .footer-brand p {
       margin: 0;
       color: var(--text-tertiary);
       line-height: 1.5;
       font-size: 13px;
   }
   .footer-col h5 {
       margin: 0 0 10px;
       color: #e2e8f0;
       font-weight: 800;
       letter-spacing: 0.3px;
       font-size: 14px;
   }
   .footer-col ul {
       list-style: none;
       padding: 0;
       margin: 0;
       display: grid;
       gap: 8px;
   }
   .footer-col a {
       color: var(--text-tertiary);
       text-decoration: none;
       font-size: 13px;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 4px 0;
       transition: color 0.15s ease, transform 0.15s ease;
   }
   .footer-col a i {
       color: #ffd700;
   }
   .footer-col a:hover {
       color: #ffd700;
       transform: translateX(2px);
   }
   .footer-bottom {
       max-width: 1200px;
       margin: var(--spacing-lg) auto 0;
       padding-top: var(--spacing-sm);
       border-top: 1px solid rgba(255,255,255,0.08);
       color: var(--text-muted);
       font-size: 12px;
       text-align: center;
   }
   .footer-bottom p {
       margin: 4px 0;
   }
      .legal-modal {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.85);
       backdrop-filter: blur(10px);
       z-index: var(--z-modal);
       overflow-y: auto;
       animation: modalFadeIn 0.3s ease-out;
   }
   .legal-modal.active {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--spacing-xl);
   }
   .legal-modal-content {
       background: var(--bg-glass-strong);
       backdrop-filter: blur(40px) saturate(180%);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-2xl);
       max-width: 900px;
       width: 100%;
       max-height: 90vh;
       overflow-y: auto;
       padding: var(--spacing-2xl);
       position: relative;
       box-shadow: var(--shadow-xl), var(--shadow-glow);
       animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .legal-modal-content h1 {
       color: var(--color-primary);
       font-family: var(--font-display);
       font-weight: var(--font-weight-bold);
       font-size: var(--font-size-2xl);
       margin-bottom: var(--spacing-xl);
       text-align: center;
   }
   .legal-modal-close {
       position: absolute;
       top: var(--spacing-lg);
       right: var(--spacing-lg);
       width: 40px;
       height: 40px;
       background: var(--bg-glass);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-full);
       color: var(--text-primary);
       font-size: 24px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all var(--transition-base);
       z-index: 10;
   }
   .legal-modal-close:hover {
       background: var(--bg-card-hover);
       border-color: var(--border-color-active);
       transform: rotate(90deg) scale(1.1);
       color: var(--color-primary);
   }
   .legal-content {
       color: var(--text-secondary);
       line-height: 1.8;
       font-size: var(--font-size-base);
   }
   .legal-content h2 {
       color: var(--color-primary);
       font-family: var(--font-display);
       font-weight: var(--font-weight-semibold);
       font-size: var(--font-size-xl);
       margin-top: var(--spacing-xl);
       margin-bottom: var(--spacing-md);
   }
   .legal-content p {
       margin-bottom: var(--spacing-md);
   }
   .legal-content ul {
       margin-bottom: var(--spacing-md);
       padding-left: var(--spacing-xl);
   }
   .legal-content ul li {
       margin-bottom: var(--spacing-sm);
   }
   .legal-content a {
       color: var(--color-accent);
       text-decoration: none;
       transition: all var(--transition-base);
   }
   .legal-content a:hover {
       color: var(--color-primary);
       text-decoration: underline;
   }
   .inline-link {
       background: none;
       border: none;
       color: var(--color-accent);
       text-decoration: underline;
       cursor: pointer;
       font-size: inherit;
       padding: 0;
       transition: all var(--transition-base);
   }
   .inline-link:hover {
       color: var(--color-primary);
   }
      .contact-form {
       margin-top: var(--spacing-xl);
   }
   .form-group {
       margin-bottom: var(--spacing-lg);
   }
   .form-group label {
       display: block;
       color: var(--color-primary);
       font-weight: var(--font-weight-semibold);
       margin-bottom: var(--spacing-sm);
       font-size: var(--font-size-sm);
   }
   .form-group input,
   .form-group select,
   .form-group textarea {
       width: 100%;
       padding: var(--spacing-md);
       background: var(--bg-glass);
       backdrop-filter: blur(10px);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-lg);
       color: var(--text-primary);
       font-size: var(--font-size-base);
       font-family: var(--font-primary);
       transition: all var(--transition-base);
       box-sizing: border-box;
   }
   .form-group input:focus,
   .form-group select:focus,
   .form-group textarea:focus {
       outline: none;
       border-color: var(--border-color-active);
       box-shadow: var(--shadow-glow);
       background: var(--bg-glass-strong);
   }
   .form-group textarea {
       resize: vertical;
       min-height: 120px;
   }
   .contact-submit-btn {
       width: 100%;
       padding: var(--spacing-md) var(--spacing-xl);
       background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
       border: 2px solid var(--border-color-active);
       border-radius: var(--radius-lg);
       color: #000;
       font-weight: var(--font-weight-bold);
       font-size: var(--font-size-base);
       cursor: pointer;
       transition: all var(--transition-base);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-sm);
       font-family: var(--font-display);
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   .contact-submit-btn:hover {
       transform: translateY(-2px);
       box-shadow: var(--shadow-lg), var(--shadow-glow-strong);
   }
   .contact-submit-btn:active {
       transform: translateY(0);
   }
   .contact-success {
       background: rgba(0, 255, 136, 0.1);
       border: 2px solid var(--color-success);
       border-radius: var(--radius-lg);
       padding: var(--spacing-xl);
       text-align: center;
       margin-top: var(--spacing-lg);
   }
   .contact-success i {
       font-size: 48px;
       color: var(--color-success);
       margin-bottom: var(--spacing-md);
   }
.contact-success p {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}
body.with-sidebar {
    padding-left: 0;
    box-sizing: border-box;
}
/* Clean up game pages layout */
body:has(.premium-game-page) .page-border-frame {
    display: none;
}
body:has(.premium-game-page) {
    background: radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.05), transparent 26%),
                radial-gradient(circle at 80% 10%, rgba(59, 130, 246, 0.08), transparent 32%),
                linear-gradient(180deg, #0c0f1a 0%, #0b101c 40%, #0b0c12 100%);
}
body:has(.premium-game-page) .premium-game-page {
    padding: 32px 18px 80px;
}
body:has(.premium-game-page) .premium-back-btn {
    display: inline-flex !important;
    position: sticky;
    top: 88px;
    gap: 10px;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.32));
    color: #0c0c12;
    border: 1px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    padding: 12px 18px;
    border-radius: 14px;
    text-decoration: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body:has(.premium-game-page) .premium-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(255, 215, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body:has(.premium-game-page) .premium-game-container {
    max-width: 1200px !important;
    padding: 32px !important;
    margin: 22px auto 0 !important;
    background: radial-gradient(circle at 15% 20%, rgba(255, 215, 0, 0.06), transparent 36%),
                radial-gradient(circle at 85% 10%, rgba(56, 189, 248, 0.05), transparent 42%),
                rgba(8, 10, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
body:has(.premium-game-page) .premium-game-container::before {
    display: none;
}
body:has(.premium-game-page) .premium-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    margin-bottom: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body:has(.premium-game-page) .premium-random-game {
    margin: 0;
}
body:has(.premium-game-page) .premium-game-title {
    margin: 0;
    font-size: 42px;
    text-align: left;
}
body:has(.premium-game-page) .premium-rating-section {
    margin: 0;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}
body:has(.premium-game-page) .premium-stars {
    gap: 10px;
}
body:has(.premium-game-page) .premium-game-embed {
    margin: 0;
    height: 620px;
    border-radius: 20px;
    background: radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.12), transparent 32%),
                radial-gradient(circle at 70% 10%, rgba(56, 189, 248, 0.14), transparent 40%),
                rgba(4, 6, 12, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}
body:has(.premium-game-page) .premium-fullscreen-btn {
    margin-top: 10px;
    padding: 18px 24px;
    border-radius: 16px;
    font-size: 17px;
}
body:has(.premium-game-page) .premium-game-description {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body:has(.premium-game-page) .premium-reviews-section {
    padding-top: 30px;
}
@media (max-width: 768px) {
    body.with-sidebar {
        padding-left: 0;
    }
    body:has(.premium-game-page) .premium-game-page {
        padding: 18px 12px 60px;
    }
    body:has(.premium-game-page) .premium-game-container {
        padding: 22px !important;
        gap: 16px;
    }
    body:has(.premium-game-page) .premium-game-header {
        flex-direction: column;
        align-items: flex-start;
    }
    body:has(.premium-game-page) .premium-game-title {
        font-size: 32px;
    }
    body:has(.premium-game-page) .premium-game-embed {
        height: 500px;
    }
}
      .page-container {
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
       background-size: 400% 400%;
       animation: gradientShift 20s ease infinite;
   }
.all-games-page .page-container {
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
}
.all-games-page header {
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
}
.all-games-page #visitorCounter {
    margin-left: 0;
    width: 100%;
       box-sizing: border-box;
   }
   .all-games-page .games-grid-container {
       margin-left: 0;
       width: 100%;
       padding: 20px 30px;
       box-sizing: border-box;
   }
   .all-games-page .page-header {
       margin-left: 0;
       width: 100%;
       box-sizing: border-box;
   }
   .all-games-page .games-search-container {
       margin: 20px 0;
       padding: 0;
       display: flex;
       justify-content: center;
   }
   .all-games-page .games-categories {
       margin: 20px 0;
       padding: 0;
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       justify-content: center;
   }
   .all-games-page .category-btn {
       padding: 10px 20px;
       font-size: 14px;
       border-radius: 8px;
       transition: all 0.3s ease;
   }
   .page-header {
       background: var(--bg-glass-strong);
       backdrop-filter: blur(40px) saturate(180%);
       border-bottom: 2px solid var(--border-color);
       padding: var(--spacing-lg) var(--spacing-xl);
       text-align: center;
       position: relative;
       box-shadow: var(--shadow-md);
   }
   .page-header h1 {
       color: var(--color-primary);
       font-family: var(--font-display);
       font-weight: var(--font-weight-bold);
       font-size: var(--font-size-2xl);
       margin: 0;
   }
.back-home-btn {
    position: fixed;
    left: 14px;
    top: 70px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ffd700, #f7a400);
    border: 2px solid rgba(0,0,0,0.25);
    border-radius: 14px;
    color: #0c0c12;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    z-index: 22000;
    box-shadow: 0 14px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.1);
}
.back-home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.3);
}
   .legal-page-content {
       max-width: 900px;
       margin: var(--spacing-2xl) auto;
       padding: 0 var(--spacing-xl);
       color: var(--text-secondary);
       line-height: 1.8;
       font-size: var(--font-size-base);
       flex: 1;
   }
   .legal-page-content h2 {
       color: var(--color-primary);
       font-family: var(--font-display);
       font-weight: var(--font-weight-semibold);
       font-size: var(--font-size-xl);
       margin-top: var(--spacing-xl);
       margin-bottom: var(--spacing-md);
   }
   .legal-page-content p {
       margin-bottom: var(--spacing-md);
   }
   .legal-page-content ul {
       margin-bottom: var(--spacing-md);
       padding-left: var(--spacing-xl);
   }
   .legal-page-content ul li {
       margin-bottom: var(--spacing-sm);
   }
   .legal-page-content a {
       color: var(--color-accent);
       text-decoration: none;
       transition: all var(--transition-base);
   }
   .legal-page-content a:hover {
       color: var(--color-primary);
       text-decoration: underline;
   }
   @media (max-width: 768px) {
       .legal-modal-content {
           padding: var(--spacing-lg);
           max-height: 95vh;
       }
       .footer-content {
           grid-template-columns: 1fr;
           gap: var(--spacing-xl);
       }
       .page-header {
           padding: var(--spacing-md) var(--spacing-lg);
       }
       .back-home-btn {
           position: static;
           transform: none;
           margin-bottom: var(--spacing-md);
           display: inline-flex;
       }
       .page-header h1 {
           font-size: var(--font-size-xl);
       }
       .legal-page-content {
           padding: 0 var(--spacing-md);
           margin: var(--spacing-xl) auto;
       }
   }
   .blog-main, .game-detail-main {
       max-width: 1200px;
       margin: var(--spacing-2xl) auto;
       padding: 0 var(--spacing-lg);
       min-height: calc(100vh - 200px);
   }

   /* Ensure blog page headers and visitor counter are full width */
   body:has(.blog-main) header {
       margin-left: 0 !important;
       width: 100% !important;
   }

   body:has(.blog-main) #visitorCounter {
       margin-left: 0 !important;
       width: 100% !important;
   }

   .blog-container, .game-detail-container {
       background: var(--bg-glass);
       backdrop-filter: blur(30px) saturate(180%);
       border-radius: var(--radius-2xl);
       padding: var(--spacing-3xl);
       box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.05);
       border: 2px solid var(--border-color);
       position: relative;
       overflow: hidden;
   }
   .blog-container::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700);
       background-size: 200% 100%;
       animation: gradientShift 3s ease infinite;
   }
   .blog-header {
       text-align: center;
       margin-bottom: var(--spacing-3xl);
       padding-bottom: var(--spacing-xl);
       border-bottom: 2px solid var(--border-color);
       position: relative;
   }
   .blog-header h1 {
       font-size: var(--font-size-3xl);
       font-weight: var(--font-weight-extrabold);
       background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: var(--spacing-md);
       text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
   }
   .blog-header p {
       color: var(--text-secondary);
       font-size: var(--font-size-lg);
       font-weight: var(--font-weight-medium);
   }
   .blog-header h1 {
       font-family: var(--font-display);
       font-size: var(--font-size-3xl);
       color: var(--color-primary);
       margin-bottom: var(--spacing-md);
   }
   .blog-header p {
       color: var(--text-tertiary);
       font-size: var(--font-size-lg);
   }
   /* Blog hero banner */
   .blog-hero {
       position: relative;
       max-width: 1200px;
       margin: var(--spacing-xl) auto var(--spacing-lg);
       padding: var(--spacing-2xl);
       border-radius: var(--radius-2xl);
       overflow: hidden;
       background: radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.18), transparent 40%),
                   radial-gradient(circle at 80% 10%, rgba(99, 102, 241, 0.16), transparent 38%),
                   linear-gradient(135deg, rgba(16, 18, 30, 0.95), rgba(15, 23, 42, 0.9));
       border: 1px solid rgba(255, 255, 255, 0.08);
       box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
   }
   .blog-hero__title {
       font-size: var(--font-size-3xl);
       font-weight: var(--font-weight-extrabold);
       letter-spacing: -0.4px;
       display: flex;
       align-items: center;
       gap: 12px;
       margin: 0 0 var(--spacing-sm);
   }
   .blog-hero__title i {
       color: #ffd700;
       filter: drop-shadow(0 4px 10px rgba(255,215,0,0.5));
   }
   .blog-hero__subtitle {
       color: var(--text-secondary);
       max-width: 860px;
       line-height: 1.6;
       margin: 0 0 var(--spacing-sm);
   }
   .blog-hero__meta {
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
       color: var(--text-tertiary);
       font-size: var(--font-size-sm);
   }
   .blog-hero__pill {
       padding: 6px 10px;
       border-radius: 999px;
       background: rgba(255,255,255,0.06);
       border: 1px solid rgba(255,255,255,0.08);
   }
   @media (max-width: 768px) {
       .blog-hero {
           margin: var(--spacing-lg);
           padding: var(--spacing-xl);
       }
       .blog-hero__title {
           font-size: var(--font-size-2xl);
       }
   }
   .blog-content {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-2xl);
   }
   .blog-article {
       background: rgba(255, 255, 255, 0.03);
       backdrop-filter: blur(10px);
       border-radius: var(--radius-xl);
       padding: var(--spacing-2xl);
       margin-bottom: var(--spacing-2xl);
       border: 1px solid var(--border-color);
       transition: all var(--transition-base);
       position: relative;
       overflow: hidden;
   }
   .blog-article::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 2px;
       background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
       opacity: 0;
       transition: opacity var(--transition-base);
   }
   .blog-article:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow-lg), 0 0 30px rgba(255, 215, 0, 0.1);
       border-color: var(--border-color-active);
       background: rgba(255, 255, 255, 0.05);
   }
   .blog-article:hover::before {
       opacity: 1;
   }
   .blog-article:last-child {
       margin-bottom: 0;
   }
   .blog-article-header {
       display: flex;
       gap: var(--spacing-md);
       margin-bottom: var(--spacing-md);
       font-size: var(--font-size-sm);
       flex-wrap: wrap;
       align-items: center;
   }
   .blog-date {
       color: var(--text-muted);
       font-weight: var(--font-weight-medium);
       display: flex;
       align-items: center;
       gap: 6px;
   }
   .blog-date::before {
       content: '\f073';
       font-family: 'Font Awesome 6 Free';
       font-weight: 900;
       color: var(--color-primary);
   }
   .blog-category {
       background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
       color: var(--color-primary);
       padding: 4px 12px;
       border-radius: var(--radius-md);
       font-weight: var(--font-weight-semibold);
       border: 1px solid rgba(255, 215, 0, 0.3);
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   .blog-article h2 {
       font-family: var(--font-display);
       font-size: var(--font-size-2xl);
       margin-bottom: var(--spacing-lg);
       line-height: 1.3;
   }
   .blog-article h2 a {
       color: var(--text-primary);
       text-decoration: none;
       transition: var(--transition-base);
       display: block;
   }
   .blog-article h2 a:hover {
       color: var(--color-primary);
       text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
   }
   .blog-excerpt {
       margin-bottom: var(--spacing-lg);
   }
   .blog-excerpt p {
       color: var(--text-secondary);
       line-height: 1.8;
       margin-bottom: var(--spacing-md);
       font-size: var(--font-size-base);
   }
   .read-more-btn {
       display: inline-flex;
       align-items: center;
       gap: var(--spacing-sm);
       color: var(--color-primary);
       text-decoration: none;
       font-weight: var(--font-weight-semibold);
       padding: 10px 20px;
       border-radius: var(--radius-md);
       background: rgba(255, 215, 0, 0.1);
       border: 1px solid rgba(255, 215, 0, 0.2);
       transition: all var(--transition-base);
       margin-top: var(--spacing-sm);
   }
   .read-more-btn:hover {
       background: rgba(255, 215, 0, 0.2);
       border-color: rgba(255, 215, 0, 0.4);
       transform: translateX(4px);
       box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
       gap: var(--spacing-md);
   }
      .breadcrumb {
       display: flex;
       align-items: center;
       gap: var(--spacing-sm);
       margin-bottom: var(--spacing-xl);
       font-size: var(--font-size-sm);
       color: var(--text-tertiary);
   }
   .breadcrumb a {
       color: var(--text-tertiary);
       text-decoration: none;
       transition: var(--transition-base);
   }
   .breadcrumb a:hover {
       color: var(--color-primary);
   }
   .breadcrumb-separator {
       color: var(--text-muted);
   }
   .breadcrumb-current {
       color: var(--color-primary);
   }
   .game-detail-article {
       display: grid;
       grid-template-columns: 1fr 300px;
       gap: var(--spacing-3xl);
       margin-bottom: var(--spacing-3xl);
   }
   .game-detail-header {
       margin-bottom: var(--spacing-2xl);
   }
   .game-detail-title {
       font-family: var(--font-display);
       font-size: var(--font-size-3xl);
       color: var(--color-primary);
       margin-bottom: var(--spacing-md);
   }
   .game-detail-meta {
       display: flex;
       gap: var(--spacing-lg);
       align-items: center;
   }
   .game-genre {
       background: var(--bg-glass-strong);
       padding: var(--spacing-xs) var(--spacing-md);
       border-radius: var(--radius-full);
       font-size: var(--font-size-sm);
       color: var(--text-secondary);
   }
   .game-rating {
       color: var(--color-primary);
   }
   .game-embed-section {
       margin-bottom: var(--spacing-2xl);
   }
   .game-embed-wrapper {
       position: relative;
       width: 100%;
       padding-bottom: 56.25%;        background: var(--bg-glass-strong);
       border-radius: var(--radius-lg);
       overflow: hidden;
       margin-bottom: var(--spacing-md);
       border: 1px solid var(--border-color);
   }
   .game-embed-wrapper iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border: none;
   }
   .play-fullscreen-btn {
       width: 100%;
       padding: var(--spacing-md);
       background: var(--color-primary);
       color: var(--color-text-dark);
       border: none;
       border-radius: var(--radius-md);
       font-weight: var(--font-weight-semibold);
       cursor: pointer;
       transition: var(--transition-base);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-sm);
   }
   .play-fullscreen-btn:hover {
       background: var(--color-primary-dark);
       transform: translateY(-2px);
       box-shadow: var(--shadow-md);
   }
   .game-description h2, .game-description h3 {
       font-family: var(--font-display);
       color: var(--color-primary);
       margin-top: var(--spacing-2xl);
       margin-bottom: var(--spacing-md);
   }
   .game-description h2 {
       font-size: var(--font-size-2xl);
   }
   .game-description h3 {
       font-size: var(--font-size-xl);
   }
   .game-description p {
       color: var(--text-tertiary);
       line-height: 1.8;
       margin-bottom: var(--spacing-md);
   }
   .game-tips-list, .game-features-list {
       list-style: none;
       padding-left: 0;
       margin-bottom: var(--spacing-lg);
   }
   .game-tips-list li, .game-features-list li {
       padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-xl);
       color: var(--text-tertiary);
       position: relative;
       line-height: 1.8;
   }
   .game-tips-list li::before {
       content: '✓';
       position: absolute;
       left: 0;
       color: var(--color-primary);
       font-weight: var(--font-weight-bold);
   }
   .game-features-list li::before {
       content: '★';
       position: absolute;
       left: 0;
       color: var(--color-primary);
   }
   .game-detail-sidebar {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-xl);
   }
   .sidebar-section {
       background: var(--bg-glass-strong);
       padding: var(--spacing-lg);
       border-radius: var(--radius-lg);
       border: 1px solid var(--border-color);
   }
   .sidebar-section h3 {
       font-family: var(--font-display);
       color: var(--color-primary);
       margin-bottom: var(--spacing-md);
       font-size: var(--font-size-lg);
   }
   .related-games-list {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-sm);
   }
   .related-game-item {
       padding: var(--spacing-sm);
       background: var(--bg-glass);
       border-radius: var(--radius-sm);
       transition: var(--transition-base);
   }
   .related-game-item:hover {
       background: var(--bg-card-hover);
       transform: translateX(5px);
   }
   .related-game-item a {
       color: var(--text-secondary);
       text-decoration: none;
       display: block;
   }
   .related-game-item a:hover {
       color: var(--color-primary);
   }
   .sidebar-links {
       list-style: none;
       padding: 0;
   }
   .sidebar-links li {
       margin-bottom: var(--spacing-sm);
   }
   .sidebar-links a {
       color: var(--text-tertiary);
       text-decoration: none;
       transition: var(--transition-base);
       display: block;
       padding: var(--spacing-xs) 0;
   }
   .sidebar-links a:hover {
       color: var(--color-primary);
       padding-left: var(--spacing-sm);
   }
   @media (max-width: 968px) {
       .game-detail-article {
           grid-template-columns: 1fr;
       }
       .game-detail-sidebar {
           order: -1;
       }
   }
      @media (prefers-reduced-motion: reduce) {
       *,
       *::before,
       *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
       }
   }
   .cookie-consent {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       z-index: var(--z-max);
       padding: var(--spacing-md);
       animation: cookieSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
       pointer-events: auto;
       box-sizing: border-box;
       max-width: 100vw;
       overflow-x: hidden;
   }
   @keyframes cookieSlideUp {
       from {
           transform: translateY(100%);
           opacity: 0;
       }
       to {
           transform: translateY(0);
           opacity: 1;
       }
   }
   .cookie-consent-content {
       max-width: 1200px;
       width: 100%;
       margin: 0 auto;
       background: var(--bg-glass-strong);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-lg);
       padding: var(--spacing-lg);
       box-shadow: var(--shadow-xl), var(--shadow-glow);
       display: flex;
       align-items: center;
       gap: var(--spacing-lg);
       flex-wrap: wrap;
       box-sizing: border-box;
   }
   .cookie-consent-icon {
       font-size: 2.5rem;
       color: var(--color-primary);
       flex-shrink: 0;
       animation: cookiePulse 2s ease-in-out infinite;
   }
   @keyframes cookiePulse {
       0%, 100% {
           transform: scale(1);
       }
       50% {
           transform: scale(1.1);
       }
   }
   .cookie-consent-text {
       flex: 1;
       min-width: 0;
       max-width: 100%;
   }
   .cookie-consent-text h3 {
       margin: 0 0 var(--spacing-sm) 0;
       font-size: var(--font-size-xl);
       font-weight: var(--font-weight-bold);
       color: var(--text-primary);
       font-family: var(--font-display);
   }
   .cookie-consent-text p {
       margin: 0 0 var(--spacing-sm) 0;
       color: var(--text-secondary);
       font-size: var(--font-size-sm);
       line-height: 1.6;
       word-wrap: break-word;
       overflow-wrap: break-word;
   }
   .cookie-consent-links {
       display: flex;
       align-items: center;
       gap: var(--spacing-sm);
       flex-wrap: wrap;
       font-size: var(--font-size-xs);
   }
   .cookie-consent-links a,
   .cookie-consent-links button {
       color: var(--color-accent);
       text-decoration: none;
       background: none;
       border: none;
       cursor: pointer;
       font-size: inherit;
       font-family: inherit;
       padding: 0;
       transition: var(--transition-base);
   }
   .cookie-consent-links a:hover,
   .cookie-consent-links button:hover {
       color: var(--color-accent-dark);
       text-decoration: underline;
   }
   .cookie-consent-links span {
       color: var(--text-muted);
   }
   .cookie-consent-actions {
       display: flex;
       gap: var(--spacing-md);
       flex-shrink: 0;
       flex-wrap: wrap;
   }
   .cookie-btn {
       padding: var(--spacing-sm) var(--spacing-lg);
       border: 2px solid;
       border-radius: var(--radius-md);
       font-weight: var(--font-weight-semibold);
       font-size: var(--font-size-sm);
       cursor: pointer;
       transition: var(--transition-base);
       display: flex;
       align-items: center;
       gap: var(--spacing-xs);
       font-family: var(--font-primary);
       white-space: nowrap;
       position: relative;
       overflow: hidden;
   }
   .cookie-btn::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }
   .cookie-btn:hover::before {
       width: 300px;
       height: 300px;
   }
   .cookie-btn-primary {
       background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
       border-color: var(--color-primary);
       color: #000;
       box-shadow: var(--shadow-md), 0 0 15px rgba(255, 215, 0, 0.3);
   }
   .cookie-btn-primary:hover {
       background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
       box-shadow: var(--shadow-lg), 0 0 25px rgba(255, 215, 0, 0.5);
       transform: translateY(-2px);
   }
   .cookie-btn-primary:active {
       transform: translateY(0);
   }
   .cookie-btn-secondary {
       background: var(--bg-card);
       border-color: var(--border-color);
       color: var(--text-primary);
   }
   .cookie-btn-secondary:hover {
       background: var(--bg-card-hover);
       border-color: var(--border-color-hover);
       transform: translateY(-2px);
   }
   .cookie-btn-secondary:active {
       transform: translateY(0);
   }
   .cookie-btn i {
       font-size: 0.9em;
   }
      .cookie-modal {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       z-index: calc(var(--z-max) + 1);
       background: rgba(0, 0, 0, 0.8);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--spacing-md);
       animation: modalFadeIn 0.3s ease-out;
       box-sizing: border-box;
       overflow-y: auto;
   }
   .cookie-modal-content {
       background: var(--bg-glass-strong);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-xl);
       max-width: 700px;
       width: calc(100% - 32px);
       max-width: min(700px, calc(100vw - 32px));
       max-height: calc(100vh - 32px);
       margin: 16px;
       overflow-y: auto;
       box-shadow: var(--shadow-xl), var(--shadow-glow-strong);
       animation: cookieModalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       box-sizing: border-box;
   }
   @keyframes cookieModalSlideIn {
       from {
           opacity: 0;
           transform: translateY(-30px) scale(0.95);
       }
       to {
           opacity: 1;
           transform: translateY(0) scale(1);
       }
   }
   .cookie-modal-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: var(--spacing-lg);
       border-bottom: 1px solid var(--border-color);
   }
   .cookie-modal-header h2 {
       margin: 0;
       font-size: var(--font-size-2xl);
       font-weight: var(--font-weight-bold);
       color: var(--text-primary);
       font-family: var(--font-display);
       display: flex;
       align-items: center;
       gap: var(--spacing-sm);
   }
   .cookie-modal-header h2 i {
       color: var(--color-primary);
   }
   .cookie-modal-close {
       background: transparent;
       border: 2px solid var(--border-color);
       color: var(--text-primary);
       width: 40px;
       height: 40px;
       border-radius: var(--radius-md);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--transition-base);
       font-size: var(--font-size-lg);
   }
   .cookie-modal-close:hover {
       background: rgba(255, 0, 0, 0.2);
       border-color: rgba(255, 0, 0, 0.4);
       color: #ff4444;
       transform: rotate(90deg) scale(1.1);
   }
   .cookie-modal-body {
       padding: var(--spacing-lg);
   }
   .cookie-modal-description {
       color: var(--text-secondary);
       margin-bottom: var(--spacing-xl);
       line-height: 1.6;
   }
   .cookie-category {
       margin-bottom: var(--spacing-lg);
       padding: var(--spacing-lg);
       background: var(--bg-card);
       border: 1px solid var(--border-color);
       border-radius: var(--radius-md);
       transition: var(--transition-base);
   }
   .cookie-category:hover {
       background: var(--bg-card-hover);
       border-color: var(--border-color-hover);
   }
   .cookie-category-header {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: var(--spacing-lg);
   }
   .cookie-category-info {
       flex: 1;
   }
   .cookie-category-info h3 {
       margin: 0 0 var(--spacing-xs) 0;
       font-size: var(--font-size-lg);
       font-weight: var(--font-weight-semibold);
       color: var(--text-primary);
       display: flex;
       align-items: center;
       gap: var(--spacing-sm);
   }
   .cookie-category-info h3 i {
       color: var(--color-accent);
       font-size: 1.1em;
   }
   .cookie-category-info p {
       margin: 0;
       color: var(--text-tertiary);
       font-size: var(--font-size-sm);
       line-height: 1.5;
   }
   .cookie-toggle {
       position: relative;
       flex-shrink: 0;
   }
   .cookie-toggle input[type="checkbox"] {
       position: absolute;
       opacity: 0;
       width: 0;
       height: 0;
   }
   .cookie-toggle-label {
       display: block;
       width: 50px;
       height: 28px;
       background: var(--bg-secondary);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-full);
       cursor: pointer;
       transition: var(--transition-base);
       position: relative;
   }
   .cookie-toggle-label::after {
       content: '';
       position: absolute;
       top: 3px;
       left: 3px;
       width: 18px;
       height: 18px;
       background: var(--text-muted);
       border-radius: 50%;
       transition: var(--transition-base);
   }
   .cookie-toggle input[type="checkbox"]:checked + .cookie-toggle-label {
       background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
       border-color: var(--color-primary);
   }
   .cookie-toggle input[type="checkbox"]:checked + .cookie-toggle-label::after {
       transform: translateX(22px);
       background: #000;
   }
   .cookie-toggle input[type="checkbox"]:disabled + .cookie-toggle-label {
       opacity: 0.6;
       cursor: not-allowed;
   }
   .cookie-toggle.disabled {
       opacity: 0.6;
   }
   .cookie-modal-footer {
       padding: var(--spacing-lg);
       border-top: 1px solid var(--border-color);
       display: flex;
       gap: var(--spacing-md);
       justify-content: flex-end;
       flex-wrap: wrap;
   }
         @media (max-width: 1024px) {
       .cookie-consent-content {
           max-width: 95%;
           padding: var(--spacing-md);
       }
       .cookie-modal-content {
           max-width: min(650px, calc(100vw - 24px));
           margin: 12px;
       }
   }
      @media (max-width: 768px) {
       .cookie-consent {
           padding: var(--spacing-sm);
       }
       .cookie-consent-content {
           flex-direction: column;
           text-align: center;
           gap: var(--spacing-md);
           padding: var(--spacing-md);
           max-width: 100%;
       }
       .cookie-consent-icon {
           font-size: 2rem;
       }
       .cookie-consent-text {
           width: 100%;
           max-width: 100%;
       }
       .cookie-consent-text h3 {
           font-size: var(--font-size-lg);
       }
       .cookie-consent-text p {
           font-size: var(--font-size-sm);
       }
       .cookie-consent-actions {
           width: 100%;
           justify-content: center;
           gap: var(--spacing-sm);
       }
       .cookie-btn {
           flex: 1;
           justify-content: center;
           min-width: 140px;
           padding: var(--spacing-sm) var(--spacing-md);
       }
       .cookie-modal-content {
           max-width: calc(100vw - 20px);
           margin: 10px;
           max-height: calc(100vh - 20px);
       }
       .cookie-modal-header {
           padding: var(--spacing-md);
       }
       .cookie-modal-header h2 {
           font-size: var(--font-size-xl);
       }
       .cookie-modal-body {
           padding: var(--spacing-md);
       }
       .cookie-category {
           padding: var(--spacing-md);
       }
       .cookie-category-header {
           flex-direction: column;
           align-items: flex-start;
           gap: var(--spacing-sm);
       }
       .cookie-toggle {
           align-self: flex-end;
       }
       .cookie-modal-footer {
           flex-direction: column;
           padding: var(--spacing-md);
       }
       .cookie-modal-footer .cookie-btn {
           width: 100%;
       }
   }
      @media (max-width: 640px) {
       .cookie-consent-content {
           padding: var(--spacing-md) var(--spacing-sm);
       }
       .cookie-consent-icon {
           font-size: 1.75rem;
       }
       .cookie-consent-text h3 {
           font-size: var(--font-size-base);
           margin-bottom: var(--spacing-xs);
       }
       .cookie-consent-text p {
           font-size: var(--font-size-xs);
           margin-bottom: var(--spacing-xs);
       }
       .cookie-consent-links {
           font-size: 11px;
       }
       .cookie-btn {
           font-size: var(--font-size-xs);
           padding: 10px var(--spacing-md);
           min-width: 120px;
       }
   }
      @media (max-width: 480px) {
       .cookie-consent {
           padding: var(--spacing-xs);
       }
       .cookie-consent-content {
           padding: var(--spacing-sm);
           gap: var(--spacing-sm);
           border-radius: var(--radius-md);
       }
       .cookie-consent-icon {
           font-size: 1.5rem;
       }
       .cookie-consent-text {
           width: 100%;
       }
       .cookie-consent-text h3 {
           font-size: var(--font-size-base);
           margin-bottom: 6px;
       }
       .cookie-consent-text p {
           font-size: 11px;
           line-height: 1.5;
           margin-bottom: 8px;
       }
       .cookie-consent-links {
           font-size: 10px;
           gap: 4px;
           margin-bottom: var(--spacing-xs);
       }
       .cookie-consent-actions {
           flex-direction: column;
           width: 100%;
           gap: var(--spacing-xs);
       }
       .cookie-btn {
           width: 100%;
           min-width: unset;
           padding: 12px var(--spacing-md);
           font-size: var(--font-size-sm);
       }
       .cookie-modal-content {
           max-width: calc(100vw - 16px);
           margin: 8px;
           max-height: calc(100vh - 16px);
           border-radius: var(--radius-lg);
       }
       .cookie-modal-header {
           padding: var(--spacing-sm);
       }
       .cookie-modal-header h2 {
           font-size: var(--font-size-lg);
       }
       .cookie-modal-close {
           width: 36px;
           height: 36px;
           font-size: var(--font-size-base);
       }
       .cookie-modal-body {
           padding: var(--spacing-sm);
       }
       .cookie-modal-description {
           font-size: var(--font-size-sm);
           margin-bottom: var(--spacing-md);
       }
       .cookie-category {
           padding: var(--spacing-sm);
           margin-bottom: var(--spacing-md);
       }
       .cookie-category-info h3 {
           font-size: var(--font-size-base);
       }
       .cookie-category-info p {
           font-size: var(--font-size-xs);
       }
       .cookie-modal-footer {
           padding: var(--spacing-sm);
           gap: var(--spacing-xs);
       }
       .cookie-modal-footer .cookie-btn {
           padding: 12px var(--spacing-md);
           font-size: var(--font-size-sm);
       }
   }
      @media (max-width: 360px) {
       .cookie-consent {
           padding: 6px;
       }
       .cookie-consent-content {
           padding: 10px;
       }
       .cookie-consent-text h3 {
           font-size: 14px;
       }
       .cookie-consent-text p {
           font-size: 10px;
       }
       .cookie-btn {
           padding: 10px var(--spacing-sm);
           font-size: 12px;
       }
       .cookie-modal-content {
           max-width: calc(100vw - 12px);
           margin: 6px;
       }
   }
      @media (max-height: 500px) and (orientation: landscape) {
       .cookie-consent-content {
           padding: var(--spacing-sm);
       }
       .cookie-consent-text p {
           margin-bottom: var(--spacing-xs);
       }
       .cookie-modal-content {
           max-height: calc(100vh - 16px);
       }
   }

/* Slimmed down game pages */
body.game-page-slim #visitorCounter,
body.game-page-slim header,
body.game-page-slim .notification-dropdown,
body.game-page-slim .premium-back-btn,
body.game-page-slim .premium-game-header,
body.game-page-slim .premium-rating-section,
body.game-page-slim .premium-reviews-section,
body.game-page-slim .premium-fullscreen-btn,
body.game-page-slim .premium-random-game {
    display: none !important;
}
body.game-page-slim .premium-game-page {
    padding: 24px 12px 48px;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.04), transparent 35%),
        radial-gradient(circle at 80% 0%, rgba(99, 102, 241, 0.08), transparent 30%),
        #05060c;
}
body.game-page-slim .premium-game-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}
body.game-page-slim .premium-game-container::before {
    display: none;
}
body.game-page-slim .premium-game-embed {
    height: min(80vh, 900px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    margin: 0 auto 28px;
    background: #090d17;
}
body.game-page-slim .premium-game-embed::before {
    display: none;
}
body.game-page-slim .premium-game-embed iframe {
    border-radius: inherit;
}
body.game-page-slim footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.game-stage {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
}
.game-stage__center {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.game-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rail-card {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.rail-card:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.rail-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(1.05);
    transition: transform 0.2s ease;
}
.rail-card:hover .rail-card__img {
    transform: scale(1.03);
}
.rail-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.75) 100%);
    display: flex;
    align-items: flex-end;
    padding: 10px;
}
.rail-card__title {
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    color: #f8fafc;
}

.game-strip {
    margin-top: 6px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(120deg, rgba(15, 23, 42, 0.65), rgba(15, 118, 110, 0.14));
    box-shadow: 0 14px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.game-strip__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: 0.01em;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 13px;
}
.game-strip__title i {
    color: #34d399;
}
.game-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

@media (max-width: 980px) {
    .game-stage {
        grid-template-columns: 1fr;
    }
    .game-rail {
        display: none;
    }
}

.game-top-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(15, 23, 42, 0.65), rgba(99, 102, 241, 0.12));
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}
.game-top-bar__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.game-top-bar__back:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.7);
    background: rgba(99, 102, 241, 0.14);
}
.game-top-bar__title {
    font-size: 18px;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-top-bar__spacer {
    flex: 1;
}

.game-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.14), rgba(59, 130, 246, 0.12));
    color: #f8fafc;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.game-fullscreen-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(56, 189, 248, 0.18);
}

.game-quick-picks {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.game-quick-picks__title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e2e8f0;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 12px;
}
.game-quick-picks__title i {
    color: #a5b4fc;
}
.game-quick-picks__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.game-quick-pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: #f8fafc;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.game-quick-pick:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 102, 241, 0.7);
    background: rgba(99, 102, 241, 0.08);
}
.game-quick-pick__name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}
.game-quick-pick__cta {
    font-size: 12px;
    color: #a5b4fc;
    font-weight: 700;
}
.game-quick-picks__empty {
    color: #94a3b8;
    padding: 12px 0;
}

/* Lag-free mode: disable animations/transitions except snow */
.lag-free * {
    transition: none !important;
    animation: none !important;
}
.lag-free .snow,
.lag-free .snow:before,
.lag-free .snow:after {
    animation: snow 10s linear infinite !important;
}
.lag-free #snowCanvas {
    display: block;
}
.chat-unread-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

@media (max-width: 768px) {
    body.game-page-slim .premium-game-page {
        padding: 16px 10px 32px;
    }
    body.game-page-slim .premium-game-embed {
        height: 72vh;
    }
    .game-quick-picks__grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}

/* Centering fixes for All Games page */
.all-games-page .games-grid-container {
    width: 100%;
    max-width: 1100px; /* keeps layout consistent */
    margin: 0 auto;     /* centers the entire block */
}

.all-games-page .games-search-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.all-games-page .games-search-wrapper {
    width: 100%;
    max-width: 600px; /* keeps it centered even on big screens */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.all-games-page .games-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
}

@media (min-width: 769px) {
    .all-games-page .games-grid-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ================================
   EDUCATIONAL GAMES — HERO SECTION
   ================================ */

.all-games-hero {
    text-align: center;
    margin-top: 80px;
    margin-bottom: 40px;
}

.all-games-title {
    font-size: 42px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.all-games-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 30px;
}

/* SEARCH BAR — centered */
.centered-search {
    max-width: 420px;
    margin: 0 auto 35px auto;
    display: flex;
    align-items: center;
    position: relative;
}

/* CATEGORY BUTTON ROW — centered */
.centered-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
    max-width: 80000px;
    margin-left: auto;
    margin-right: auto;
}

/* CATEGORY BUTTONS — modern dark style */
.category-btn {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: 0.2s ease;
}

.category-btn:hover {
    background: rgba(255,255,255,0.15);
}

.category-btn.active {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    border-color: transparent;
}

/* GAMES GRID SPACING FIX */
.games-grid {
    margin-top: 20px !important;
    display: grid;
    justify-content: center;
}

/* OPTIONAL — Blue galaxy background aesthetic */
body {
    background: radial-gradient(circle at top, #0a0f23, #050812 70%);
}