*{
    box-sizing:border-box;
    user-select:none
}
html,body{
    width:100%;
    height:100%;
    overflow:hidden
}
body{
    color:#fff;
    font-family:arial;
    font-size:10pt;
    cursor:default;
    padding:0;
    margin:0
}
table{
    border-collapse:collapse
}
input,select,button{
    border-radius:20px;
}
input,select,button{
    background:transparent;
    height:32px;
    font-size:12pt;
    color:#fff;
    border:2px solid rgba(255,255,255,.4);
    padding:3px 16px;
    &:focus{
        outline:none;
        border:2px solid rgba(255,255,255,1)
    }
}
input:focus{
    background:#fff;
    color:#000
}
select{
    option{
        background:#000;
        color:#fff;
    }
}
div,form{
    scrollbar-color:gray transparent;
    scrollbar-width:thin
}
s{
    text-decoration:none
}

label{
    display:block;
    width:100%;
    padding:6px 0;
    font-size:12pt;
    color:rgba(255,255,255,.75);
    input,select,button,& > div{
        display:block;
        margin:4px 0
    }
}

button{
    background:transparent;
    color:#fff;
    cursor:pointer;
    font-weight:bold;
    border-color:#fff;
    &.op5{
        opacity:.5
    }
}

.toggle{
    display:inline-block;
    width:36px;
    height:20px;
    margin:-1px 0 0 0;
    background:#555;
    border-radius:10px;
    cursor:pointer;
    position:relative;
    transition:background .2s;
    flex-shrink:0;
    float:right
}
.toggle.on{
    background:green
}
.toggle::after{
    content:'';
    position:absolute;
    width:16px;
    height:16px;
    background:#fff;
    border-radius:50%;
    top:2px;
    left:2px;
    transition:left .2s
}
.toggle.on::after{
    left:18px
}

.nav{
    position:fixed;
    top:0;
    bottom:0;
    width:72px;
    height:100vh;
    &[data-pos='left']{
        left:0
    }
    &[data-pos='right']{
        right:0
    }

    .tab{
        display:flex;
        flex-direction:column;
        align-items:center;
        margin-top:96px;
        & > div{
            display:flex;
            flex-direction:column;
            align-items:center;
            height:72px;
            cursor:pointer;
            opacity:.6;
            transition:all 1s,opacity 0s;
            svg{
                width:36px;
                height:36px;
                transition:all 1s
            }
            svg *{
                stroke:#fff
            }
            svg polygon{
                fill:#fff;
                stroke:none
            }
            b{
                font-size:9pt;
                color:#fff;
                line-height:50%;
                transition:all 1s
            }
            &.on{
                opacity:1
            }
            &.off{
                height:0px;
                opacity:0;
                svg{
                    width:0px;
                    height:0px
                }
                b{
                    font-size:0pt
                }
            }
        }
    }
}

.logo{
    position:absolute;
    left:9px;
    bottom:30px;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-family:georgia;
    font-weight:700;
    font-size:36px;
    letter-spacing:-2px;
    background-repeat:no-repeat;
    background-size:200% 100%;
    background-position:100% 0%;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    transition:all 1s;
    filter:drop-shadow(0 0 0 rgba(0, 0, 0, 0));

    &[data-lgo='1'] {
        filter:drop-shadow(0 -6px 2px rgba(0, 0, 0, .8));
        background-image:linear-gradient(0deg,rgba(255,255,255,0) 0%,#aaa 50%,#fff 80%,#ccc 100%);
        background-size:100% 200%;
        animation:lg1 3s linear 1
    }
}
@keyframes lg1{
    0%{
        background-position:0% 200%;
    }
    100%{
        background-position:0% 0%;
    }
}

[data-pan]{
    display:none;
    position:absolute;
    top:0;
    bottom:0;
    right:72px;
    left:72px;
    flex-direction:column;
    &.on{
        display:flex
    }
    .top-bar,.bottom-bar{
        display:flex;
        flex-shrink:0;
        min-height:64px;
        align-items:center;
        padding:0 32px 0 0;
        border-style:solid;
        border-color:rgba(255,255,255,.2);
        [type="text"],select{
            width:100px;
            transition:all 1s
        }
        [type="text"]:focus,select:focus{
            width:200px
        }

        h1{
            font-family:georgia;
            margin:0 64px;
            font-weight:700;
            font-size:32px;
            letter-spacing:-1px;
            opacity:.5;
            background-image:linear-gradient(45deg,#aaa,#bbb,#e0e0e0,#fff,#c0c0c0);
            background-clip:text;
            -webkit-background-clip:text;
            color:transparent;
            -webkit-text-fill-color:transparent
        }
    }
    .top-bar{
        border-width:0 0 1px 0
    }
    .bottom-bar{
        border-width:1px 0 0 0
    }

    .bod{
        flex:1;
        overflow-y:auto
    }
    table.list{
        width:100%;
        font-size:11pt;
        tr{
            background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),#444;
            &:hover{
                background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),#777
            }
            &.red{
                background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),red;
                td{
                    background:transparent !important
                }
            }
            &.green{
                background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),green;
                td{
                    background:transparent !important
                }
            }
            &.blue{
                background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),blue;
                td{
                    background:transparent !important
                }
            }
            &.gray{
                background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),#999
            }
            &.nobuyin{
                background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),#999;
                color:rgba(255,255,255,.75)
            }
            &.black{
                background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),#000
            }
            &.youdare{
                background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),#0000AA;
                td{
                    background:transparent !important
                }
            }
            &.dareyou{
                background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.2) 25%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),#009900;
                td{
                    background:transparent !important
                }
            }

            th,td{
                text-wrap:nowrap;
                border-style:solid;
                border-width:1px;
                border-color:rgba(0,0,0,.5) rgba(255,255,255,.2) rgba(0,0,0,.3) rgba(255,255,255,.2);
                &.name{
                    background:rgba(0,0,255,.2);
                    font-weight:bold
                }
                &.date{
                    background:rgba(0,0,0,.3)
                }
                &.time{
                    background:rgba(196,196,196,.3)
                }
                &.brown{
                    background:rgba(128,96,64,.2)
                }
                &.red{
                    background:rgba(255,0,0,.2)
                }
                &.orange{
                    background:rgba(255,128,0,.2)
                }
                &.yellow{
                    background:rgba(255,255,0,.2)
                }
                &.green{
                    background:rgba(0,255,0,.2)
                }
                &.teal{
                    background:rgba(0,255,128,.2)
                }
                &.cyan{
                    background:rgba(0,255,255,.2)
                }
                &.blue{
                    background:rgba(0,0,255,.2)
                }
                &.purple{
                    background:rgba(128,0,255,.2)
                }
                &.violet{
                    background:rgba(255,0,196,.2)
                }
                &.black{
                    background:rgba(0,0,0,.3)
                }
                &.flag{
                    padding:0 8px;
                    img{
                        width:28px
                    }
                }
                &.user{
                    background:rgba(255,255,0,.2);
                    font-weight:bold
                }
                &.num{
                    text-align:right
                }
                &.vs{
                    padding:8px 16px
                }
                &.right{
                    text-align:right
                }
                &.bold{
                    font-weight:bold
                }
                &:empty{
                    background:none !important;
                }
                &:first-child,&:last-child{
                    width:40%
                }
            }
            th{
                text-align:left;
                font-size:9pt;
                padding:4px 12px;
                color:rgba(255,255,255,.7)
            }
            td{
                padding:8px 16px;
                cursor:pointer
            }
        }
    }
}

dialog{
    min-width:320px;
    padding:40px;
    background:#222;
    border:1px solid rgba(255,255,255,.1);
    color:#fff;
    font-size:11pt;
    box-shadow:0 20px 40px 0 rgba(0,0,0,.8);
    &::backdrop{
        background-color:rgba(0,0,0,0);
        transition:all 1s
    }
    &:hover{
        border:1px solid rgba(255,255,255,.5);
        box-shadow:0 20px 40px 0 rgba(0,0,0,1);
        &::backdrop{
            background:rgba(0,0,0,.5);
            filter:blur(2px)
        }
    }
    h3{
        padding:20px 20px 0 20px;
        margin:-40px -40px 20px -40px;
        text-transform:uppercase;
        font-size:12pt;
        letter-spacing:12px;
        text-align:center;
        &:empty{
            display:none
        }
    }
    hr {
        border:none;
        border-top:1px solid rgba(255,255,255,.3)
    }
    select,button,input{
        width:100%
    }
    .toggle{
        margin-left:40px
    }
    p{
        text-align:center
    }

    #brd,#bgs{
        width:760px;
        height:75vh;
        overflow:auto;
        > a{
            display:inline-block;
            height:200px;
            width:200px;
            margin:20px;
            font-size:9pt;
            text-align:center;
            cursor:pointer;
            > div{
                height:200px;
                width:200px
            }
            b{
                display:block;
                margin-top:4px;
                opacity:.5
            }
            &:hover{
                b{
                    opacity:1
                }
            }
        }
    }

    &.red{
        background:#cc0000
    }
    &.green{
        background:#00cc00
    }
}

#bgs,#brds{
    height:80vh
}
#brdPop{
    max-height:90vh;
    overflow:hidden
}
#loginPop,#accPop{
    hr{
    }
    button{
        display:flex;
        align-items:center;
        border-width:0;
        svg{
            width:24px;
            height:24px;
            margin:0 12px 0 0;
            polygon{
                stroke:none
            }
        }
    }
}
#deetPop{
    form{
        max-height:90vh;
        overflow:hidden auto
    }
}
#tipPop{
    position:fixed;
    margin:0;
    padding:10px 12px
}
[name='rnick'],[name='mdnick']{
    font-weight:bold
}

.wait{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    overflow:hidden;
    background:rgba(0,0,0,.5);
    & *{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:160px;
        height:160px;
        border-radius:50%;
        border-style:solid;
        border-color:rgba(255,255,255,.2) rgba(255,255,255,.2) transparent transparent;
        border-width:20px
    }
    div:nth-of-type(1){
        animation:wait 2s linear infinite
    }
    div:nth-of-type(2){
        animation:wait 4s linear infinite
    }
}
@keyframes wait{
    100% {
        transform:translate(-50%,-50%) rotate(360deg)
    }
}

/* backgrounds */
[data-bg='default']{
    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%)
}
[data-bg='black']{
    background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.8) 100%),#444;
}
[data-bg='radial-red']{
    background:linear-gradient(300deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.7) 100%),radial-gradient(circle,rgba(196,0,0) 0%,rgba(64,0,0) 100%)
}
[data-bg='radial-orange']{
    background:linear-gradient(300deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.7) 100%),radial-gradient(circle,rgba(255,128,0) 0%,rgba(64,32,0) 100%)
}
[data-bg='radial-green']{
    background:linear-gradient(300deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.7) 100%),radial-gradient(circle,rgba(0,196,0) 0%,rgba(0,64,0) 100%)
}
[data-bg='radial-teal']{
    background:linear-gradient(300deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.7) 100%),radial-gradient(circle,rgba(0,255,128) 0%,rgba(0,64,32) 100%)
}
[data-bg='radial-blue']{
    background:linear-gradient(300deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.7) 100%),radial-gradient(circle,rgba(0,0,255) 0%,rgba(0,0,64) 100%)
}
[data-bg='radial-purple']{
    background:linear-gradient(300deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.7) 100%),radial-gradient(circle,rgba(128,0,255) 0%,rgba(32,0,64) 100%)
}
[data-bg='radial-violet']{
    background:linear-gradient(300deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.7) 100%),radial-gradient(circle,rgba(255,0,196) 0%,rgba(64,0,64) 100%)
}
[data-bg='wood-chip']{
    background:linear-gradient(0deg,rgba(0,0,0,.3) 0%,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
}
[data-bg='wood-grain']{
    background:linear-gradient(90deg,rgba(0,0,0,.3) 0%,transparent 50%,rgba(0,0,0,.3) 100%),repeating-linear-gradient(174deg,transparent 0px,transparent 18px,rgba(60,45,15,.2) 18px,rgba(60,45,15,.2) 22px,transparent 22px,transparent 38px,rgba(212,175,55,.12) 38px,rgba(212,175,55,.12) 42px,transparent 42px,transparent 60px,rgba(255,255,255,.06) 60px,rgba(255,255,255,.06) 63px,transparent 63px,transparent 90px),repeating-linear-gradient(178deg,transparent 0px,transparent 30px,rgba(55,40,10,.2) 30px,rgba(55,40,10,.2) 36px,transparent 36px,transparent 55px,rgba(184,134,11,.1) 55px,rgba(184,134,11,.1) 60px,transparent 60px,transparent 140px),repeating-linear-gradient(172deg,transparent 0px,transparent 8px,rgba(70,50,15,.15) 8px,rgba(70,50,15,.15) 10px,transparent 10px,transparent 50px),linear-gradient(180deg,#bfa15f 0%,#8c733e 30%,#a68b4c 50%,#735c2b 70%,#bfa15f 100%)
}
[data-bg='wood-walnut']{
    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%)
}
[data-bg='wood-pine']{
    background:linear-gradient(0deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.3) 100%),repeating-linear-gradient(93deg,rgba(255,255,255,.1) 0px,rgba(255,255,255,.1) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(87deg,rgba(140,95,50,.08) 0px,rgba(140,95,50,.08) 1px,transparent 1px,transparent 4px),repeating-radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.08) 0px,transparent 40px,rgba(140,95,50,.05) 80px,transparent 120px),#e5b986
}
[data-bg='wood-dark']{
    background:linear-gradient(0deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.3) 100%),repeating-linear-gradient(93deg,rgba(255,255,255,.1) 0px,rgba(255,255,255,.1) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(87deg,rgba(140,95,50,.08) 0px,rgba(140,95,50,.08) 1px,transparent 1px,transparent 4px),repeating-radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.08) 0px,transparent 40px,rgba(140,95,50,.05) 80px,transparent 120px),#802a17
}