/* =========================================================
   SMUSIM_TOURNAMENT_BRACKET_V1
   ========================================================= */

#sm-dota-lobby-bracket {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.sm-bracket-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.sm-bracket-canvas {
    --sm-bracket-text: #f5f7fb;
    --sm-bracket-muted: #90a1b6;
    --sm-bracket-panel-top: #12263d;
    --sm-bracket-panel-bottom: #0a1828;
    --sm-bracket-border: #2c4662;
    --sm-bracket-line: #ff5c3d;
    --sm-bracket-gold: #ffbd4a;

    position: absolute;
    left: 0;
    top: 0;

    width: 1580px;
    height: 760px;

    transform-origin: top left;

    color: var(--sm-bracket-text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(208, 43, 27, 0.14),
            transparent 22%
        );
}

.sm-bracket-title {
    position: absolute;
    top: 0;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid #28435d;
    border-radius: 7px;

    background: #0d2034;

    color: #f5f7fb;
    font-size: 13px;
    font-weight: 800;

    z-index: 4;
}

.sm-bracket-final-title {
    position: absolute;
    text-align: center;

    color: var(--sm-bracket-gold);

    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.5px;

    text-shadow:
        0 0 14px
        rgba(255, 189, 74, 0.20);

    z-index: 4;
}

.sm-bracket-match {
    position: absolute;

    height: 48px;

    border:
        1px solid
        var(--sm-bracket-border);

    border-radius: 8px;

    background:
        linear-gradient(
            var(--sm-bracket-panel-top),
            var(--sm-bracket-panel-bottom)
        );

    box-shadow:
        0 6px 16px
        rgba(0, 0, 0, 0.24);

    overflow: hidden;

    z-index: 3;
}

.sm-bracket-match.is-final {
    border-color: #b77a1f;

    box-shadow:
        0 0 18px
        rgba(255, 178, 56, 0.10);
}

.sm-bracket-player {
    height: 50%;

    display: flex;
    align-items: center;

    gap: 5px;

    padding: 0 7px;

    font-size: 10px;

    min-width: 0;
}

.sm-bracket-player + .sm-bracket-player {
    border-top:
        1px solid
        #31485e;
}

.sm-bracket-seed {
    width: 18px;
    flex: 0 0 18px;

    color: #a6b3c1;

    text-align: center;
    font-size: 9px;
}

.sm-bracket-name {
    flex: 1;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-bracket-name.is-bye {
    color: #64778d;
}

.sm-bracket-name.is-empty {
    color: #72869d;
}

.sm-bracket-score {
    width: 10px;
    flex: 0 0 10px;

    color: #7f91a8;
    text-align: right;
}

.sm-bracket-lines {
    position: absolute;
    left: 0;
    top: 0;

    width: 1580px;
    height: 760px;

    overflow: visible;

    pointer-events: none;

    z-index: 2;
}

.sm-bracket-lines path {
    fill: none;

    stroke:
        var(--sm-bracket-line);

    stroke-width: 3;

    stroke-linecap: square;
    stroke-linejoin: miter;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0 0 4px
            rgba(255, 67, 47, 0.34)
        );
}

.sm-bracket-empty {
    width: 100%;
    padding: 40px 20px;

    text-align: center;
    color: #90a1b6;
}

#sm-dota-lobby-bracket,
#sm-dota-lobby-bracket * {
    scrollbar-width: none;
}

#sm-dota-lobby-bracket::-webkit-scrollbar,
#sm-dota-lobby-bracket *::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   SMUSIM_BRACKET_PAGE_INTEGRATION_V1
   Bracket belongs directly to the tournament page.
   ========================================================= */

#sm-dota-tournament-lobby:not([hidden])
.sm-bracket-canvas {
    background:
        transparent
        !important;

    border:
        0
        !important;

    box-shadow:
        none
        !important;

    backdrop-filter:
        none
        !important;

    -webkit-backdrop-filter:
        none
        !important;
}


#sm-dota-tournament-lobby:not([hidden])
.sm-bracket-shell {
    overflow:
        hidden
        !important;
}


/* =========================================================
   SMUSIM_GALAXY_STYLE_V2
   ========================================================= */


/*
 * Match keeps exactly the same geometry.
 * Only its two player rows become galaxy buttons.
 */

.sm-bracket-match {
    border:
        0
        !important;

    background:
        transparent
        !important;

    box-shadow:
        none
        !important;

    overflow:
        visible
        !important;
}


.sm-bracket-player.galaxy-btn {
    --btn-bg:
        #0c0c14;

    --btn-text:
        #ffffff;

    --btn-primary:
        #8553f4;

    --btn-secondary:
        #3b82f6;

    --btn-accent:
        #f43f5e;


    position:
        relative
        !important;

    display:
        flex
        !important;

    align-items:
        center
        !important;

    justify-content:
        center
        !important;

    width:
        100%
        !important;

    height:
        50%
        !important;

    min-height:
        0
        !important;

    margin:
        0
        !important;

    padding:
        0
        5px
        !important;

    border:
        none
        !important;

    border-radius:
        5px
        !important;

    background:
        var(--btn-bg)
        !important;

    overflow:
        hidden
        !important;

    appearance:
        none
        !important;

    -webkit-appearance:
        none
        !important;

    cursor:
        default
        !important;

    color:
        var(--btn-text)
        !important;

    font-family:
        system-ui,
        -apple-system,
        sans-serif
        !important;

    box-shadow:
        0
        3px
        10px
        -5px
        rgba(
            133,
            83,
            244,
            .50
        )
        !important;

    transition:
        transform
        .2s
        cubic-bezier(
            .25,
            .46,
            .45,
            .94
        )
        !important;

    z-index:
        1
        !important;
}


.sm-bracket-player.galaxy-btn
+
.sm-bracket-player.galaxy-btn {
    border-top:
        0
        !important;
}


.sm-bracket-player.galaxy-btn:disabled {
    opacity:
        1
        !important;

    color:
        var(--btn-text)
        !important;
}


.sm-bracket-player.galaxy-btn.is-editable {
    cursor:
        pointer
        !important;
}


.sm-bracket-player.galaxy-btn.is-editable:active {
    transform:
        scale(.96)
        !important;
}


.sm-bracket-player.galaxy-btn.is-editable:focus-visible {
    outline:
        1px
        solid
        var(--btn-primary)
        !important;

    outline-offset:
        1px
        !important;
}


/*
 * Nebula border.
 */

.sm-bracket-player.galaxy-btn::before {
    content:
        ""
        !important;

    position:
        absolute
        !important;

    inset:
        -4px
        !important;

    z-index:
        0
        !important;

    background:
        conic-gradient(
            from 0deg,
            var(--btn-bg) 0deg,
            var(--btn-primary) 60deg,
            var(--btn-secondary) 120deg,
            var(--btn-bg) 180deg,
            var(--btn-accent) 240deg,
            var(--btn-primary) 300deg,
            var(--btn-bg) 360deg
        )
        !important;

    border-radius:
        6px
        !important;

    animation:
        sm-galaxy-v2-rotate
        4s
        linear
        infinite
        !important;

    filter:
        blur(5px)
        !important;

    opacity:
        .70
        !important;
}


.sm-bracket-player.galaxy-btn.is-editable:hover::before {
    opacity:
        1
        !important;

    animation-duration:
        2s
        !important;
}


/*
 * Dark inner face.
 */

.sm-bracket-player.galaxy-btn::after {
    content:
        ""
        !important;

    position:
        absolute
        !important;

    inset:
        1px
        !important;

    z-index:
        1
        !important;

    border-radius:
        4px
        !important;

    background:
        var(--btn-bg)
        !important;
}


/*
 * Stars.
 */

.sm-bracket-player
.galaxy-btn__stars {
    position:
        absolute
        !important;

    inset:
        0
        !important;

    z-index:
        2
        !important;

    pointer-events:
        none
        !important;

    background-image:
        radial-gradient(
            circle at 20% 30%,
            white 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 80% 70%,
            white 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 40% 80%,
            white .5px,
            transparent 1px
        )
        !important;

    background-size:
        120%
        120%
        !important;

    opacity:
        .30
        !important;
}


.sm-bracket-player.galaxy-btn.is-editable:hover
.galaxy-btn__stars {
    opacity:
        .8
        !important;

    animation:
        sm-galaxy-v2-stars
        5s
        linear
        infinite
        alternate
        !important;
}


/*
 * Nick appears in this exact same button.
 */

.sm-bracket-player
.galaxy-btn__content {
    position:
        relative
        !important;

    z-index:
        3
        !important;

    display:
        flex
        !important;

    align-items:
        center
        !important;

    justify-content:
        center
        !important;

    width:
        100%
        !important;

    height:
        100%
        !important;

    min-width:
        0
        !important;
}


.sm-bracket-player
.sm-bracket-name {
    display:
        block
        !important;

    width:
        100%
        !important;

    min-width:
        0
        !important;

    padding:
        0
        3px
        !important;

    overflow:
        hidden
        !important;

    color:
        #ffffff
        !important;

    font-size:
        8px
        !important;

    line-height:
        1
        !important;

    font-weight:
        700
        !important;

    letter-spacing:
        .02em
        !important;

    text-align:
        center
        !important;

    text-overflow:
        ellipsis
        !important;

    white-space:
        nowrap
        !important;
}


.sm-bracket-player
.sm-bracket-name.is-empty {
    color:
        transparent
        !important;

    text-shadow:
        none
        !important;
}


@keyframes sm-galaxy-v2-rotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes sm-galaxy-v2-stars {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.1)
            translate(
                -2%,
                -2%
            );
    }
}


/* =========================================================
   SMUSIM_GALAXY_SIZE_V3
   Thicker nickname buttons + slightly larger bracket area.
   ========================================================= */


/*
 * Give the bracket a little more horizontal room.
 */

#sm-dota-tournament-lobby:not([hidden])
#sm-dota-lobby-bracket {
    width:
        calc(100% + 32px)
        !important;

    margin-left:
        -16px
        !important;

    min-height:
        760px
        !important;
}


/*
 * The renderer may set its own shell height.
 * Minimum keeps the new 760px canvas from being squeezed.
 */

#sm-dota-tournament-lobby:not([hidden])
.sm-bracket-shell {
    min-height:
        760px
        !important;
}


/*
 * Each complete match is now 48px.
 * Two nickname buttons therefore have about 24px each.
 */

.sm-bracket-player.galaxy-btn {
    border-radius:
        7px
        !important;

    padding:
        0
        7px
        !important;

    box-shadow:
        0
        4px
        13px
        -5px
        rgba(
            133,
            83,
            244,
            .62
        )
        !important;
}


.sm-bracket-player.galaxy-btn::before {
    border-radius:
        8px
        !important;

    filter:
        blur(6px)
        !important;
}


.sm-bracket-player.galaxy-btn::after {
    border-radius:
        6px
        !important;
}


/*
 * Nick is easier to read on the thicker button.
 */

.sm-bracket-player
.sm-bracket-name {
    font-size:
        10px
        !important;

    font-weight:
        800
        !important;
}


/*
 * Existing occupied nick is clickable only when renderer
 * marks it admin-editable.
 */

.sm-bracket-player.galaxy-btn.is-player-editable {
    cursor:
        pointer
        !important;
}


.sm-bracket-player.galaxy-btn.is-player-editable:hover {
    transform:
        scale(1.015);
}


@media (
    max-height:
    850px
) {

    #sm-dota-tournament-lobby:not([hidden])
    #sm-dota-lobby-bracket,

    #sm-dota-tournament-lobby:not([hidden])
    .sm-bracket-shell {
        min-height:
            720px
            !important;
    }
}


/* =========================================================
   SMUSIM_FRAMELESS_BRACKET_V4
   Remove the large lobby frame/panel.
   Keep bracket lines, titles and Galaxy buttons.
   ========================================================= */

#sm-dota-tournament-lobby:not([hidden])
.sm-dota-lobby {
    border:
        0
        !important;

    border-radius:
        0
        !important;

    background:
        transparent
        !important;

    box-shadow:
        none
        !important;

    backdrop-filter:
        none
        !important;

    -webkit-backdrop-filter:
        none
        !important;
}


#sm-dota-tournament-lobby:not([hidden])
.sm-dota-lobby-bracket-section,

#sm-dota-tournament-lobby:not([hidden])
#sm-dota-lobby-bracket,

#sm-dota-tournament-lobby:not([hidden])
.sm-bracket-shell,

#sm-dota-tournament-lobby:not([hidden])
.sm-bracket-canvas {
    border:
        0
        !important;

    outline:
        0
        !important;

    background:
        transparent
        !important;

    box-shadow:
        none
        !important;

    backdrop-filter:
        none
        !important;

    -webkit-backdrop-filter:
        none
        !important;
}


/*
 * Admin controls: no extra separator/frame.
 */

#sm-dota-tournament-lobby:not([hidden])
.sm-dota-lobby-admin {
    display:
        flex
        !important;

    align-items:
        center
        !important;

    gap:
        10px
        !important;

    padding-top:
        0
        !important;

    border-top:
        0
        !important;

    background:
        transparent
        !important;
}


/*
 * Delete tournament button.
 */

.sm-dota-delete-button {
    min-height:
        48px;

    padding:
        0
        21px;

    border:
        1px
        solid
        rgba(
            255,
            44,
            44,
            .72
        );

    border-radius:
        12px;

    background:
        rgba(
            145,
            9,
            9,
            .55
        );

    color:
        #ff7373;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        900;

    cursor:
        pointer;
}


.sm-dota-delete-button:hover {
    background:
        rgba(
            185,
            15,
            15,
            .72
        );

    color:
        #ffffff;
}


/*
 * Every persistent later-round position is a real button.
 */

.sm-bracket-player.galaxy-btn.is-round-editable {
    cursor:
        pointer
        !important;
}