@import "styles.css?v=1.2";

a.anchor {
    top: -95px;
}

.round-name {
    width: unset;
}

.item {
    height: 110px;
}

.region-select {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
    align-items: center;
    color: grey;
}

.region-select span {
    font-size: 0.8em;
}

.region-select button {
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid rgba(54, 56, 61, 0.15);
    font-weight: bold;
    cursor: pointer;
}

.region-select.district button::before {
    content: 'District ';
}

.region-select.region button::before {
    content: 'Region ';
}

.region-select.site button::before {
    content: 'Site ';
}

.placeholder {
    font-size: 0.8em;
    color: #a0a0a0;
}

@media screen and (max-width: 800px) {
    .region-select {
        margin-top: 20px;
        flex-direction: column;
    }

    .region-select.district button::before {
        content: 'Dist. ';
    }

    .region-select.region button::before {
        content: 'Reg. ';
    }

}

@media screen and (max-width: 500px) {
    .region-select.district button::before {
        content: 'D';
    }

    .region-select.district button::before {
        content: 'R';
    }

    .region-select.site button::before {
        content: 'S';
    }
}

.region-select form {
    display: flex;
    gap: 5px;
}

@media screen and (max-width: 500px) {
    .region-select form {
        display: flex;
        gap: 3px;
        flex-wrap: wrap;
    }
}

.note-head {
    margin-top: 10px;
}

.tickets::before {
    content: '🎟';
    margin-right: 5px;
}

.team {
    gap: 5px;
}

.round-list,
.game {
    width: 100%;
}

/* Live */
.info .status.Live {
    color: #d00;
}

.live-container {
    width: 100%;
    margin-bottom: 20px;
    display: none;
}

.live-container .live-head {
    font-weight: bold;
    display: block;
    margin-left: 8px;
}

.liveGames {
    display: flex;
    width: 20%
}

    .liveGames .item::after {
        content: none;
    }

/* VB-specific */
.bracket-container {
    width: 100%;
    display: flex;
}

.main {
    display: flex;
    order: 1;
    width: 38%;
}

.final-4 {
    display: flex;
    order: 2;
    width: 24%;
    margin-top: 165px;
}

.consolation {
    display: flex;
    flex-direction: row-reverse;
    order: 3;
    width: 38%;
}

.bracket-labels {
    display: flex;
    width: 100%;
    text-align: center;
    align-items: center;
    margin-bottom: 20px;
}

.bracket-labels span,
.final-4-bracket-2,
.contenders-bracket-2 {
    padding: 10px;
    border-radius: 8px;
    background-color: #e8e8e8;
    font-weight: bold;
    display: block;
    border: 1px solid rgba(54, 56, 61, 0.15);
    box-sizing: border-box;
}

.winners-bracket {
    order: 1;
    width: 40%;
    display: flex;
    justify-content: flex-start;
}

    .winners-bracket span,
    .contenders-bracket span,
    .final-4-bracket span {
        width: 90%;
    }

.contenders-bracket {
    order: 3;
    width: 40%;
    justify-content: flex-end;
    display: flex
}

.final-4-bracket {
    order: 2;
    width: 20%;
    justify-content: center;
    display: flex;
}

.final-4-bracket-2,
.contenders-bracket-2 {
    display: none;
}

.round {
    justify-content: unset;
}

.info .status {
    font-size: 0.9em;
    color: #a0a0a0;
}

.main .round,
.consolation .round {
    width: 33.3333%;
}

.final-4 .round {
    width: 50%;
}

.more {
    flex-wrap: wrap;
    gap: 5px;
}

/* lines */
.main .round-list.first .item::after {
    height: unset;
    border-right: none;
    border-radius: 0;
    border-top: 1px dotted rgb(205, 205, 205);
    bottom: unset!important;
    top: 50%;
    border-bottom: none;
}

.main .round-list.second .item::before {
    border-top: 1px dotted rgb(205, 205, 205);
}

.second .item::after {
    height: 50%;
}

.third .item:nth-child(2)::before,
.championship .item::before {
    content: '';
    position: absolute;
    top: 50%;
    border-top: 1px solid rgb(205, 205, 205);
    width: 10px;
    left: 0;
}

.consolation .item::before {
    content: '';
    width: 10px;
    left: 0;
    position: absolute;
}

.consolation .item:nth-child(even)::before {
    bottom: 50%;
}

.consolation .item:nth-child(odd)::before {
    top: 50%;
}

.conso-1 .item::after,
.championship .item::after,
.third .item::after {
    display: none;
}

.conso-1 .item::before {
    height: 50%;
    border-left: 1px solid rgb(205, 205, 205);
}

.conso-1 .item:nth-child(odd)::before {
    border-radius: 8px 0 0 0;
    border-top: 1px solid rgb(205, 205, 205);
}

.conso-1 .item:nth-child(even)::before {
    border-radius: 0 0 0 8px;
    border-bottom: 1px solid rgb(205, 205, 205);
}

.conso-2 .item::before {
    top: 50%!important;
    border-top: 1px dotted rgb(205, 205, 205);
}

.conso-3 .item::after {
    top: 50%!important;
    border-top: 1px dotted rgb(205, 205, 205);
    border-bottom: none;
}

/* margins */
.round-list.second li:first-child,
.round-list.second li:nth-child(2) {
    margin-top: 0;
}

.round-list.first li:nth-child(3),
.round-list.second li:nth-child(3),
.round-list.conso-1 li:nth-child(3) {
    margin-top: 60px;
}

.round-list.third li:first-child,
.round-list.conso-2 li:first-child,
.round-list.conso-3 li:first-child,
.round-list.championship li:first-child {
    margin-top: 70px;
}

.round-list.third li:nth-child(2),
.round-list.conso-2 li:nth-child(2),
.round-list.conso-3 li:nth-child(2) {
    margin-top: 200px;
}


@media screen and (max-width: 1500px) {
    body {
        font-size: 14px;
    }

    .logo {
        display: none;
    }

    .item::after { 
        width: 4px!important;
    }

    .item::before {
        width: 5px!important;
    }

    .item {
        padding: 15px 5px;
    }
}

@media screen and (max-width: 1301px) {
    body {
        font-size: 12px;
    }

    .team {
        gap: 2px;
    }

    .score {
        width: 15px;
    }
}

@media screen and (max-width: 1200px) {

    .bracket-container {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .bracket-labels {
        justify-content: space-between;
    }

    .final-4 {
        order: 99;
        margin-top: 0;
        width: 100%;
    }

    .final-4-bracket {
        display: none;
    }

    .final-4-bracket-2 {
        display: block;
        order: 3;
        width: 100%;
        margin: 20px 0;
        text-align: center;
    }

    .main,
    .consolation,
    .winners-bracket,
    .contenders-bracket {
        width: 48%;
    }

}

@media screen and (max-width: 1000px) {
    .bracket-container {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .bracket-labels {
        justify-content: space-between;
    }

    .final-4 {
        order: 99;
        margin-top: 0;
        width: 100%;
    }

    .final-4-bracket {
        display: none;
    }

    .final-4-bracket-2,
    .contenders-bracket-2 {
        order: 3;
        width: 100%;
        margin: 20px 0;
        text-align: center;
    }

    .final-4-bracket-2 {
        display: block;
    }

    .main,
    .consolation,
    .winners-bracket,
    .contenders-bracket {
        width: 48%;
    }

}

@media screen and (max-width: 900px) {
    .logo {
            display: block;
        }

    body {
        font-size: 16px;
    }

    .round,
    .liveGames,
    .main,
    .consolation,
    .final-4,
    .bracket-labels span,
    .main .round,
    .consolation .round,
    .final-4 .round {
        width: 100%;
    }

    .main,
    .consolation,
    .final-4 {
        flex-direction: column;
    }

    .round-list li {
        margin-top: unset !important;
    }

    .round-list .item::before {
        content: none !important;
    }

    .live-container {
        display: block;
        margin-top: 20px;
    }

    .bracket-notes {
        order: -2;
    }

    .final-4 {
        margin-top: 0;
    }

    .item::after,
    .item::before,
    .contenders-bracket {
        display: none!important;
    }

    .bracket-container {
        flex-direction: column;
    }

    .contenders-bracket-2 {
        display: block;
    }

    .winners-bracket {
        width:100%;
    }

}

@media screen and (max-width: 800px) {
    .bracket-labels {
        margin-top: 20px;
    }

    h2.bracket-name {
        text-align: center;
    }

    .team {
        gap: 10px;
    }
}