.ad-slot {
    width: 100%;
    min-height: 100px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

/* ==================================================================
   FULL-PAGE AD OVERLAY CONSTRAINTS - CRITICAL FIX
   Ensures all ad overlays are constrained to 428px mobile container
   ================================================================== */

/* Target Google AdSense overlays and consent popups */
body > div[id*="google"],
body > div[class*="google"],
body > div[id*="ads"],
body > div[class*="ads"],
div[id*="google_ads_iframe"],
div[id*="google_ads_top_frame"],
div[class*="adsbygoogle-noablate"],
div[id*="google_top_"],
div[id*="GoogleActiveViewElement"] {
    max-width: 428px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
}

/* Target all fixed/absolute positioned overlays from body */
body > div[style*="position: fixed"]:not(.app-wrapper-container):not(.sidebarmenu):not(.modal):not(.modal-backdrop),
body > div[style*="position: absolute"]:not(.app-wrapper-container):not(.sidebarmenu):not(.modal):not(.modal-backdrop) {
    max-width: 428px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
}

/* Specific targeting for AdSense anchor/overlay ads */
div[id^="google_ads_iframe"][id$="_anchor"],
div[data-anchor-status],
div[data-google-query-id] {
    max-width: 428px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
}

/* Target iframe containers */
body > div > iframe[id*="google"],
body > div > iframe[id*="ads"] {
    max-width: 428px !important;
}

/* Ensure parent divs of ad iframes are also constrained */
body > div:has(> iframe[id*="google"]),
body > div:has(> iframe[id*="ads"]) {
    max-width: 428px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
}

/* Target high z-index overlays that might be ads */
body > div[style*="z-index: 2147483647"],
body > div[style*="z-index: 999999"],
body > div[style*="z-index: 9999"] {
    max-width: 428px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
}

/* Global constraint for all body-level fixed/absolute divs (except our app elements) */
body > div:not(.app-wrapper-container):not(.sidebarmenu):not(.modal):not(.modal-backdrop) {
    max-width: 428px !important;
}

/* When ad overlay is active, hide app background elements */
body.ad-overlay-active .app-wrapper-container {
    pointer-events: none;
}

body.ad-overlay-active .sidebarmenu {
    display: none !important;
}

/* Ensure proper stacking order */
.app-wrapper-container {
    z-index: 1;
}

.sidebarmenu {
    z-index: 1050;
}

.modal-backdrop {
    z-index: 1055;
}

.modal {
    z-index: 1060;
}


.ad-slot-placeholder {
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

.ad-slot-placeholder-inner {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
}

.ad-slot-placeholder .label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ad-slot-placeholder .muted {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}
/* Premium Dark Theme: Modern Glassmorphism & Gradient Design */

:root {
    /* Gradient Colors */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    
    /* Solid Colors */
    --primary-color: #667eea;
    --primary-dark: #764ba2;
    --secondary-color: #f5576c;
    --accent-color: #00f2fe;
    --success-color: #43e97b;
    --warning-color: #fee140;
    --danger-color: #f5576c;
    
    /* Dark Theme Colors - Abstract Dark Shades */
    --bg-dark-base: #0a0a12;
    --bg-dark-layer1: #0f0f18;
    --bg-dark-layer2: #12121a;
    --bg-dark-layer3: #151520;
    --bg-glass: rgba(20, 18, 28, 0.65);
    --bg-glass-hover: rgba(28, 25, 38, 0.75);
    --bg-glass-light: rgba(35, 32, 45, 0.5);
    
    --text-light: #ffffff;
    --text-light-muted: rgba(255, 255, 255, 0.8);
    --text-light-dim: rgba(255, 255, 255, 0.6);
    --text-dark: #1a1a2e;
    
    --border-glass: rgba(255, 255, 255, 0.1);
    --border-glass-hover: rgba(102, 126, 234, 0.4);
    --border-glow: rgba(102, 126, 234, 0.6);
    
    /* Shadows & Glows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.6);
    --glow-primary: 0 0 20px rgba(102, 126, 234, 0.4);
    --glow-accent: 0 0 30px rgba(0, 242, 254, 0.3);
    
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

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

html {
    overflow: hidden;
    height: 100%;
}

body {
    font-family: var(--font-family);
    background: 
        /* Organic deep base with richer, more visible tones */
        linear-gradient(135deg, #0f0d18 0%, #12101a 20%, #0d0d15 40%, #12101a 60%, #0f0d18 80%, #0f0d18 100%),
        linear-gradient(225deg, #0d0f15 0%, #12101a 50%, #0d0f15 100%),
        radial-gradient(ellipse at center, #0d0d18 0%, #0a0a12 100%);
    background-attachment: fixed;
    background-size: 200% 200%, 150% 150%, 100% 100%;
    min-height: 100vh;
    height: 100vh;
    color: var(--text-light);
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    animation: organicBaseFlow 20s ease-in-out infinite;
}

@keyframes organicBaseFlow {
    0%, 100% { background-position: 0% 0%, 0% 0%, 50% 50%; }
    50% { background-position: 100% 100%, 100% 100%, 50% 50%; }
}

/* Organic Flowing Gradient System - More Visible */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Flowing organic shapes - brighter and more visible */
        radial-gradient(ellipse 2000px 1600px at 30% 20%, 
            rgba(100, 80, 180, 0.5) 0%, 
            rgba(80, 100, 200, 0.35) 25%,
            rgba(60, 120, 220, 0.2) 45%,
            transparent 70%),
        radial-gradient(ellipse 1800px 2000px at 70% 80%, 
            rgba(140, 60, 160, 0.45) 0%, 
            rgba(120, 80, 180, 0.3) 30%,
            rgba(100, 100, 200, 0.18) 50%,
            transparent 75%),
        /* Flowing wave-like gradients - more visible */
        linear-gradient(180deg, 
            transparent 0%,
            rgba(80, 100, 200, 0.25) 20%,
            rgba(100, 80, 180, 0.2) 40%,
            rgba(120, 60, 160, 0.18) 60%,
            rgba(100, 80, 180, 0.2) 80%,
            transparent 100%),
        /* Organic swirl patterns - brighter */
        conic-gradient(from 0deg at 40% 60%, 
            transparent 0deg,
            rgba(100, 80, 180, 0.2) 90deg,
            transparent 180deg,
            rgba(120, 100, 200, 0.18) 270deg,
            transparent 360deg),
        conic-gradient(from 180deg at 60% 40%, 
            transparent 0deg,
            rgba(80, 120, 220, 0.18) 90deg,
            transparent 180deg,
            rgba(140, 60, 160, 0.15) 270deg,
            transparent 360deg),
        /* Base organic dark layer - lighter */
        linear-gradient(135deg, 
            rgba(15, 12, 25, 0.85) 0%, 
            rgba(18, 15, 28, 0.82) 33%,
            rgba(15, 18, 25, 0.84) 66%,
            rgba(18, 12, 28, 0.85) 100%);
    background-size: 
        120% 120%, 130% 130%, 100% 100%, 
        250% 250%, 280% 280%, 100% 100%;
    pointer-events: none;
    z-index: 0;
    animation: organicFlow 25s ease-in-out infinite;
    filter: blur(0.5px);
    opacity: 1;
}

/* Organic Texture & Depth Layer - More Visible */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Organic flowing particles - brighter */
        radial-gradient(6px 6px at 20% 30%, rgba(100, 80, 180, 0.35), transparent),
        radial-gradient(5px 5px at 60% 70%, rgba(120, 100, 200, 0.32), transparent),
        radial-gradient(4px 4px at 50% 50%, rgba(80, 120, 220, 0.3), transparent),
        radial-gradient(6px 6px at 80% 20%, rgba(140, 60, 160, 0.34), transparent),
        radial-gradient(4px 4px at 30% 80%, rgba(100, 100, 200, 0.31), transparent),
        /* Flowing organic lines - more visible */
        repeating-linear-gradient(
            30deg, 
            transparent 0px, 
            transparent 15px, 
            rgba(100, 80, 180, 0.1) 15px, 
            rgba(100, 80, 180, 0.1) 16px
        ),
        repeating-linear-gradient(
            -30deg, 
            transparent 0px, 
            transparent 20px, 
            rgba(120, 100, 200, 0.08) 20px, 
            rgba(120, 100, 200, 0.08) 21px
        ),
        /* Organic mesh pattern - more visible */
        repeating-linear-gradient(
            0deg, 
            transparent 0px, 
            transparent 80px, 
            rgba(80, 100, 200, 0.05) 80px, 
            rgba(80, 100, 200, 0.05) 81px
        ),
        repeating-linear-gradient(
            90deg, 
            transparent 0px, 
            transparent 80px, 
            rgba(100, 80, 180, 0.05) 80px, 
            rgba(100, 80, 180, 0.05) 81px
        );
    background-size: 
        200% 200%, 180% 180%, 160% 160%, 190% 190%, 170% 170%,
        120% 120%, 130% 130%, 100% 100%, 100% 100%;
    pointer-events: none;
    z-index: 1;
    animation: organicTextureFlow 40s linear infinite;
    opacity: 0.7;
    mix-blend-mode: screen;
}

@keyframes organicFlow {
    0%, 100% { 
        background-position: 
            0% 0%, 100% 100%, 0% 0%, 
            0% 0%, 0% 0%, 0% 0%;
        filter: brightness(1) contrast(1) hue-rotate(0deg) saturate(1);
        opacity: 0.9;
        transform: scale(1) rotate(0deg);
    }
    33% { 
        background-position: 
            30% 20%, 70% 80%, 0% 0%, 
            30% 30%, 70% 70%, 0% 0%;
        filter: brightness(1.08) contrast(1.04) hue-rotate(8deg) saturate(1.12);
        opacity: 0.85;
        transform: scale(1.01) rotate(1deg);
    }
    66% { 
        background-position: 
            60% 40%, 40% 60%, 0% 0%, 
            60% 60%, 40% 40%, 0% 0%;
        filter: brightness(1.12) contrast(1.06) hue-rotate(15deg) saturate(1.18);
        opacity: 0.8;
        transform: scale(1.02) rotate(-1deg);
    }
}

@keyframes organicTextureFlow {
    0% { 
        background-position: 
            0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 
            0% 0%, 0% 0%, 0% 0%, 0% 0%;
        opacity: 0.4;
    }
    50% { 
        background-position: 
            50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%,
            30% 30%, 70% 70%, 50% 50%, 50% 50%;
        opacity: 0.6;
    }
    100% { 
        background-position: 
            100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
            60% 60%, 40% 40%, 100% 100%, 100% 100%;
        opacity: 0.4;
    }
}

/* Hide body scrollbar completely */
body::-webkit-scrollbar {
    width: 0px;
    display: none;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Gradient animation keyframes defined above */

.app-wrapper-container {
    background: 
        /* Organic flowing glass base - lighter and more visible */
        linear-gradient(135deg, 
            rgba(18, 15, 28, 0.75) 0%, 
            rgba(20, 18, 32, 0.78) 25%,
            rgba(18, 20, 30, 0.76) 50%,
            rgba(22, 18, 34, 0.78) 75%,
            rgba(18, 15, 28, 0.75) 100%),
        /* Organic color flows - brighter */
        radial-gradient(ellipse at top left, rgba(100, 80, 180, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(120, 100, 200, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at top right, rgba(80, 120, 220, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(140, 60, 160, 0.2) 0%, transparent 50%);
    backdrop-filter: blur(40px) saturate(200%) brightness(1.1);
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.1);
    border: 1px solid rgba(100, 80, 180, 0.35);
    box-shadow: 
        var(--shadow-xl),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.2),
        0 0 60px rgba(100, 80, 180, 0.3),
        inset 0 0 100px rgba(120, 100, 200, 0.1);
    position: relative;
    width: 100%;
    max-width: 360px;
    min-height: 600px;
    max-height: 90vh;
    border-radius: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0;
}

/* Organic Flowing Border */
.app-wrapper-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: 
        linear-gradient(135deg, 
            rgba(80, 60, 140, 0.35) 0%, 
            rgba(100, 80, 160, 0.28) 20%,
            rgba(60, 100, 180, 0.32) 40%,
            rgba(120, 40, 120, 0.28) 60%,
            rgba(80, 80, 160, 0.3) 80%,
            rgba(80, 60, 140, 0.35) 100%),
        radial-gradient(ellipse at 50% 50%, rgba(100, 80, 160, 0.15) 0%, transparent 80%);
    background-size: 300% 300%, 150% 150%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    opacity: 0.5;
    animation: organicBorderFlow 15s ease-in-out infinite;
    pointer-events: none;
    filter: blur(0.5px);
}

@keyframes organicBorderFlow {
    0%, 100% { 
        opacity: 0.4;
        background-position: 0% 50%, 50% 50%;
        filter: blur(0.5px) brightness(1) hue-rotate(0deg);
    }
    33% { 
        opacity: 0.55;
        background-position: 33% 50%, 50% 50%;
        filter: blur(0.8px) brightness(1.15) hue-rotate(5deg);
    }
    66% { 
        opacity: 0.6;
        background-position: 66% 50%, 50% 50%;
        filter: blur(1px) brightness(1.25) hue-rotate(10deg);
    }
}

#app {
    /* Alias for app-wrapper-container */
}

/* Phone notch effect - Disabled */
.app-wrapper-container::after {
    display: none;
}

.app-wrapper-container::before {
    display: none;
}

/* Header - Organic Glassmorphism */
header {
    background: 
        linear-gradient(135deg, 
            rgba(12, 10, 20, 0.72) 0%, 
            rgba(15, 12, 24, 0.76) 50%,
            rgba(12, 10, 20, 0.72) 100%),
        radial-gradient(ellipse at top, rgba(80, 60, 140, 0.15) 0%, transparent 100%);
    backdrop-filter: blur(32px) saturate(180%) brightness(1.02);
    -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.02);
    border-bottom: 1px solid rgba(80, 60, 140, 0.3);
    padding: 1rem 0;
    position: relative;
    z-index: 10;
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 35px rgba(80, 60, 140, 0.15);
}

header .row {
    margin: 0;
}

header .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.hamburger-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: white;
    height: 100%;
}

.hamburger-logo i {
    font-size: 1.25rem;
}

.hamburger-logo h6 {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.anchor-normal {
    background: rgba(102, 126, 234, 0.8);
    backdrop-filter: blur(10px);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: var(--shadow-sm), 0 0 10px rgba(102, 126, 234, 0.3);
}

.anchor-normal:hover {
    background: rgba(102, 126, 234, 1);
    color: white;
    box-shadow: var(--shadow-md), var(--glow-primary);
    transform: translateY(-1px);
}

/* Back Arrow Button */
.back-arrow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(102, 126, 234, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(102, 126, 234, 0.3);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm), 0 0 10px rgba(102, 126, 234, 0.3);
}

.back-arrow-btn:hover {
    background: rgba(102, 126, 234, 1);
    color: white;
    box-shadow: var(--shadow-md), var(--glow-primary);
    transform: scale(1.1);
}

.back-arrow-btn i {
    font-size: 0.9rem;
}

/* Dashboard Page Section */
.dashboard-page {
    flex: 1 1 auto;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
    overflow-x: hidden;
    min-height: 0;
}

/* Earning Head - Coin Display - Dark Theme */
.earninghead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.coinstack {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(254, 225, 64, 0.4));
}

#availableBalance {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fee140;
    text-shadow: 0 0 15px rgba(254, 225, 64, 0.5);
}

.earningtext {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--text-light-muted);
}

.earningtext img {
    max-width: 200px;
    height: auto;
    filter: brightness(1.1);
}

/* Premium Custom Scrollbar - Smaller */
.app-wrapper-container::-webkit-scrollbar {
    width: 3px !important;
}

.app-wrapper-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    margin: 2px 0 !important;
}

.app-wrapper-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
        rgba(102, 126, 234, 0.7) 0%, 
        rgba(118, 75, 162, 0.7) 50%, 
        rgba(79, 172, 254, 0.7) 100%) !important;
    border-radius: 8px !important;
    border: none !important;
    min-height: 20px !important;
    box-shadow: 0 0 6px rgba(102, 126, 234, 0.4);
}

.app-wrapper-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
        rgba(102, 126, 234, 0.9) 0%, 
        rgba(118, 75, 162, 0.9) 50%, 
        rgba(0, 242, 254, 0.9) 100%) !important;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.6);
}

/* Firefox Scrollbar */
.app-wrapper-container {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(102, 126, 234, 0.7) rgba(0, 0, 0, 0.15) !important;
}

/* Global smaller scrollbar for all elements */
*::-webkit-scrollbar {
    width: 3px;
}

*::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.5);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.7);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.5) rgba(0, 0, 0, 0.1);
}

/* Mobile-first design - centered on desktop */
body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

#app {
    width: 100%;
    max-width: 360px; /* Mobile width */
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    box-shadow: none;
}

/* Mobile devices - Full screen, no desktop elements */
@media (max-width: 767px) {
    body {
        display: block;
        justify-content: unset;
        align-items: unset;
        padding: 0;
        margin: 0;
        background: 
            linear-gradient(135deg, #0f0d18 0%, #12101a 20%, #0d0d15 40%, #12101a 60%, #0f0d18 80%, #0f0d18 100%),
            linear-gradient(225deg, #0d0f15 0%, #12101a 50%, #0d0f15 100%),
            radial-gradient(ellipse at center, #0d0d18 0%, #0a0a12 100%) !important;
        background-attachment: fixed !important;
        background-size: 200% 200%, 150% 150%, 100% 100% !important;
        overflow: hidden;
        height: 100vh;
        width: 100vw;
        animation: organicBaseFlow 20s ease-in-out infinite !important;
    }
    
    body::before {
        display: block !important;
    }
    
    body::after {
        display: block !important;
    }
    
    body::before {
        display: block !important;
    }
    
    body::after {
        display: block !important;
    }
    
    body::before {
        display: none !important;
    }
    
    .app-wrapper-container {
        /* Organic glassmorphism - brighter and more visible */
        background: 
            linear-gradient(135deg, 
                rgba(18, 15, 28, 0.75) 0%, 
                rgba(20, 18, 32, 0.78) 50%,
                rgba(18, 15, 28, 0.75) 100%),
            radial-gradient(ellipse at top left, rgba(100, 80, 180, 0.25) 0%, transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(120, 100, 200, 0.22) 0%, transparent 55%) !important;
        backdrop-filter: blur(40px) saturate(200%) brightness(1.1) !important;
        -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.1) !important;
        border: 1px solid rgba(100, 80, 180, 0.35) !important;
        box-shadow: 
            var(--shadow-xl),
            0 0 60px rgba(100, 80, 180, 0.3),
            inset 0 0 100px rgba(120, 100, 200, 0.1) !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
}

/* Container max-width for mobile size */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
}

/* Coin Display */
.coin-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-warning {
    background: var(--warning-gradient);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #fee140 0%, #fa709a 100%);
    color: white;
}

/* Cards - Simplified for better scroll performance */
.quiz-card {
    background: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.95) 0%, 
        rgba(15, 23, 42, 0.98) 100%);
    border: 1.5px solid rgba(102, 126, 234, 0.25);
    border-radius: 16px;
    padding: 0.9rem;
    margin-bottom: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    /* Performance optimizations */
    will-change: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Removed animated gradient background for better scroll performance */

/* Removed shine effect and hover effects for smoother scrolling */

.quiz-card > * {
    position: relative;
    z-index: 2;
}

/* When quiz cards are in a grid, remove margin-bottom - grid gap handles spacing */
.row.g-1 .quiz-card,
.row.g-2 .quiz-card {
    margin-bottom: 0;
}

/* Reduce gap for quiz cards */
.row.g-1 {
    --bs-gutter-y: 0.5rem;
    --bs-gutter-x: 0;
}

/* Custom spacing for quiz cards */
.quizzes-container {
    margin-top: 0.5rem;
}

.quizzes-container .row.g-1 {
    gap: 0.5rem 0;
}

/* Hover effects defined above */

.quiz-category-label {
    font-size: 0.7rem;
    color: rgba(139, 92, 246, 0.9);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.15) 0%, 
        rgba(99, 102, 241, 0.1) 100%);
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(10px);
}

.quiz-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.quiz-card-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.quiz-category-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.9) 0%, 
        rgba(99, 102, 241, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
    position: relative;
    box-shadow: 0 3px 16px rgba(139, 92, 246, 0.4);
}

/* Removed animations for better scroll performance */
@keyframes iconShine {
    0%, 100% {
        opacity: 1;
    }
}

/* Removed hover effect on category icon for smoother scrolling */

.category-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.quiz-details {
    flex: 1;
    min-width: 0;
}

.quiz-title {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0;
    margin-bottom: 0.4rem;
    line-height: 1.3;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.2px;
}

.quiz-prize {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fbbf24 !important;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.quiz-card-actions {
    flex-shrink: 0;
    margin-left: auto;
}

.play-button {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.95) 0%, 
        rgba(99, 102, 241, 0.95) 50%,
        rgba(139, 92, 246, 0.95) 100%);
    background-size: 200% 200%;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
        0 3px 16px rgba(139, 92, 246, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    position: relative;
    overflow: hidden;
    min-width: 95px;
}

/* Simplified play button - removed hover effects for smoother scrolling */
.play-button:active {
    opacity: 0.9;
}

.play-button:disabled {
    background: linear-gradient(135deg, 
        rgba(107, 114, 128, 0.6) 0%, 
        rgba(75, 85, 99, 0.6) 100%);
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.quiz-card-footer {
    display: flex;
    align-items: center;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(102, 126, 234, 0.2);
    position: relative;
}

.quiz-card-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 1.5px;
    background: linear-gradient(90deg, 
        rgba(139, 92, 246, 0.8) 0%, 
        transparent 100%);
    border-radius: 0 0 2px 2px;
}

.entry-fee {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    background: linear-gradient(135deg, 
        rgba(30, 41, 59, 0.6) 0%, 
        rgba(15, 23, 42, 0.6) 100%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* Dark theme text colors for quiz cards */
.quiz-card h3,
.quiz-card h4,
.quiz-card h5,
.quiz-card .quiz-title {
    color: var(--text-light) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.quiz-card p,
.quiz-card .text-muted {
    color: var(--text-light-dim) !important;
}

.quiz-card .quiz-prize,
.quiz-card .entry-fee {
    color: var(--text-light-muted) !important;
}

/* Dark theme text colors for article cards */
.article-card h3,
.article-card h4,
.article-card .article-title {
    color: var(--text-light) !important;
}

.article-card p,
.article-card .text-muted {
    color: var(--text-light-dim) !important;
}

/* Buttons - All use theme colors */
/* Primary: Purple-blue gradient (#667eea to #764ba2) */
/* Secondary: Gray gradient (neutral) */
/* Success: Green gradient (#43e97b to #38f9d7) */
/* Warning: Pink-yellow gradient (#fa709a to #fee140) */
/* Danger: Pink-red gradient (#f093fb to #f5576c) */
/* Accent: Blue-teal gradient (#4facfe to #00f2fe) */
.btn-primary {
    background: var(--primary-gradient);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    color: white;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md), var(--glow-primary);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg), var(--glow-primary), 0 0 30px rgba(102, 126, 234, 0.6);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--glow-primary);
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid rgba(100, 80, 180, 0.6);
    color: rgba(100, 80, 180, 0.9);
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%);
    border-color: rgba(100, 80, 180, 0.6);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 15px rgba(100, 80, 180, 0.4);
}

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

.btn-outline-primary.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
}

.btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
    color: white;
    transform: translateY(-2px);
}

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

/* Alert styling - Dark Theme Enhanced */
.alert {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border-width: 1px;
    border-style: solid;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background: rgba(67, 233, 123, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(67, 233, 123, 0.4);
    color: #43e97b;
    box-shadow: var(--shadow-sm), 0 0 15px rgba(67, 233, 123, 0.2);
}

.alert-danger {
    background: rgba(245, 87, 108, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 87, 108, 0.4);
    color: #f5576c;
    box-shadow: var(--shadow-sm), 0 0 15px rgba(245, 87, 108, 0.2);
}

.alert-warning {
    background: rgba(250, 112, 154, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(250, 112, 154, 0.4);
    color: #fee140;
    box-shadow: var(--shadow-sm), 0 0 15px rgba(250, 112, 154, 0.2);
}

.alert-info {
    background: rgba(100, 80, 180, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 80, 180, 0.4);
    color: rgba(120, 100, 200, 0.9);
    box-shadow: var(--shadow-sm), 0 0 15px rgba(100, 80, 180, 0.2);
}

.btn-success {
    background: var(--success-gradient);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
}

.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, #38f9d7 0%, #43e97b 100%);
    color: white;
    transform: translateY(-2px);
}

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

.btn-warning {
    background: var(--warning-gradient);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
}

.btn-warning:hover,
.btn-warning:focus {
    background: linear-gradient(135deg, #fee140 0%, #fa709a 100%);
    color: white;
    transform: translateY(-2px);
}

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

.btn-danger {
    background: var(--secondary-gradient);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
}

.btn-danger:hover,
.btn-danger:focus {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    color: white;
    transform: translateY(-2px);
}

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

.btn-play {
    background: var(--primary-gradient);
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-weight: 600;
    color: white;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm), var(--glow-primary);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-play::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.4s, height 0.4s;
}

.btn-play:hover::after {
    width: 200px;
    height: 200px;
}

.btn-play:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--glow-primary), 0 0 20px rgba(102, 126, 234, 0.5);
}

.btn-play:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: #9ca3af !important;
    color: white !important;
}

/* Article Cards - Premium Glassmorphism */
.article-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0;
    position: relative;
}

.article-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.1) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

.article-card:hover::before {
    left: 100%;
}

.article-card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-glass-hover);
    box-shadow: var(--shadow-lg), var(--glow-primary);
    transform: translateY(-3px);
}

.article-card > * {
    position: relative;
    z-index: 1;
}

/* When article cards are in a grid, remove margin-bottom - grid gap handles spacing */
.row.g-2 .article-card {
    margin-bottom: 0;
}

.article-thumbnail {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--bg-dark-layer2);
    position: relative;
}

.article-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

.article-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.article-card:hover .article-thumbnail img {
}

.article-content {
    padding: 1.25rem;
}

.article-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.4;
    min-height: 2.8rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.btn-article {
    background: white;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.6rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-article:hover {
    background: var(--primary-gradient);
    border-color: var(--primary-color);
    color: white;
}

.btn-play:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Button Sizes */
.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    border-radius: 20px;
}

.btn-lg {
    padding: 0.875rem 2.5rem;
    font-size: 1.05rem;
    border-radius: 30px;
}

/* Ensure all buttons use theme colors */
.btn {
    color: white;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: none;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Override Bootstrap default button colors with theme */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background: var(--primary-gradient);
    border-color: var(--primary-color);
    color: white;
}

.btn-outline-primary,
.btn-outline-primary:not(:disabled):not(.disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--primary-gradient);
    border-color: var(--primary-color);
    color: white;
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    border-color: #6b7280;
    color: white;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
    border-color: #6b7280;
    color: white;
}

/* Hero Section - Organic Flowing Design */
.hero-section {
    background: 
        linear-gradient(135deg, 
            rgba(15, 12, 24, 0.65) 0%, 
            rgba(18, 15, 28, 0.7) 50%,
            rgba(15, 12, 24, 0.65) 100%),
        radial-gradient(ellipse at center, rgba(80, 60, 140, 0.18) 0%, transparent 70%);
    backdrop-filter: blur(22px) saturate(175%);
    -webkit-backdrop-filter: blur(22px) saturate(175%);
    border: 1px solid rgba(80, 60, 140, 0.35);
    border-radius: 20px;
    padding: 2.5rem 1rem;
    color: white;
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 
        var(--shadow-lg),
        0 0 45px rgba(80, 60, 140, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(ellipse, rgba(80, 60, 140, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse, rgba(100, 80, 160, 0.2) 0%, transparent 60%);
    animation: heroOrganicGlow 12s ease-in-out infinite;
    pointer-events: none;
    filter: blur(45px);
}

@keyframes heroOrganicGlow {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.15);
        opacity: 0.75;
    }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        rgba(180, 140, 220, 0.9) 25%,
        rgba(140, 180, 240, 0.85) 50%,
        rgba(200, 120, 200, 0.9) 75%,
        #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    position: relative;
    z-index: 1;
    text-shadow: 
        0 0 35px rgba(80, 60, 140, 0.5),
        0 0 70px rgba(100, 80, 160, 0.3);
    filter: drop-shadow(0 0 15px rgba(80, 60, 140, 0.4));
    animation: organicTitleFlow 6s ease-in-out infinite;
}

@keyframes organicTitleFlow {
    0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 15px rgba(80, 60, 140, 0.4)) brightness(1);
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 25px rgba(100, 80, 160, 0.6)) brightness(1.08);
    }
}

.hero-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

/* Stats */
.stats-section {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
    flex: 1;
    min-width: 80px;
    position: relative;
    z-index: 1;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
    text-shadow: none;
}

.stat-label {
    font-size: 0.7rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Category Tabs - With Left & Right Arrows */
.category-tabs-wrapper {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-tabs-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.category-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.category-tab {
    background: transparent;
    border: 2px solid transparent;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}

.category-tab.active {
    color: #f59e0b;
    border: 2px solid #f59e0b;
    font-weight: 700;
}

.scroll-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: 50%;
}

.scroll-arrow.show {
    opacity: 1;
    pointer-events: auto;
}

.scroll-arrow:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
}

.tab-content {
    padding-bottom: 3rem;
}

.quizzes-container {
    min-height: 200px;
}

/* Question Card - Premium Glassmorphism */
.question-card,
.question-card-quiz {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    margin: 2rem 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

/* Quiz Progress Bar */
.quiz-progress {
    margin-bottom: 1.5rem;
}

.progress-info {
    color: var(--text-light) !important;
    font-weight: 600;
}

.progress-info span {
    color: var(--text-light) !important;
}

.question-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.3) 0%, 
        rgba(0, 242, 254, 0.2) 50%,
        rgba(102, 126, 234, 0.3) 100%);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    opacity: 0.5;
    animation: questionBorderGlow 4s ease infinite;
}

@keyframes questionBorderGlow {
    0%, 100% { background-position: 0% 50%; opacity: 0.3; }
    50% { background-position: 100% 50%; opacity: 0.6; }
}

.question-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 2rem;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.answer-option {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 2px solid var(--border-glass);
    border-radius: 15px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

.answer-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.2) 50%, 
        transparent 100%);
    transition: left 0.5s ease;
}

.answer-option:hover::before {
    left: 100%;
}

.answer-option:hover {
    border-color: var(--primary-color);
    background: var(--bg-glass-hover);
    box-shadow: var(--shadow-md), 0 0 15px rgba(102, 126, 234, 0.3);
    transform: translateX(5px);
}

.answer-option.selected {
    background: var(--primary-gradient);
    color: white;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg), var(--glow-primary);
    transform: translateX(5px);
}

.answer-option.correct {
    background: var(--success-gradient);
    color: white;
    border-color: var(--success-color);
}

.answer-option.incorrect {
    background: var(--secondary-gradient);
    color: white;
    border-color: var(--danger-color);
}

/* Result Modal - Dark Theme */
.result-modal {
    text-align: center;
    padding: 2rem;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    color: var(--text-light);
}

.result-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 20px rgba(100, 80, 180, 0.5));
}

.result-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.result-coins {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fee140;
    margin: 1rem 0;
    text-shadow: 0 0 15px rgba(254, 225, 64, 0.5);
}

/* Result Page - Dark Theme */
.result-header {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.result-category {
    justify-content: center;
    margin-bottom: 1rem;
}

.category-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
    box-shadow: var(--shadow-md), 0 0 15px rgba(100, 80, 180, 0.4);
}

.result-category-name {
    color: var(--text-light) !important;
    font-size: 1.3rem;
    font-weight: 700;
}

.result-message-text {
    color: var(--text-light-muted) !important;
    font-size: 1rem;
}

.result-score {
    font-size: 1.2rem;
}

.score-label {
    color: var(--text-light-muted) !important;
}

.score-value {
    color: #fee140 !important;
    font-size: 1.5rem;
    text-shadow: 0 0 15px rgba(254, 225, 64, 0.5);
}

.result-reward {
    background: var(--bg-glass-light);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: 15px;
    padding: 1rem;
}

.reward-amount {
    color: #fee140 !important;
    font-size: 1.3rem;
    text-shadow: 0 0 15px rgba(254, 225, 64, 0.5);
}

.continue-text {
    color: var(--text-light-muted) !important;
    font-size: 0.95rem;
}

/* Result Quiz Cards */
.quiz-card-result {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.quiz-card-result:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-glass-hover);
    box-shadow: var(--shadow-lg), var(--glow-primary);
    transform: translateY(-2px);
}

.quiz-card-header-result {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.quiz-card-header-left-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.quiz-category-icon-result {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-md), 0 0 15px rgba(100, 80, 180, 0.4);
}

.quiz-details-result {
    flex: 1;
}

.quiz-title-result {
    color: var(--text-light) !important;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.quiz-prize-result {
    color: var(--text-light-muted) !important;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.quiz-prize-result .text-dark {
    color: var(--text-light-muted) !important;
}

.quiz-prize-result .fw-bold {
    color: #fee140 !important;
}

.quiz-meta-result {
    font-size: 0.8rem;
    color: var(--text-light-dim) !important;
}

.winner-announcement-result {
    color: var(--text-light-dim) !important;
}

.winner-announcement-result .text-dark {
    color: var(--text-light-dim) !important;
}

.quiz-card-actions-result {
    flex-shrink: 0;
}

.play-button-result {
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm), 0 0 10px rgba(100, 80, 180, 0.3);
    border: none;
}

.play-button-result:hover {
    background: linear-gradient(135deg, rgba(120, 100, 200, 0.9) 0%, rgba(100, 80, 180, 0.8) 100%);
    color: white;
    box-shadow: var(--shadow-md), 0 0 15px rgba(100, 80, 180, 0.5);
    transform: translateY(-2px);
}

.quiz-card-footer-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-glass);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quiz-status-row-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.live-badge-result {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.8) 0%, rgba(56, 249, 215, 0.9) 100%);
    color: white;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: var(--shadow-sm), 0 0 10px rgba(67, 233, 123, 0.3);
}

.entry-fee-result {
    color: var(--text-light-muted) !important;
    font-size: 0.75rem;
}

.entry-fee-result .text-dark {
    color: var(--text-light-muted) !important;
}

/* FAQ Accordion - Dark Theme */
.faq-page {
    padding: 1rem 0.5rem 2rem;
}

.faq-accordion {
    margin-top: 1rem;
}

.faq-item {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--border-glass-hover);
    box-shadow: var(--shadow-md);
}

.faq-question {
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: var(--text-light);
    background: var(--bg-glass-hover);
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question i {
    transition: transform 0.3s ease;
    color: var(--text-light-dim);
}

.faq-item[open] .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.25rem 1.25rem;
    color: var(--text-light-muted);
    line-height: 1.8;
    font-size: 0.9rem;
}

.faq-answer p {
    color: var(--text-light-muted) !important;
    margin-bottom: 0.75rem;
}

.faq-answer ul,
.faq-answer ol {
    color: var(--text-light-muted) !important;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.faq-answer li {
    color: var(--text-light-muted) !important;
    margin-bottom: 0.5rem;
}

/* About Page - Dark Theme */
.about-page {
    padding: 1rem 0.5rem 2rem;
}

.about-section {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 15px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-md);
}

.about-section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: var(--text-light) !important;
}

.about-section p {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    color: var(--text-light-muted) !important;
}

.feature-box {
    background: var(--bg-glass-light);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border-glass);
    transition: all 0.3s ease;
}

.feature-box:hover {
    background: var(--bg-glass-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.feature-box h4 {
    color: var(--text-light) !important;
}

.feature-box p {
    color: var(--text-light-muted) !important;
}

.stat-box {
    background: var(--bg-glass-light);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border-glass);
    color: var(--text-light);
}

.about-section ul {
    padding-left: 1.5rem;
    color: var(--text-light-muted) !important;
}

.about-section li {
    margin-bottom: 0.5rem;
    color: var(--text-light-muted) !important;
}

.about-section a {
    color: rgba(100, 80, 180, 0.9);
    text-decoration: underline;
}

.about-section a:hover {
    color: rgba(120, 100, 200, 1);
}

/* Contact Page - Dark Theme */
.contact-page {
    padding: 1rem 0.5rem 2rem;
}

.contact-form-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

.contact-form-card h3 {
    color: var(--text-light) !important;
}

/* Winners Page - Dark Theme */
.winners-page {
    padding: 1rem 0.5rem 2rem;
}

.winners-page h1 {
    color: var(--text-light) !important;
}

/* Games Page Stats - Dark Theme */
.stat-item {
    text-align: center;
}

.stat-value {
    color: var(--text-light) !important;
    font-weight: 700;
    font-size: 1.1rem;
}

.stat-label {
    color: var(--text-light-dim) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Answer Options Quiz Page */
.answer-option-quiz {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 2px solid var(--border-glass);
    border-radius: 15px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

.answer-option-quiz::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(100, 80, 180, 0.2) 50%, 
        transparent 100%);
    transition: left 0.5s ease;
}

.answer-option-quiz:hover::before {
    left: 100%;
}

.answer-option-quiz:hover {
    border-color: rgba(100, 80, 180, 0.5);
    background: var(--bg-glass-hover);
    box-shadow: var(--shadow-md), 0 0 15px rgba(100, 80, 180, 0.3);
    transform: translateX(5px);
}

.answer-option-quiz.selected {
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%);
    color: white;
    border-color: rgba(100, 80, 180, 0.6);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(100, 80, 180, 0.5);
    transform: translateX(5px);
}

.answer-option-quiz.correct {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.8) 0%, rgba(56, 249, 215, 0.9) 100%);
    color: white;
    border-color: rgba(67, 233, 123, 0.6);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(67, 233, 123, 0.5);
}

.answer-option-quiz.incorrect {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.8) 0%, rgba(240, 147, 251, 0.9) 100%);
    color: white;
    border-color: rgba(245, 87, 108, 0.6);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(245, 87, 108, 0.5);
}

.answer-option-quiz input[type="radio"] {
    margin-right: 0.75rem;
    accent-color: rgba(100, 80, 180, 0.8);
}

.answer-option-quiz label,
.option-label-quiz {
    color: var(--text-light) !important;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.option-letter-quiz {
    background: var(--bg-glass-hover);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-light);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.answer-option-quiz:hover .option-letter-quiz {
    background: rgba(100, 80, 180, 0.3);
    border-color: rgba(100, 80, 180, 0.5);
}

.answer-option-quiz.selected .option-letter-quiz,
.answer-option-quiz input[type="radio"]:checked + .option-label-quiz .option-letter-quiz {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.option-text-quiz {
    flex: 1;
    color: var(--text-light);
}

.answer-option-quiz.selected .option-text-quiz,
.answer-option-quiz input[type="radio"]:checked + .option-label-quiz .option-text-quiz {
    color: white;
    font-weight: 600;
}

/* Partner Page - Dark Theme */
.partner-page {
    padding: 1rem 0.5rem 2rem;
}

.partner-form-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

.partner-form-card h3 {
    color: var(--text-light) !important;
}

/* Blog Pages - Dark Theme */
.blog-page {
    padding: 1rem 0.5rem 2rem;
}

.blog-post-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg), var(--glow-primary);
    border-color: var(--border-glass-hover);
}

.blog-post-meta {
    color: var(--text-light-muted);
}

.blog-post-meta .badge {
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%);
    color: white;
    border: none;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: var(--shadow-sm), 0 0 10px rgba(100, 80, 180, 0.3);
}

.blog-post-title a {
    color: var(--text-light) !important;
    text-decoration: none;
    transition: color 0.3s;
}

.blog-post-title a:hover {
    color: rgba(100, 80, 180, 0.9) !important;
}

.blog-post-excerpt {
    color: var(--text-light-muted) !important;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.blog-post-content {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    color: var(--text-light-muted);
    line-height: 1.8;
}

.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
    color: var(--text-light) !important;
}

.blog-post-content p {
    color: var(--text-light-muted) !important;
    margin-bottom: 1rem;
}

.blog-post-content a {
    color: rgba(100, 80, 180, 0.9);
    text-decoration: underline;
}

.blog-post-content a:hover {
    color: rgba(120, 100, 200, 1);
}

.blog-post-content ul,
.blog-post-content ol {
    color: var(--text-light-muted) !important;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.blog-post-content li {
    color: var(--text-light-muted) !important;
    margin-bottom: 0.5rem;
}

/* Intro Pages - Dark Theme */
.intro-page {
    padding: 1rem 0.5rem 2rem;
}

.intro-success-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
    color: var(--text-light);
}

.intro-success-card h1,
.intro-success-card h2 {
    color: var(--text-light) !important;
}

.intro-success-card p {
    color: var(--text-light-muted) !important;
}

/* Pagination - Dark Theme - Maximum Specificity to Override Bootstrap */
/* This must override Bootstrap's default white backgrounds */
nav .pagination,
.pagination,
ul.pagination,
nav ul.pagination,
ul.pagination.pagination {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.5rem !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
}

nav .pagination .page-item,
.pagination .page-item,
ul.pagination .page-item,
ul.pagination li.page-item,
ul.pagination > li,
li.page-item {
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    position: relative !important;
}

/* CRITICAL: Override ALL Bootstrap pagination link styles - Must be after Bootstrap */
nav .pagination .page-link,
.pagination .page-link,
ul.pagination .page-link,
ul.pagination .page-item .page-link,
ul.pagination > li > a,
ul.pagination > li > span,
li.page-item .page-link,
.page-item .page-link,
a.page-link,
span.page-link,
.page-link {
    /* Force dark theme background - override Bootstrap white */
    background: var(--bg-glass) !important;
    background-color: var(--bg-glass) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    /* Border styling */
    border: 1px solid var(--border-glass) !important;
    border-color: var(--border-glass) !important;
    border-radius: 10px !important;
    /* Text styling */
    color: var(--text-light) !important;
    padding: 0.5rem 0.75rem !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    /* Layout */
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    /* Prevent any large font sizes that might create oversized arrows */
    max-font-size: 1.5rem !important;
    box-shadow: var(--shadow-sm) !important;
    line-height: 1.5 !important;
    position: relative !important;
    z-index: 1 !important;
    /* Remove any Bootstrap default styles */
    box-sizing: border-box !important;
}

nav .pagination .page-link:hover,
nav .pagination .page-link:focus,
.pagination .page-link:hover,
.pagination .page-link:focus,
ul.pagination .page-link:hover,
ul.pagination .page-link:focus,
ul.pagination > li > a:hover,
ul.pagination > li > a:focus,
a.page-link:hover,
a.page-link:focus {
    background: var(--bg-glass-hover) !important;
    background-color: var(--bg-glass-hover) !important;
    background-image: none !important;
    border-color: rgba(100, 80, 180, 0.5) !important;
    color: var(--text-light) !important;
    box-shadow: var(--shadow-md), 0 0 10px rgba(100, 80, 180, 0.3) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    outline: none !important;
}

/* Active page - Purple gradient */
nav .pagination .page-item.active .page-link,
.pagination .page-item.active .page-link,
ul.pagination .page-item.active .page-link,
ul.pagination > li.active > span,
ul.pagination > li.active > a,
.page-item.active[aria-current="page"] .page-link,
.page-item.active[aria-current="page"] span,
li.page-item.active .page-link,
li.active .page-link {
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%) !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%) !important;
    border-color: rgba(100, 80, 180, 0.6) !important;
    color: white !important;
    box-shadow: var(--shadow-md), 0 0 15px rgba(100, 80, 180, 0.5) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

nav .pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link,
ul.pagination .page-item.disabled .page-link,
ul.pagination > li.disabled > span,
ul.pagination > li.disabled > a,
.page-item.disabled .page-link,
.page-item.disabled span {
    background: var(--bg-glass-light) !important;
    background-color: var(--bg-glass-light) !important;
    background-image: none !important;
    border-color: var(--border-glass) !important;
    color: var(--text-light-dim) !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

nav .pagination .page-item.disabled .page-link:hover,
.pagination .page-item.disabled .page-link:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Pagination Text (Showing X to Y of Z results) */
nav .pagination + div p,
.pagination + div p,
nav p.small,
nav p.text-muted,
p.small.text-muted {
    color: var(--text-light-muted) !important;
}

nav .pagination + div p .fw-semibold,
.pagination + div p .fw-semibold,
nav p.small .fw-semibold,
nav p.text-muted .fw-semibold,
p.small.text-muted .fw-semibold {
    color: var(--text-light) !important;
    font-weight: 600 !important;
}

/* Override Bootstrap text-muted for pagination */
nav p.small.text-muted,
p.small.text-muted,
nav .text-muted,
.text-muted {
    color: var(--text-light-muted) !important;
}

/* Remove any white backgrounds from pagination containers */
nav.d-flex,
nav[class*="justify-content"],
nav[class*="d-flex"] {
    background: transparent !important;
}

/* Ensure pagination nav doesn't have white background */
nav .d-flex,
nav .justify-content-between,
nav .d-none,
nav .flex-sm-fill {
    background: transparent !important;
}

/* Override Bootstrap's default pagination link colors - Force dark theme */
nav .pagination .page-link,
.pagination .page-link,
ul.pagination .page-link,
ul.pagination .page-item .page-link,
ul.pagination > li > a,
ul.pagination > li > span,
a.page-link,
span.page-link {
    background-color: var(--bg-glass) !important;
    background-image: none !important;
    background: var(--bg-glass) !important;
    border-color: var(--border-glass) !important;
    color: var(--text-light) !important;
    /* Remove any Bootstrap default white backgrounds */
    background-clip: padding-box !important;
}

/* Override Bootstrap active state - Maximum Specificity */
nav .pagination .page-item.active .page-link,
.pagination .page-item.active .page-link,
ul.pagination .page-item.active .page-link,
ul.pagination > li.active > span,
ul.pagination > li.active > a,
li.page-item.active .page-link,
li.active .page-link,
.page-item.active > .page-link,
.page-item.active > span,
.page-item.active[aria-current="page"] .page-link {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%) !important;
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%) !important;
    border-color: rgba(100, 80, 180, 0.6) !important;
    color: white !important;
    z-index: 1 !important;
}

/* Force override for non-active page items - ensure no white background */
nav .pagination .page-item:not(.active):not(.disabled) .page-link,
.pagination .page-item:not(.active):not(.disabled) .page-link,
ul.pagination .page-item:not(.active):not(.disabled) .page-link,
ul.pagination > li:not(.active):not(.disabled) > a,
ul.pagination > li:not(.active):not(.disabled) > span {
    background-color: var(--bg-glass) !important;
    background-image: none !important;
    background: var(--bg-glass) !important;
    color: var(--text-light) !important;
}

/* CRITICAL: Ensure inactive page links NEVER have white background */
nav .pagination .page-item:not(.active):not(.disabled) .page-link,
.pagination .page-item:not(.active):not(.disabled) .page-link,
ul.pagination .page-item:not(.active):not(.disabled) .page-link,
ul.pagination > li:not(.active):not(.disabled) > a,
ul.pagination > li:not(.active):not(.disabled) > span,
li.page-item:not(.active):not(.disabled) .page-link,
.page-item:not(.active):not(.disabled) .page-link {
    background-color: var(--bg-glass) !important;
    background-image: none !important;
    background: var(--bg-glass) !important;
    color: var(--text-light) !important;
    /* Explicitly remove white backgrounds */
    background-clip: padding-box !important;
}

/* Remove any Bootstrap default white backgrounds - Maximum Override */
nav .pagination,
.pagination,
ul.pagination,
nav[class*="d-flex"],
nav[class*="justify-content"],
nav.d-flex,
nav.d-flex.justify-content-between,
nav.d-flex.justify-items-center,
div.d-flex,
div[class*="justify-content"] {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

/* Remove white backgrounds from pagination containers */
nav .d-flex,
nav .justify-content-between,
nav .d-none,
nav .flex-sm-fill,
div.d-flex.justify-content-center,
div[class*="justify-content-center"] {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

/* Override any Bootstrap default link styles */
nav .pagination a,
.pagination a,
ul.pagination a,
.page-link {
    text-decoration: none !important;
}

/* Remove any underline from pagination links */
nav .pagination .page-link,
.pagination .page-link,
ul.pagination .page-link,
a.page-link,
span.page-link {
    text-decoration: none !important;
    border-bottom: none !important;
    text-decoration-line: none !important;
    text-underline-offset: unset !important;
}

/* Force remove any Bootstrap link underlines */
nav .pagination a,
.pagination a,
ul.pagination a {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Ensure pagination arrows (chevrons) are styled correctly - No large icons */
nav .pagination .page-link[aria-label*="previous"],
nav .pagination .page-link[aria-label*="next"],
.pagination .page-link[aria-label*="previous"],
.pagination .page-link[aria-label*="next"],
nav .pagination .page-link[rel="prev"],
nav .pagination .page-link[rel="next"],
.pagination .page-link[rel="prev"],
.pagination .page-link[rel="next"],
nav .pagination .page-link:contains("‹"),
nav .pagination .page-link:contains("›"),
.pagination .page-link:contains("‹"),
.pagination .page-link:contains("›") {
    background: var(--bg-glass) !important;
    background-color: var(--bg-glass) !important;
    background-image: none !important;
    color: var(--text-light) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    min-width: 40px !important;
    max-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1 !important;
    /* Ensure chevrons don't become huge */
    font-size: 1.2rem !important;
    max-width: 50px !important;
    width: 40px !important;
    min-width: 40px !important;
}

/* CRITICAL: Remove any large arrow icons that might be from other sources */
nav::before,
nav::after,
.pagination::before,
.pagination::after,
ul.pagination::before,
ul.pagination::after,
nav[class*="d-flex"]::before,
nav[class*="d-flex"]::after,
nav[class*="justify-content"]::before,
nav[class*="justify-content"]::after,
div[class*="d-flex"]::before,
div[class*="d-flex"]::after,
div[class*="justify-content"]::before,
div[class*="justify-content"]::after {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ensure no pseudo-elements create large arrows */
nav .pagination .page-item::before,
nav .pagination .page-item::after,
.pagination .page-item::before,
.pagination .page-item::after,
ul.pagination > li::before,
ul.pagination > li::after,
li.page-item::before,
li.page-item::after,
.page-item::before,
.page-item::after {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Remove any background images that might create arrows */
nav .pagination,
.pagination,
ul.pagination,
nav .pagination .page-item,
.pagination .page-item,
ul.pagination > li,
li.page-item {
    background-image: none !important;
    background-position: unset !important;
    background-size: unset !important;
    background-repeat: no-repeat !important;
}

/* Ensure page-link elements don't have pseudo-elements creating arrows */
nav .pagination .page-link::before,
nav .pagination .page-link::after,
.pagination .page-link::before,
.pagination .page-link::after,
.page-link::before,
.page-link::after,
a.page-link::before,
a.page-link::after,
span.page-link::before,
span.page-link::after {
    display: none !important;
    content: "" !important;
    background: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Override Bootstrap hover state */
nav .pagination .page-link:focus,
.pagination .page-link:focus,
ul.pagination .page-link:focus {
    background-color: var(--bg-glass-hover) !important;
    border-color: rgba(100, 80, 180, 0.5) !important;
    color: var(--text-light) !important;
    box-shadow: var(--shadow-md), 0 0 10px rgba(100, 80, 180, 0.3) !important;
    outline: none !important;
}

/* Text Utilities - Ensure Visibility */
.text-white-50 {
    color: var(--text-light-dim) !important;
}

.text-primary {
    color: rgba(100, 80, 180, 0.9) !important;
}

.text-success {
    color: var(--success-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.text-info {
    color: rgba(100, 80, 180, 0.9) !important;
}

/* Bootstrap Overrides for Dark Theme */
.card {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    color: var(--text-light-muted) !important;
}

.card-header {
    background: var(--bg-glass-hover) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    color: var(--text-light) !important;
}

.card-body {
    color: var(--text-light-muted) !important;
}

.card-title {
    color: var(--text-light) !important;
}

.card-text {
    color: var(--text-light-muted) !important;
}

/* Dropdowns - Dark Theme */
.dropdown-menu {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass) !important;
    box-shadow: var(--shadow-lg);
}

.dropdown-item {
    color: var(--text-light-muted) !important;
}

.dropdown-item:hover {
    background: var(--bg-glass-hover) !important;
    color: var(--text-light) !important;
}

/* Badges - Dark Theme */
.badge {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    color: var(--text-light);
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
}

.badge-primary,
.badge.bg-primary {
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: var(--shadow-sm), 0 0 10px rgba(100, 80, 180, 0.3);
}

.badge-success {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.8) 0%, rgba(56, 249, 215, 0.9) 100%);
    color: white;
    border: none;
}

/* Close Button - Dark Theme */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

.btn-close:hover {
    opacity: 1;
}

/* Rank Breakup Table - Dark Theme */
.rank-breakup-table {
    background: transparent;
    color: var(--text-light-muted);
}

.rank-breakup-table thead th {
    background: var(--bg-glass-hover) !important;
    color: var(--text-light) !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

.rank-breakup-table tbody td {
    background: transparent !important;
    color: var(--text-light-muted) !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

.rank-breakup-table tbody tr:hover {
    background: var(--bg-glass-light) !important;
}

.rank-breakup-body {
    background: transparent;
    color: var(--text-light-muted);
}

.rank-row {
    color: var(--text-light-muted) !important;
}

/* Blog Index Page - Dark Theme */
.blog-index-page {
    padding: 1rem 0.5rem 2rem;
}

.blog-index-page h1 {
    color: var(--text-light) !important;
}

.blog-index-page p {
    color: var(--text-light-muted) !important;
}

/* Welcome Page - Dark Theme */
.welcome-page {
    padding: 1rem 0.5rem 2rem;
}

.welcome-page h1,
.welcome-page h2 {
    color: var(--text-light) !important;
}

.welcome-page p {
    color: var(--text-light-muted) !important;
}

/* Legal Pages - Dark Theme */
.legal-page {
    padding: 1rem 0.5rem 2rem;
}

.legal-page h1,
.legal-page h2,
.legal-page h3 {
    color: var(--text-light) !important;
}

.legal-page p,
.legal-page li {
    color: var(--text-light-muted) !important;
    line-height: 1.8;
}

.legal-page a {
    color: rgba(100, 80, 180, 0.9);
    text-decoration: underline;
}

.legal-page a:hover {
    color: rgba(120, 100, 200, 1);
}

/* Ensure all headings are visible */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-light) !important;
}

/* Ensure all paragraphs and text are visible - but allow overrides */
p, span, div, li, td, th {
    color: var(--text-light-muted) !important;
}

label {
    color: var(--text-light-muted) !important;
}

/* Coin amounts should be visible */
.coin-amount,
.reward-amount,
.score-value {
    color: #fee140 !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(254, 225, 64, 0.4);
}

/* Override any white backgrounds on cards */
[style*="background: white"],
[style*="background: #fff"],
[style*="background-color: white"],
[style*="background-color: #fff"] {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--border-glass) !important;
}

/* Override any dark text colors */
[style*="color: #1a0b2e"],
[style*="color: #1a0b2e !important"],
[style*="color: #2d3748"],
[style*="color: #4b5563"],
[style*="color: #6b7280"] {
    color: var(--text-light) !important;
}

/* Ensure text-dark class uses light color */
.text-dark {
    color: var(--text-light-muted) !important;
}

/* Signup/Login - Dark Theme */
.auth-container {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-card {
    background: var(--bg-glass);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: var(--shadow-xl);
    max-width: 450px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(100, 80, 180, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.auth-title {
    font-size: 2.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #ffffff 0%, rgba(100, 80, 180, 0.9) 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    text-shadow: 0 0 30px rgba(100, 80, 180, 0.5);
}

.auth-subtitle {
    text-align: center;
    color: var(--text-light-muted);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.social-btn {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    border: 2px solid var(--border-glass);
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-light);
    box-shadow: var(--shadow-sm);
}

.social-btn:hover {
    border-color: rgba(100, 80, 180, 0.5);
    background: var(--bg-glass-hover);
    box-shadow: var(--shadow-md), 0 0 20px rgba(100, 80, 180, 0.2);
    transform: translateY(-2px);
}

.social-btn.google {
    color: var(--text-light);
}

.social-btn.google i {
    color: #4285f4;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.social-btn.facebook {
    color: var(--text-light);
}

.social-btn.facebook i {
    color: #1877f2;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.social-btn-text {
    text-decoration: underline;
    font-weight: 600;
    color: var(--text-light);
}

.auth-legal-text {
    font-size: 0.85rem;
    color: var(--text-light-dim);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.auth-link {
    color: rgba(100, 80, 180, 0.9);
    text-decoration: underline;
    font-weight: 600;
}

.auth-link:hover {
    color: rgba(120, 100, 200, 1);
}

.auth-spam-text {
    font-size: 0.8rem;
    color: var(--text-light-dim);
    margin: 0;
}

.auth-why-title {
    color: var(--text-light);
    font-weight: 700;
    font-size: 1.1rem;
}

.auth-features-list {
    color: var(--text-light);
}

.auth-feature-text {
    color: var(--text-light-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

.auth-footer-text {
    color: var(--text-light-dim);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.auth-india-flag {
    font-size: 1.1rem;
}

/* Ads Section - Styles moved to ads.css */

/* Sidebar Menu - Dark Theme */
.sidebarmenu {
    position: fixed !important;
    top: 0 !important;
    left: -320px;
    width: 320px;
    height: 100vh;
    z-index: 1050;
    background: var(--bg-glass);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    z-index: 10000 !important;
    transition: left 0.3s ease;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 90vw;
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    border-right: 1px solid var(--border-glass);
}

.sidebarmenu.open {
    left: 0 !important;
}

/* Hide sidebar when ad overlay or modal is present */
body.ad-overlay-active .sidebarmenu,
body.modal-open .sidebarmenu.open {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Dark Blue Header Section */
.sidebar-header {
    background: linear-gradient(135deg, #1a0f2e 0%, #2d1b69 25%, #3b2e7a 50%, #2d1b69 75%, #1a0f2e 100%);
    background-size: 200% 200%;
    padding: 1.5rem 1.25rem;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.sidebar-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sidebar-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e40af;
    font-weight: 700;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.sidebar-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sidebar-header-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sidebar-join-text {
    color: #fee140;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.3;
    text-decoration: none;
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    background: rgba(254, 225, 64, 0.15);
    border: 1.5px solid rgba(254, 225, 64, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(254, 225, 64, 0.2);
}

.sidebar-join-text:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
    color: #f59e0b;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.sidebar-join-text:active {
    transform: translateY(0);
}

.sidebar-coin-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: rgba(255, 193, 7, 0.2);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fbbf24;
    margin-top: 0.25rem;
}

.sidebar-coin-amount {
    font-weight: 700;
}

/* Dark Navigation Section */
.sidebar-nav {
    flex: 1;
    background: transparent;
    display: flex;
    flex-direction: column;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--text-light-muted);
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border-glass);
    transition: all 0.2s ease;
    cursor: pointer;
}

.sidebar-nav-item:last-child {
    border-bottom: none;
}

.sidebar-nav-item:hover {
    background: var(--bg-glass-hover);
    color: var(--text-light);
}

.sidebar-nav-item.active {
    background: var(--bg-glass-hover);
    color: rgba(100, 80, 180, 0.9);
    font-weight: 600;
    border-left: 3px solid rgba(100, 80, 180, 0.6);
}

.sidebar-nav-item i {
    width: 24px;
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-light-dim);
}

.sidebar-nav-item.active i {
    color: rgba(100, 80, 180, 0.9);
}

.sidebar-nav-item span {
    flex: 1;
}

.sidebar-nav-form {
    margin: 0;
    padding: 0;
}

.sidebar-nav-button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    padding: 1rem 1.25rem;
    margin: 0;
}

.sidebarmenu::-webkit-scrollbar {
    width: 4px;
}

.sidebarmenu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.sidebarmenu::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.6);
    border-radius: 8px;
}

.sidebarmenu::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.8);
}

.sidebarmenu {
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.6) rgba(0, 0, 0, 0.1);
}

/* Container Shadow when sidebar is open */
.app-wrapper-container.container-shadow {
    box-shadow: none;
}

/* Tablet and Desktop Layout */
@media (min-width: 768px) {
    body {
        padding: 0;
        background: 
            linear-gradient(135deg, #0f0d18 0%, #12101a 20%, #0d0d15 40%, #12101a 60%, #0f0d18 80%, #0f0d18 100%),
            linear-gradient(225deg, #0d0f15 0%, #12101a 50%, #0d0f15 100%),
            radial-gradient(ellipse at center, #0d0d18 0%, #0a0a12 100%);
        background-attachment: fixed;
        background-size: 200% 200%, 150% 150%, 100% 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        animation: organicBaseFlow 20s ease-in-out infinite;
    }
    
    body::before {
        display: block;
    }
    
    body::after {
        display: block;
    }
    
    body::before {
        display: block;
    }
    
    body::after {
        display: block;
    }
    
    body::before {
        display: none;
    }
    
    .app-wrapper-container {
        box-shadow: none;
        transform: translateY(0);
        transition: none;
        border-radius: 0;
        max-height: 90vh;
        max-width: 360px;
        margin: 0 auto;
        position: relative;
    }
    
    .app-wrapper-container::after {
        display: none;
    }
}

/* Desktop Layout */
@media (min-width: 992px) {
    .main-content {
        margin-left: 0;
    }
    
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .quiz-card {
        max-width: 100%;
    }
}

/* Mobile devices - Enhanced responsive adjustments */
@media (max-width: 767px) {
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    .app-wrapper-container::after {
        display: none !important;
    }
    
    .app-wrapper-container::before {
        display: none !important;
    }
    
    .sidebarmenu {
        width: 100% !important;
        max-width: 100% !important;
        left: -100%;
        z-index: 10000 !important;
        position: fixed !important;
    }
    
    .sidebarmenu.open {
        left: 0 !important;
    }
    
    header {
        margin-top: 0;
        padding: 0.5rem 0;
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        width: 100%;
        overflow: hidden;
    }
    
    header .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        width: 100%;
        max-width: 100%;
    }
    
    header .row {
        margin: 0;
        width: 100%;
        flex-wrap: nowrap;
        display: flex;
        align-items: center;
    }
    
    header .col-auto {
        flex: 0 0 auto;
        padding: 0;
        max-width: fit-content;
    }
    
    header .col {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        max-width: 100%;
        overflow: hidden;
    }
    
    .hamburger-logo {
        gap: 0.5rem;
    }
    
    .hamburger-logo h6 {
        font-size: 0.95rem;
        white-space: nowrap;
    }
    
    .hamburger-logo i {
        font-size: 1.1rem;
    }
    
    .anchor-normal {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.5rem !important;
        white-space: nowrap;
        flex-shrink: 1;
        min-width: auto !important;
        min-height: auto !important;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .back-arrow-btn {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    header .d-flex {
        gap: 0.4rem !important;
        flex-wrap: nowrap;
        overflow: hidden;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        max-width: 100%;
    }
    
    header .col {
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
    }
    
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Ensure all content fits mobile screen */
    .dashboard-page {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: calc(100vh - 60px);
    }
    
    /* Optimize text sizes for mobile */
    .hero-section {
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 1rem;
    }
    
    .stats-section {
        gap: 0.25rem;
        margin-top: 0.75rem;
    }
    
    .stat-item {
        flex: 1;
        min-width: 0;
    }
    
    .stat-number {
        font-size: 1.1rem !important;
    }
    
    .stat-label {
        font-size: 0.65rem !important;
    }
    
    /* Ensure buttons and interactive elements are touch-friendly */
    .btn, .back-arrow-btn, .hamburger-logo {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    /* Anchor normal button - smaller on mobile */
    .anchor-normal {
        min-height: auto !important;
        min-width: auto !important;
        touch-action: manipulation;
    }
    
    /* Optimize quiz cards for mobile */
    .quiz-card {
        margin-bottom: 0.5rem;
        padding: 0.75rem;
    }
    
    .quiz-title {
        font-size: 1rem !important;
    }
    
    /* Prevent text selection on mobile for better UX */
    .hamburger-logo, .anchor-normal, .btn {
        user-select: none;
        -webkit-user-select: none;
    }
    
    /* Safe area insets for notched devices */
    .app-wrapper-container {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Small mobile devices */
@media (max-width: 414px) {
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    header {
        padding: 0.4rem 0;
    }
    
    header .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .hamburger-logo {
        gap: 0.4rem;
    }
    
    .hamburger-logo h6 {
        font-size: 0.85rem;
    }
    
    .hamburger-logo i {
        font-size: 1rem;
    }
    
    .anchor-normal {
        font-size: 0.6rem !important;
        padding: 0.2rem 0.45rem !important;
        min-height: auto !important;
        min-width: auto !important;
    }
    
    .back-arrow-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }
    
    header .d-flex {
        gap: 0.35rem !important;
    }
    
    .hamburger-logo {
        min-width: auto;
        min-height: auto;
    }
}

/* Extra small mobile devices (iPhone SE, etc.) */
@media (max-width: 360px) {
    header .container {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
    
    .hamburger-logo h6 {
        font-size: 0.8rem;
    }
    
    .anchor-normal {
        font-size: 0.55rem !important;
        padding: 0.18rem 0.35rem !important;
        letter-spacing: -0.2px;
        min-height: auto !important;
        min-width: auto !important;
    }
    
    .back-arrow-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    .back-arrow-btn i {
        font-size: 0.75rem !important;
    }
    
    header .d-flex {
        gap: 0.25rem !important;
    }
    
    .hamburger-logo h6 {
        font-size: 0.75rem;
    }
    
    .hamburger-logo i {
        font-size: 0.9rem;
    }
    
    /* Shorten button text on very small screens using CSS */
    .anchor-normal::after {
        content: '';
    }
    
    /* Alternative: Use shorter text via CSS (if needed) */
    @media (max-width: 320px) {
        .anchor-normal {
            font-size: 0.5rem !important;
            padding: 0.15rem 0.3rem !important;
        }
    }
    
    .hero-section {
        padding: 1.25rem 0.75rem;
    }
    
    .hero-title {
        font-size: 1.35rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.8rem !important;
    }
    
    .stats-section {
        gap: 0.15rem;
    }
    
    .stat-number {
        font-size: 1rem !important;
    }
    
    .stat-label {
        font-size: 0.6rem !important;
    }
    
    #availableBalance {
        font-size: 1.25rem !important;
    }
    
    .quiz-card {
        padding: 0.65rem;
    }
}

/* Form Elements - Dark Theme */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.form-control,
.form-select {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass) !important;
    border-radius: 10px;
    color: var(--text-light) !important;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    background: var(--bg-glass-hover) !important;
    border-color: rgba(100, 80, 180, 0.5) !important;
    color: var(--text-light) !important;
    box-shadow: 0 0 0 3px rgba(100, 80, 180, 0.2), var(--shadow-md);
    outline: none;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
    color: var(--text-light-dim) !important;
    opacity: 0.7;
}

/* Labels */
label,
.form-label {
    color: var(--text-light-muted) !important;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* All Text Elements - Dark Theme */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-light) !important;
}

p, span, div, li, td, th {
    color: var(--text-light-muted) !important;
}

.text-white {
    color: var(--text-light) !important;
}

.text-muted {
    color: var(--text-light-dim) !important;
}

/* Progress Bars - Dark Theme */
.progress-bar-container {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%);
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(100, 80, 180, 0.5);
}

.progress-info {
    color: var(--text-light) !important;
}

/* Question Timer */
.question-timer {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    color: var(--text-light);
    font-weight: 600;
}

.timer-display {
    color: var(--text-light);
    font-weight: 700;
}

.question-number-badge {
    display: flex;
    justify-content: center;
}

.question-badge {
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-md), 0 0 15px rgba(100, 80, 180, 0.4);
}

.question-card-quiz {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    position: relative;
}

/* Modals - Dark Theme */
.modal-content {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--border-glass) !important;
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--border-glass) !important;
}

.modal-header .modal-title {
    color: var(--text-light) !important;
}

.modal-body {
    color: var(--text-light-muted) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-glass) !important;
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px);
}

/* Tables - Dark Theme */
table {
    color: var(--text-light-muted) !important;
}

.table {
    background: transparent !important;
}

.table thead th {
    background: var(--bg-glass) !important;
    color: var(--text-light) !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

.table tbody td {
    background: var(--bg-glass-light) !important;
    color: var(--text-light-muted) !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

.table tbody tr:hover {
    background: var(--bg-glass-hover) !important;
}

/* Lists - Dark Theme */
ul, ol {
    color: var(--text-light-muted) !important;
}

li {
    color: var(--text-light-muted) !important;
}

/* Links - Dark Theme */
a {
    color: rgba(100, 80, 180, 0.9);
    transition: color 0.3s ease;
}

a:hover {
    color: rgba(120, 100, 200, 1);
}

/* Games Pages - Dark Theme */
.game-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(100, 80, 180, 0.1) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
    z-index: 0;
}

.game-card:hover::before {
    left: 100%;
}

.game-card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-glass-hover);
    box-shadow: var(--shadow-lg), var(--glow-primary);
    transform: translateY(-3px);
}

.game-card > * {
    position: relative;
    z-index: 1;
}

.game-card h3,
.game-card h4,
.game-card h5 {
    color: var(--text-light) !important;
}

.game-card p {
    color: var(--text-light-muted) !important;
}

/* Games Page Stats Card */
.quiz-card[style*="background: rgba(255, 255, 255"] {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass) !important;
}

.quiz-card[style*="background: rgba(255, 255, 255"] h5,
.quiz-card[style*="background: rgba(255, 255, 255"] .stat-value,
.quiz-card[style*="background: rgba(255, 255, 255"] .stat-label {
    color: var(--text-light) !important;
}

/* Game Card Elements */
.game-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.game-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.game-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(100, 80, 180, 0.8) 0%, rgba(120, 100, 200, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-md), 0 0 15px rgba(100, 80, 180, 0.4);
    overflow: hidden;
}

.game-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.game-title {
    color: var(--text-light) !important;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.game-description {
    color: var(--text-light-muted) !important;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.game-difficulties {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.difficulty-badge {
    background: var(--bg-glass-light);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.difficulty-badge.difficulty-easy {
    border-color: rgba(67, 233, 123, 0.4);
    color: rgba(67, 233, 123, 0.9);
}

.difficulty-badge.difficulty-medium {
    border-color: rgba(254, 225, 64, 0.4);
    color: rgba(254, 225, 64, 0.9);
}

.difficulty-badge.difficulty-hard {
    border-color: rgba(245, 87, 108, 0.4);
    color: rgba(245, 87, 108, 0.9);
}

.game-card-action {
    flex-shrink: 0;
}

/* Winners Page - Dark Theme */
.winner-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--shadow-md);
    color: var(--text-light);
}

.winner-card h3,
.winner-card h4,
.winner-card h5 {
    color: var(--text-light) !important;
}

.winner-card p {
    color: var(--text-light-muted) !important;
}

/* FAQ, About, Contact Pages - Dark Theme */
.content-section {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    color: var(--text-light-muted);
}

.content-section h1,
.content-section h2,
.content-section h3 {
    color: var(--text-light) !important;
}

.content-section p {
    color: var(--text-light-muted) !important;
    line-height: 1.8;
}

/* Blog Pages - Dark Theme */
.blog-post {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    color: var(--text-light-muted);
}

.blog-post h1,
.blog-post h2,
.blog-post h3 {
    color: var(--text-light) !important;
}

.blog-post p {
    color: var(--text-light-muted) !important;
    line-height: 1.8;
}

/* Intro Pages - Dark Theme */
.intro-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    color: var(--text-light);
}

.intro-card h1,
.intro-card h2,
.intro-card h3 {
    color: var(--text-light) !important;
}

.intro-card p {
    color: var(--text-light-muted) !important;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Loading Spinner */
.spinner {
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}