img, video, svg {
    max-width: 100%;
    height: auto;
    display: block; /* Remove espaços brancos estranhos abaixo de imagens */
    overflow-x: hidden; /* Impede que o site "dance" para os lados */
    width: 100%;
}

@font-face {
    font-family: 'Strays'; /* Dê um nome único e seu */
    /* Garanta que o caminho (URL) e o nome do arquivo estão EXATOS */
    src: url('fonts/blasteri.eot') format('eot'),
         url('fonts/blasteri.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Mantém a performance alta */
}


/* 1. Tela de fundo do Preloader (Fundo Preto) */
#preloader {
    position: fixed; /* Fixa o preloader na tela */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    z-index: 99999; /* Garante que fique acima de todo o conteúdo */
    display: flex; /* Para centralizar a GIF */
    justify-content: center;
    align-items: center;
    /* MUDANÇA AQUI: Transiciona a opacidade E o transform. */
    transition: opacity 0.5s ease-in, transform 0.5s ease-in; 
}

#preloader.slide-out {
    
    /* Move o preloader para baixo, para fora da tela */
    transform: translateY(100vh); 
}

/* 2. Estilo da GIF */
.preloader-gif {
    max-width: 1500px;  /* Largura máxima da sua GIF */
    height: auto;      /* Mantém a proporção */
    /* Você pode adicionar mais estilos aqui, como border-radius se quiser cantos arredondados */
}


/* Premium E-sports Website Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.discord-btn {
    position: fixed;
    bottom: 20px;   /* Distância da parte inferior */
    right: 20px;    /* Distância da lateral direita */
    z-index: 9999;  /* Fica acima de tudo */

    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.2rem;
    background: #5865F2; /* Cor oficial do Discord */
    color: #fff;
    font: 600 1rem/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(88,101,242,.35);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }

  .discord-btn .icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
  }

  .discord-btn:hover {
    background: #4752C4; /* Cor mais escura no hover */
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(88,101,242,.45);
  }

  .discord-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(88,101,242,.35);
  }

  .discord-btn:focus-visible {
    outline: 3px solid #c7ceff;
    outline-offset: 3px;
  }

:root {
    --primary-gold: #FFD700;
    --secondary-gold: #FFC107;
    --dark-gold: #FF8F00;
    --black: #000000;
    --dark-gray: #111111;
    --medium-gray: #333333;
    --light-gray: #666666;
    --white: #ffffff;
    --strays-font: 'Strays';

    --static-gold: #222222;
    --hover-bg-dark: #9C7E30; /* Fundo mais escuro que a linha */
    --hover-line-light: #FFD700; /* Linha mais clara */
    --card-bg-light: #000000;
    --text-dark: #ffffff;
    --text-light: white;

    /* VARIAVEIS GERAIS (Modo Noturno - PADRÃO) */
    --background-color: #111111;         /* Fundo da página (Preto puro) */
    --section-background: #000000;       /* Fundo de seções/áreas (Cinza escuro) */
    --text-color: #ffffff;               /* Cor do texto principal (Branco) */
    --text-secondary: #cccccc;           /* Cor do texto secundário/cinza (Cinza claro) */
    --card-background: rgba(0, 0, 0, 0.8); /* Fundo dos cards (Preto transparente) */
    --border-color: rgba(255, 215, 0, 0.2); /* Borda dos cards (Dourado sutil) */
    --overlay-color: rgba(0, 0, 0, 0.95); /* Cor da overlay/header (Preto quase opaco) */
    
    /* Scrollbar */
    --scrollbar-track: #111111;
    --scrollbar-thumb-start: var(--primary-gold);
    --scrollbar-thumb-end: var(--secondary-gold);   
}


.light-mode {
    --background-color: #f0f2f5;       /* Um cinza bem clarinho é melhor que branco puro para os olhos */
    --section-background: #ffffff;     /* O branco fica nos cards/seções */
    --primary-gold: #b8860b;           
    --secondary-gold: #daa520;
    --text-color: #111111;               /* Preto Forte */
    --text-secondary: #444444;           /* Cinza Escuro (MUITO MELHOR para ler em fundo claro) */
    --card-background: rgba(255, 255, 255, 0.95); /* Fundo dos cards (Branco quase opaco) */
    --border-color: rgba(0, 0, 0, 0.1);  /* Borda dos cards (Preto sutil) */
    --overlay-color: #ffffff; /* Overlay/Header clara */
    --static-gold: #b8b5af;
    --hover-bg-dark: #9C7E30; /* Fundo mais escuro que a linha */
    --hover-line-light: #FFD700; /* Linha mais clara */
    --card-bg-light: #f5f5f5;
    --text-dark: #333;
    --text-light: white;

    /* Scrollbar Invertida para Contraste */
    --scrollbar-track: #e0e0e0;
    --scrollbar-thumb-start: #444444;
    --scrollbar-thumb-end: #777777;
}

/* --- ESTILO PARA O BOTÃO DE ÍCONE DE TEMA (SEM CAIXA) --- */
.theme-icon-button {
    /* Remove todo o estilo visual de botão */
    background: none;
    border: none;
    padding: 0 15px; /* Um pequeno padding para facilitar o clique */
    cursor: pointer;
    
    /* Configura a cor do ícone com base no tema */
    color: var(--primary-gold); /* Ícone Dourado no Modo Noturno */
    
    /* Garante que o ícone esteja no centro do clique */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Transição para suavizar a mudança de cor */
    transition: color 0.3s ease;
}

/* Efeito de hover no Modo Noturno */
.theme-icon-button:hover {
    color: var(--secondary-gold);
    transform: scale(1.1);
}

/* Configuração de cor para o Modo Diurno (Light Mode) */
.light-mode .theme-icon-button {
    color: var(--primary-gold); /* Ícone Cinza Escuro no Modo Diurno */
}

/* Efeito de hover no Modo Diurno */
.light-mode .theme-icon-button:hover {
    color: var(--secondary-gold); /* Fica Preto no hover */
}

/* Certifica-se de que o ícone SVG usa a cor definida acima */
.theme-icon-button .theme-icon {
    stroke: currentColor; 
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color); /* Usa a nova variável */
    color: var(--text-color); /* Usa a nova variável */
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-player {
    /* Em telas de celular (padrão), apenas 1 item por linha: */
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1900px;
    /* MUDE ISTO: */
    margin: 0 auto;    /* Centraliza sem forçar 100px */
    padding: 50px 20px; /* Padding interno resolve o respiro */
    gap: 30px;
    justify-items: center;
}

/* Em telas maiores que 768px (tablets e desktop), ativamos 2 itens por linha: */
@media (min-width: 768px) {
    .container-player {
        grid-template-columns: repeat(2, 1fr); 
    }
}
/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--dark-gray);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, var(--secondary-gold), var(--dark-gold));
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

/* Selection Styles */
::selection {
    background: rgba(255, 215, 0, 0.3);
    color: var(--primary-gold);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* Utility Classes */
.fade-in {
    animation: fadeIn 0.8s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.8s ease-out;
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow: 0 0 7px rgba(255, 215, 0, 0.6), 0 0 15px rgba(255, 215, 0, 0.2);
    }
}

@keyframes text-glow-pulse {
    from {
        text-shadow: 
            0 0 0px currentColor,
            0 0 1px currentColor,
            0 0 2px currentColor;
    }
    to {
        text-shadow: 
            0 0 1px currentColor,
            0 0 3px currentColor;
    }
}

@keyframes tech-drift {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

 /* Animações customizadas */
@keyframes pulse-fast {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Visual Effects */
.animate-pulse-fast {
            animation: pulse-fast 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

.glow-gold {
    animation: pulse-glow 2s ease-in-out infinite;
}

.text-glow {
    text-shadow: 
        0 0 2px rgba(255, 215, 0, 0.5), 
        0 0 5px rgba(255, 215, 0, 0.3);

    animation: text-glow-pulse 2s ease-in-out infinite alternate;
}

.glass-effect {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.gradient-premium {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 1) 0%,
        rgba(20, 20, 20, 1) 25%,
        rgba(0, 0, 0, 1) 50%,
        rgba(15, 15, 15, 1) 75%,
        rgba(0, 0, 0, 1) 100%
    );
}

.gradient-premium-store {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 1) 0%,
        rgb(184, 143, 10) 25%,
        rgba(0, 0, 0, 1) 50%,
        rgb(201, 160, 73) 75%,
        rgba(0, 0, 0, 1) 100%
    );
}

.tech-pattern {
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(255, 215, 0, 0.1) 1px, transparent 0);
    background-size: 20px 20px;
    animation: tech-drift 20s linear infinite;
}

.mouse-reactive {
    transition: all 0.2s ease;
}

.mouse-reactive:hover {
    transform: translateZ(0) scale(1.02);
    filter: brightness(1.1);
}

/* Card Effects */
.card-premium {
    background: var(--card-background);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.card-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.card-premium:hover {
    transform: translateY(-8px) rotateX(5deg);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

.card-premium:hover::before {
    opacity: 1;
}

/* Button Styles */
.btn-premium {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
    border: none;
    color: var(--black);
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-premium::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 0.6s ease;
}

.btn-premium:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    background: linear-gradient(45deg, var(--secondary-gold), var(--dark-gold));
}

.btn-premium:hover::before {
    left: 100%;
}

.btn-secondary {
    border: 2px solid var(--primary-gold);
    background: transparent;
    color: var(--primary-gold);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-secondary:hover {
    background: var(--primary-gold);
    color: var(--black);
    transform: scale(1.05);
}

/* Image Effects */
.image-container {
    position: relative;
    overflow: hidden;
}

.image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 215, 0, 0.3), 
        transparent
    );
    transition: left 0.6s ease;
}

.image-container:hover::after {
    left: 100%;
}

.image-container img {
    transition: transform 0.4s ease, filter 0.4s ease;
}

.image-container:hover img {
    transform: scale(1.1);
    filter: brightness(1.1) contrast(1.1);
}

/* Navigation Links */
.nav-link {
    position: relative;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-gold), var(--secondary-gold));
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.nav-link:hover {
    color: var(--primary-gold);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.nav-link:hover::after {
    width: 100%;
}

/* Tooltip Styles */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    position: absolute;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    width: 120px;
    background: rgba(0, 0, 0, 0.9);
    color: var(--primary-gold);
    text-align: center;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(255, 215, 0, 0.3) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
    visibility: visible;
    transform: translateY(-5px);
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.5s ease;
    padding: 15px 0;
}

#headerLogo {
  height: 60px; /* Define uma altura fixa para a imagem */
  width: auto; /* O "width: auto" faz com que a largura se ajuste automaticamente, mantendo a proporção */
}

.header.scrolled {
    background: var(--overlay-color); /* Mudei de rgba(0, 0, 0, 0.95) para a variável */
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color); /* Mudei para a variável de borda */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.logo {
    width: 48px;
    height: 48px;
    background: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    color: var(--black);
    transition: all 0.3s ease;
}

.logo:hover {
    transform: scale(1.1);
}

.brand-name {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-gold);
    margin: 0;
    font-family: var(--strays-font);
}

.brand-slogan {
    font-size: 12px;
    color: var(--secondary-gold);
    margin: 0;
}

.desktop-nav {
    display: flex;
    gap: 32px;
    margin-left: 0;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--primary-gold);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
    transform: scale(1.1);
    color: var(--secondary-gold);
}

.mobile-nav {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 0 0 15px 15px;
}

.mobile-nav.active {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.mobile-nav-link:hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--primary-gold);
}

/* Classe utilitária para garantir que a transição afete a opacidade */
        .slide-image {
            opacity: 0;
            transition-property: opacity;
            /* A duração da transição é definida via JS, mas tem um padrão aqui */
            transition-timing-function: ease-in-out;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
            object-position: top center; /* Salva as cabeças */
            z-index: 0;
        }

        /* Classe para o slide ativo (visível) */
        .slide-image.active {
            opacity: 1;
            z-index: 10;
        }
        
        /* Overlay sutil para garantir que texto (se houver) fique legível sobre as fotos */
        .overlay-gradient {
            background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
        }

/* Hero Section */
.hero-section {
    min-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Configura a tag de vídeo como plano de fundo */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o vídeo preencha o espaço sem distorcer */
    z-index: -2; /* Coloca o vídeo bem no fundo, atrás de tudo */
}

/* Cria uma sobreposição de cor por cima do vídeo */
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
    z-index: -1; /* Coloca a sobreposição em cima do vídeo, mas atrás do conteúdo */
}


.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
                url("/media/Strays\ bg.mp4");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.particle {
    position: absolute;
    background: var(--primary-gold);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.particle-1 {
    width: 8px;
    height: 8px;
    top: 25%;
    left: 25%;
    animation-delay: 0s;
}

.particle-2 {
    width: 4px;
    height: 4px;
    top: 75%;
    right: 25%;
    animation-delay: 2s;
}

.particle-3 {
    width: 6px;
    height: 6px;
    bottom: 25%;
    left: 33%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1;
    }
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.main-logo {
    width: 128px;
    height: 128px;
    background: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 64px;
    color: var(--black);
    margin: 0 auto 24px;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
}

.hero-title {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    background: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    letter-spacing: 0.1em;
    font-family: var(--strays-font);
}

.hero-slogan {
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--secondary-gold);
    font-weight: bold;
    margin-bottom: 48px;
    letter-spacing: 0.05em;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.stat-item {
    text-align: center;
}

.stat-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-gold);
    font-size: 32px;
    transition: all 0.3s ease;
}

.stat-icon:hover {
    background: rgba(255, 215, 0, 0.3);
    transform: scale(1.1);
}

.stat-number {
    font-size: 48px;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.stat-item:hover .stat-number {
    color: var(--primary-gold);
}

.stat-label {
    color: var(--primary-gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-wheel {
    width: 24px;
    height: 40px;
    border: 2px solid var(--primary-gold);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
}

.scroll-wheel::before {
    content: '';
    width: 4px;
    height: 12px;
    background: var(--primary-gold);
    border-radius: 2px;
    margin-top: 8px;
    animation: scroll-wheel 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes scroll-wheel {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    background: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.section-subtitle {
    color: var(--text-secondary); /* Antes era #ccc */
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.section-subtitle-campeonato {
    color: var(--text-secondary); /* Antes era #ccc */
    font-size: 18px;
}
.section-subtitle-politica {
    color: var(--text-secondary); /* Antes era #ccc */
    font-size: 18px;
    max-width: 900px;
}

/* Team Section */
.team-section {
    padding: 80px 0;
    background: var(--section-background); /* Antes era var(--black) */
}

.players-grid {
    /* Remove grid properties */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 32px;
    padding-bottom: 20px;
}

.player-card {
    /* Use flex properties to control the size */
    flex: 0 0 auto; 
    scroll-snap-align: start; 
    width: 260px; /* Or whatever fixed width you prefer */
}

.player-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 215, 0, 0.3),
        0 0 20px rgba(255, 215, 0, 0.2);
}

.player-image {
    position: relative;
    height: 256px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.player-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.role-duelist {
    background: linear-gradient(45deg, #ef4444, #dc2626);
}

.role-controller {
    background: linear-gradient(45deg, #8b5cf6, #7c3aed);
}

.role-sentinel {
    background: linear-gradient(45deg, #3b82f6, #2563eb);
}

.role-initiator {
    background: linear-gradient(45deg, #10b981, #059669);
}

.player-info {
    padding: 24px;
}

.player-name {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-gold);
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.player-card:hover .player-name {
    color: var(--secondary-gold);
}

.player-role {
    color: var(--secondary-gold);
    font-weight: 600;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.player-card:hover .player-role {
    color: var(--dark-gold);
}

.player-details {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

.player-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.stat {
    text-align: center;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: var(--white);
    transition: all 0.3s ease;
}

.player-card:hover .stat-value {
    color: var(--secondary-gold);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kd-ratio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid #444;
    margin-bottom: 16px;
}

.kd-ratio span:first-child {
    color: var(--text-secondary);
    font-size: 14px;
}

.kd-value {
    color: var(--primary-gold);
    font-weight: bold;
    transition: all 0.3s ease;
}

.player-card:hover .kd-value {
    color: var(--secondary-gold);
}

.performance-bar {
    margin-top: 16px;
}

.performance-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #444;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 4px;
    transition: all 1s ease;
    position: relative;
}

.player-card:hover .progress-fill {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.team-summary {
    padding: 32px;
    border-radius: 16px;
    text-align: center;
}

/* --- Novos estilos para os contadores animados --- */
.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.summary-stat {
    text-align: center;
}

.summary-value {
    font-size: 48px;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.summary-stat:hover .summary-value {
    color: var(--primary-gold);
    transform: scale(1.1);
}

.summary-label {
    color: var(--primary-gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.summary-title {
    font-size: 36px;
    font-weight: bold;
    color: var(--primary-gold);
    margin-bottom: 24px;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.summary-stat {
    text-align: center;
}

.summary-value {
    font-size: 48px;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 8px;
}

.summary-label {
    color: var(--primary-gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
/*Loja section */

#Loja {
    position: relative; /* Isso cria a "âncora". Tudo que for absolute dentro da Loja, fica na Loja. */
    overflow: hidden;   /* Garante que nada vaze para os lados */
}

/* Correção para o menu fixo não tapar o título do Campeonato */
#campeonato {
    padding-top: 80px; /* Empurra o conteúdo para baixo (Altura do Menu + Respiro) */
}

/* Correção de espaçamento para a página de Política de Privacidade */
#politica {
    padding-top: 80px; /* Empurra o conteúdo para baixo. 120px é suficiente para limpar o header */
    min-height: 100vh;  /* Garante que a página ocupe pelo menos a altura da tela inteira */
}

/* Ajuste opcional para Mobile, caso o header fique menor */
@media (max-width: 768px) {
    #politica {
        padding-top: 100px;
    }
}

.section-title-loja {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    background: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    text-align: center;
    font-family: var(--strays-font);
}

.section-title-campeonato {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    background: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    text-align: center;

}

/* Container do Banner (Estica ponta a ponta) */
.store-cta {
    /* --- LÓGICA DE LARGURA TOTAL --- */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    left: 0;
    
    /* Remove bordas laterais e arredondamento para encostar na tela */
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    
    text-align: center;
    overflow: hidden; /* Garante que nada vaze */
    
    /* Altura fixa para o container (Ajuste aqui se quiser mais alto ou baixo) */
    height: 400px; 
}

.player-profile-banner {
            /* Altura um pouco reduzida */
            width: 100%;
            margin: 0;
            /* MUDANÇA 1: Altura reduzida para ver os cards embaixo */
    height: 65vh;        /* Ocupa 55% da altura da tela (era 85vh) */
    min-height: 400px;   /* Garante que não fique pequeno demais */
    max-height: 600px;   /* Trava num máximo para telas gigantes */
            background-color: var(--card-bg-light); /* Fundo Amarelo Queimado/Dourado Escuro */
            
            overflow: hidden; 
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); 
            position: relative;
            cursor: pointer; 
            color: var(--text-dark); 
            
            z-index: 0;

            transition: background-color 0.5s ease-in-out,
                        color 0.5s ease-in-out,
                        box-shadow 0.5s ease-in-out;
    
}

.loja-banner-title {
    position: absolute;
    top: 4%;           /* Centraliza verticalmente */
    left: 50%;          /* Centraliza horizontalmente */
    transform: translate(-50%, -50%); /* O pulo do gato para centralizar exato */
    z-index: 10;
    width: 100%;        /* Garante que o texto tenha espaço */
    text-align: center; /* Centraliza o texto */
    
    /* Estilização da Fonte */
    font-family: 'Strays', sans-serif; /* Sua fonte personalizada */
    font-size: 5rem; /* Tamanho grande */
    color: var(--primary-gold); /* Cor Dourada */
    text-transform: uppercase; /* Força letra maiúscula */
    margin: 0;
    line-height: 1;
    pointer-events: none; /* O clique passa através do texto (opcional) */
    
    /* Efeito de sombra para leitura (caso a imagem seja clara) */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.loja-banner-subtitle {
    position: absolute;
    top: 10%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;

    /* Estilização da Fonte */
    font-family:  sans-serif; /* Sua fonte personalizada */
    font-size: 1rem; /* Tamanho grande */
    color: var(--primary-gold); /* Cor Dourada */
    text-transform: uppercase; /* Força letra maiúscula */
    margin: 0;
    line-height: 1;
    pointer-events: none; /* O clique passa através do texto (opcional) */
    
    /* Efeito de sombra para leitura (caso a imagem seja clara) */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.line-banner-title {
    position: absolute;
    /* MUDANÇA 2: Usamos BOTTOM em vez de TOP */
    top: auto;          /* Anula o top antigo */
    bottom: 60px;       /* Cola no fundo do banner */
    left: 60px;
    z-index: 10; /* Fica acima da imagem e das linhas de fundo */
    
    /* Estilização da Fonte */
    font-family: 'Strays', sans-serif; /* Sua fonte personalizada */
    font-size: 5rem; /* Tamanho grande */
    color: var(--primary-gold); /* Cor Dourada */
    text-transform: uppercase; /* Força letra maiúscula */
    margin: 0;
    line-height: 1;
    pointer-events: none; /* O clique passa através do texto (opcional) */
    
    /* Efeito de sombra para leitura (caso a imagem seja clara) */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.line-banner-subtitle {
    position: absolute;
    /* MUDANÇA 3: Posiciona logo abaixo do título */
    top: auto;
    bottom: 30px; 
    left: 60px;
    z-index: 10; /* Fica acima da imagem e das linhas de fundo */
    
    /* Estilização da Fonte */
    font-family:  sans-serif; /* Sua fonte personalizada */
    font-size: 1rem; /* Tamanho grande */
    color: var(--primary-gold); /* Cor Dourada */
    text-transform: uppercase; /* Força letra maiúscula */
    margin: 0;
    line-height: 1;
    pointer-events: none; /* O clique passa através do texto (opcional) */
    
    /* Efeito de sombra para leitura (caso a imagem seja clara) */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Ajuste para celular (Mobile) */
@media (max-width: 768px) {
    .line-banner-title {
        font-size: 3rem;
        top: 20px;
        left: 30px;
    }
}

/* Configuração da imagem para cortar sem esticar */
.player-profile-banner img {
    width: 100%;
    height: 100%;        /* Força a imagem a ter a altura da caixa (350px) */
    object-fit: cover;   /* CORTA o excesso da imagem para preencher tudo sem distorcer */
    object-position: center center; /* Foca no terço superior da imagem (onde geralmente estão os rostos) */
    display: block;
}

/* SIMULAÇÃO DAS LINHAS CRUZADAS FIXAS E GROSSAS (USANDO ::before) */
        .player-profile-banner::before {
            content: '';
            position: absolute;
            top: -200px; /* Mais para cima */
            right: -300px; /* Mais para a direita */
            width: 2500px; /* Aumentado para 1000px para garantir cobertura */
            height: 900px; /* Aumentado para 1000px para garantir cobertura */
            z-index: -1; 
            pointer-events: none; /* Ignora eventos do mouse para não interferir no hover */

            /* Cria as QUATRO linhas grossas cruzadas, não repetitivas */
            background-image:
                /* Linha 1: 45 graus */
                linear-gradient(45deg,
                    transparent 0%, transparent 48%,
                    var(--hover-line-light) 48%, var(--hover-line-light) 52%, 
                    transparent 52%, transparent 100%
                ),
                /* Linha 2: -45 graus */
                linear-gradient(-45deg,
                    transparent 0%, transparent 48%,
                    var(--hover-line-light) 48%, var(--hover-line-light) 52%, 
                    transparent 52%, transparent 100%
                ),
                /* Linha 3: 30 graus (Ponto de encontro movido) */
                linear-gradient(30deg,
                    transparent 0%, transparent 35%, 
                    var(--hover-line-light) 35%, var(--hover-line-light) 39%, 
                    transparent 39%, transparent 100%
                ),
                /* Linha 4: -30 graus (Ponto de encontro movido) */
                linear-gradient(-30deg,
                    transparent 0%, transparent 42%, 
                    var(--hover-line-light) 42%, var(--hover-line-light) 46%, 
                    transparent 46%, transparent 100%
                );
            background-size: 100% 100%; /* Ocupa todo o elemento, impedindo repetição */
            background-repeat: no-repeat;
            
            /* Transição para o efeito de hover */
            transition: transform 0.6s ease-out, background-image 0.5s ease-in-out; 
            transform: scale(1);
        }

.player-profile {
            width: 100%;          /* Ocupa o espaço que tiver disponível */
            max-width: 650px;     /* Mas não passa de 650px em telas grandes */
            height: auto;         /* Altura automática para o texto não vazar */
            min-height: 400px;    /* Altura mínima se quiser manter o padrão */
            margin: 0 auto 30px;  /* Centraliza e dá espaço embaixo */
            background-color: var(--card-bg-light); 
            border-radius: 20px; /* Bordas mais arredondadas */
            overflow: hidden; 
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); 
            position: relative;
            cursor: pointer; 
            color: var(--text-dark); 

            transition: background-color 0.5s ease-in-out,
                        color 0.5s ease-in-out,
                        box-shadow 0.5s ease-in-out;
        }

/* SIMULAÇÃO DAS LINHAS CRUZADAS FIXAS E GROSSAS (USANDO ::before) */
        .player-profile::before {
            content: '';
            position: absolute;
            top: -200px; /* Mais para cima */
            right: -300px; /* Mais para a direita */
            width: 1000px; /* Aumentado para 1000px para garantir cobertura */
            height: 1000px; /* Aumentado para 1000px para garantir cobertura */
            z-index: 1; 
            pointer-events: none; /* Ignora eventos do mouse para não interferir no hover */

            /* Cria as QUATRO linhas grossas cruzadas, não repetitivas */
            background-image:
                /* Linha 1: 45 graus (Espessura de 4% - Posição central) */
                linear-gradient(45deg,
                    transparent 0%, transparent 48%,
                    var(--static-gold) 48%, var(--static-gold) 52%, 
                    transparent 52%, transparent 100%
                ),
                /* Linha 2: -45 graus (Espessura de 4% - Posição central) */
                linear-gradient(-45deg,
                    transparent 0%, transparent 48%,
                    var(--static-gold) 48%, var(--static-gold) 52%, 
                    transparent 52%, transparent 100%
                ),
                /* Linha 3: 30 graus (Espessura de 4% - Ponto de encontro movido) */
                linear-gradient(30deg,
                    transparent 0%, transparent 35%, 
                    var(--static-gold) 35%, var(--static-gold) 39%, 
                    transparent 39%, transparent 100%
                ),
                /* Linha 4: -30 graus (Espessura de 4% - Ponto de encontro movido) */
                linear-gradient(-30deg,
                    transparent 0%, transparent 42%, 
                    var(--static-gold) 42%, var(--static-gold) 46%, 
                    transparent 46%, transparent 100%
                );
            background-size: 100% 100%; /* Ocupa todo o elemento, impedindo repetição */
            background-repeat: no-repeat;
            
            /* Transição para o efeito de hover */
            transition: transform 0.6s ease-out, background-image 0.5s ease-in-out; 
            transform: scale(1);
        }

        .player-info-profile {
            position: absolute;
            top: 25px;
            left: 30px;
            z-index: 3; 
            width: 45%;
        }

        .player-name-full {
            font-size: 0.8em;
            margin-bottom: 3px;
            opacity: 0.7; 
            color: inherit; 
        }

        .player-nickname {
            font-size: 4em;
            font-weight: bold;
            letter-spacing: -2px;
            margin-bottom: 25px;
            color: inherit; 
        }

        .details-section {
            margin-top: 15px;
            padding-top: 10px;
            border-top: 1px solid rgba(0, 0, 0, 0.1); 
            color: inherit; 
            transition: border-top-color 0.5s ease-in-out;
        }

        .detail-item {
            display: block;
            margin-bottom: 8px;
            align-items: center;
            position: relative; 
            padding-left: 15px;
            text-transform: uppercase;
        }

        .detail-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0; /* Posiciona a linha no início do padding */
            width: 1px; /* Espessura da linha */
            height: 100%; /* Faz a linha se estender por toda a altura do item */
            background: var(--primary-gold); /* Cor da linha (dourada) */
            border-radius: 1px;
    
            /* Se quiser que a linha seja menor e apenas antes da primeira palavra: */
            /* top: 5px; 
            height: 1em; 
            width: 3px;
            background: linear-gradient(to bottom, var(--primary-gold), transparent);
            */
        }
        .detail-label {
            font-size: 1em;
            text-transform: uppercase;
            letter-spacing: 0.2px;
            width: 100px; 
            opacity: 0.6;
            display: block;
            margin-right: 35px;
            margin-bottom: 2px;
        }

        .detail-value {
            font-size: 1em;
            font-weight: 600;
            display: block;
            text-transform: uppercase;
        }

        .player-photo-container {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%; /* Diminuído para 45% */
            height: 100%; /* Diminuído para 85% */
            display: flex;
            justify-content: flex-end;
            align-items: flex-end; 
            z-index: 2; 
        }

        .player-photo {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain; 
            transform: scale(1); 
            transition: transform 0.5s ease-in-out; 
            filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.3)); 
        }

        /* ESTADO HOVER */
        .player-profile:hover {
            background-color: var(--hover-bg-dark); /* Fundo Amarelo Queimado/Dourado Escuro */
            color: var(--text-light); /* Texto branco */
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); 
        }

        .player-profile:hover::before {
            /* Mapeia a imagem de fundo para a cor de linha mais clara */
            background-image:
                /* Linha 1: 45 graus */
                linear-gradient(45deg,
                    transparent 0%, transparent 48%,
                    var(--hover-line-light) 48%, var(--hover-line-light) 52%, 
                    transparent 52%, transparent 100%
                ),
                /* Linha 2: -45 graus */
                linear-gradient(-45deg,
                    transparent 0%, transparent 48%,
                    var(--hover-line-light) 48%, var(--hover-line-light) 52%, 
                    transparent 52%, transparent 100%
                ),
                /* Linha 3: 30 graus (Ponto de encontro movido) */
                linear-gradient(30deg,
                    transparent 0%, transparent 35%, 
                    var(--hover-line-light) 35%, var(--hover-line-light) 39%, 
                    transparent 39%, transparent 100%
                ),
                /* Linha 4: -30 graus (Ponto de encontro movido) */
                linear-gradient(-30deg,
                    transparent 0%, transparent 42%, 
                    var(--hover-line-light) 42%, var(--hover-line-light) 46%, 
                    transparent 46%, transparent 100%
                );
            transform: scale(1.1); /* Efeito de zoom out do fundo sutil (10%) */
        }

        .player-profile:hover .details-section {
            border-top-color: rgba(255, 255, 255, 0.4); /* Linha divisória clara */
        }

        .player-profile:hover .detail-label {
            opacity: 0.9;
        }

        .player-profile:hover .player-photo {
            transform: scale(1.05); /* Pequeno zoom na foto da pessoa (5%) */
        }

        /* Para os ícones sociais - apenas um placeholder */
        .social-icons {
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 4;
            color: var(--text-dark); /* Cor padrão para os ícones */
            transition: color 0.5s ease-in-out;
        }

        .player-profile:hover .social-icons {
            color: var(--text-light); /* Ícones brancos no hover */
        }

        .social-icons span {
            margin-left: 10px;
            font-size: 1.2em;
        }

.player-foto{
    right: 50px;
    
}
       
/* style.css - Adicione esta nova regra para posicionar o bloco de ícones */
.player-social {
    position: absolute; /* Sai do fluxo normal */
    bottom: 20px;          /* 20px de distância do topo do .store-cta */
    right: 20px;        /* 20px de distância da direita do .store-cta */
    z-index: 10;        /* Garante que fique acima da imagem */
    /* Mantém os estilos de display existentes, se houver, ou: */
    display: flex;
    gap: 16px;
}

.player-banner-wrapper {
    position: relative;
    width: 100%;
    height: 350px; /* ajuste se precisar */
    overflow: hidden;
}

/* fundo separado */
.player-banner-wrapper .x-pattern {
    position: absolute;
    inset: 0;
    background-image: url('img/pattern.png'); /* mesmo pattern que você usa hoje */
    background-repeat: repeat;
    z-index: 1;
}

/* imagem do jogador */
.player-banner {
    position: absolute;
    right: 0;     /* 👉 agora a imagem vai para a direita sem mexer o fundo */
    bottom: 0;
    height: 100%;
    z-index: 2;
    width: auto;       /* Manter proporção correta */
    transition: transform 0.3s ease;
}


.player-banner {
    /* ... (seus estilos existentes) ... */
    
    /* Adicione esta regra para o brilho na silhueta do jogador (funciona melhor em PNGs transparentes) */
    transition: filter 0.3s ease; 
}

.player-cta:hover .player-banner {
    filter: drop-shadow(0 0 8px var(--primary-gold)) drop-shadow(0 0 3px var(--secondary-gold));
}

/* --- WIDGET DE PARTIDA (Novo) --- */
.match-widget {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: var(--card-bg-light)
}

.match-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    flex-wrap: wrap;
}

.match-tag {
    background: var(--primary-gold);
    color: #000;
    font-weight: 800;
    padding: 8px 16px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    animation: pulse-fast 1s infinite;
}

.match-info {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 20px;
    font-family: monospace; /* Fonte estilo código */
    font-size: 0.9rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.text-gold { color: var(--primary-gold); }

.match-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    gap: 20px;
}

.team-block {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.team-home { justify-content: flex-end; padding-right: 130px; }
.team-away { justify-content: flex-start; padding-left: 130px; }

.camp-logo-widget {
    width: 20px;   /* Largura da logo */
    height: 20px;  /* Altura da logo */
    display: flex;
    align-items: center;
    justify-content: center;
    /* O filtro continua criando uma sombra bonita em volta da imagem transparente */
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.3));
}

.camp-logo-widget img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garante que a logo não fique esticada/amassada */
}


.team-logo-widget {
    width: 80px;   /* Largura da logo */
    height: 80px;  /* Altura da logo */
    display: flex;
    align-items: center;
    justify-content: center;
    /* O filtro continua criando uma sombra bonita em volta da imagem transparente */
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.3));
}

.team-logo-widget img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garante que a logo não fique esticada/amassada */
}

.team-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
    font-style: italic;
    line-height: 1;
}

.team-role {
    font-size: 0.7rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    font-weight: bold;
}

.align-right { text-align: right; }

.vs-block {
    position: relative;
    width: 80px;
    text-align: center;
}

.vs-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    font-weight: 900;
    font-style: italic;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.vs-fg {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-gold);
    font-style: italic;
    position: relative;
}

.btn-icon-only {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--primary-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-gold);
    transition: all 0.3s ease;
}

.btn-icon-only-nohover {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--primary-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-gold);
    transition: all 0.3s ease;
}


.btn-icon-only:hover {
    background: var(--primary-gold);
    color: #000;
    transform: scale(1.1);
}

/* Responsividade Mobile para o Widget */
@media (max-width: 768px) {
    .match-header { flex-direction: column; }
    .match-tag { width: 100%; justify-content: center; }
    .match-info { width: 100%; justify-content: center; padding: 10px; font-size: 0.75rem;}
    .match-body { flex-direction: column; text-align: center; }
    .team-block { flex-direction: column; justify-content: center; width: 100%; }
    .team-away { flex-direction: column-reverse; } /* Inverte para logo ficar em cima no mobile */
    .align-right { text-align: center; }
    .ticket-action { display: none; } /* Esconde botão no mobile para economizar espaço */
    .team-logo-widget {
        width: 60px;
        height: 60px;
    }
}

/* --- CALENDAR WIDGET STYLES --- */

/* O container precisa ser relativo para posicionar o menu */
.calendar-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* O Menu escondido */
.calendar-menu {
    position: absolute;
    right: 100%; /* Fica à esquerda do botão */
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    
    display: flex;
    align-items: center;
    gap: 15px;
    
    background: #000; /* Fundo preto para leitura */
    border: 1px solid var(--primary-gold);
    border-radius: 50px; /* Borda redonda */
    padding: 0; /* Começa sem padding */
    margin-right: 12px; /* Espaço entre menu e botão */
    
    /* Animação de abrir */
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100; /* Garante que fique por cima */
}

/* Estado Aberto do Menu */
.calendar-menu.open {
    max-width: 250px; /* Largura suficiente para os ícones */
    opacity: 1;
    padding: 8px 20px; /* Adiciona padding quando abre */
}

/* Ícones dentro do menu */
.calendar-menu a {
    color: var(--white);
    font-size: 1.2rem;
    transition: transform 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.calendar-menu a:hover {
    color: var(--primary-gold);
    transform: scale(1.2);
}

/* Estilo especial para o texto ICS */
.ics-icon {
    font-size: 0.7rem !important;
    font-weight: bold;
    border: 1px solid var(--white);
    padding: 2px 4px;
    border-radius: 4px;
}

.calendar-menu a:hover .ics-icon {
    border-color: var(--primary-gold);
}

/* O Botão Redondo Principal */
.calendar-btn {
    
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 101; /* Botão fica acima do menu */
}

/* O Desenho SVG do Calendário */
.calendar-svg {
    stroke: var(--primary-gold);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

.calendar-btn:hover .calendar-svg {
    filter: drop-shadow(0 0 5px var(--primary-gold));
    stroke: var(--secondary-gold);
}

/* --- ESTILO DO WIDGET DE PLACAR --- */

/* Layout dos Times no Widget */
.team-container-widget {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    transition: transform 0.3s ease;
}

.team-container-widget.left {
    justify-content: flex-start; /* Alinha LOUD à esquerda */
}

.team-container-widget.right {
    justify-content: flex-end;   /* Alinha SEN à direita */
}

/* Efeito de hover nos times */
.team-container-widget:hover {
    transform: scale(1.02);
}

/* Logos Grandes */
.team-logo-large {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.2));
}

.team-logo-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Textos dos Times */
.team-name-large {
    font-family: var(--strays-font); /* Fonte do título do site */
    font-size: 1.8rem;
    margin: 0;
    line-height: 1;
    color: var(--text-dark);
    font-style: italic;
}

.team-region {
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--text-secondary);
    font-weight: bold;
    text-transform: uppercase;
}

.text-left { text-align: left; }
.text-right { text-align: right; }

/* Placar Central */
.scoreboard-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.score-display {
    font-family: 'JetBrains Mono', monospace; /* Fonte de números */
    font-size: 4rem;
    font-weight: bold;
    color: var(--white);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    line-height: 1;
}

.score-divider {
    color: var(--primary-gold);
    margin: 0 10px;
    opacity: 0.6;
}

.text-gray {
    color: #888; /* Cor para o perdedor, opcional */
}

.match-status {
    margin-top: 10px;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--primary-gold);
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-flex;   /* Alinha bolinha e texto na mesma linha */
    align-items: center;    /* Centraliza verticalmente */
    gap: 8px;               /* Espaço entre a bolinha e o texto */
    white-space: nowrap;    /* PROIBE o texto de quebrar linha */
    transition: all 0.3s ease;
}

/* Estilo QUANDO ESTIVER AO VIVO (Adicionado via JS) */
.match-status.live-active {
    color: #ff4444 !important;       /* Texto Vermelho */
}

/* Cria a bolinha vermelha AUTOMATICAMENTE antes do texto */
.match-status.live-active::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #ff4444;
    border-radius: 50%;
    box-shadow: 0 0 5px #ff4444;
    animation: pulse-red 1.5s infinite; /* Usa a animação abaixo */
}

/* Animação da bolinha piscando */
@keyframes pulse-red {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* Ajustes Mobile */
@media (max-width: 768px) {
    .match-body {
        flex-direction: column;
        gap: 30px;
    }
    .team-container-widget {
        justify-content: center !important;
        width: 100%;
    }
    .team-container-widget.right {
        flex-direction: row-reverse; /* Inverte a ordem no mobile para o logo ficar fora */
    }
    .text-left, .text-right {
        text-align: center;
    }
    .score-display {
        font-size: 3rem;
    }
}

/* --- HISTÓRICO DE PARTIDAS --- */
.history-section {
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    margin-top: 30px;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.history-header h3 {
    color: var(--primary-gold);
    font-size: 1.5rem;
    margin: 0;
}

.history-year {
    background: var(--card-bg-light);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    color: var(--text-secondary);
}

/* Container da lista com scroll se ficar muito grande */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px; /* Altura máxima antes de começar a rolar */
    overflow-y: auto;
    padding-right: 10px; /* Espaço para a scrollbar */
}

/* Custom Scrollbar para a lista */
.history-list::-webkit-scrollbar {
    width: 6px;
}
.history-list::-webkit-scrollbar-thumb {
    background: var(--medium-gray);
    border-radius: 3px;
}

/* O Item Individual (Cada Jogo) */
.history-item {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr; /* Data | Jogo | Placar | Resultado */
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

/* Cores da Borda Lateral baseadas no Resultado */
.history-item.win { border-left-color: #10b981; } /* Verde */
.history-item.loss { border-left-color: #ef4444; } /* Vermelho */
.history-item.draw { border-left-color: var(--text-secondary); } /* Cinza */

/* Colunas */
.h-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-family: monospace;
}

.h-matchup {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--white);
}

.h-matchup img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.h-score {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--white);
    letter-spacing: 2px;
}

.h-result {
    text-align: right;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.h-result.win { color: #10b981; }
.h-result.loss { color: #ef4444; }

/* Mobile Responsivo */
@media (max-width: 768px) {
    .history-item {
        grid-template-columns: 1fr auto; /* Vira 2 colunas */
        gap: 10px;
    }
    .h-date { grid-column: 1 / -1; font-size: 0.8rem; opacity: 0.7; }
    .h-matchup { grid-column: 1; }
    .h-score { grid-column: 2; text-align: right; }
    .h-result { display: none; } /* Esconde texto Win/Loss no mobile para economizar espaço (a cor da borda já indica) */
}

/* A Imagem dentro do Banner */
.store-banner {
    width: 100%;
    height: 100%;
    
    /* O SEGREDO: 'cover' faz a imagem preencher tudo sem esticar/deformar o desenho */
    object-fit: cover;
    /* Ajuste a posição do foco da imagem (center, top, bottom) */
    object-position: center; 
    
    border-radius: 0; /* Remove cantos arredondados da imagem */
    display: block;
}

.loja-banner {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
            object-position: top center; /* Salva as cabeças */
            z-index: 0;
}

.store-banner:hover {
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    background: linear-gradient(45deg, var(--secondary-gold), var(--dark-gold));
    transition: all 0.4s ease;
}

/* Image Effects */
.store-image-container {
    position: relative;
    overflow: hidden;
}

.store-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 215, 0, 0.3), 
        transparent
    );
    transition: left 0.6s ease;
}

.store-image-container:hover::after {
    left: 100%;
}

.store-image-container img {
    transition: transform 0.4s ease, filter 0.4s ease;
}

.store-image-container:hover img {
    filter: brightness(1.1) contrast(1.1);
}

/* News Section */
.news-section {
    padding: 80px 0;
    background: var(--section-background); /* Antes era var(--black) */
}



.news-card {
    overflow: hidden;
    display: flex;
    flex-direction: column; /* empilha os elementos em coluna */
    justify-content: space-between; /* força o botão pro fim */
    height: 100%; /* garante que ocupe o quadrado inteiro */
}

.news-image {
    position: relative;
    height: 192px;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-date {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 8px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--black);
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 215, 0, 0.9);
}

.news-content {
    padding: 24px;
    flex: 1;                /* ocupa todo o espaço vertical */
    display: flex;
    flex-direction: column; /* empilha título, texto e botão */
}

.news-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.news-card:hover .news-title {
    color: var(--primary-gold);
}

.news-excerpt {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.news-link {
    background: none;
    border: none;
    color: var(--primary-gold);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-top: auto; 
    align-self: flex-start; 
}

.news-link:hover {
    color: var(--secondary-gold);
}

.news-link i {
    transition: transform 0.3s ease;
}

.news-link:hover i {
    transform: translateX(4px);
}

.news-cta {
    text-align: center;
}

.news-modal-flex {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: flex-start;
    justify-content: center;
}

.news-modal-text {
    flex: 1 1 0;
    font-size: 1.1rem;
    color: #fff;
    max-width: 350px;
}

.news-modal-media {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 350px;
}

.news-modal-media img,
.news-modal-media video {
    width: 100%;
    max-width: 350px;
    border-radius: 8px;
    object-fit: cover;
}

.news-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 32px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-gold) var(--medium-gray);
    align-items: stretch;
}

.news-card {
    min-width: 320px;
    max-width: 340px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    transition: transform 0.3s;
    height: 480px; /* ajusta conforme seu design */
    display: flex;
    flex-direction: column;
}

.news-carousel::-webkit-scrollbar {
    height: 8px;
}
.news-carousel::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 4px;
}
.news-carousel::-webkit-scrollbar-track {
    background: var(--medium-gray);
    border-radius: 4px;
}

/* Gallery Section */
.gallery-section {
    padding: 20px 0;
    background: var(--section-background); /* Antes era var(--black) */
}

.gallery-carousel {
    margin-bottom: 48px;
}

.carousel-container {
    position: relative;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-player-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 320px;
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.caption-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 16px;
}

.caption-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    color: var(--primary-gold);
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}

.carousel-nav:hover {
    background: rgba(255, 215, 0, 0.3);
    color: var(--secondary-gold);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 16px;
}

.next-btn {
    right: 16px;
}

.prev-btn-players {
    left: 10px;   /* Cola na esquerda */
    right: auto;  /* Anula o right */
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}

.next-btn-players {
    right: 10px;  /* Cola na direita */
    left: auto;   /* Anula o left */
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}

.image-counter {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 8px 16px;
    border-radius: 20px;
    color: var(--primary-gold);
    font-size: 14px;
    font-weight: 600;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-gold);
    width: 32px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

.thumbnail {
    position: relative;
    height: 128px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.thumbnail:hover {
    transform: scale(1.05);
}

.thumbnail.active {
    border: 2px solid var(--primary-gold);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.thumbnail.active .thumbnail-overlay {
    opacity: 1;
}

.thumbnail-overlay i {
    color: var(--primary-gold);
    font-size: 32px;
    background: rgba(0, 0, 0, 0.7);
    padding: 16px;
    border-radius: 50%;
}

.gallery-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- ESTILOS DA PÁGINA DE GALERIA COMPLETA (ANTI-ZOOM) --- */

/* 1. Container que permite largura total */
#galeria-page .container {
    width: 100vw;      /* Largura total da janela */
    max-width: 100vw;  /* Garante que não tenha limite de pixels */
    padding: 0;        /* Remove padding para controlar via grid */
    margin: 0;
    overflow-x: hidden; /* Evita scroll lateral indesejado */
}

/* O Grid Principal */
.full-gallery-grid {
    display: grid;
    
    /* MÁGICA DO ANTI-ZOOM: 
       Usamos 'vw' (Viewport Width). 
       46vw = 46% da largura da janela. 
       Como são 2 colunas, soma 92%, sobrando espaço para o gap.
       Isso faz a imagem SEMPRE ocupar a mesma proporção da tela, ignorando o zoom do texto. */
    grid-template-columns: repeat(2, 46vw);
    
    justify-content: center;
    gap: 3vw; /* Espaço também em porcentagem da tela */
    width: 100%;
    margin: 0 auto;
    padding-bottom: 50px;
}

/* O Retângulo (Item da Galeria) */
.gallery-item-rect {
    position: relative;
    
    /* Largura preenche a coluna do grid (46vw) */
    width: 100%; 
    
    /* ALTURA FIXA NA TELA:
       50vh = 50% da altura da janela.
       Independente do zoom, a imagem sempre terá metade da altura do seu monitor. */
    height: 50vh; 
    
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 215, 0, 0.1);
    background: var(--card-bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item-rect:hover {
    /* No hover, um leve destaque, mas mantendo a proporção */
    transform: scale(1.02); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-color: var(--primary-gold);
    z-index: 10;
}

/* A Imagem ou Vídeo */
.gallery-item-rect img, 
.gallery-item-rect video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
    transition: transform 0.5s ease;
}

.gallery-item-rect:hover img,
.gallery-item-rect:hover video {
    transform: scale(1.1); 
}

/* Overlay (Texto e Ícone) */
.item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2vw; /* Padding também relativo ao tamanho da tela */
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.gallery-item-rect:hover .item-overlay {
    opacity: 1;
}

.item-caption {
    color: var(--white);
    font-weight: bold;
    /* Fonte usa 'vmin' para escalar suavemente com a tela, não com o zoom do navegador de forma agressiva */
    font-size: 2.5vmin; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.item-icon {
    color: var(--primary-gold);
    font-size: 3vmin; 
}

/* --- RESPONSIVIDADE --- */

/* Para telas verticais (Celulares e Tablets em pé) */
@media (orientation: portrait) {
    .full-gallery-grid {
        /* Muda para 1 coluna que ocupa quase toda a largura */
        grid-template-columns: 92vw; 
        gap: 3vh;
    }
    
    .gallery-item-rect {
        /* No celular, a altura ocupa 35% da tela para caber mais de uma */
        height: 35vh; 
    }
    
    .item-caption {
        font-size: 1.2rem; /* No celular voltamos para rem para legibilidade */
    }
    
    .item-icon {
        font-size: 1.5rem;
    }
}

/* Sponsors Section */
.sponsors-section {
    padding: 80px 0;
    background: var(--section-background); /* Antes era var(--black) */
}

.sponsors-grid-carousel {
    display: flex;
    overflow: hidden; /* Esconde o que estiver fora da área visível */
    margin-bottom: 64px;
    gap: 10px;
}

.sponsors-grid {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    /* Adicionamos max-content para garantir que fiquem todos numa linha só, mesmo duplicados */
    width: max-content; 
    /* A animação continua a mesma chamada */
    animation: scroll-sponsors 30s linear infinite;
}

@keyframes scroll-sponsors {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Mudamos de -100% para -50%. 
           Como duplicamos o conteúdo, -50% significa que o conjunto original 
           saiu da tela e o conjunto clonado está exatamente no lugar dele. 
           Aí o loop reinicia imperceptivelmente. */
        transform: translateX(-50%);
    }
}

.sponsor-card {
    min-width: 250px;
    padding: 32px;
    text-align: center;
    transition: all 0.4s ease;
}

.sponsor-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.sponsor-logo {
    height: 80px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0.9);
    transition: filter 0.3s ease;
}

.sponsor-card:hover .sponsor-logo img {
    filter: brightness(1.1);
}

.sponsor-name {
    color: var(--text-color);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.sponsor-card:hover .sponsor-name {
    color: var(--primary-gold);
}

.sponsor-link {
    background: none;
    border: none;
    color: var(--primary-gold);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.sponsor-card:hover .sponsor-link {
    opacity: 1;
}

.sponsor-link:hover {
    color: var(--secondary-gold);
}

.partnership-cta {
    padding: 48px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.cta-title {
    font-size: 32px;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 16px;
}

.cta-description {
    color: var(--text-secondary);
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer */
.footer {
    padding: 80px 0 32px;
    background: var(--section-background); /* Antes era var(--black) */
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer-logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.footer-logo {
    width: 48px;
    height: 48px;
    background: linear-gradient(45deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    color: var(--black);
}

.footer-logo img {
    max-width: 100%; 
    height: auto;    
    display: block;
}

.footer-brand-logo.visible {
    opacity: 1;
}


.footer-brand-logo {
    width: 60px; 
    height: auto; 
    margin-right: 16px; 
     opacity: 0;
    transition: opacity 0.4s;
    
}

.footer-brand-logo-normal {
    width: 60px; 
    height: auto; 
    margin-right: 16px; 
}

.footer-brand-logo-title {
    width: 360px; 
    height: auto; 
    margin-right: 16px; 
}


.footer-brand-name {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-gold);
    margin: 0;
    font-family: var(--strays-font);
}

.footer-brand-slogan {
    color: var(--secondary-gold);
    margin: 0;
}

.footer-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

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

.social-link {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 20px;
    transition: all 0.3s ease;
    text-decoration: none
}

.social-link-instagram:hover {
    color: rgba(241, 94, 143, 0.815);
    transform: scale(1.1);
}

.social-link-twitter:hover {
    color: rgba(81, 163, 230, 0.897);
    transform: scale(1.1);
}

.social-link-youtube:hover {
    color: rgba(236, 25, 25, 0.897);
    transform: scale(1.1);
}

.social-link-twitch:hover {
    color: rgba(86, 2, 126, 0.897);
    transform: scale(1.1);
}

.footer-section-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-gold);
    margin-bottom: 24px;
}

.footer-nav {
    list-style: none;
}

.footer-nav li {
    margin-bottom: 12px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: center; /* <--- MUDE DE flex-start PARA center */
    gap: 12px;
    color: var(--text-secondary);
    text-decoration: none;
}

.contact-item i {
    color: var(--primary-gold);
    margin-top: 0;
    transition: color 0.3s ease;
}

.contact-item:hover i {
    color: var(--secondary-gold);
}

.contact-item p {
    margin: 0;
    transition: color 0.3s ease;
}

.contact-item:hover p {
    color: var(--primary-gold);
}

.contact-item a {
    margin: 0;
    transition: color 0.3s ease;
    text-decoration: none;
    color: var(--text-secondary);
}

.contact-item:hover a {
    color: var(--primary-gold);
}

.newsletter {
    padding: 32px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.2);
    margin-bottom: 48px;
}

.newsletter-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 12px;
}

.newsletter-description {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.newsletter-form {
    display: flex;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.newsletter-form input {
    flex: 1;
    min-width: 200px;
    padding: 12px 16px;
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    background: var(--card-background);
    color: var(--text-color);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}

.newsletter-form input::placeholder {
    color: #888;
}

.newsletter-input{
    text-align: center;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid #333;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright {
    color: var(--text-secondary);
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 24px;
}

.performance-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.perf-stat {
    text-align: center;
}

.perf-value {
    color: var(--primary-gold);
    font-weight: bold;
    font-size: 16px;
}

.perf-label {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modal {
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            background-color: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            visibility: hidden;
            opacity: 0;
            transition: opacity var(--transition-speed-fast) ease, visibility 0s var(--transition-speed-fast);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content-gallery-grid {
            width: 80%;
            height: 80%;
        }
        
        .modal.is-visible {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }

        .modal-content {
            margin: 32px auto;
            padding: 35px;
            position: relative;
            transform: translateY(-30px);
            transition: transform var(--transition-speed-slow) cubic-bezier(0.165, 0.84, 0.44, 1);
            height: 800px; 
        }

        .modal.is-visible .modal-content {
            transform: translateY(0);
        }

        .modal-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
        }
        
        .modal-header h2 {
            margin: 0;
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            color: var(--primary-gold);
            font-weight: 900;
        }

        .close-button {
            color: var(--light-gray);
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 40px;
            line-height: 1;
            transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
            border: none;
            background: none;
            padding: 0;
            cursor: pointer;
        }

        .close-button:hover, .close-button:focus-visible {
            color: var(--primary-gold);
            transform: rotate(90deg) scale(1.1);
        }

        .players-grid-modal {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 30px;
        }

        .player-info-card {
           display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centraliza verticalmente */

        }

        .player-info-card img {
            width: 300px;
            height: 550px;
            object-fit: cover;
            margin-top: 190px;
            display: block;
            margin-left: auto;
            margin-right: auto;
}
        
        .modal.is-visible .player-info-card {
            animation: cardEntry 0.5s var(--transition-speed-fast) forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        @keyframes cardEntry {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .modal-player-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /* Centraliza verticalmente */
            height: 320px; /* ajuste conforme desejar */
}
        

/* High-end animations for premium feel */
@media (prefers-reduced-motion: no-preference) {
    .card-premium {
        will-change: transform;
    }
    
    .mouse-reactive {
        will-change: transform, filter;
    }
    
    .glow-gold {
        will-change: box-shadow;
    }
}

/* Performance optimizations */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Focus improvements for accessibility */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Improved contrast for better readability */
.high-contrast {
    color: var(--white);
    background: var(--black);
}

@media (max-width: 1024px) {
    /* Novo estilo para o carrossel dos cards de jogadores em mobile */
    .players-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 32px; /* Espaço entre os cards */
        padding-bottom: 20px; /* Adiciona espaço para a scrollbar */
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -20px;
        margin-right: -20px;
    }

    .player-card {
        flex: 0 0 30vw; /* Cada card ocupa 80% da largura da tela */
        scroll-snap-align: center; /* Centraliza o card ao rolar */
        height: auto;
        margin-right: 0;
    }

    .close-button {
            color: var(--light-gray);
            position: absolute;
            top: 15px;
            left: 320px;
            font-size: 40px;
            line-height: 1;
            transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
            border: none;
            background: none;
            padding: 0;
            cursor: pointer;
        }
    
}

@media (max-width: 800px) {
    .news-modal-flex {
        flex-direction: column;
        gap: 16px;
    }
    .news-modal-media,
    .news-modal-text {
        max-width: 100%;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-slogan {
        font-size: 1.5rem;
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .players-grid {
        grid-template-columns: 1fr;
    }

    

    .sponsors-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input {
        min-width: auto;
    }

    .gallery-thumbnails {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-premium:hover {
        transform: translateY(-4px);
    }

    .player-card:hover {
        transform: translateY(-5px) scale(1.02);
    }

     /* Novo estilo para o carrossel dos cards de jogadores em mobile */
    .players-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px; /* Espaço entre os cards */
        padding-bottom: 20px; /* Adiciona espaço para a scrollbar */
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -20px;
        margin-right: -20px;
    }

    .player-card {
        flex: 0 0 80vw; /* Cada card ocupa 80% da largura da tela */
        scroll-snap-align: center; /* Centraliza o card ao rolar */
        height: auto;
        margin-right: 0;
    }

    .prev-btn-players {
        right: 320px;
        margin-top: 270px;
    }

    .next-btn-players {
        left: 320px;
        margin-top: 270px;
    }

    .close-button {
            color: var(--light-gray);
            position: absolute;
            top: 15px;
            left: 320px;
            font-size: 40px;
            line-height: 1;
            transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
            border: none;
            background: none;
            padding: 0;
            cursor: pointer;
        }

    .discord-btn {
    position: fixed;
    bottom: 20px;   /* Distância da parte inferior */
    right: 20px;    /* Distância da lateral direita */
    z-index: 9999;  /* Fica acima de tudo */

    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centraliza o ícone horizontalmente */
    
    /* Ajustes para o botão circular */
    width: 3rem; /* Largura e altura fixas para formar um quadrado */
    height: 3rem;
    padding: 0; /* Remove o padding para que width/height funcionem */

    background: #5865F2; /* Cor oficial do Discord */
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(88,101,242,.35);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Regra para esconder o texto */
.discord-btn span {
    display: none;
}

.discord-btn .icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.discord-btn:hover {
    background: #4752C4; /* Cor mais escura no hover */
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(88,101,242,.45);
}

.discord-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(88,101,242,.35);
}

.discord-btn:focus-visible {
    outline: 3px solid #c7ceff;
    outline-offset: 3px;
}

.sponsors-grid-carousel {
        margin-left: -20px;
        margin-right: -20px;
        padding: 0 20px;
        box-sizing: content-box;
    }

    .sponsors-grid {
        animation: scroll-sponsors 20s linear infinite; /* Velocidade mais rápida para mobile */
    }

    .sponsor-card {
        min-width: 50vw; /* Ocupa 50% da tela em mobile */
    }

    .hero-title, .section-title, .section-title-loja {
        font-size: 2.5rem; /* Reduz a fonte no celular */
        word-wrap: break-word; /* Quebra linha se a palavra for longa */
    }

    /* Ajuste do Card de Jogador no Mobile */
    .player-profile {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column; /* Empilha foto e texto */
        margin: 0 0 20px 0;
    }

    .player-info-profile {
        position: relative; /* Tira do absolute no mobile */
        width: 100%;
        padding: 20px;
        top: 0; left: 0;
    }

    .player-photo-container {
        position: relative; /* Tira do absolute */
        width: 100%;
        height: 300px; /* Altura fixa para a foto */
    }
    
    .player-nickname {
        font-size: 3em; /* Nome um pouco menor */
    }

    /* Conserta o Widget de Partida */
    .team-home, .team-away {
        padding: 0; /* Remove aquele padding de 130px */
        justify-content: center;
    }

}

@media (max-width: 700px) {
    .news-card {
        min-width: 85vw;
        max-width: 90vw;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .sponsors-grid {
        grid-template-columns: 1fr;
    }

    .performance-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- CORREÇÃO DO BANNER NO MOBILE --- */
@media (max-width: 768px) {
    
    /* === PARTE 1: BANNER DOS JOGADORES (JÁ EXISTIA) === */
    .player-profile-banner {
        height: 250px; /* Reduz altura */
    }

    .player-profile-banner img {
        object-fit: cover; 
        object-position: top center;
    }

    .line-banner-title {
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3rem;
        width: 100%;
        text-align: center;
    }

    .line-banner-subtitle {
        top: 85%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
    }
/* --- CORREÇÃO FINAL V2: CARDS IGUAIS HOME & BANNER CENTRALIZADO --- */
@media (max-width: 768px) {

    /* === 1. BANNER DAS LINES (CENTRALIZAÇÃO PERFEITA) === */
    .player-profile-banner {
        height: 250px;
    }

    .player-profile-banner img {
        object-fit: cover;
        /* Volta para o ajuste que você gostou (Centralizado horizontalmente, levemente para o topo) */
        object-position: 50% 15% !important; 
    }

    .line-banner-title {
        top: 65%;
        font-size: 2.5rem;
        width: 100%;
        text-align: center;
    }
    
    .line-banner-subtitle {
        top: 80%;
        font-size: 0.9rem;
        width: 100%;
        text-align: center;
    }

    /* === 2. CARROSSEL DE PLAYERS (LAYOUT IGUAL DA HOME) === */
    .container-player {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding: 20px; 
        
        /* Centraliza verticalmente e define área */
        align-items: center;
        margin: 0;
        width: 100%;
        justify-content: flex-start; /* Começa da esquerda */
    }

    .container-player::-webkit-scrollbar {
        display: none;
    }

    /* === 3. O CARD DO JOGADOR (TAMANHO "QUADRADO" IGUAL HOME) === */
    .player-profile {
        flex: 0 0 280px;  
        height: 380px;    
        scroll-snap-align: center;
        margin: 0;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        overflow: hidden; 
    }

    /* TEXTO: Limitado à esquerda para não bater na foto */
    .player-info-profile {
        width: 100%;
        max-width: 55%; /* Ocupa só 55% da largura, deixando espaço pra foto */
        padding: 20px;
        z-index: 10; 
        position: relative;
    }

    .player-nickname {
        font-size: 2.2em; 
        margin-bottom: 5px;
        line-height: 1;
    }
    
    .detail-item {
        font-size: 0.75em;
        margin-bottom: 4px;
    }

    /* FOTO: Jogada para a direita e esticada até o topo */
.player-photo-container {
        position: absolute;
        top: 0;
        left: 20%;
        width: 100%;   /* Largura total do card */
        height: 100%;  /* Altura total do card */
        z-index: 1;    /* Fica atrás do texto */
    }
    
.player-photo {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Preenche tudo */
        /* Posiciona para focar mais na direita (onde a pessoa geralmente está), 
           liberando a esquerda pro texto */
        object-position: 70% center; 
        
        /* REMOVI O EFEITO DE MÁSCARA/DEGRADÊ AQUI */
    }

    /* === 4. BANNER DA LOJA (MANTIDO) === */
    #Loja {
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .loja-banner {
        object-fit: cover;
        object-position: center top;
    }

    .loja-banner-title {
        font-size: 3rem;
        top: 5%;
        width: 90%;
    }

    .loja-banner-subtitle {
        font-size: 0.9rem;
        top: 15%;
        width: 90%;
    }

    #Loja .hero-cta {
        margin-bottom: 40px;
        justify-content: center;
    }
    
    #LojaBtn {
        width: 80%;
    }
}

/* ========================================= */
/* NOTIFICAÇÕES (DROPDOWN DO SINO)           */
/* ========================================= */

.notification-dropdown {
    position: absolute;
    top: 50px;
    right: -10px;
    width: 320px;
    background: #1c1f26;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 1000;
    display: none; /* Escondido por padrão */
    flex-direction: column;
    overflow: hidden;
    animation: fadeInDropdown 0.2s ease-out;
}

.notification-dropdown.show { display: flex; }

.notif-header {
    padding: 12px 16px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #15171e;
}
.notif-header h3 { font-size: 13px; font-weight: 800; color: white; text-transform: uppercase; }
.notif-clear { font-size: 10px; color: #888; cursor: pointer; }
.notif-clear:hover { color: #ff4655; }

.notif-list {
    max-height: 300px;
    overflow-y: auto;
}

.notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    gap: 12px;
    transition: background 0.2s;
    position: relative;
}
.notif-item:hover { background: rgba(255,255,255,0.02); }
.notif-item.unread { background: rgba(234, 179, 8, 0.05); border-left: 3px solid #eab308; }

.notif-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #333;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: white;
}
.notif-icon.invite { background: #6d28d9; } /* Roxo */
.notif-icon.match { background: #ef4444; }  /* Vermelho */
.notif-icon.info { background: #3b82f6; }   /* Azul */

.notif-content { flex: 1; }
.notif-title { font-size: 13px; font-weight: 700; color: white; margin-bottom: 2px; }
.notif-msg { font-size: 11px; color: #9ca3af; line-height: 1.4; margin-bottom: 6px; }
.notif-time { font-size: 10px; color: #555; }

/* Botões de Ação (Aceitar/Recusar) */
.notif-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-accept {
    background: #10b981; color: white; border: none; padding: 4px 10px;
    border-radius: 4px; font-size: 10px; font-weight: 800; cursor: pointer;
}
.btn-decline {
    background: #333; color: #ccc; border: none; padding: 4px 10px;
    border-radius: 4px; font-size: 10px; font-weight: 800; cursor: pointer;
}
.btn-accept:hover { background: #059669; }
.btn-decline:hover { background: #444; color: white; }

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* TOAST CORRIGIDO */
.toast-container {
    position: fixed;
    bottom: 30px; right: 30px; z-index: 99999;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}

.toast {
    color: white !important;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; font-weight: 700; min-width: 300px;
    animation: slideInToast 0.4s forwards ease-out;
    pointer-events: auto;
    background-color: #333; /* Cor padrão caso a classe falhe */
}

/* O !important AQUI É OBRIGATÓRIO */
.toast.success {
    background-color: #10b981 !important; /* VERDE */
    border-left: 5px solid #064e3b !important;
}

.toast.error {
    background-color: #ef4444 !important; /* VERMELHO */
    border-left: 5px solid #7f1d1d !important;
}

.toast-icon {
    background: rgba(0,0,0,0.2);
    border-radius: 50%; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
}

@keyframes slideInToast { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOutToast { to { transform: translateX(120%); opacity: 0; } }

/* --- ESTILOS PÁGINA RECRUTAMENTO (TRYOUTS) --- */

.tryouts-section {
    padding-top: 140px; /* Compensa o Header Fixo */
    padding-bottom: 80px;
    min-height: 100vh;
    background: var(--background-color);
}

/* Regras Grid */
.rules-container {
    margin-bottom: 50px;
}

.rules-title {
    text-align: center;
    color: var(--primary-gold);
    margin-bottom: 30px;
    font-size: 1.5rem;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.rule-item {
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: transform 0.3s;
}

.rule-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-gold);
}

.rule-item i {
    font-size: 2rem;
    color: var(--primary-gold);
    margin-bottom: 15px;
}

.rule-item p {
    color: var(--text-color);
    font-size: 0.95rem;
}

/* Formulário Container */
.form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.6); /* Mais escuro para contraste */
}

.form-section-title {
    color: var(--primary-gold);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding-bottom: 10px;
    margin: 30px 0 20px 0;
    font-size: 1.2rem;
}

/* Inputs e Labels */
.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

label {
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
select,
textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--medium-gray);
    color: var(--white);
    padding: 12px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
    background: rgba(0, 0, 0, 0.8);
}

/* Radio Buttons Customizados (Botões) */
.radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.radio-btn {
    cursor: pointer;
}

.radio-btn input {
    display: none; /* Esconde a bolinha padrão */
}

.radio-btn span {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    color: var(--text-secondary);
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.05);
}

.radio-btn input:checked + span {
    background: var(--primary-gold);
    color: var(--black);
    font-weight: bold;
    border-color: var(--primary-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.form-footer {
    text-align: center;
    margin-top: 30px;
}

.form-footer button {
    width: 100%;
    font-size: 1.1rem;
    padding: 15px;
}

/* Responsividade do Form */
@media (max-width: 768px) {
    .tryouts-section {
        padding-top: 100px;
    }
    .form-container {
        padding: 20px;
    }
    .form-row {
        grid-template-columns: 1fr; /* 1 coluna no mobile */
        gap: 0;
    }
    .radio-group span {
        width: 100%;
        text-align: center;
    }
    .radio-btn {
        flex: 1;
    }
}

}