/* =========================================
   1. RESET E CONFIGURAÇÕES GERAIS
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #69d1ff; /* Azul Sonic */
    color: black;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden; /* Impede barra de rolagem horizontal com o menu aberto */
}

/* Estilos para o Modo Escuro */
body.dark-theme {
    background-color: #121212 !important; /* Fundo quase preto */
    color: #ffffff !important;           /* Texto branco */
}

/* Ajuste para o Modo Escuro */
body.dark-theme header {
    background-color: #1a1a1a !important;
}

/* Escurecer os Cards de Jogo */
body.dark-theme .game-card {
    background-color: #1e1e1e !important;
    color: white !important;
    border: 1px solid #333;
}

/* Ajuste no Menu Lateral */
body.dark-theme #side-menu {
    background-color: #000;
}

body.dark-theme .game-card p {
    color: #fff;
}

/* =========================================
   2. CABEÇALHO (HEADER) E LOGO
   ========================================= */
/* =========================================
   CONSERTO DEFINITIVO DO HEADER E ALINHAMENTO
   ========================================= */

header {
    width: 100%;
    height: 80px; /* Altura fixa para estabilidade */
    background-color: #0055A5; /* Azul Sonic (Modo Claro) */
    position: sticky; /* Fixa no topo ao rolar */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center; /* Centraliza verticalmente o container interno */
    transition: background 0.3s ease;
}

/* Container interno que segura o conteúdo */
.header-content {
    width: 100%;
    max-width: 1200px; /* Largura máxima do site */
    margin: 0 auto;    /* Centraliza na tela */
    padding: 0 20px;
    display: flex;
    align-items: center;       /* Centraliza verticalmente os itens (logo, busca, menu) */
    justify-content: space-between; /* Espaça os itens: Esquerda, Centro, Direita */
    height: 100%;
}

.site-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 100%;
}

.site-logo {
    height: 63px; /* Altura ideal */
    width: auto !important; /* Mantém a proporção correta */
    max-width: 200px;
    display: block;
    object-fit: contain;
}

/* Ajuste da Barra de Pesquisa */
.search-container {
    flex: 1; /* Faz a busca ocupar o espaço central */
    max-width: 500px; /* Limite de largura para não ficar gigante */
    display: flex;
    justify-content: center;
    padding: 0 15px;
}

#search-bar {
    width: 100%;
    height: 40px;
    border-radius: 20px; /* Estilo retangular arredondado */
    padding: 0 20px;
    border: 1px solid #ddd;
    background-color: #fff;
}

/* --- Estilos das Ações (Lado Direito) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre os botões */
}

#menu-button {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* Novo estilo para o Botão de Menu (com imagem) */
.menu-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s ease;
}

.menu-icon-btn img {
    height: 35px; /* Ajuste o tamanho da imagem do menu aqui */
    width: auto;
    display: block;
}

.menu-icon-btn:hover {
    transform: scale(1.1);
}

function verificarPascoa() {
    console.log("Sistema de Páscoa carregado!");
    // O resto do código da páscoa vai aqui...
}
/* =========================================
   VISUAL DO MENU LATERAL (ATUALIZADO)
   ========================================= */

/* Mantém o fundo estritamente preto, como solicitado */
.sidebar {
    background-color: #000000 !important; 
}

/* Espaçamento generoso entre os itens, igual à imagem */
.menu-links {
    display: flex;
    flex-direction: column;
    gap: 25px; 
    padding: 60px 30px; /* Dá espaço para não encostar no botão de fechar */
}

/* Estilo do texto dos links */
.menu-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    font-family: sans-serif; /* Fonte limpa igual da imagem */
    transition: opacity 0.3s ease;
}

.menu-links a:hover {
    opacity: 0.7; /* Dá um leve brilho ao passar o mouse */
}

/* O botão de Tema com borda arredondada */
.theme-btn {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 20px; /* Deixa os cantos redondinhos */
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    transition: all 0.3s ease;
}

/* Inverte as cores ao passar o mouse por cima do botão */
.theme-btn:hover {
    background-color: #ffffff;
    color: #000000;
}

/* =========================================
   4. CONTEÚDO PRINCIPAL E TÍTULOS
   ========================================= */
main {
    padding: 20px; /* Adiciona 20px de espaço em todos os lados */
    max-width: 1200px; /* Impede que o conteúdo estique demais em telas gigantes */
    margin: 0 auto; /* Centraliza o conteúdo no meio da tela */
}

/* Ou, se quiser ajustar especificamente o texto de introdução */
.intro-text {
    padding: 0 20px; /* 0 em cima/baixo, 20px nas laterais */
    text-align: center; /* Centraliza o texto para um visual mais clássico */
    margin-bottom: 30px;
}

main h1 {
    text-align: center;
    margin-bottom: 10px;
}

main h2 {
    text-align: center;
    margin-top: 50px; 
    margin-bottom: 20px;
    font-size: 28px;
}

main h3 {
    text-align: center;
    margin-bottom: 30px;
    opacity: 0.8;
}

/* =========================================
   5. ÁREA DO JOGO (EMULADOR)
   ========================================= */
.game-container {
    width: 100%;
    max-width: 900px; 
    margin: 30px auto;
    background: #000;
    border: 6px solid #0055A5;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.iframe-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Proporção 4:3 */
    height: 0;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* =========================================
   6. GRADE DE JOGOS E CARDS
   ========================================= */
.game-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.game-section h2 {
    margin-bottom: 30px;
    font-size: 28px;
    color: #333;
}

.game-grid {
    display: grid;
    /* Cria colunas de no mínimo 250px. Se não couber, ele pula pra baixo */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* Espaço entre os cards */
    justify-items: center; /* Centraliza o card na coluna */
}

/* =========================================
   EFEITO DE ZOOM E BRILHO NOS CARDS
   ========================================= */

/* 1. O Card (O container do jogo) */
.game-card {
    background-color: #fff;
    border-radius: 8px; /* Cantos arredondados como combinamos */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    width: 100%; /* Ocupa a largura da coluna do grid */
    max-width: 280px; /* Limite para não ficar largo demais em telas grandes */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Padronização das Imagens */
.game-card img {
    width: 100%;
    height: 180px; /* Altura fixa para todas as capas de jogo */
    object-fit: cover; /* Corta a imagem sem esticar para preencher o espaço */
    display: block;
}

/* Texto abaixo da imagem */
.game-card p {
    padding: 15px;
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    flex-grow: 1; /* Garante que o texto ocupe o espaço e alinhe os botões */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. EFEITO AO PASSAR O MOUSE (HOVER) */
.game-card:hover {
    transform: translateY(-5px); /* O card sobe levemente */
    border-color: #0055A5; /* A borda fica azul */
    box-shadow: 0 10px 20px rgba(0, 85, 165, 0.3); /* Sombra azulada suave */
    z-index: 10; /* Garante que o card que subiu fique na frente dos outros */
}

.game-card:hover img {
    transform: scale(1.1); /* Aumenta a imagem em 10% */
}

/* Ajuste para o Modo Escuro */
body.dark-theme .game-card:hover {
    box-shadow: 0 10px 25px rgba(0, 85, 165, 0.6); /* Brilho mais forte no escuro */
}


.game-card p {
    text-align: center;
    padding: 12px 5px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ajuste Modo Escuro para o Título e Grid */
body.dark-theme .game-section h2 {
    color: #fff;
}

body.dark-theme .game-card {
    background-color: #1e1e1e;
    color: #fff;
}

/* =========================================
   7. MODO ESCURO (TEMA SHADOW)
   ========================================= */
body.dark-mode {
    background-color: #1a1a1a;
    color: white;
}

body.dark-mode header {
    background-color: #8b0000; /* Vermelho Shadow */
}

/* Estilo do Menu Lateral no Modo Escuro */
body.dark-mode .side-menu {
    background-color: #4d0000; /* Vermelho mais escuro que o header */
}

body.dark-mode .side-menu ul li a:hover {
    color: #ff0000; /* Vermelho brilhante no hover */
}

body.dark-mode #theme-toggle-item a {
    border-color: #ff0000;
    color: #ff0000;
}

body.dark-mode #theme-toggle-item a:hover {
    background-color: #ff0000;
    color: white;
}

body.dark-mode .game-card {
    background-color: #333;
    color: white;
    border: 1px solid #ff0000;
}

body.dark-mode .game-card p {
    background-color: #333;
}

body.dark-mode main h1, 
body.dark-mode main h2 {
    color: #ff0000;
}

/* =========================================
   8. RODAPÉ (FOOTER)
   ========================================= */
footer {
    width: 100%;
    background-color: #0055A5; /* Azul Sonic */
    color: white;
    padding: 30px 20px; /* Espaço interno (respiro) */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    text-align: center;
}

/* O container que segura o texto dentro do footer */
.footer-content {
    max-width: 1200px; /* Mesma largura do resto do site */
    width: 100%;
    display: flex;
    flex-direction: column; /* Coloca uma linha embaixo da outra */
    gap: 10px; /* Espaço entre as frases */
}

.footer-content p {
    margin: 0;
    font-size: 14px;
}

.footer-links span {
    font-size: 12px;
    opacity: 0.8;
}

/* -----------------------------------------
   MODO ESCURO - SINCRONIA TOTAL
   ----------------------------------------- */
body.dark-theme footer {
    background-color: #1a1a1a;
    border-top: 1px solid #333;
}

body.dark-theme .footer-links span {
    color: #555555 !important;
}

/* FOOTER NO MODO ESCURO */
body.dark-theme footer {
    background-color: #1a1a1a !important;
    border-top: 1px solid #333;
}

body.dark-theme .footer-content p {
    color: #bbb !important;
}

body.dark-theme .footer-links span {
    color: #666 !important;
}
/* =========================================
   ESTILO DA PÁGINA DE LOGIN
   ========================================= */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.login-box {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 4px solid #0055A5;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Ajuste do Login no Modo Escuro */
body.dark-mode .login-box {
    background: #333;
    border-color: #ff0000;
    color: white;
}

.login-logo {
    width: 120px;
    margin-bottom: 20px;
}

.login-box h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: 18px;
    margin-bottom: 20px;
    color: #0055A5;
}

body.dark-mode .login-box h2 {
    color: #ff0000;
}

.input-group {
    text-align: left;
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.login-btn {
    width: 100%;
    padding: 15px;
    background-color: #008cff;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}

.login-btn:hover {
    background-color: #0055A5;
    transform: scale(1.02);
}

body.dark-mode .login-btn {
    background-color: #ff0000;
}

.signup-text {
    margin-top: 20px;
    font-size: 14px;
}

.signup-text a {
    color: #0055A5;
    text-decoration: none;
    font-weight: bold;
}

body.dark-mode .signup-text a {
    color: #ff0000;
}
#logout-btn {
    color: #ffcc00 !important; /* Cor dourada para destacar o perfil */
    font-size: 14px !important;
}

body.dark-mode #logout-btn {
    color: #ff0000 !important; /* Vermelho no modo Shadow */
}
/* =========================================
   AJUSTES RESPONSIVOS (PARA TELAS PEQUENAS)
   ========================================= */

/* Aplica estas regras apenas se a tela tiver 600px de largura ou menos */
@media (max-width: 600px) {
    
    /* Diminui a fonte do nome do jogo dentro do card */
    .game-card p {
        font-size: 12px; /* Era 14px, diminuímos para 12px */
        padding: 8px 3px; /* Reduzimos o espaçamento interno para o texto caber melhor */
        line-height: 1.3; /* Ajuste na altura da linha para textos longos */
    }

    /* Opcional: Diminui um pouco o título da seção (ex: "Jogos Originais") */
    main h2 {
        font-size: 22px; /* Era 28px */
        margin-top: 30px; /* Reduz o espaço acima do título */
    }
}

.vote-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    padding: 10px;
}

.vote-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease;
    color: inherit; /* Segue a cor do texto do modo claro/escuro */
}

.vote-btn img {
    width: 45px; /* Ajuste o tamanho conforme suas imagens */
    height: auto;
    margin-bottom: 5px;
}

.vote-btn:hover {
    transform: scale(1.15);
}

.vote-btn span {
    font-weight: bold;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
}

/* =========================================
   ESTILO DA BARRA DE PESQUISA COM ÍCONE
   ========================================= */

/* O container precisa ser 'relative' para posicionar o ícone dentro dele */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 15px;
}

/* Estilo do Ícone de Lupa */
.search-icon {
    position: absolute;
    left: 12px;
    color: #888;
    pointer-events: none;
}

/* Ajustes no Input (Barra de Pesquisa) */
#search-bar {
    padding: 10px 10px 10px 35px; /* Espaço para a lupa */
    border-radius: 20px;
    border: none;
    width: 200px;
}

/* Efeito ao clicar (Focus) na barra de pesquisa */
#search-bar:focus {
    outline: none;
    border-color: #008cff; /* Borda azul do Sonic no focus */
    box-shadow: 0 0 8px rgba(0, 140, 255, 0.5); /* Brilho azul */
}

/* Mudar a cor da lupa quando a barra está em focus */
#search-bar:focus + .search-icon {
    color: #008cff;
}

/* Ajuste para o Modo Escuro */
body.dark-mode #search-bar {
    background-color: #333;
    border-color: #555;
    color: white;
}

body.dark-mode #search-bar:focus {
    border-color: #ff0000; /* Borda vermelha do Shadow no focus */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

body.dark-mode #search-bar:focus + .search-icon {
    color: #ff0000;
}

/* =========================================
   AJUSTE DA FRASE DE BOAS-VINDAS NOS JOGOS
   ========================================= */

/* Supondo que a frase esteja em um <p> ou <h2> dentro do main */
.game-container + p, 
main > p { 
    max-width: 1200px; /* Alinha com a largura do resto do site */
    margin: 20px auto; /* Centraliza e dá espaço vertical */
    padding: 0 20px;   /* Cria a "zona de segurança" nas laterais */
    text-align: center; /* Deixa o visual mais profissional */
    line-height: 1.5;
}

/* Se você criou uma classe específica para essa frase, use esta: */
.frase-classico {
    display: block;
    margin: 20px auto;
    padding: 0 20px;
    text-align: center;
}

/* Animação de Tremor (Shake) */
@keyframes shake-damage {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px) rotate(-5deg); }
    40% { transform: translateX(5px) rotate(5deg); }
    60% { transform: translateX(-5px) rotate(-5deg); }
    80% { transform: translateX(5px) rotate(5deg); }
    100% { transform: translateX(0); }
}

/* Classe que será aplicada via JS no momento do clique */
.shake-effect {
    animation: shake-damage 0.3s ease-in-out;
}

/* Opcional: Um brilho vermelho rápido no fundo do botão ao tremer */
.shake-effect img {
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 1)) !important;
}

/* Esconde a mensagem por padrão */
#no-results-msg {
    display: none; 
    text-align: center;
    font-size: 18px;
    color: #000000; /* Preto para chamar a atenção */
    font-weight: bold;
    margin: 40px auto;
    width: 100%;
}

/* Estilo da Etiqueta de Sistema */
.system-badge {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px 15px;
    margin: 15px auto;
    max-width: 800px; /* Alinhado com o emulador */
    border-radius: 4px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #333;
    display: block;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

/* Ajuste para o Modo Escuro */
body.dark-mode .system-badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: #eee;
}

/* Transição suave para o Header e seus itens */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.5s ease-in-out;
}

.site-logo {
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Impede o logo de esmagar */
}

.search-container {
    position: relative;
    transition: all 0.5s ease-in-out;
    margin: 0 20px;
    flex-grow: 0; /* Começa pequeno na direita */
    width: 200px;
}

/* Classe que o JS vai aplicar quando estiver pesquisando */
.searching-mode .search-container {
    flex-grow: 1; /* Faz a barra ocupar o espaço central */
    max-width: 500px; /* Limita o tamanho para não ficar gigante */
}

.searching-mode .site-logo {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

/* Animação para os títulos sumirem suavemente */
.hide-titles {
    opacity: 0;
    max-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

/* Container dos botões */
.auth-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-right: 15px;
}

/* Estilo Base - Formato Retangular com Pontas Arredondadas */
.btn-auth {
    text-decoration: none;
    padding: 8px 16px; /* Ajuste sutil: um pouco menos de largura que a pílula */
    border-radius: 6px; /* A MÁGICA AQUI: trocamos 50px por 6px */
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
    text-align: center;
}

/* Botão Entrar - Estilo "Outlined" (Vazado) para harmonia */
.btn-entrar {
    color: #0055A5;
    background-color: transparent;
    border: 2px solid #0055A5;
}

.btn-entrar:hover {
    background-color: rgba(0, 85, 165, 0.1);
    transform: translateY(-2px);
}

/* Botão Cadastrar - Estilo Sólido (Destaque) */
.btn-cadastrar {
    color: white;
    background-color: #0055A5;
    border: 2px solid #0055A5;
    box-shadow: 0 4px 10px rgba(0, 85, 165, 0.3);
}

.btn-cadastrar:hover {
    background-color: #004488;
    border-color: #004488;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 85, 165, 0.4);
}

/* Feedback de clique */
.btn-auth:active {
    transform: translateY(0);
}

/* MODO DE BUSCA: Esconde os botões para dar espaço à barra */
.searching-mode .auth-buttons {
    opacity: 0;
    pointer-events: none;
    width: 0;
    margin: 0;
    overflow: hidden;
}

/* Ícone de Perfil */
.profile-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Deixa redondo se a imagem for quadrada */
    border: 2px solid #0055A5;
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: white;
    display: block;
}

.profile-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 85, 165, 0.5);
}

/* Garante que o perfil também suma na pesquisa */
.searching-mode #profile-btn {
    display: none !important;
}

/* Página de Perfil */
.profile-container {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    padding: 20px;
}

.user-info {
    background: #f4f4f4;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border-bottom: 5px solid #0055A5;
}

.large-profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid #0055A5;
    margin-bottom: 20px;
}

.status-badge {
    background: #ffd700; /* Dourado */
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: bold;
    color: #000;
}

.btn-logout {
    margin-top: 20px;
    background: #ff4444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

/* Cards de Favoritos */
.fav-card {
    background: white;
    border: 2px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
}

.fav-card:hover { transform: scale(1.05); border-color: #0055A5; }

.btn-jogar {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: #0055A5;
    text-decoration: none;
    font-weight: bold;
}

#side-menu {
    height: 100%;
    width: 250px; /* Largura fixa */
    position: fixed;
    z-index: 2000;
    top: 0;
    right: -250px; /* Esconde ele TOTALMENTE para fora da tela à direita */
    background-color: #111;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transição mais suave */
    padding-top: 60px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    right: -250px; 
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   ANIMAÇÃO DE ENTRADA DOS LINKS DO MENU
   ========================================= */

/* 1. Estado Inicial (Menu Fechado) */
#side-menu a, 
#side-menu button {
    opacity: 0; /* Começa invisível */
    transform: translateX(30px); /* Começa empurrado 30px para a direita */
    transition: opacity 0.4s ease, transform 0.4s ease; /* Suavidade do movimento */
}

/* 2. Estado Final (Quando o Menu abre) */
#side-menu.open a, 
#side-menu.open button {
    opacity: 1; /* Fica visível */
    transform: translateX(0); /* Volta para a posição original */
}

/* 3. O Efeito Cascata (Atraso para cada item) */
/* O primeiro link aparece quase na hora */
#side-menu.open a:nth-child(1),
#side-menu.open button:nth-child(1) { transition-delay: 0.1s; }

/* O segundo link espera 0.2s */
#side-menu.open a:nth-child(2),
#side-menu.open button:nth-child(2) { transition-delay: 0.2s; }

/* O terceiro link espera 0.3s */
#side-menu.open a:nth-child(3),
#side-menu.open button:nth-child(3) { transition-delay: 0.3s; }

/* O quarto link espera 0.4s */
#side-menu.open a:nth-child(4),
#side-menu.open button:nth-child(4) { transition-delay: 0.4s; }

/* O quinto link espera 0.5s */
#side-menu.open a:nth-child(5),
#side-menu.open button:nth-child(5) { transition-delay: 0.5s; }

/* Adicione mais se tiver mais de 5 itens no seu menu! */
#side-menu.open a:nth-child(6),
#side-menu.open button:nth-child(6) { transition-delay: 0.6s; }

#side-menu.open {
    right: 0;
}

/* Quando esta classe for adicionada pelo JS, o menu entra na tela */
#side-menu.open {
    right: 0; /* Move ele para a borda visível */
}

/* A Cortina Escura */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Preto com 60% de transparência */
    z-index: 1500; /* Abaixo do menu (2000), mas acima do resto do site */
    display: none; /* Começa escondido */
    backdrop-filter: blur(3px); /* Efeito de desfoque no fundo (opcional) */
    transition: opacity 0.4s ease;
}

/* Quando o menu abrir, mostramos o overlay */
body.menu-open #overlay {
    display: block;
}

/* =========================================
   SISTEMA DE MODO ESCURO
   ========================================= */
function configurarModoEscuro() {
    const btnDark = document.getElementById('dark-mode-toggle');
    const body = document.body;

    // 1. Verifica se o usuário já tinha escolhido o modo escuro antes
    if (localStorage.getItem('dark-mode') === 'enabled') {
        body.classList.add('dark-theme');
    }

    if (btnDark) {
        btnDark.addEventListener('click', () => {
            // Alterna a classe dark-theme
            body.classList.toggle('dark-theme');
            btnDark.innerText = body.classList.contains('dark-theme') ? '☀️ Modo Claro' : '🌙 Modo Escuro';

            // 2. Salva a preferência
            if (body.classList.contains('dark-theme')) {
                localStorage.setItem('dark-mode', 'enabled');
            } else {
                localStorage.setItem('dark-mode', 'disabled');
            }
        });
    }
}

// Não esqueça de chamar essa função no seu window.addEventListener('load', ...)
window.addEventListener('load', () => {
    // ... suas outras funções (pesquisa, menu, etc) ...
    configurarModoEscuro(); 
});

    /* =========================================
   CONSERTANDO PÁGINA DE PERFIL (MODO ESCURO)
   ========================================= */

/* Fundo Principal do Perfil no Modo Escuro */
body.dark-theme.profile-page {
    background-color: #121212 !important;
}

/* O "Header" interno do Perfil (se tiver) */
body.dark-theme.profile-page header {
    background-color: #1a1a1a !important;
}

/* O CARD de Informações do Usuário (Onde estava ilegível) */
body.dark-theme.profile-page .user-info {
    background-color: #1e1e1e !important; /* Fundo escuro do card */
    color: #ffffff !important;           /* Texto branco */
    border: 1px solid #333 !important;   /* Borda sutil */
    border-bottom: 5px solid #0055A5 !important; /* Mantém a borda azul do Sonic */
}

/* Garante que títulos e parágrafos dentro do card fiquem brancos */
body.dark-theme.profile-page .user-info h1,
body.dark-theme.profile-page .user-info h2,
body.dark-theme.profile-page .user-info p,
body.dark-theme.profile-page .user-info strong {
    color: #ffffff !important;
}

/* A Tag "Super Sonic" (Se for dourada, vamos manter) */
body.dark-theme.profile-page .status-badge {
    background: #ffd700 !important; /* Mantém dourado */
    color: #000 !important;         /* Texto preto para contraste */
}

/* Ajuste nos Cards de Favoritos (Lista de Likes) */
body.dark-theme.profile-page .fav-card {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
}

body.dark-theme.profile-page .fav-card p {
    color: #ffffff !important;
}

body.dark-theme.profile-page .btn-jogar {
    color: #3399ff !important; /* Azul mais claro para destacar no fundo escuro */
}

/* =========================================
   BARRA DE ROLAGEM CUSTOMIZADA (ESTILO SONIC)
   ========================================= */

/* 1. Largura da barra */
::-webkit-scrollbar {
    width: 10px; /* Deixa a barra mais fina e elegante */
}

/* 2. Fundo da barra (Trilho) */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Trilho no Modo Escuro */
body.dark-theme ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

/* 3. A "Pega" da barra (O que você arrasta) */
::-webkit-scrollbar-thumb {
    background: #0055A5; /* Azul clássico do Sonic */
    border-radius: 5px;  /* Pontas arredondadas seguindo o novo padrão dos botões */
    border: 2px solid transparent; /* Cria um respiro interno */
    background-clip: content-box;
}

/* 4. Efeito ao passar o mouse ou clicar */
::-webkit-scrollbar-thumb:hover {
    background: #003366; /* Azul mais escuro (Shadow Sonic) */
}

/* Firefox (Navegador que usa um padrão diferente) */
* {
    scrollbar-width: thin;
    scrollbar-color: #0055A5 #f1f1f1;
}

body.dark-theme {
    scrollbar-color: #0055A5 #1a1a1a;
}

/* No modo claro, durante a páscoa */
body.easter-special:not(.dark-theme) {
    background-color: #fff5fd !important; /* Um rosa/branco bem suave */
}

body.easter-special:not(.dark-theme) header,
body.easter-special:not(.dark-theme) footer {
    background-color: #a0d8f1 !important; /* Azul "bebê" (Sonic Pastel) */
}

/* Adicione isso ao seu style.css */
.site-logo-container {
    position: relative;
    display: inline-block;
}

body.easter-special .site-logo-container::before {
    content: '🐰'; /* Emoji de coelho sobre o logo */
    position: absolute;
    top: -20px;
    left: 10px;
    font-size: 24px;
    transform: rotate(-10px);
}

/* Adicione isso ao seu style.css */
body.easter-special {
    cursor: url('https://img.icons8.com/color/32/easter-egg.png'), auto;
}

/* Faz os botões terem um cursor de "mãozinha" com um coelho */
body.easter-special a, 
body.easter-special button, 
body.easter-special .game-card {
    cursor: url('https://img.icons8.com/color/32/easter-bunny.png'), pointer;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

/* =========================================
   SISTEMA DE FILTROS (BOTÕES E ANIMAÇÃO)
   ========================================= */

.filter-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que os botões caiam para a linha de baixo em telemóveis */
    gap: 10px;
    margin-bottom: 30px;
}

.filter-btn {
    background-color: #f1f1f1;
    color: #333;
    border: none;
    padding: 8px 18px;
    border-radius: 6px; /* O formato retangular arredondado */
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-btn:hover {
    background-color: #ddd;
    transform: translateY(-2px);
}

/* Estado do botão quando está selecionado */
.filter-btn.active {
    background-color: #0055A5; /* Azul Sonic */
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 85, 165, 0.3);
}

/* Ajuste para o Modo Escuro */
body.dark-theme .filter-btn {
    background-color: #333;
    color: #ccc;
}

body.dark-theme .filter-btn:hover {
    background-color: #444;
}

body.dark-theme .filter-btn.active {
    background-color: #0055A5;
    color: #fff;
}

/* Classe essencial para esconder os jogos que não pertencem ao filtro */
.game-card.hide {
    display: none;
}

/* Aplicando a fonte aos botões do Menu e Filtros */
.btn-auth, 
.filter-btn, 
#side-menu a, 
#side-menu button {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px; /* Reduzi o tamanho porque essa fonte é grande por natureza */
    line-height: 1.5;
    text-transform: uppercase;
}

/* Pequeno ajuste extra: como a fonte é pixelada, 
   podemos remover o negrito se ficar muito "borrado" */
.filter-btn, .btn-auth {
    font-weight: normal; 
    letter-spacing: 0px; /* Reset para não separar demais as letras */
}

/* =========================================
   TIPOGRAFIA RETRÔ: PERFIL E COMENTÁRIOS
   ========================================= */

/* Títulos da Página de Perfil e o <h3> de Comentários */
.profile-section h1,
.profile-section h2,
.comments-section h3,
#comentarios h3 {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px; /* Um pouco menor já que é um h3 */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    color: #0055A5; /* Azul Sonic clássico */
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); /* Sombra estilo 16-bits */
    line-height: 1.5;
}

/* Ajuste das cores para o Modo Escuro */
body.dark-theme .profile-section h1,
body.dark-theme .profile-section h2,
body.dark-theme .comments-section h3,
body.dark-theme #comentarios h3 {
    color: #FFD700; /* Amarelo/Dourado (Anéis do Sonic) no escuro */
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
}

/* =========================================
   CAIXA DE DIÁLOGO ESTILO RPG (COMENTÁRIOS)
   ========================================= */

/* O container onde a pessoa digita */
.comments-section textarea, 
#comentarios textarea {
    width: 100%;
    min-height: 120px;
    background-color: #ffffff; /* Fundo branco no modo claro */
    border: 4px solid #000000;  /* Borda grossa estilo pixel art */
    padding: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Texto legível para digitar */
    font-size: 16px;
    color: #333;
    outline: none;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1); /* Sombra sólida "pixelada" */
    resize: vertical; /* Permite aumentar a caixa apenas para baixo */
}

/* O Botão de Enviar Comentário */
.comments-section button[type="submit"],
#comentarios button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #0055A5; /* Azul Sonic */
    color: #fff;
    border: 3px solid #000;
    font-family: 'Press Start 2P', cursive; /* Fonte retrô no botão */
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comments-section button[type="submit"]:hover,
#comentarios button:hover {
    background-color: #FFD700; /* Muda para Amarelo ao passar o mouse */
    color: #000;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px #000;
}

/* --- VERSÃO MODO ESCURO (DIÁLOGO NOTURNO) --- */
body.dark-theme .comments-section textarea,
body.dark-theme #comentarios textarea {
    background-color: #1a1a1a;
    color: #eee;
    border-color: #0055A5; /* Borda Azul no escuro para brilhar */
    box-shadow: 4px 4px 0px rgba(0, 85, 165, 0.3);
}

body.dark-theme .comments-section button[type="submit"],
body.dark-theme #comentarios button {
    border-color: #eee;
}

/* =========================================
   CORES DO MODO ESCURO
   ========================================= */

/* Fundo da tela e cor do texto principal */
body.dark-theme {
    background-color: #121212; /* Um cinza bem escuro, quase preto */
    color: #f1f1f1; /* Texto claro */
}

/* Deixa o Header escuro para combinar (se quiser) */
body.dark-theme header {
    background-color: #000000;
    border-bottom: 1px solid #333; /* Uma linhazinha sutil para separar */
}

/* Exemplo: Se os cards dos jogos tiverem um fundo, você pode escurecer eles também */
body.dark-theme .game-card {
    background-color: #1e1e1e;
    color: #ffffff;
}

/* Opcional: Escurecer o fundo central onde o emulador roda */
body.dark-theme main, 
body.dark-theme .game-container {
    background-color: #1a1a1a;
}