/* Scalable & Compact Mirrored Tournament Bracket */
.finales-bracket {
    width: 100%;
    margin-top: 20px;
}

.bracket-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform-origin: top center;
    transform: scale(1); /* Default to 1, scale down via media queries */
    overflow: hidden; /* Remove scrollbars */
    min-height: 900px;
    width: 100%;
}

.bracket-side {
    display: flex;
    flex-direction: row;
    gap: 10px; 
    height: 850px;
    flex: 1; 
    justify-content: space-around;
}

.bracket-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
    min-width: 160px;
    height: 850px;
    position: relative; /* Added for absolute positioning of winner card */
}

.winner-bracket-card {
    position: absolute;
    top: 50px; /* Adjusted position */
    width: 100%;
    z-index: 5;
    padding: 10px !important;
    transform: scale(1.25); /* Make it even bigger than the final match */
    box-shadow: 0 0 25px rgba(159, 205, 177, 0.6);
}

.winner-bracket-card .fw-bold {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bracket-column {
    display: flex;
    flex-direction: column;
    min-width: 115px; 
    height: 100%;
}

.bracket-matches-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1; 
    width: 100%;
}

.bracket-match {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 4px;
    font-size: 0.7rem;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    width: 100%;
    margin: 2px 0; /* Reduced margin */
    color: white; /* Force all text to white */
}

.bracket-match-header {
    font-size: 0.55rem;
    color: white; /* Changed from light-green to white */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 3px;
    text-align: center;
    font-weight: bold;
}

.bracket-team {
    padding: 2px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 2px;
    min-height: 22px;
    background: rgba(255,255,255,0.05);
    color: white; /* Ensure team names are white */
}

.bracket-team.predicted {
    background: var(--light-green);
    color: white !important; /* Force white text */
    font-weight: bold;
}

.bracket-team.predicted .bracket-team-name {
    color: white !important; /* Ensure the name itself is also white */
}

.bracket-team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 105px; /* Increased slightly for flags */
    color: white;
    display: flex;
    align-items: center;
}

.bracket-team-name small {
    color: #eee !important; /* Slightly off-white for sources but still readable */
}

.bracket-vs {
    text-align: center;
    font-size: 0.55rem;
    color: white; /* Changed from light-green to white */
    margin: 2px 0;
}

.stage-title {
    text-align: center;
    font-size: 0.65rem;
    margin-bottom: 5px;
    font-weight: bold;
    color: white; /* Changed from light-green to white */
    text-transform: uppercase;
    border-bottom: 1px solid var(--light-green); /* Changed from pink to light-green */
    padding-bottom: 1px;
}

.final-card {
    border: 2px solid var(--light-green) !important; /* Changed from pink to light-green */
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(159, 205, 177, 0.5); /* Updated shadow to match light-green */
}

/* Precise scaling to fit full width without scroll */
@media (min-width: 1601px) {
    .bracket-wrapper { transform: scale(0.95); margin-bottom: -50px; }
}

@media (max-width: 1600px) {
    .bracket-wrapper { transform: scale(0.85); margin-bottom: -120px; }
}

@media (max-width: 1400px) {
    .bracket-wrapper { transform: scale(0.75); margin-bottom: -180px; }
}

@media (max-width: 1200px) {
    .bracket-wrapper { transform: scale(0.65); margin-bottom: -250px; }
}

@media (max-width: 992px) {
    .finales-bracket {
        width: calc(100% - 20px) !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        background-color: #212529 !important;
        border: 1px solid #6c757d !important;
        border-radius: 10px !important;
        padding: 15px 0 !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    .bracket-wrapper.mobile-bracket { 
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: space-between !important;
        align-items: stretch !important; 
        padding: 0 !important;
        -webkit-overflow-scrolling: touch;
        gap: 5px !important;
        min-height: 850px !important; 
        height: 850px !important;
        border-radius: 10px !important;
        border: none !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }
    .finales-bracket h2 {
        padding: 0 15px !important; /* Keep title aligned with rest of page content */
    }
    .bracket-side, .bracket-center { 
        display: contents !important; 
    }
    .bracket-column { 
        min-width: 65px !important; /* Let it shrink on small viewports */
        flex: 1 1 20% !important; /* Stretches to fill container width evenly (20% per column) */
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    } 
    .bracket-matches-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important; /* This creates the "in between" look */
        flex: 1 !important;
        padding: 0 !important;
    }
    
    .bracket-match { 
        display: flex !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important;
        align-items: center !important; 
        justify-content: center !important;
        padding: 4px 2px !important; /* Tight padding */
        min-width: 100% !important;
        margin: 0 !important;
        background: rgba(0,0,0,0.3) !important;
    }
    .bracket-match-header { 
        display: none !important; /* Hide match # on mobile to save horizontal space */
    }
    .bracket-team { 
        padding: 0 !important; 
        min-height: auto !important; 
        background: none !important; 
        border: none !important; 
        flex: 0 0 auto !important; /* Stay tight */
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }
    .bracket-team-name { 
        width: 24px !important; /* Keep width to flag only */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .bracket-team-name span {
        display: none !important; /* Hide name text on mobile */
    }
    .bracket-team-name img {
        margin: 0 !important;
        height: 16px !important;
        width: 24px !important;
        object-fit: cover;
        border-radius: 2px;
    }
    .bracket-vs { 
        margin: 0 4px !important; /* Minimal spacing between flags */
        font-size: 0.5rem !important; 
        opacity: 0.6 !important; 
        flex: 0 0 auto !important;
    }
    
    .winner-bracket-card { 
        position: relative !important; 
        top: auto !important;
        transform: none !important; 
        width: 40px !important; /* Very narrow winner card */
        margin: 0 auto !important;
        padding: 2px !important; 
        border-width: 1px !important;
    }
    .winner-bracket-card h6 {
        display: none !important; /* Hide "WINNAAR" title on mobile to save space */
    }
    .winner-bracket-card img {
        height: 16px !important;
        width: 24px !important;
        margin: 0 !important;
    }
    .winner-bracket-card .fw-bold {
        display: none !important; /* Hide winner name on mobile */
    }
    
    .stage-title { 
        writing-mode: vertical-lr !important; /* Rotate headers */
        transform: rotate(180deg) !important; /* Proper vertical alignment */
        text-align: center !important;
        font-size: 0.7rem !important; 
        white-space: nowrap !important; 
        margin: 0 auto 10px auto !important; 
        border-bottom: none !important;
        border-right: 1px solid var(--light-green) !important;
        padding: 5px 2px !important;
        flex: 0 0 auto !important;
        height: 120px !important; /* Fixed height for rotated text area */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}