#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;
        .board-name{
            font-size:2.5em !important
        }
    }
}
#boards{
    position:relative;
    flex:1;
    transition:all 1s;
    [data-grd]{
        position:absolute;
        transition:all .4s
    }
    [data-grd='0']{
        left:0;
        top:0;
        height:100%;
        width:calc(var(--lvh) * 130);
        max-width:100%;
        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(var(--lvh) * 130 + 20px);
        width:calc(var(--lvw) * 100 - 164px - var(--lvh) * 130);
        height:calc((var(--lvw) * 100 - 164px - var(--lvh) * 130) / 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 + (var(--lvw) * 100 - 164px - var(--lvh) * 130) / 1.3)
    }
    [data-grd='3']{
        top:calc(60px + (var(--lvw) * 100 - 164px - var(--lvh) * 130) / 1.3 * 2)
    }
    [data-grd='4']{
        top:calc(80px + (var(--lvw) * 100 - 164px - var(--lvh) * 130) / 1.3 * 3)
    }
    [data-grd='5']{
        top:calc(100px + (var(--lvw) * 100 - 164px - var(--lvh) * 130) / 1.3 * 4)
    }
    [data-grd='6']{
        top:calc(120px + (var(--lvw) * 100 - 164px - var(--lvh) * 130) / 1.3 * 5)
    }
    [data-grd='7']{
        top:calc(140px + (var(--lvw) * 100 - 164px - var(--lvh) * 130) / 1.3 * 6)
    }
    [data-grd='8']{
        top:calc(160px + (var(--lvw) * 100 - 164px - var(--lvh) * 130) / 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:calc(var(--lvh) * .5);
        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 .11em .1em rgba(0,0,0,.8);
            font-size:.9em;
            letter-spacing:-.02em;
            img{
                margin:0 .4em 0 0;
                height:.75em;
                box-shadow:0 .12em .1em rgba(0,0,0,.8);
            }
        }
        s{
            display:block;
            margin:.3em 0 0 0;
            opacity:.5;
            font-size:.4em;
            letter-spacing:.2em;
            transition:opacity .4s
        }
    }
    .name0{
        bottom:1.25%
    }
    .name1{
        top:2%
    }
    &[data-plr='1']{
        .name0{
            top:2%;
            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:13%
    }
    &[data-plr='1']{
        .point0{
            top:11.6%;
            bottom:auto
        }
        .point1{
            top:auto;
            bottom:12%
        }
    }

    .bar{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        transition:all .4s
    }
    &[data-win='1'],&[data-win='2']{
        .bar{
            width:0;
            height:0
        }
    }

    .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(90deg,transparent 20%,rgba(255,255,255,1) 50%,transparent 80%),linear-gradient(0deg,transparent 40%,rgba(255,255,255,1) 50%,transparent 60%),linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 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,.6);
            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:transparent;
        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);
        /* Explicit (was auto) so .boardad (z-index:.5) reliably stacks below dice — a
           positioned z-index:auto element and one with an explicit z-index:0/.5 are
           painted in the SAME layer, ordered only by DOM position, not z-index value; an
           explicit value here is what makes the comparison meaningful at all. 1 matches
           .ckrs' own resting z-index (checkers), so dice and checkers stay level with
           each other exactly as before this had no explicit value. */
        z-index:1;
        transition:height .4s, left .4s, opacity .4s, border-width .4s, box-shadow .4s, background .4s;
        pointer-events:none;
        b{
            position:absolute;
            display:block;
            border-radius:50%;
            background:transparent;
            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%);
        font-size:0;
        padding:0;
        border-width:0
    }
    [data-dcd]{
        left:67%
    }
    [data-qit]{
        left:79%;
        opacity:.6
    }
    &[data-qit0='1'],&[data-qit0='2'],&[data-qitc='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-trn='0']{
        [data-dcd],[data-qit]{
            font-size:0;
            padding:0;
            border-width:0;
            pointer-events:none
        }
    }

    [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']{
        height:9%;
        border-width:.25em;
        span{
            font-size:1.4em
        }
    }

    .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;
            &:before,&: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 .2s;
            &:before,&: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
            }
        }

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

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

        [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
        }
    }
    &[data-trn='0'] .ckrs [data-ckr]{
        cursor:default
    }

    .ckrs:has([data-mve='1']){
        z-index:70
    }
    .ckrs:has([data-hnt='1']){
        z-index:210
    }
    [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]{
        left:97%;
        transform:translate(-50%,-50%) scale(0);
        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;
            /* Instant, not animated: the base rule's transition:all .4s means this
               element's hitbox grows from 0 to full size over 0.4s every time the
               offer appears. A real click's mousedown-to-mouseup window can straddle
               that growth — mousedown lands on the still-tiny/absent hitbox, mouseup
               (a few ms later, now that it's bigger) lands outside where mousedown
               was, and the browser fires no click at all. Confirmed live: a
               simulated real click produced zero action while a programmatic one
               (no dispatch timing) worked instantly. Snapping straight to full size
               removes the moving-target window entirely. */
            transition-duration:0s;
            span{
                font-size:2em;
                transition-duration:0s;
            }
        }
    }
    &[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
    }
    &[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;
        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;
        button{
            margin-top:.4em
        }
    }
    &[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,&[data-qitc='1'] .qitc{
        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:50%
    }
    &[data-qit0='2'] .qit0 button{
        display:none
    }
    &[data-qit1='1'] .qit1{
        left:50%
    }
    &[data-qitc='1'] .qitc{
        left:50%
    }

    [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;
        transition:opacity .5s;
        & > *{
            position:absolute;
            left:50%;
            transform:translate(-50%,-50%) scale(0);
            transition:opacity .5s, transform .5s
        }
        .ww{
            position:absolute;
            top:46%;
            height:140%;
            aspect-ratio:1/1.5;
            opacity:0
        }
        .wf{
            top:34%;
            height:5%;
            box-shadow:0 .3em .2em -.1em rgba(0,0,0,.5)
        }
        .wn{
            top:40.6%;
            font-size:1.2em;
            letter-spacing:-.05em
        }
        .wc{
            top:44%;
            font-size:.4em;
            letter-spacing:.4em;
            text-transform:uppercase
        }
        .wl{
            top:47%;
            width:40%;
            height:2px;
            background:radial-gradient(rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);
            transform:translate(-50%,-50%) scaleX(0)
        }
        .wl~.wl{
            top:60%
        }
        .ws{
            top:50.5%;
            font-size:2em
        }
        .wt{
            top:56%;
            font-size:.7em
        }
        .wz{
            top:63%;
            max-width:24%;
            text-align:center;
            font-size:.6em;
            font-family:arial;
            transform:translate(-50%,0) scale(0)
        }
        .wb{
            top:90%;
            opacity:0;
            transform:translate(-50%,-50%) translateY(1.5em);
            & > * {
                transition:all .4s
            }
        }
    }
    &[data-win='1']{
        [data-dcd],[data-qit]{
            font-size:0;
            padding:0;
            border-width:0;
            pointer-events:none
        }
        .name0,.name1,.score0,.score1,.time0,.time1,.point0,.point1,.bevel0,.bevel1,[data-dce],.bare0,.bare1,.ckrs,[data-dbl],.msg,[data-hnt],.boardad{
            opacity:0;
            transition-delay:.5s
        }
        .win{
            z-index:200;
            opacity:1;
            & > *{
                transition:opacity .5s, transform .5s;
                transform:translate(-50%,-50%)
            }
            .ww{
                opacity:.2;
                transform:translate(-50%,-50%) scale(1)
            }
            .wl{
                transform:translate(-50%,-50%) scaleX(1)
            }
            .wz{
                transform:translate(-50%,0) scale(1)
            }
            .wb{
                opacity:1;
                transform:translate(-50%,-50%);
                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
        }
    }

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

    &[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-close]{
        position:absolute;
        top:0em;
        right:.2em;
        z-index:600;
        font-size:2em;
        color:rgba(255,255,255,.6);
        cursor:pointer;
        &:hover{
            color:#fff
        }
    }
    [data-close='0']{
        font-size:0em
    }
    [data-close='1']{
        font-size:2em
    }

    [data-wtc]{
        position:absolute;
        bottom:0;
        left:50%;
        transform:translateX(-50%);
        z-index:500;
        width:88%;
        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:1.6em;
        bottom:1em;
        opacity:.6;
        cursor:pointer;
        z-index:600;
        /* .chattab is a direct child of [data-board] (a sibling of .wrap, not
           nested inside it), so it never inherited .wrap's own font-size:3.3cqh
           — its "1em" below was really just the inherited page default (~16px),
           completely unrelated to the board's actual rendered size, which is why
           it didn't scale down with the board on mobile. [data-board] already
           has container-type:size, so cqh here resolves against the board's own
           box directly. Deliberately smaller than .wrap's own 3.3cqh baseline
           (confirmed scaling correctly at that value, but still too large in
           absolute terms for a small corner icon+label) — svg is 2em, so this
           is the icon's full height as a fraction of the board's own height. */
        font-size:1.8cqh;
        svg{
            width:2em;
            height:2em;
            display:block;
            margin:0 auto
        }
        b{
            font-size:1em;
        }
        em{
            font-size:1em;
            font-style:normal;
            background:rgba(255,255,255,.25);
            border-radius:50%;
            padding:1px 5px;
            margin-left:3px
        }
        u{
            font-size:1em;
            background:#e44;
            border-radius:50%;
            padding:1px 5px;
            margin-left:3px;
            text-decoration:none
        }
    }
    .boardad{
        position:absolute;
        top:8%;
        bottom:8%;
        display:flex;
        /* Centered on both axes (was align-items:flex-start, a vertical-dodge workaround —
           reverted per explicit request). Overlap with dice/controls is instead guaranteed
           never to happen by SIDE: func.js always loads the ad on whichever pan is the
           OPPOSITE of wherever dice/controls actually render for the current trn (see
           BoardAdLoad's/PlaySetDraw's own "d.trn===1?0:1" call sites) — and dice/controls
           position themselves the same way, off d.trn, at func.js:530/843 (dcs=2/-1 → right
           pan when d.trn is truthy, dcs=3/0 → left pan otherwise). Since the ad's pan and
           the dice/controls' pan are always driven by the same d.trn flip in opposite
           directions, they can never land on the same pan — so the ad is free to sit dead
           center in its own pan without needing a vertical offset. */
        align-items:center;
        justify-content:center;
        pointer-events:none;
        /* Must always render above the board's own spike/point background (.par0 etc. —
           position:absolute with no explicit z-index, i.e. auto) but below checkers (.ckrs,
           z-index:1, up to 999/210/70 while actively moving/hinted), the doubling cube
           ([data-dbl], z-index:60, up to 200 while moving), and dice ([data-dce], given an
           explicit z-index:1 of its own for exactly this — see its own comment).
           z-index only accepts an <integer> (or auto) — a fractional value like .5 is an
           invalid declaration that gets silently dropped by the parser, leaving this at
           "auto" regardless (confirmed live via getComputedStyle — every OTHER declaration
           in this same block still applied normally, only this one was dropped). 0 is the
           correct value: it sits in the same auto/0 paint tier as .par0 (ordered by DOM
           position within that tier — this element is appended last into .wrap, so it still
           wins there) while still losing to any positive z-index like dice/checkers/cube. */
        z-index:0;
        /* No left/right transition (removed) — the ad and the dice/controls are always on
           OPPOSITE pans at rest (see the comment above), but both switch pans on the same
           trn flip. A transitioned/animated switch meant that for the ~0.4s the ad was
           sliding from its old pan to its new one, it visually crossed through — and briefly
           overlapped — whatever the dice/controls were ALSO sliding into on the opposite
           side, even though both landed correctly opposite once settled. A screenshot taken
           mid-transition (very plausible right at a turn change, exactly when a player is
           watching to see what happened) caught exactly this and looked like a same-pan
           clash, despite live checks of the settled DOM state confirming correct opposite
           placement every time. Snapping instantly removes the only window where they could
           ever visually coincide. */
    }
    .boardad[data-side='0']{
        left:8%;
        right:54%
    }
    .boardad[data-side='1']{
        left:54%;
        right:8%
    }
    .boardad img{
        max-width:90%;
        max-height:13%;
        height:0%;
        object-fit:contain;
        /* .5s (was .4s) — matches func.js BoardAdSync's own 500ms collapse-wait exactly, so
           the src swap in BoardAdReposition lands the instant the collapse visually finishes. */
        transition:height .5s
    }
    .boardad[data-on='0'] img{
        height:0%;
        pointer-events:none;
    }
    .boardad[data-on='1'] img{
        height:30%;
        cursor:pointer;
        pointer-events:auto;
    }
    &:not([data-grd='0']) .chattab,&:not([data-grd='0']) .chatbox,&:not([data-grd='0']) .boardad{
        display:none !important
    }
    &:not([data-grd='0']) [data-wtc]{
        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)
        }
    }

    &[data-trn='0']:not([data-win='1']){
        cursor:wait
    }

    .chip{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        height:0%;
        aspect-ratio:1/1;
        box-shadow:0 0 0 0 rgba(0,0,0,0);
        z-index:1;
        border-radius:50%;
        background:radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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%),repeating-conic-gradient(transparent 0%,transparent 4.5%,#cc0000 4.5%,#cc0000 10%),#eee;
        background-repeat:no-repeat;
        container-type:size;
        transition:all 1s;
        &:before{
            content:'';
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width:80%;
            height:80%;
            border-radius:50%;
            background:conic-gradient(#996515,#D4AF37,#FFD700,#fff,#FFD700,#B8860B,#996515);
            z-index:1
        }
        &:after{
            content:'';
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width:74%;
            height:74%;
            border-radius:50%;
            background:radial-gradient(at 50% 95%,rgba(255,255,255,.8) 0%,rgba(255,255,255,.3) 15%,transparent 50%),conic-gradient(#FFD700,#D4AF37,#996515,#B8860B,#FFD700);
            z-index:2
        }
        b{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            font-family:times;
            font-size:22cqh;
            font-weight:bold;
            color:#3a2a10;
            text-shadow:0 .05em 0 rgba(255,255,255,.5);
            white-space:nowrap;
            z-index:3
        }
        .chiprim{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            pointer-events:none;
            z-index:4;
            text{
                font-family:georgia;
                font-size:9.5px;
                font-weight:bold;
                fill:#3a2a10
            }
        }
        &[data-viz='1'],&[data-viz='2']{
            height:12%;
            box-shadow:0 .3em .3em 0 rgba(0,0,0,.6);
        }
    }
    &[data-win='1'] .chip{
        top:75%;
        left:50%;
        transform:translate(-50%,-50%);
        /* .win (the win-screen overlay) jumps to z-index:200 in this state — .chip's own
           z-index:50 (kept low so it sits below the doubling cube, z-index:60, during
           normal play) would otherwise be completely buried behind it. The doubling cube
           itself is opacity:0 on the win screen (see &[data-win='1']'s own opacity-0 list),
           so the two concerns never actually conflict — safe to go above .win here. */
        z-index:300;
    }
}

@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:#444
            }
        }
    }

    div[data-ckr='0']{
        background:radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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{
        .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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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{
        .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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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(-45deg,#ff00ff,#ff0040);
    background-size:400%;
    animation:anim-grad 50s ease infinite;

    .bevel0,.bevel1{
        .par0,.par1{
            background:linear-gradient(-45deg,#ff0040,#ff00ff);
            background-size:400%;
            animation:anim-grad 50s ease infinite;
            .partop{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(255,255,0,.6) 0%,rgba(255,255,0,.9) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,.9) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(255,255,0,.9) 0%,rgba(255,255,0,.6) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                }
            }
        }
        .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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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
        }
    }

    .bare0,.bare1{
        box-shadow:1em -.5em 1em -1em rgba(255,255,255,.4) inset,-2em .5em 1em -1em rgba(0,0,0,.3) 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
    }
}
[data-board='india']{
    background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
    background-size:400%;
    animation:anim-grad 50s ease infinite;

    .bevel0,.bevel1{
        .par0,.par1{
            background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
            background-size:400% 400%;
            animation:anim-grad 60s ease infinite;
            .partop{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(0,196,255,.6) 0%,rgba(0,196,255,.9) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,.9) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(0,196,255,.9) 0%,rgba(0,196,255,.6) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                }
            }
        }
        .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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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='day-of-dead']{
    background:linear-gradient(45deg,transparent 20%,rgba(0,0,0,.6) 50%,transparent 80%),linear-gradient(-45deg,transparent 20%,rgba(0,0,0,.6) 50%,transparent 80%),repeating-conic-gradient(transparent 0%,transparent .1%,rgba(0,0,0,.5) .1%,rgba(0,0,0,.5) .2%),#8000f0;

    .bevel0,.bevel1{
        background:repeating-linear-gradient(45deg,#ffc400 0%,#ffc400 2%,#0080ff 2%,#0080ff 4%);
        .par0,.par1{
            background:repeating-conic-gradient(transparent 0%,transparent .5%,rgba(0,0,0,.3) .5%,rgba(0,0,0,.3) 1%),#400080;
            .partop{
                div{
                    &:nth-child(3n):before{
                        background-image:url('/game/backgammon/img/board/dayofdead/spike_pattern_top.png');
                        background-position:center top;
                        background-size:80% 80%;
                        background-repeat:no-repeat;
                        background-color:#b40081
                    }
                    &:nth-child(3n+1):before{
                        background-image:url('/game/backgammon/img/board/dayofdead/spike_pattern_top.png');
                        background-position:center top;
                        background-size:80% 80%;
                        background-repeat:no-repeat;
                        background-color:#008080
                    }
                    &:nth-child(3n+2):before{
                        background-image:url('/game/backgammon/img/board/dayofdead/spike_pattern_top.png');
                        background-position:center top;
                        background-size:80% 80%;
                        background-repeat:no-repeat;
                        background-color:#d45f00
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(3n):before{
                        background-image:url('/game/backgammon/img/board/dayofdead/spike_pattern_bottom.png');
                        background-position:center bottom;
                        background-size:80% 80%;
                        background-repeat:no-repeat;
                        background-color:#b40081
                    }
                    &:nth-child(3n+1):before{
                        background-image:url('/game/backgammon/img/board/dayofdead/spike_pattern_bottom.png');
                        background-position:center bottom;
                        background-size:80% 80%;
                        background-repeat:no-repeat;
                        background-color:#008080
                    }
                    &:nth-child(3n+2):before{
                        background-image:url('/game/backgammon/img/board/dayofdead/spike_pattern_bottom.png');
                        background-position:center bottom;
                        background-size:80% 80%;
                        background-repeat:no-repeat;
                        background-color:#d45f00
                    }
                }
            }
        }
        .par0{
        }
        .numtop,.numbot{
            div{
                &:nth-child(3n){
                    background:#ff0080
                }
                &:nth-child(3n+1){
                    background:#00b5b5
                }
                &:nth-child(3n+2){
                    background:#ff7200
                }
            }
        }
    }

    .bar{
        width:8%;
        height:84%;
        background-image:url('/game/backgammon/img/board/dayofdead/skull.png'),url('/game/backgammon/img/board/dayofdead/flower_motif.png'),repeating-conic-gradient(transparent 0%,transparent .5%,#4000a0 .5%,#4000a0 1%);
        background-position:center;
        background-repeat:no-repeat;
        background-size:100%;
    }

    div[data-ckr]{
        &:before{
            z-index:1;
            height:70% !important;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            border-style:solid;
            border-width:.15em
        }
        &:after{
            z-index:2;
            height:20% !important;
            border-color:#b40081 #008080 #d45f00 #03a100;
            border-style:dotted;
            border-width:.2em
        }
        &:hover{
            border:.15em solid #fff;
            box-shadow:0 0 .6em .2em rgba(255,255,255,.9);
            background:radial-gradient(rgba(255,255,255,0) 25%,rgba(255,255,255,1) 85%)
        }
    }
    div[data-ckr='0']{
        background:radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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;
        &:before{
            background:#f5f5f5
        }
        &:after{
            background:#f5f5f5
        }
    }
    div[data-ckr='1']{
        background:radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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%),#111;
        &:before{
            background:#111
        }
        &:after{
            background:#111
        }
    }

    [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%),#111;
            b{
                background:#fff
            }
        }
    }
}
[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
        }
        &:hover{
            border:.15em solid #fff;
            box-shadow:0 0 .6em .2em rgba(255,255,255,.9);
            background:radial-gradient(rgba(255,255,255,0) 25%,rgba(255,255,255,.9) 85%,rgba(255,255,255,1) 100%);
            b{
                text-shadow:0 0 .4em #fff;
                color:#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);
                        animation:anim-sifi-spks 20s ease-in-out infinite
                    }
                    &:nth-child(even):before{
                        background:rgb(128,0,255);
                        animation:anim-sifi-spks 15s ease-in-out infinite
                    }
                }
            }
            .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);
                        animation:anim-sifi-spks 20s ease-in-out infinite
                    }
                    &:nth-child(odd):before{
                        background:rgb(128,0,255);
                        animation:anim-sifi-spks 15s ease-in-out infinite
                    }
                }
            }
        }
    }

    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%);
        &:hover{
            border:.15em solid lime;
            box-shadow:0 0 .6em .2em rgba(0,255,0,.9);
            background:radial-gradient(rgba(0,255,0,0) 25%,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%);
        &:hover{
            border:.15em solid #ff00ff;
            box-shadow:0 0 .6em .2em rgba(255,0,255,.9);
            background:radial-gradient(rgba(255,0,255,0) 25%,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{
                background:lime;
                border:.1em solid lime;
                box-shadow:0 0 .3em .1em rgba(0,255,0,.9)
            }
        }
    }
    &[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{
                background:#ff00ff;
                border:.1em solid #ff00ff;
                box-shadow:0 0 .3em .1em rgba(255,0,255,.9)
            }
            &:hover{
                border:.15em solid #ff00ff;
                box-shadow:0 0 .6em .2em rgba(255,0,255,.9);
                background:radial-gradient(rgba(255,0,255,0) 25%,rgba(255,0,255,1) 85%);
                b{
                    border:.15em solid #ff00ff;
                    box-shadow:0 0 .6em .2em rgba(255,0,255,.9);
                    background:radial-gradient(rgba(255,0,255,0) 25%,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
        }
        &:hover{
            border:.15em solid #ff00ff;
            box-shadow:0 0 .6em .2em rgba(255,0,255,.9);
            background:radial-gradient(rgba(255,0,255,0) 25%,rgba(255,0,255,1) 85%);
            span{
                text-shadow:0 0 .4em #ff00ff,0 0 .4em #ff00ff
            }
        }
    }
}
[data-board='wood-grain']{
    background:linear-gradient(45deg,rgba(0,0,0,.7) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.7) 100%),linear-gradient(-45deg,rgba(0,0,0,.7) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.7) 100%),url('/game/backgammon/img/board/morocco/pan.jpg');

    .bevel0,.bevel1{
        .par0,.par1{
            background:radial-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%),url('/game/backgammon/img/board/morocco/pan.jpg');
            .partop{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(255,255,0,.6) 0%,rgba(255,255,0,.9) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,.9) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(255,255,0,.9) 0%,rgba(255,255,0,.6) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                }
            }
        }
        .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:linear-gradient(-45deg,#996515 0%,#B8860B 80%,#996515 100%);
            }
        }
    }

    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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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%),#b40808;
        &:after{
            background:#b40808
        }
    }

    [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%),#b40808;
            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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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='morocco']{
    background:linear-gradient(45deg,rgba(0,0,0,.6) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.8) 100%),linear-gradient(-45deg,rgba(0,0,0,.8) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.6) 100%),url('/game/backgammon/img/board/morocco/pan.jpg');

    .bevel0,.bevel1{
        .par0,.par1{
            background:radial-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%),url('/game/backgammon/img/board/morocco/pan.jpg');
            .partop{
                div{
                    &:nth-child(even):before{
                        background-image:url('/game/backgammon/img/board/morocco/spike_onyx_top.png');
                        background-position:center bottom;
                        background-size:100% 99%;
                        background-repeat:no-repeat
                    }
                    &:nth-child(odd):before{
                        background-image:url('/game/backgammon/img/board/morocco/spike_pearl_top.png');
                        background-position:center bottom;
                        background-size:100% 99%;
                        background-repeat:no-repeat
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background-image:url('/game/backgammon/img/board/morocco/spike_pearl_bottom.png');
                        background-position:center bottom;
                        background-size:80% 99%;
                        background-repeat:no-repeat
                    }
                    &:nth-child(odd):before{
                        background-image:url('/game/backgammon/img/board/morocco/spike_onyx_bottom.png');
                        background-position:center bottom;
                        background-size:100% 99%;
                        background-repeat:no-repeat
                    }
                }
            }
        }
        .par0{
            background-position:center
        }
        .numtop,.numbot{
            background:linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%)
        }
        .numtop{
            div:nth-child(odd){
                background:url('/game/backgammon/img/board/morocco/pan.jpg')
            }
        }
        .numbot{
            div:nth-child(even){
                background:url('/game/backgammon/img/board/morocco/pan.jpg')
            }
        }
    }

    .bar{
        width:8%;
        height:84%;
        background-image:url('/game/backgammon/img/board/morocco/bar.png');
        background-position:center;
        background-repeat:no-repeat;
        background-size:100%;
    }

    div[data-ckr]{
        &:after{
            z-index:1;
            height:70% !important;
            border-color:#FFD700 #D4AF37 #996515 #B8860B;
            border-style:solid;
            border-width:.15em
        }
    }
    div[data-ckr='0']{
        background:radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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%),#006000;
        &:after{
            background:url('/game/backgammon/img/board/morocco/chkr_green_center.png'),#008000;
            background-position:center;
            background-size:90%,100%;
            background-repeat:no-repeat
        }
    }
    div[data-ckr='1']{
        background:radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),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:url('/game/backgammon/img/board/morocco/chkr_red_center.png'),#cc0000;
            background-position:center;
            background-size:90%,100%;
            background-repeat:no-repeat
        }
    }

    [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%),#006000;
            b{
                background:conic-gradient(from 0deg at 50% 50%,#FFD700 0%,#D4AF37 15%,#fff 30%,#B8860B 50%,#996515 70%,#fff 85%,#FFD700 100%)
            }
        }
    }
    &[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:conic-gradient(from 0deg at 50% 50%,#FFD700 0%,#D4AF37 15%,#fff 30%,#B8860B 50%,#996515 70%,#fff 85%,#FFD700 100%)
            }
        }
    }
}
[data-board='quake-1']{
    background:radial-gradient(ellipse 80% 80% at center,rgba(255,64,0,.5) 0%,transparent 60%),url('/game/backgammon/img/board/quake-1/bg260.jpg');
    background-size:200%,40%;
    background-repeat:no-repeat,repeat;
    animation:anim-quake-1 120s ease-in-out infinite;

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

    .bar{
        width:8%;
        height:12%;
        background:url('/game/backgammon/img/board/quake-1/face.gif'),radial-gradient(at center,rgba(255,0,0,.9) 0%,transparent 60%);
        background-position:center;
        background-repeat:no-repeat;
        background-size:100%;
    }

    .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('/game/backgammon/img/board/quake-1/bg223.jpg');
            .partop{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(0,255,0,.4) 0%,rgba(0,255,0,.7) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(255,255,255,.4) 0%,rgba(255,255,255,.7) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(255,255,255,.7) 0%,rgba(255,255,255,.4) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(0,255,0,.7) 0%,rgba(0,255,0,.4) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                }
            }
        }
        .numtop,.numbot{
            background:linear-gradient(0deg,#b87333,#a0522d,#f0a85d);
            div:nth-child(odd){
                background:rgba(0,0,0,.4)
            }
        }
    }

    div[data-ckr='0']{
        background:radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),repeating-conic-gradient(transparent 0%,transparent 1%,rgba(0,0,0,.2) 1%,rgba(0,0,0,.1) 2%),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:radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),repeating-conic-gradient(transparent 0%,transparent 1%,rgba(255,255,255,.2) 1%,rgba(255,255,255,.2) 2%),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-dbl]{
            border-color:#f0a85d #b87333 #a0522d #B8860B
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            background:#aa0000;
        }
    }
}
[data-board='duke-nukem']{
    --s: 38px;
    --c1: #666;
    --c2: #555;
    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: var(--_s) conic-gradient(at 40% 40%,#0000 75%,var(--c1) 0);
    --_p: var(--_s) conic-gradient(at 20% 20%,#0000 75%,var(--c2) 0);
    background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%),calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),calc( .7*var(--s)) calc( .7*var(--s))/var(--_g),calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),conic-gradient(from 90deg at 20% 20%,var(--c2) 25%,var(--c1) 0) 0 0/var(--s) var(--s);
    animation:anim-duke 9s infinite;

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

    .bar{
        width:8%;
        height:22%;
        background-image:url('/game/backgammon/img/board/duke-nukem/face.gif'),radial-gradient(rgba(255,128,0,1) 36%,rgba(255,0,0,1) 44%,rgba(255,0,0,0) 70%);
        background-position:center;
        background-repeat:no-repeat;
        background-size:75%,100% 100%;
    }

    .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{
            --s: 20px;
            --c1: #806040;
            --c2: #705030;
            --_s: calc(2*var(--s)) calc(2*var(--s));
            --_g: var(--_s) conic-gradient(at 40% 40%,#0000 75%,var(--c1) 0);
            --_p: var(--_s) conic-gradient(at 20% 20%,#0000 75%,var(--c2) 0);
            background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%),calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),calc( .7*var(--s)) calc( .7*var(--s))/var(--_g),calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),conic-gradient(from 90deg at 20% 20%,var(--c2) 25%,var(--c1) 0) 0 0/var(--s) var(--s);
            animation:anim-duke 4s infinite;
        }
        .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) 60%,rgba(255,255,255,.3) 100%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#000;
        &:after{
            content:"\2622";
            height:90% !important;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:2em;
            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%),radial-gradient(at 50% 95%,rgba(255,255,255,.8) 0%,rgba(255,255,255,.8) 5%,rgba(255,255,255,.4) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),lime;
        &:after{
            content:"\2623";
            height:80% !important;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:1.7em;
            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
            }
        }
    }
}
[data-board='spitfire']{
    background:linear-gradient(45deg,rgba(0,0,0,.6) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.8) 100%),linear-gradient(-45deg,rgba(0,0,0,.8) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.6) 100%),url('/game/backgammon/img/board/morocco/pan.jpg');

    .bevel0,.bevel1{
        .par0,.par1{
            background:linear-gradient(rgba(64,64,64,.6),rgba(64,64,64,.6)),url('/game/backgammon/img/board/spitfire/arial.gif');
            .partop{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(0,255,0,.5) 0%,rgba(0,255,0,.9) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(255,255,255,.7) 0%,rgba(255,255,255,1) 100%);
                        clip-path:polygon(0% 0%, 50% 100%, 100% 0%, 98% 0%, 48% 100%, 50% 100%, 52% 100%, 2% 0%)
                    }
                }
            }
            .parbot{
                div{
                    &:nth-child(even):before{
                        background:linear-gradient(rgba(255,255,255,1) 0%,rgba(255,255,255,.7) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                    &:nth-child(odd):before{
                        background:linear-gradient(rgba(0,255,0,.9) 0%,rgba(0,255,0,.5) 100%);
                        clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 98% 100%, 48% 0%, 50% 0%, 52% 0%, 2% 100%)
                    }
                }
            }
        }
        .numtop,.numbot{
            background:linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%)
        }
        .numtop{
            div:nth-child(even){
                background:rgba(32,0,0,.4)
            }
        }
        .numbot{
            div:nth-child(odd){
                background:rgba(32,0,0,.4)
            }
        }
    }
    .par0{
        background-position:0 0;
        animation:anim-spitfire-0 60s linear infinite
    }
    .par1{
        background-position:128px 128px;
        animation:anim-spitfire-1 60s linear infinite
    }

    .bar{
        width:8%;
        height:42%;
        background:url('/game/backgammon/img/board/spitfire/guages.png');
        background-size:110%;
        background-position:center;
        background-repeat:no-repeat;
    }

    .ckrs{
        div[data-ckr='0'],div[data-ckr='1']{
            &[data-spk='25']{
                border-width:0;
            }
        }
    }
    div[data-ckr='0']{
        &:nth-child(3n){
            border:2px solid rgba(196,196,196,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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),linear-gradient(0deg,#d5d5d5 50%,transparent 50%),#806839;
            &: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%),radial-gradient(#cc0000 0%,#cc0000 17%,#eee 17%,#eee 35%,#000080 35%,#000080 60%,gold 60%,gold 70%,transparent 70%),linear-gradient(60deg,#448049 60%,transparent 60%),#806839;
                background-position:left top,center,center,center;
                background-size:100%,100%,60% 60%,100%;
                background-repeat:no-repeat
            }
        }
        &:nth-child(3n+1){
            border:2px solid rgba(196,196,196,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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#a1875f;
            &: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%),radial-gradient(#cc0000 0%,#cc0000 30%,#000080 30%,#000080 70%,transparent 70%),#a1875f;
                background-position:left top,center,center,center;
                background-size:100%,100%,60% 60%,100%;
                background-repeat:no-repeat
            }
        }
        &:nth-child(3n+2){
            border:2px solid rgba(196,196,196,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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),linear-gradient(60deg,#18521f 60%,transparent 60%),#806839;
            &: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%),radial-gradient(#cc0000 0%,#cc0000 17%,#eee 17%,#eee 30%,#000080 30%,#000080 55%,gold 55%,gold 70%,transparent 70%),linear-gradient(20deg,#9cb5af 20%,transparent 80%),#806839;
                background-position:left top,center,center,center;
                background-size:100%,100%,60% 60%,100%;
                background-repeat:no-repeat
            }
        }
    }
    div[data-ckr='1']{
        &:nth-child(3n){
            border:2px solid rgba(196,196,196,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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),conic-gradient(transparent 90%,#ffc400 90%),#666;
            &: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%),url('/game/backgammon/img/board/spitfire/nazik.png'),#666;
                background-position:center;
                background-size:100%,100%,50%,100%;
                background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat
            }
        }
        &:nth-child(3n+1){
            border:2px solid rgba(196,196,196,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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),linear-gradient(0deg,#999 50%,transparent 50%),linear-gradient(60deg,#444 60%,transparent 60%),#555;
            &: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%),url('/game/backgammon/img/board/spitfire/nazik.png'),linear-gradient(-50deg,#444 50%,transparent 50%),#555;
                background-position:center;
                background-size:100%,100%,50%,100%,100%;
                background-repeat:no-repeat
            }
        }
        &:nth-child(3n+2){
            border:2px solid rgba(196,196,196,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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),linear-gradient(60deg,#111 60%,transparent 60%),#444;
            &: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%),url('/game/backgammon/img/board/spitfire/nazik.png'),linear-gradient(50deg,#111 50%,transparent 50%),#444;
                background-position:center;
                background-size:100%,100%,50%,100%,100%;
                background-repeat:no-repeat
            }
        }
    }

    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            border-color:#fff #eee #bbb #ccc;
            background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),linear-gradient(45deg,rgba(0,0,0,.5) 50%,transparent 50%),#806839;
            b{
                background:#fff
            }
        }
    }
    &[data-trn='1'][data-plr='1'],&[data-trn='0'][data-plr='0']{
        [data-dce]{
            border-color:#fff #eee #bbb #ccc;
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),linear-gradient(-50deg,#333 50%,transparent 50%),#666;
            b{
                background:#fff
            }
        }
    }
}

[data-board='israel-arab'],[data-board='union-confederacy'],[data-board='american-british'],[data-board='cold-war'],[data-board='gallipoli'],[data-board='greco-turk']{
    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{
        .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%),#705820
        }
        .numtop,.numbot{
            background:linear-gradient(45deg,#996515 0%,#B8860B 20%,#D4AF37 40%,#FFD700 50%,#D4AF37 60%,#B8860B 80%,#996515 100%)
        }
        .numtop{
            div:nth-child(even){
                background:rgba(32,0,0,.5)
            }
        }
        .numbot{
            div:nth-child(odd){
                background:rgba(32,0,0,.5)
            }
        }
    }

    div[data-ckr]{
        &:after{
            height:70%;
            background-size:auto,auto,cover !important;
            background-position:center !important;
            background-repeat:no-repeat !important;
            border-style:solid;
            border-width:.1em;
            border-color:#FFD700 #D4AF37 #996515 #B8860B
        }
    }
}
[data-board='israel-arab']{
    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%),radial-gradient(at 50% 95%,rgba(255,255,255,1) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#eee;
        &:after{
            background:radial-gradient(at 50% 95%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 5%,rgba(255,255,255,.3) 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%),url('/img/flag/il.svg');
            background-size:auto,auto,170% !important
        }
    }
    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,.5) 80%,rgba(0,0,0,.1) 100%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#008000;
        &:nth-child(4n){
            &:after{
                background:radial-gradient(at 50% 95%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 5%,rgba(255,255,255,.3) 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%),url('/img/flag/jo.svg')
            }
        }
        &:nth-child(4n+1){
            &:after{
                background:radial-gradient(at 50% 95%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 5%,rgba(255,255,255,.3) 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%),url('/img/flag/eg.svg')
            }
        }
        &:nth-child(4n+2){
            &:after{
                background:radial-gradient(at 50% 95%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 5%,rgba(255,255,255,.3) 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%),url('/img/flag/sy.svg');
            }
        }
        &:nth-child(4n+3){
            &:after{
                background:radial-gradient(at 50% 95%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 5%,rgba(255,255,255,.3) 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%),url('/img/flag/ir.svg')
            }
        }
    }

    &[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%),#eee;
            b{
                background:#000090
            }
        }
    }
    &[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%),#006000;
        }
    }
}
[data-board='union-confederacy']{
    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%),radial-gradient(at 50% 95%,rgba(255,255,255,1) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#0000bb;
        &:after{
            background:radial-gradient(at 50% 95%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 5%,rgba(255,255,255,.3) 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%),url('/img/flag/us.svg')
        }
    }
    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,.5) 80%,rgba(0,0,0,.1) 100%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#8b8f8f;
        &:after{
            background:radial-gradient(at 50% 95%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 5%,rgba(255,255,255,.3) 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%),url('/game/backgammon/img/board/Confederate_flag.svg');
            background-size:auto,auto,160% !important;
        }
    }

    &[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,.3) 100%),#0000bb;
            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%),#A5A8A8;
            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
            }
        }
    }
}
[data-board='american-british']{
    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%),radial-gradient(at 50% 95%,rgba(255,255,255,1) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#0000bb;
        &:after{
            background:radial-gradient(at 50% 95%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 5%,rgba(255,255,255,.3) 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%),url('/game/backgammon/img/board/Flag_of_the_America_1776.svg');
            background-position:left top !important
        }
    }
    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,.5) 80%,rgba(0,0,0,.1) 100%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#cc0000;
        &:after{
            background:radial-gradient(at 50% 95%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 5%,rgba(255,255,255,.3) 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%),url('/game/backgammon/img/board/Flag_of_Great_Britain.svg');
            background-position:center !important
        }
    }

    &[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,.3) 100%),#0000bb;
            b{
                background:#fff
            }
        }
    }
    &[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-board='cold-war']{
    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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#000090;
        &:after{
            background-position:center !important
        }
        &:nth-child(3n+1){
            &: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%),url('/img/flag/us.svg')
            }
        }
        &:nth-child(3n+2){
            &: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%),url('/img/flag/gb.svg')
            }
        }
        &:nth-child(3n){
            &: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%),url('/img/flag/fr.svg')
            }
        }
    }
    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;
        &:nth-child(2n){
            &: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%),url('/game/backgammon/img/board/Flag_of_the_Soviet_Union.svg');
                background-position:left top !important;
                background-size:310% !important
            }
        }
        &:nth-child(2n+1){
            &: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%),url('/img/flag/cn.svg');
                background-position:left top !important;
                background-size:180% !important
            }
        }
    }

    &[data-trn='1'][data-plr='0'],&[data-trn='0'][data-plr='1']{
        [data-dce]{
            background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.1) 100%),#000090;
            b{
                background:#fff
            }
        }
    }
}
[data-board='gallipoli']{
    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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 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%),url('/img/flag/tr.svg')
        }
    }
    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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#000090;
        &:nth-child(4n){
            &: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%),url('/img/flag/gb.svg')
            }
        }
        &:nth-child(4n+1){
            &: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%),url('/img/flag/au.svg');
                background-size:auto,auto,cover;
                background-repeat:no-repeat
            }
        }
        &:nth-child(4n+2){
            &: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%),url('/img/flag/nz.svg');
            }
        }
        &:nth-child(4n+3){
            &: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%),url('/img/flag/gb.svg')
            }
        }
    }

    &[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%),#cc0000;
            b{
                background:#fff
            }
        }
    }
    &[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%),#000090;
            b{
                background:#fff
            }
        }
    }
}
[data-board='greco-turk']{
    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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%),#0000cc;
        &: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%),url('/img/flag/gr.svg');
            background-position:left top !important
        }
    }
    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%),radial-gradient(at 50% 95%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.25) 5%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 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%),url('/img/flag/tr.svg')
        }
    }

    &[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%),#0000cc;
            b{
                background:#fff
            }
        }
    }
    &[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
            }
        }
    }
}

@keyframes anim-grad{
    0%{
        background-position:0% 100%;
    }
    50%{
        background-position:100% 0%;
    }
    100%{
        background-position:0% 100%;
    }
}
@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-sifi-spks{
    0%{
        background:rgb(0,0,255)
    }
    25%{
        background:rgb(255,0,255)
    }
    50%{
        background:rgb(128,0,255)
    }
    75%{
        background:rgb(255,0,255)
    }
    100%{
        background:rgb(0,0,255)
    }
}
@keyframes anim-quake-1{
    0%{
        background-position:0% 50%,50% 0%
    }
    25%{
        background-position:50% 0%,0% 50%
    }
    50%{
        background-position:100% 50%,50% 100%
    }
    75%{
        background-position:50% 100%,100% 50%
    }
    100%{
        background-position:0% 50%,50% 0%
    }
}
@keyframes anim-duke{
    0%{
        background-position:0 0,calc( .9*var(--s)) calc( .9*var(--s)),calc(-.1*var(--s)) calc(-.1*var(--s)),calc( .7*var(--s)) calc( .7*var(--s)),calc(-.3*var(--s)) calc(-.3*var(--s)),0 0
    }
    25%{
        background-position:0 0,calc(1.9*var(--s)) calc( .9*var(--s)),calc(-1.1*var(--s)) calc(-.1*var(--s)),calc(1.7*var(--s)) calc( .7*var(--s)),calc(-1.3*var(--s)) calc(-.3*var(--s)),0 0
    }
    50%{
        background-position:0 0,calc(1.9*var(--s)) calc(-.1*var(--s)),calc(-1.1*var(--s)) calc( .9*var(--s)),calc(1.7*var(--s)) calc(-.3*var(--s)),calc(-1.3*var(--s)) calc( .7*var(--s)),0 0
    }
    75%{
        background-position:0 0,calc(2.9*var(--s)) calc(-.1*var(--s)),calc(-2.1*var(--s)) calc( .9*var(--s)),calc(2.7*var(--s)) calc(-.3*var(--s)),calc(-2.3*var(--s)) calc( .7*var(--s)),0 0
    }
    100%{
        background-position:0 0,calc(2.9*var(--s)) calc(-1.1*var(--s)),calc(-2.1*var(--s)) calc(1.9*var(--s)),calc(2.7*var(--s)) calc(-1.3*var(--s)),calc(-2.3*var(--s)) calc(1.7*var(--s)),0 0
    }
}
@keyframes anim-spitfire-0{
    0%{
        background-position:0 0
    }
    100%{
        background-position:0 500px
    }
}
@keyframes anim-spitfire-1{
    0%{
        background-position:0px 250px
    }
    100%{
        background-position:0px 750px
    }
}