/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    margin: 0;
    padding: 0;
}

/* HEADER */
header {
    position: fixed; /* Fixa o header na tela */
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; /* Começa transparente */
    transition: background-color 0.3s ease-in-out;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000; /* Mantém o header acima de outros elementos */
}

header.scrolled {
    background-color: black; /* Fica preto ao rolar */
}

/* LOGO */
header .logo {
    display: flex;
    align-items: center;
}

header .logo img {
    height: 80px;
}

header .logo .logo-title {
    padding-left: 15px;
}

header .logo .logo-title h1 {
    font-size: 24px;
}

header .logo .logo-title h2 {
    font-size: 16px;
    font-weight: 300;
}

/* NAVBAR */
nav {
    display: flex;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s;
}

nav ul li a:hover {
    color: #ff003c;
}

/* MENU RESPONSIVO */
.menu-toggle {
    display: none; /* Escondido no desktop */
    background: none;
    border: none;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
}

@media (max-width: 768px) {
    nav {
        display: none; /* Esconde o menu no mobile */
        flex-direction: column;
        background: rgba(0, 0, 0, 0.9);
        position: absolute;
        top: 80px;
        right: 0;
        width: 100%;
        text-align: center;
        padding: 20px 0;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    nav.active {
        display: flex; /* Mostra quando a classe "active" for adicionada */
    }

    .menu-toggle {
        display: block; /* Mostra o botão no mobile */
    }
}

/* HERO */
.hero {
    position: relative;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.hero h1 {
    font-size: 3rem;
    text-shadow: 0px 0px 10px #ff003c;
}

.hero p {
    font-size: 1.5rem;
    color: #fff;
}

@media (max-width: 768px) {
    .hero {
        height: 50vh; /* Reduz a altura da seção no mobile */
    }

    .hero video {
        height: 50vh; /* Ajusta a altura do vídeo */
    }

    .hero h1 {
        font-size: 2rem; /* Reduz o tamanho do título */
    }

    .hero p {
        font-size: 1.2rem; /* Reduz o tamanho do parágrafo */
    }
}


/* BOTÃO */
.btn {
    background-color: #ff003c;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

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

/* SEÇÕES GERAIS */
section {
    padding: 40px;
    text-align: center;
}

/* FOOTER */
footer {
    background: #111;
    color: #fff;
    text-align: center;
    padding: 10px;
}

/* JOGOS */

.games {
    /* Posição relativa para ancorar os botões */
    position: relative;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden; /* Garante que nada vaze nas laterais */
}

.game-carousel-wrapper {
    position: relative;
    width: 90%; /* Define a largura da "janela" do carrossel */
    margin: 0 auto; /* Centraliza a janela */
}

.game-carousel {
    display: flex;
    overflow-x: auto; /* Permite a rolagem horizontal */
    scroll-behavior: smooth; /* Animação de rolagem suave */
    
    /* Mágica do Centramento: */
    /* Define que o container deve ter 'snap points' */
    scroll-snap-type: x mandatory; 

    /* Esconde a barra de rolagem (opcional, mas mais bonito) */
    -ms-overflow-style: none;  /* IE e Edge */
    scrollbar-width: none;  /* Firefox */
}

.game-carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari e Opera */
}

.games h2 {
    display: flex;
    justify-content: center;
    font-size: 3rem;
}

.game-list {
    display: flex;
    flex-wrap: nowrap; /* Impede que os itens quebrem a linha */
    /* justify-content: center; */ /* REMOVA ou comente isso */
    /* flex-wrap: wrap; */ /* REMOVA ou comente isso */
}

.game-list a {
    display: block; /* Faz com que o link ocupe todo o espaço do card */
    text-decoration: none; /* Remove o sublinhado do link */
}


.game-card {
    background: #000;
    border-radius: 10px;
    width: 800px;
    margin: 0px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.3s;
    width: 560px; /* Mantém sua largura */
    flex-shrink: 0; /* Impede que o card encolha */
    /* Mágica do Centramento: */
    /* Define que cada card deve alinhar ao centro do 'snap point' */
    scroll-snap-align: center;
}

/* Adicione um efeito de hover para o card */
.game-card:hover {
    transform: scale(1.05); /* Aumenta levemente o tamanho do card ao passar o mouse */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Aumenta a sombra */
}


.game-card img {
    width: 100%;
    border-radius: 10px;
}

.game-card h3 {
    margin-top: 10px;
    font-size: 1.5rem;
    color: #00eaff;
}

.game-card p {
    font-size: 1rem;
    color: #bbb;
}

.game-card .btn {
    margin-top: 10px;
}

/* Estilo para os botões de rolagem */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.scroll-btn:hover {
    background-color: rgba(255, 0, 60, 0.8); /* Cor do seu site */
}

.scroll-btn.prev {
    left: 10px; /* Ajuste a posição se necessário */
}

.scroll-btn.next {
    right: 10px; /* Ajuste a posição se necessário */
}

@media (max-width: 768px) {
    .game-carousel-wrapper {
        width: 100%; /* Ocupa a largura total em telas pequenas */
    }
    
    .game-card {
        /* Sua regra original para mobile estava 1058px, 
          o que parece muito largo. 
          Sugiro usar uma % ou um valor menor.
        */
        width: 90%; /* Faz o card ocupar 90% da tela */
    }

    .scroll-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* SOBRE O TIME */
.about {
    padding: 40px;
    background: #222;
    color: #fff;
    text-align: center;
}

.about h2 {
    font-size: 2.5rem;
    color: #ff003c; /* Cor de destaque para o título */
}

.about p {
    font-size: 1.2rem;
    color: #bbb;
    margin-bottom: 30px;
}

.team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.team-member {
    background: #333;
    border-radius: 10px;
    padding: 20px;
    width: 280px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;  /* Garante que o conteúdo seja empilhado verticalmente */
    justify-content: space-between;  /* Garante que o conteúdo ocupe o espaço disponível */
    align-items: center; /* Adiciona para centralizar os itens no eixo horizontal */
}

.team-member:hover {
    transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Faz a imagem ser circular */
    margin-bottom: 15px;
    object-fit: cover; /* Garante que a imagem ocupe bem o espaço da imagem circular */
}

.team-member h3 {
    font-size: 1.5rem;
    color: #00eaff; /* Cor de destaque para o nome */
    margin: 10px 0;
}

.team-member p {
    font-size: 1rem;
    color: #bbb;
    margin-bottom: 20px;
    flex-grow: 1;  /* Permite que o texto ocupe o espaço disponível */
}

.team-member .btn {
    background-color: #ff003c;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: auto; /* Garante que o botão fique no final do card */
}

.team-member .btn:hover {
    background-color: #00eaff; /* Cor de hover */
}
/* CONTATO */
.contact {
    padding: 40px;
    background: #222;
    color: #fff;
    text-align: center;
}

.contact h2 {
    font-size: 2rem;
    color: #ff003c;
}

.contact ul {
    list-style: none;
    padding: 0;
}

.contact ul li {
    margin: 10px 0;
}

.contact a {
    color: #00eaff;
    text-decoration: none;
}