:root {
    /* CONTROLES PRINCIPAIS - Altere apenas aqui se precisar mudar o tamanho */
    --card-h: 64px;    /* Altura exata da caixa do jogo */
    --card-w: 180px;   /* Largura da caixa */
    --gap-r1: 16px;    /* Espaçamento vertical entre os jogos no Round 1 */
    --col-gap: 40px;   /* Espaçamento horizontal entre os rounds (comprimento da linha) */
    
    --line-w: 2px;
    --line-color: #94a3b8;

    /* =========================================
       FÓRMULAS MATEMÁTICAS (NÃO ALTERE)
       Calculam a distância exata pixel por pixel
       ========================================= */
    
    /* 1. Distância entre os centros dos cards de cada round */
    --c2c-1: calc(var(--card-h) + var(--gap-r1));
    --c2c-2: calc(var(--c2c-1) * 2);
    --c2c-3: calc(var(--c2c-2) * 2);
    --c2c-4: calc(var(--c2c-3) * 2);

    /* 2. Deslocamento do PRIMEIRO card de cada round para alinhar ao centro (margin-top) */
    --mt-1: 0px;
    --mt-2: calc(var(--mt-1) + (var(--c2c-1) / 2));
    --mt-3: calc(var(--mt-2) + (var(--c2c-2) / 2));
    --mt-4: calc(var(--mt-3) + (var(--c2c-3) / 2));

    /* 3. Espaço exato entre os cards subsequentes (margin-bottom) */
    --mb-1: calc(var(--c2c-1) - var(--card-h));
    --mb-2: calc(var(--c2c-2) - var(--card-h));
    --mb-3: calc(var(--c2c-3) - var(--card-h));
    --mb-4: calc(var(--c2c-4) - var(--card-h));
}

* { box-sizing: border-box; }

.ncaa-bracket-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #f8fafc;
    padding: 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: auto;
}

.bracket-side { display: flex; flex-direction: column; gap: 40px; }
.bracket-region { display: flex; gap: var(--col-gap); align-items: flex-start; }
.right-side .bracket-region { flex-direction: row-reverse; }

.bracket-round {
    display: flex;
    flex-direction: column;
    width: var(--card-w);
}

/* =========================================
   POSICIONAMENTO MATEMÁTICO DOS CARDS
   ========================================= */
.bracket-matchup {
    width: var(--card-w);
    height: var(--card-h);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 5;
}

/* Aplica o espaçamento calculado (Margin Bottom para todos) */
.round_1 .bracket-matchup { margin-bottom: var(--mb-1); }
.round_2 .bracket-matchup { margin-bottom: var(--mb-2); }
.sweet_16 .bracket-matchup { margin-bottom: var(--mb-3); }
.elite_8 .bracket-matchup { margin-bottom: var(--mb-4); }

/* Empurra o PRIMEIRO card para alinhar com o centro do round anterior */
.round_1 .bracket-matchup:first-child { margin-top: var(--mt-1); }
.round_2 .bracket-matchup:first-child { margin-top: var(--mt-2); }
.sweet_16 .bracket-matchup:first-child { margin-top: var(--mt-3); }
.elite_8 .bracket-matchup:first-child { margin-top: var(--mt-4); }

/* Remove a margem do último para não esticar a div do round */
.bracket-matchup:last-child { margin-bottom: 0 !important; }

/* =========================================
   AS LINHAS CONECTORAS PERFEITAS
   ========================================= */

/* --- LADO ESQUERDO --- */
/* Linha horizontal saindo para a direita */
.left-side .bracket-round:not(:last-child) .bracket-matchup::after {
    content: ''; position: absolute;
    right: calc(var(--col-gap) * -0.5);
    top: calc(50% - (var(--line-w) / 2));
    width: calc(var(--col-gap) * 0.5);
    border-top: var(--line-w) solid var(--line-color);
    z-index: 1;
}
/* Desenha a chave "[" englobando a altura exata do round anterior */
.left-side .bracket-round:not(.round_1) .bracket-matchup::before {
    content: ''; position: absolute;
    left: calc(var(--col-gap) * -0.6);
    top: 50%; transform: translateY(-50%);
    width: calc(var(--col-gap) * 0.5);
    border-left: var(--line-w) solid var(--line-color);
    z-index: 1;
}

/* --- LADO DIREITO (ESPELHADO) --- */
/* Linha horizontal saindo para a esquerda */
.right-side .bracket-round:not(:last-child) .bracket-matchup::after {
    content: ''; position: absolute;
    left: calc(var(--col-gap) * -0.5);
    top: calc(50% - (var(--line-w) / 2));
    width: calc(var(--col-gap) * 0.5);
    border-top: var(--line-w) solid var(--line-color);
    z-index: 1;
}
/* Desenha a chave "]" englobando a altura exata do round anterior */
.right-side .bracket-round:not(.round_1) .bracket-matchup::before {
    content: ''; position: absolute;
    right: calc(var(--col-gap) * -0.5);
    top: 50%; transform: translateY(-50%);
    width: calc(var(--col-gap) * 0.6);
    border-right: var(--line-w) solid var(--line-color);
    z-index: 1;
}

/* Define a altura das chaves "[" e "]" para capturar perfeitamente os 2 centros */
.round_2 .bracket-matchup::before { height: var(--c2c-1); }
.sweet_16 .bracket-matchup::before { height: var(--c2c-2); }
.elite_8 .bracket-matchup::before { height: var(--c2c-3); }


/* =========================================
   ESTILOS INTERNOS (TIMES)
   ========================================= */
.team {
    display: flex; align-items: center;
    padding: 0 10px;
    height: 50%; /* Cada time ocupa exatamente metade da altura fixa da caixa */
    font-size: 13px; color: #334155;
}
.team.top { border-bottom: 1px solid #e2e8f0; }
.team .seed { font-size: 10px; color: #64748b; width: 18px; font-weight: bold; }
.team .name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team .score { font-weight: 700; margin-left: 10px; }
.team.winner { font-weight: bold; color: #0f172a; background-color: #f1f5f9; }
.team-logo { width: 18px; height: 18px; object-fit: contain; margin-right: 6px; }

/* Final Four (Centro) */
.bracket-center { padding: 0 var(--col-gap); display: flex; align-items: center; }
.final-four-logo {
    background: #0f172a; color: #fff; padding: 20px 30px;
    font-weight: bold; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    white-space: nowrap; margin-top: var(--mt-4);
}

/* =========================================
   CENTER BLOCK (FINAL FOUR & CHAMPIONSHIP)
   ========================================= */
.bracket-center { 
    padding: 0 var(--col-gap); 
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

.center-games-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* The main Final Four title badge */
.final-four-header {
    background: #0f172a; 
    color: #fff; 
    padding: 10px 25px;
    font-weight: bold; 
    font-size: 16px;
    border-radius: 6px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
    letter-spacing: 1px;
    margin-top: var(--mt-4); /* Aligns it with the Elite 8 blocks */
}

/* Labels for the specific rounds */
.center-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.championship-label {
    color: #d97706; /* Golden color to make it pop */
    margin-top: 15px;
}

.final-four-round {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: var(--card-w);
}

.championship-round {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--card-w);
}

/* Gold highlight for the final championship game */
.championship-round .bracket-matchup {
    border: 2px solid #fbbf24;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.25);
}