/* ================= APPLE iOS LIQUID GLASS - REFINED ================= */

/* ULTRA TRANSPARENT - NO GREY */
html body .glass-panel-shared,
html body #userHamburgerMenu,
html body .user-hamburger-menu,
html body .online-modal-content,
html body #tttGameWindow,
html body .dm-window,
html body .settings-window,
html body .profile-view-modal,
html body .ttt-opponent-window,
html body .warn-modal-content,
html body .confirm-modal-content,
html body .online-list-modal,
html body .social-container,
html body #settingsModal,
html body .settings-modal-content,
html body #userProfileModal,
html body .profile-modal-content {
    /* 40% MORE TRANSPARENT (was 0.006, now 0.0036) */
    background: rgba(255, 255, 255, 0.0036) !important;
    background-color: rgba(255, 255, 255, 0.0036) !important;

    /* REDUCED BLUR (was 120px, now 60px) */
    backdrop-filter: blur(60px) saturate(180%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(60px) saturate(180%) brightness(1.1) !important;

    /* Apple-style borders */
    border: 0.5px solid rgba(255, 255, 255, 0.18) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;

    /* Soft shadow */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;

    /* Rounded */
    border-radius: 20px !important;

    /* NO background images */
    background-image: none !important;
}

/* HAMBURGER MENU - ULTRA SMOOTH MOBILE */
html body #userHamburgerMenu {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 340px !important;
    height: 100% !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform 0.15s ease-out !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    border-radius: 0 !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

html body #userHamburgerMenu.open {
    transform: translate3d(0, 0, 0) !important;
}

/* FROSTED TEXTURE - 20% GRAIN */
html body #userHamburgerMenu::after,
html body .online-modal-content::after,
html body .dm-window::after,
html body .settings-window::after,
html body .profile-view-modal::after,
html body #settingsModal::after,
html body #userProfileModal::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E") !important;
    opacity: 0.058 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    mix-blend-mode: overlay !important;
}

/* Headers - transparent */
html body #userHamburgerMenu .hamburger-header,
html body .settings-header,
html body .warn-header,
html body .confirm-header,
html body .ttt-opponent-header,
html body .ttt-game-header,
html body .social-header,
html body .settings-modal-header,
html body .profile-modal-banner {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1) !important;
    padding: 20px 25px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Titles */
html body #userHamburgerMenu .hamburger-header h3,
html body .settings-header h2,
html body .warn-header h3,
html body .confirm-header h3,
html body .social-header h1 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Close buttons */
html body .hamburger-close,
html body .panel-close,
html body .settings-back-btn,
html body .warn-close,
html body #closeSocialBtn,
html body #settingsModalClose,
html body #profileModalClose {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

html body .hamburger-close:hover,
html body .panel-close:hover,
html body .settings-back-btn:hover,
html body #closeSocialBtn:hover,
html body #settingsModalClose:hover,
html body #profileModalClose:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    transform: scale(1.05);
}

/* KILL ::before pseudo-elements */
html body #userHamburgerMenu::before,
html body .online-modal-content::before,
html body #tttGameWindow::before,
html body .dm-window::before,
html body .settings-window::before,
html body .profile-view-modal::before,
html body .social-container::before,
html body #settingsModal::before,
html body #userProfileModal::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Menu content above texture */
html body .menu-bars-container {
    padding: 12px !important;
    position: relative !important;
    z-index: 2 !important;
}

html body .menu-bar {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

html body .menu-bar:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body .menu-bar-icon {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Profile content above texture */
html body .profile-modal-body,
html body .settings-modal-body {
    position: relative !important;
    z-index: 2 !important;
}

/* ============ KILL ALL NOISE/GRAIN FROM OTHER CSS FILES ============ */
/* Override var(--rough-frost-noise) */
:root {
    --rough-frost-noise: none !important;
}

/* Kill ALL background images with noise patterns */
html body *::before,
html body *::after {
    background-image: none !important;
}

/* ============ PROFILE MODAL SPECIFIC FIXES ============ */

/* Profile Modal - 10% more blur for visual distinction */
html body .profile-view-modal .profile-modal-content {
    backdrop-filter: blur(70px) saturate(180%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(70px) saturate(180%) brightness(1.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;

    /* Elegant mesh border - silver/champagne tones */
    border: 1.5px solid rgba(200, 195, 185, 0.4) !important;
    border-top: 2px solid rgba(220, 215, 200, 0.55) !important;
    border-left: 1.5px solid rgba(210, 205, 195, 0.45) !important;

    /* CRITICAL: position relative for close button to work */
    position: relative !important;

    /* Fix UI leak - ensure overflow visible for close button */
    overflow: visible !important;

    /* Stronger vignette shadow (increased by ~10-20%) */
    box-shadow:
        inset 0 0 120px 30px rgba(0, 0, 0, 0.55),
        0 30px 70px rgba(0, 0, 0, 0.6) !important;
}

/* Moving Shimmer Border (Masked - No background fill) */
html body .profile-view-modal .profile-modal-content::before {
    content: "" !important;
    position: absolute !important;
    inset: -1.5px !important;
    /* Border width */
    width: auto !important;
    /* CRITICAL: Reset inherited width: 200% */
    height: auto !important;
    /* CRITICAL: Reset inherited height: 200% */
    border-radius: 26px !important;
    padding: 1.5px !important;
    /* Visible thickness */
    background: conic-gradient(from var(--angle, 0deg),
            transparent 0deg,
            rgba(255, 255, 255, 0.1) 45deg,
            rgba(255, 255, 255, 0.8) 69deg,
            /* Silver Shine */
            rgba(255, 255, 255, 0.1) 92deg,
            transparent 138deg) !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none !important;
    z-index: 10 !important;
    animation: borderRotate 4s linear infinite !important;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes borderRotate {
    to {
        --angle: 360deg;
    }
}

/* Fix the profile modal close button - proper positioning */
html body .profile-modal-content .profile-modal-close,
html body .profile-view-modal .profile-modal-close,
html body #userProfileModal .profile-modal-close,
html body .profile-view-modal .profile-modal-content .profile-modal-close,
html body #profileModalClose {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: initial !important;
    left: unset !important;
    inset: 12px 12px auto auto !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 10000 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 1rem !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

html body .profile-modal-content .profile-modal-close:hover,
html body .profile-view-modal .profile-modal-close:hover,
html body #userProfileModal .profile-modal-close:hover,
html body #profileModalClose:hover {
    background: #ff006e !important;
    transform: rotate(90deg) !important;
}

/* ============ MENU & READABILITY POLISH ============ */

/* 1. Highlight Division Lines (Bold Borders) */
html body .menu-bar,
html body .setting-item,
html body .online-users-bar,
html body .genz-container,
html body .hamburger-header,
html body .online-user-item {
    border-color: rgba(255, 255, 255, 0.65) !important;
    /* High contrast */
    border-bottom: 2.5px solid rgba(255, 255, 255, 0.65) !important;
    /* THICKER BORDER */
    margin-bottom: 10px !important;
}

/* 2. Cleaner Backgrounds (More Translucent/Clarity) */
html body .menu-bar,
html body .setting-item,
html body .online-users-bar,
html body .genz-container,
html body .online-user-item {
    background: rgba(255, 255, 255, 0.02) !important;
    /* More translucent from background */
    backdrop-filter: blur(20px) !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. Bold Text for Readability - 800 WEIGHT */
html body .menu-bar-info span,
html body .setting-item span,
html body .bar-title,
html body .bar-count,
html body .hamburger-header h3,
html body .genz-header,
html body .online-user-username {
    font-weight: 800 !important;
    /* EXTRA BOLD */
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95) !important;
    /* Stronger shadow */
    letter-spacing: 0.8px !important;
}

/* Glow for name containers on hover */
html body .online-user-item:hover,
html body .menu-bar:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix Icons Visibility */
html body .menu-bar-icon,
html body .setting-item i,
html body .bar-icon {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-weight: bold !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    /* defined icon borders */
}

/* Bio container - more visibility */
html body .profile-bio-container {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(20px) !important;
}

/* Bio text - more visible */
html body #viewProfileBio {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Profile modal body content visibility */
html body .profile-modal-body {
    position: relative !important;
    z-index: 5 !important;
}

/* Social stats better visibility */
html body .profile-social-stats {
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

html body .stat-number {
    color: rgba(255, 255, 255, 0.98) !important;
    font-weight: 700 !important;
}

html body .stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Profile modal grain - 10% less (0.054 instead of 0.064) */
html body .profile-view-modal .profile-modal-content::after,
html body #userProfileModal .profile-modal-content::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E") !important;
    opacity: 0.048 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    mix-blend-mode: overlay !important;
    border-radius: 24px !important;
}

/* Settings modal - same treatment */
html body .settings-modal-content {
    backdrop-filter: blur(70px) saturate(180%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(70px) saturate(180%) brightness(1.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-top: 2px solid rgba(255, 255, 255, 0.5) !important;
}

/* ============ POSTS SECTION SPECIFIC ============ */

/* Re-enable grain texture ONLY for posts (20%) */
html body .frost-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E") !important;
    opacity: 0.18 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    mix-blend-mode: overlay !important;
    border-radius: 16px !important;
}

/* Decrease bg lights by 10% for posts only */
html body .frost-card {
    background: rgba(255, 255, 255, 0.035) !important;
    backdrop-filter: blur(15px) saturate(130%) brightness(0.90) !important;
    -webkit-backdrop-filter: blur(15px) saturate(130%) brightness(0.90) !important;
}

/* Social container - dimmer by 10% */
html body .social-container {
    backdrop-filter: blur(60px) saturate(170%) brightness(0.90) !important;
    -webkit-backdrop-filter: blur(60px) saturate(170%) brightness(0.90) !important;
}

/* Posts grid area */
html body .posts-grid {
    position: relative !important;
}

/* Social header - dimmer */
html body .social-header {
    backdrop-filter: blur(25px) saturate(180%) brightness(0.90) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(0.90) !important;
}

/* ============ GAMES SECTION SPECIFIC ============ */

/* SUBTLE Grain (Reduced from 30% to 5%) */
html body #tttGameWindow::after,
html body .ttt-opponent-window::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E") !important;
    opacity: 0.05 !important;
    /* SUBTLE GRAIN */
    pointer-events: none !important;
    z-index: 1 !important;
    mix-blend-mode: overlay !important;
    border-radius: 0 !important;
}

/* Fix "Shrinked Window" & "Noisy Colors" */
html body #tttGameWindow,
html body .ttt-opponent-window {
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    overflow: auto !important;

    /* SOFTEN COLORS (Remove heavy noise) */
    backdrop-filter: blur(40px) saturate(110%) brightness(0.8) !important;
    -webkit-backdrop-filter: blur(40px) saturate(110%) brightness(0.8) !important;
    background: rgba(10, 10, 15, 0.5) !important;
}

/* Ensure header stays visible */
html body .ttt-opponent-header,
html body .ttt-game-header {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25) !important;
}