*{box-sizing:border-box;margin:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;pointer-events:none}
:root{--b:#0a5cff;--d:#0044bb;--ln:#0848cc;--y:#ffc107;--ink:#0a1a4a;--o:#ff9a1f;--c:#2fb5ff}
html,body{height:100%;width:100%;overflow-x:hidden;background:var(--b);color:#fff;font-family:'Baloo Bhaijaan 2',Tahoma,sans-serif;overflow:hidden}
html,body{touch-action:pan-x pan-y}
body{position:fixed;inset:0}
#gi:disabled{opacity:.45}
[hidden]{display:none!important}
button{font:inherit}
.yb{cursor:pointer;background:var(--y);color:var(--ink);border:3px solid var(--ink);border-radius:14px;box-shadow:inset 0 -5px 0 #f29a00,0 0 0 5px rgba(255,255,255,.12);font-weight:800}
.yb:active{transform:translateY(2px)}
.yb:disabled{opacity:.5;cursor:default}
.yb svg{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
input.t{width:100%;padding:10px 14px;font:inherit;font-size:18px;color:#fff;background:transparent;border:3px solid #a9c8ff;border-radius:14px;outline:0}
input.t:focus{border-color:#fff}
input.t::placeholder{color:#9cbcf5}
.bg{position:absolute;top:-8px;right:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#ff3b30;color:#fff;border:2px solid #fff;font-size:13px;display:grid;place-items:center}

#login{height:100%;display:grid;place-items:center;padding:16px}
.card{width:min(360px,100%);background:var(--d);border:3px solid var(--ink);border-radius:22px;padding:22px;display:grid;gap:14px;justify-items:center;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.card{position:relative}
#gbtn{position:absolute;top:10px;right:10px;width:40px;height:40px;padding:0;border-radius:50%;border:2px solid var(--ink);background:#fff;display:grid;place-items:center;cursor:pointer;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.3)}
#gbtn svg{width:22px;height:22px}
#gbtn img{width:100%;height:100%;object-fit:cover}
#gbtn.on{border-color:var(--y)}
#gbtn:disabled{opacity:.6}
.card h1{font-size:36px;font-weight:800}
#pick{width:112px;height:112px;border-radius:50%;border:3px solid #9cc3ff;background:rgba(255,255,255,.08);position:relative;overflow:hidden;display:grid;place-items:center}
#shuf{width:42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;margin-top:-4px}
#shuf svg{width:24px;height:24px}
#shuf:disabled{opacity:.5}
#pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#go{width:100%;height:50px;font-size:20px}
#err{color:#ffd54f;min-height:22px;font-size:15px;text-align:center}

#game{position:fixed;z-index:10;left:0;top:0;width:100%;display:grid;direction:ltr;height:100dvh;grid-template-columns:clamp(96px,19%,190px) minmax(0,1fr);grid-template-rows:1fr auto auto auto auto;row-gap:8px}
#list{grid-column:1;grid-row:1/-1;min-height:0;overflow-y:auto;scrollbar-width:none}
#list::-webkit-scrollbar{display:none}
.row{display:flex;align-items:center;gap:7px;padding:0 6px;border-bottom:2px solid var(--ln);height:calc(100dvh/7)}
.av{position:relative;flex:none;height:70%;max-height:46px;aspect-ratio:1;border-radius:50%;border:3px solid #1f7bff;display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.av.me{border-color:var(--y)}
.you{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--y);color:var(--ink);font-size:10px;font-weight:800;line-height:1;padding:2px 6px;border-radius:8px;text-decoration:none;white-space:nowrap;border:1.5px solid var(--ink)}
.av.ph{background:transparent;border-color:var(--c)}
.nm{min-width:0;line-height:1.15;display:grid}
.nm b{font-size:clamp(12px,2.2vw,17px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm small{font-size:clamp(10px,1.7vw,14px);font-weight:800}
#list .tn{font-style:normal;font-weight:600;font-size:clamp(9px,1.5vw,12px);color:var(--y);white-space:nowrap}
.row.empty .nm b{color:var(--c);font-weight:400}
.bd{position:absolute;right:-6px;bottom:-4px;font-size:11px;background:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-style:normal;border:2px solid var(--c);color:#1a9c3c;font-weight:800}

.row:not(.empty){cursor:pointer}
.m .a,.m small,.aw{cursor:pointer}
.aw{display:block;flex:none}
#prof{position:fixed;inset:0;z-index:1500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;background:rgba(2,28,115,.94)}
#prof h2{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:32px;font-weight:800;color:var(--y);text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),0 4px 0 var(--ink)}
#prof .cl{position:absolute;top:10px;right:14px;background:none;border:0;color:#fff;font-size:34px;font-weight:800;cursor:pointer;line-height:1}
#pw{position:relative;width:min(58vw,260px);aspect-ratio:1;display:grid;place-items:center;margin-bottom:6px}
#pw::before{content:"";position:absolute;inset:-48%;background:repeating-conic-gradient(rgba(47,181,255,.32) 0 10deg,transparent 10deg 30deg);-webkit-mask:radial-gradient(circle,#000 24%,transparent 66%);mask:radial-gradient(circle,#000 24%,transparent 66%)}
.pf{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;border:8px solid #14b8ff;box-shadow:0 0 0 4px var(--ink),inset 0 0 0 4px var(--ink);display:grid;place-items:center;font-size:90px;font-weight:800;color:#fff}
#pnm{font-size:30px;max-width:92%;text-align:center;overflow-wrap:anywhere}
#pmute{position:relative;width:min(88%,340px);height:64px;border-radius:32px;font-size:26px;display:flex;align-items:center;justify-content:center;padding:0 16px}
#pmute svg{position:absolute;left:16px;width:34px;height:34px}
.bd.ck{background:none;border:0;color:#2ee66b;font-size:13px;font-weight:900;line-height:1;width:auto;height:auto;right:-4px;bottom:-4px;text-shadow:0 0 2px var(--ink),0 0 2px var(--ink),0 1px 1px #000}
.bd.pe{background:none;border:0;width:auto;height:auto;font-size:15px;line-height:1;right:-7px;bottom:-5px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
#ev{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:5;pointer-events:none;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;font-weight:800;font-size:clamp(13px,3vw,18px);text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}
#ev.ok{color:#12a53b}#ev.bad{color:#e0352b}#ev.near{color:#f08a00}
#bx{position:absolute;top:4px;right:4px;z-index:6;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
#bx svg{width:26px;height:26px;fill:none}
main{display:contents;direction:rtl}
#board{grid-column:2;grid-row:1;margin:8px 8px 0 4px}
#bar{grid-column:2;grid-row:2;margin:0 8px 0 4px}
#btns{grid-column:2;grid-row:3;margin:0 8px 0 4px}
#ans{grid-column:2;grid-row:4;margin:0 8px 0 4px}
#gi{grid-column:2;grid-row:5;margin:0 14px 8px 4px;width:auto;min-width:0;padding:6px 12px;font-size:16px;border-width:2px;border-radius:12px}
#board{position:relative;background:#fff;border-radius:14px;overflow:hidden;flex:1;min-height:0}
#board canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);touch-action:none}
#cv{background:#fff}
body.draw #board{background:var(--d)}
#pc,#gc{pointer-events:none}
#st{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;max-width:88%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 28px;text-align:center;background:linear-gradient(180deg,#1668ff,#0044bb);border:3px solid var(--ink);border-radius:20px;box-shadow:0 8px 24px rgba(4,28,110,.45),inset 0 2px 0 rgba(255,255,255,.25);color:#fff;font-weight:800}
#st .t1{font-size:clamp(18px,4.4vw,30px);line-height:1.3}
#st .who{color:var(--y)}
#st.pl{background:none;border:0;box-shadow:none;padding:0;gap:6px}
#st.pl .pa{width:clamp(64px,18vw,104px);height:clamp(64px,18vw,104px);border:4px solid var(--ink)}
#st.pl .t1{color:var(--ink)}
#st.pl .who{color:var(--b)}
#st .t2{font-size:clamp(15px,3.4vw,24px);color:#cfe0ff}
#st .t2 b{color:var(--y);font-size:1.15em}
#st .dots{display:flex;gap:7px}
#st .dots b{width:10px;height:10px;border-radius:50%;background:var(--y);animation:bn 1s infinite ease-in-out}
#st .dots b:nth-child(2){animation-delay:.15s}#st .dots b:nth-child(3){animation-delay:.3s}
@keyframes bn{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-7px);opacity:1}}
.cup{position:absolute;z-index:2;bottom:-10px;left:-9px;width:24px;height:24px;line-height:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.cup svg{width:100%;height:100%}
#st.win{left:0;top:0;transform:none;width:100%;height:100%;max-width:100%;border:0;border-radius:0;justify-content:center;padding:clamp(34px,9vw,64px) 8px 44px;background:radial-gradient(circle at 50% 35%,#1668ff,#032f8f)}
.pod{direction:ltr;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;width:100%;gap:6px}
.slot{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;max-width:100%}
.s1{grid-column:2;grid-row:1;margin-bottom:clamp(16px,6vw,48px)}.s2{grid-column:3;grid-row:1}.s3{grid-column:1;grid-row:1}
.pa{width:clamp(34px,8.5vw,56px);height:clamp(34px,8.5vw,56px);border-radius:50%;object-fit:cover;display:grid;place-items:center;font-weight:800;color:#fff;border:3px solid #cfe0ff}
.s1 .pa{width:clamp(46px,12vw,80px);height:clamp(46px,12vw,80px);border-color:var(--y)}
.crown{position:relative;display:grid;place-items:center}
.crown .lw{position:absolute;left:-80%;top:-80%;width:260%;height:260%;overflow:visible;pointer-events:none;animation:lwin .6s ease-out both}
.crown .pa{position:relative;z-index:1;box-shadow:0 0 0 3px var(--ink)}
.slot .pn,.slot .pp{position:relative;z-index:2}
@keyframes lwin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.pn{font-size:clamp(12px,2.8vw,20px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp{font-size:clamp(10px,2.2vw,15px);color:#a9b4cf;font-weight:600}
#st .winner{position:absolute;bottom:10px;left:0;right:0;font-size:clamp(17px,4.2vw,30px)}
#st .winner b{color:var(--y)}
.gain{margin-inline-start:6px;color:#5dff7a;font-weight:800;animation:gp .25s ease-out}
@keyframes gp{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
#top{direction:rtl;position:absolute;top:6px;left:0;right:0;text-align:center;z-index:3;color:var(--ink);font-weight:800;letter-spacing:2px;font-size:clamp(16px,3vw,26px);pointer-events:none}
#top span{display:inline-block;min-width:.55em;margin:0 .12em;line-height:1.3}
#top .hl{border-bottom:3px solid var(--ink)}
#top .h2{color:#e8281a;border-bottom-color:#e8281a}
#bar{direction:ltr;height:16px;background:#032f8f;border-radius:10px;border:2px solid var(--ink);overflow:hidden;flex:none}
#fill{height:100%;width:0;background:var(--o);border-radius:8px}
#btns{display:flex;gap:12px;flex:none;padding:0 4px}
#btns .yb{flex:1;height:48px;position:relative;display:flex;align-items:center;justify-content:center}
#ans{flex:none;height:clamp(64px,14dvh,110px);overflow-y:auto;scrollbar-width:none;background:var(--d);border:3px solid #2e6fe6;border-radius:14px;padding:8px 12px;font-size:clamp(14px,2.6vw,20px);line-height:1.5}
#ans::-webkit-scrollbar,#msgs::-webkit-scrollbar{display:none}
#ans .sep{height:0;border-top:2px dashed rgba(255,255,255,.4);margin:6px 0}
.bad{color:#ff5a4f;font-weight:800}.ok{color:#7dffa0;font-weight:800}.sys{color:#ffd54f}.wrong b{color:#8fd0ff;font-weight:800}

#fsb{display:none;position:fixed;inset:0;background:var(--b);z-index:9}
@media (orientation:landscape){
body.draw #fsb{display:block}
body.draw #board{position:fixed;left:0;top:0;right:0;bottom:128px;margin:0;border-radius:0;z-index:10}
body.draw #bar{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:0;border-width:0;height:14px;z-index:11}
}
#dt{display:none;position:fixed;left:0;right:0;bottom:14px;height:114px;z-index:11;gap:12px;padding:4px 10px;align-items:center;direction:ltr;background:var(--d);border-top:3px solid var(--ink)}
body.draw #dt{display:flex}
#dt .yb{width:60px;height:60px;display:grid;place-items:center;padding:0;position:relative;flex:none}
.dw{position:relative;flex:none}
.pop{position:absolute;bottom:calc(100% + 14px);left:0;background:var(--d);border:3px solid var(--ink);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:8px;z-index:30}
.pop label{display:flex;align-items:center;gap:8px}
.pop input{width:170px}
#cols{flex:none;display:grid;grid-template-rows:repeat(2,26px);grid-auto-flow:column;gap:3px;background:rgba(0,0,0,.2);padding:6px;border-radius:12px}
.sw{width:26px;height:26px;border-radius:6px;border:2px solid var(--ink);cursor:pointer;padding:0}
.sw.on{outline:3px solid #fff}
#pickm{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(4,28,110,.65)}
#pickm p{font-size:28px;font-weight:800}
#opts{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
#opts .yb{padding:14px 30px;font-size:30px}

#cfm{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(4,28,110,.7)}
#cfm .card{text-align:center}
#cq{font-size:22px;font-weight:800}
#cfm .two{display:flex;gap:12px;width:100%}
#cfm .two .yb{flex:1;height:46px;font-size:20px}
#off{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(4,28,110,.8);font-size:20px;font-weight:800}
#off svg{width:84px;height:84px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:flip 2s ease-in-out infinite}
#off .sand{fill:var(--y);stroke:none}
@keyframes flip{0%,60%{transform:rotate(0)}100%{transform:rotate(180deg)}}

#chat{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;gap:10px;padding:12px;background:rgba(4,28,110,.9);contain:layout paint;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
#ci{transition:transform .15s;will-change:transform}
#chat header{display:flex;justify-content:space-between;align-items:center;font-size:22px;font-weight:800}
#cx{width:42px;height:42px;font-size:20px}
#msgs{flex:1;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:8px;font-size:clamp(16px,3vw,22px);text-shadow:0 1px 4px rgba(0,0,0,.6);overscroll-behavior:contain}
#msgs{direction:ltr}
#msgs>:first-child{margin-top:auto}
#msgs>.sys{align-self:center}
.m{display:flex;gap:8px;align-items:flex-start;max-width:88%;align-self:flex-start;text-shadow:none}
.m.me{align-self:flex-end;flex-direction:row-reverse}
.m .a{width:38px;height:38px;border-radius:50%;object-fit:cover;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:800;flex:none}
.m .c{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start}
.m.me .c{align-items:flex-end}
.m .t{background:rgba(236,236,240,.95);color:#16204a;border-radius:14px;padding:6px 12px;overflow-wrap:anywhere;font-size:.85em}
.m small{font-size:.62em;font-weight:800;color:#cfe0ff;padding:0 6px;text-shadow:0 1px 3px rgba(0,0,0,.6)}

@media (orientation:portrait){
#game{grid-template-columns:36% minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto}
#board{grid-column:1/-1;grid-row:1;margin:0;border-radius:0;aspect-ratio:12/7;align-self:start;width:100%}
#bar{grid-column:1/-1;margin:0 8px}
#list{grid-column:1;grid-row:3/-1}
.row{height:max(48px,calc((100dvh - 58.4vw - 46px)/7))}
#ans{height:auto;min-height:0}
body.kb:not(.draw) #list,body.kb:not(.draw) #btns{display:none}
body.kb:not(.draw) #gi{grid-column:1/-1;grid-row:4;align-self:end;margin:0 8px 8px;padding:3px 10px;font-size:16px;line-height:1.2;height:38px}
body.kb:not(.draw) #ans{display:none}
body.kb:not(.draw) #bar{grid-column:1/-1;grid-row:1;align-self:end;margin:0 8px;height:12px;position:relative;z-index:5;transform:translateY(100%)}
body.kb #ev{bottom:24px}
body.draw #list,body.draw #btns,body.draw #gi,body.draw #ans{display:none}
body.draw #fsb{display:block}
body.draw #board{position:fixed;left:0;top:0;width:100%;height:calc(100dvh - 150px);aspect-ratio:auto;margin:0;border-radius:0;z-index:999}
body.draw #bar{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:0;border-width:0;height:12px;z-index:1000}
body.draw #dt{position:fixed;left:0;right:0;bottom:12px;height:138px;flex-wrap:wrap;align-content:center;justify-content:center;gap:6px 8px;padding:0 6px;z-index:1000}
body.draw #dt .yb{width:46px;height:46px}
}