.ad-container {
            min-height: 90px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
        }
        .sticky-header {
            position: sticky;
            top: 0;
            z-index: 40;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        #xp-bar {
            transition: width 0.5s ease-in-out;
        }
        .modal {
            display: none;
        }
        .modal.is-open {
            display: flex;
        }
        .confetti {
            position: fixed;
            top: -10px;
            width: 10px;
            height: 10px;
            opacity: 0.8;
            pointer-events: none;
            animation: fall 3s linear forwards;
        }
        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
        .key {
            min-width: 44px;
            min-height: 44px;
        }
        .streak-badge-container {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }
        .streak-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-weight: bold;
            font-size: 0.8rem;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.3);
        }
        .bronze { background: linear-gradient(145deg, #cd7f32, #a05d21); }
        .silver { background: linear-gradient(145deg, #c0c0c0, #a9a9a9); }
        .gold { background: linear-gradient(145deg, #ffd700, #daa520); }
        .diamond { background: linear-gradient(145deg, #b9f2ff, #89cff0); text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }

        /* Mobile responsiveness - hide XP bar on very small screens */
        @media (max-width: 374px) {
            #xp-display {
                display: none !important;
            }
            .header-stats-divider:last-of-type {
                display: none !important;
            }
        }

        /* Sidebar ad containers - desktop only */
        .sidebar-ad-container {
            width: 160px;
            min-height: 600px;
            position: sticky;
            top: 20px;
        }

        /* FAQ styles */
        .faq-item {
            border-bottom: 1px solid #e5e7eb;
        }

        /* Hide sidebars on screens smaller than 1280px */
        @media (max-width: 1279px) {
            .sidebar-ad-container {
                display: none;
            }
        }