/* General resets */
body {
    margin: 0;
}

/* Main bracket container */
.bracket {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5%; /* Dynamic gap between rounds */
    padding-bottom: 5rem;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    overflow-x: auto; /* Enable horizontal scrolling */
}

/* Round container */
.round {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Dynamic gap between games */
    justify-content: center;
    min-width: 18rem; /* Flexible min width */
}

/* Game styling */
.game {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 1rem;
    text-align: center;
    position: relative;
    width: 18rem; /* Dynamically scale width */
    max-width: 100%; /* Prevent overflow */
    box-sizing: border-box;
}

/* Team styling */
.team {
    padding: 0.5rem;
    background: #f0f0f0;
    border-radius: 3px;
    transition: background 0.3s;
    min-height: 2rem; /* Ensure consistent height */
    font-size: 1rem; /* Adjust font size dynamically */
    word-wrap: break-word; /* Handle long team names */
}

.team.winner {
    background: #d4edda;
    font-weight: bold;
}

.team.champ {
    background: #e8ce4d;
    font-weight: bold;
}

/* Round-specific styling */
.round-2 {
    gap: 10.5rem; /* Flexible gap scaling */
    margin-top: 6%;
}

.round-3 {
    margin-top: 16.5%;
}

.round-4 {
    margin-top: 18%;
}

/* Responsive adjustments */
@media (max-width: 1399px) {
    .bracket {
        flex-direction: column; /* Stack rounds vertically */
        align-items: center; /* Center all rounds */
        gap: 1rem; /* Consistent gap between rounds */
    }

    .round {
        display: flex;
        flex-direction: row; /* Arrange games horizontally */
        justify-content: center; /* Center games horizontally */
        align-items: center; /* Center games vertically */
        gap: 1rem; /* Space between games */
        width: 100%; /* Allow rounds to stretch across */
        min-height: 100px; /* Ensure enough height for vertical centering */
        margin-top: 0%;
    }

    .game {
        flex-shrink: 0; /* Prevent games from shrinking */
        padding: 0.75rem;
        width: 20%; /* Flexible width for games */
        min-height: 12rem;
    }

    .team {
        font-size: 0.9rem; /* Adjust font size for medium screens */
        word-wrap: break-word; /* Prevent text overflow */
    }
}