/* 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;
        /* Without this, the browser's own native touch-scroll gesture can claim a real
           touch drag before TrMove's pointerdown handler's e.preventDefault() ever gets
           a chance to stop it — touch-action is decided at gesture start, ahead of any
           JS event handling, so preventDefault() alone doesn't reliably suppress it on
           real touch hardware (confirmed report: drag-to-pan doesn't work on mobile).
           Desktop pointer-drag (mouse) was unaffected since this only governs touch
           gestures. */
        touch-action:none;
        & > tbody > tr > td {
            padding:0
        }
    }

    #trtopad{
        position:absolute;
        top:80px;
        right:80px;
        max-height:120px;
        cursor:pointer;
        transition:all .5s;
        &:hover{
            max-height:180px
        }
        &[src='']{
            display:none
        }
    }

    .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
    }

    #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
        }
    }

    [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
    }

    /* ── Size variants ──────────────────────────────────────────────────────── */
    #trbrkt[data-bsize='5']{
        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
            }
        }
        [data-ad='round-bottom']{
            max-width:190px;
            max-height:90px;
            margin-top:30px
        }
    }
    #trbrkt[data-bsize='4']{
        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
            }
        }
        [data-ad='round-bottom']{
            max-width:180px;
            max-height:80px;
            margin-top:26px
        }
    }
    #trbrkt[data-bsize='3']{
        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
            }
        }
        [data-ad='round-bottom']{
            max-width:170px;
            max-height:70px;
            margin-top:22px
        }
    }
    #trbrkt[data-bsize='2']{
        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
            }
        }
        [data-ad='round-bottom']{
            max-width:160px;
            max-height:60px;
            margin-top:18px
        }
    }
    #trbrkt[data-bsize='1']{
        td{
            font-size:9px
        }
        #trhd{
            height:17px
        }
        #trmn{
            .trbox{
                padding:12px 10px
            }
        }
        .trbox{
            min-width:150px
        }
        [data-bstart] .trstage{
            padding:60px 0
        }
        .trstage{
            min-width:13px
        }
        .trplay{
            margin:15px 0;
            border-width:1px;
            td{
                padding:2px 6px
            }
            img{
                height:6px;
                margin:0 3px 0 0
            }
        }
        [data-ad='round-bottom']{
            max-width:150px;
            max-height:50px;
            margin-top:14px
        }
    }
    #trbrkt[data-bsize='0']{
        td{
            font-size:8px
        }
        #trhd{
            height:15px
        }
        #trmn{
            .trbox{
                padding:11px 9px
            }
        }
        .trbox{
            min-width:140px
        }
        [data-bstart] .trstage{
            padding:50px 0
        }
        .trstage{
            min-width:12px
        }
        .trplay{
            margin:13px 0;
            border-width:1px;
            td{
                padding:1px 5px
            }
            img{
                height:5px;
                margin:0 2px 0 0
            }
        }
        [data-ad='round-bottom']{
            max-width:140px;
            max-height:40px;
            margin-top:10px
        }
    }

    /* ── 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
        }
    }
}

.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 360s 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 draft (t_status=0) tournament template showing its
   demo bracket — draft is the status now shown to users (tour_list.php's own t_status IN
   (1,0), swapped from (1,-1); disabled/-1 is no longer publicly reachable at all, so it
   can't show this sticker in practice either way). 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
}


@media screen and (orientation:portrait) and (pointer:coarse) and (hover:none){
    /* h1/#tourinfo/#tourstart/#tourother are all plain block-level elements — per
       explicit request, no flex/rotation-compensation trick here, just ordinary block
       stacking (top to bottom in DOM order: h1, #tourstart, #tourother). Moved here
       from style/default.css since it's tour-specific, not shared across panels. */
    [data-pan='tour'] .top-bar{
        display:block;
        h1{
            font-size:14pt;
            margin:0 0 0 30px;
            background-image:linear-gradient(45deg,#ccc,#fff,#ccc);
            img{
                height:12px;
                margin:0 6px 0 0
            }
        }
        #tourinfo{
            margin:-4px 0 0 30px;
            border:0;
            #tourstart,#tourother{
                /* Desktop's 11pt (tour.css #tourinfo, non-mobile) made these nowrap lines too
                   wide for a narrow mobile viewport. 7pt keeps real-world content comfortably
                   within bounds with margin for longer tournament names/buy-ins. */
                font-size:9pt
            }
        }
    }
    #tour{
        #trexample{
            right:100px;
            top:100px;
            padding:12px;
            border-radius:8px;
            border:4px solid red;
            font-size:12pt;
            font-weight:700
        }
    }
}