/* tour.css — tournament bracket panel styles */

#tourinfo{
    margin:0 0 0 -40px;
    padding:8px 0 8px 24px;
    border-left:1px dotted rgba(255,255,255,.6);
    font-size:11pt;
    white-space:nowrap;
    #tourstart{
        font-variant-numeric:tabular-nums
    }
    img{
        height:12px;
        margin:0 6px 0 0
    }
}

#tour{
    flex:1;
    position:relative;
    overflow:hidden !important;
    user-select:none;

    #trbrkt{
        position:absolute;
        inset:0;
        bottom:72px;
        display:flex;
        flex-direction:column;
        border-style:solid;
        border-width:0 1px;
        border-color:rgba(255,255,255,.2)
    }

    #trhd{
        flex-shrink:0;
        overflow:hidden;
        border-bottom:solid 1px rgba(255,255,255,.2)
    }
    #trhdinner{
        display:flex;
        flex-direction:row;
        align-items:stretch;
        height:100%;
        transition:margin .5s;
        > div {
            display:flex;
            align-items:center;
            justify-content:center;
            text-align:center;
            font-weight:bold;
            border-style:solid;
            border-width:0 0 0 1px;
            border-color:rgba(255,255,255,.2);
            color:rgba(255,255,255,.5);
            position:static;
            min-height:unset;
            cursor:default
        }
        div:nth-child(1){
            border-color:transparent !important
        }
    }

    #trqrt{
        position:relative
    }

    #trmn{
        flex:1;
        position:relative;
        overflow:hidden
    }
    #trtbl{
        position:absolute;
        z-index:5;
        & > tbody > tr > td {
            padding:0
        }
    }

    .trtable{
        .trbox {
            border-style:solid;
            border-width:1px 0;
            border-color:rgba(255,255,255,.2)
        }
        td:last-child {
            border-right:1px solid rgba(255,255,255,.2)
        }
        [data-bstart='1'] {
            min-height:200px
        }
    }

    .trstage{
        min-height:240px;
        position:relative;
        border-style:solid;
        border-width:1px;
        border-color:transparent rgba(255,255,255,.2) transparent transparent;
        b{
            position:absolute;
            left:50%;
            top:50%;
            display:block;
            transform:rotate(270deg) translate(-50%, -50%);
            transform-origin:0% 0%;
            letter-spacing:1px;
            line-height:1;
            white-space:nowrap;
            color:rgba(255,255,255,.4);
            text-transform:uppercase;
            transition:all .5s
        }
    }

    .trplay{
        width:100%;
        border-style:solid;
        border-color:rgba(255,255,255,.2);
        tr[data-off] {
            color:rgba(255,255,255,.4);
            img {
                opacity:.6
            }
        }
        td {
            border:1px solid rgba(255,255,255,.2);
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            width:100%;
            color:#fff
        }
        tr[data-buid] {
            background:rgba(255,255,255,.07);
            cursor:pointer
        }
        td:empty {
            display:none
        }
        td:nth-child(1) {
            max-width:0;
            font-weight:bold
        }
        td:nth-child(2) {
            width:30px;
            text-align:center;
            background:rgba(255,255,255,.05)
        }
        tr[data-lose] {
            td:nth-child(1) {
                background:rgba(0,0,0,.2);
                color:rgba(255,255,255,.6)
            }
            td:nth-child(2) {
                background:rgba(0,0,0,.3);
                color:rgba(255,255,255,.6)
            }
        }
        td:nth-child(2):empty, [data-bmid='0'] tr td:last-child {
            display:none
        }
    }
    .trplay[data-bmid],.trplay[data-win]{
        border-color:rgba(255,255,255,.4);
        cursor:pointer;
        td, th {
            border-color:rgba(255,255,255,.4)
        }
    }
    .trplay[data-actv]{
        border-color:lime;
        tr {
            background:rgba(0,255,0,.15)
        }
        th, td {
            border-color:lime
        }
    }
    .trplay[data-bye]:last-child{
        border-color:#88f;
        tr {
            background:rgba(100,100,255,.15)
        }
        tr:nth-child(2) {
            background:transparent
        }
        th, td {
            border-color:#88f
        }
    }
    .trplay[data-winner]{
        border-color:#cc0;
        tr {
            background:rgba(200,180,0,.2)
        }
    }
    .trplay{
        tr[data-me='1'] {
            background:rgba(255,140,0,.2)
        }
    }
    .trplay img{
        height:10px;
        margin:0 5px 0 0;
        vertical-align:-1px
    }

    #trexample{
        position:fixed;
        right:100px;
        top:100px;
        transform:rotate(30deg);
        padding:18px;
        border-radius:12px;
        border:6px solid red;
        text-align:center;
        font-size:16pt;
        font-weight:1000;
        line-height:1;
        color:red;
        transition:all 1s;
        pointer-events:none
    }

    [data-hlon]{
        outline:1px solid rgba(0,255,255,.6);
        background:rgba(0,255,255,.2) !important;
        transition:outline .15s
    }

    .trgamebox{
        position:absolute;
        left:160%;
        top:100%;
        transform:translate(0,50%);
        color:rgba(255,255,255,.6);
        white-space:nowrap;
        &:hover{
            color:#fff
        }
        s{
            font-weight:bold
        }
    }

    /* ── Size variants ──────────────────────────────────────────────────────── */

    #trbrkt[data-bsize='5']{
        td{
            font-size:15px
        }
        #trhd{
            height:42px
        }
        #trmn{
            .trbox{
                padding:22px 20px
            }
        }
        .trbox{
            min-width:360px
        }
        [data-bstart].trstage {
            padding:160px 0
        }
        .trstage{
            min-width:39px
        }
        .trplay{
            margin:36px 0;
            border-width:3px;
            td{
                padding:8px 12px
            }
            img{
                height:12px;
                margin:0 8px 0 0
            }
        }
    }
    #trbrkt[data-bsize='4']{
        td{
            font-size:14px
        }
        #trhd{
            height:36px
        }
        #trmn{
            .trbox{
                padding:20px 18px
            }
        }
        .trbox{
            min-width:320px
        }
        [data-bstart] .trstage{
            padding:140px 0
        }
        .trstage{
            min-width:33px
        }
        .trplay{
            margin:32px 0;
            border-width:3px;
            td{
                padding:7px 11px
            }
            img{
                height:11px;
                margin:0 7px 0 0
            }
        }
    }
    #trbrkt[data-bsize='3']{
        td{
            font-size:13px
        }
        #trhd{
            height:32px
        }
        #trmn{
            .trbox{
                padding:18px 16px
            }
        }
        .trbox{
            min-width:280px
        }
        [data-bstart] .trstage{
            padding:120px 0
        }
        .trstage{
            min-width:28px
        }
        .trplay{
            margin:29px 0;
            border-width:2px;
            td{
                padding:6px 10px
            }
            img{
                height:10px;
                margin:0 7px 0 0
            }
        }
    }
    #trbrkt[data-bsize='2']{
        td{
            font-size:12px
        }
        #trhd{
            height:26px
        }
        #trmn{
            .trbox{
                padding:16px 14px
            }
        }
        .trbox{
            min-width:240px
        }
        [data-bstart] .trstage{
            padding:100px 0
        }
        .trstage{
            min-width:23px
        }
        .trplay{
            margin:26px 0;
            border-width:2px;
            td{
                padding:5px 9px
            }
            img{
                height:9px;
                margin:0 6px 0 0
            }
        }
    }
    #trbrkt[data-bsize='1']{
        td{
            font-size:11px
        }
        #trhd{
            height:22px
        }
        #trmn{
            .trbox{
                padding:14px 12px
            }
        }
        .trbox{
            min-width:200px
        }
        [data-bstart] .trstage{
            padding:80px 0
        }
        .trstage{
            min-width:19px
        }
        .trplay{
            margin:22px 0;
            border-width:2px;
            td{
                padding:4px 8px
            }
            img{
                height:8px;
                margin:0 5px 0 0
            }
        }
    }
    #trbrkt[data-bsize='0']{
        td{
            font-size:10px
        }
        #trhd{
            height:19px
        }
        #trmn{
            .trbox{
                padding:13px 11px
            }
        }
        .trbox{
            min-width:170px
        }
        [data-bstart] .trstage{
            padding:70px 0
        }
        .trstage{
            min-width:16px
        }
        .trplay{
            margin:17px 0;
            border-width:1px;
            td{
                padding:3px 7px
            }
            img{
                height:7px;
                margin:0 4px 0 0
            }
        }
    }

    /* ── Footer ─────────────────────────────────────────────────────────────── */

    #trft{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:72px;
        border-top:1px solid rgba(255,255,255,.2);
        text-align:center;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:16px;
        padding:0 24px;
        box-sizing:border-box
    }
    #trft .trscale{
        flex:1;
        display:flex;
        align-items:center;
        min-width:0
    }
    #trft input[type=range]{
        width:100%;
        display:block;
        margin:0;
        padding:0;
        box-sizing:border-box
    }
    #trpwin{
        border:0 !important;
        td:nth-child(2){
            border:0 !important;
            padding:0 !important
        }
    }

    [data-ad]{
        position:absolute;
        max-width:190px;
        max-height:90px;
        cursor:pointer;
        transition:all .4s;
        &:hover{
            max-width:230px;
            max-height:130px
        }
    }
    [data-ad='round-top']{
        left:30px;
        bottom:100%;
        margin-bottom:30px
    }
    [data-ad='round-bottom']{
        left:0;
        top:100%;
        margin-top:30px
    }
    [data-ad='top_right_corner']{
        right:40px;
        top:20px
    }
    [data-ad='bottom_right_corner']{
        right:20px;
        bottom:20px
    }
}

.trprize{
    width:300px;
    th,td{
        white-space:nowrap;
        padding:8px;
        border-bottom:1px solid rgba(255,255,255,.2);
        text-align:right
    }
    th{
        width:50%
    }
    .trpot{
        text-align:center;
        padding:4px;
        font-size:9pt;
        opacity:.6
    }
    .trrake{
        th,td{
            padding:4px;
            border-bottom:1px solid rgba(255,255,255,.2);
            font-size:9pt;
            opacity:.6
        }
    }
}

.tour-board-info{
    cursor:pointer;
    margin:0 0 .15em 0;
    font-family:georgia;
    font-size:2em !important;
    font-weight:bold;
    letter-spacing:-.05em;
    img{
        height:.7em;
        margin:0 .2em 0 0
    }
}


/* BOARD STYLES */
[data-board='tour-default']{
    background:linear-gradient(-10deg,rgba(0,0,128,.1) 0%,transparent 50%,rgba(0,0,128,.1) 50%,transparent 100%),linear-gradient(-40deg,rgba(0,0,255,.2) 0%,transparent 50%,rgba(0,0,128,.2) 50%,transparent 100%),linear-gradient(-30deg,rgba(0,0,128,.3) 0%,transparent 50%,rgba(0,0,128,.3) 50%,transparent 100%),linear-gradient(-20deg,rgba(0,0,0,.4) 0%,transparent 50%,rgba(0,0,255,.4) 50%,transparent 100%),linear-gradient(-30deg,rgba(0,0,128,.5) 0%,transparent 50%,rgba(0,0,0,.4) 50%,transparent 100%),linear-gradient(-10deg,rgba(0,0,0,.6) 0%,transparent 50%,rgba(0,0,0,.4) 50%,transparent 100%),#0000AA;
    background-size:220%,250%,200%,240%,300%,150%,100%;
    animation:AnimTour 40s linear infinite;

    .bevel0,.bevel1{
        .par0,.par1{
            background:radial-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,.3) 100%),repeating-radial-gradient(circle at 30% 30%,rgba(255,255,255,.3) 0px,transparent 1px,transparent 3px),repeating-radial-gradient(circle at 70% 70%,rgba(255,225,255,.2) 0px,transparent 1.5px,transparent 4px),repeating-linear-gradient(28deg,rgba(64,64,64,.2) 0px,rgba(64,64,64,.2) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(-35deg,rgba(64,64,64,.2) 0px,rgba(64,64,64,.2) 1px,transparent 1px,transparent 5px),radial-gradient(circle at 40% 40%,rgba(128,128,128,.3) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(128,128,128,.4) 0%,transparent 70%),#807060;
            background-size:100% 100%,6% 6%,7% 7%,8% 8%,9% 9%,100% 100%,100% 100%,100% 100%;
            background-repeat:repeat
        }
        .numtop,.numbot{
            background:#222;
            div:nth-child(odd){
                background:#333
            }
        }
    }

    div[data-ckr='0']{
        background:radial-gradient(at 50% 5%,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,.5) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.3) 80%,rgba(0,0,0,.1) 100%),#fff5eb;
        &:after{
            background:radial-gradient(at 50% 95%,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,.5) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#fff5eb;
        }
    }
    div[data-ckr='1']{
        background:radial-gradient(at 50% 5%,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,.5) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.3) 80%,rgba(0,0,0,.1) 100%),#cc0000;
        &:after{
            background:radial-gradient(at 50% 95%,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,.5) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#cc0000;
        }
    }
}

@keyframes AnimTour{
    0%{
        background-position:0% 0%, 100% 0%, 100% 100%, 0% 0%, 100% 0%, 100% 100%, 0% 0%
    }
    50%{
        background-position:100% 100%, 0% 100%, 0% 0%, 100% 100%, 0% 100%, 0% 0%,0% 0%
    }
    100%{
        background-position:0% 0%, 100% 0%, 100% 100%, 0% 0%, 100% 0%, 100% 100%,0% 0%
    }
}

/* trcs — "Coming Soon" sticker for a disabled (t_status=-1) tournament template
   showing its demo bracket. position:fixed so it stays anchored to the viewport
   regardless of bracket pan/zoom/scroll underneath it. */
.trcs{
    position:fixed;
    top:30px;
    right:-55px;
    z-index:500;
    padding:6px 48px;
    transform:rotate(45deg);
    background:#cc0000;
    color:#fff;
    font-weight:1000;
    font-size:13px;
    text-align:center;
    box-shadow:0 4px 8px rgba(0,0,0,1);
    pointer-events:none
}