:root {
        --header-bg: #0a0a0a;
        --header-bg-secondary: #111111;
        --primary-red: #00c3e2;
        --primary-red-hover: #c5000f;
        --text-white: #ffffff;
        --text-gray: #888888;
        --text-gray-light: #aaaaaa;
        --border-dark: rgba(255,255,255,0.06);
    }
    
    * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }
    
    /* ====================================
       HEADER PRINCIPAL - DESIGN PROFISSIONAL
       ==================================== */
    .bs-header {
        background: var(--header-bg);
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid var(--border-dark);
    }
    
    /* Nível Principal - Logo + Busca + Menu Usuário */
    .bs-header-main {
        background: var(--header-bg);
    }
    
    .bs-header-main .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        max-width: 1400px;
        margin: 0 auto;
        gap: 30px;
    }
    
    /* Logo */
    .bs-logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
        flex-shrink: 0;
    }
    
    .bs-logo:hover {
        transform: scale(1.02);
        opacity: 0.9;
    }
    
    .bs-logo img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 70px;
        width: auto;
        max-width: none;
    }
    
    .bs-logo-text {
        font-size: 26px;
        font-weight: 800;
        color: var(--text-white);
        letter-spacing: -0.5px;
    }
    
    .bs-logo-text .highlight { 
        color: var(--primary-red); 
    }
    
    .bs-logo-text .domain { 
        color: #444; 
        font-size: 14px; 
        font-weight: 500;
        margin-left: 2px;
    }
    
    /* Barra de Busca — regras canônicas no bloco V35 abaixo (linhas ~700+).
       Bloco legacy removido para evitar "retângulo dentro do retângulo"
       quando o cache servia uma especificidade misturada. */
    
    /* Menu do Usuário */
    .bs-user-menu {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .bs-user-menu a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-gray);
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    
    .bs-user-menu a:hover {
        color: var(--text-white);
        background: rgba(255,255,255,0.05);
    }
    
    .bs-user-menu a i {
        font-size: 14px;
    }
    
    .bs-user-menu .btn-highlight {
        background: var(--primary-red);
        color: var(--text-white);
    }
    
    .bs-user-menu .btn-highlight:hover {
        background: var(--primary-red-hover);
    }
    
    .bs-user-menu .user-logged {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        background: rgba(255,255,255,0.05);
        border-radius: 50px;
    }
    
    .bs-user-menu .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--primary-red);
    }
    
    .bs-user-menu .user-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-white);
    }
    
    /* Barra de Navegação (Categorias) */
    .bs-navbar {
        background: var(--header-bg-secondary);
        border-top: 1px solid var(--border-dark);
    }
    
    .bs-navbar .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .bs-nav-list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .bs-nav-item {
        position: relative;
    }
    
    .bs-nav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 22px;
        color: var(--text-gray);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        text-decoration: none;
        transition: all 0.25s ease;
        position: relative;
    }
    
    .bs-nav-link i {
        font-size: 13px;
        transition: transform 0.2s ease;
    }
    
    .bs-nav-link:hover {
        color: var(--text-white);
        background: transparent;
        border-bottom-color: transparent;
    }
    
    .bs-nav-link:hover i {
        transform: scale(1.1);
    }
    
    /* =============================================
       MEGA MENU GÊNEROS - Dark Cinema Premium
       ============================================= */
    .bs-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 680px;
        background: linear-gradient(145deg, #12121e 0%, #1a1a2e 50%, #161628 100%);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset;
        z-index: 1000;
        padding: 0;
        animation: dropdownFade 0.3s ease;
        overflow: hidden;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    
    @keyframes dropdownFade {
        from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
        to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    
    .bs-nav-item:hover .bs-dropdown {
        display: block;
    }
    
    /* Header do Mega Menu */
    .bs-dropdown-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 22px;
        background: linear-gradient(135deg, rgba(0, 195, 226,0.08) 0%, transparent 100%);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .bs-dropdown-header span {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #888;
    }
    .bs-dropdown-header a {
        font-size: 11px;
        color: #00c3e2;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s;
    }
    .bs-dropdown-header a:hover { color: #00d4ff; }
    
    /* Grid de Gêneros */
    .bs-dropdown-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 8px;
        max-height: 420px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 195, 226,0.3) transparent;
    }
    .bs-dropdown-grid::-webkit-scrollbar { width: 4px; height: 0 !important; }
    .bs-dropdown-grid::-webkit-scrollbar:horizontal { display: none !important; height: 0 !important; }
    .bs-dropdown-grid::-webkit-scrollbar-track { background: transparent; }
    .bs-dropdown-grid::-webkit-scrollbar-thumb { background: rgba(0, 195, 226,0.3); border-radius: 2px; }
    
    .bs-dropdown-grid li {
        margin: 0;
        list-style: none;
    }
    
    .bs-dropdown-grid a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        color: #bbb;
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        border-radius: 8px;
        margin: 2px;
        border: 1px solid transparent;
    }
    
    .bs-dropdown-grid a:hover {
        background: rgba(0, 195, 226,0.08);
        color: #fff;
        border-color: rgba(0, 195, 226,0.15);
    }
    
    .bs-dropdown-grid a .genre-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: rgba(255,255,255,0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #00c3e2;
        flex-shrink: 0;
        transition: all 0.2s;
    }
    .bs-dropdown-grid a:hover .genre-icon {
        background: rgba(0, 195, 226,0.15);
        color: #00d4ff;
    }
    
    .bs-dropdown-grid a .genre-name {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .bs-dropdown-grid a .genre-count {
        font-size: 10px;
        color: #555;
        font-weight: 600;
        flex-shrink: 0;
    }
    
    /* Footer do Mega Menu */
    .bs-dropdown-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 12px 22px;
        background: rgba(255,255,255,0.02);
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .bs-dropdown-footer a {
        font-size: 11px;
        color: #888;
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 6px;
        transition: all 0.2s;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
    }
    .bs-dropdown-footer a:hover {
        background: rgba(0, 195, 226,0.1);
        border-color: rgba(0, 195, 226,0.2);
        color: #00c3e2;
    }
    .bs-dropdown-footer a i { font-size: 10px; }
    
    /* Responsivo */
    @media (max-width: 768px) {
        .bs-dropdown {
            position: fixed;
            top: auto;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            max-height: 70vh;
            transform: none;
            border-radius: 16px 16px 0 0;
            animation: dropdownSlideUp 0.3s ease;
        }
        @keyframes dropdownSlideUp {
            from { opacity: 0; transform: translateY(100%); }
            to { opacity: 1; transform: translateY(0); }
        }
        .bs-dropdown-grid {
            grid-template-columns: repeat(2, 1fr);
            max-height: 55vh;
        }
    }
    
    /* Mobile Menu Button */
    .bs-mobile-toggle {
        display: none;
        background: none;
        border: none;
        color: var(--text-white);
        font-size: 24px;
        cursor: pointer;
        padding: 10px;
    }
    
    /* ====================================
       RESPONSIVO
       ==================================== */
    @media (max-width: 1100px) {
        .bs-header-main .container {
            gap: 20px;
        }
        
        .bs-search {
            max-width: 350px;
        }
        
        .bs-nav-link {
            padding: 14px 16px;
            font-size: 11px;
        }
    }
    
    @media (max-width: 992px) {
        /* Header: Logo + Busca + User na mesma linha */
        .bs-mobile-toggle { display: none; }
        
        .bs-header-main .container {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            padding: 8px 12px;
            gap: 8px;
        }
        
        .bs-logo { flex-shrink: 0; }
        .bs-logo img { height: 32px; }
        .bs-logo-text { font-size: 0; }
        .bs-logo-text .highlight,
        .bs-logo-text .domain { display: none; }
        
        /* Busca SEMPRE visível */
        .bs-search {
            flex: 1;
            order: unset;
            flex-basis: auto;
            max-width: none;
        }
        .bs-search-form { border-radius: 10px; background: #0e0e1a; }
        .bs-search-input { padding: 10px 12px; font-size: 13px; }
        .bs-search-btn { padding: 0 12px; }
        
        /* User menu compacto - sempre visível */
        .bs-user-menu {
            display: flex;
            flex-shrink: 0;
            gap: 4px;
        }
        .bs-user-menu a span { display: none; }
        .bs-user-menu a { padding: 8px; font-size: 16px; border-radius: 8px; }
        .bs-user-menu .user-logged { gap: 0; }
        .bs-user-menu .user-logged .user-name { display: none; }
        .bs-user-menu .user-avatar { width: 30px; height: 30px; }
        .bs-user-menu .btn-highlight { background: transparent; border: none; }
        
        /* Navbar: horizontal scroll */
        .bs-navbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .bs-navbar::-webkit-scrollbar { display: none; }
        .bs-nav-list { justify-content: flex-start; padding: 0 10px; flex-wrap: nowrap; gap: 0; }
        .bs-nav-link { padding: 11px 13px; font-size: 10px; white-space: nowrap; gap: 5px; }
        
        /* Dropdown gêneros - fullscreen */
        .bs-dropdown {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%; height: 100vh; max-height: 100vh;
            border-radius: 0;
            z-index: 10000;
            background: #0e0e1a;
            animation: genreSlideIn 0.25s ease;
        }
        .bs-dropdown-grid { grid-template-columns: repeat(2, 1fr); max-height: none; padding: 10px 12px; }
        .bs-dropdown-grid a { padding: 14px 12px; font-size: 13px; }
        .bs-dropdown-grid a .genre-icon { width: 36px; height: 36px; font-size: 14px; }
        .bs-dropdown-header { position: sticky; top: 0; z-index: 2; background: #0e0e1a; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .bs-dropdown-footer { position: sticky; bottom: 0; background: #0e0e1a; border-top: 1px solid rgba(255,255,255,0.08); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
        .bs-dropdown-footer a { justify-content: center; padding: 12px 8px; font-size: 11px; }
        @keyframes genreSlideIn { from { opacity:0; transform:translateX(-100%); } to { opacity:1; transform:translateX(0); } }
    }
    
    @media (max-width: 480px) {
        .bs-header-main .container { padding: 6px 10px; gap: 6px; }
        .bs-logo img { height: 28px; }
        .bs-search-input { padding: 9px 10px; font-size: 12px; }
        .bs-nav-link { padding: 10px 10px; font-size: 9px; }
        .bs-nav-link span { display: none; }
        .bs-nav-link i { font-size: 15px; }
    }
    
    /* =============================================
       NOTIFICAÇÕES - SININHO
       ============================================= */
    .bs-notif-wrap { position: relative; }
    .bs-notif-bell {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        color: #aaa;
        width: 38px; height: 38px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 15px;
        transition: all 0.2s;
        position: relative;
    }
    .bs-notif-bell:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .bs-notif-badge {
        position: absolute; top: -4px; right: -4px;
        background: #00c3e2; color: #fff;
        font-size: 9px; font-weight: 800;
        min-width: 16px; height: 16px;
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        padding: 0 3px;
        border: 2px solid #0e0e1a;
        line-height: 1;
    }
    .bs-notif-dropdown {
        display: none;
        position: fixed; top: 68px; right: 12px;
        width: 340px;
        background: #14141f;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 14px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        z-index: 10001;
        overflow: hidden;
    }
    .bs-notif-dropdown.show { display: block; animation: notifFadeIn 0.2s ease; }
    @keyframes notifFadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
    .bs-notif-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .bs-notif-header span { font-size: 14px; font-weight: 700; color: #fff; }
    .bs-notif-list { max-height: 350px; overflow-y: auto; }
    .bs-notif-list::-webkit-scrollbar { width: 3px; }
    .bs-notif-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
    .bs-notif-item {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 16px;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        transition: background 0.15s;
    }
    .bs-notif-item:hover { background: rgba(255,255,255,0.04); }
    .bs-notif-item.unread { background: rgba(0, 195, 226,0.04); }
    .bs-notif-icon {
        width: 34px; height: 34px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px; flex-shrink: 0;
    }
    .bs-notif-body { flex: 1; min-width: 0; }
    .bs-notif-title { font-size: 12px; font-weight: 600; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bs-notif-time { font-size: 10px; color: #666; margin-top: 2px; }
    .bs-notif-dot { width: 8px; height: 8px; background: #00c3e2; border-radius: 50%; flex-shrink: 0; }
    .bs-notif-footer {
        display: block; text-align: center;
        padding: 12px; font-size: 12px; font-weight: 600;
        color: #00c3e2; text-decoration: none;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .bs-notif-footer:hover { background: rgba(255,255,255,0.03); color: #00d4ff; }
    
    @media (max-width: 768px) {
        .bs-notif-dropdown { width: calc(100vw - 16px); left: 8px; right: 8px; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; }
        .bs-notif-bell { width: 34px; height: 34px; font-size: 14px; border-radius: 8px; }
        .bs-notif-badge { font-size: 8px; min-width: 14px; height: 14px; }
    }
    
    /* =================================================
       PREMIUM HEADER - Dark Cinema Edition
       ================================================= */
    .bs-header {
        background: linear-gradient(180deg, #050508 0%, #0a0a12 60%, #0f0f18 100%) !important;
        border-bottom: none !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 10px 40px rgba(0,0,0,0.6);
        position: sticky;
        isolation: isolate;
        overflow: visible;
    }
    .bs-header::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, #00c3e2 15%, #00c3e2 30%, transparent 50%, #00c3e2 70%, #0088cc 85%, transparent 100%);
        background-size: 200% 100%;
        animation: bsHeaderFlow 8s linear infinite;
        z-index: 10;
        pointer-events: none;
    }
    .bs-header::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse at 8% 40%, rgba(0, 195, 226,0.08) 0%, transparent 45%),
            radial-gradient(ellipse at 92% 60%, rgba(0,195,226,0.07) 0%, transparent 45%);
        pointer-events: none;
        z-index: 0;
    }
    @keyframes bsHeaderFlow { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .bs-header-main, .bs-navbar, .bs-header-main .container, .bs-navbar .container { position: relative; z-index: 2; }
    .bs-header-main .container { padding: 14px 22px !important; gap: 22px !important; }

    /* LOGO com barras Joy-Con visiveis */
    .bs-logo {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 4px !important;
        border-radius: 14px !important;
        transition: all .35s cubic-bezier(.4,0,.2,1) !important;
    }
    .bs-jc-bar {
        display: inline-block;
        width: 5px;
        height: 44px;
        border-radius: 3px;
        transition: all .35s cubic-bezier(.4,0,.2,1);
    }
    .bs-jc-bar.left {
        background: linear-gradient(180deg, #00c3e2, #00c3e2);
        box-shadow: 0 0 10px rgba(0, 195, 226,0.5), inset 0 0 4px rgba(255,255,255,0.2);
    }
    .bs-jc-bar.right {
        background: linear-gradient(180deg, #00c3e2, #0088cc);
        box-shadow: 0 0 10px rgba(0,195,226,0.5), inset 0 0 4px rgba(255,255,255,0.2);
    }
    .bs-logo:hover .bs-jc-bar.left { height: 42px; box-shadow: 0 0 18px rgba(0, 195, 226,0.8), inset 0 0 4px rgba(255,255,255,0.3); }
    .bs-logo:hover .bs-jc-bar.right { height: 42px; box-shadow: 0 0 18px rgba(0,195,226,0.8), inset 0 0 4px rgba(255,255,255,0.3); }
    .bs-logo img {
        max-height: 64px !important;
        filter: drop-shadow(0 4px 14px rgba(0, 195, 226,0.35)) drop-shadow(0 2px 8px rgba(0,195,226,0.2));
        transition: filter .35s !important;
    }
    .bs-logo:hover img {
        filter: drop-shadow(0 8px 24px rgba(0, 195, 226,0.55)) drop-shadow(0 4px 12px rgba(0,195,226,0.35));
    }
    .bs-logo-text { padding: 0 8px; text-shadow: 0 2px 14px rgba(0, 195, 226,0.3); }

    /* BUSCA premium */
    .bs-search { flex: 1; max-width: 560px; }
    .bs-search-form {
        display: flex !important;
        align-items: center !important;
        padding: 3px 3px 3px 16px !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 100px !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04) inset !important;
        transition: all .35s cubic-bezier(.4,0,.2,1) !important;
        overflow: hidden !important;
        position: relative;
    }
    .bs-search-icon {
        color: #7a7a90;
        font-size: 13px;
        flex-shrink: 0;
        margin-right: 10px;
        transition: color .25s;
    }
    .bs-search-form:focus-within {
        border-color: rgba(0, 195, 226,0.5) !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.025) 100%) !important;
        box-shadow: 0 0 0 4px rgba(0, 195, 226,0.15), 0 12px 32px rgba(0, 195, 226,0.18), 0 8px 24px rgba(0,0,0,0.4) !important;
        transform: translateY(-1px);
    }
    .bs-search-form:focus-within .bs-search-icon { color: #00c3e2; }
    .bs-search-input {
        flex: 1 !important;
        background: transparent !important;
        border: none !important;
        padding: 11px 0 !important;
        color: #f5f5f8 !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        outline: none !important;
    }
    .bs-search-input::placeholder { color: #6a6a78 !important; font-weight: 400; }
    /* Blindagem TOTAL anti "retângulo dentro" — neutraliza autofill, focus, search-decoration */
    .bs-search-input,
    .bs-search-input:hover,
    .bs-search-input:focus,
    .bs-search-input:active,
    .bs-search-input:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border: 0 !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
    .bs-search-input::-webkit-search-decoration,
    .bs-search-input::-webkit-search-cancel-button,
    .bs-search-input::-webkit-search-results-button,
    .bs-search-input::-webkit-search-results-decoration { display: none !important; }
    .bs-search-input:-webkit-autofill,
    .bs-search-input:-webkit-autofill:hover,
    .bs-search-input:-webkit-autofill:focus {
        -webkit-text-fill-color: #f5f5f8 !important;
        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: #00c3e2;
    }
    /* Kbd removido — span já não existe no HTML, regra abaixo é dead-code seguro */
    .bs-search-kbd { display: none !important; }
    .bs-search-kbd {
        display: inline-flex;
        align-items: center;
        padding: 3px 8px;
        margin-right: 8px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 6px;
        color: #6a6a78;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        font-family: 'SF Mono', Menlo, monospace;
        opacity: 0;
        transform: translateX(6px);
        transition: all .3s;
    }
    .bs-search-form:focus-within .bs-search-kbd { opacity: 1; transform: translateX(0); }
    .bs-search-btn {
        background: linear-gradient(135deg, #00c3e2 0%, #0095c8 100%) !important;
        border: none !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 16px rgba(0, 195, 226,0.45), 0 1px 0 rgba(255,255,255,0.2) inset !important;
        transition: all .25s cubic-bezier(.4,0,.2,1) !important;
        position: relative;
        overflow: hidden;
    }
    .bs-search-btn::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transform: translateX(-100%);
        transition: transform .55s ease;
    }
    .bs-search-btn:hover {
        background: linear-gradient(135deg, #00c3e2 0%, #00c3e2 100%) !important;
        transform: scale(1.05);
        box-shadow: 0 6px 22px rgba(0, 195, 226,0.6) !important;
    }
    .bs-search-btn:hover::after { transform: translateX(100%); }
    .bs-search-btn i { font-size: 13px; color: #fff; }

    /* USER MENU cluster */
    .bs-user-menu {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-shrink: 0;
    }

    /* LIVE ONLINE PILL (novo) */
    .pfh-online-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 12px 7px 10px;
        background: linear-gradient(135deg, rgba(16,185,129,0.14) 0%, rgba(16,185,129,0.04) 100%);
        border: 1px solid rgba(16,185,129,0.28);
        border-radius: 100px;
        color: #34d399;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.3px;
        backdrop-filter: blur(14px);
        box-shadow: 0 4px 12px rgba(16,185,129,0.1);
        user-select: none;
    }
    .pfh-online-pill .dot {
        width: 7px; height: 7px;
        background: #10b981;
        border-radius: 50%;
        box-shadow: 0 0 8px #10b981;
        animation: bsHeadPulse 2s infinite;
        display: inline-block;
    }
    .pfh-online-pill strong { color: #6ee7b7; font-weight: 900; font-size: 13px; }
    .pfh-online-pill .lbl { color: #10b981; text-transform: uppercase; letter-spacing: 0.8px; font-size: 10px; }
    @keyframes bsHeadPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

    /* NOTIF BELL premium */
    .bs-notif-bell {
        width: 42px !important;
        height: 42px !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%) !important;
        border: 1px solid rgba(255,255,255,0.09) !important;
        border-radius: 12px !important;
        backdrop-filter: blur(14px);
        color: #c8c8d4 !important;
        transition: all .3s cubic-bezier(.4,0,.2,1) !important;
    }
    .bs-notif-bell:hover {
        border-color: rgba(0, 195, 226,0.4) !important;
        background: linear-gradient(135deg, rgba(0, 195, 226,0.15) 0%, rgba(0, 195, 226,0.04) 100%) !important;
        color: #00c3e2 !important;
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 10px 24px rgba(0, 195, 226,0.3);
    }
    .bs-notif-badge {
        background: linear-gradient(135deg, #00c3e2, #0095c8) !important;
        border: 2px solid #0a0a12 !important;
        box-shadow: 0 2px 8px rgba(0, 195, 226,0.6) !important;
    }

    /* LOGIN / REGISTER buttons */
    .bs-user-menu > a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 16px;
        border-radius: 100px;
        text-decoration: none;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.3px;
        transition: all .3s cubic-bezier(.4,0,.2,1);
        position: relative;
        overflow: hidden;
    }
    .bs-user-menu > a:not(.btn-highlight):not(.user-logged) {
        background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
        border: 1px solid rgba(255,255,255,0.08);
        color: #c8c8d4;
        backdrop-filter: blur(14px);
    }
    .bs-user-menu > a:not(.btn-highlight):not(.user-logged):hover {
        border-color: rgba(0, 195, 226,0.4);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0, 195, 226,0.25);
    }
    .bs-user-menu .btn-highlight {
        background: linear-gradient(135deg, #00c3e2, #0095c8) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 6px 18px rgba(0, 195, 226,0.45), 0 1px 0 rgba(255,255,255,0.25) inset !important;
    }
    .bs-user-menu .btn-highlight::before {
        content: '';
        position: absolute; top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left .6s ease;
    }
    .bs-user-menu .btn-highlight:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 195, 226,0.65) !important; }
    .bs-user-menu .btn-highlight:hover::before { left: 100%; }

    /* USER LOGGED pill */
    .user-logged {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 4px 14px 4px 4px !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 100px !important;
        color: #e8e8f0 !important;
        backdrop-filter: blur(14px) !important;
        text-decoration: none !important;
        transition: all .3s cubic-bezier(.4,0,.2,1) !important;
    }
    .user-logged:hover {
        border-color: rgba(0,195,226,0.4) !important;
        background: linear-gradient(135deg, rgba(0,195,226,0.1) 0%, rgba(0,195,226,0.02) 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,195,226,0.25);
    }
    .user-logged .user-avatar {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(0, 195, 226,0.5) !important;
        object-fit: cover;
    }
    .user-logged:hover .user-avatar { border-color: rgba(0,195,226,0.6) !important; }
    .user-logged .user-name { font-size: 12.5px !important; font-weight: 700 !important; }

    /* NAVBAR premium */
    .bs-navbar {
        background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 100%) !important;
        border-top: 1px solid rgba(255,255,255,0.04) !important;
        border-bottom: none !important;
        backdrop-filter: blur(10px) !important;
    }
    .bs-nav-list { display: flex !important; gap: 2px !important; padding: 0 !important; margin: 0 !important; list-style: none; }
    .bs-nav-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 15px 18px !important;
        color: #a0a0b0 !important;
        text-decoration: none !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        position: relative !important;
        transition: all .3s cubic-bezier(.4,0,.2,1) !important;
    }
    /* Hover limpo: pill sutil + indicador lateral (sem underline tosco) */
    .bs-nav-link::before {
        content: '';
        position: absolute;
        inset: 6px 6px;
        border-radius: 10px;
        background: rgba(255,255,255,0.04);
        opacity: 0;
        transform: scale(.92);
        transition: opacity .25s ease, transform .25s ease, background .25s ease;
        z-index: 0;
        pointer-events: none;
    }
    .bs-nav-link > * { position: relative; z-index: 1; }
    .bs-nav-link:hover { color: #fff !important; text-decoration: none !important; }
    .bs-nav-link:hover::before,
    .bs-nav-item.dropdown-open .bs-nav-link::before,
    .bs-nav-item.current .bs-nav-link::before { opacity: 1; transform: scale(1); }
    .bs-nav-link i {
        font-size: 12.5px;
        color: #707080;
        transition: color .25s ease, transform .25s ease, filter .25s ease;
    }
    /* Joy-Con colors: alterna VERMELHO (odd) e AZUL (even) no hover
       1=Inicio vermelho · 2=Generos azul · 3=Firmwares vermelho · 4=Tutoriais azul
       5=Emuladores vermelho · 6=Pedidos azul · 7=Contato vermelho */
    .bs-nav-list > li:nth-child(odd) .bs-nav-link:hover::before,
    .bs-nav-list > li:nth-child(odd).active .bs-nav-link::before,
    .bs-nav-list > li:nth-child(odd).dropdown-open .bs-nav-link::before,
    .bs-nav-list > li:nth-child(odd).current .bs-nav-link::before {
        background: linear-gradient(180deg, rgba(0, 195, 226,0.18) 0%, rgba(0, 195, 226,0.08) 100%);
        box-shadow: inset 0 0 0 1px rgba(0, 195, 226,0.35), 0 4px 16px rgba(0, 195, 226,0.18);
    }
    .bs-nav-list > li:nth-child(even) .bs-nav-link:hover::before,
    .bs-nav-list > li:nth-child(even).active .bs-nav-link::before,
    .bs-nav-list > li:nth-child(even).dropdown-open .bs-nav-link::before,
    .bs-nav-list > li:nth-child(even).current .bs-nav-link::before {
        background: linear-gradient(180deg, rgba(0,195,226,0.18) 0%, rgba(0,195,226,0.08) 100%);
        box-shadow: inset 0 0 0 1px rgba(0,195,226,0.35), 0 4px 16px rgba(0,195,226,0.18);
    }
    .bs-nav-list > li:nth-child(odd) .bs-nav-link:hover i:first-child,
    .bs-nav-list > li:nth-child(odd).active .bs-nav-link i:first-child,
    .bs-nav-list > li:nth-child(odd).dropdown-open .bs-nav-link i:first-child {
        color: #00c3e2 !important;
        transform: scale(1.15);
        filter: drop-shadow(0 0 6px rgba(0, 195, 226,0.55));
    }
    .bs-nav-list > li:nth-child(even) .bs-nav-link:hover i:first-child,
    .bs-nav-list > li:nth-child(even).active .bs-nav-link i:first-child,
    .bs-nav-list > li:nth-child(even).dropdown-open .bs-nav-link i:first-child {
        color: #00c3e2 !important;
        transform: scale(1.15);
        filter: drop-shadow(0 0 6px rgba(0,195,226,0.55));
    }

    /* Quick bar abaixo */
    .quick-bar {
        background: linear-gradient(180deg, rgba(10,10,18,0.6) 0%, rgba(5,5,8,0.7) 100%) !important;
        backdrop-filter: blur(14px);
        position: relative;
    }
    .quick-bar::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 195, 226,0.3), transparent);
    }

    /* Dropdown Generos premium */
    .bs-dropdown-menu, .bs-dropdown {
        background: linear-gradient(180deg, #0f0f1a 0%, #070710 100%) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        backdrop-filter: blur(20px) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
    }

    /* Global: esconde quick-bar antiga em todas as paginas do tema */
    .quick-bar { display: none !important; }
    
    /* Global: esconde carrossel antigo "Lançamentos em Destaque" de todas as paginas internas
       (homepage usa o novo .bs-hero-carousel dentro da hero surreal) */
    .bs-featured-carousel { display: none !important; }
    
    /* ============================================
       GAME CARDS - Glass morphism premium (global)
       ============================================ */
    .bs-games-grid {
        background: transparent !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 18px !important;
        padding: 0 !important;
    }
    .bs-games-grid.list-view {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .bs-game-card {
        /* Todas as regras do card estão em /app/css/dark-theme.css para evitar conflitos */
    }
    @media (max-width: 640px) {
        .bs-games-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 10px !important; }
    }

    /* ==========================================
       BACKGROUND GLOBAL - Grid + Aurora continuos
       (atraves de TODO o site, nao so no topo)
       ========================================== */
    html { background: #06060d; }
    body {
        position: relative;
        background: transparent !important;
    }
    /* Fundo fixo em toda a viewport (acompanha scroll) */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -2;
        background: linear-gradient(180deg, #0a0a14 0%, #06060d 100%);
        pointer-events: none;
    }
    /* Grid xadrez em TODA a viewport, sem mascara restritiva */
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image: 
            linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
        background-size: 44px 44px;
        /* Mascara mais aberta: cobre quase toda a viewport */
        mask-image: radial-gradient(ellipse 140% 110% at 50% 40%, black 45%, transparent 95%);
        -webkit-mask-image: radial-gradient(ellipse 140% 110% at 50% 40%, black 45%, transparent 95%);
        pointer-events: none;
    }
    /* Orbs fixos flutuando atras de tudo */
    body > .bs-site-orbs {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        overflow: hidden;
    }
    body > .bs-site-orbs .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        opacity: 0.22;
        will-change: transform;
    }
    body > .bs-site-orbs .orb.red {
        width: 600px; height: 600px;
        background: radial-gradient(circle, #00c3e2 0%, transparent 70%);
        top: -80px; left: -150px;
        animation: bsSiteOrb1 22s ease-in-out infinite;
    }
    body > .bs-site-orbs .orb.blue {
        width: 560px; height: 560px;
        background: radial-gradient(circle, #00c3e2 0%, transparent 70%);
        bottom: 10%; right: -180px;
        animation: bsSiteOrb2 26s ease-in-out infinite;
    }
    body > .bs-site-orbs .orb.violet {
        width: 420px; height: 420px;
        background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
        top: 55%; left: 30%;
        opacity: 0.14;
        animation: bsSiteOrb3 30s ease-in-out infinite;
    }
    @keyframes bsSiteOrb1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(90px, 60px); } }
    @keyframes bsSiteOrb2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-70px, -90px); } }
    @keyframes bsSiteOrb3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px, 50px); } }

    /* TRANSPARENCIA FORCADA em todos os wrappers principais do tema */
    #meio, .portal-section, main, #content, #wrapper, #page,
    .site-content, .site-main, .entry-content, .main-wrapper,
    .bs-page-container, .bs-main-content, .container-fluid > .row > [class*="col"],
    .bs-homepage-main, .archive-body, .search-results-container {
        background: transparent !important;
        background-color: transparent !important;
    }
    /* Hero: tira o fundo local (usa o global) */
    .bs-hero { background: transparent !important; }
    .bs-hero > .bs-hero-grid, .bs-hero > .bs-hero-orbs { display: none !important; }
    
    /* RESPONSIVE */
    @media (max-width: 1100px) {
        .pfh-online-pill { display: none; }
    }
    @media (max-width: 900px) {
        .bs-user-menu > a:not(.btn-highlight):not(.user-logged) span { display: none; }
        .bs-search { max-width: 340px; }
    }
    @media (max-width: 768px) {
        .bs-header::before { height: 2px; }
        .bs-jc-bar { height: 26px; }
        .bs-search-form { border-radius: 100px !important; }
        .bs-search-btn { width: 38px !important; height: 38px !important; }
        .bs-search-kbd { display: none; }
        .bs-search-input { font-size: 13px !important; padding: 9px 0 !important; }
        .bs-search-icon { font-size: 12px; margin-right: 8px; }
    }

    /* =============================================================
       🔥 MOBILE HEADER v3 - OVERRIDES FINAIS (alta especificidade)
       CSS inline = SEMPRE fresco, nao depende de cache combinado.
       Layout limpo: [Logo] [busca] [hamburguer]
       Menu: DROPDOWN que desliza para baixo (slide-down).
       ============================================================= */
    @media (max-width: 900px) {
        /* Esconde totalmente o menu DESKTOP (login/register/avatar pills + pill online + sininho desktop) */
        header.bs-header .bs-user-menu { display: none !important; }
        header.bs-header .pfh-online-pill { display: none !important; }
        /* Esconde a busca inline desktop (vira modal) */
        header.bs-header .bs-search { display: none !important; }

        /* Reorganiza header mobile: Logo | [busca] | [sino] | [avatar ou entrar] | [hamburger] */
        header.bs-header .bs-header-main > .container {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 10px 12px !important;
        }
        header.bs-header .bs-logo { flex: 0 0 auto !important; margin-right: auto !important; }
        header.bs-header .bs-logo img { max-height: 34px !important; }

        /* Acoes mobile + hamburger SEMPRE visiveis e clicaveis (alta prioridade) */
        header.bs-header .bs-header-actions-mobile {
            display: flex !important;
            flex: 0 0 auto !important;
            align-items: center !important;
            gap: 6px !important;
            margin: 0 !important;
            z-index: 205 !important;
            position: relative !important;
        }
        header.bs-header .bs-header-actions-mobile > * {
            width: 40px !important; height: 40px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: rgba(255,255,255,0.05) !important;
            border: 1px solid rgba(255,255,255,0.08) !important;
            border-radius: 10px !important;
            color: #fff !important;
            font-size: 15px !important;
            cursor: pointer !important;
            text-decoration: none !important;
        }
        header.bs-header .bs-header-actions-mobile .btn-highlight {
            width: auto !important;
            padding: 0 14px !important;
            background: linear-gradient(135deg,#00c3e2,#0095c8) !important;
            border-color: transparent !important;
            font-size: 12px !important;
            font-weight: 800 !important;
        }
        header.bs-header .bs-header-actions-mobile .user-logged {
            padding: 3px !important;
            background: rgba(255,255,255,0.05) !important;
        }
        header.bs-header .bs-header-actions-mobile .user-logged .user-avatar {
            width: 30px !important; height: 30px !important;
            border-radius: 50% !important;
        }
        header.bs-header .bs-header-actions-mobile .user-logged .user-name,
        header.bs-header .bs-header-actions-mobile .user-logged span:not(.user-avatar) { display: none !important; }

        header.bs-header #bsMobileToggle.bs-mobile-toggle {
            display: inline-flex !important;
            align-items: center !important; justify-content: center !important;
            width: 40px !important; height: 40px !important;
            background: rgba(255,255,255,0.05) !important;
            border: 1px solid rgba(255,255,255,0.08) !important;
            border-radius: 10px !important;
            color: #fff !important;
            font-size: 16px !important;
            cursor: pointer !important;
            z-index: 205 !important;
            position: relative !important;
        }

        /* Navbar: vira dropdown slide-down completo (full-width, abaixo do header) */
        header.bs-header > nav.bs-navbar {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important; right: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: calc(100vh - 70px) !important;
            background: linear-gradient(180deg, #0e0e1a 0%, #080810 100%) !important;
            border: none !important;
            border-top: 1px solid rgba(255,255,255,0.08) !important;
            box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
            z-index: 199 !important;
            padding: 8px 12px 20px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            opacity: 0 !important;
            visibility: hidden !important;
            transform: translateY(-10px) !important;
            transition: opacity .25s ease, transform .25s ease, visibility .25s !important;
            pointer-events: none !important;
        }
        body.bs-nav-open header.bs-header > nav.bs-navbar {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
            pointer-events: auto !important;
        }
        header.bs-header > nav.bs-navbar .container {
            padding: 0 !important;
            width: 100% !important; max-width: 100% !important;
        }
        /* Lista vertical em dropdown */
        header.bs-header > nav.bs-navbar .bs-nav-list {
            display: flex !important;
            flex-direction: column !important;
            padding: 0 !important; margin: 0 !important;
            gap: 2px !important;
            width: 100% !important;
            min-width: 0 !important;
        }
        header.bs-header > nav.bs-navbar .bs-nav-item {
            width: 100% !important;
            flex: 0 0 auto !important;
            border: none !important;
        }
        header.bs-header > nav.bs-navbar .bs-nav-link {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 14px !important;
            padding: 14px 16px !important;
            width: 100% !important;
            height: auto !important;
            background: rgba(255,255,255,0.02) !important;
            border: 1px solid rgba(255,255,255,0.04) !important;
            border-radius: 12px !important;
            color: #f5f5f8 !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
            white-space: normal !important;
            text-align: left !important;
        }
        header.bs-header > nav.bs-navbar .bs-nav-link:hover,
        header.bs-header > nav.bs-navbar .bs-nav-link:active,
        header.bs-header > nav.bs-navbar .bs-nav-item.dropdown-open .bs-nav-link {
            background: rgba(0, 195, 226,0.12) !important;
            border-color: rgba(0, 195, 226,0.3) !important;
            color: #fff !important;
        }
        header.bs-header > nav.bs-navbar .bs-nav-link i:first-child {
            color: #00c3e2 !important;
            font-size: 16px !important;
            min-width: 22px !important;
            text-align: center !important;
        }
        header.bs-header > nav.bs-navbar .bs-nav-link span {
            display: inline !important;
            font-size: 14px !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
            font-weight: 600 !important;
            flex: 1 !important;
        }
        header.bs-header > nav.bs-navbar .bs-nav-link i.fa-chevron-down {
            font-size: 11px !important; opacity: 0.6 !important;
            margin-left: auto !important; min-width: 11px !important;
            transition: transform .25s ease !important;
        }
        header.bs-header > nav.bs-navbar .bs-nav-item.dropdown-open .bs-nav-link i.fa-chevron-down { transform: rotate(180deg) !important; }
        header.bs-header > nav.bs-navbar .bs-nav-link::after { display: none !important; }

        /* Titulo "Categorias" acima da lista */
        header.bs-header > nav.bs-navbar::before {
            content: "NAVEGAÇÃO";
            display: block;
            padding: 4px 6px 10px;
            font-size: 10px;
            font-weight: 800;
            color: rgba(255,255,255,0.35);
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* Backdrop real (elemento na pagina) */
        .bs-nav-backdrop {
            position: fixed !important;
            inset: 0 !important;
            background: rgba(0,0,0,0.6) !important;
            backdrop-filter: blur(4px) !important;
            -webkit-backdrop-filter: blur(4px) !important;
            z-index: 197 !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: opacity .25s ease !important;
            display: block !important;
        }
        body.bs-nav-open .bs-nav-backdrop {
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        /* Quando o menu esta aberto, eleva o header para cima do backdrop
           para que o botao de hamburger (X) ainda seja clicavel para FECHAR. */
        body.bs-nav-open header.bs-header { z-index: 210 !important; position: relative !important; }
        body.bs-nav-open { overflow: hidden !important; }

        /* Botao fechar do drawer - nao usa mais */
        .bs-navbar-close-btn { display: none !important; }

        /* Hamburger vira X quando aberto */
        body.bs-nav-open header.bs-header #bsMobileToggle i::before { content: "\f00d" !important; }

        /* Dropdown fullscreen generos - mantem fora do drawer */
        header.bs-header > nav.bs-navbar .bs-dropdown {
            position: fixed !important;
            inset: 0 !important;
            width: 100% !important; max-width: 100% !important;
            height: 100vh !important; max-height: 100vh !important;
            z-index: 10010 !important;
            border-radius: 0 !important;
            background: #0e0e1a !important;
            padding: 0 !important;
            box-shadow: none !important;
            transform: none !important;
            overflow-y: auto !important;
        }

        /* Sino de notificacoes mobile - visual consistente com o botao de busca */
        .bs-mobile-bell-btn {
            width: 40px !important;
            height: 40px !important;
            border-radius: 12px !important;
            background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
            border: 1px solid rgba(255,255,255,0.09) !important;
            color: #c8c8d4 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 15px !important;
            cursor: pointer !important;
            position: relative !important;
            transition: all .25s ease !important;
            padding: 0 !important;
            flex-shrink: 0 !important;
        }
        .bs-mobile-bell-btn:hover,
        .bs-mobile-bell-btn:active {
            background: linear-gradient(135deg, rgba(0, 195, 226,0.14) 0%, rgba(0, 195, 226,0.04) 100%) !important;
            border-color: rgba(0, 195, 226,0.35) !important;
            color: #00c3e2 !important;
        }
        .bs-mobile-bell-badge {
            position: absolute !important;
            top: -3px !important; right: -3px !important;
            min-width: 16px !important; height: 16px !important;
            padding: 0 4px !important;
            background: linear-gradient(135deg, #00c3e2, #0095c8) !important;
            color: #fff !important;
            border-radius: 100px !important;
            font-size: 9px !important;
            font-weight: 900 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 1 !important;
            border: 2px solid #0a0a14 !important;
            box-shadow: 0 2px 6px rgba(0, 195, 226,0.45) !important;
        }

        /* =====================================================
           SPOTLIGHT MOBILE - forca uma linha so (sem quebra)
           e remove os dots de thumb visuals bugados.
           ===================================================== */
        .bs-spotlight { padding: 16px 0 12px !important; }
        .bs-spotlight .container { padding: 0 12px !important; }
        .bs-spotlight-head {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 8px !important;
            margin-bottom: 12px !important;
            flex-wrap: nowrap !important;
        }
        .bs-spotlight-title {
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            font-size: 13px !important;
            line-height: 1.2 !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            margin: 0 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        .bs-spotlight-title > span:last-child {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            min-width: 0 !important;
        }
        .bs-spotlight-title strong {
            white-space: nowrap !important;
        }
        .bs-spotlight-icon {
            width: 26px !important; height: 26px !important;
            min-width: 26px !important;
            font-size: 11px !important;
            flex-shrink: 0 !important;
        }
        .bs-spotlight-all {
            flex-shrink: 0 !important;
            white-space: nowrap !important;
            padding: 6px 14px !important;
            font-size: 11px !important;
        }
        .bs-spotlight-all span { display: inline !important; }
        .bs-spotlight-all::before { content: none !important; }

        /* Dots de thumbnails do spotlight: esconde completamente no mobile (cluttery) */
        .bs-spot-thumbs { display: none !important; }

        /* ======================================================
           LOGO NINTENDO SWITCH - REMOVIDA DEFINITIVAMENTE NO MOBILE
           (solicitado pelo usuario - cansou do tamanho)
           ====================================================== */
        .games-grid .game-card-cover::before,
        .games-grid .game-cover::before,
        .grade .item .imagem::before,
        .grade .capa::before,
        .poster::before,
        .thumb-container::before,
        .carousel-item::before,
        .bs-games-grid .bs-game-card .bs-game-card-cover::before,
        .bs-game-card-cover::before,
        .single-game-cover::before,
        .game-card-cover::before,
        .bs-cover-logo {
            display: none !important;
            content: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
            background: none !important;
        }
    }