* {
            font-family: 'Poppins', sans-serif;
        }
        
        /* ATUALIZAÇÃO JS TECH: Fundo Temático Profissional */
body {
    /* Cor de segurança caso a imagem não carregue */
    background-color: #0f0f23; 
    min-height: 100vh;
    position: relative; /* Necessário para o fundo funcionar */
}

/* O Banner fica aqui */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* --- COLOQUE O LINK DO SEU BANNER AQUI EMBAIXO --- */
    background-image: url('banner.jpg'); 
    /* Exemplo acima. Troque pela sua URL */
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* TRUQUE JS TECH: */
    z-index: -2;      /* Fica atrás de tudo */
    opacity: 0.3;     /* Transparência para não atrapalhar a leitura (0.1 a 1.0) */
    filter: blur(3px) grayscale(40%); /* Leve desfoque para dar profundidade */
}
        
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .player-card {
            transition: all 0.3s ease;
        }
        
        .player-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        
        .player-card.selected {
            border-color: #ffd700 !important;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
        }
        
        .player-card.selected .check-indicator {
            background: linear-gradient(135deg, #ffd700, #ffaa00);
        }
        
        .mode-btn {
            transition: all 0.3s ease;
        }
        
        .mode-btn:hover {
            transform: scale(1.02);
        }
        
        .mode-btn.active {
            transform: scale(1.05);
        }
        
        .glow-green {
            box-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
        }
        
        .glow-red {
            box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
        }
        
        .scrollbar-custom::-webkit-scrollbar {
            width: 8px;
        }
        
        .scrollbar-custom::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }
        
        .scrollbar-custom::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 10px;
        }
        
        .scrollbar-custom::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 215, 0, 0.7);
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .start-btn {
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            transition: all 0.3s ease;
        }
        
        .start-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
        }
        
        .start-btn:disabled {
            background: linear-gradient(135deg, #444, #333);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .avatar-placeholder {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .search-input:focus {
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
        }

        /* Modal Styles */
        .modal-overlay {
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
        }

        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            pointer-events: none;
            animation: confetti-fall 3s linear forwards;
        }

        @keyframes confetti-fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }

        .battle-arena {
            background: radial-gradient(ellipse at center, #1a1a3e 0%, #0f0f23 50%, #050510 100%);
        }
		
		/* MODO FUTEBOL/
		
		/* Placar de TV */
        .soccer-scoreboard {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(15, 23, 42, 0.9); /* Fundo escuro semitransparente */
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            padding: 8px 24px;
            display: flex;
            align-items: center;
            gap: 20px;
            z-index: 50; /* Fica acima de tudo */
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
        }

        .score-number {
            font-size: 24px;
            font-weight: 800;
            font-family: 'Courier New', monospace; /* Fonte estilo digital */
            min-width: 30px;
            text-align: center;
        }

        .team-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
            box-shadow: 0 0 5px currentColor;
        }

        /* Animação de GOL Melhorada */
        .goal-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.85); /* Fundo mais escuro para destaque */
            z-index: 60;
            animation: fadeIn 0.2s;
            backdrop-filter: blur(5px);
        }
        
        .goal-title {
            font-size: 80px;
            font-weight: 900;
            color: #fbbf24;
            line-height: 1;
            text-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
            animation: bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .goal-team {
            font-size: 32px;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 20px;
            letter-spacing: 2px;
            text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
        }

        .goal-player-container {
            position: relative;
            width: 120px;
            height: 120px;
            animation: popIn 0.5s 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform: scale(0); /* Começa invisível */
        }

        .goal-avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid white;
            box-shadow: 0 0 30px rgba(255,255,255,0.3);
        }

        .goal-player-name {
            margin-top: 15px;
            font-size: 24px;
            font-weight: 700;
            color: white;
            background: rgba(255,255,255,0.1);
            padding: 5px 20px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.2);
            animation: slideUp 0.5s 0.5s forwards;
            opacity: 0;
            transform: translateY(20px);
        }

        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes popIn {
            to { transform: scale(1); }
        }

        @keyframes slideUp {
            to { opacity: 1; transform: translateY(0); }
        }
		
        /* CSS DO CAMPO - VERSÃO CORRIGIDA */
        .soccer-field {
            /* Força o fundo verde com !important para não ser sobrescrito */
            background: repeating-linear-gradient(
                90deg,
                #2e7d32,
                #2e7d32 10%,
                #388e3c 10%,
                #388e3c 20%
            ) !important;
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden; /* Garante que nada saia da tela */
            border: 4px solid #fff;
            box-sizing: border-box;
        }

        /* Linhas brancas do campo */
        .field-line {
            position: absolute;
            border: 2px solid rgba(255, 255, 255, 0.7);
            pointer-events: none;
            z-index: 1; /* Fica acima do gramado, abaixo da bola */
        }

        .mid-line {
            left: 50%; top: 0; bottom: 0;
            width: 2px;
            background: rgba(255, 255, 255, 0.7);
            transform: translateX(-50%);
        }

        .center-circle {
            left: 50%; top: 50%;
            width: 150px; height: 150px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        .penalty-area-left {
            left: 0; top: 25%; bottom: 25%;
            width: 15%;
            border-left: none;
        }

        .penalty-area-right {
            right: 0; top: 25%; bottom: 25%;
            width: 15%;
            border-right: none;
        }

        /* Traves */
        /* --- ATUALIZAÇÃO DAS TRAVES --- */
        .goal-post {
            position: absolute;
            top: 40%; 
            bottom: 40%;
            width: 10px; /* Um pouco mais grossa */
            background: #e5e7eb; /* Cinza claro para não sumir na borda branca */
            border: 2px solid #9ca3af; /* Borda cinza para contraste */
            z-index: 5;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.5); /* Sombra para dar profundidade */
        }
        
        /* Afastamos 2px da borda para não colar na linha lateral */
        .goal-left { 
            left: 2px; 
            border-radius: 0 6px 6px 0; /* Arredonda para dentro */
        }
        
        .goal-right { 
            right: 2px; 
            border-radius: 6px 0 0 6px; /* Arredonda para dentro */
        }

        /* Redes - Ajustadas para ficarem visíveis DENTRO do campo */
        .goal-net {
            position: absolute;
            top: 40%; bottom: 40%;
            width: 30px;
            border: 2px solid rgba(255,255,255,0.3);
            background-image: radial-gradient(white 1px, transparent 0);
            background-size: 4px 4px;
            z-index: 1;
        }
        .net-left { left: 2px; } /* Encosta na trave esquerda */
        .net-right { right: 2px; } /* Encosta na trave direita */
        
        /* Estrelas no fundo */
        .battle-arena::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, white, transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
                radial-gradient(1px 1px at 90px 40px, white, transparent),
                radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.7), transparent),
                radial-gradient(1px 1px at 230px 80px, white, transparent),
                radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.6), transparent),
                radial-gradient(1px 1px at 370px 50px, white, transparent),
                radial-gradient(2px 2px at 440px 180px, rgba(255,255,255,0.8), transparent),
                radial-gradient(1px 1px at 520px 90px, white, transparent),
                radial-gradient(2px 2px at 600px 200px, rgba(255,255,255,0.5), transparent);
            background-repeat: repeat;
            background-size: 650px 250px;
            opacity: 0.5;
            pointer-events: none;
            animation: twinkle 4s ease-in-out infinite;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }

        .player-battle {
            transition: transform 0.1s ease;
        }
        
        .player-battle.hit {
            animation: hit-flash 0.2s ease;
        }
        
        @keyframes hit-flash {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(2) drop-shadow(0 0 10px white); }
        }
        
        .collision-spark {
            position: absolute;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, #ffd700, #ff6b00, transparent);
            border-radius: 50%;
            pointer-events: none;
            animation: spark 0.3s ease-out forwards;
        }
        
        @keyframes spark {
            0% { transform: scale(0); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }
        
        .death-effect {
            position: absolute;
            width: 60px;
            height: 60px;
            pointer-events: none;
            animation: death 0.5s ease-out forwards;
        }
        
        @keyframes death {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); }
            100% { transform: scale(2); opacity: 0; }
        }

        .health-bar {
            transition: width 0.3s ease;
        }
		
		/* RESERVADO PARA ANUNCIOS */
		/* --- ESTILO DOS ANÚNCIOS (A-ADS) --- */
        .ad-banner-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px; /* Altura fixa para não empurrar o jogo demais */
            background: #0f0f23;
            border-top: 1px solid rgba(255, 215, 0, 0.3);
            z-index: 99999; /* Z-index alto para ficar acima de tudo */
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
        }

        .ad-content {
            width: 100%;
            max-width: 728px; /* Limita a largura para parecer um banner padrão */
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1a2e;
        }

        .ad-badge {
            position: absolute;
            top: -10px;
            left: 10px;
            background: #333;
            color: #aaa;
            font-size: 9px;
            padding: 2px 5px;
            border-radius: 3px;
            text-transform: uppercase;
            z-index: 10;
        }

        .ad-visual {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .ad-close {
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            color: #666;
            font-size: 24px;
            background: rgba(0,0,0,0.5);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .ad-close:hover { color: white; background: red; }

        /* AJUSTES DE LAYOUT DO JOGO (Para não cobrir botões) */
        
        /* Levanta a barra de botões da tela inicial */
        .fixed.bottom-0 {
            bottom: 60px !important; 
            transition: bottom 0.3s;
        }

        /* Encolhe a Arena dentro do Modal */
        #battleModal .glass-card {
            height: calc(85vh - 65px) !important; /* Ajusta altura */
            margin-bottom: 60px; /* Cria espaço embaixo */
        }
		/* ANUNCIOS LATERAIS */
		
		/* --- ANÚNCIOS LATERAIS (SKYSCRAPER) --- */
        .side-ad-container {
            position: fixed;
            top: 50%;
            transform: translateY(-50%); /* Centraliza verticalmente */
            width: 160px;
            height: 600px;
            z-index: 90; /* Fica acima do fundo, mas abaixo de menus importantes */
            display: flex;
            align-items: center;
            justify-content: center;
            /* Efeito visual opcional para destacar o banner */
            background: rgba(0, 0, 0, 0.2); 
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 8px;
        }

        .left-side {
            left: 10px;
        }

        .right-side {
            right: 10px;
        }

        /* --- SEGURANÇA VISUAL (IMPORTANTE) --- */
        /* Esconde os anúncios laterais se a tela for muito estreita */
        /* O jogo ocupa +- 900px. Anúncios ocupam 320px. Margem segura = 1300px */
        @media (max-width: 1350px) {
            .side-ad-container {
                display: none !important;
            }
        }
        
        /* Se a tela for muito baixa (altura), também esconde para não cortar */
        @media (max-height: 650px) {
            .side-ad-container {
                display: none !important;
            }
        }
		
		/* ==================== JS TECH: ESTILO DOS ANÚNCIOS PRO ==================== */

/* Container Principal dos Anúncios Laterais */
.side-ad-container {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 170px; /* Um pouco mais largo que o banner para a moldura */
    height: 610px; /* Altura ajustada */
    z-index: 90;
    
    /* Visual "Glass" Tech */
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 215, 0, 0.15); /* Borda sutil dourada */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    
    /* Centralizar o iframe */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    
    /* Transição suave ao aparecer */
    transition: all 0.3s ease;
}

/* Efeito de brilho ao passar o mouse na área do anúncio */
.side-ad-container:hover {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.1);
}

/* Label "Publicidade" estilo Tech */
.ad-label-tech {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 5px;
    font-weight: bold;
}

.left-side { left: 20px; }
.right-side { right: 20px; }

/* Barra de Anúncio Inferior - Mais integrada */
.ad-banner-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; /* Altura fixa */
    background: rgba(10, 10, 20, 0.95); /* Quase sólido para leitura */
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}

/* Ajuste Fino do Botão Iniciar quando o anúncio existe */
/* Levanta o botão um pouco mais para não colar no banner */
.fixed.bottom-0 {
    bottom: 80px !important; /* 70px do banner + 10px de respiro */
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(to top, rgba(15, 15, 35, 1), transparent); /* Gradiente mais suave */
    padding-bottom: 10px;
}

/* ==================== LÓGICA DE RESPONSIVIDADE INTELIGENTE ==================== */

/* Esconde laterais em telas menores que 1400px (Segurança visual) */
@media (max-width: 1400px) {
    .side-ad-container {
        display: none !important;
    }
}

/* Esconde se a altura for muito pequena (ex: celular deitado) */
@media (max-height: 700px) {
    .side-ad-container {
        display: none !important;
    }
}

/* --- O TRUQUE MÁGICO JS TECH --- */
/* Se a tela for GRANDE (tem anúncios), aperta o conteúdo no meio */
@media (min-width: 1401px) {
    main.container {
        max-width: 1000px !important; /* Força o conteúdo a ficar no centro */
        transition: max-width 0.3s ease;
    }
}

/* ==================== JS TECH: UPGRADE VISUAL ==================== */

/* Remove qualquer resquício do banner inferior antigo */
.ad-banner-container {
    display: none !important;
}

/* Animação do Gradiente Metálico (Shine Effect) */
@keyframes gradient-x {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-x {
    animation: gradient-x 3s ease infinite;
}

/* Ajuste para telas grandes (já que removemos o banner de baixo, mas mantivemos os laterais) */
/* Isso garante que o botão não fique "espremido" pelos banners laterais se eles existirem */
@media (min-width: 1400px) {
    .fixed.bottom-6 .container {
        /* O botão fica centralizado e respeita o espaço visual */
        max-width: 600px !important; 
    }
}

/* Removemos o fundo preto pesado da parte inferior para ficar clean */
.fixed.bottom-0 {
    background: none !important;
}