* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    font-family: "Arial Nova", Arial, sans-serif;

    background: #ffffff;
    color: #111111;

    overflow: hidden;
}


body {
    display: flex;
    flex-direction: column;
}


/* HEADER */

header {
    width: 100%;

    height: 18vh;
    min-height: 130px;
    max-height: 195px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 10px 20px;

    border-bottom: 1px solid #d9d9d9;

    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12);
}


header h1 {
    margin: 0 0 8px;

    font-family: "Arial Black", Arial, sans-serif;

    font-size: clamp(34px, 5vw, 76px);
    font-weight: 900;

    letter-spacing: -4px;
    line-height: 0.9;

    text-align: center;
}


/* SUBTITLE */

.subtitle {
    max-width: 700px;

    margin: 0 0 14px;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(10px, 1vw, 15px);
    font-weight: 400;

    line-height: 1.3;

    text-align: center;

    color: #666666;
}


/* PREDICT BUTTON */

#predictButton {
    width: 200px;
    height: 44px;

    padding: 0;

    border: none;
    border-radius: 4px;

    background: #111111;
    color: #ffffff;

    font-family: "Arial Nova", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    margin-top: 2px;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}


#predictButton:hover {
    background: #2a2a2a;

    transform:
        translateY(-1px);
}


#predictButton:active {
    transform:
        translateY(0);
}


#predictButton:disabled {
    opacity: 0.6;

    cursor: default;

    transform: none;
}


/* MAIN */

main {
    position: relative;

    width: 90%;
    height: 78vh;

    margin: 2vh auto 0;

    padding: 1vh 1vw;

    overflow: hidden;
}


/* PLAYOFF LAYOUT */

.playoff-layout {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        clamp(160px, 14vw, 240px)
        minmax(0, 1fr);

    gap: clamp(8px, 1.5vw, 24px);

    align-items: center;
}


/* CONFERENCES */

.conference {
    width: 100%;
    height: 100%;

    min-width: 0;

    display: flex;
    flex-direction: column;
}


.conference h2 {
    flex-shrink: 0;

    margin: 0;

    height: 7vh;

    display: flex;

    align-items: center;
    justify-content: center;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 900;

    letter-spacing: -1.5px;

    text-align: center;
}


/* BRACKET */

.bracket {
    position: relative;

    width: 100%;
    height: calc(100% - 7vh);

    min-height: 0;

    display: flex;

    align-items: stretch;
    justify-content: space-between;

    gap: clamp(4px, 1vw, 18px);
}


/* ROUNDS */

.round {
    flex: 1;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: space-between;
}


.round h3 {
    flex-shrink: 0;

    width: 100%;

    height: 4vh;
    min-height: 20px;

    margin: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(10px, 1vw, 16px);
    font-weight: 700;

    letter-spacing: -0.3px;

    white-space: nowrap;
}


/* MATCHUPS */

.matchup {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: clamp(2px, 0.4vh, 5px);

    margin: 0;
}


/* FIRST ROUND */

.round-1 {
    justify-content: space-between;
}


/* ROUND 2 */

.round-2 {
    justify-content: space-around;
}


/* CONFERENCE FINALS */

.conference-finals-round {
    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.conference-finals-round h3 {
    position: absolute;

    top: calc(50% - 105px);
    left: 50%;

    width: 100%;

    margin: 0;

    transform:
        translateX(-50%);

    text-align: center;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(10px, 0.9vw, 16px);
    font-weight: 700;

    white-space: nowrap;
}


.conference-finals-round .matchup {
    margin: 0;
}


/* DROPDOWNS */

select {
    width: 100%;
    min-width: 0;

    height: clamp(30px, 4.1vh, 44px);

    padding: 0 28px 0 38px;

    border: 1px solid #999999;
    border-radius: 3px;

    background-color: #ffffff;

    background-repeat: no-repeat;

    background-position: 9px center;

    background-size: 22px 22px;

    color: #111111;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(8px, 0.8vw, 14px);
    font-weight: 700;

    cursor: pointer;
}


select:hover {
    border-color: #555555;
}


select:focus {
    outline: 2px solid #111111;

    outline-offset: 1px;

    border-color: #111111;
}


/* TEAM BOXES */

.team-box,
.winner {
    width: 100%;
    min-width: 0;

    height: clamp(30px, 4.1vh, 44px);

    padding: 5px 7px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 3px;

    text-align: center;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(8px, 0.8vw, 14px);
    font-weight: 700;

    line-height: 1.05;

    overflow: hidden;
}


/* NORMAL TEAM BOX */

.team-box {
    border: 1px solid #b5b5b5;

    background: #e8e8e8;

    color: #111111;
}


/* PREDICTED WINNER */

.winner {
    border: 2px solid #777777;

    background: #d0d0d0;

    color: #111111;

    font-weight: 900;

    box-shadow:
        inset 0 0 0 1px #eeeeee;
}


/* WINNER LOGOS */

.team-box img,
.winner img {
    width: clamp(16px, 1.5vw, 24px);

    height: clamp(16px, 1.5vw, 24px);

    object-fit: contain;

    flex-shrink: 0;

    margin-right: 6px;
}


/* NBA FINALS */

.nba-finals {
    width: 100%;
    max-width: 260px;

    justify-self: center;

    padding: clamp(12px, 1.5vw, 24px);

    border: 1px solid #b5b5b5;
    border-radius: 3px;

    background: #ffffff;

    text-align: center;
}


.nba-finals h2 {
    margin: 0 0 clamp(12px, 1.5vh, 20px);

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 900;

    letter-spacing: -1px;
}


.finals-content {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: clamp(6px, 1vh, 12px);
}


.finals-team {
    width: 100%;

    height: clamp(36px, 5vh, 48px);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 7px;

    border: 1px solid #b5b5b5;
    border-radius: 3px;

    background: #e8e8e8;

    text-align: center;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(9px, 0.9vw, 14px);
    font-weight: 700;
}


.finals-team img {
    width: clamp(18px, 1.6vw, 25px);

    height: clamp(18px, 1.6vw, 25px);

    object-fit: contain;

    margin-right: 7px;
}


.vs {
    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(11px, 1.1vw, 17px);

    font-weight: 900;
}


.champion {
    width: 100%;

    height: clamp(38px, 5vh, 50px);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 7px;

    border: 2px solid #111111;
    border-radius: 3px;

    background: #111111;

    color: #ffffff;

    text-align: center;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(10px, 1vw, 16px);

    font-weight: 900;
}


.champion img {
    width: clamp(18px, 1.6vw, 25px);

    height: clamp(18px, 1.6vw, 25px);

    object-fit: contain;

    margin-right: 7px;
}


/* WEST ORDER */

.west-bracket .round-1 {
    order: 1;
}


.west-bracket .round-2 {
    order: 2;
}


.west-bracket .conference-finals-round {
    order: 3;
}


/* EAST ORDER */

.east-bracket .conference-finals-round {
    order: 1;
}


.east-bracket .round-2 {
    order: 2;
}


.east-bracket .round-1 {
    order: 3;
}


/* BRACKET LINES */

#bracket-lines {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    overflow: visible;

    z-index: 5;
}


.bracket-line {
    fill: none;

    stroke: #555555;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* SHORT WINDOWS */

@media (max-height: 750px) {

    header {
        height: 16vh;

        min-height: 105px;
    }


    main {
        height: 84vh;
    }


    .conference h2 {
        height: 6vh;

        font-size: clamp(18px, 2vw, 27px);
    }


    .bracket {
        height: calc(100% - 6vh);
    }


    .round h3 {
        height: 3vh;

        font-size: clamp(9px, 0.9vw, 13px);
    }


    select,
    .team-box,
    .winner {
        height: clamp(26px, 3.8vh, 36px);

        font-size: clamp(7px, 0.75vw, 12px);
    }


    .conference-finals-round h3 {
        margin-bottom: 1vh;
    }


    .subtitle {
        font-size: clamp(9px, 0.9vw, 13px);

        margin-bottom: 10px;
    }


    #predictButton {
        height: 40px;

        width: 185px;

        font-size: 14px;
    }

}


/* NARROW WINDOWS */

@media (max-width: 850px) {

    body {
        overflow-y: auto;
    }


    main {
        height: auto;

        min-height: 100vh;

        overflow: visible;
    }


    .playoff-layout {
        grid-template-columns: 1fr;

        height: auto;

        gap: 30px;
    }


    .conference {
        height: auto;

        min-height: 600px;
    }


    .nba-finals {
        order: 2;

        width: 260px;

        max-width: 260px;
    }


    .western {
        order: 1;
    }


    .eastern {
        order: 3;
    }


    #bracket-lines {
        display: none;
    }

}


/* VERY NARROW */

@media (max-width: 550px) {

    header h1 {
        letter-spacing: -2px;
    }


    .subtitle {
        max-width: 90%;

        font-size: 10px;

        line-height: 1.25;

        margin-bottom: 10px;
    }


    main {
        padding: 15px 10px;
    }


    .conference {
        min-height: 500px;
    }


    .bracket {
        gap: 3px;
    }


    select,
    .team-box,
    .winner {
        font-size: 8px;
    }


    #predictButton {
        width: 175px;

        height: 40px;

        font-size: 13px;
    }

}


/* CUSTOM TEAM DROPDOWN */

.team-select-wrapper {
    position: relative;

    width: 100%;

    z-index: 20;
}


.team-select-wrapper.open {
    z-index: 1000;
}


.team-select-wrapper select {
    display: none;
}


.select-trigger {
    position: relative;

    width: 100%;

    height: clamp(30px, 4.1vh, 44px);

    padding: 0 34px 0 10px;

    display: flex;

    align-items: center;

    border: 1px solid #999999;

    border-radius: 3px;

    background: #ffffff;

    color: #111111;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(8px, 0.8vw, 14px);

    font-weight: 700;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}


.select-trigger:hover {
    border-color: #555555;

    background: #fafafa;
}


.team-select-wrapper.open .select-trigger {
    border-color: #111111;

    box-shadow:
        0 0 0 1px #111111;
}


.select-trigger-content {
    min-width: 0;

    display: flex;

    align-items: center;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.select-trigger-logo {
    width: clamp(18px, 1.5vw, 23px);

    height: clamp(18px, 1.5vw, 23px);

    margin-right: 8px;

    object-fit: contain;

    flex-shrink: 0;
}


.select-arrow {
    position: absolute;

    right: 12px;

    top: 50%;

    width: 7px;

    height: 7px;

    border-right: 2px solid #222222;

    border-bottom: 2px solid #222222;

    transform:
        translateY(-65%)
        rotate(45deg);

    transition:
        transform 0.2s ease;
}


.team-select-wrapper.open .select-arrow {
    transform:
        translateY(-25%)
        rotate(225deg);
}


/* DROPDOWN MENU */

.select-menu {
    position: absolute;

    top: calc(100% + 5px);

    left: 0;

    width: 100%;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(-6px)
        scale(0.98);

    transform-origin: top center;

    border: 1px solid #999999;

    border-radius: 4px;

    background: #ffffff;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);

    pointer-events: none;

    transition:
        max-height 0.22s ease,
        opacity 0.16s ease,
        transform 0.22s ease;

    z-index: 1000;
}


.team-select-wrapper.open .select-menu {
    max-height: 320px;

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;

    overflow-y: auto;
}


/* DROPDOWN OPTIONS */

.custom-option {
    width: 100%;

    min-height: clamp(30px, 4vh, 42px);

    padding: 5px 9px;

    display: flex;

    align-items: center;

    background: #ffffff;

    color: #111111;

    font-family: "Arial Nova", Arial, sans-serif;

    font-size: clamp(8px, 0.8vw, 14px);

    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.12s ease,
        padding-left 0.12s ease;
}


.custom-option:hover {
    background: #eeeeee;

    padding-left: 13px;
}


.custom-option.selected {
    background: #e2e2e2;
}


.custom-option-logo {
    width: clamp(18px, 1.5vw, 23px);

    height: clamp(18px, 1.5vw, 23px);

    margin-right: 8px;

    object-fit: contain;

    flex-shrink: 0;
}


.custom-option-text {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* DROPDOWN SCROLLBAR */

.select-menu::-webkit-scrollbar {
    width: 6px;
}


.select-menu::-webkit-scrollbar-track {
    background: #f5f5f5;
}


.select-menu::-webkit-scrollbar-thumb {
    background: #999999;

    border-radius: 10px;
}


.select-menu::-webkit-scrollbar-thumb:hover {
    background: #666666;
}


/* OPEN DROPDOWN UPWARD */

.team-select-wrapper.drop-up .select-menu {
    top: auto;

    bottom: calc(100% + 5px);

    transform-origin: bottom center;

    transform:
        translateY(6px)
        scale(0.98);
}


.team-select-wrapper.drop-up.open .select-menu {
    transform:
        translateY(0)
        scale(1);
}


/* SMALLER SCREENS */

@media (max-height: 750px) {

    .select-trigger {
        height: clamp(26px, 3.8vh, 36px);

        font-size: clamp(7px, 0.75vw, 12px);
    }


    .custom-option {
        min-height: clamp(26px, 3.6vh, 36px);

        font-size: clamp(7px, 0.75vw, 12px);
    }

}

.portfolio-link {
    position: absolute;
    top: 24px;
    right: 30px;
    color: #111;
    text-decoration: none;
    font-family: "Arial Nova", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: opacity 0.2s ease;
}

.portfolio-link:hover {
    opacity: 0.55;
}