*{
    box-sizing:border-box;
    user-select:none
}
html,body{
    width:100%;
    height:100%;
    overflow:hidden
}
body{
    color:#fff;
    font-family:arial;
    cursor:default;
    padding:0;
    margin:0
}
a{
    cursor:pointer
}
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
}
.wait{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    overflow:hidden;
    & *{
        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)
    }
}

.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
}
.pwrow{
    display:flex;
    align-items:center;
    gap:10px;
    input{
        flex:1;
        min-width:0
    }
    .toggle{
        float:none
    }
}

.nav{
    position:fixed;
    top:0;
    bottom:0;
    width:72px;
    height:100%;
    &[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
                }
            }
            &.blink{
                animation:navBlink .8s ease-in-out infinite
            }
        }
    }
}
@keyframes navBlink{
    0%,100%{
        opacity:1
    }
    50%{
        opacity:.25
    }
}

.nav .logo,[data-pan='splash'] .logobox .logo{
    font-family:georgia;
    font-weight:700;
    background-repeat:no-repeat;
    background-size:200% 100%;
    background-clip:text;
    color:transparent;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    transition:all 1s;
    filter:drop-shadow(0 0 0 rgba(0,0,0,0))
}
.nav .logo{
    position:absolute;
    left:9px;
    bottom:30px;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:36px;
    letter-spacing:-2px;
    background-position:100% 0%;
    &[data-lgo='1']{
        filter:drop-shadow(0 -5px 2px rgba(0,0,0,.5));
        background-image:linear-gradient(0deg,transparent 0%,#aaa 50%,#fff 80%,#ccc 100%);
        background-size:100% 200%;
        animation:logo 3s linear 1
    }
}
@keyframes logo{
    0%{
        background-position:0% 200%;
    }
    100%{
        background-position:0% 0%;
    }
}
[data-pan='splash']{
    position:relative;
    .logobox{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        .logo{
            font-size:48px;
            letter-spacing:-3px;
            background-position:50% 0%;
            &[data-lgo='1']{
                filter:drop-shadow(0 5px 2px rgba(0,0,0,.5));
                background-image:linear-gradient(90deg,transparent 0%,#888 30%,#fff 45%,#999 60%,transparent 100%);
                background-size:300% 100%;
                animation:logoSplash 3s linear 1
            }
        }
    }
}
@keyframes logoSplash{
    0%{
        background-position:200% 0%;
    }
    100%{
        background-position:50% 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:160px;
            transition:all 1s
        }
        h1{
            font-family:georgia;
            margin:0 64px;
            font-weight:700;
            font-size:32px;
            letter-spacing:-1px;
            background-image:linear-gradient(45deg,#aaa,#bbb,#e0e0e0,#fff,#c0c0c0);
            background-clip:text;
            -webkit-background-clip:text;
            color:transparent;
            -webkit-text-fill-color:transparent;
            img{
                height:24px;
                margin:0 12px 0 0
            }
        }
    }
    .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,.2) 20%,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,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,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,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),green
        }
        &.blue{
            background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,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,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),#999
        }
        &.gold{
            background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 50%,rgba(255,255,255,.2) 80%,rgba(0,0,0,.2) 100%),#ff8000
        }
        &.nobuyin{
            background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(255,255,255,0) 20%,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,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,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,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);
            vertical-align:middle;
            &.name{
                background:rgba(0,0,0,.2);
                font-weight:bold
            }
            &.name-green{
                background:rgba(0,255,0,.2);
                font-weight:bold
            }
            &.name-yellow{
                background:rgba(255,255,0,.2);
                font-weight:bold
            }
            &.name-red{
                background:rgba(255,0,0,.2);
                font-weight:bold
            }
            &.date{
                background:rgba(0,0,0,.3)
            }
            &.time,&.gray{
                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
        }
    }
}

details{
    &[open]{
        summary{
            font-weight:bold;
            &::before{
                transform:rotate(90deg)
            }
        }
    }
    summary{
        padding:0 0 4px 0;
        color:rgba(255,255,255,.6);
        cursor:pointer;
        list-style:none;
        &::-webkit-details-marker{
            display:none
        }
        &:hover{
            color:#fff
        }
        &::before{
            content:'▸';
            display:inline-block;
            margin:0 8px 0 0;
            transition:transform .15s
        }
    }
    a{
        display:block;
        padding:4px 0 4px 32px;
        color:rgba(255,255,255,.6);
        cursor:pointer;
        text-decoration:none;
        &::before{
            content:'+';
            display:inline-block;
            margin:0 8px 0 0
        }
        &:hover{
            color:#fff
        }
        &.on{
            color:#fff
        }
    }
}

dialog{
    min-width:360px;
    padding:40px;
    background:#222;
    border:1px solid rgba(255,255,255,.1);
    outline:none;
    color:#fff;
    font-size:11pt;
    box-shadow:0 20px 40px 0 rgba(0,0,0,.8);
    &::backdrop{
        background-color:rgba(0,0,0,0);
        backdrop-filter:blur(0px);
        transition:all 1s
    }
    &:hover{
        border:1px solid rgba(255,255,255,.5);
        box-shadow:0 20px 40px 0 rgba(0,0,0,1)
    }
    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:8px
    }
    p{
        text-align:center
    }

    #brd{
        width:760px;
        height:calc(var(--lvh) * 75);
        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
    }
}
dialog:has(.list){
    overflow:hidden;
    padding:40px 0 0 20px
}
dialog.backdrop{
    &::backdrop{
        background-color:rgba(0,0,0,.2)
    }
    &:hover{
        &::backdrop{
            background-color:rgba(0,0,0,.4);
            backdrop-filter:blur(2px)
        }
    }
}

.list{
    max-height:calc(var(--lvh) * 80);
    overflow:hidden auto;
    & > a,div{
        border-style:solid;
        border-color:rgba(255,255,255,.2);
        border-width:1px 0 0 0;
        padding:8px 20px 8px 0;
        display:flex;
        align-items:center;
        img{
            height:12px;
            margin:0 8px 0 0
        }
        .plpg{
            margin-left:auto;
            padding-left:12px;
            text-align:right;
            font-size:.75em;
            opacity:.65;
            white-space:nowrap;
            s{
                display:block;
                font-style:normal;
                text-decoration:none;
                color:#c8a84b
            }
        }
    }
}
#info{
    display:flex;
    height:100%;
    max-width:960px;
    margin:0 auto;
    #info_menu{
        flex:0 0 280px;
        padding:24px;
        border-right:1px solid rgba(255,255,255,.2);
        overflow-y:auto;
        h5{
            margin:0 0 12px 0;
            letter-spacing:1px;
            font-size:14pt;
            color:rgba(255,255,255,.5)
        }
        & > a{
            display:block;
            padding:4px 0;
            color:rgba(255,255,255,.6);
            text-decoration:none;
            &::before{
                content:'+';
                display:inline-block;
                margin:0 8px 0 0
            }
            &:hover{
                color:#fff
            }
            &.on{
                color:#fff
            }
        }
    }
    #info_text{
        flex:1;
        padding:32px 40px;
        overflow-y:auto;
        line-height:1.6;
        h1{
            margin:0 0 16px 0;
            font-size:20pt
        }
        h2{
            margin:1.5em 0 .5em 0;
            font-size:13pt
        }
        p{
            margin:0 0 1em 0;
            color:rgba(255,255,255,.85)
        }
        a{
            color:#fff;
            text-decoration:underline
        }
        .cta{
            display:inline-block;
            margin-top:10px;
            padding:10px 24px;
            background:#fff;
            color:#000;
            text-decoration:none;
            border-radius:20px;
            font-weight:bold;
            &:hover{
                background:rgba(255,255,255,.8)
            }
        }
        .video-embed{
            position:relative;
            width:100%;
            padding-bottom:54.902%;
            height:0;
            margin:20px 0 30px 0;
            iframe{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                border:0
            }
        }
    }
}
#brds{
    height:calc(var(--lvh) * 80)
}
#brdPop{
    max-height:calc(var(--lvh) * 90);
    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:calc(var(--lvh) * 90);
        overflow:hidden auto
    }
}
#tipPop{
    position:fixed;
    margin:0;
    padding:10px 12px
}
[name='rnick'],[name='mdnick']{
    font-weight:bold
}

.forgot{
    display:block;
    width:100%;
    text-align:right;
    cursor:pointer
}
/* 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%)
}

/* Force-landscape for touch devices (phones/tablets) held in portrait — this
   is a desktop-designed board layout with no portrait layout of its own, so
   rather than a broken squeezed-portrait render, rotate the whole page 90°
   to present it in landscape regardless of how the device is physically held.
   (pointer:coarse)+(hover:none) targets touch-primary devices specifically —
   a desktop browser window resized narrow still has a fine pointer/hover and
   is untouched, so this can't be triggered by just shrinking a window. */
@media screen and (orientation:portrait) and (pointer:coarse) and (hover:none){
    html{
        width:100vh;
        height:100vw;
        transform-origin:top left;
        transform:rotate(90deg) translateY(-100%);
        overflow-x:hidden;
    }
    .nav{
        .logo{
            display:none
        }
        .tab{
            margin-top:16px;
            & > div{
                height:60px;
                flex-shrink:0
            }
        }
    }
    [data-pan]{
        .top-bar,.bottom-bar{
            display:none
        }
    }
    dialog{
        &::backdrop{
            background-color:rgba(0,0,0,.4);
            backdrop-filter:blur(1px)
        }
    }
    /* Native dialog/popover elements are promoted to the top layer, which
       escapes the html rotation transform above entirely (the same reason
       #chatPop needed its own hand-positioned mobile override in
       chat/style.css instead of inheriting the rotation) — left alone, every
       OTHER dialog (login, register, messages, board pickers, etc.) renders
       in the true physical portrait orientation while the rest of the page
       is rotated into landscape underneath it. Rotating the dialog itself
       around its own center matches its visual orientation to the rest of
       the rotated page — no translate compensation needed (unlike html's own
       corner-anchored rotation) since the UA already auto-centers a
       popover/dialog via its default inset:0;margin:auto. #chatPop
       and #brdPop are excluded — they each position themselves directly in
       the rotated logical space (left/--lvh/--lvw, see below and
       chat/style.css) rather than via this auto-center rotate trick, so
       rotating them again would turn them sideways. #chatInvitePop is a
       plain (non-popover) dialog nested inside #chatPop's own already-correct
       coordinate space (see CLAUDE.md Chat notes) and is excluded by the
       [popover] attribute selector below for the same reason. */
    dialog[popover]:not(#chatPop):not(#brdPop){
        transform:rotate(90deg)
    }
    /* #brdPop (board picker) anchors between the two nav bars and spans the full
       logical height, same recipe as #chatPop's own mobile override (chat/style.css)
       and for the same reason: as a top-layer element it's not an auto-centered
       content box once given explicit left/width/height, so the plain rotate-in-place
       trick above doesn't apply — width/height are sized in the pre-rotation logical
       frame (--lvw/--lvh) and transform-origin is pulled back -72px to pivot around
       the same true-viewport (0,0) point html itself rotates around. */
    #brdPop{
        left:72px;
        right:auto;
        top:0;
        bottom:auto;
        width:calc(var(--lvw) * 100 - 144px);
        height:calc(var(--lvh) * 100);
        max-height:calc(var(--lvh) * 100);
        transform-origin:-72px 0;
        &:popover-open{
            transform:rotate(90deg) translateY(-100%)
        }
    }
}