#brds{
    overflow:hidden auto;
    [data-board]{
        display:block !important;
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:580px !important;
        height:446px !important;
        margin:0 auto 30px auto !important;
        box-shadow:0 16px 12px -8px rgba(0,0,0,.8);
        cursor:pointer
    }
}
#boards{
    position:relative;
    overflow:hidden;
    flex:1;
    transition:all 1s;
    [data-grd]{
        position:absolute;
        transition:all .4s
    }
    [data-grd='0']{
        left:0;
        top:0;
        height:100%;
        width:calc(100vh * 1.3);
        z-index:100;
        box-shadow:0 0 32px 8px rgba(0,0,0,.9)
    }
    &[data-solo='1'] [data-grd='0']{
        left:50%;
        transform:translateX(-50%)
    }
    [data-grd]:not([data-grd='0']){
        left:calc(100vh * 1.3 + 20px);
        width:calc(100vw - 164px - 100vh * 1.3);
        height:calc((100vw - 164px - 100vh * 1.3) / 1.3);
        box-shadow:0 16px 16px -12px rgba(0,0,0,.8);
        cursor:pointer;
        .wb{
            pointer-events:none
        }
        /* Minimised board: no actions — clicks only promote the board (PlayGrid).
           !important beats [data-dmv='1']{pointer-events:auto} on checkers. */
        [data-dcd],[data-qit],[data-dbl],[data-dce],[data-dcz],[data-ckr],[data-hnt],button{
            pointer-events:none !important
        }
    }
    [data-grd='1']{
        top:20px
    }
    [data-grd='2']{
        top:calc(40px + (100vw - 164px - 100vh * 1.3) / 1.3)
    }
    [data-grd='3']{
        top:calc(60px + (100vw - 164px - 100vh * 1.3) / 1.3 * 2)
    }
    [data-grd='4']{
        top:calc(80px + (100vw - 164px - 100vh * 1.3) / 1.3 * 3)
    }
    [data-grd='5']{
        top:calc(100px + (100vw - 164px - 100vh * 1.3) / 1.3 * 4)
    }
    [data-grd='6']{
        top:calc(120px + (100vw - 164px - 100vh * 1.3) / 1.3 * 5)
    }
    [data-grd='7']{
        top:calc(140px + (100vw - 164px - 100vh * 1.3) / 1.3 * 6)
    }
    [data-grd='8']{
        top:calc(160px + (100vw - 164px - 100vh * 1.3) / 1.3 * 7)
    }
}

[data-board]{
    position:relative;
    aspect-ratio:1.3/1;
    container-type:size;
    line-height:1;

    .wrap{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        container-type:size;
        font-size:3.3cqh
    }
    button{
        height:auto;
        border-radius:.5vh;
        font-size:0;
        font-family:georgia;
        padding:0;
        border-radius:4em;
        border-width:0;
        border-style:solid;
        border-color:#fff;
        background:transparent;
        transition:all .4s;
        cursor:pointer
    }

    .name0,.name1{
        position:absolute;
        left:50%;
        transform:translate(-50%,0);
        text-align:center;
        b{
            display:block;
            font-family:georgia;
            text-shadow:0 .13em .1em rgba(0,0,0,.8);
            font-size:.9em;
            letter-spacing:-.02em;
            img{
                margin:0 .4em 0 0;
                height:.7em;
                box-shadow:0 .12em .1em rgba(0,0,0,.8);
            }
        }
        s{
            display:block;
            margin:.3em 0 0 0;
            opacity:.7;
            font-size:.4em;
            letter-spacing:.2em;
            transition:opacity .4s
        }
    }
    .name0{
        bottom:1.25%
    }
    .name1{
        top:1.5%
    }
    &[data-plr='1']{
        .name0{
            top:1.1%;
            bottom:auto
        }
        .name1{
            top:auto;
            bottom:1.25%
        }
    }

    .lefttext{
        position:absolute;
        top:50%;
        left:4%;
        transform:rotate(270deg) translate(-50%,-50%);
        transform-origin:0% 0%;
        width:100%;
        font-size:.5em;
        letter-spacing:.2em;
        text-shadow:-.1em 0 .1em rgba(0,0,0,.6);
        text-align:center;
        cursor:pointer;
        transition:all .4s;
        div{
            font-size:georgia;
            font-size:1em
        }
    }

    .score0,.score1{
        position:absolute;
        left:3.9%;
        transform:translateX(-50%);
        font-family:georgia;
        text-shadow:0 .08em .08em rgba(0,0,0,.8);
        font-size:1.7em
    }
    .score0[data-bump],.score1[data-bump]{
        animation:scoreBump .4s ease-out
    }
    .score0{
        bottom:7%
    }
    .score1{
        top:6.5%
    }
    &[data-plr='1']{
        .score0{
            top:6.5%;
            bottom:auto
        }
        .score1{
            top:auto;
            bottom:7%
        }
    }

    .time0,.time1{
        position:absolute;
        left:50%;
        transform:translate(-50%,0);
        font-family:georgia;
        font-size:.75em;
        opacity:.8
    }
    .time0{
        bottom:9.5%
    }
    .time1{
        top:9.2%
    }
    &[data-plr='1']{
        .time0{
            top:9.2%;
            bottom:auto
        }
        .time1{
            top:auto;
            bottom:9.5%
        }
    }

    .point0,.point1{
        position:absolute;
        left:50%;
        transform:translate(-50%,0);
        font-family:georgia;
        font-size:1em;
        opacity:.5
    }
    .point0{
        bottom:12%
    }
    .point1{
        top:11.6%
    }
    &[data-plr='1']{
        .point0{
            top:11.6%;
            bottom:auto
        }
        .point1{
            top:auto;
            bottom:12%
        }
    }

    .bevel0{
        right:54%;
        left:8%;
        .numtop,.numbot{
            left:.5%;
            right:0
        }
    }
    .bevel1{
        right:8%;
        left:54%;
        .numtop,.numbot{
            left:0;
            right:.5%
        }
    }
    .bevel0,.bevel1{
        position:absolute;
        top:8%;
        bottom:8%;
        background:linear-gradient(45deg,rgba(255,255,255,.5) 0%,transparent 50%,rgba(0,0,0,.6) 100%);
        .numtop{
            top:.3%
        }
        .numbot{
            bottom:.3%
        }
        .numtop,.numbot{
            position:absolute;
            left:.5%;
            right:.4%;
            z-index:1;
            display:flex;
            container-type:size;
            height:2%;
            background:#000;
            color:rgba(255,255,255,.5);
            font-weight:bold;
            overflow:hidden;
            div{
                flex-grow:1;
                position:relative;
                width:100%;
                padding:.4% 0 0 0;
                font-size:80cqh;
                text-align:center
            }
        }
        .par0,.par1{
            position:absolute;
            top:1%;
            bottom:1%;
            left:.4%;
            right:.4%;
            .partop,.parbot{
                position:absolute;
                left:0;
                right:0;
                display:flex;
                div{
                    flex-grow:1;
                    position:relative;
                    width:100%;
                    &:before{
                        content:"";
                        position:absolute;
                        top:0;
                        left:0;
                        display:block;
                        width:100%;
                        height:100%
                    }
                }
            }
            .partop{
                top:1.4%;
                bottom:58%;
                div{
                    &:before{
                        clip-path:polygon(0 0,50% 100%,50% 100%,100% 0)
                    }
                    &:nth-child(odd):before{
                        background:rgba(0,0,0,.3)
                    }
                    &:nth-child(even):before{
                        background:rgba(255,255,255,.3)
                    }
                }
            }
            .parbot{
                bottom:1.4%;
                top:58%;
                div{
                    &:before{
                        clip-path:polygon(50% 0%,0 100%,100% 100%)
                    }
                    &:nth-child(even):before{
                        background:rgba(0,0,0,.3)
                    }
                    &:nth-child(odd):before{
                        background:rgba(255,255,255,.3)
                    }
                }
            }
        }
    }

    [data-dce]{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        background:#fff;
        height:0;
        aspect-ratio:1/1;
        border-radius:20%;
        border-width:0;
        border-style:solid;
        border-color:rgba(255,255,255,.4) rgba(255,255,255,.3) rgba(0,0,0,.4) rgba(0,0,0,.3);
        box-shadow:0 0 0 0 rgba(0,0,0,0);
        transition:all .4s;
        pointer-events:none;
        b{
            position:absolute;
            display:block;
            border-radius:50%;
            background:#444;
            opacity:0
        }
        &[data-dce='6']{
            b:nth-child(1){
                left:20%;
                top:15%
            }
            b:nth-child(2){
                left:60%;
                top:15%
            }
            b:nth-child(3){
                left:20%;
                top:40%
            }
            b:nth-child(4){
                left:60%;
                top:40%
            }
            b:nth-child(5){
                left:20%;
                top:65%
            }
            b:nth-child(6){
                left:60%;
                top:65%
            }
        }
        &[data-dce='5']{
            b:nth-child(1){
                left:20%;
                top:20%
            }
            b:nth-child(2){
                left:60%;
                top:20%
            }
            b:nth-child(3){
                display:none
            }
            b:nth-child(4){
                left:40%;
                top:40%
            }
            b:nth-child(5){
                left:20%;
                top:60%
            }
            b:nth-child(6){
                left:60%;
                top:60%
            }
        }
        &[data-dce='4']{
            b:nth-child(1){
                left:20%;
                top:20%
            }
            b:nth-child(2){
                left:60%;
                top:20%
            }
            b:nth-child(3){
                display:none
            }
            b:nth-child(4){
                display:none
            }
            b:nth-child(5){
                left:20%;
                top:60%
            }
            b:nth-child(6){
                left:60%;
                top:60%
            }
        }
        &[data-dce='3']{
            b:nth-child(1){
                display:none
            }
            b:nth-child(2){
                display:none
            }
            b:nth-child(3){
                display:none
            }
            b:nth-child(4){
                left:20%;
                top:20%
            }
            b:nth-child(5){
                left:40%;
                top:40%
            }
            b:nth-child(6){
                left:60%;
                top:60%
            }
        }
        &[data-dce='2']{
            b:nth-child(1){
                display:none
            }
            b:nth-child(2){
                display:none
            }
            b:nth-child(3){
                display:none
            }
            b:nth-child(4){
                display:none
            }
            b:nth-child(5){
                left:20%;
                top:40%
            }
            b:nth-child(6){
                left:60%;
                top:40%
            }
        }
        &[data-dce='1']{
            b:nth-child(1){
                display:none
            }
            b:nth-child(2){
                display:none
            }
            b:nth-child(3){
                display:none
            }
            b:nth-child(4){
                display:none
            }
            b:nth-child(5){
                display:none
            }
            b:nth-child(6){
                left:40%;
                top:40%
            }
        }
        &[data-dcu='1']{
            border-color:#fff !important;
            background:transparent !important;
            box-shadow:0 0 0 0 rgba(0,0,0,0) !important;
            border-width:.18em !important;
            opacity:.6 !important;
            cursor:pointer;
            animation:dce-used .28s ease-in-out;
            b{
                background:#fff !important;
                box-shadow:0 0 0 0 rgba(0,0,0,0) !important;
                border-width:0 !important;
            }
        }
    }
    &[data-trn='1'] [data-dcu='1']{
        cursor:default
    }
    [data-dce]:not([data-dce='0']){
        height:6%;
        border-width:.15em;
        box-shadow:0 .2em .3em 0 rgba(0,0,0,.6);
        b{
            height:20%;
            width:20%;
            opacity:1
        }
    }
    &[data-dcs='-1'] [data-dce],&[data-dcs='0'] [data-dce],[data-dce][data-dce='0']{
        height:0;
        border-width:0 !important;
        box-shadow:0 0 0 0 rgba(0,0,0,0) !important;
        b{
            height:0%;
            width:0%;
            opacity:0
        }
    }
    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#fff5eb;
            b{
                background:#222
            }
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#cc0000;
            b{
                background:#fff
            }
        }
    }
    &[data-dcs='1']{
        :nth-child(1 of [data-dce]){
            left:22%
        }
        :nth-child(2 of [data-dce]){
            left:27%
        }
        :nth-child(3 of [data-dce]){
            left:73%
        }
        :nth-child(4 of [data-dce]){
            left:78%
        }
    }
    &[data-dcs='2'],&[data-dcs='-1']{
        :nth-child(1 of [data-dce]){
            left:65.5%
        }
        :nth-child(2 of [data-dce]){
            left:70.5%
        }
        :nth-child(3 of [data-dce]){
            left:75.5%
        }
        :nth-child(4 of [data-dce]){
            left:80.5%
        }
    }
    &[data-dcs='-1']{
        [data-dce]{
            height:0% !important;
            border-width:0 !important;
            box-shadow:0 0 0 0 rgba(0,0,0,0) !important
        }
    }
    &[data-dcs='3']{
        :nth-child(1 of [data-dce]){
            left:19.5%
        }
        :nth-child(2 of [data-dce]){
            left:24.5%
        }
        :nth-child(3 of [data-dce]){
            left:29.5%
        }
        :nth-child(4 of [data-dce]){
            left:34.5%
        }
    }
    &[data-dcn='2']{
        [data-dce]:nth-child(1),[data-dce]:nth-child(4){
            height:0 !important;
            border-width:0 !important;
            box-shadow:0 0 0 0 rgba(0,0,0,0) !important;
            b{
                height:0%;
                width:0%;
                opacity:0
            }
        }
        [data-dce]:not([data-dce='0']):not([data-dcu='1']){
            cursor:w-resize
        }
    }

    [data-dcd],[data-qit]{
        position:absolute;
        top:50%;
        transform:translate(-50%,-50%)
    }
    [data-dcd]{
        left:67%
    }
    [data-qit]{
        left:79%;
        opacity:.6
    }
    &[data-qit0='1']{
        [data-dcd],[data-qit]{
            font-size:0;
            border-width:0;
            padding:0;
            width:0;
            height:0;
            overflow:hidden;
            pointer-events:none;
            opacity:0
        }
    }
    &[data-dcs='-1']{
        [data-dcd],[data-qit]{
            font-size:1.3em;
            padding:.2em .5em;
            border-width:.2em
        }
    }
    &[data-dbb='2']{
        [data-dcd],[data-qit]{
            font-size:0;
            padding:0;
            border-width:0
        }
    }

    [data-dcz]{
        position:absolute;
        left:87%;
        top:50%;
        transform:translate(-50%,-50%);
        height:0;
        aspect-ratio:1/1;
        border-radius:50%;
        border-width:0;
        border-style:solid;
        border-color:#fff;
        cursor:pointer;
        transition:all .4s;
        span{
            position:absolute;
            left:50%;
            top:54%;
            transform:translate(-50%,-50%);
            font-weight:700;
            font-size:0;
            transition:all .4s
        }
    }
    &[data-dbb='2'] [data-dcz],[data-dcz='0']{
        border-width:0 !important;
        box-shadow:0 0 0 0 rgba(0,0,0,0) !important
    }
    [data-dcz='1'],[data-dcz='2'],[data-dcz='3'],[data-dcz='4'],[data-dcz='5']{
        height:9%;
        border-width:.25em;
        border-color:#fff;
        span{
            font-size:1.4em
        }
    }
    [data-dcz='2']{
        border-top:transparent .25em solid
    }
    [data-dcz='3']{
        border-top:transparent .25em solid;
        border-right:transparent .25em solid
    }
    [data-dcz='4']{
        border-top:transparent .25em solid;
        border-right:transparent .25em solid;
        border-bottom:transparent .25em solid
    }
    [data-dcz='5']{
        border-color:transparent;
        span{
            font-size:2em
        }
    }

    .ckrs{
        position:absolute;
        top:10%;
        bottom:10%;
        left:8.3%;
        right:8.3%;
        pointer-events:none;
        z-index:1;

        div{
            position:absolute;
            height:8.4%;
            aspect-ratio:1/1;
            border-radius:50%;
            box-shadow:0 .2em .15em 0 rgba(0,0,0,.3);
            transition:all .25s;
            pointer-events:auto;
            &:after{
                content:"";
                position:absolute;
                left:50%;
                top:50%;
                transform:translate(-50%,-50%);
                display:block;
                height:80%;
                aspect-ratio:1/1;
                border-radius:50%;
                transition:all .4s
            }
        }

        [data-spk='0']{
            left:50%;
            transform:translate(-50%,0)
        }
        [data-spk='1'],[data-spk='24']{
            left:93.249%
        }
        [data-spk='2'],[data-spk='23']{
            left:85.731%
        }
        [data-spk='3'],[data-spk='22']{
            left:78.213%
        }
        [data-spk='4'],[data-spk='21']{
            left:70.695%
        }
        [data-spk='5'],[data-spk='20']{
            left:63.177%
        }
        [data-spk='6'],[data-spk='19']{
            left:55.659%
        }
        [data-spk='7'],[data-spk='18']{
            left:38.093%
        }
        [data-spk='8'],[data-spk='17']{
            left:30.575%
        }
        [data-spk='9'],[data-spk='16']{
            left:23.057%
        }
        [data-spk='10'],[data-spk='15']{
            left:15.539%
        }
        [data-spk='11'],[data-spk='14']{
            left:8.021%
        }
        [data-spk='12'],[data-spk='13']{
            left:0.503%
        }
        [data-spk='25']{
            left:101.8%;
            height:2.3%;
            aspect-ratio:1/.25;
            border-radius:.5em;
            transition:all .15s;  /* faster than base .4s — snaps to pill before next ABO fires */
            &:after{
                display:none !important
            }
        }

        [data-spk='1'],[data-spk='2'],[data-spk='3'],[data-spk='4'],[data-spk='5'],[data-spk='6'],[data-spk='7'],[data-spk='8'],[data-spk='9'],[data-spk='10'],[data-spk='11'],[data-spk='12']{
            &[data-num='1']{
                top:0%;
                z-index:15
            }
            &[data-num='2']{
                top:8.4%;
                z-index:16
            }
            &[data-num='3']{
                top:16.8%;
                z-index:17
            }
            &[data-num='4']{
                top:25.2%;
                z-index:18
            }
            &[data-num='5']{
                top:33.6%;
                z-index:19
            }
            &[data-num='6']{
                top:4.2%;
                z-index:20
            }
            &[data-num='7']{
                top:12.6%;
                z-index:21
            }
            &[data-num='8']{
                top:21%;
                z-index:22
            }
            &[data-num='9']{
                top:29.4%;
                z-index:23
            }
            &[data-num='10']{
                top:8.4%;
                z-index:24
            }
            &[data-num='11']{
                top:16.8%;
                z-index:25
            }
            &[data-num='12']{
                top:25.2%;
                z-index:26
            }
            &[data-num='13']{
                top:12.6%;
                z-index:27
            }
            &[data-num='14']{
                top:21%;
                z-index:28
            }
            &[data-num='15']{
                top:16.8%;
                z-index:29
            }
        }

        [data-spk='13'],[data-spk='14'],[data-spk='15'],[data-spk='16'],[data-spk='17'],[data-spk='18'],[data-spk='19'],[data-spk='20'],[data-spk='21'],[data-spk='22'],[data-spk='23'],[data-spk='24']{
            &[data-num='1']{
                top:91.6%;
                z-index:15
            }
            &[data-num='2']{
                top:83.2%;
                z-index:14
            }
            &[data-num='3']{
                top:74.8%;
                z-index:13
            }
            &[data-num='4']{
                top:66.4%;
                z-index:12
            }
            &[data-num='5']{
                top:58%;
                z-index:11
            }
            &[data-num='6']{
                top:87.4%;
                z-index:20
            }
            &[data-num='7']{
                top:79%;
                z-index:19
            }
            &[data-num='8']{
                top:70.6%;
                z-index:18
            }
            &[data-num='9']{
                top:62.2%;
                z-index:17
            }
            &[data-num='10']{
                top:83.2%;
                z-index:23
            }
            &[data-num='11']{
                top:74.8%;
                z-index:22
            }
            &[data-num='12']{
                top:66.4%;
                z-index:21
            }
            &[data-num='13']{
                top:79%;
                z-index:25
            }
            &[data-num='14']{
                top:70.6%;
                z-index:24
            }
            &[data-num='15']{
                top:74.8%;
                z-index:26
            }
        }

        [data-ckr='0'][data-spk='0']{
            &[data-num='1']{
                top:74.8%;
                z-index:3
            }
            &[data-num='2']{
                top:66.4%;
                z-index:2
            }
            &[data-num='3']{
                top:58%;
                z-index:1
            }
            &[data-num='4']{
                top:70.6%;
                z-index:5
            }
            &[data-num='5']{
                top:62.2%;
                z-index:4
            }
            &[data-num='6'],&[data-num='7'],&[data-num='6'],&[data-num='8'],&[data-num='9'],&[data-num='10'],&[data-num='11'],&[data-num='12'],&[data-num='13'],&[data-num='14'],&[data-num='15']{
                top:66.4%;
                z-index:6
            }
        }
        [data-ckr='1'][data-spk='0']{
            &[data-num='1']{
                top:16.8%;
                z-index:3
            }
            &[data-num='2']{
                top:25.2%;
                z-index:4
            }
            &[data-num='3']{
                top:33.6%;
                z-index:5
            }
            &[data-num='4']{
                top:21%;
                z-index:8
            }
            &[data-num='5']{
                top:29.4%;
                z-index:9
            }
            &[data-num='6'],&[data-num='7'],&[data-num='6'],&[data-num='8'],&[data-num='9'],&[data-num='10'],&[data-num='11'],&[data-num='12'],&[data-num='13'],&[data-num='14'],&[data-num='15']{
                top:25.2%;
                z-index:10
            }
        }

        /* Player 0's board: own checkers (ck=0) enter from top bar; opponent (ck=1) at bottom */
        &[data-plr='0'] {
            [data-ckr='0'][data-spk='0']{
                &[data-num='1']{
                    top:16.8%;
                    z-index:3
                }
                &[data-num='2']{
                    top:25.2%;
                    z-index:4
                }
                &[data-num='3']{
                    top:33.6%;
                    z-index:5
                }
                &[data-num='4']{
                    top:21%;
                    z-index:8
                }
                &[data-num='5']{
                    top:29.4%;
                    z-index:9
                }
                &[data-num='6'],&[data-num='7'],&[data-num='8'],&[data-num='9'],&[data-num='10'],&[data-num='11'],&[data-num='12'],&[data-num='13'],&[data-num='14'],&[data-num='15']{
                    top:25.2%;
                    z-index:10
                }
            }
            [data-ckr='1'][data-spk='0']{
                &[data-num='1']{
                    top:74.8%;
                    z-index:3
                }
                &[data-num='2']{
                    top:66.4%;
                    z-index:2
                }
                &[data-num='3']{
                    top:58%;
                    z-index:1
                }
                &[data-num='4']{
                    top:70.6%;
                    z-index:5
                }
                &[data-num='5']{
                    top:62.2%;
                    z-index:4
                }
                &[data-num='6'],&[data-num='7'],&[data-num='8'],&[data-num='9'],&[data-num='10'],&[data-num='11'],&[data-num='12'],&[data-num='13'],&[data-num='14'],&[data-num='15']{
                    top:66.4%;
                    z-index:6
                }
            }
        }

        /* spk=25 borne-off: bottom starts 96% step -2.5%,top starts 2% step +2.5% (0.2% gap between pills)
           Default (plr=0): ck=0=own→bottom,ck=1=opponent→top
           Override [data-plr='1']: ck=0=opponent→top,ck=1=own→bottom            */
        [data-ckr='0'][data-spk='25']{
            &[data-num='1']{
                top:96%;
                z-index:15
            }
            &[data-num='2']{
                top:93.5%;
                z-index:14
            }
            &[data-num='3']{
                top:91%;
                z-index:13
            }
            &[data-num='4']{
                top:88.5%;
                z-index:12
            }
            &[data-num='5']{
                top:86%;
                z-index:11
            }
            &[data-num='6']{
                top:83.5%;
                z-index:10
            }
            &[data-num='7']{
                top:81%;
                z-index:9
            }
            &[data-num='8']{
                top:78.5%;
                z-index:8
            }
            &[data-num='9']{
                top:76%;
                z-index:7
            }
            &[data-num='10']{
                top:73.5%;
                z-index:6
            }
            &[data-num='11']{
                top:71%;
                z-index:5
            }
            &[data-num='12']{
                top:68.5%;
                z-index:4
            }
            &[data-num='13']{
                top:66%;
                z-index:3
            }
            &[data-num='14']{
                top:63.5%;
                z-index:2
            }
            &[data-num='15']{
                top:61%;
                z-index:1
            }
        }
        [data-ckr='1'][data-spk='25']{
            &[data-num='1']{
                top:2%;
                z-index:1
            }
            &[data-num='2']{
                top:4.5%;
                z-index:2
            }
            &[data-num='3']{
                top:7%;
                z-index:3
            }
            &[data-num='4']{
                top:9.5%;
                z-index:4
            }
            &[data-num='5']{
                top:12%;
                z-index:5
            }
            &[data-num='6']{
                top:14.5%;
                z-index:6
            }
            &[data-num='7']{
                top:17%;
                z-index:7
            }
            &[data-num='8']{
                top:19.5%;
                z-index:8
            }
            &[data-num='9']{
                top:22%;
                z-index:9
            }
            &[data-num='10']{
                top:24.5%;
                z-index:10
            }
            &[data-num='11']{
                top:27%;
                z-index:11
            }
            &[data-num='12']{
                top:29.5%;
                z-index:12
            }
            &[data-num='13']{
                top:32%;
                z-index:13
            }
            &[data-num='14']{
                top:34.5%;
                z-index:14
            }
            &[data-num='15']{
                top:37%;
                z-index:15
            }
        }
        /* plr=1 board: ck=0=opponent→top section,ck=1=own→bottom section */
        &[data-plr='1'] {
            [data-ckr='0'][data-spk='25']{
                &[data-num='1']{
                    top:2%;
                    z-index:1
                }
                &[data-num='2']{
                    top:4.5%;
                    z-index:2
                }
                &[data-num='3']{
                    top:7%;
                    z-index:3
                }
                &[data-num='4']{
                    top:9.5%;
                    z-index:4
                }
                &[data-num='5']{
                    top:12%;
                    z-index:5
                }
                &[data-num='6']{
                    top:14.5%;
                    z-index:6
                }
                &[data-num='7']{
                    top:17%;
                    z-index:7
                }
                &[data-num='8']{
                    top:19.5%;
                    z-index:8
                }
                &[data-num='9']{
                    top:22%;
                    z-index:9
                }
                &[data-num='10']{
                    top:24.5%;
                    z-index:10
                }
                &[data-num='11']{
                    top:27%;
                    z-index:11
                }
                &[data-num='12']{
                    top:29.5%;
                    z-index:12
                }
                &[data-num='13']{
                    top:32%;
                    z-index:13
                }
                &[data-num='14']{
                    top:34.5%;
                    z-index:14
                }
                &[data-num='15']{
                    top:37%;
                    z-index:15
                }
            }
            [data-ckr='1'][data-spk='25']{
                &[data-num='1']{
                    top:96%;
                    z-index:15
                }
                &[data-num='2']{
                    top:93.5%;
                    z-index:14
                }
                &[data-num='3']{
                    top:91%;
                    z-index:13
                }
                &[data-num='4']{
                    top:88.5%;
                    z-index:12
                }
                &[data-num='5']{
                    top:86%;
                    z-index:11
                }
                &[data-num='6']{
                    top:83.5%;
                    z-index:10
                }
                &[data-num='7']{
                    top:81%;
                    z-index:9
                }
                &[data-num='8']{
                    top:78.5%;
                    z-index:8
                }
                &[data-num='9']{
                    top:76%;
                    z-index:7
                }
                &[data-num='10']{
                    top:73.5%;
                    z-index:6
                }
                &[data-num='11']{
                    top:71%;
                    z-index:5
                }
                &[data-num='12']{
                    top:68.5%;
                    z-index:4
                }
                &[data-num='13']{
                    top:66%;
                    z-index:3
                }
                &[data-num='14']{
                    top:63.5%;
                    z-index:2
                }
                &[data-num='15']{
                    top:61%;
                    z-index:1
                }
            }
        }

        /* Checker interaction: driven entirely by data-trn,data-plr,data-dmv — no inline JS styles */
        [data-ckr]{
            pointer-events:none;
            cursor:default
        }
        [data-dmv='0']{
            cursor:not-allowed
        }
        [data-dmv='1']{
            pointer-events:auto;
            cursor:pointer
        }
        [data-mve='1']{
            z-index:999 !important
                /* No transition override — base transition:all .4s plays the move animation */
        }
    }
    /* Not my turn: all checkers unclickable,default cursor */
    &[data-trn='0'] .ckrs [data-ckr]{
        cursor:default
    }

    /* While any checker animates,lift the whole checker layer above the cube (60).
       .ckrs z-index:1 is a stacking context,so the mover's 999 only wins among
       checkers — the layer itself must outrank the cube for the move to pass over it. */
    .ckrs:has([data-mve='1']){
        z-index:70
    }
    /* While the cube itself moves,lift it above everything incl. moving checkers */
    [data-dbl][data-mve='1']{
        z-index:200
    }

    [data-dbl]{
        position:absolute;
        left:96.1%;
        top:50%;
        transform:translate(-50%,-50%);
        width:5%;
        aspect-ratio:1/1;
        background:radial-gradient(circle,#666 0%,#222 100%);
        background-position:center;
        border-radius:20%;
        border-width:.15em;
        border-style:solid;
        border-color:#ddd #aaa #666 #888;
        box-shadow:0 .3em .3em 0 rgba(0,0,0,.6);
        color:rgba(255,255,255,.6);
        z-index:60;
        transition:all .4s;
        *{
            position:absolute;
            transition:all .4s
        }
        b{
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            font-family:times;
            font-size:1em
        }
        s{
            position:relative;
            left:50%;
            bottom:-106%;
            transform:translate(-50%,0);
            height:0;
            aspect-ratio:1/1;
            display:block;
            border-radius:50%;
            border-style:solid;
            border-width:0;
            border-color:#ddd #999 #666 #888;
            background:radial-gradient(circle,#FF0000 0%,#400000 100%);
            box-shadow:0 0 0 0 rgba(0,0,0,0);
            transition:all .4s;
            span{
                position:absolute;
                left:50%;
                top:50%;
                transform:translate(-50%,-50%);
                font-size:0em;
                font-weight:700;
                transition:all .4s;
            }
        }
    }
    &[data-dbb='0'] [data-dbl]{
        width:0;
        height:0;
        left:97%;
        border-width:0;
        font-size:0;
        box-shadow:0 0 0 0 rgba(0,0,0,0)
    }
    &[data-dbb='1'] [data-dbl]{
        left:96.1%;
    }
    &[data-dbb='2'] [data-dbl]{
        left:50%
    }
    &[data-dbb='2'],&[data-dbb='3'],&[data-dbb='4']{
        [data-dbl]{
            left:50%
        }
    }
    &[data-trn='0'][data-dbb='2'] [data-dbl]{
        left:50%;
        width:10%;
        background:radial-gradient(circle,#00ff00 0%,#008000 80%);
        background-position:center;
        border-width:.2em;
        cursor:pointer;
        b{
            font-size:2em;
            color:rgba(255,255,255,1)
        }
        s{
            height:2.2em;
            border-width:.2em;
            box-shadow:0 .2em .3em 0 rgba(0,0,0,.4);
            cursor:pointer;
            transition-delay:.5s;
            span{
                font-size:2em;
                transition-delay:.5s;
            }
        }
    }
    /* Owned cube — left:50% centres on bar; top determines which player's side */
    &[data-plr='0'][data-dbb='3'] [data-dbl]{
        left:50%;
        top:81%   /* plr0 view,plr0 owns → own side = bottom */
    }
    &[data-plr='0'][data-dbb='4'] [data-dbl]{
        left:50%;
        top:19%   /* plr0 view,plr1 owns → opponent = top */
    }
    &[data-plr='1'][data-dbb='3'] [data-dbl]{
        left:50%;
        top:19%   /* plr1 view,plr0 owns → opponent = top */
    }
    &[data-plr='1'][data-dbb='4'] [data-dbl]{
        left:50%;
        top:81%   /* plr1 view,plr1 owns → own side = bottom */
    }
    &[data-cfd='0'] [data-dbl]{
        background:radial-gradient(circle,#FF0000 0%,#800000 100%) !important;
        cursor:not-allowed
    }
    /* Crawford game: cube locked — dim and disable,no extra label */
    &[data-crf='1'] [data-dbl]{
        background:radial-gradient(circle,#ff0000 0%,#400000 100%);
        cursor:not-allowed
    }

    .bare0,.bare1{
        position:absolute;
        right:1.5%;
        width:5%;
        height:36%;
        border-radius:3em;
        box-shadow:1em -.5em 1em -1em rgba(255,255,255,.4) inset,-2em .5em 1em -1em rgba(0,0,0,.5) inset;
        background:linear-gradient(0deg,transparent 10%,rgba(255,255,255,.6) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.6) 55%,transparent 90%),linear-gradient(0deg,transparent 10%,rgba(255,255,255,.6) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.6) 55%,transparent 90%);
        background-position:0 center,98% center;
        background-size:2% 100%;
        background-repeat:no-repeat
    }
    .bare0{
        bottom:9%
    }
    .bare1{
        top:9%
    }

    .msg{
        position:absolute;
        top:50%;
        transform:translate(-50%,-50%);
        height:0;
        width:0;
        overflow:hidden;
        font-size:0;
        z-index:100;
        pointer-events:none;
        text-align:center;
        font-family:georgia;
        z-index:20;
        border-radius:6em;
        border-width:0;
        border-style:solid;
        border-color:rgba(255,255,255,0);
        background:rgba(0,0,0,.5);
        box-shadow:0 0 0 0 rgba(0,0,0,0);
        transition:all .4s
    }
    &[data-gen='1'] .gen{
        left:50%
    }
    &[data-qit0='1'] .qit0,&[data-qit0='2'] .qit0,&[data-qit1='1'] .qit1,&[data-qit1='2'] .qit1,&[data-gen='1'] .gen{
        width:auto;
        height:auto;
        font-size:1em;
        overflow:visible;
        pointer-events:auto;
        padding:.8em 1.2em;
        border-width:.2em;
        border-color:rgba(255,255,255,.5);
        box-shadow:0 .3em .3em 0 rgba(0,0,0,.5);
        b{
            display:block;
            margin:0 0 .15em 0
        }
        button{
            font-size:1em;
            padding:.2em .7em;
            cursor:pointer;
            border-width:.2em;
            color:rgba(255,255,255,1)
        }
    }
    &[data-qit0='1'] .qit0,&[data-qit0='2'] .qit0{
        left:72.7%
    }
    /* qit0=2: pending state — hide buttons,show waiting message */
    &[data-qit0='2'] .qit0 button{
        display:none
    }
    &[data-qit0='2'] .qit0 b::after{
        content:" — Waiting for opponent...";
        font-weight:normal;
        opacity:.7
    }
    /* qit1=1: opponent resign — show accept/decline; timer already switched to their clock */
    &[data-qit1='1'] .qit1{
        left:72.7%
    }

    [data-hnt]{
        position:absolute;
        top:0;
        right:0;
        width:100%;
        height:100%;
        pointer-events:none;
        z-index:200;
        overflow:visible
    }
    [data-hnt='0']{
        display:none
    }

    .win{
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        font-family:georgia;
        text-shadow:0 .12em .1em rgba(0,0,0,.8);
        opacity:0;
        & > *{
            position:absolute;
            left:50%;
            transform:translate(-50%,-50%)
        }
        .ww{
            position:absolute;
            top:46%;
            height:0;
            aspect-ratio:1/1.5;
            opacity:0
        }
        .wf{
            top:34%;
            height:0;
            box-shadow:0 .3em .2em -.1em rgba(0,0,0,.5)
        }
        .wn{
            top:40.6%;
            font-size:0;
            letter-spacing:0
        }
        .wc{
            top:44%;
            font-size:0;
            text-transform:uppercase
        }
        .wl{
            top:47%;
            width:0%;
            height:2px;
            background:radial-gradient(rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%)
        }
        .wl~.wl{
            top:60%
        }
        .ws{
            top:50.5%;
            font-size:0;
        }
        .wt{
            top:56%;
            font-size:0
        }
        .wz{
            top:63%;
            max-width:24%;
            text-align:center;
            font-size:0;
            font-family:arial;
            transform:translate(-50%,0);
        }
        .wb{
            top:100%;
            & > * {
                transition:all .4s
            }
        }
    }
    &[data-win='1']{
        .name0,.name1,.score0,.score1,.time0,.time1,.point0,.point1,.bevel0,.bevel1,[data-dce],.bare0,.bare1,.ckrs,[data-dbl],.msg,[data-hnt]{
            opacity:0;
            transition-delay:.5s
        }
        .win{
            z-index:200;
            opacity:1;
            transition:all 1s;
            & > *{
                transition:all 1s
            }
            .ww{
                height:140%;
                opacity:.2
            }
            .wf{
                height:5%
            }
            .wn{
                font-size:1.2em;
                letter-spacing:-.05em
            }
            .wc{
                font-size:.4em;
                letter-spacing:.4em
            }
            .wl{
                width:40%
            }
            .ws{
                font-size:2em
            }
            .wt{
                font-size:.7em
            }
            .wz{
                font-size:.6em
            }
            .wb{
                top:90%;
                button{
                    font-size:1em;
                    padding:.3em .7em;
                    border-width:.2em
                }
            }
            [data-rmb='2']{
                color:lime;
                border-color:lime
            }
        }
        /* Hide win-screen buttons on secondary (small) boards */
        &[data-grd]:not([data-grd='0']) .wb{
            display:none
        }
    }

    /* ── Player-perspective overrides at [data-board] level (& = [data-board]) ──
       The equivalent rules inside .ckrs{} used & = .ckrs so never matched.
       Higher specificity here (4 attrs) ensures these always win.
    plr=0: ck=0 enters bar from top,ck=1 from bottom */
    &[data-plr='0'] [data-ckr='0'][data-spk='0']{
        &[data-num='1']{
            top:16.8%;
            z-index:3
        }
        &[data-num='2']{
            top:25.2%;
            z-index:4
        }
        &[data-num='3']{
            top:33.6%;
            z-index:5
        }
        &[data-num='4']{
            top:21%;
            z-index:8
        }
        &[data-num='5']{
            top:29.4%;
            z-index:9
        }
        &[data-num='6'],&[data-num='7'],&[data-num='8'],&[data-num='9'],&[data-num='10'],&[data-num='11'],&[data-num='12'],&[data-num='13'],&[data-num='14'],&[data-num='15']{
            top:25.2%;
            z-index:10
        }
    }
    &[data-plr='0'] [data-ckr='1'][data-spk='0']{
        &[data-num='1']{
            top:74.8%;
            z-index:3
        }
        &[data-num='2']{
            top:66.4%;
            z-index:2
        }
        &[data-num='3']{
            top:58%;
            z-index:1
        }
        &[data-num='4']{
            top:70.6%;
            z-index:5
        }
        &[data-num='5']{
            top:62.2%;
            z-index:4
        }
        &[data-num='6'],&[data-num='7'],&[data-num='8'],&[data-num='9'],&[data-num='10'],&[data-num='11'],&[data-num='12'],&[data-num='13'],&[data-num='14'],&[data-num='15']{
            top:66.4%;
            z-index:6
        }
    }

    /* plr=1 bar: default CSS is already correct — ck=0/Johnny re-enters at view sp=1-6
       (bottom row,so bottom section 74.8%) and ck=1/Guest re-enters at view sp=19-24
       (top row,so top section 16.8%). No override needed for plr=1.
    plr=1 bearoff: ck=0=opponent→top(bare1),ck=1=own→bottom(bare0) */
    &[data-plr='1'] [data-ckr='0'][data-spk='25']{
        &[data-num='1']{
            top:2%;
            z-index:1
        }
        &[data-num='2']{
            top:4.5%;
            z-index:2
        }
        &[data-num='3']{
            top:7%;
            z-index:3
        }
        &[data-num='4']{
            top:9.5%;
            z-index:4
        }
        &[data-num='5']{
            top:12%;
            z-index:5
        }
        &[data-num='6']{
            top:14.5%;
            z-index:6
        }
        &[data-num='7']{
            top:17%;
            z-index:7
        }
        &[data-num='8']{
            top:19.5%;
            z-index:8
        }
        &[data-num='9']{
            top:22%;
            z-index:9
        }
        &[data-num='10']{
            top:24.5%;
            z-index:10
        }
        &[data-num='11']{
            top:27%;
            z-index:11
        }
        &[data-num='12']{
            top:29.5%;
            z-index:12
        }
        &[data-num='13']{
            top:32%;
            z-index:13
        }
        &[data-num='14']{
            top:34.5%;
            z-index:14
        }
        &[data-num='15']{
            top:37%;
            z-index:15
        }
    }
    &[data-plr='1'] [data-ckr='1'][data-spk='25']{
        &[data-num='1']{
            top:96%;
            z-index:15
        }
        &[data-num='2']{
            top:93.5%;
            z-index:14
        }
        &[data-num='3']{
            top:91%;
            z-index:13
        }
        &[data-num='4']{
            top:88.5%;
            z-index:12
        }
        &[data-num='5']{
            top:86%;
            z-index:11
        }
        &[data-num='6']{
            top:83.5%;
            z-index:10
        }
        &[data-num='7']{
            top:81%;
            z-index:9
        }
        &[data-num='8']{
            top:78.5%;
            z-index:8
        }
        &[data-num='9']{
            top:76%;
            z-index:7
        }
        &[data-num='10']{
            top:73.5%;
            z-index:6
        }
        &[data-num='11']{
            top:71%;
            z-index:5
        }
        &[data-num='12']{
            top:68.5%;
            z-index:4
        }
        &[data-num='13']{
            top:66%;
            z-index:3
        }
        &[data-num='14']{
            top:63.5%;
            z-index:2
        }
        &[data-num='15']{
            top:61%;
            z-index:1
        }
    }

    [data-wtc]{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        z-index:500;
        width:80%;
        height:7%;
        border-radius:4em;
        padding:.2em;
        background:rgba(0,0,0,.5);
        box-shadow:0 .5em .5em -.5em rgba(0,0,0,0);
        display:flex;
        align-items:center;
        gap:.4em;
        transition:box-shadow .4s,background .4s;
        svg{
            height:100%;
            aspect-ratio:1;
            flex-shrink:0;
            cursor:pointer;
            opacity:.7;
            &:hover{
                opacity:1
            }
        }
        [data-wtcrng='1']{
            position:relative;
            height:100%;
            flex:1;
            input{
                width:100%;
                opacity:.5;
                cursor:pointer;
                padding:0;
                &::-webkit-slider-thumb{
                    margin:0
                }
                &::-webkit-slider-runnable-track{
                    width:100%
                }
                &::-moz-range-thumb{
                    margin:0
                }
            }
            div{
                position:absolute;
                top:50%;
                border-style:solid;
                border-color:rgba(255,255,255,.6);
                border-width:0 0 0 1px;
                padding:.5em 0 0 .5em;
                font-size:.4em;
                color:rgba(255,255,255,.6);
                cursor:pointer;
                transition:all .4s
            }
        }
    }
    [data-wtc]:hover{
        background:rgba(64,64,64,1);
        box-shadow:0 .7em .5em -.5em rgba(0,0,0,1);
        .drag{
            background:rgba(64,64,64,1);
            font-size:.3em;
            letter-spacing:.9em;
            padding:1.5em 2em 1em 2em;
        }
        input{
            opacity:1
        }
    }

    .drag{
        position:absolute;
        top:0;
        left:50%;
        transform:translate(-50%,-98%);
        border-radius:1em 1em 0 0;
        background:rgba(0,0,0,0);
        color:#ccc;
        font-size:0;
        letter-spacing:0;
        padding:.3em .8em;
        cursor:move;
        transition:all .2s;
    }

    .chattab{
        position:absolute;
        right:2.5em;
        bottom:1em;
        opacity:.6;
        cursor:pointer;
        z-index:600;
        svg{
            width:28px;
            height:28px;
            display:block;
            margin:0 auto
        }
        em{
            font-style:normal;
            font-size:9pt;
            background:rgba(255,255,255,.25);
            border-radius:8px;
            padding:1px 5px;
            margin-left:3px
        }
        u{
            font-size:9pt;
            background:#e44;
            border-radius:8px;
            padding:1px 5px;
            margin-left:3px;
            text-decoration:none
        }
    }
    &:not([data-grd='0']) .chattab,&:not([data-grd='0']) .chatbox{
        display:none !important
    }

    .chatbox{
        height:8%;
        &:hover{
            height:500px;
            background:rgba(0,0,0,.8);
            box-shadow:0 .3em 1em rgba(0,0,0,.7)
        }
    }
}

@keyframes scoreBump{
    0%  {
        font-size:2.3em
    }
    100%{
        font-size:1.7em
    }
}
@keyframes dce-used{
    0%  {
        transform:translate(-50%,-50%) scale(1)
    }
    50% {
        transform:translate(-50%,-50%) scale(.6)
    }
    100%{
        transform:translate(-50%,-50%) scale(1)
    }
}

/* BOARD STYLES */
[data-board='default']{
    background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%),repeating-linear-gradient(174deg,transparent 0px,transparent 18px,rgba(0,0,0,.13) 18px,rgba(0,0,0,.13) 22px,transparent 22px,transparent 38px,rgba(60,10,5,.18) 38px,rgba(60,10,5,.18) 42px,transparent 42px,transparent 60px,rgba(255,255,255,.04) 60px,rgba(255,255,255,.04) 63px,transparent 63px,transparent 90px),repeating-linear-gradient(178deg,transparent 0px,transparent 30px,rgba(0,0,0,.10) 30px,rgba(0,0,0,.10) 36px,transparent 36px,transparent 55px,rgba(90,15,8,.20) 55px,rgba(90,15,8,.20) 60px,transparent 60px,transparent 140px),repeating-linear-gradient(172deg,transparent 0px,transparent 8px,rgba(40,5,2,.12) 8px,rgba(40,5,2,.12) 10px,transparent 10px,transparent 50px),linear-gradient(180deg,#8b2a1c 0%,#6e1e12 30%,#7a2318 50%,#6b1c11 70%,#7e2419 100%);

    .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,230,200,.28) 0px,transparent 1px,transparent 3px),repeating-radial-gradient(circle at 70% 70%,rgba(255,225,195,.25) 0px,transparent 1.5px,transparent 4px),repeating-linear-gradient(28deg,rgba(80,50,25,.25) 0px,rgba(80,50,25,.25) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(-35deg,rgba(70,45,20,.22) 0px,rgba(70,45,20,.22) 1px,transparent 1px,transparent 5px),radial-gradient(circle at 40% 40%,rgba(185,140,95,.35) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(135,95,60,.4) 0%,transparent 70%),#a0734a;
            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;
        }
    }
}
[data-board='obsidian']{
    background:linear-gradient(90deg,rgba(0,0,0,.3) 0%,transparent 50%,rgba(0,0,0,.3) 100%),repeating-linear-gradient(174deg,transparent 0px,transparent 18px,rgba(22,22,22,.2) 18px,rgba(22,22,22,.2) 22px,transparent 22px,transparent 38px,rgba(84,84,84,.12) 38px,rgba(84,84,84,.12) 42px,transparent 42px,transparent 60px,rgba(255,255,255,.06) 60px,rgba(255,255,255,.06) 63px,transparent 63px,transparent 90px),repeating-linear-gradient(178deg,transparent 0px,transparent 30px,rgba(20,20,20,.2) 30px,rgba(10,10,10,.2) 36px,transparent 36px,transparent 55px,rgba(0,0,0,.1) 55px,rgba(0,0,0,.1) 60px,transparent 60px,transparent 140px),repeating-linear-gradient(172deg,transparent 0px,transparent 8px,rgba(25,25,25,.15) 8px,rgba(25,25,25,.15) 10px,transparent 10px,transparent 50px),linear-gradient(180deg,#000 0%,#222 30%,#000 50%,#222 70%,#000 100%);

    .bevel0,.bevel1{
        background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 40%,rgba(255,255,255,1) 50%,rgba(255,255,255,.6) 60%,transparent 100%),linear-gradient(0deg,transparent 30%,rgba(255,255,255,.6) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.6) 55%,transparent 70%),linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
        .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(128,128,128,.28) 0px,transparent 1px,transparent 3px),repeating-radial-gradient(circle at 70% 70%,rgba(128,128,128,.25) 0px,transparent 1.5px,transparent 4px),repeating-linear-gradient(28deg,rgba(64,64,64,.25) 0px,rgba(64,64,64,.25) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(-35deg,rgba(64,64,64,.22) 0px,rgba(64,64,64,.22) 1px,transparent 1px,transparent 5px),radial-gradient(circle at 40% 40%,rgba(128,128,128,.35) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(64,64,64,.4) 0%,transparent 70%),#333;
            .partop{
                top:0;
                bottom:58%;
                div{
                    &:nth-child(odd):before{
                        background:rgba(0,0,0,.4)
                    }
                    &:nth-child(even):before{
                        background:rgba(255,255,255,.2)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:rgba(0,0,0,.4)
                    }
                    &:nth-child(odd):before{
                        background:rgba(255,255,255,.2)
                    }
                }
            }
        }
        .numtop,.numbot{
            background:linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
            div:nth-child(odd){
                background:#333
            }
        }
    }
    .score0,.score1{
        color:#D4AF37
    }
    .time0,.time1{
        color:#D4AF37;
        opacity:1
    }
    .point0,.point1{
        color:#B8860B;
        opacity:1
    }

    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%),#f5f5f5;
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#f5f5f5
        }
    }
    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%),#000;
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#000
        }
    }

    [data-dce]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B
    }
    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#f5f5f5;
            b{
                background:#222
            }
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#222;
            b{
                background:#f5f5f5
            }
        }
    }

    [data-dbl]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B;
        b{
            color:#D4AF37
        }
    }
}
[data-board='pharoh']{
    background:linear-gradient(45deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,.6) 100%),linear-gradient(-45deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,.6) 100%),repeating-linear-gradient(174deg,transparent 0px,transparent 18px,rgba(0,0,0,.13) 18px,rgba(0,0,0,.13) 22px,transparent 22px,transparent 38px,rgba(60,10,5,.18) 38px,rgba(60,10,5,.18) 42px,transparent 42px,transparent 60px,rgba(255,255,255,.04) 60px,rgba(255,255,255,.04) 63px,transparent 63px,transparent 90px),repeating-linear-gradient(178deg,transparent 0px,transparent 30px,rgba(0,0,0,.10) 30px,rgba(0,0,0,.10) 36px,transparent 36px,transparent 55px,rgba(90,15,8,.20) 55px,rgba(90,15,8,.20) 60px,transparent 60px,transparent 140px),repeating-linear-gradient(172deg,transparent 0px,transparent 8px,rgba(40,5,2,.12) 8px,rgba(40,5,2,.12) 10px,transparent 10px,transparent 50px),linear-gradient(180deg,#8b2a1c 0%,#6e1e12 30%,#7a2318 50%,#6b1c11 70%,#7e2419 100%);

    .bevel0,.bevel1{
        background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 40%,rgba(255,255,255,1) 50%,rgba(255,255,255,.6) 60%,transparent 100%),linear-gradient(0deg,transparent 30%,rgba(255,255,255,.6) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.6) 55%,transparent 70%),linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
        .par0,.par1{
            background:repeating-radial-gradient(circle at 25% 25%,rgba(219,202,187,.15) 0px,transparent 1.5px,transparent 4px),repeating-radial-gradient(circle at 75% 75%,rgba(219,202,187,.12) 0px,transparent 1.5px,transparent 5px),repeating-linear-gradient(40deg,rgba(87,80,74,.25) 0px,rgba(87,80,74,.25) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(-50deg,rgba(80,73,69,.22) 0px,rgba(80,73,69,.22) 1px,transparent 1px,transparent 4.5px),radial-gradient(circle at 30% 40%,rgba(118,105,97,.4) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(93,84,77,.45) 0%,transparent 60%),#88776b;
            background-size:55% 55%,56% 56%,57% 57%,57% 57%,100% 100%,100% 100%;
            background-repeat:repeat;
            .partop{
                div{
                    &:nth-child(odd):before{
                        background:rgba(0,0,0,.2)
                    }
                    &:nth-child(even):before{
                        background:rgba(255,255,255,.2)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:rgba(0,0,0,.2)
                    }
                    &:nth-child(odd):before{
                        background:rgba(255,255,255,.2)
                    }
                }
            }
        }
        .numtop,.numbot{
            background:linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
            div:nth-child(odd){
                background:#000080
            }
        }
    }
    .score0,.score1{
        color:#D4AF37
    }
    .time0,.time1{
        color:#D4AF37;
        opacity:1
    }
    .point0,.point1{
        color:#B8860B;
        opacity:1
    }

    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%),#f5f5f5;
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#f5f5f5
        }
    }
    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%),#000080;
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#000080
        }
    }

    [data-dce]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B
    }
    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#f5f5f5;
            b{
                background:#222
            }
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#000080;
            b{
                background:#f5f5f5
            }
        }
    }

    [data-dbl]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B;
        b{
            color:#D4AF37
        }
    }
}
[data-board='pink-lace']{
    background:linear-gradient(90deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.4) 100%),radial-gradient(circle at 100% 150%,rgba(255,0,128,.5) 24%,rgba(212,0,95,.5) 24%,rgba(212,0,95,.5) 28%,rgba(255,0,128,.5) 28%,rgba(255,0,128,.5) 36%,rgba(212,0,95,.5) 36%,rgba(212,0,95,.5) 40%,transparent 40%,transparent),radial-gradient(circle at 0 150%,rgba(255,0,128,.5) 24%,rgba(212,0,95,.5) 24%,rgba(212,0,95,.5) 28%,rgba(255,0,128,.5) 28%,rgba(255,0,128,.5) 36%,rgba(212,0,95,.5) 36%,rgba(212,0,95,.5) 40%,transparent 40%,transparent),radial-gradient(circle at 50% 100%,rgba(212,0,95,.5) 10%,rgba(255,0,128,.5) 10%,rgba(255,0,128,.5) 23%,rgba(212,0,95,.5) 23%,rgba(212,0,95,.5) 30%,rgba(255,0,128,.5) 30%,rgba(255,0,128,.5) 43%,rgba(212,0,95,.5) 43%,rgba(212,0,95,.5) 50%,rgba(255,0,128,.5) 50%,rgba(255,0,128,.5) 63%,rgba(212,0,95,.5) 63%,rgba(212,0,95,.5) 71%,transparent 71%,transparent),radial-gradient(circle at 100% 50%,rgba(212,0,95,.5) 5%,rgba(255,0,128,.5) 5%,rgba(255,0,128,.5) 15%,rgba(212,0,95,.5) 15%,rgba(212,0,95,.5) 20%,rgba(255,0,128,.5) 20%,rgba(255,0,128,.5) 29%,rgba(212,0,95,.5) 29%,rgba(212,0,95,.5) 34%,rgba(255,0,128,.5) 34%,rgba(255,0,128,.5) 44%,rgba(212,0,95,.5) 44%,rgba(212,0,95,.5) 49%,transparent 49%,transparent),radial-gradient(circle at 0 50%,rgba(212,0,95,.5) 5%,rgba(255,0,128,.5) 5%,rgba(255,0,128,.5) 15%,rgba(212,0,95,.5) 15%,rgba(212,0,95,.5) 20%,rgba(255,0,128,.5) 20%,rgba(255,0,128,.5) 29%,rgba(212,0,95,.5) 29%,rgba(212,0,95,.5) 34%,rgba(255,0,128,.5) 34%,rgba(255,0,128,.5) 44%,rgba(212,0,95,.5) 44%,rgba(212,0,95,.5) 49%,transparent 49%,transparent),linear-gradient(90deg,rgb(128,0,64) 0%,rgb(255,128,196) 50%,rgb(128,0,64) 100%);
    background-size:50% 25%;

    .bevel0,.bevel1{
        background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 40%,rgba(255,255,255,1) 50%,rgba(255,255,255,.6) 60%,transparent 100%),linear-gradient(0deg,transparent 30%,rgba(255,255,255,.6) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.6) 55%,transparent 70%),linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
        .par0,.par1{
            background:linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,.2) 100%),radial-gradient(circle at 100% 150%,rgba(255,0,128,.5) 24%,rgba(212,0,95,.5) 24%,rgba(212,0,95,.5) 28%,rgba(255,0,128,.5) 28%,rgba(255,0,128,.5) 36%,rgba(212,0,95,.5) 36%,rgba(212,0,95,.5) 40%,transparent 40%,transparent),
                radial-gradient(circle at 0 150%,rgba(255,0,128,.5) 24%,rgba(212,0,95,.5) 24%,rgba(212,0,95,.5) 28%,rgba(255,0,128,.5) 28%,rgba(255,0,128,.5) 36%,rgba(212,0,95,.5) 36%,rgba(212,0,95,.5) 40%,transparent 40%,transparent),
                radial-gradient(circle at 50%  100%,rgba(212,0,95,.5) 10%,rgba(255,0,128,.5) 10%,rgba(255,0,128,.5) 23%,rgba(212,0,95,.5) 23%,rgba(212,0,95,.5) 30%,rgba(255,0,128,.5) 30%,rgba(255,0,128,.5) 43%,rgba(212,0,95,.5) 43%,rgba(212,0,95,.5) 50%,rgba(255,0,128,.5) 50%,rgba(255,0,128,.5) 63%,rgba(212,0,95,.5) 63%,rgba(212,0,95,.5) 71%,transparent 71%,transparent),
                radial-gradient(circle at 100% 50%,rgba(212,0,95,.5) 5%,rgba(255,0,128,.5) 5%,rgba(255,0,128,.5) 15%,rgba(212,0,95,.5) 15%,rgba(212,0,95,.5) 20%,rgba(255,0,128,.5) 20%,rgba(255,0,128,.5) 29%,rgba(212,0,95,.5) 29%,rgba(212,0,95,.5) 34%,rgba(255,0,128,.5) 34%,rgba(255,0,128,.5) 44%,rgba(212,0,95,.5) 44%,rgba(212,0,95,.5) 49%,transparent 49%,transparent),
                radial-gradient(circle at 0 50%,rgba(212,0,95,.5) 5%,rgba(255,0,128,.5) 5%,rgba(255,0,128,.5) 15%,rgba(212,0,95,.5) 15%,rgba(212,0,95,.5) 20%,rgba(255,0,128,.5) 20%,rgba(255,0,128,.5) 29%,rgba(212,0,95,.5) 29%,rgba(212,0,95,.5) 34%,rgba(255,0,128,.5) 34%,rgba(255,0,128,.5) 44%,rgba(212,0,95,.5) 44%,rgba(212,0,95,.5) 49%,transparent 49%,transparent),radial-gradient(circle at 50% 50%,rgb(128,0,64) 0%,rgb(255,128,196) 50%,rgb(128,0,64) 100%);
            background-size:100% 100%,10% 5%,10% 5%,10% 5%,10% 5%,10% 5%,10% 100%;
            .partop{
                top:0;
                bottom:58%;
                div{
                    &:nth-child(odd):before{
                        background:rgba(0,0,0,.2)
                    }
                    &:nth-child(even):before{
                        background:rgba(255,255,255,.2)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:rgba(0,0,0,.2)
                    }
                    &:nth-child(odd):before{
                        background:rgba(255,255,255,.2)
                    }
                }
            }
        }
        .numtop,.numbot{
            background:linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
            div:nth-child(odd){
                background:#ff0080
            }
        }
    }

    .score0,.score1{
        color:#D4AF37
    }

    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%),#f5f5f5;
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#f5f5f5
        }
    }
    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%),#400080;
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#400080
        }
    }

    [data-dce]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B;
    }
    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#f5f5f5
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#400080
        }
    }

    [data-dbl]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B;
        b{
            color:#D4AF37
        }
    }
}
[data-board='india']{
    background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
    background-size:400% 400%;
    animation:anim-india 30s ease infinite;

    .bevel0,.bevel1{
        background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 40%,rgba(255,255,255,1) 50%,rgba(255,255,255,.6) 60%,transparent 100%),linear-gradient(0deg,transparent 30%,rgba(255,255,255,.6) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.6) 55%,transparent 70%),linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
        .par0,.par1{
            background:linear-gradient(45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
            background-size:400% 400%;
            animation:anim-india 60s ease infinite;
            .partop{
                top:0;
                bottom:58%;
                div{
                    &:nth-child(odd):before{
                        background:rgba(0,0,0,.2)
                    }
                    &:nth-child(even):before{
                        background:rgba(255,255,255,.2)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:rgba(0,0,0,.2)
                    }
                    &:nth-child(odd):before{
                        background:rgba(255,255,255,.2)
                    }
                }
            }
        }
        .numtop,.numbot{
            background:linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
            div:nth-child(odd){
                background:#ff0080
            }
        }
    }

    .score0,.score1{
        color:#D4AF37
    }

    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%),#f5f5f5;
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#f5f5f5
        }
    }
    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%),#400080;
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#400080
        }
    }

    [data-dce]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B;
    }
    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#f5f5f5
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#400080
        }
    }

    [data-dbl]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B;
        b{
            color:#D4AF37
        }
    }
}
[data-board='sifi-green']{
    background:radial-gradient(ellipse 80% 80% at center,rgba(0,255,255,.22) 0%,transparent 62%),radial-gradient(ellipse 80% 80% at center,rgba(255,64,255,.18) 0%,transparent 62%),radial-gradient(ellipse 60% 60% at center,rgba(64,255,128,.14) 0%,transparent 58%),linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.88) 100%),#000040;
    background-size:200% 200%,200% 200%,200% 200%,100% 100%,100% 100%;
    animation:anim-sifi 10s ease-in-out infinite;

    .score0,.score1{
        font-family:courier;
        font-size:2em;
    }
    .score0{
        color:lime;
        text-shadow:0 0 .2em lime,0 0 .2em lime
    }
    .score1{
        top:8.4%;
        color:#ff00ff;
        text-shadow:0 0 .2em #ff00ff,0 0 .2em #ff00ff
    }
    &[data-plr='1']{
        .score0{
            top:8.4%;
        }
        .score1{
            bottom:7%
        }
    }

    .time0,.time1{
        font-family:courier;
        opacity:1
    }
    &[data-plr='0']{
        .time0{
            color:lime;
            text-shadow:0 0 .2em lime,0 0 .2em lime
        }
        .time1{
            color:#ff00ff;
            text-shadow:0 0 .2em #ff00ff,0 0 .2em #ff00ff
        }
    }
    &[data-plr='1']{
        .time0{
            color:lime;
            text-shadow:0 0 .1em lime
        }
        .time1{
            color:#ff00ff;
            text-shadow:0 0 .1em #ff00ff
        }
    }

    .point0,.point1{
        font-family:courier;
        font-size:1em;
        opacity:1
    }
    &[data-plr='0']{
        .point0{
            color:lime;
            text-shadow:0 0 .2em lime,0 0 .2em lime
        }
        .point1{
            color:#ff00ff;
            text-shadow:0 0 .2em #ff00ff,0 0 .2em #ff00ff
        }
    }
    &[data-plr='1']{
        .point0{
            color:lime;
            text-shadow:0 0 .2em lime,0 0 .2em lime
        }
        .point1{
            color:#ff00ff;
            text-shadow:0 0 .2em #ff00ff,0 0 .2em #ff00ff
        }
    }

    &[data-plr='0']{
        .bare0{
            border:.1em solid lime;
            box-shadow:0 0 .3em .1em rgba(0,255,0,.9) !important;
            background:radial-gradient(rgba(0,255,0,0) 50%,rgba(0,255,0,.9) 85%,rgba(0,255,0,1) 100%);
            span{
                top:5%;
                color:lime;
                opacity:1
            }
        }
        .bare1{
            border:.1em solid #ff00ff;
            box-shadow:0 0 .3em .1em rgba(255,0,255,.9);
            background:radial-gradient(rgba(255,0,255,0) 50%,rgba(255,0,255,.9) 85%,rgba(255,0,255,1) 100%);
            span{
                bottom:5%;
                color:#ff00ff;
                opacity:1
            }
        }
    }
    &[data-plr='1']{
        .bare0{
            border:.1em solid #ff00ff;
            box-shadow:0 0 .3em .1em rgba(255,0,255,.9);
            background:radial-gradient(rgba(255,0,255,0) 50%,rgba(255,0,255,.9) 85%,rgba(255,0,255,1) 100%);
            span{
                bottom:5%;
                color:#ff00ff;
                opacity:1
            }
        }
        .bare1{
            border:.1em solid lime;
            box-shadow:0 0 .3em .1em rgba(0,255,0,.9);
            background:radial-gradient(rgba(0,255,0,0) 50%,rgba(0,255,0,.9) 85%,rgba(0,255,0,1) 100%);
            span{
                top:5%;
                color:lime;
                opacity:1
            }
        }
    }

    [data-dbl]{
        border:.1em solid #fff;
        box-shadow:0 0 .3em .1em rgba(255,255,255,.9);
        background:radial-gradient(rgba(255,255,255,0) 50%,rgba(255,255,255,.9) 85%,rgba(255,255,255,1) 100%);
        b{
            text-shadow:0 0 .2em #fff
        }
    }
    &[data-trn='0'][data-dbb='2'] [data-dbl]{
        border:.1em solid lime;
        box-shadow:0 0 .3em .1em rgba(0,255,0,.9);
        background:radial-gradient(rgba(0,255,0,0) 50%,rgba(0,255,0,1) 85%);
        b{
            color:lime;
            text-shadow:0 0 .2em lime,0 0 .2em lime
        }
        s{
            border:.1em solid #ff0000;
            box-shadow:0 0 .3em .1em rgba(255,0,0,.9);
            background:radial-gradient(rgba(255,0,0,0) 50%,rgba(255,0,0,.9) 85%,rgba(255,0,0,1) 100%);
            span{
                color:#ff0000;
                text-shadow:0 0 .2em #ff0000,0 0 .2em #ff0000
            }
        }
    }
    &[data-crf='1'] [data-dbl]{
        border:.1em solid #ff0000;
        box-shadow:0 0 .3em .1em rgba(255,0,0,.9);
        background:radial-gradient(rgba(255,0,0,0) 50%,rgba(255,0,0,.9) 85%,rgba(255,0,0,1) 100%);
        b{
            color:#ff0000;
            text-shadow:0 0 .2em #ff0000
        }
    }

    .bevel0,.bevel1{
        background:rgba(0,0,0,0);
        .par0,.par1{
            background:radial-gradient(at 50% 50%,rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
            .partop,.parbot{
                div{
                    &:before{
                        content:"";
                        position:absolute;
                        top:0;
                        left:0;
                        display:block;
                        width:100%;
                        height:100%
                    }
                }
            }
            .partop{
                top:0;
                bottom:58%;
                div{
                    &:before{
                        clip-path:polygon(49% 0,49% 100%,51% 100%,51% 0)
                    }
                    &:nth-child(odd):before{
                        background:rgb(0,0,255)
                    }
                    &:nth-child(even):before{
                        background:rgb(128,0,255)
                    }
                }
            }
            .parbot{
                bottom:0;
                top:58%;
                div{
                    &:before{
                        clip-path:polygon(49% 0,49% 100%,51% 100%,51% 0)
                    }
                    &:nth-child(even):before{
                        background:rgb(0,0,255)
                    }
                    &:nth-child(odd):before{
                        background:rgb(128,0,255)
                    }
                }
            }
        }
    }

    div[data-ckr='0']{
        border:.1em solid lime;
        box-shadow:0 0 .3em .1em rgba(0,255,0,.9);
        background:radial-gradient(rgba(0,255,0,0) 50%,rgba(0,255,0,1) 85%)
    }
    div[data-ckr='1']{
        border:.1em solid #ff00ff;
        box-shadow:0 0 .3em .1em rgba(255,0,255,.9);
        background:radial-gradient(rgba(255,0,255,0) 50%,rgba(255,0,255,1) 85%)
    }

    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            border:.1em solid lime;
            box-shadow:0 0 .3em .1em rgba(0,255,0,.9);
            background:radial-gradient(rgba(0,255,0,0) 50%,rgba(0,255,0,1) 85%);
            b{
                border:.1em solid lime;
                box-shadow:0 0 .3em .1em rgba(0,255,0,.9);
                background:radial-gradient(rgba(0,255,0,0) 50%,rgba(0,255,0,1) 85%)
            }
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            border:.1em solid #ff00ff;
            box-shadow:0 0 .3em .1em rgba(255,0,255,.9);
            background:radial-gradient(rgba(255,0,255,0) 50%,rgba(255,0,255,1) 85%);
            b{
                border:.1em solid #ff00ff;
                box-shadow:0 0 .3em .1em rgba(255,0,255,.9);
                background:radial-gradient(rgba(255,0,255,0) 50%,rgba(255,0,255,1) 85%)
            }
        }
    }

    &[data-plr='0'] [data-dcz='1']{
        color:lime;
        border:.1em solid lime;
        box-shadow:0 0 .3em .1em rgba(0,255,0,.9);
        background:radial-gradient(rgba(0,255,0,0) 50%,rgba(0,255,0,1) 85%);
        span{
            text-shadow:0 0 .2em lime,0 0 .2em lime
        }
    }
    &[data-plr='1'] [data-dcz='1']{
        color:#ff00ff;
        border:.1em solid #ff00ff;
        box-shadow:0 0 .3em .1em rgba(255,0,255,.9);
        background:radial-gradient(rgba(255,0,255,0) 50%,rgba(255,0,255,1) 85%);
        span{
            text-shadow:0 0 .2em #ff00ff,0 0 .2em #ff00ff
        }
    }
}
[data-board='sifi-orange']{
    background:radial-gradient(ellipse 80% 80% at center,rgba(0,255,255,.22) 0%,transparent 62%),radial-gradient(ellipse 80% 80% at center,rgba(255,64,255,.18) 0%,transparent 62%),radial-gradient(ellipse 60% 60% at center,rgba(64,255,128,.14) 0%,transparent 58%),linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.88) 100%),#000040;
    background-size:200% 200%,200% 200%,200% 200%,100% 100%,100% 100%;
    animation:anim-sifi 10s ease-in-out infinite;

    .score0,.score1{
        font-family:courier;
        font-size:2em;
    }
    .score0{
        color:#ffc400;
        text-shadow:0 0 .2em #ffc400,0 0 .2em #ffc400
    }
    .score1{
        top:8.4%;
        color:#00ffff;
        text-shadow:0 0 .2em #00ffff,0 0 .2em #00ffff
    }
    &[data-plr='1']{
        .score0{
            top:8.4%;
        }
        .score1{
            bottom:7%
        }
    }

    .time0,.time1{
        font-family:courier;
        opacity:1
    }
    &[data-plr='0']{
        .time0{
            color:#ffc400;
            text-shadow:0 0 .2em #ffc400,0 0 .2em #ffc400
        }
        .time1{
            color:#00ffff;
            text-shadow:0 0 .2em #00ffff,0 0 .2em #00ffff
        }
    }
    &[data-plr='1']{
        .time1{
            color:#ffc400;
            text-shadow:0 0 .2em #ffc400,0 0 .2em #ffc400
        }
        .time0{
            color:#00ffff;
            text-shadow:0 0 .2em #00ffff,0 0 .2em #00ffff
        }
    }

    .point0,.point1{
        font-family:courier;
        font-size:1em;
        opacity:1
    }
    &[data-plr='0']{
        .point0{
            color:#ffc400;
            text-shadow:0 0 .2em #ffc400,0 0 .2em #ffc400
        }
        .point1{
            color:#00ffff;
            text-shadow:0 0 .2em #00ffff,0 0 .2em #00ffff
        }
    }
    &[data-plr='1']{
        .point1{
            color:#ffc400;
            text-shadow:0 0 .2em #ffc400,0 0 .2em #ffc400
        }
        .point0{
            color:#00ffff;
            text-shadow:0 0 .2em #00ffff,0 0 .2em #00ffff
        }
    }

    .bare0{
        border:.1em solid #ffc400;
        box-shadow:0 0 .3em .1em rgba(255,196,0,.9);
        background:radial-gradient(rgba(255,196,0,0) 50%,rgba(255,196,0,.9) 85%,rgba(255,196,0,1) 100%);
        span{
            top:5%;
            color:#ffc400;
            opacity:1
        }
    }
    .bare1{
        border:.1em solid #00ffff;
        box-shadow:0 0 .3em .1em rgba(0,255,255,.9);
        background:radial-gradient(rgba(0,255,255,0) 50%,rgba(0,255,255,.9) 85%,rgba(0,255,255,1) 100%);
        span{
            bottom:5%;
            color:#00ffff;
            opacity:1
        }
    }

    [data-dbl]{
        border:.1em solid #fff;
        box-shadow:0 0 .3em .1em rgba(255,255,255,.9);
        background:radial-gradient(rgba(255,255,255,0) 50%,rgba(255,255,255,.9) 85%,rgba(255,255,255,1) 100%);
        b{
            text-shadow:0 0 .2em #fff
        }
    }
    &[data-trn='0'][data-dbb='2'] [data-dbl]{
        border:.1em solid lime;
        box-shadow:0 0 .3em .1em rgba(0,255,0,.9);
        background:radial-gradient(rgba(0,255,0,0) 50%,rgba(0,255,0,1) 85%);
        b{
            color:lime;
            text-shadow:0 0 .2em lime,0 0 .2em lime
        }
        s{
            border:.1em solid #ff0000;
            box-shadow:0 0 .3em .1em rgba(255,0,0,.9);
            background:radial-gradient(rgba(255,0,0,0) 50%,rgba(255,0,0,.9) 85%,rgba(255,0,0,1) 100%);
            span{
                color:#ff0000;
                text-shadow:0 0 .2em #ff0000,0 0 .2em #ff0000
            }
        }
    }
    &[data-crf='1'] [data-dbl]{
        border:.1em solid #ff0000;
        box-shadow:0 0 .3em .1em rgba(255,0,0,.9);
        background:radial-gradient(rgba(255,0,0,0) 50%,rgba(255,0,0,.9) 85%,rgba(255,0,0,1) 100%);
        b{
            color:#ff0000;
            text-shadow:0 0 .2em #ff0000
        }
    }

    .bevel0,.bevel1{
        background:rgba(0,0,0,0);
        .par0,.par1{
            background:radial-gradient(at 50% 50%,rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
            .partop,.parbot{
                div{
                    &:before{
                        content:"";
                        position:absolute;
                        top:0;
                        left:0;
                        display:block;
                        width:100%;
                        height:100%
                    }
                }
            }
            .partop{
                top:0;
                bottom:58%;
                div{
                    &:before{
                        clip-path:polygon(49% 0,49% 100%,51% 100%,51% 0)
                    }
                    &:nth-child(odd):before{
                        background:rgb(0,0,255)
                    }
                    &:nth-child(even):before{
                        background:rgb(128,0,255)
                    }
                }
            }
            .parbot{
                bottom:0;
                top:58%;
                div{
                    &:before{
                        clip-path:polygon(49% 0,49% 100%,51% 100%,51% 0)
                    }
                    &:nth-child(even):before{
                        background:rgb(0,0,255)
                    }
                    &:nth-child(odd):before{
                        background:rgb(128,0,255)
                    }
                }
            }
        }
    }

    div[data-ckr='0']{
        border:.1em solid #ffc400;
        box-shadow:0 0 .3em .1em rgba(255,196,0,.9);
        background:radial-gradient(rgba(255,196,0,0) 50%,rgba(255,196,0,1) 85%)
    }
    div[data-ckr='1']{
        border:.1em solid #00ffff;
        box-shadow:0 0 .3em .1em rgba(0,255,255,.9);
        background:radial-gradient(rgba(0,255,255,0) 50%,rgba(0,255,255,1) 85%)
    }

    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            border:.1em solid #ffc400;
            box-shadow:0 0 .3em .1em rgba(255,196,0,.9);
            background:radial-gradient(rgba(255,196,0,0) 50%,rgba(255,196,0,1) 85%);
            b{
                border:.1em solid #ffc400;
                box-shadow:0 0 .3em .1em rgba(255,196,0,.9);
                background:radial-gradient(rgba(255,196,0,0) 50%,rgba(255,196,0,1) 85%)
            }
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            border:.1em solid #00ffff;
            box-shadow:0 0 .3em .1em rgba(0,255,255,.9);
            background:radial-gradient(rgba(0,255,255,0) 50%,rgba(0,255,255,1) 85%);
            b{
                border:.1em solid #00ffff;
                box-shadow:0 0 .3em .1em rgba(0,255,255,.9);
                background:radial-gradient(rgba(0,255,255,0) 50%,rgba(0,255,255,1) 85%)
            }
        }
    }

    &[data-plr='0'] [data-dcz]{
        color:#ffc400;
        border:.1em solid #ffc400;
        box-shadow:0 0 .3em .1em rgba(255,196,0,.9);
        background:radial-gradient(rgba(255,196,0,0) 50%,rgba(255,196,0,1) 85%)
    }
    &[data-plr='1'] [data-dcz]{
        color:#00ffff;
        border:.1em solid #00ffff;
        box-shadow:0 0 .3em .1em rgba(0,255,255,.9);
        background:radial-gradient(rgba(0,255,255,0) 50%,rgba(0,255,255,1) 85%)
    }
}
[data-board='wood-grain']{
    background:linear-gradient(90deg,rgba(0,0,0,.3) 0%,transparent 50%,rgba(0,0,0,.3) 100%),repeating-linear-gradient(174deg,transparent 0px,transparent 18px,rgba(60,45,15,.2) 18px,rgba(60,45,15,.2) 22px,transparent 22px,transparent 38px,rgba(212,175,55,.12) 38px,rgba(212,175,55,.12) 42px,transparent 42px,transparent 60px,rgba(255,255,255,.06) 60px,rgba(255,255,255,.06) 63px,transparent 63px,transparent 90px),repeating-linear-gradient(178deg,transparent 0px,transparent 30px,rgba(55,40,10,.2) 30px,rgba(55,40,10,.2) 36px,transparent 36px,transparent 55px,rgba(184,134,11,.1) 55px,rgba(184,134,11,.1) 60px,transparent 60px,transparent 140px),repeating-linear-gradient(172deg,transparent 0px,transparent 8px,rgba(70,50,15,.15) 8px,rgba(70,50,15,.15) 10px,transparent 10px,transparent 50px),linear-gradient(180deg,#bfa15f 0%,#8c733e 30%,#a68b4c 50%,#735c2b 70%,#bfa15f 100%);

    .bevel0,.bevel1{
        .par0,.par1{
            background:repeating-radial-gradient(circle at 25% 25%,rgba(245,180,120,.15) 0px,transparent 1.5px,transparent 4px),repeating-radial-gradient(circle at 75% 75%,rgba(245,180,120,.12) 0px,transparent 1.5px,transparent 5px),repeating-linear-gradient(40deg,rgba(60,30,10,.25) 0px,rgba(60,30,10,.25) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(-50deg,rgba(50,25,5,.22) 0px,rgba(50,25,5,.22) 1px,transparent 1px,transparent 4.5px),radial-gradient(circle at 30% 40%,rgba(110,60,25,.4) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(70,35,10,.45) 0%,transparent 60%),#47403a;
            background-size:55% 55%,56% 56%,57% 57%,57% 57%,100% 100%,100% 100%;
            background-repeat:repeat
        }
        .numtop,.numbot{
            background: linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
            div:nth-child(odd){
                background:#594515
            }
        }
    }

    div[data-ckr]{
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B
        }
    }
    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%),#ffffc4;
        &:after{
            background:#ffffc4
        }
    }
    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%),#403930;
        &:after{
            background:#403930
        }
    }

    [data-dce]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B;
    }
    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#ffffc4;
            b{
                background:#222
            }
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#403930;
            b{
                background:#ffffc4
            }
        }
    }

    [data-dbl]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B;
        b{
            color:#D4AF37
        }
    }
}
[data-board='wood-gray']{
    background:linear-gradient(90deg,rgba(0,0,0,.3) 0%,transparent 50%,rgba(0,0,0,.3) 100%),repeating-linear-gradient(174deg,transparent 0px,transparent 18px,rgba(22,22,22,.2) 18px,rgba(22,22,22,.2) 22px,transparent 22px,transparent 38px,rgba(84,84,84,.12) 38px,rgba(84,84,84,.12) 42px,transparent 42px,transparent 60px,rgba(255,255,255,.06) 60px,rgba(255,255,255,.06) 63px,transparent 63px,transparent 90px),repeating-linear-gradient(178deg,transparent 0px,transparent 30px,rgba(20,20,20,.2) 30px,rgba(20,20,20,.2) 36px,transparent 36px,transparent 55px,rgba(67,67,67,.1) 55px,rgba(67,67,67,.1) 60px,transparent 60px,transparent 140px),repeating-linear-gradient(172deg,transparent 0px,transparent 8px,rgba(25,25,25,.15) 8px,rgba(25,25,25,.15) 10px,transparent 10px,transparent 50px),linear-gradient(180deg,#4f4f4f 0%,#393939 30%,#454545 50%,#2e2e2e 70%,#4f4f4f 100%);

    .bevel0,.bevel1{
        .par0,.par1{
            background:repeating-radial-gradient(circle at 25% 25%,rgba(219,202,187,.15) 0px,transparent 1.5px,transparent 4px),repeating-radial-gradient(circle at 75% 75%,rgba(219,202,187,.12) 0px,transparent 1.5px,transparent 5px),repeating-linear-gradient(40deg,rgba(87,80,74,.25) 0px,rgba(87,80,74,.25) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(-50deg,rgba(80,73,69,.22) 0px,rgba(80,73,69,.22) 1px,transparent 1px,transparent 4.5px),radial-gradient(circle at 30% 40%,rgba(118,105,97,.4) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(93,84,77,.45) 0%,transparent 60%),#88776b;
            background-size:55% 55%,56% 56%,57% 57%,57% 57%,100% 100%,100% 100%;
            background-repeat:repeat
        }
        .numtop,.numbot{
            background: linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%);
            div:nth-child(odd){
                background:#333
            }
        }
    }

    div[data-ckr]{
        &:after{
            height:70% !important;
            border-style:solid;
            border-width:.15em
        }
    }
    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%),#f5f5f5;
        &:after{
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#f5f5f5
        }
    }
    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%),#222;
        &:after{
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            background:#222
        }
    }

    [data-dce]{
        border-color:#FFD700 #D4AF37 #996515 #B8860B
    }
    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#fff5eb;
            b{
                background:#222
            }
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#222;
            b{
                background:#fff
            }
        }
    }
}
[data-board='wood-dark']{
    background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) .1%,transparent .1%,transparent .2%),repeating-linear-gradient(90deg,rgba(140,95,50,.08) 0%,rgba(140,95,50,.08) .5%,transparent .5%,transparent 1%),repeating-radial-gradient(ellipse at 45% 0%,rgba(255,255,255,.08) 0%,transparent .4%,rgba(140,95,50,.05) .8%,transparent .16%),repeating-radial-gradient(ellipse at 55% 100%,rgba(0,0,0,.08) 0%,transparent .4%,rgba(140,95,50,.05) .8%,transparent .16%),#802a17;

    .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,230,200,.28) 0px,transparent 1px,transparent 3px),repeating-radial-gradient(circle at 70% 70%,rgba(255,225,195,.25) 0px,transparent 1.5px,transparent 4px),repeating-linear-gradient(28deg,rgba(80,50,25,.25) 0px,rgba(80,50,25,.25) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(-35deg,rgba(70,45,20,.22) 0px,rgba(70,45,20,.22) 1px,transparent 1px,transparent 5px),radial-gradient(circle at 40% 40%,rgba(185,140,95,.35) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(135,95,60,.4) 0%,transparent 70%),#a0734a;
            background-size:100% 100%,6% 6%,7% 7%,8% 8%,9% 9%,100% 100%,100% 100%,100% 100%;
            background-repeat:repeat
        }
        .numtop,.numbot{
            background:#004000;
            div:nth-child(odd){
                background:#003000
            }
        }
    }

    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;
        }
    }
}
[data-board='wood-pine']{
    background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%),repeating-linear-gradient(93deg,rgba(255,255,255,.1) 0px,rgba(255,255,255,.1) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(87deg,rgba(140,95,50,.08) 0px,rgba(140,95,50,.08) 1px,transparent 1px,transparent 4px),repeating-radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.08) 0px,transparent 40px,rgba(140,95,50,.05) 80px,transparent 120px),#e5b986;

    .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,230,200,.28) 0px,transparent 1px,transparent 3px),repeating-radial-gradient(circle at 70% 70%,rgba(255,225,195,.25) 0px,transparent 1.5px,transparent 4px),repeating-linear-gradient(28deg,rgba(80,50,25,.25) 0px,rgba(80,50,25,.25) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(-35deg,rgba(70,45,20,.22) 0px,rgba(70,45,20,.22) 1px,transparent 1px,transparent 5px),radial-gradient(circle at 40% 40%,rgba(185,140,95,.35) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(135,95,60,.4) 0%,transparent 70%),#a0734a;
            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:#003000
            }
        }
    }

    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%),#aa0000;
        &: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%),#aa0000;
        }
    }
}
[data-board='quake-1']{
    background:url('/img/board/quake-1/logo.png'),radial-gradient(ellipse 80% 80% at center,rgba(196,0,0,.5) 0%,transparent 60%),radial-gradient(ellipse 80% 80% at center,rgba(255,64,0,.5) 0%,transparent 60%),linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(255,255,255,.3) 50%,rgba(0,0,0,.7) 100%),url('/img/board/quake-1/bg260.jpg');
    background-size:9% 11.4%,200% 200%,200% 200%,100% 100%,15.4% 43%;
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;
    background-position:center center,0% 50%,100% 50%,center center,center center;
    animation:anim-quake 15s ease-in-out infinite;

    &[data-win='1'],&[data-win='2']{
        background-size:0 0,200% 200%,200% 200%,100% 100%,15.4% 43%;
    }

    border-color:#f0a85d #b87333 #a0522d #B8860B;
    border-style:solid;
    border-width:.2em;

    .bevel0,.bevel1{
        background:conic-gradient(from 0deg at 50% 50%,#b87333 0%,#d97a22 15%,#f0a85d 30%,#cd853f 50%,#b87333 70%,#a0522d 85%,#b87333 100%);
        .par0,.par1{
            background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 50%,rgba(0,0,0,.7) 100%),url('/img/board/quake-1/bg223.jpg');
            .partop{
                div{
                    &:nth-child(odd):before{
                        background:rgba(0,0,0,.5)
                    }
                    &:nth-child(even):before{
                        background:rgba(184,115,51,.3)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:rgba(0,0,0,.5)
                    }
                    &:nth-child(odd):before{
                        background:rgba(184,115,51,.3)
                    }
                }
            }
        }
        .numtop,.numbot{
            background:linear-gradient(0deg,#b87333,#a0522d,#f0a85d);
            div:nth-child(odd){
                background:rgba(0,0,0,.4)
            }
        }
    }

    div[data-ckr='0']{
        background:repeating-conic-gradient(transparent 0%,transparent 2%,rgba(0,0,0,.2) 2%,rgba(0,0,0,.2) 4%),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(circle,#e3e1dc 50%,transparent 50%),conic-gradient(from 0deg at 50% 50%,#b87333 0%,#d97a22 15%,#f0a85d 30%,#cd853f 50%,#b87333 70%,#a0522d 85%,#b87333 100%)
        }
    }
    div[data-ckr='1']{
        background:repeating-conic-gradient(transparent 0%,transparent 2%,rgba(255,255,255,.2) 2%,rgba(255,255,255,.2) 4%),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%),#aa0000;
        &:after{
            background:radial-gradient(circle,#aa0000 50%,transparent 50%),conic-gradient(from 0deg at 50% 50%,#b87333 0%,#d97a22 15%,#f0a85d 30%,#cd853f 50%,#b87333 70%,#a0522d 85%,#b87333 100%)
        }
    }

    [data-dce]{
        border-color:#f0a85d #b87333 #a0522d #B8860B;
        b{
            background:radial-gradient(circle at 50% 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 50%),conic-gradient(from 0deg at 50% 50%,#b87333 0%,#d97a22 15%,#f0a85d 30%,#cd853f 50%,#b87333 70%,#a0522d 85%,#b87333 100%)
        }
    }
    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:#fff5eb;
        }
        &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
            [data-dce]{
                background:#aa0000;
            }
        }

        [data-dbl]{
            border-color:#f0a85d #b87333 #a0522d #B8860B
        }
    }
}
[data-board='duke-nukem']{
    background:url('/img/board/duke-nukem/face.gif'),radial-gradient(ellipse 50% 50% at center,rgba(255,0,0,.8) 0%,transparent 80%),radial-gradient(ellipse 40% 40% at center,rgba(0,128,0,.8) 0%,transparent 80%),conic-gradient(from 0deg at 50% 50%,#b87333 0%,#222 15%,#f0a85d 30%,#222 50%,#b87333 70%,#222 85%,#b87333 100%);
    background-size:6.5% 13%,200% 200%,200% 200%,100% 100%;
    background-repeat:no-repeat;
    background-position:center center,0% 50%,100% 50%,center center;
    animation:anim-quake 20s ease-in-out infinite;

    &[data-win='1'],&[data-win='2']{
        background-size:0 0,200% 200%,200% 200%,100% 100%
    }

    border-color:rgba(255,255,255,.5) rgba(255,255,255,.3) rgba(0,0,0,.5) rgba(0,0,0,.3);
    border-style:solid;
    border-width:.1em;

    .bevel0,.bevel1{
        background:conic-gradient(from 0deg at 50% 50%,#b87333 0%,#d97a22 15%,#f0a85d 30%,#cd853f 50%,#b87333 70%,#a0522d 85%,#b87333 100%);
        .par0,.par1{
            background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 50%,rgba(0,0,0,.7) 100%)
        }
        .numtop,.numbot{
            background:linear-gradient(0deg,#ffa600,#a0522d,#ffa600);
            div:nth-child(odd){
                background:rgba(0,0,0,.7)
            }
        }
    }

    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%),#000;
        &:after{
            content:"\2622";
            height:90% !important;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:2.5em;
            color:transparent;
            background:conic-gradient(from 0deg at 50% 50%,#ffd700 0%,#ffe566 15%,#ffec00 30%,#ffc400 50%,#ffd700 70%,#ffaa00 85%,#ffd700 100%);
            -webkit-background-clip:text;
            background-clip:text
        }
    }
    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%),lime;
        &:after{
            content:"\2623";
            height:80% !important;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:2em;
            color:transparent;
            background:conic-gradient(from 0deg at 50% 50%,#888 0%,#aaa 15%,#000 30%,#222 50%,#000 70%,#333 85%,#999 100%);
            -webkit-background-clip:text;
            background-clip:text
        }
    }

    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#111;
            b{
                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%),#ffc400
            }
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),lime;
            b{
                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%),#000
            }
        }
    }
}

@keyframes anim-india{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}
@keyframes anim-sifi{
    0%{
        background-position:0% 50%,100% 50%,50% 100%,0 0,0 0
    }
    25%{
        background-position:50% 0%,50% 100%,100% 50%,0 0,0 0
    }
    50%{
        background-position:100% 50%,0% 50%,50% 0%,0 0,0 0
    }
    75%{
        background-position:50% 100%,50% 0%,0% 50%,0 0,0 0
    }
    100%{
        background-position:0% 50%,100% 50%,50% 100%,0 0,0 0
    }
}
@keyframes anim-quake{
    0%{
        background-position:center center,0% 50%,100% 50%,center center,center center
    }
    25%{
        background-position:center center,50% 0%,50% 100%,center center,center center
    }
    50%{
        background-position:center center,100% 50%,0% 50%,center center,center center
    }
    75%{
        background-position:center center,50% 100%,50% 0%,center center,center center
    }
    100%{
        background-position:center center,0% 50%,100% 50%,center center,center center
    }
}