/* Storm skin: layout and assets adapted from design2.taskking.shop. */
:root{
--lime:#aeed38;
--text:#eef6e9;
--muted:#9bb5a6;
--font:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
color-scheme:dark
}

[hidden]{
display:none!important
}
*{
scrollbar-width:thin;
scrollbar-color:#456953 transparent
}
body{
background:#101c16;
font-family:var(--font)
}
button,input,select{
font:inherit
}
button{
min-height:44px;
touch-action:manipulation
}
button:disabled{
opacity:.38;
cursor:not-allowed
}
button:focus-visible,summary:focus-visible{
outline:2px solid var(--lime);
outline-offset:3px
}
button:active{
transform:translateY(1px)
}
input,select{
min-height:44px;
font-size:16px
}
button,.card,.avatar{
transition:background .18s,box-shadow .18s,opacity .18s
}
body .screen.device{
width:min(100vw,480px);
height:100dvh;
min-height:560px;
max-height:none;
border:0;
border-radius:0;
box-shadow:0 16px 100px #0005;
background:#0d2118;
overflow:hidden
}
.screen.device.hidden{
display:none!important
}

@media(min-width:700px){
body{
display:grid;
place-items:center;
min-height:100dvh;
background:radial-gradient(ellipse at 50% 40%,#264337,#101812 70%)
}
body .screen.device{
height:min(960px,96dvh);
border:1px solid #49624655;
border-radius:26px
}

}

.enter,.primary{
background:var(--lime);
box-shadow:none;
color:#22360b;
border-radius:12px;
height:48px;
min-height:44px;
font-size:14px
}
.secondary{
border:1px solid #67836766;
background:#234534;
color:#e8f4df;
min-height:44px;
border-radius:12px;
padding:10px 16px
}
.ghost{
border-color:#64846a50;
border-radius:12px;
min-height:44px
}
.danger{
background:#59382f;
color:#ffccbc;
border:1px solid #c8816140;
border-radius:12px
}
.lobby-header{
display:flex;
align-items:center;
gap:12px;
padding:24px 24px 16px;
border-bottom:1px solid #68836b25
}
.lobby-header img{
width:42px;
height:42px
}
.lobby-header h1{
font-size:22px;
margin:3px 0 0
}
.lobby-header small{
font-size:9px;
letter-spacing:2px;
color:#a7c09c
}
.live-label{
font-size:10px;
color:#bcdbb7;
white-space:nowrap
}
.lobby-header .live-label{
margin-left:auto
}
.live-label i{
display:inline-block;
width:5px;
height:5px;
border-radius:50%;
background:#a9e33b;
margin-right:5px
}
.lobby .page-scroll{
padding:18px 24px 30px
}
.who{
padding:0;
background:none;
border:0;
color:#afc3ac;
font-weight:400
}
.welcome{
position:relative;
overflow:hidden;
padding:28px 0 30px;
border-bottom:1px solid #68836b40
}
.welcome h2{
font-size:28px;
letter-spacing:-1px;
margin:12px 0
}
.welcome p{
font-size:12px;
color:#a3b49d;
position:relative;
z-index:1
}
.eyebrow{
font-size:8px;
letter-spacing:2px;
color:#a1bb78
}
.welcome-suit{
position:absolute;
right:0;
top:-5px;
font-size:160px;
line-height:1;
transform:rotate(-14deg);
color:#79ae3820;
pointer-events:none
}
.section-label{
display:flex;
justify-content:space-between;
align-items:center;
font-size:12px;
font-weight:600;
color:#b2c3a8;
margin:22px 0 14px
}
.section-label span{
font-size:8px;
letter-spacing:1px;
color:#829277
}
.create-settings{
border:1px solid #66805840;
border-radius:12px;
background:#8aaf6310
}
.create-settings summary{
padding:17px 14px;
cursor:pointer;
font-size:13px
}
.create-settings summary span{
float:right;
font-size:10px;
color:#9cad8c
}
.create-settings .bot-opts{
border:0;
background:none;
padding-top:0
}
.create-settings .bot-title{
display:none
}
.lobby-links{
display:flex;
gap:8px;
flex-wrap:wrap
}
.lobby-links .ghost{
width:auto;
flex:1;
font-size:12px;
white-space:nowrap
}
.foot-tip{
font-size:10px;
color:#8ca18d
}
.field-label{
font-size:11px;
font-weight:400
}
.join-row input{
min-width:0;
letter-spacing:2px
}
.landing{
overflow-y:auto!important
}
.landing-top{
flex-shrink:0
}
.landing-visual{
min-height:170px;
max-height:270px
}
.landing-copy h1{
font-size:25px
}
.landing-copy{
padding:0 20px
}
.landing .lobby-card{
margin-bottom:24px;
box-shadow:none
}
.appbar{
background:#163324
}
.page .page-scroll{
padding-bottom:32px
}
.admin-sec .row{
flex-wrap:wrap
}
.acct-body{
overflow-x:auto
}

/* Full-height table;
 only real game data is presented. */
#game.game{
background:#095740
}
.table-header{
height:66px;
flex:0 0 66px;
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 14px 4px;
gap:5px;
padding-top:max(10px,env(safe-area-inset-top));
z-index:5;
background:linear-gradient(#073e30,#08533d)
}
.table-pill{
display:flex;
align-items:center;
gap:7px;
border:1px solid #79a48122;
background:#062e26b5;
color:#d7e8d9;
padding:0 13px;
border-radius:24px;
font-size:18px
}
.table-pill span{
font-size:11px
}
.room-heading{
border:0;
background:none;
color:#e2f2d9;
text-align:center;
padding:4px 0;
min-width:0;
font-size:11px
}
.room-heading b{
font-weight:600;
letter-spacing:1px
}
.room-heading small{
display:block;
margin-top:5px;
color:#aec5aa;
font-size:10px
}
.game .table-wrap{
flex:1;
min-height:320px;
overflow:hidden;
background:#07513c url('assets/v3/table-felt.svg') center/100% 100%
}
.game .table{
inset:0 8px 0;
border:0;
border-radius:46%;
background:none;
box-shadow:none
}
.game .felt-line{
inset:3% 5% 4%;
border:1px solid #78b89125;
border-radius:48%;
box-shadow:0 0 0 9px #063e3030;
pointer-events:none
}
.felt-brand{
position:absolute;
left:0;
right:0;
top:20%;
text-align:center;
font-size:23px;
font-weight:800;
letter-spacing:8px;
color:#c4e4c310;
pointer-events:none
}
.felt-brand span{
display:block;
font-size:8px;
letter-spacing:9px;
margin-top:3px
}
.game .pot-center{
top:38%;
left:50%;
transform:translate(-50%,-20%);
width:65%;
z-index:2
}
.game .pot{
background:none;
border:0;
min-height:30px;
border-radius:0;
min-width:0;
display:flex;
flex-direction:row;
gap:7px;
font-size:14px;
color:#dcf6d7
}
.game .pot span{
font-size:11px;
letter-spacing:1px;
color:#bbe0c6
}
.game .pot strong{
font-size:18px;
line-height:1
}
.game .board{
display:flex;
justify-content:center;
gap:4px;
margin:10px 0
}
.game .board .card{
width:clamp(32px,9vw,44px);
height:clamp(46px,13vw,62px);
flex-shrink:0
}
.game .board .card.back{
background:#a3d6bc0a;
border:1px solid #b8e5c929;
box-shadow:none
}
.game .board .card.back:after{
display:none
}
.game .stage-label{
font-size:10px;
line-height:1.5;
color:#c0d6b9;
margin-top:6px
}
.table-rule{
font-size:9px;
color:#91baa0;
margin-top:5px;
letter-spacing:.4px
}

.game .seat{
position:absolute;
width:72px;
min-height:0;
transform:translate(-50%,-50%);
text-align:center;
z-index:3;
padding:0
}
.game .seat .avatar{
display:block;
margin:0 auto;
width:44px;
height:44px;
border-radius:50%;
border:2px solid #104734;
background:#143f32;
box-shadow:0 2px 6px #022d2680;
background-size:cover;
background-position:center;
position:relative
}
.game .seat.mine .avatar{
width:44px;
height:44px;
border-color:#9dbb76
}
.game .seat.to-act .avatar{
border-color:#d5ec77;
box-shadow:0 0 0 3px #d5ec7730;
animation:activeSeat 1.8s ease-in-out infinite
}
.game .seat .seat-plate{
background:#073d2deb;
border-radius:4px;
max-width:78px;
margin:-1px auto 0;
padding:3px 2px;
border:1px solid #59967920;
position:relative
}
.game .seat .name{
font-size:10px;
line-height:13px;
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-weight:400;
color:#d1e5ca;
max-width:none;
text-shadow:none
}
.game .seat .chips{
font-size:11px;
line-height:14px;
color:#e4eecc;
font-variant-numeric:tabular-nums
}
.game .seat .rebuy-tag{
display:none
}
.game .seat .bet{
position:absolute;
left:50%;
top:-23px;
transform:translateX(-50%);
font-size:9px;
white-space:nowrap;
background:#b7d4af;
color:#133b24;
line-height:16px;
min-height:0;
min-width:0;
border-radius:4px;
padding:0 5px;
margin:0
}
.game .seat .bet:empty{
display:none
}
.game .seat .handname{
font-size:9px;
color:#dbe885;
margin:2px 0 0;
min-height:0
}
.game .seat .cards{
display:flex;
justify-content:center;
gap:2px;
margin-top:3px;
position:static
}
.game .seat.no-cards .cards{
display:none
}
.game .seat .cards .card,.game .seat .cards .card.small{
width:15px;
height:21px;
border-radius:3px
}
.game .seat.showdown .cards .card{
width:25px;
height:35px
}
.game .seat.mine .cards .card,.game .seat.mine .cards .card.big{
width:34px;
height:47px
}
.game .seat.mine .cards{
gap:4px
}
.game .seat.folded{
opacity:.5;
filter:none
}
.game .seat.button:after{
content:'D';
position:absolute;
left:calc(50% + 15px);
top:22px;
background:#e9d58d;
color:#27412d;
width:17px;
height:17px;
line-height:17px;
border-radius:50%;
font-size:10px;
border:1px solid #f1e9b7;
box-shadow:none
}
.game .seat .tag{
display:none
}
.game .seat .threat-badge{
display:none
}
.game .card{
border:0;
border-radius:4px;
background:linear-gradient(110deg,#fffef1,#e8eddf);
box-shadow:0 2px 4px #032c2650;
color:#173c2b
}
.game .card.red{
color:#c52c46
}
.game .card.back{
background:#71303b url('assets/card-back.svg') center/cover;
border:1px solid #d4979b80
}
.game .card.back:after{
display:none
}
.game .card .c-idx{
font-size:10px
}
.game .card .c-idx.br{
display:none
}
.game .card .c-suit{
font-size:20px;
position:absolute;
right:4px;
bottom:5px
}
.game .seat .card.small .c-idx{
font-size:6px
}
.game .seat .card.small .c-suit{
font-size:10px;
right:2px;
bottom:2px
}
.game .seat.mine .card .c-idx{
font-size:12px
}
.court-art{
position:absolute;
right:1px;
bottom:1px;
height:75%;
width:65%;
opacity:.85
}
.card:has(.court-art) .c-suit{
display:none
}
.card .c-idx{
z-index:1
}
.four-color .card[data-suit="2"]{
color:#2979c1
}
.four-color .card[data-suit="3"]{
color:#168854
}

.table-tools{
position:absolute;
bottom:3px;
left:12px;
right:12px;
display:flex;
gap:4px;
pointer-events:none;
z-index:4
}
.tool-button{
pointer-events:auto;
width:44px;
height:44px;
border:0;
background:#073b2a60;
color:#bad3ad;
border-radius:50%;
font-size:23px
}
.table-tools #rebuyBtn{
margin-left:auto
}
.table-tools #logsOpen{
margin-left:2px
}
.game .action-bar{
flex-shrink:0;
background:#103d2d;
padding:4px 12px max(10px,env(safe-area-inset-bottom));
border-top:1px solid #79a46b30;
max-height:42dvh;
overflow-y:auto
}
.game .turn-info{
font-size:11px;
line-height:16px;
min-height:20px;
text-align:center;
padding:2px 0 4px;
color:#cfdfc3;
margin:0
}
.game .turn-info .summary{
max-height:100px;
overflow-y:auto
}
.game .controls{
display:flex;
gap:6px;
margin:0
}
.game .controls .act{
flex:1;
width:0;
min-width:0;
height:49px;
min-height:44px;
border-radius:8px;
border:1px solid #7b916a50;
font-size:14px;
font-weight:500;
box-shadow:none;
margin:0;
padding:0 3px;
line-height:1.2
}
.game .controls .fold{
background:#465044;
color:#e2e8dc
}
.game .controls .check,.game .controls .call{
background:#427047;
color:#eef4d9
}
.game .controls .bet{
background:#a4d831;
color:#263c0e;
border-color:#a4d831
}
.bet-presets{
display:flex;
gap:5px;
margin:3px 0 7px
}
.bet-presets .chip{
height:36px;
min-height:36px;
flex:1;
border-radius:6px;
background:#194e35;
border:1px solid #62966140;
color:#cbe1bf;
font-size:11px;
padding:4px
}
.game .waiting-actions{
display:flex;
gap:8px;
margin:0 0 6px
}
.waiting-actions button{
flex:1;
width:0;
margin:0;
height:44px
}
.game #quickHostControls{
display:none!important
}
.game .reveal-bar{
display:flex;
flex-wrap:wrap;
justify-content:center;
overflow:visible;
padding:4px;
gap:5px;
margin:0
}
.reveal-tip{
font-size:11px
}
.reveal-btns{
display:flex;
gap:6px
}
.reveal-btns button{
background:#234a37;
border:1px solid #658358;
border-radius:8px;
padding:0 20px;
color:#dfebcd
}
.game .action-bar[data-idle="true"] .controls,.game .action-bar[data-idle="true"] .bet-presets{
display:none
}

/* Native dialog provides keyboard focus trap, Escape, and a true modal backdrop. */
.table-dialog{
position:fixed;
inset:auto 0 0;
margin:0 auto;
width:min(100%,480px);
max-width:480px;
max-height:min(84dvh,760px);
padding:0;
border:1px solid #6b89563d;
border-bottom:0;
border-radius:24px 24px 0 0;
background:#142d20;
color:#edf3e1;
box-shadow:0 -15px 70px #001e1ca0;
overflow:hidden
}
.table-dialog[open]{
display:flex;
flex-direction:column;
animation:sheetIn .2s ease-out
}
.table-dialog::backdrop{
background:#00150fa0;
backdrop-filter:blur(3px)
}
.sheet-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 12px;
border-bottom:1px solid #5c795540;
flex-shrink:0
}
.sheet-head h2{
font-size:15px;
font-weight:600;
margin:0
}
.sheet-head .icon-btn{
border:0;
background:none;
color:#d6e2c6;
width:44px;
height:44px;
border-radius:50%;
font-size:26px
}
.sheet-body{
padding:18px 20px max(24px,env(safe-area-inset-bottom));
overflow-y:auto;
overscroll-behavior:contain
}
.sheet-profile{
display:flex;
align-items:center;
gap:10px;
margin-bottom:20px
}
.sheet-profile img{
width:42px;
height:42px;
border-radius:50%
}
.sheet-profile small{
display:block;
font-size:10px;
color:#98b08c;
margin-top:4px
}
.sheet-profile .live-label{
margin-left:auto
}
.menu-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px
}
.menu-grid button{
border:0;
background:#24442d;
border-radius:12px;
color:#b6d591;
min-height:74px;
font-size:23px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:7px
}
.menu-grid button span{
font-size:10px;
color:#dde7d0
}
.table-dialog #hostBar{
display:grid;
grid-template-columns:1fr 1fr;
overflow:visible;
gap:8px;
margin:0;
padding:0
}
.table-dialog #hostBar button{
height:auto;
min-height:44px;
margin:0;
white-space:normal;
padding:10px 6px;
border-radius:10px;
font-size:12px;
display:block;
width:100%
}
.menu-footer{
display:flex;
gap:8px;
border-top:1px solid #77926430;
margin-top:20px;
padding-top:16px
}
.menu-footer button{
flex:1;
width:0;
margin:0
}
.panel-note{
font-size:12px;
color:#a7bb9a;
line-height:1.7
}
.room-details{
margin:0
}
.room-details>div{
display:flex;
gap:20px;
justify-content:space-between;
padding:13px 0;
border-bottom:1px solid #77926426;
font-size:12px
}
.room-details dt{
color:#9ab78d
}
.room-details dd{
margin:0;
text-align:right;
overflow-wrap:anywhere
}
.share-code{
font-size:44px;
letter-spacing:10px;
text-align:center;
color:#c4e77e;
margin:25px 0;
font-weight:700
}
.sheet-actions,.bet-actions{
display:flex;
gap:8px;
margin-top:16px
}
.sheet-actions button,.bet-actions button{
flex:1;
margin:0
}
.table-dialog .betbox,body.my-turn .table-dialog .betbox{
display:block;
border:0;
background:none;
padding:0
}
.table-dialog .bet-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16px
}
.bet-head strong{
font-size:32px;
color:#c4e77e
}
.table-dialog input[type=range]{
accent-color:var(--lime);
padding:0;
border:0;
min-height:44px
}
.table-dialog .chips-row{
display:flex;
gap:5px;
margin-top:12px
}
.table-dialog .chip{
flex:1;
min-width:0;
min-height:44px;
color:#c9ddba;
border:1px solid #688d5044;
background:#27432b;
border-radius:8px;
font-size:11px
}
.table-dialog .coach-panel,.table-dialog .reads-panel,.table-dialog .log-panel{
padding:0;
background:none;
border:0
}
.table-dialog .coach-head{
flex-wrap:wrap;
gap:8px
}
.table-dialog .coach-select{
width:auto
}
.table-dialog .log-panel ul{
max-height:none;
font-size:12px
}
.table-dialog .log-panel li{
padding:9px 0;
border-bottom:1px solid #7f996630;
line-height:1.6
}
.setting-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 0;
font-size:14px;
color:#d7e5cb
}
.setting-row input{
width:22px;
height:22px;
min-height:22px;
accent-color:var(--lime)
}
#shareLink{
font-size:12px
}
#returnTable{
width:100%;
margin:18px 0 0
}
#uiToast{
z-index:10001;
max-width:calc(100vw - 32px);
font-size:12px
}
dialog #uiToast{
position:sticky;
bottom:0;
left:auto;
transform:none
}
#disconnect{
z-index:10002
}
.reveal-bar.hidden{
display:none!important
}

@keyframes activeSeat{
50%{
box-shadow:0 0 0 4px #d5ec7750
}

}
@keyframes sheetIn{
from{
opacity:.3;
transform:translateY(20px)
}
to{
opacity:1;
transform:translateY(0)
}

}

@media(max-width:359px){
.table-header{
padding-inline:8px
}
.table-pill{
padding:0 10px
}
.game .seat{
width:62px
}
.game .seat .avatar{
width:37px;
height:37px
}
.game .seat.mine .avatar{
width:37px;
height:37px
}
.game .seat .name{
font-size:9px
}
.game .seat .chips{
font-size:10px
}
.game .seat.mine .cards .card{
width:29px;
height:41px
}
.lobby-header{
padding-inline:16px
}
.lobby .page-scroll{
padding-inline:16px
}
.menu-grid{
gap:5px
}
.sheet-body{
padding-inline:14px
}

}

@media(max-height:700px){
.table-header{
height:55px;
flex-basis:55px
}
.game .table-wrap{
min-height:305px
}
.game .seat .avatar,.game .seat.mine .avatar{
width:35px;
height:35px
}
.game .seat .seat-plate{
padding:1px 2px
}
.game .seat.mine .cards .card{
width:29px;
height:39px
}
.game .seat .name{
line-height:11px
}
.game .seat .chips{
line-height:12px
}
.game .action-bar{
padding-top:2px
}
.game .controls .act{
height:44px
}
.game .board{
margin:6px 0
}
.game .board .card{
width:31px;
height:44px
}
.game .pot-center{
top:37%
}
.game .stage-label{
font-size:9px
}
.table-rule{
font-size:8px
}
.landing-visual{
min-height:120px
}
.landing .lobby-card{
padding:10px 14px
}
.landing-copy h1{
font-size:21px
}

}

.reduce-motion *, .reduce-motion *:before,.reduce-motion *:after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important
}
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important
}

}


@media(max-width:359px){
.game .board .card{
width:28px;
height:41px
}
.game .board{
gap:3px
}

}