/* ============================================
   VARIÁVEIS & RESET
   ============================================ */
:root {
    --bg-color: #0b0e14;
    --card-bg: #161b22;
    --primary: #00d4ff;
    --text: #ffffff;
    --gray: #8b949e;
    --sidebar-w: 300px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #2e2e2e transparent;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    background-color: var(--bg-color);
    color: var(--text);
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    /* Blinda elementos internos de vazarem e travarem o scroll */
}

a {
    text-decoration: none;
    color: inherit;
}

.page-hidden {
    display: none !important;
}

/* ============================================
   CABEÇALHO
   ============================================ */
.cabdeep {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    position: relative;
}

.logo img {
    width: 160px;
    display: block;
}

/* ============================================
   NAV DESKTOP
   ============================================ */
nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 25px;
}

nav li {
    cursor: pointer;
    color: #ffffff;
    font-size: 0.95rem;
    transition: color 0.3s;
    white-space: nowrap;
}

nav li:not(.fa-patreon):hover {
    color: var(--primary);
}

.fa-patreon {
    background-color: #FF9F1C;
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.fa-patreon:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}


/* ============================================
   HAMBURGER BUTTON (só aparece no mobile)
   ============================================ */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s;
    z-index: 1001;
}

.hamburger:hover {
    background: rgba(255, 255, 255, 0.07);
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Animação do X ao abrir */
.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ============================================
   OVERLAY (compartilhado entre mobile menu e sidebars)
   ============================================ */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s;
}

.sidebar-overlay.open {
    display: block;
}


/* ============================================
   MENU MOBILE (lateral esquerda)
   ============================================ */
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100dvh;
    background: var(--card-bg);
    border-right: 1px solid #2e2e2e;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-nav.open {
    transform: translateX(0);
}

.mobile-nav .mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #2e2e2e;
}

.mobile-nav .mob-header img {
    width: 120px;
}

.mob-close {
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    border-radius: 6px;
    background: transparent;
    color: #aaa;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.mob-close:hover {
    background: #2a2a2a;
    color: #fff;
}

.mobile-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
}

.mobile-nav ul li {
    padding: 0.9rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    color: #ccc;
    border-bottom: 1px solid #1e2028;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s, color 0.2s;
}

.mobile-nav ul li:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.mobile-nav ul li.mob-patreon {
    color: #FF9F1C;
    font-weight: bold;
}

.mob-arrow {
    font-size: 0.7rem;
    color: #555;
}


/* ============================================
   SIDEBARS DE CONTEÚDO (Categorias e FAQ)
   Abertura pela ESQUERDA
   ============================================ */
.sidebar-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100dvh;
    /* dvh se adapta à barra do navegador mobile */
    background: #161b22;
    border-right: 1px solid #2e2e2e;
    z-index: 99999;
    /* Z-index altíssimo para ficar acima de tudo */
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* O painel em si não rola... */
}

.sidebar-panel.open {
    transform: translateX(0);
}

.sidebar-panel .sb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid #2e2e2e;
    flex-shrink: 0;
}

.sidebar-panel .sb-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f0f0f0;
    letter-spacing: 0.03em;
}

.sb-close {
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    border-radius: 6px;
    background: transparent;
    color: #aaa;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.sb-close:hover {
    background: #2a2a2a;
    color: #fff;
}

.sidebar-panel .sb-body {
    flex: 1;
    overflow-y: auto;
    /* ...quem rola é apenas o conteúdo interno! */
    padding: 1.25rem 1.4rem;
    -webkit-overflow-scrolling: touch;
    /* Rola suave no iOS */
}

/* ============================================
   CONTAINER LOGIN
   ============================================ */
.containerLog {
    margin: 10px;
    padding: 10px;
}

.title h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    /* responsivo */
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    line-height: 0.85;
    margin: 0 0 30px 0;
}

.colorTitle {
    color: #0056b3;
}

.btnlog {
    display: flex;
    flex-wrap: wrap;
    /* quebra em mobile */
    max-width: 1400px;
    gap: 12px;
}

.btn-patreon {
    background-color: transparent;
    border: 1px solid #FFF;
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.btn-login {
    background-color: #0056b3;
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.btn-trial {
    background-color: transparent;
    border: 1px solid #83f724b6;
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.btnlog button:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}


/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.aba-gamer {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px;
    max-width: 1300px;
    margin: 0 auto;
    color: #fff;
}

/* COLUNA JOGOS */
.coluna-jogo {
    flex: 3;
    display: flex;
    flex-direction: column;
    animation: deslizarAparecer 0.6s ease-out forwards;
}

.containerJogo {
    background-color: #2a2a35;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.containerJogo h2 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #3e3e4e;
    padding-bottom: 10px;
}

/* Mudança principal: Grid para 2 colunas em PC */
.games-grid {
    display: grid;
    /* Volta para grid */
    grid-template-columns: repeat(2, 1fr);
    /* Duas colunas fixas */
    gap: 30px;
    /* Espaço entre cards */
    margin-bottom: 25px;
}

/* Cards médio-grandes em PC */
.game-card {
    background-color: #161b22;
    /* Fundo do card (seu --card-bg) */
    border-radius: 12px;
    /* Bordas mais suaves */
    padding: 15px;
    /* Mais padding interno */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    /* Sombra para destaque */
    transition: transform 0.3s ease;
    /* Hover mais suave */
}

.game-card:hover {
    transform: translateY(-10px);
    /* Eleva mais no hover */
}

/* Capas médio-grandes em PC */
.game-card img {
    width: 100%;
    /* Ocupa toda a largura do card */
    height: auto;
    /* Mantém proporção */
    aspect-ratio: 16/9;
    /* Mantém o aspect-ratio atual */
    border-radius: 8px;
    /* Bordas arredondadas */
    margin-bottom: 15px;
    /* Espaço abaixo da imagem para a descrição */
    box-shadow: 0 2px 10px rgba(0, 212, 255, 0.2);
    /* Glow azul sutil */
}

/* Nome do jogo (span) */
.game-card span {
    font-size: 1.2rem;
    /* Maior */
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10px;
    /* Espaço antes da descrição */
    display: block;
    text-align: center;
}

/* Nova classe para descrição de destaque */
.game-card .game-description {
    background-color: #0b0e14;
    /* Azul escuro quase cinza (seu --bg-color, ajuste se quiser mais cinza: #1c1f26) */
    padding: 12px 15px;
    border-radius: 8px;
    color: #ffe082;
    /* Amarelo claro "vidro" (suave e vibrante; ajuste para #ffd700 se quiser mais ouro) */
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    border: 1px solid rgba(255, 224, 130, 0.2);
    /* Borda sutil amarela para "vidro" */
    box-shadow: 0 0 8px rgba(255, 224, 130, 0.1);
    /* Glow amarelo claro */
}

/* Responsivo: Em mobile (≤768px), muda para 1 coluna reta com cards grandes */
@media (max-width: 768px) {
    .games-grid {
        display: flex;
        /* Muda para flex */
        flex-direction: column;
        /* Um sobre o outro */
        gap: 30px;
        /* Mais espaço vertical */
    }

    .game-card {
        width: 100%;
        /* Ocupa toda a largura */
        max-width: none;
        /* Sem limite, grande no mobile */
        padding: 10px;
    }

    .game-card img {
        border-radius: 6px;
    }

    .game-description {
        font-size: 0.95rem;
        padding: 10px;
    }
}

.game-details-section {
    padding: 20px;
    background: #1a1a1a;
    /* Cor de fundo do conteúdo */
    color: white;
    min-height: 80vh;
}

.btn-voltar {
    background: #ff4757;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 20px;
}

.btn-voltar:hover {
    background: #ff6b81;
}

/* Container principal da aba - Ocupa a largura total */
/* Container principal da aba - Ocupa a largura total */
/* Container principal da aba - Agora ele faz parte do fluxo normal da página */
.tab-content {
    display: none;
    width: 100%;
    background-color: var(--bg-color);
    color: var(--text);
    animation: fadeIn 0.3s ease forwards;
    /* Removido position: fixed, z-index, height, top, left, overflow */
}

.tab-inner {
    width: 100%;
    /* Removido overflow-y e height: 100%, agora ele rola com a página naturalmente */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Banner de Imagem no Topo */
.game-hero-banner {
    width: 100%;
    height: 40vh;
    /* Ocupa 40% da altura da tela */
    min-height: 300px;
    overflow: hidden;
}

.game-hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Estica sem distorcer */
    filter: brightness(0.7);
    /* Escurece levemente para não ofuscar a visão */
}

/* Conteúdo escrito (Fica logo abaixo da imagem, sem caixas ou sombras) */
.menu-detalhes {
    padding: 40px 5%;
    /* Espaçamento nas laterais para não grudar na borda */
    max-width: 1400px;
    /* Um limite grande apenas para não ficar ruim em monitores ultrawide */
    margin: 0 auto;
    /* Mantém alinhado à esquerda, mas centralizado na tela geral */
}

.menu-detalhes h1 {
    color: var(--primary);
    margin-bottom: 20px;
    font-size: 2.5rem;
}

.menu-detalhes h2 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-top: 40px;
    margin-bottom: 15px;
}

.menu-detalhes p {
    color: var(--gray);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* Botões simples e diretos */
.btn-download,
.btn-back-games {
    background-color: var(--primary);
    color: #0b0e14;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.2s;
    margin: 20px 0;
    display: block;
}

.btn-download:hover {
    background-color: #00b3cc;
}

/* Botão de voltar discreto no final */
.btn-back-games {
    background-color: transparent;
    color: var(--text);
    border: 1px solid var(--gray);
    margin-top: 50px;
    display: block;
    /* Quebra para a linha de baixo */
    width: fit-content;
}

.btn-back-games:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/* PAGINAÇÃO */
.pagination-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.tab-btn {
    background-color: #3e3e4e;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.tab-btn:hover {
    background-color: #505065;
}

.tab-btn.active {
    background-color: #007bff;
}

/* COLUNA LATERAL */
.coluna-lateral {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: deslizarAparecer 0.8s ease-out forwards;
}

.container-pesquisa,
/* CSS Ajustado */
.container-anuncios {
    background-color: #2a2a35;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    width: 190px;
    /* 160px do ad + 30px de respiro */

    /* Removemos o min-height fixo */
    height: fit-content;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    /* Cria um espaço automático entre os dois anúncios */
}

.anuncio-espaco {
    width: 160px;
    height: 300px;
    /* Ajustado para o formato 160x300 */
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    border-radius: 4px;
    /* Opcional: arredonda o fundo do ad */
    overflow: hidden;
}

/* Título do container */
.container-pesquisa h3,
.container-anuncios h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
}


.input-pesquisa {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: none;
    background-color: #1e1e26;
    color: white;
}

.btn-buscar {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.btn-buscar:hover {
    background-color: #0056b3;
}

.anuncio-espaco:last-child {
    margin-bottom: 0;
}

/* scroll */
/* ── SCROLL SUAVE ── */

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #2e2e2e;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* ── REVEAL AO SCROLLAR ── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* delay escalonado para os game cards */
.games-grid .game-card:nth-child(1) {
    transition-delay: 0.05s;
}

.games-grid .game-card:nth-child(2) {
    transition-delay: 0.10s;
}

.games-grid .game-card:nth-child(3) {
    transition-delay: 0.15s;
}

.games-grid .game-card:nth-child(4) {
    transition-delay: 0.20s;
}

.games-grid .game-card:nth-child(5) {
    transition-delay: 0.25s;
}

.games-grid .game-card:nth-child(6) {
    transition-delay: 0.30s;
}

.games-grid .game-card:nth-child(7) {
    transition-delay: 0.35s;
}

.games-grid .game-card:nth-child(8) {
    transition-delay: 0.40s;
}

.games-grid .game-card:nth-child(9) {
    transition-delay: 0.45s;
}


/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background-color: var(--card-bg);
    border-top: 1px solid #1e2028;
    margin-top: auto;
    /* ← substitui o 60px — empurra pro final */
    width: 100%;
}

.footer-inner {
    width: 100%;
    padding: 50px 40px 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 40px;
}

/* --- BRAND --- */
.footer-brand p {
    font-size: 0.83rem;
    color: #888;
    line-height: 1.7;
    margin: 14px 0 20px;
}

.footer-logo {
    width: 140px;
    display: block;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    color: #888;
    text-decoration: none;
    transition: all 0.2s;
}

.footer-social a:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(0, 212, 255, 0.06);
}

/* --- COLUNAS --- */
.footer-col h4 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    margin-bottom: 16px;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col ul li a {
    color: #888;
    text-decoration: none;
    font-size: 0.87rem;
    transition: color 0.2s;
}

.footer-col ul li a:hover {
    color: #fff;
}

/* --- BOTÃO PATREON --- */
.footer-btn-patreon {
    display: inline-block;
    background-color: #FF9F1C;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.2s;
}

.footer-btn-patreon:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
}

/* --- BOTTOM BAR --- */
.footer-bottom {
    border-top: 1px solid #1e2028;
    padding: 18px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-bottom p {
    font-size: 0.78rem;
    color: #444;
}

.footer-bottom strong {
    color: #666;
}

/* =============================================
   ADICIONE NO FINAL DO SEU styles.css
   ============================================= */

/* ── BUSCA DENTRO DA SIDEBAR ── */
.sb-search {
    margin-bottom: 16px;
}

.sb-search .input-pesquisa {
    width: 100%;
    background: #0e1117;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}

.sb-search .input-pesquisa:focus {
    border-color: var(--primary);
}

/* ── TÍTULO DE SEÇÃO ── */
.sb-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #1e2028;
}

/* ── LISTA DE CATEGORIAS ── */
.cat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cat-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 0.83rem;
    color: #aaa;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.cat-list li:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Item ativo (categoria selecionada) */
.cat-list li.cat-ativa {
    background: rgba(0, 212, 255, 0.08);
    color: var(--primary);
    font-weight: 600;
}

.cat-list li span {
    font-size: 0.72rem;
    color: #444;
    background: #1e2028;
    padding: 2px 7px;
    border-radius: 20px;
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.cat-list li.cat-ativa span {
    background: rgba(0, 212, 255, 0.12);
    color: var(--primary);
}

/* ── BOTÃO LIMPAR FILTRO ── */
.btn-limpar-filtro {
    width: 100%;
    margin-top: 20px;
    padding: 9px;
    background: transparent;
    border: 1px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 0.83rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-limpar-filtro:hover {
    border-color: #ff4d4d;
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.05);
}

/* ── INDICADOR DE FILTRO ATIVO no topo da grade ── */
.filtro-ativo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    color: var(--primary);
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.filtro-ativo-badge:hover {
    background: rgba(0, 212, 255, 0.14);
}


/* style tags */
/* Container de Categorias/Tags dentro do Jogo */
.game-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0 25px 0;
    align-items: center;
}

.tag-label {
    color: var(--gray);
    font-weight: bold;
    font-size: 0.9rem;
    margin-right: 5px;
}

.game-tag-pill {
    background-color: rgba(0, 212, 255, 0.1);
    color: var(--primary);
    border: 1px solid rgba(0, 212, 255, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.game-tag-pill:hover {
    background-color: var(--primary);
    color: #0b0e14;
    /* Fundo escuro para contrastar */
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 212, 255, 0.3);
}

/* OVERLAY DE PÁGINAS ESTÁTICAS (Fica por cima do site todo) */
.static-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-color);
    /* Usa a cor de fundo do seu site */
    z-index: 10000;
    /* Prioridade máxima */
    display: none;
    /* Escondido por padrão */
    overflow-y: auto;
    /* Permite rolar se o texto for grande */
    animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.static-overlay-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 5%;
    color: var(--text);
}

.btn-voltar-tela-cheia {
    background: var(--primary);
    color: #0b0e14;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 40px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-voltar-tela-cheia:hover {
    background: #00b3cc;
}

.static-text-block {
    display: none;
    /* Textos escondidos até serem chamados */
}

.static-text-block h1 {
    color: var(--primary);
    font-size: 2.2rem;
    margin-bottom: 25px;
}

.static-text-block h2 {
    color: #fff;
    font-size: 1.3rem;
    margin-top: 30px;
    margin-bottom: 15px;
    border-left: 3px solid var(--primary);
    padding-left: 10px;
}

.static-text-block p {
    color: var(--gray);
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 15px;
}

/* --- RESPONSIVO --- */
@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 500px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 16px 24px;
    }
}

/* ============================================
   ANIMAÇÕES
   ============================================ */
@keyframes deslizarAparecer {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================
   RESPONSIVO — TABLET (≤ 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .logo img {
        width: 130px;
    }

    nav ul {
        gap: 15px;
    }

    nav li {
        font-size: 0.88rem;
    }
}

.faq-intro {
    font-size: 0.82rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #1e2028;
}

.faq-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #1e2028;
}

.faq-item {
    border: 1px solid #1e2028;
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.faq-item:hover {
    border-color: #2a2a3a;
}

.faq-item.open {
    border-color: rgba(0, 212, 255, 0.25);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 13px;
    cursor: pointer;
    gap: 10px;
    background: #0e1117;
    transition: background 0.15s;
    user-select: none;
}

.faq-question:hover {
    background: #131820;
}

.faq-question span {
    font-size: 0.84rem;
    font-weight: 500;
    color: #ccc;
    line-height: 1.4;
}

.faq-item.open .faq-question span {
    color: #fff;
}

.faq-chevron {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #444;
    font-style: normal;
    transition: transform 0.3s, color 0.2s;
    line-height: 1;
}

.faq-item.open .faq-chevron {
    transform: rotate(90deg);
    color: var(--primary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s ease;
    background: #0b0e14;
}

.faq-answer.open {
    max-height: 500px;
}

.faq-answer p,
.faq-answer ul,
.faq-answer ol {
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #888;
    line-height: 1.75;
}

.faq-answer ul,
.faq-answer ol {
    padding-left: 28px;
    padding-top: 4px;
    padding-bottom: 10px;
}

.faq-answer li {
    margin-bottom: 5px;
    color: #888;
}

.faq-answer strong {
    color: #ccc;
    font-weight: 600;
}

.faq-note {
    margin: 0 14px 12px !important;
    padding: 8px 12px !important;
    background: rgba(0, 212, 255, 0.05);
    border-left: 3px solid rgba(0, 212, 255, 0.3);
    border-radius: 0 6px 6px 0;
    color: #777 !important;
    font-size: 0.79rem !important;
}


/* ── NAV: botão login e estado logado ── */
#btn-nav-login {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 6px;
    color: var(--primary) !important;
    padding: 6px 14px !important;
    font-size: 0.85rem;
    transition: all 0.2s;
}

#btn-nav-login:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--primary);
}

#btn-nav-login.nav-logged-in {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05);
    border-color: #2a2a2a;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── My Keys badge ── */
#nav-my-keys {
    position: relative;
}

.mykeys-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    color: #000;
    font-size: 0.6rem;
    font-weight: bold;
    margin-left: 5px;
    vertical-align: middle;
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(0, 212, 255, 0);
    }
}

/* ── MY KEYS SIDEBAR CONTENT ── */

/* Estado não logado */
.mk-not-logged {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 10px;
    gap: 12px;
}

.mk-lock-icon {
    font-size: 2.5rem;
}

.mk-not-logged h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #f0f0f0;
    margin: 0;
}

.mk-not-logged p {
    font-size: 0.83rem;
    color: #888;
    line-height: 1.6;
    margin: 0;
}

.mk-login-btn {
    width: 100%;
    padding: 11px;
    background: var(--primary);
    color: #000;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
    margin-top: 4px;
}

.mk-login-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.mk-trial-hint {
    font-size: 0.75rem !important;
    color: #555 !important;
    line-height: 1.5;
}

/* ID card */
.mk-id-card {
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.mk-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    margin-bottom: 8px;
}

.mk-id-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mk-id-value span {
    font-family: monospace;
    font-size: 1.05rem;
    color: var(--primary);
    letter-spacing: 2px;
    word-break: break-all;
}

/* Key card */
.mk-key-card {
    background: #0e1117;
    border: 1px solid #1e2028;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.mk-key-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0;
}

.mk-key-value strong {
    font-family: monospace;
    font-size: 0.95rem;
    color: #70a1ff;
    word-break: break-all;
}

.mk-copy-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid #333;
    border-radius: 5px;
    color: #888;
    font-size: 0.72rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.mk-copy-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.mk-timer {
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
}

.mk-note {
    font-size: 0.75rem;
    color: #555;
    margin-top: 8px;
    line-height: 1.5;
}

/* Premium card */
.mk-premium {
    border-color: rgba(255, 215, 0, 0.2);
    background: rgba(255, 215, 0, 0.03);
}

.mk-premium-badge {
    display: inline-block;
    background: rgba(255, 215, 0, 0.1);
    color: gold;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    margin: 6px 0 10px;
}

/* Expired card */
.mk-expired {
    border-color: rgba(255, 71, 87, 0.2);
}

/* Buttons */
.mk-discord-btn,
.mk-patreon-btn {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: filter 0.2s, transform 0.2s;
}

.mk-discord-btn {
    background: #5865F2;
    color: #fff;
}

.mk-patreon-btn {
    background: #f96854;
    color: #fff;
}

.mk-discord-btn:hover,
.mk-patreon-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* aba games */
/* Estilos aplicados com base nas suas variáveis :root */
.game-cover {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--primary);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.15);
}

.btn-back-top {
    background: transparent;
    color: var(--primary);
    border: none;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 0;
    transition: all 0.3s ease;
}

.btn-back-top:hover {
    text-shadow: 0 0 10px var(--primary);
    transform: translateX(-5px);
}

.menu h2 {
    color: var(--gray);
    margin-top: 20px;
    border-bottom: 1px solid #2a313c;
    padding-bottom: 5px;
}

.menu h3 {
    color: var(--primary);
    margin-top: 15px;
}

/* ====================== GALERIA ====================== */
.game-gallery-section {
    padding: 40px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.game-gallery-section h2 {
    color: var(--primary);
    margin-bottom: 25px;
    font-size: 1.8rem;
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.04);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.4);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

/* Lightbox */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#lightbox img {
    max-width: 95%;
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.6);
}

#lightbox .close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    z-index: 100001;
}

/* Toast */
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVO — MOBILE (≤ 768px)
   ============================================ */
@media (max-width: 768px) {

    /* Esconde o nav desktop, mostra hamburger */
    nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Header ocupa toda a largura */
    .cabdeep {
        border-radius: 0 0 12px 12px;
        padding: 10px 16px;
    }

    .logo img {
        width: 120px;
    }

    /* Layout principal empilha */
    .aba-gamer {
        flex-direction: column;
        padding: 12px;
    }

    /* Botões de ação empilham */
    .btnlog {
        flex-direction: column;
        align-items: flex-start;
    }

    .btnlog button,
    .btn-patreon,
    .btn-login,
    .btn-trial {
        width: 100%;
        text-align: center;
    }

    /* Grid de jogos menor */
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }

    /* Sidebars ocupam tela cheia no mobile */
    .sidebar-panel,
    .mobile-nav {
        width: 100%;
        border-right: none;
    }
}


/* ============================================
   RESPONSIVO — MOBILE PEQUENO (≤ 400px)
   ============================================ */
@media (max-width: 400px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .title h1 {
        font-size: 1.8rem;
    }
}