/* Fundo Totalmente Escuro e Blindado */
html, body { 
	background-color: #010214 !important; 
	color: white; 
	margin: 0; 
	padding: 0; 
	min-height: 100vh;
	overflow-x: hidden;
}

.main-container { padding: 0px 20px; margin:0;}

/* Header Estilo Glassmorphism */
.header-neotec {
	background: rgba(13, 110, 253, 0.05);
	backdrop-filter: blur(15px);
	border: 1px solid rgba(13, 110, 253, 0.2);
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}

/* O botão principal do seletor */
.neotec-dropdown-btn {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 15px;
    padding: 12px 25px;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.neotec-dropdown-btn:hover, .neotec-dropdown-btn:focus {
    border-color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    background: rgba(20, 20, 20, 0.8);
}

/* A lista que abre */
.neotec-dropdown-menu {
    background: rgba(15, 15, 15, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    min-width: 250px !important;
    max-height: 400px; /* Limita altura se tiver MUITOS anos */
    overflow-y: auto;
}

/* Itens da lista */
.neotec-dropdown-menu .dropdown-item {
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 2px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s;
}

.neotec-dropdown-menu .dropdown-item:hover {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
    padding-left: 20px;
}

.neotec-dropdown-menu .dropdown-item.active {
    background: #00ffff !important;
    color: #000 !important;
}

.neotec-dropdown-menu .dropdown-header {
    color: #00ffff;
    font-size: 0.7rem;
    letter-spacing: 3px;
    padding: 10px 15px;
}

/* Brilho no ícone ciano */
.text-glow-blue {
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

/* Efeito de Brilho no Logo do Header */
.logo-cup {
	width: 90px;
	filter: drop-shadow(0 0 15px #0d6efd);
	animation: pulse-glow 2s infinite alternate;
}
@keyframes pulse-glow {
	from { transform: scale(1); filter: drop-shadow(0 0 10px #0d6efd); }
	to { transform: scale(1.05); filter: drop-shadow(0 0 25px #00f2ff); }
}

/* =========================================================
   AJUSTES DE ESCALA PARA HEADER E NAV (MOBILE)
========================================================= */

@media (max-width: 768px) {
    /* 1. Força o conteúdo do Header a ficar em pé (vertical) */
    .header-neotec .d-flex.align-items-center.justify-content-center {
        flex-direction: column !important;
        gap: 15px;
    }

    /* 2. Diminui o Título Gigante (Display-3) por completo */
    .header-neotec h1.display-3 {
        font-size: 1.4rem !important; /* Redução drástica para não vazar */
        margin: 10px 0 !important;   /* Tira o mx-4 que empurra pro lado */
        text-align: center;
        white-space: normal !important; /* Permite quebrar linha se precisar */
    }

    /* 3. Diminui o Logo */
    .logo-cup {
        width: 60px !important;
    }

    /* 4. Ajusta a divisória do Gemini que vira uma linha horizontal */
    .header-neotec .d-flex.gap-2 {
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-left: 0 !important;
        padding-top: 10px;
        justify-content: center;
        width: 100%;
    }

    .header-neotec .bi-gemini {
        font-size: 1.5rem !important; /* Diminui o ícone do bot */
    }
}
/* Ajuste fino para o container principal não vazar */
.main-container {
    overflow-x: hidden;
}

/* Navegação por Abas Customizada */
/* Container das abas */
.custom-champions-tabs {
    border-bottom: 2px solid #00d2ff !important;
    gap: 8px;
    padding-left: 20px;
	cursor: grab; /* Cursor de "mãozinha" aberta */
    user-select: none; /* Impede de selecionar o texto ao arrastar */
}

.custom-champions-tabs:active {
    cursor: grabbing; /* Cursor de "mãozinha" fechada ao clicar */
}

/* O Botão da Aba */
.custom-champions-tabs .nav-link {
    background: rgba(0, 10, 40, 0.8) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    border-bottom: none !important;
    border-radius: 15px 15px 0 0; /* CURVA PARA CIMA AQUI */
    padding: 10px 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease;
}

/* Efeito quando a aba está ATIVA */
.custom-champions-tabs .nav-link.active {
    background: #00d2ff !important; /* Fundo azul brilhante */
    color: #010214 !important;    /* Texto escuro para contraste */
    font-weight: bold;
    border: 1px solid #00d2ff !important;
    box-shadow: 0 -5px 15px rgba(0, 210, 255, 0.4);
    transform: translateY(-2px); /* Leve subida para destaque */
}

/* Ícones dentro da aba ativa */
.custom-champions-tabs .nav-link.active i {
    color: #010214 !important;
}

/* Hover suave */
.custom-champions-tabs .nav-link:hover:not(.active) {
    color: #00d2ff !important;
    background: rgba(0, 210, 255, 0.1) !important;
    border-color: #00d2ff !important;
}

/* =========================================================
   AJUSTE EXCLUSIVO PARA O MENU NO CELULAR (RESOLVE O BUG)
========================================================= */

@media (max-width: 768px) {
    /* 1. Força as abas a ficarem em uma linha infinita sem quebrar */
    .custom-champions-tabs {
        display: flex !important;
        flex-wrap: nowrap !important; /* Impede de cair para a linha de baixo */
        overflow-x: auto !important;   /* Ativa o deslize lateral */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch; /* Deixa o scroll suave no iPhone */
        padding-left: 10px !important;  /* Diminui o recuo lateral */
        padding-bottom: 2px !important; /* Espaço para não cortar o brilho */
        scrollbar-width: none;          /* Esconde barra no Firefox */
    }

    /* 2. Esconde a barra de rolagem no Chrome/Safari para ficar limpo */
    .custom-champions-tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* 3. Garante que cada aba mantenha seu tamanho e não encolha */
    .custom-champions-tabs .nav-item {
        flex: 0 0 auto !important; 
    }

    /* 4. Ajuste de tamanho para o texto caber melhor no mobile */
    .custom-champions-tabs .nav-link {
        padding: 8px 15px !important;
        font-size: 0.65rem !important; /* Texto levemente menor */
        white-space: nowrap !important; /* Impede o texto de quebrar linha */
    }

    /* 5. Ajuste na curva e no transform para não bugar no touch */
    .custom-champions-tabs .nav-link.active {
        transform: translateY(-1px) !important;
        box-shadow: 0 -3px 10px rgba(0, 210, 255, 0.3);
    }
}

@media (max-width: 768px) {
    .custom-champions-tabs {
        /* ... (seu código anterior) ... */
        
        /* Adicionamos uma sombra interna sutil na direita */
        /* Isso mostra que existe conteúdo 'atrás' da borda */
        background-image: linear-gradient(to right, #010214, transparent 5%, transparent 95%, #010214);
        background-attachment: local, scroll, scroll, local;
    }

    /* Opcional: Um pequeno aviso visual de "Arraste" */
    .custom-champions-tabs::after {
        content: "➔";
        position: absolute;
        right: 5px;
        color: #00d2ff;
        font-size: 0.8rem;
        animation: pulseSeta 2s infinite;
        opacity: 0.5;
    }
}

@keyframes pulseSeta {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.nav-tabs {
    border-bottom: 2px solid rgba(0, 210, 255, 0.2);
    gap: 5px;
}

.nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    border: none !important;
    transition: all 0.3s ease;
}

.nav-link i {
    font-size: 1rem;
    color: #00d2ff; /* Azul Neon nos ícones */
    transition: 0.3s;
}

.nav-link.active {
    background-color: rgba(0, 210, 255, 0.1) !important;
    color: #fff !important;
    border-bottom: 3px solid #00d2ff !important;
}

.nav-link.active i {
    text-shadow: 0 0 10px #00d2ff; /* Efeito de brilho no ícone ativo */
}

.nav-link:hover {
    color: #00d2ff !important;
}

/* Estrutura Atualizada para 5 COLUNAS (Incluindo Oitavas) */
.bracket-wrapper {
    display: grid;
    /* 4 colunas: Quartas, Semi, Final, Campeão */
    grid-template-columns: repeat(3, 280px) 350px; 
    justify-content: start;
    gap: 80px;
	min-height: 600px;
    padding: 40px;
    overflow-x: none;
}

.bracket-column { display: flex; flex-direction: column; height: 100%; position: relative; }
.match-container { display: flex; flex-direction: column; justify-content: space-around; height: 100%; }

/* Animação para o Emoji de Bola */
@keyframes spin-emoji {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.emoji-bola-spin {
    display: inline-block; /* Necessário para o transform funcionar */
    animation: spin-emoji 5s linear infinite;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.placeholder-match {
    background: rgba(255, 255, 255, 0.03) !important;
    transition: 0.3s;
}

.placeholder-match:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    opacity: 0.7 !important;
}

/* Centralização das colunas 2, 3 e 4 */
.bracket-column:nth-child(n+2) .match-card, 
.bracket-column:nth-child(n+2) .champion-card { margin: auto 0; }

/* Cards Futuristas Padrão */
.match-card {
	background: linear-gradient(135deg, rgba(0, 31, 132, 0.7) 0%, rgba(0, 14, 117, 0.8) 100%);
	border: 1px solid rgba(13, 115, 248, 0.4);
	border-radius: 12px;
	padding: 12px;
	position: relative;
	z-index: 5;
	transition: 0.3s;
}
.match-card:hover { border-color: #00f2ff; box-shadow: 0 0 20px rgba(0, 242, 255, 0.3); }

/* Linhas Neon de Conexão */
/* Linha Horizontal Padrão para todas as colunas exceto a última */
.bracket-column:not(:last-child) .match-card::after {
    content: ""; position: absolute; right: -82px; top: 50%; width: 82px; height: 2px; background: #0d73f8; box-shadow: 0 0 8px #0d73f8;
}

/* --- AJUSTE DAS CONEXÕES CHAMPIONS NEOTEC --- */

/* 1. Quartas -> Semi (Coluna 1) */
.bracket-column:nth-child(1) .match-card:nth-child(odd)::before {
    content: ""; position: absolute; right: -82px; top: 50%; width: 2px; height: 110px; background: #0d73f8;
}
.bracket-column:nth-child(1) .match-card:nth-child(even)::before {
    content: ""; position: absolute; right: -82px; bottom: 50%; width: 2px; height: 110px; background: #0d73f8;
}

/* 2. Semi -> Final (Coluna 2) */
.bracket-column:nth-child(2) .match-card:nth-child(odd)::before {
    content: ""; position: absolute; right: -82px; top: 50%; width: 2px; height: 220px; background: #0d73f8;
}
.bracket-column:nth-child(2) .match-card:nth-child(even)::before {
    content: ""; position: absolute; right: -82px; bottom: 50%; width: 2px; height: 220px; background: #0d73f8;
}

/* 3. Final -> Campeão (Coluna 3) */
/* REMOVE A LINHA VERTICAL QUE SOBRA NA FINAL */
.bracket-column:nth-child(3) .match-card::before {
    content: none !important;
    display: none !important;
}

/* AJUSTA A LINHA HORIZONTAL PARA SAIR RETA PARA O CAMPEÃO */
.bracket-column:nth-child(3) .match-card::after {
    background: linear-gradient(to right, #0d73f8, #ffc107) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 82px !important;
}

/* Garante que o card da Final e o do Campeão fiquem alinhados verticalmente */
.bracket-column:nth-child(3) .match-container,
.bracket-column:nth-child(4) {
    justify-content: center !important;
}

/* --- CONEXÃO FINAL -> CAMPEÃO --- */
.bracket-column:nth-child(4) .match-card::after {
    width: 82px;
    background: linear-gradient(to right, #0d73f8, #ffc107); /* Linha vira ouro! */
}

/* Placares Neon Ciano */
.score {
	font-weight: 900;
	color: #00f2ff;
	text-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
	background: rgba(0,0,0,0.4);
	padding: 2px 10px;
	border-radius: 5px;
	min-width: 38px;
	text-align: center;
}

/* ========================================= */
/* NOVO CARD EXCLUSIVO DO CAMPEÃO (COLUNA 4) */
/* ========================================= */
.champion-card {
	background: linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(0, 0, 0, 1) 100%);
	border: 2px solid #ffc107;
	border-radius: 20px;
	padding: 30px;
	text-align: center;
	box-shadow: 0 0 40px rgba(255, 193, 7, 0.4);
	position: relative;
	overflow: hidden;
	transition: 0.5s;
}
.champion-card:hover { transform: scale(1.05); box-shadow: 0 0 60px rgba(255, 193, 7, 0.6); }

/* Efeito de Luz Girando (Border-Beam) */
.champion-card::before {
	content: "";
	position: absolute;
	top: -50%; left: -50%;
	width: 200%; height: 200%;
	background: conic-gradient(from 0deg, transparent 20%, #ffc107 25%, transparent 30%);
	animation: border-rotate 4s infinite linear;
	z-index: 1;
}
.champion-card-inner { position: relative; z-index: 2; background: #010214; border-radius: 18px; padding: 10px; }
@keyframes border-rotate { 100% { transform: rotate(360deg); } }

/* Efeito Troféu 3D */
.trophy-champion {
	font-size: 5rem;
	color: #ffc107;
	filter: drop-shadow(0 0 25px #ffc107);
	animation: rotate-y 4s infinite linear;
	margin-bottom: 15px;
}
@keyframes rotate-y { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

/* Logo do Campeão */
.champion-logo {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 4px solid #ffc107;
	box-shadow: 0 0 20px #ffc107;
	margin-bottom: 20px;
	object-fit: contain;
	background: white;
	padding: 5px;
}

/* Nome do Time Campeão */
.champion-name {
	font-size: 2rem;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-top: 10px;
	text-shadow: 0 0 10px #ffc107;
}
.text-gold { color: #ffc107; font-weight: bold; text-transform: uppercase; }
/* Cores da Gemini (Gradiente Ciano/Roxo Elétrico) */
.text-gemini {
	background: linear-gradient(135deg, #00f2ff, #a200ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 5px rgba(162, 0, 255, 0.5));
}

/* Brilho Azul Neotec */
.text-glow-blue {
	text-shadow: 0 0 15px rgba(13, 110, 253, 0.7);
}

/* Efeito Pulse/Giro no Bot Gemini */
.logo-gemini-bot {
	animation: gemini-pulse 4s infinite ease-in-out;
	display: inline-block;
}
@keyframes gemini-pulse {
	0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 5px #00f2ff); }
	50% { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 0 15px #a200ff); }
	100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 5px #00f2ff); }
}

/* Efeito de Fundo Fotônico (Partículas de Luz rodando ao fundo) */
.photonic-glow {
	position: absolute;
	top: -50%; left: -50%;
	width: 200%; height: 200%;
	background: conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(0, 242, 255, 0.1) 180deg, transparent 360deg);
	animation: photonic-rotate 10s infinite linear;
	opacity: 0.3;
	z-index: 1;
}
@keyframes photonic-rotate {
	100% { transform: rotate(360deg); }
}

/* Estilo das Tabelas de Grupos - Neo Sportv */
.group-container {
    background: rgba(13, 110, 253, 0.05);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

.table-neotec {
    color: white;
    border-collapse: separate;
    border-spacing: 0 8px; /* Espaço entre as linhas */
}

.table-neotec thead th {
    border: none;
    color: #00f2ff;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding-bottom: 15px;
}

.table-neotec tbody tr {
    background: rgba(0, 31, 132, 0.3);
    transition: 0.3s;
}

.table-neotec tbody tr:hover {
    background: rgba(13, 110, 253, 0.4);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
}

.table-neotec td {
    padding: 12px;
    border: none;
    vertical-align: middle;
}

/* Bordas arredondadas para as linhas */
.table-neotec tbody tr td:first-child { border-radius: 10px 0 0 10px; border-left: 3px solid transparent; }
.table-neotec tbody tr td:last-child { border-radius: 0 10px 10px 0; }

/* Zonas de Classificação */
.zone-qualifier td:first-child { border-left: 3px solid #00f2ff !important; } /* G2 que avançam */
.zone-relegation td:first-child { border-left: 3px solid #ff4b2b !important; } /* Eliminados */

.team-flag {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 10px;
}

.fw-bold-cyan { color: #00f2ff; font-weight: bold; }

.group-container, .tabela-jogos-mini {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Marca d'água do logo Neo */
.group-container::before, .neo_champions::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; /* Ajuste o tamanho conforme achar melhor */
    height: 300px;
    background-image: url('../../img/neo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.08; /* Bem sutil para não atrapalhar a leitura */
    z-index: -1;
}
/* Fim css dos grupos */
/* Tabela de Jogos */
/* Botão Estilo Vidro Ciano com Borda Lateral */
.container-btn-jogos {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.btn-ver-jogos {
    background: rgba(0, 255, 255, 0.2); /* Fundo ciano com transparência (vidro) */
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo */
    border: none;
    border-left: 4px solid #00ffff; /* A borda que você gostou */
    color: #00ffff;
    padding: 10px 20px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
}

.btn-ver-jogos:hover {
    background: rgba(26, 115, 232, 0.4); /* Um azul mais Shadow fechado e profissional */
    color: #fff; /* Texto branco fica melhor nesse azul que o preto */
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.4); /* Brilho mais sutil */
    transform: scale(1.05);
    border-left: 4px solid #f4f4f4; /* Sua borda branca de contraste */
}

/* Ajuste no ícone de bola para girar levemente no hover */
.btn-ver-jogos:hover i {
    transform: rotate(180deg);
    transition: 0.5s;
}

/* Títulos dos blocos de jogos */
.header-tipo-jogo {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.15), transparent);
    color: #00ffff;
    border-left: 3px solid #00ffff;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 15px 0 10px 0;
}

/* Container dos jogos com animação FIFA Style */
/* Estilo do Container de Jogos */
.tabela-jogos-mini {
    background: rgba(15, 15, 25, 0.8);
    border-radius: 12px;
    padding: 10px;
    border: 1px solid rgba(0, 198, 255, 0.2);
}

/* Item de Jogo individual */
.jogo-item-ux {
    padding: 12px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s;
}

.jogo-item-ux:last-child { border-bottom: none; }

.jogo-item-ux:hover {
    background: rgba(0, 123, 255, 0.1);
}

/* Containers de Time */
.time-container {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
}

.logo-clube-ux {
    width: 35px;
    height: 35px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

/* Placar Estilizado */
.placar-box {
    background: #000;
    color: #fff;
    padding: 2px 15px;
    border-radius: 5px;
    font-family: 'Orbitron', sans-serif; /* Fonte digital/gamer */
    border: 1px solid #00c6ff;
    min-width: 80px;
}

.gols {
    font-size: 1.2rem;
    color: #00c6ff;
    font-weight: 900;
}

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

.jogo-meta {
    width: 60px;
}

/* Animação suave para o Collapse */
.collapse {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Container do time */
.time-container {
    overflow: hidden; /* Evita que nomes muito longos quebrem a linha */
}

/* Nome do time da esquerda */
.time-container.justify-content-end .nome-time {
    margin-right: 5px; /* Espaço pequeno entre nome e logo */
    white-space: nowrap;
}

/* Nome do time da direita */
.time-container.justify-content-start .nome-time {
    margin-left: 5px; /* Espaço pequeno entre logo e nome */
    white-space: nowrap;
}

/* Ajuste dos Logos para não ficarem desproporcionais */
.logo-clube-ux {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0; /* Impede o logo de amassar */
}

/* Placar mais robusto para separar bem os lados */
.placar-box {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #00c6ff;
    border-radius: 4px;
    padding: 2px 10px;
    min-width: 90px;
    text-align: center;
}

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

/* Estilização dos itens de jogo */
.jogo-item {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.jogo-item:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 15px; /* Leve deslize ao passar o mouse */
}

.jogo-item span {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* O Badge do Placar */
.badge-placar {
    background: linear-gradient(90deg, #007bff, #00c6ff);
    border: none;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    padding: 5px 12px;
    font-family: 'Orbitron', sans-serif; /* Se tiver uma fonte gamer */
}
/* Card de Destaque do Artilheiro */
.golden-boot-card {
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.1), rgba(0, 0, 0, 0.5));
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 20px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.golden-boot-card::after {
    content: "\f222"; /* Ícone de chuteira ou troféu do Bootstrap Icons */
    font-family: bootstrap-icons;
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 8rem;
    color: rgba(255, 193, 7, 0.05);
}

.player-photo-main {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 3px solid #ffc107;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
    object-fit: cover;
}

/* Lista de Artilheiros */
.scorer-row {
    background: rgba(13, 110, 253, 0.05);
    border: 1px solid rgba(13, 110, 253, 0.1);
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 10px 30px;
    transition: 0.3s;
}

.scorer-row:hover {
    background: rgba(13, 110, 253, 0.15);
    border-color: #00f2ff;
}

.goal-count {
    font-family: 'Orbitron', sans-serif; /* Ou uma fonte técnica */
    font-weight: 900;
    color: #00f2ff;
    font-size: 1.2rem;
}

/* Container de Mídia */
.shadow-neo {
    box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.05), 0 5px 15px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.result-item {
    border-left: 3px solid #00ffff;
    transition: 0.3s;
}

.result-item:hover {
    background: rgba(0, 255, 255, 0.1) !important;
}

.news-ticker {
    background: rgba(255, 193, 7, 0.05);
    padding: 10px;
    border-radius: 5px;
    border: 1px dashed rgba(255, 193, 7, 0.3);
}

.media-card {
    background: rgba(13, 110, 253, 0.05);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s;
    backdrop-filter: blur(10px);
}

.media-card:hover {
    transform: translateY(-5px);
    border-color: #00f2ff;
    box-shadow: 0 5px 15px rgba(0, 242, 255, 0.2);
}

/* Container que mantém o vídeo sempre na proporção de TV (16:9) */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px 12px 0 0; /* Arredonda só em cima para emendar na legenda */
    background: #000;
}

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

/* Card de Mídia Estilo Neo */
.media-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.media-card:hover {
    border-color: #00ffff; /* Brilho ciano no hover */
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    transform: translateY(-5px);
}

/* TV NEOSPORTV */

.neo-player-container {
    position: relative;
    width: 100%;
    /* Mantém a proporção 16:9 perfeita */
    aspect-ratio: 16 / 9; 
    background: #000;
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    overflow: hidden;
}

#meuVideo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preenche todo o espaço do player */
}

/* O Logo flutuando no vídeo */
.player-logo-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80px;
    opacity: 0.6;
    pointer-events: none; /* Não atrapalha o clique */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}
/* Marca d'água Neo Sportv */
.neo-brand-watermark {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 60px;
    z-index: 10;
    opacity: 0.6;
    pointer-events: none; /* Não atrapalha o clique */
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}
/* Barra de controles estilo Vidro Ciano */
.neo-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0; /* Esconde e só mostra no hover */
    transition: 0.3s;
	z-index: 5;
    pointer-events: auto;
}

.neo-player-container:hover .neo-controls {
    opacity: 1;
}

.btn-neo-play {
    background: #00ffff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #000;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.btn-neo-play:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}


.btn-neo-icon {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    transition: 0.3s;
}

/* Botões de controle com brilho */
.btn-neo-play, .btn-neo-icon {
    transition: 0.3s ease;
    cursor: pointer;
}

.btn-neo-icon:hover {
    color: #00ffff;
    transform: scale(1.1);
}

.progress-bar-neo {
    cursor: pointer;
    transition: height 0.2s;
}

.progress-bar-neo:hover {
    height: 8px !important; /* Engrossa levemente ao passar o mouse */
}

.progress-filled {
    height: 100%;
    background: #00ffff;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
    transition: width 0.1s linear;
}

/* Garante que a interface suba para cima do vídeo */
.player-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fica acima do vídeo */
    z-index: 5; 
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Container principal do card de vídeo */
.media-card-premium {
    background: rgba(10, 15, 26, 0.4); /* Fundo super escuro */
    backdrop-filter: blur(15px); /* Desfoque de vidro */
    border: 1px solid rgba(0, 198, 255, 0.1); /* Borda ciano sutil */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
}

.media-card-premium:hover {
    border-color: rgba(0, 198, 255, 0.5); /* Brilho no hover */
    box-shadow: 0 0 30px rgba(0, 198, 255, 0.2);
}

/* A Mágica: Camada da Thumbnail Customizada */
.custom-thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2; /* Fica acima do iframe */
    cursor: pointer;
    transition: opacity 0.5s ease;
}

/* Efeito de Vidro Fosco sobre a imagem */
.custom-thumbnail-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);
    backdrop-filter: blur(2px); /* Desfoque leve na imagem */
}

/* Botão de Play Centralizado */
.play-button-premium {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: #00ffff; /* Ciano Neon */
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    transition: 0.3s;
}

.custom-thumbnail-overlay:hover .play-button-premium {
    color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Classe para esconder a thumbnail quando o vídeo der play */
.custom-thumbnail-overlay.playing {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

/* Container do Vídeo (reaproveitado e ajustado) */
.video-container-premium {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    background: #000;
}

/* Brilho Ciano nos itens da playlist ao passar o mouse */
.playlist-item:hover {
    background: rgba(0, 255, 255, 0.1);
    cursor: pointer;
    transition: 0.3s;
}

.video-container-premium iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ajuste na Galeria para as fotos não ficarem secas */
.photo-item {
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    filter: grayscale(0.5);
}

.photo-item:hover {
    filter: grayscale(0);
    border-color: #00ffff !important;
    transform: scale(1.03);
}

/* Cards de Premiação */
.award-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.6));
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

.award-card:hover {
    border-color: #ffd700;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
    transform: translateY(-10px);
}

.award-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.award-title {
    color: #ffd700;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

.winner-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 10px;
    color: white;
}

.winner-team {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* Selo de Destaque */
.premium-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ffd700;
    color: #000;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 0.7rem;
}
.hover-cyan:hover {
    border-color: #00f2ff !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}
.text-decoration-none:hover .winner-name {
    color: #00f2ff;
}

/* Navbar de Clubes Participantes - Versão Premium NEOTEC */
.club-nav-container {
    background: linear-gradient(180deg, rgba(1, 2, 20, 0.95) 0%, rgba(0, 20, 10, 0.8) 100%);
    border-bottom: 2px solid #00ff8833;
    padding: 15px 0;
    backdrop-filter: blur(15px);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.club-nav-link {
    display: inline-block;
    padding: 10px 20px;
    /* Efeito de Verde Tecnológico em vez de cinza */
    filter: sepia(100%) hue-rotate(90deg) brightness(0.8) opacity(0.7);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    text-decoration: none !important;
}

.club-nav-link:hover, .club-nav-link.active {
    filter: sepia(0%) hue-rotate(0deg) brightness(1.2) opacity(1);
    transform: scale(1.15) translateY(-5px);
}

.club-nav-logo {
    width: 65px; /* Tamanho aumentado para destaque */
    height: 65px;
    object-fit: contain;
    /* Glow constante verde neon sutil */
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.3));
    transition: all 0.3s;
}

.club-nav-link:hover .club-nav-logo {
    /* Explosão de brilho no hover */
    filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.8));
}

.club-nav-name {
    display: block;
    font-size: 11px;
    color: #00ff88; /* Nome em verde neon */
    margin-top: 8px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
}

.club-nav-link:hover .club-nav-name {
    color: #fff;
    text-shadow: 0 0 10px #00ff88;
}

/* Estilo da Linha do Tempo */
/* Estilização da Timeline de Honra */
.history-timeline {
    position: relative;
    padding: 20px 0;
}

.history-item {
    position: relative;
    padding-left: 45px;
    padding-bottom: 30px;
    border-left: 2px solid rgba(0, 242, 255, 0.2);
    transition: all 0.3s ease;
}

/* O "ponto" na linha do tempo */
.history-item::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 3px solid #00f2ff;
    box-shadow: 0 0 10px #00f2ff;
    z-index: 2;
}

.history-item:hover {
    border-left-color: #00f2ff;
    transform: translateX(5px);
}

.history-item:last-child {
    border-left: 2px transparent; /* Remove a linha no último item */
}

/* Tipografia e Distintivos */
.history-year {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    color: #00f2ff;
    line-height: 1;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
}

.history-badge {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 15px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

.history-champion {
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Estilo para os Recordes */
.record-value {
    color: #00f2ff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 242, 255, 0.3);
}

/* Efeito de fundo semi-transparente para o modal */
.modal-content {
    background: linear-gradient(160deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    backdrop-filter: blur(10px);
}

.bg-black-50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.text-cyan-neotec {
    color: #00f2ff;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}

/* Animação suave ao abrir */
.modal.fade .modal-dialog {
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
    transform: scale(1);
}

/* Efeito hover nas linhas da tabela */
.table-hover tbody tr:hover {
    background-color: rgba(0, 242, 255, 0.05) !important;
    transition: background 0.2s ease;
}

.table td {
    padding-top: 15px;
    padding-bottom: 15px;
}
/* Área do Técnico */
/* Cards de Estatísticas do Técnico */
.TecnicoStats .card-stats {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(0, 242, 255, 0.1);
	border-radius: 12px;
	padding: 20px 10px;
	transition: transform 0.3s ease, background 0.3s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.TecnicoStats .card-stats:hover {
	background: rgba(0, 242, 255, 0.05);
	transform: translateY(-5px);
}

.TecnicoStats .card-stats small {
	font-size: 0.7rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 5px;
	font-weight: 600;
}

.TecnicoStats .card-stats h2 {
	font-size: 2rem;
	font-family: 'Orbitron', sans-serif; /* Se você usar fonte tech */
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   SANTUÁRIO DO CAMPEÃO COM ESTANTE PRETA SÓLIDA (CORRIGIDO)
========================================================= */

/* 1. O Alerta/Banner Geral - Mais alto para a estante caber */
.CampeaoTecnicoChampions {
    background: #010214 !important; 
    border: 1px solid rgba(255, 193, 7, 0.4) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    padding-bottom: 20px !important; /* Espaço para o chão */
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0,0,0,0.95), inset 0 0 25px rgba(255, 193, 7, 0.1) !important;
    min-height: 250px; /* Força altura para o troféu não esmagar o texto */
}

/* 2. A ESTANTE PRETA - Agora um objeto sólido */
.CampeaoTecnicoChampions .estante-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    padding-bottom: 0px; /* Coloca o troféu no "chão" */
    min-width: 180px;
    
    /* Cria a base sólida e preta */
    background: #000000 !important; /* PRETO ABSOLUTO */
    border-radius: 12px 12px 0 0; /* Arredondado em cima */
    border: 2px solid rgba(255, 193, 7, 0.5); /* Borda dourada neon */
    border-bottom: none; /* Deixa o fundo reto */
    
    /* Brilho da plataforma onde o troféu pousa */
    box-shadow: 0 -5px 15px rgba(255, 193, 7, 0.3), inset 0 2px 10px rgba(255, 193, 7, 0.2);
}

/* 3. A Placa de Metal na frente da estante (Efeito de Estante) */
.CampeaoTecnicoChampions .row {
    margin-right: 0;
    margin-left: 0;
}

/* Badge estilizada para combinar com o ouro */
.badge-neotec {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.5);
    padding: 5px 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.7rem;
}

/* Ajuste mobile: centraliza a estante se a tela for pequena */
@media (max-width: 768px) {
    .CampeaoTecnicoChampions .estante-container {
        margin-bottom: 20px;
    }
}

.CampeaoTecnicoChampions .estante-container::after {
    content: "TROPHY DISPLAY";
    position: absolute;
    bottom: -15px; /* Posição da placa */
    width: 120px;
    height: 25px;
    background: linear-gradient(135deg, #1a1a1a, #000);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 4px;
    z-index: 5;
    
    /* Texto da Placa */
    color: rgba(255, 193, 7, 0.9);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* 4. O Troféu - Pousado na estante */
.CampeaoTecnicoChampions .trofeu-destaque {
    width: 180px !important; 
    height: auto;
    z-index: 2;
    position: relative;
    filter: drop-shadow(0 0 15px rgba(255, 193, 7, 0.7));
    /* Flutuação suave removida, ele está pousado */
}

/* Deixa o texto do título ainda mais imponente */
.CampeaoTecnicoChampions h5 {
    font-size: 1.8rem !important;
    line-height: 1.2;
    margin-top: 0;
}

.CampeaoTecnicoChampions p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.2rem;
    margin-bottom: 0;
}

/* 6. Animação de Flash Passante Dourado */
.CampeaoTecnicoChampions::before {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.15), transparent);
    animation: flashTrofeu 7s infinite;
}

@keyframes flashTrofeu {
    0% { left: -150%; }
    15% { left: 150%; }
    100% { left: 150%; }
}

/* Animações */
@keyframes flutuarTrofeu {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* Estilos extras para o rodapé */
.hover-cyan { transition: 0.3s; }
.hover-cyan:hover { color: #00f2ff !important; transform: translateY(-3px); filter: drop-shadow(0 0 8px #00f2ff); }

/* Garante que o conteúdo não cole no fim da tela em resoluções menores */
.main-container { min-height: calc(100vh - 150px); }