/* VELO — design tokens and components.
   Modes: <html data-mode="light|dark"> (set by js/theme.js; dark is the no-JS default).
   Accent: the user's profile colour, written by js/theme.js as --vi / --vil / --vill / --acc-btn / --bl.
   Everything else is neutral. Rooms (.force-dark) always use the dark, immersive palette.
   Breakpoints (mobile first): phone 320+ (bottom nav) · tablet 768+ (icon rail, two-column panels)
   · laptop 1200+ (full sidebar, wider content) · desktop 1600+ (widest content, more grid columns).
   A few components add their own steps where their content needs it (600 for grids, 900 for the room side chat). */

/* ---------- tokens that don't change with mode ---------- */
:root{
--fd:'Outfit','Noto Sans Bengali','Noto Sans Arabic','Noto Sans Devanagari',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--fb:'Inter','Noto Sans Bengali','Noto Sans Arabic','Noto Sans Devanagari',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
/* fixed brand colours (gifts, coins, status). Text versions (--gol, --gnl…) are per mode below. */
--pk:#EC4899;--pk-rgb:236,72,153;--go:#F59E0B;--gn:#10B981;--rd:#EF4444;--red:#F43F5E;--blue:#3B82F6;
/* accent defaults (overwritten by theme.js) */
--vi:#7C5CFF;--vi-rgb:124,92,255;--vil:#967DFF;--vil-rgb:150,125,255;--vill:#E2DBFF;--acc-btn:#7758F5;--bl:#5B4FD0;--bl-rgb:91,79,208;--room-top:#150F2E;
--dk-vi:var(--vi);--dk-vil:var(--vil);--dk-vill:var(--vill);--dk-vi-rgb:var(--vi-rgb);--dk-vil-rgb:var(--vil-rgb);--dk-acc-btn:var(--acc-btn);--dk-bl:var(--bl);--dk-bl-rgb:var(--bl-rgb);--dk-room-top:var(--room-top);
--cta:linear-gradient(135deg,var(--acc-btn),var(--bl));--gft:linear-gradient(135deg,#EC4899,#9D4EDD);--coin:linear-gradient(135deg,#FCD34D,#F59E0B 55%,#D97706);
--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:28px;
--ease:cubic-bezier(.2,.8,.2,1);
}
/* ---------- dark ---------- */
:root,[data-mode=dark],.force-dark{color-scheme:dark;
--bg:#070B14;--bg2:#0D1525;--s1:#141E30;--s2:#1A2840;--s3:#1F3050;--line:#1E2D45;--line2:#243450;--line3:#34496B;
--t1:#F1F5FF;--t15:#CBD5E1;--t2:#94A3B8;--t3:#8190A8;
--gol:#FCD34D;--gnl:#6EE7B7;--rdl:#F87171;--pkl:#F9A8D4;--bll:#93C5FD;
--glass:rgba(20,30,48,.78);--glass2:rgba(7,11,20,.6);--scrim:rgba(4,6,12,.62);--navbg:rgba(10,16,30,.92);
--sh1:0 1px 2px rgba(0,0,0,.3);--sh2:0 10px 30px rgba(0,0,0,.35);--sh3:0 20px 50px rgba(0,0,0,.5);
--goldcard:linear-gradient(160deg,#2A1A08,#141E30 70%);--goldline:rgba(245,158,11,.3);
--pfcover:#12102A;--toastbg:#F1F5FF;--toastt:#070B14;--wash:rgba(var(--vi-rgb),.14);
}
/* ---------- light ---------- */
[data-mode=light]{color-scheme:light;
--bg:#F5F6FA;--bg2:#FFFFFF;--s1:#FFFFFF;--s2:#F1F3F8;--s3:#E6E9F0;--line:#E6E9F0;--line2:#DCE0E8;--line3:#C4CAD6;
--t1:#111827;--t15:#374151;--t2:#4B5563;--t3:#5F6B7D;
--gol:#A15C07;--gnl:#047857;--rdl:#C81E1E;--pkl:#BE185D;--bll:#1D4ED8;
--glass:rgba(255,255,255,.86);--glass2:rgba(255,255,255,.7);--scrim:rgba(15,23,42,.38);--navbg:rgba(255,255,255,.94);
--sh1:0 1px 2px rgba(15,23,42,.06);--sh2:0 8px 24px rgba(15,23,42,.08);--sh3:0 24px 60px rgba(15,23,42,.18);
--goldcard:linear-gradient(160deg,#FFF6E0,#FFFFFF 70%);--goldline:rgba(217,119,6,.28);
--pfcover:#EEEAFE;--toastbg:#111827;--toastt:#F9FAFB;--wash:rgba(var(--vi-rgb),.09);
}
/* immersive dark surfaces keep the accent tuned for dark */
.force-dark{--vi:var(--dk-vi);--vil:var(--dk-vil);--vill:var(--dk-vill);--vi-rgb:var(--dk-vi-rgb);--vil-rgb:var(--dk-vil-rgb);--acc-btn:var(--dk-acc-btn);--bl:var(--dk-bl);--bl-rgb:var(--dk-bl-rgb);--room-top:var(--dk-room-top);color:var(--t1)}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--t1);font:14px/1.45 var(--fb);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[data-mode=dark] body,body{background:radial-gradient(60% 50% at 15% 0%,rgba(var(--vi-rgb),.10),transparent 70%),var(--bg)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--vil);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:12px;background:var(--t1);color:var(--bg);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.ic{flex:none;display:block}
[dir=rtl] .flipx{transform:scaleX(-1)}
[hidden]{display:none!important}

/* shell */
.shell{position:relative;height:100dvh;margin:0 auto;overflow:hidden;overflow:clip;background:var(--bg);isolation:isolate}
@media (max-width:767px){.shell{height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}}
.demo-flag{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:50;font-size:10px;font-weight:700;letter-spacing:.08em;color:#3B1D02;background:#FCD34D;padding:2px 8px;border-radius:999px;pointer-events:none;opacity:.92}

#screen{position:absolute;inset:0;display:flex;flex-direction:column}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.pg{padding:20px 16px 28px;display:flex;flex-direction:column;gap:22px;width:100%;max-width:680px;margin-inline:auto}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.center{text-align:center}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h1{font:600 26px/32px var(--fd);letter-spacing:-.02em;margin:0;text-wrap:balance}
.h2{font:600 19px/24px var(--fd);margin:0}
.h3{font:600 17px/22px var(--fd);margin:0}
.muted{color:var(--t2);margin:0}
.cap{font-size:12px;color:var(--t3);margin:0}
.over{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--t3);text-transform:uppercase}
[lang=bn] .over,[lang=ar] .over,[lang=hi] .over,[lang=ur] .over{letter-spacing:0;font-size:12px}
[lang=ur] body{line-height:1.6}
.num{font-variant-numeric:tabular-nums}
.link{background:none;border:0;padding:0 4px;min-height:44px;color:var(--vil);font-weight:600;font-size:13px}
.topbar{display:flex;align-items:center;gap:10px;padding:16px 16px 8px;width:100%;max-width:680px;margin-inline:auto}
.topbar h1{margin:0;font:600 19px/24px var(--fd);flex:1;min-width:0}

.ibtn{width:44px;height:44px;flex:none;border-radius:14px;border:1px solid var(--line);background:var(--glass);display:grid;place-items:center;padding:0;color:var(--t1);position:relative}
.ibtn:hover{border-color:var(--line3)}
.dotb{position:absolute;top:6px;inset-inline-end:6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--pk);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg2)}
.btn{height:48px;padding:0 18px;border-radius:14px;border:1px solid var(--line2);background:var(--s1);font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--t1);white-space:nowrap;transition:transform .12s,background .15s,border-color .15s;text-decoration:none}
.btn:hover{border-color:var(--line3)}
.btn:active{transform:scale(.98)}
.btn.cta{border:0;background:var(--cta);color:#fff;box-shadow:0 6px 18px rgba(var(--vi-rgb),.28)}
.btn.gift{border:0;background:var(--gft);color:#fff;box-shadow:0 6px 16px rgba(var(--pk-rgb),.28)}
.btn.gold{border:0;background:linear-gradient(135deg,#FCD34D,#F59E0B);color:#3B1D02}
.btn.white{border:1px solid var(--line2);background:#fff;color:#111827}
.btn.danger{color:var(--rdl);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.btn.textred{background:transparent;border-color:transparent;color:var(--rdl);padding:0 10px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--vil)}
.btn.sm{height:36px;padding:0 14px;border-radius:12px;font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.btn.on{background:rgba(var(--vi-rgb),.14);border-color:rgba(var(--vil-rgb),.45);color:var(--vil);box-shadow:none}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.chips::-webkit-scrollbar{display:none}
.wrapchips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--s1);color:var(--t15);font-size:13px;font-weight:500;flex:none}
.chip.on{background:var(--t1);color:var(--bg);border-color:transparent;font-weight:600}
.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--s2)}
.seg button{flex:1;height:36px;border-radius:10px;border:0;background:transparent;color:var(--t2);font-size:13px;font-weight:500;position:relative;padding:0 6px}
.seg button[aria-checked=true],.seg button[aria-selected=true]{background:var(--s1);color:var(--t1);font-weight:600;box-shadow:var(--sh1)}
[data-mode=dark] .seg button[aria-checked=true],[data-mode=dark] .seg button[aria-selected=true]{background:var(--s3)}
.live{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;background:#E11D48;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;flex:none}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
.lv{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:6px;background:#2563EB;color:#fff;font-size:10px;font-weight:700;flex:none;line-height:1}
.lv.hi{background:linear-gradient(135deg,#7C3AED,#DB2777)}
.lv.gold{background:linear-gradient(135deg,#FCD34D,#F59E0B);color:#3B1D02}
.lv.new{background:rgba(16,185,129,.16);color:var(--gnl)}
.lv.red{background:var(--red)}.lv.blue{background:var(--blue)}
.coinpill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 6px;border-radius:999px;background:rgba(245,158,11,.1);border:1px solid var(--goldline);color:var(--gol);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;flex:none}
[dir=rtl] .coinpill{padding:0 6px 0 12px}
.coin{width:22px;height:22px;border-radius:50%;background:var(--coin);color:#5A3208;font:800 12px/1 var(--fd);display:inline-grid;place-items:center;flex:none}
.wm{font:700 21px/1 var(--fd);letter-spacing:.05em}

/* logo: soft rounded mark (see img/logo.svg). Size with --s. */
.logo{--s:32px;width:var(--s);height:var(--s);flex:none;display:block}
.logo svg{width:100%;height:100%;display:block}

/* avatars */
.av{--s:44px;width:var(--s);height:var(--s);border-radius:50%;background:var(--g);display:inline-grid;place-items:center;font:600 calc(var(--s)*.38)/1 var(--fd);color:#fff;flex:none;position:relative;box-shadow:0 0 0 3px var(--ring,var(--bg));transition:filter .2s,opacity .2s}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.av.speak{animation:bloom 1.1s ease-in-out infinite}
.av.mute{filter:saturate(.25);opacity:.6}
.av .b{position:absolute;display:grid;place-items:center;font-size:9px;font-weight:700;font-family:var(--fb);color:#fff;box-shadow:0 0 0 2px var(--ring,var(--bg))}
.av .mod{bottom:-6px;left:50%;transform:translateX(-50%);height:16px;padding:0 5px;border-radius:6px;background:#2563EB}
.av .mod.adm{background:linear-gradient(135deg,#0EA5E9,#1D4ED8)}
.av .crown{top:-12px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#FCD34D,#F59E0B);color:#5A3208}
.av .micb{bottom:-2px;inset-inline-end:-2px;width:22px;height:22px;border-radius:50%;background:var(--acc-btn)}
.av .micb.off{background:#3F1D2B;color:#F87171}
.av .on{bottom:1px;inset-inline-end:1px;width:12px;height:12px;border-radius:50%;background:var(--gn)}
.av.tA{box-shadow:0 0 0 3px var(--ring,var(--bg)),0 0 0 5px var(--red)}
.av.tB{box-shadow:0 0 0 3px var(--ring,var(--bg)),0 0 0 5px var(--blue)}
@keyframes bloom{0%,100%{box-shadow:0 0 0 3px var(--ring,var(--bg)),0 0 0 5px rgba(var(--vil-rgb),.9),0 0 16px 4px rgba(var(--vi-rgb),.4)}50%{box-shadow:0 0 0 3px var(--ring,var(--bg)),0 0 0 6px var(--vill),0 0 30px 10px rgba(var(--vi-rgb),.6)}}
@keyframes blink{50%{opacity:.35}}

/* cards & lists */
.card{padding:16px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line);box-shadow:var(--sh1)}
.banner{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;border-radius:var(--r-md);background:var(--wash);border:1px solid rgba(var(--vil-rgb),.25);font-size:13.5px;line-height:1.45}
.banner .ic{color:var(--vil);margin-top:1px}
.stack{display:flex;align-items:center}
.stack .av+.av{margin-inline-start:-8px}
.rrow{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line);width:100%;text-align:start;color:var(--t1);box-shadow:var(--sh1);transition:border-color .15s}
.rrow:hover{border-color:var(--line3)}
.tile{width:56px;height:56px;border-radius:14px;background:var(--g);display:grid;place-items:center;font:600 20px/1 var(--fd);flex:none;position:relative;color:#fff}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.tile .cat{position:absolute;bottom:-4px;inset-inline-end:-4px;width:22px;height:22px;border-radius:50%;background:var(--s2);box-shadow:0 0 0 3px var(--s1);display:grid;place-items:center;color:var(--vil)}
.rrow .t{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .m{display:flex;gap:10px;font-size:12px;color:var(--t3);flex-wrap:wrap}
.chev{width:36px;height:36px;border-radius:12px;background:var(--wash);color:var(--vil);display:grid;place-items:center;flex:none}
[dir=rtl] .chev .ic,[dir=rtl] .lrow>.ic:last-child,[dir=rtl] .ibtn[data-act=back] .ic,[dir=rtl] .seeall .ic{transform:scaleX(-1)}
.search{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:14px;background:var(--s1);border:1px solid var(--line2);color:var(--t3)}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--t1);font-size:15px}
.search:focus-within{border-color:var(--vil);box-shadow:0 0 0 3px rgba(var(--vi-rgb),.15)}
.prow{display:flex;align-items:center;gap:12px;padding:10px 0;background:none;border:0;width:100%;text-align:start;color:var(--t1)}
.list>.prow+.prow{border-top:1px solid var(--line)}
.lrow{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 4px;background:none;border:0;border-bottom:1px solid var(--line);width:100%;text-align:start;color:var(--t1);font-size:14.5px}
.lrow .ico{width:36px;height:36px;border-radius:12px;background:var(--s2);display:grid;place-items:center;color:var(--t15);flex:none}
.empty{padding:28px 10px;text-align:center;color:var(--t2)}
.empty .eico{width:56px;height:56px;margin:0 auto 12px;border-radius:18px;background:var(--wash);color:var(--vil);display:grid;place-items:center}
.friendsrow{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:6px 16px}
.friendsrow::-webkit-scrollbar{display:none}
.fr{display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;flex:none;background:none;border:0;padding:0;color:var(--t1);font-size:12px}
.fr .n{max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank{width:26px;font:700 16px/1 var(--fd);color:var(--t3);text-align:center;flex:none}
.rank.r1{color:#D4A017}.rank.r2{color:#94A3B8}.rank.r3{color:#C2410C}

/* sections */
.sec{display:flex;flex-direction:column;gap:12px}
.sech{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sech h2{font:600 18px/24px var(--fd);margin:0}
.seeall{display:inline-flex;align-items:center;gap:2px;min-height:36px;background:none;border:0;color:var(--vil);font-weight:600;font-size:13px;padding:0}

/* app header on main tabs */
.apphead{display:flex;align-items:center;gap:8px;padding:14px 16px 6px;width:100%;max-width:680px;margin-inline:auto}
.apphead .ttl{font:600 22px/28px var(--fd);margin:0;flex:1;min-width:0}
.apphead .brand{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.apphead .brand{overflow:hidden;min-width:30px}.apphead .brand>:first-child{flex:none}.apphead .brand .wm{white-space:nowrap;overflow:hidden}
@media (max-width:419px){.apphead .brand .wm{display:none}}
.avbtn{background:none;border:0;padding:0;border-radius:50%;flex:none}
.avbtn .av{--ring:var(--vi)}

/* home */
.greet h1{font:600 24px/30px var(--fd);margin:0;letter-spacing:-.01em}
.greet p{margin:4px 0 0;color:var(--t2)}
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.qa button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:104px;padding:14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--s1);color:var(--t1);text-align:start;box-shadow:var(--sh1);transition:transform .15s var(--ease),border-color .15s}
.qa button:hover{border-color:var(--line3);transform:translateY(-1px)}
.qa .qi{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff}
.qa b{font:600 15px/20px var(--fd)}
.qa span.cap{margin-top:-6px}
.qa .main{background:var(--cta);border:0;color:#fff}
.qa .main .qi{background:rgba(255,255,255,.2)}
.qa .main .cap{color:rgba(255,255,255,.85)}
.hscroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px;scroll-snap-type:x mandatory}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start}
.rcard{width:232px;flex:none;display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);overflow:hidden;color:var(--t1);text-align:start;padding:0;box-shadow:var(--sh1);transition:transform .15s var(--ease),border-color .15s}
.rcard:hover{transform:translateY(-2px);border-color:var(--line3)}
.rcard .cv{position:relative;height:112px;background:var(--g);display:flex;align-items:flex-start;justify-content:space-between;padding:10px;color:#fff}
.rcard .cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rcard .cv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35))}
.rcard .cv>*{position:relative;z-index:1}
.rcard .cv>img{position:absolute;z-index:0}
.rcard .live svg{margin-inline-end:4px;vertical-align:-1px}
.rcard .cvi{position:absolute;inset-inline-end:10px;bottom:10px;opacity:.9}
.rcard .lis{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;background:rgba(0,0,0,.35);font-size:11.5px;font-weight:600}
.rcard .bd{display:flex;flex-direction:column;gap:6px;padding:12px}
.rcard .t{font:600 15px/20px var(--fd);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rcard .h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2);min-width:0}
.gamecards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gcardh{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);color:var(--t1);text-align:start;box-shadow:var(--sh1)}
.gcardh:hover{border-color:var(--line3)}
.gcardh b{font:600 15px/20px var(--fd)}
.evt{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line)}
.evt .d{width:44px;flex:none;border-radius:12px;background:var(--wash);color:var(--vil);display:flex;flex-direction:column;align-items:center;padding:6px 0;font-weight:700;line-height:1.1}
.evt .d small{font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.act{display:flex;align-items:center;gap:12px;padding:10px 0;border:0;background:none;width:100%;color:var(--t1);text-align:start}
.act+.act{border-top:1px solid var(--line)}
.act .ai{width:36px;height:36px;border-radius:12px;background:var(--wash);color:var(--vil);display:grid;place-items:center;flex:none}
.checkin{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:var(--r-md);background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(var(--pk-rgb),.06));border:1px solid var(--goldline)}
.checkin>.ic{color:var(--gol)}

/* skeletons */
.skel{background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 37%,var(--s2) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:12px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skcard{width:232px;height:190px;flex:none;border-radius:var(--r-lg)}
.errbox{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;border-radius:var(--r-md);border:1px dashed var(--line3);text-align:center}

/* ---------- navigation ---------- */
.nav{flex:none;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;height:68px;padding:4px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--navbg);border-top:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;z-index:2}
.nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;font-size:11px;color:var(--t3);font-weight:500;position:relative;padding:0;border-radius:14px;min-width:0}
.nav button span.l{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav button[aria-current=page]{color:var(--vil);font-weight:600}
.nav button[aria-current=page] .ic{transform:translateY(-1px)}
.nav .nx,.navbrand,.nav .fab{display:none}
.badge{position:absolute;top:4px;left:50%;margin-left:6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--pk);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
[dir=rtl] .badge{margin-left:0;margin-right:-24px}
.mini{flex:none;margin:0 12px 8px;display:flex;align-items:center;gap:4px;padding:6px;border-radius:18px;background:var(--s1);border:1px solid rgba(var(--vil-rgb),.35);box-shadow:var(--sh2);animation:up .3s}
.mini .open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0 4px;height:44px;text-align:start;color:var(--t1)}
.mini .t{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .cap{color:var(--vil)}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;border-radius:2px;background:var(--vil);animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

/* ---------- auth ---------- */
.splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(60% 40% at 50% 45%,rgba(var(--vi-rgb),.22),transparent 70%)}
.splash .logo{animation:pop .9s var(--ease)}
.welcome{flex:1;display:flex;flex-direction:column;padding:0 24px 26px;background:radial-gradient(90% 50% at 50% 26%,rgba(var(--vi-rgb),.26),transparent 70%),radial-gradient(60% 30% at 90% 50%,rgba(var(--bl-rgb),.14),transparent 70%);overflow-y:auto;scrollbar-width:none;width:100%;max-width:520px;margin-inline:auto}
.welcome .langbtn{align-self:flex-end;margin-top:14px}
.orbit{position:relative;height:320px;flex:none;max-width:342px;width:100%;align-self:center;direction:ltr}
.orbit .ring{position:absolute;left:50%;top:160px;border-radius:50%;border:1px solid rgba(var(--vil-rgb),.25);transform:translate(-50%,-50%)}
.orbit .o{position:absolute;animation:drift 6s ease-in-out infinite}
@keyframes drift{50%{transform:translateY(-8px)}}
.form{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:8px}
.inp{height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--line2);background:var(--s1);color:var(--t1);font-size:15px;outline:none;width:100%}
.inp:focus{border-color:var(--vil);box-shadow:0 0 0 3px rgba(var(--vi-rgb),.15)}
textarea.inp{height:84px;padding:12px 14px;resize:vertical}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--t2) 50%),linear-gradient(135deg,var(--t2) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:36px}
[dir=rtl] select.inp{background-position:20px 22px,15px 22px}
.err{font-size:12.5px;color:var(--rdl)}
.okmsg{font-size:13px;color:var(--gnl)}
.idcard{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;background:var(--wash);border:1px solid rgba(var(--vil-rgb),.3)}
.idcard b{font:700 24px/1.1 var(--fd);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:40px;height:40px;border-radius:50%;border:0;background:var(--g);padding:0;box-shadow:0 0 0 2px var(--bg2);display:grid;place-items:center;color:#fff}
.sw[aria-checked=true]{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--t1)}
.chk{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--t15);cursor:pointer}
.chk input{accent-color:var(--acc-btn);width:18px;height:18px;margin:1px 0 0;flex:none}
.divider{display:flex;align-items:center;gap:10px;color:var(--t3);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.authbox{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:20px}
.social{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.social.one{grid-template-columns:1fr}
.social .btn{gap:10px;border:0;font-weight:600}
.g-google{background:#fff;color:#1F1F1F;outline:1px solid #DADCE0;outline-offset:-1px}
.g-apple{background:#000;color:#fff;outline:1px solid rgba(255,255,255,.22);outline-offset:-1px}
.g-facebook{background:#0866FF;color:#fff}
.g-tiktok{background:#010101;color:#fff;outline:1px solid rgba(255,255,255,.22);outline-offset:-1px}
.authlinks{display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px}
.authlinks .link{display:inline-flex;align-items:center;gap:6px}
@media (max-height:900px){.welcome .orbit{transform:scale(.6);transform-origin:50% 0;margin-bottom:-128px}}
@media (max-height:720px){.welcome .orbit{transform:scale(.44);margin-bottom:-179px}}
@media (max-height:600px){.welcome .orbit{display:none}.welcome h1{margin-top:20px}}

/* colour & theme pickers */
.accents{display:flex;flex-direction:column;gap:10px}
.accents .grp{display:flex;gap:10px;flex-wrap:wrap}
.acc{width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--g);box-shadow:0 0 0 2px var(--bg2);display:grid;place-items:center;color:#fff}
.acc[aria-checked=true]{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--t1)}
.acc .ic{opacity:0}.acc[aria-checked=true] .ic{opacity:1}
.preview{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg);overflow:hidden}
.preview .pvhead{height:64px;margin:-14px -14px 0;background:radial-gradient(90% 140% at 0% 0%,rgba(var(--pv-rgb),.55),transparent 60%),linear-gradient(135deg,rgba(var(--pv-rgb),.25),transparent)}
.preview .pvbtn{height:40px;border-radius:12px;border:0;background:var(--pv-btn);color:#fff;font-weight:600;padding:0 16px}
.preview .pvlink{color:var(--pv-text);font-weight:600;font-size:13px}
.preview .pvbub{align-self:flex-end;max-width:80%;padding:8px 12px;border-radius:16px 16px 4px 16px;background:var(--pv-btn);color:#fff;font-size:13px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.modes button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;background:var(--s1);border:1.5px solid var(--line);color:var(--t1);font-size:12.5px;font-weight:600}
.modes button[aria-checked=true]{border-color:var(--vil);background:var(--wash)}
.modes i{width:44px;height:28px;border-radius:8px;display:block;border:1px solid var(--line2)}
.setgrp{display:flex;flex-direction:column;gap:2px}
.setgrp>.over{padding:0 4px 6px}
.flagsel{display:flex;align-items:center;gap:8px}

/* ---------- room (always dark, immersive) ---------- */
.room{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(110% 45% at 50% 0%,rgba(var(--vi-rgb),.34),transparent 70%),radial-gradient(70% 35% at 100% 55%,rgba(var(--bl-rgb),.14),transparent 70%),linear-gradient(180deg,var(--room-top),var(--bg) 60%);--ring:#0D0B24}
.room.battle{background:radial-gradient(70% 40% at 0% 0%,rgba(244,63,94,.32),transparent 70%),radial-gradient(70% 40% at 100% 0%,rgba(59,130,246,.32),transparent 70%),linear-gradient(180deg,#140A22,#070B14 60%)}
.room.cat-Gaming{background:radial-gradient(110% 45% at 50% 0%,rgba(16,185,129,.28),transparent 70%),linear-gradient(180deg,#061C22,#070B14 60%)}
.rhead{display:flex;align-items:center;gap:10px;padding:18px 16px 0}
.rhead h1{margin:0;font:600 17px/22px var(--fd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rinfo{display:flex;align-items:center;gap:8px;padding:10px 16px 0;flex-wrap:wrap}
.pillbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;background:var(--glass);border:1px solid var(--line2);font-size:12px;font-weight:600;color:var(--t15);flex:none}
.pillbtn .cnt{min-width:18px;height:18px;border-radius:999px;background:var(--acc-btn);color:#fff;display:grid;place-items:center;font-size:10px;padding:0 4px}
.rule{margin:8px 16px 0;display:flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:12px;background:rgba(var(--vi-rgb),.12);border:1px solid rgba(var(--vil-rgb),.2);font-size:12px;color:var(--t15)}
.rule span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbar{margin:8px 16px 0;padding:10px 12px;border-radius:16px;background:var(--glass2);border:1px solid var(--line2);display:flex;flex-direction:column;gap:8px}
.bbar .teams{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px}
.bbar .ta{color:#FDA4AF}.bbar .tb{color:#93C5FD}
.bbar .bar{position:relative;height:12px;border-radius:999px;background:var(--blue);overflow:hidden;direction:ltr}
.bbar .bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#F43F5E,#FB7185);transition:width .6s var(--ease)}
.bbar .bar b{position:absolute;top:-3px;width:4px;height:18px;background:#fff;border-radius:2px;box-shadow:0 0 10px #fff;transition:left .6s var(--ease)}
.bbar .vs{font:800 13px/1 var(--fd);color:var(--gol);letter-spacing:.06em}
.mbar{margin:8px 16px 0;display:flex;flex-direction:column;gap:4px;padding:6px 6px 6px 10px;border-radius:14px;background:var(--glass2);border:1px solid var(--line2)}
.mbar>.row{flex-wrap:nowrap}
.mbt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;background:none;border:0;padding:0;color:inherit;text-align:start;cursor:pointer}
.mbt .t,.mbt .cap{max-width:100%}
.mpill.on{border-color:var(--vil);color:var(--t1)}
.mst{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t2);flex:none}
.mst.bad{color:var(--red,#E11D48)}
.mprog{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:11px;color:var(--t2)}
.mprog .num{flex:none;min-width:30px}
.mprog [data-mdur]{text-align:end}
.mtrack{position:relative;flex:1;height:4px;border-radius:2px;background:var(--line2);overflow:hidden}
.mtrack i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--vil);border-radius:2px;transition:width .9s linear}
.mprog.loop .mtrack i{width:100%!important;opacity:.35}
.mprog.big{font-size:12px}.mprog.big .mtrack{height:6px;border-radius:3px}
.msearch{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--s2);color:var(--t2)}
.msearch .inp{border:0;background:none;padding-inline:0;flex:1;min-width:0}
.prow.skel .orb{width:40px;height:40px;background:var(--s2)}
.prow.skel i{display:block;height:10px;border-radius:5px;background:var(--s2);margin:4px 0;width:70%}.prow.skel i+i{width:40%}
@media (prefers-reduced-motion:reduce){.mtrack i{transition:none}}
.mbar .t{font-size:12.5px;font-weight:600}
.mbar input[type=range]{width:70px;accent-color:var(--vil);flex:none}
@media (max-width:360px){.mbar .mvol{width:52px}}
.gamecard{margin:8px 16px 0;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.35);font-size:13px}
.wheel{width:44px;height:44px;border-radius:50%;background:conic-gradient(#F43F5E 0 25%,#3B82F6 0 50%,#10B981 0 75%,#F59E0B 0);flex:none;animation:spinw 1.2s var(--ease)}
@keyframes spinw{from{transform:rotate(-900deg)}}
#stage{padding:12px 16px 0;display:flex;flex-direction:column;gap:10px;transition:opacity .3s}
.room.offline #stage{opacity:.45}
.hostseat{display:flex;justify-content:center;padding-top:8px}
.seat{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--t1);font-size:12px;font-weight:500;min-width:0}
.seat .nm{display:flex;align-items:center;gap:4px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.seat .nm .ic{color:var(--rdl)}
.seat .role{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--gol);margin-top:-3px}
.seat .slot{width:54px;height:54px;border-radius:50%;border:1.5px dashed var(--line3);background:rgba(20,30,48,.55);display:grid;place-items:center;color:var(--vil)}
.seat .slot.lock{border-style:solid;border-color:var(--line);background:var(--bg2);color:var(--t3)}
.seats{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px 6px}
/* Mic seat layouts. --sv = avatar size, --cols = seats per row; both follow the layout, the seat count and the screen. */
.seats .av,.seatring .av{--s:var(--sv,54px)!important}
.seats .slot,.seatring .slot{width:var(--sv,54px);height:var(--sv,54px)}
.seats.d-m{--sv:48px}
.seats.d-l,.seats.d-xl{--cols:5;--sv:46px;gap:10px 4px}
.seats.lay-compact{--cols:6;--sv:40px;gap:8px 2px}
.seats.lay-compact .nm{font-size:10.5px;gap:2px}
.seats.lay-expanded{--cols:3;--sv:66px;gap:16px 8px}
.seats.lay-front{--cols:4;--sv:60px}
@media (max-width:359px){.seats.d-l,.seats.d-xl{--cols:4}.seats.lay-compact{--cols:5;--sv:38px}}
@media (min-width:600px){.seats.d-l{--cols:6}.seats.d-xl{--cols:7}.seats.lay-compact{--cols:8}.seats.lay-expanded{--cols:4}}
/* more than 20 seats: pages of 20 you can swipe (phones) */
.seatpages{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.seatpages::-webkit-scrollbar{display:none}
.seatpages>.seats{flex:0 0 100%;scroll-snap-align:start;position:relative;padding-top:20px}
.pglbl{position:absolute;top:0;inset-inline-start:2px;font-size:10.5px}
.seatswipe{text-align:center;margin:-6px 0 0}
/* Host + speakers: host in its own column on tablets/desktops */
.lay-hostcol{display:flex;flex-direction:column;gap:14px}
.hostcol-r{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:600px){.lay-hostcol{display:grid;grid-template-columns:minmax(130px,190px) minmax(0,1fr);align-items:start;gap:18px}.lay-hostcol .hostseat{padding-top:18px}}
/* Circle: seats around the host (up to 12 seats) */
.seatring{position:relative;container-type:inline-size;width:min(100%,380px);aspect-ratio:1;margin:0 auto}
.seatring .hostseat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0}
.seatring .hostseat .av{--s:68px!important}
.seatring>.seat{position:absolute;left:50%;top:50%;width:62px;margin:-32px 0 0 -31px;--sv:44px;transform:rotate(var(--a)) translate(38cqi) rotate(calc(-1 * var(--a)))}
.seatring>.seat .nm{max-width:62px;font-size:11px}
.seatring.d-s>.seat{--sv:50px}
.chat{flex:1;min-height:70px;overflow-y:auto;padding:10px 72px 8px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px)}
[dir=rtl] .chat{padding:10px 16px 8px 72px}
.chat::-webkit-scrollbar{display:none}
.chat>:first-child{margin-top:auto}
.msg{max-width:100%;padding:7px 10px;border-radius:12px;background:rgba(20,30,48,.82);font-size:13px;line-height:18px;animation:msgin .25s ease-out;overflow-wrap:anywhere;border:0;color:var(--t1);text-align:start}
.msg.sys,.msg.battle,.msg.music,.msg.game{background:rgba(var(--vi-rgb),.14);color:var(--vill);display:flex;gap:6px;align-items:flex-start}
.msg.join{display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,rgba(var(--bl-rgb),.35),rgba(var(--bl-rgb),0));color:#BFDBFE;padding:4px 10px 4px 4px;border-radius:999px;font-size:12px}
.msg.gift{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,rgba(245,158,11,.22),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.3)}
.msg.gift .ic{color:var(--gol)}
.msg.gift em{font-style:normal;color:var(--gol);font-weight:600}
.msg.pocket{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,rgba(225,29,72,.3),rgba(225,29,72,.05));border:1px solid rgba(251,113,133,.35)}
.msg b{font-weight:600}
.rbar{flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px))}
.cin{flex:1;min-width:0}
.cin input{width:100%;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:rgba(20,30,48,.9);color:var(--t1);font-size:14px;outline:none}
.cin input:focus{border-color:var(--vil)}
.rb{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--glass);color:var(--t1);display:grid;place-items:center;padding:0;flex:none;transition:background .2s}
.rb.on{background:var(--acc-btn);border-color:transparent;color:#fff;box-shadow:0 0 18px rgba(var(--vi-rgb),.5)}
.rb.off{color:var(--rdl)}
.rb.wait{background:rgba(var(--vi-rgb),.25);border-color:rgba(var(--vil-rgb),.6);color:var(--vill);animation:blink 1.4s infinite}
.rb.giftb{width:48px;height:48px;border:0;background:var(--gft);color:#fff;box-shadow:0 6px 18px rgba(var(--pk-rgb),.45)}
.pocket{position:absolute;inset-inline-end:14px;bottom:92px;width:56px;height:70px;border-radius:14px;border:1px solid rgba(252,211,77,.55);background:linear-gradient(180deg,#E11D48,#9F1239);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;box-shadow:0 8px 22px rgba(225,29,72,.45);color:#fff;font-size:11px;font-weight:700;animation:wob 2.4s ease-in-out infinite;z-index:3}
@keyframes wob{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-7deg)}94%{transform:rotate(7deg)}}
.net{margin:8px 16px 0;display:flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:12px;font-size:12.5px;font-weight:600}
.net.bad{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4);color:var(--gol)}
.net.ok{background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.4);color:var(--gnl)}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- sheets & overlays ---------- */
#layer{position:absolute;inset:0;z-index:20;pointer-events:none}
#layer.on{pointer-events:auto}
.scrim{position:absolute;inset:0;background:var(--scrim);animation:fade .2s}
.scrim.clear{background:transparent}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:90%;overflow-y:auto;scrollbar-width:none;padding:10px 16px calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg2);border-top:1px solid var(--line2);border-radius:28px 28px 0 0;box-shadow:var(--sh3);animation:up .3s var(--ease);display:flex;flex-direction:column;gap:14px;outline:none;color:var(--t1)}
.sheet::-webkit-scrollbar{display:none}
.sheet.profile{background:linear-gradient(180deg,var(--pfcover),var(--bg2) 34%);align-items:center;overflow:visible;--ring:var(--pfcover)}
.grab{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--line3);flex:none}
.xbtn{width:36px;height:36px;border-radius:12px;background:var(--s2);color:var(--t2);display:grid;place-items:center;border:0;padding:0;flex:none}
.stats{width:100%;display:grid;grid-template-columns:repeat(3,1fr);padding:12px 0;border-radius:16px;background:var(--s1);border:1px solid var(--line)}
.stats div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.stats div+div{border-inline-start:1px solid var(--line)}
.stats b{font:600 18px/1.2 var(--fd);font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:var(--t3);text-align:center}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.tool{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:16px;background:var(--s1);border:1px solid var(--line);color:var(--t1);font-size:12.5px;font-weight:600;text-align:center}
.tool .ti{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff}
.rcpts{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:4px 16px}
.rcpts::-webkit-scrollbar{display:none}
.rc{display:flex;flex-direction:column;align-items:center;gap:6px;width:48px;flex:none;background:none;border:0;padding:0;color:var(--t2);font-size:11px;font-weight:500;--ring:var(--bg2)}
.rc[aria-checked=true]{color:var(--t1)}
.rc[aria-checked=true] .av{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--vil)}
.rc .nm{white-space:nowrap;max-width:56px;overflow:hidden;text-overflow:ellipsis}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px 8px;border-radius:16px;background:var(--s1);border:1.5px solid var(--line);color:var(--t1);transition:background .15s}
.gt[aria-checked=true]{background:var(--wash);border-color:var(--vil)}
.orb{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25);color:#fff;font-size:24px}
.gt .n{font-size:12px;font-weight:600}
.gt .p{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--gol);font-variant-numeric:tabular-nums}
.gt .p i{width:11px;height:11px;border-radius:50%;background:var(--coin)}
.qty{display:flex;align-items:center;height:44px;border-radius:999px;background:var(--s1);border:1px solid var(--line2);flex:none}
.qty button{width:36px;height:42px;border:0;background:transparent;font-size:18px;padding:0;color:var(--t1)}
.qty span{min-width:30px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--s1);border:1px solid var(--line);cursor:pointer;font-size:14px}
.opt:has(input:checked){border-color:var(--vil);background:var(--wash)}
.opt input{accent-color:var(--acc-btn);width:18px;height:18px;margin:0}
.qrow{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:16px;background:var(--s1)}
.tray{position:absolute;inset-inline-end:14px;bottom:84px;display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--s2);border:1px solid var(--line2);box-shadow:var(--sh3);animation:up .2s}
.tray button{width:44px;height:44px;border-radius:50%;border:0;background:transparent;font-size:24px;padding:0}
.tray button:hover{background:var(--s3)}
.modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:300px;max-width:calc(100% - 32px);animation:zoom .3s var(--ease)}
.env{position:relative;height:430px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#E11D48,#BE123C 55%,#881337);border:1px solid rgba(252,211,77,.5);box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 60px rgba(225,29,72,.35);display:flex;flex-direction:column;align-items:center;--ring:#E11D48;color:#fff}
.env .flap{position:absolute;left:-60px;right:-60px;top:-250px;height:420px;border-radius:50%;background:linear-gradient(180deg,#F43F5E,#E11D48);border-bottom:2px solid rgba(252,211,77,.55);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.env .in{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:28px;text-align:center}
.grabbtn{position:relative;margin-top:32px;width:108px;height:108px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#FEF3C7,#FCD34D 35%,#F59E0B 75%,#B45309);color:#7C2D12;font:700 26px/1 var(--fd);box-shadow:0 0 0 6px rgba(252,211,77,.25),0 12px 30px rgba(0,0,0,.4);animation:breathe 1.6s ease-in-out infinite}
.grabbtn.shake{animation:shake .5s linear infinite}
@keyframes breathe{50%{box-shadow:0 0 0 12px rgba(252,211,77,.15),0 12px 30px rgba(0,0,0,.4)}}
@keyframes shake{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.env .won{position:relative;margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:6px;animation:pop .5s var(--ease)}
.env .won b{font:800 54px/1 var(--fd);color:#FCD34D;text-shadow:0 4px 20px rgba(0,0,0,.35)}
.env .ft{position:relative;margin-top:auto;width:100%;padding:0 22px 20px;display:flex;flex-direction:column;gap:10px;font-size:12.5px;color:#FFE4E6}
.env .bar{height:6px;border-radius:3px;background:rgba(0,0,0,.25);overflow:hidden}
.env .bar i{display:block;height:100%;background:#FCD34D;border-radius:3px}
.busy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:18px;background:var(--bg2);border:1px solid var(--line2);font-weight:600;white-space:nowrap;box-shadow:var(--sh3);color:var(--vil)}
.teamcol{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.teamcol.a{border-color:rgba(244,63,94,.5)}.teamcol.b{border-color:rgba(59,130,246,.5)}
.pick{display:flex;align-items:center;gap:8px;padding:6px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:13px;color:var(--t1);width:100%;text-align:start}

/* ---------- messages ---------- */
.th{display:flex;align-items:center;gap:12px;padding:10px 0;background:none;border:0;border-bottom:1px solid var(--line);width:100%;text-align:start;color:var(--t1);min-height:64px}
.th .pv{font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th .ub{min-width:20px;height:20px;border-radius:999px;background:var(--pk);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.dm{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;scrollbar-width:none;width:100%;max-width:760px;margin-inline:auto}
.dm>:first-child{margin-top:auto}
.bub{max-width:78%;padding:9px 12px;border-radius:18px;font-size:14px;line-height:20px;animation:msgin .2s;overflow-wrap:anywhere}
.bub.them{align-self:flex-start;background:var(--s1);border:1px solid var(--line);border-end-start-radius:6px}
.bub.me{align-self:flex-end;background:var(--cta);color:#fff;border-end-end-radius:6px}
.bub.giftb{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(var(--pk-rgb),.12));border:1px solid var(--goldline);color:var(--t1)}
.dmbar{flex:none;display:flex;gap:8px;padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg2)}
.dmbar>*{max-width:760px}

/* ---------- profile & wallet ---------- */
.cover{height:130px;flex:none;background:radial-gradient(80% 140% at 20% 0%,rgba(var(--pc-rgb,var(--vi-rgb)),.55),transparent 60%),radial-gradient(70% 140% at 100% 0%,rgba(var(--pc-rgb,var(--bl-rgb)),.3),transparent 60%),var(--pfcover)}
.bal{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;border-radius:24px;background:var(--goldcard);border:1px solid var(--goldline)}
.bal .coin{width:36px;height:36px;font-size:18px;box-shadow:0 0 20px rgba(245,158,11,.35)}
.bal b{font:700 40px/44px var(--fd);font-variant-numeric:tabular-nums}
.tx{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tx .a{margin-inline-start:auto;font-weight:700;font-variant-numeric:tabular-nums}
.tx .a.plus{color:var(--gnl)}
button.tx{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;text-align:start}
.store{display:flex;flex-direction:column;gap:10px}
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 8px 14px;border-radius:18px;background:var(--s1);border:1px solid var(--line2);color:var(--t1);transition:transform .12s,border-color .12s}
.pack:hover{border-color:rgba(245,158,11,.5)}.pack:active{transform:scale(.98)}
.pack.hot{border-color:rgba(245,158,11,.55);background:linear-gradient(170deg,rgba(245,158,11,.1),var(--s1) 60%)}
.pack b{font:700 22px/1.1 var(--fd)}
.pack .bonus{font-size:12px;font-weight:600;color:var(--gnl)}
.pack .price{margin-top:6px;font-weight:700;font-size:15px}.pack .price small{font-weight:500;color:var(--t2);font-size:12px}
.pack .tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:2px 8px;border-radius:999px;background:linear-gradient(135deg,#FCD34D,#F59E0B);color:#3B1D02;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.buysum{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:18px;background:var(--goldcard);border:1px solid var(--goldline)}
.buysum b{font:700 30px/1.1 var(--fd)}
.methods{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.methods legend{margin-bottom:6px}
.method{min-height:60px;padding:8px 14px}
.howto{padding:12px 14px;border-radius:14px;background:rgba(245,158,11,.07);border:1px dashed var(--goldline);font-size:13.5px;line-height:20px;display:flex;flex-direction:column;gap:6px}
.howto p{margin:0;color:var(--t15)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;width:100%;margin-top:6px;padding:12px 14px;border-radius:14px;background:var(--s1);text-align:start;font-size:13.5px}
.kv span{color:var(--t2)}.kv b{text-align:end;font-weight:600;overflow-wrap:anywhere}
.lv.ok{background:rgba(16,185,129,.16);color:var(--gnl)}.lv.bad{background:rgba(239,68,68,.14);color:var(--rdl)}.lv.wait{background:rgba(245,158,11,.14);color:var(--gol)}

/* ---------- fx & toasts ---------- */
#fx{position:absolute;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.gfx{position:absolute;left:50%;top:40%;display:flex;flex-direction:column;align-items:center;gap:14px;animation:gpop 2.2s ease forwards;transform:translate(-50%,-50%)}
.gfx .orb{width:120px;height:120px;font-size:60px;box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 80px 20px rgba(var(--pk-rgb),.45)}
.gfx .lbl{padding:8px 14px;border-radius:999px;background:rgba(7,11,20,.85);color:#F1F5FF;border:1px solid rgba(245,158,11,.4);font-weight:600;font-size:13px;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.gfx .lbl em{font-style:normal;color:#FCD34D}
.spk{position:absolute;left:50%;top:40%;width:8px;height:8px;border-radius:50%;background:#FCD34D;animation:burst 1.1s ease-out forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) rotate(var(--a)) translateX(0);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--a)) translateX(150px);opacity:0}}
@keyframes gpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}24%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(.92)}}
.fl{position:absolute;bottom:96px;font-size:30px;animation:flo 2.3s ease-out forwards}
@keyframes flo{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(-24px) scale(1.15)}100%{opacity:0;transform:translate(var(--dx),-280px) scale(1)}}
#toasts{position:absolute;left:16px;right:16px;bottom:92px;z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
#layer.on~#toasts{bottom:auto;top:60px}
.toast{background:var(--toastbg);color:var(--toastt);padding:10px 14px;border-radius:14px;font-size:13px;font-weight:600;box-shadow:var(--sh3);animation:tin .22s ease-out;max-width:100%;text-align:center}
.toast.bad{background:#FECACA;color:#450A0A}
.toast.out{animation:tout .25s ease-in forwards}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}}
@keyframes zoom{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
@keyframes pop{from{opacity:0;transform:scale(.5)}}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}
@keyframes tout{to{opacity:0;transform:translateY(10px)}}

/* ---------- mini-games ---------- */
.gti{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;flex:none}
.gti.sm{width:36px;height:36px;border-radius:12px;font-size:18px}
.gtile{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--s1);border:1px solid var(--line);color:var(--t1);width:100%;text-align:start}
.gtile b{font:600 15px var(--fd)}
.gcard{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--glass2);border:1px solid var(--line2);color:var(--t1);width:100%;min-width:0}
.gstrip{margin:8px 16px 0;display:flex;flex-direction:column;gap:6px}
.pill-s{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--s2);color:var(--t15);flex:none}
.pill-s.on{background:var(--acc-btn);color:#fff}
.sheet.gamesheet{max-height:94%}
.gplayers{display:flex;gap:8px;flex-wrap:wrap}
.gp{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;background:var(--s1);border:1.5px solid var(--line);font-size:13px;font-weight:600;max-width:100%;min-width:0;--ring:var(--s1)}
.gp.turn{border-color:var(--vil);box-shadow:0 0 16px rgba(var(--vi-rgb),.35)}
.gp.win{border-color:#F59E0B}
.gp.empty{border-style:dashed;color:var(--t3)}
.gp b{margin-inline-start:2px}
.gready{flex:none;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--s2);color:var(--t3);white-space:nowrap}.gready.on{background:rgba(34,197,94,.16);color:var(--gnl)}
.mk{font:800 15px var(--fd)}.mk-X{color:var(--vil)}.mk-O{color:var(--pkl)}.mk-R{color:#F43F5E}.mk-Y{color:#D4A017}
.gstatus{margin:0;font:600 16px/1.3 var(--fd);text-align:center}
.gstatus.done{font-size:20px;color:var(--gol)}
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,320px);align-self:center;aspect-ratio:1;direction:ltr}
.ttt .c{border-radius:18px;border:1px solid var(--line2);background:var(--s1);font:800 clamp(34px,10vw,52px)/1 var(--fd);color:var(--t1);display:grid;place-items:center;padding:0}
.ttt .c:not(:disabled):hover{background:var(--s2);border-color:var(--vil)}
.ttt .c.X{color:var(--vil)}.ttt .c.O{color:var(--pkl)}
.ttt .c.wl{background:var(--wash);border-color:var(--vil);animation:pop .4s}
.ttt .c:disabled{cursor:default}
.c4wrap{width:min(100%,360px);align-self:center;display:flex;flex-direction:column;gap:6px;direction:ltr}
.c4drops{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.c4drops button{height:34px;border-radius:10px;border:1px solid var(--line2);background:var(--s1);color:var(--vil);display:grid;place-items:center;padding:0}
.c4drops button:disabled{opacity:.35}
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:8px;border-radius:16px;background:linear-gradient(180deg,#1D4ED8,#1E3A8A)}
.c4 .cell{aspect-ratio:1;border-radius:50%;background:#0B1224;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.c4 .cell.R{background:radial-gradient(circle at 35% 30%,#FDA4AF,#F43F5E 55%,#9F1239)}
.c4 .cell.Y{background:radial-gradient(circle at 35% 30%,#FEF3C7,#FCD34D 55%,#B45309)}
.c4 .cell.last{animation:dropin .35s cubic-bezier(.3,1.4,.6,1)}
.c4 .cell.wl{box-shadow:0 0 0 3px #fff,0 0 16px #fff}
@keyframes dropin{from{transform:translateY(-120px)}}
.rps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rps button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 6px;border-radius:18px;background:var(--s1);border:1px solid var(--line2);color:var(--t1);font-weight:600;font-size:13px}
.rps button span{font-size:40px;line-height:1}
.rps button:not(:disabled):hover{border-color:var(--vil);background:var(--s2)}
.rps button:disabled{opacity:.45}
.quiz{display:flex;flex-direction:column;gap:10px}
.qbar{height:6px;border-radius:3px;background:var(--s2);overflow:hidden}
.qbar i{display:block;height:100%;background:var(--cta);transition:width .5s linear}
.qq{margin:4px 0;font:600 18px/1.35 var(--fd)}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qopts button{min-height:56px;padding:10px;border-radius:14px;background:var(--s1);border:1.5px solid var(--line2);color:var(--t1);font-weight:600;font-size:14px;text-align:center}
.qopts button:not(:disabled):hover{border-color:var(--vil)}
.qopts button.picked{border-color:var(--vil);background:var(--wash)}
.msg.gamemsg{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,rgba(16,185,129,.22),rgba(16,185,129,.05));border:1px solid rgba(16,185,129,.35)}
.msg.gamemsg em{font-style:normal;color:var(--gnl);font-weight:700;margin-inline-start:4px}
.bub.gameb{background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(var(--vi-rgb),.12));border-color:rgba(16,185,129,.4)}
.rside-h{display:none}
.rmain,.rside{display:contents}

/* ---- room identity & roles ---- */
.room[data-bg]{background:var(--room-bg)}
.rtitle{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:0;padding:0;color:inherit;text-align:start;border-radius:12px}
.rtitle:focus-visible{outline:2px solid var(--vil);outline-offset:3px}
.rlogo{background:var(--s2);overflow:hidden;border-radius:12px}
.rprev{display:flex;align-items:center;gap:10px;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);color:#fff}
.rprev .pv{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;color:#fff}
.bgpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.bgpick button{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:6px 6px 8px;border-radius:14px;border:1px solid var(--line2);background:var(--s1);color:var(--t2);font-size:12px;font-weight:500}
.bgpick i{display:block;height:40px;border-radius:10px;background:var(--bgp);--ra-rgb:124,92,255}
.bgpick button[aria-checked=true]{border-color:var(--vil);color:var(--t1);box-shadow:0 0 0 2px rgba(var(--vil-rgb),.35)}
.lv.rl-admin{background:linear-gradient(135deg,#0EA5E9,#2563EB)}
.lv.rl-mod{background:rgba(var(--vi-rgb),.22);color:var(--vill)}
.tablewrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table.perm{width:100%;border-collapse:collapse;font-size:13px}
table.perm th,table.perm td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
table.perm thead th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);background:var(--s1)}
table.perm tbody th{text-align:start;font-weight:500;color:var(--t15);white-space:normal;min-width:110px;font-size:12.5px}
table.perm abbr{text-decoration:none}
table.perm th,table.perm td{padding-inline:6px}
table.perm tr:last-child>*{border-bottom:0}
.pchk{display:inline-grid;place-items:center;width:40px;height:40px;cursor:pointer}
.pchk input{width:18px;height:18px;accent-color:var(--acc-btn);margin:0}
.pchk input:disabled{opacity:.45}
.rabout{display:flex;flex-direction:column;gap:12px}
.rcover{height:120px;margin:-6px -4px 0;border-radius:18px;overflow:hidden;background:var(--s2)}
.rcover img{width:100%;height:100%;object-fit:cover}
details.more{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--s1)}
details.more>summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--vil);list-style:none;display:flex;align-items:center;gap:8px;min-height:24px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.more[open]>summary::before{transform:rotate(45deg)}
/* ---- live video ---- */
.lstage{position:relative;display:flex;flex-direction:column;gap:8px;padding:0 16px}
.vt{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(160deg,rgba(var(--vi-rgb),.35),#0B1020 70%);border:1px solid rgba(255,255,255,.08)}
.vt.main{aspect-ratio:3/4;max-height:58vh;width:100%}
.vt .vfb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:none;border:0;color:#CBD5E1}
.vt .vv{position:absolute;inset:0;pointer-events:none}
.vt .vv video,.vt .vv>div{width:100%!important;height:100%!important;object-fit:cover}
.vt .vv.mirror video{transform:scaleX(-1)}
.vt .vv:not(.has){display:none}
.vt .vname{position:absolute;inset-inline-start:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 20px);height:26px;padding:0 10px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:600}
.vt .vname svg:first-child{color:#FCD34D}
.vco{position:absolute;inset-inline-end:26px;top:10px;display:flex;flex-direction:column;gap:8px;width:30%;max-width:132px;z-index:2}
.vco .vt{aspect-ratio:3/4;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.vco .vt .vname{inset-inline-start:6px;bottom:6px;height:22px;font-size:11px;padding:0 7px}
.lspk{display:flex;align-items:center;gap:8px;padding:10px 16px 0;overflow-x:auto;scrollbar-width:none}
.lspk .seat.mini{padding:0;width:auto}
.lspk-join{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px dashed rgba(var(--vil-rgb),.6);background:rgba(var(--vi-rgb),.14);color:var(--vill);font-size:13px;font-weight:600;white-space:nowrap}
.golv{position:relative;height:220px;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,rgba(var(--vi-rgb),.45),#0B1020 75%);display:flex;align-items:flex-end;justify-content:center;padding:14px}
.golv .vv{position:absolute;inset:0}.golv .vv:not(.has){display:none}
.golv .vv video{width:100%;height:100%;object-fit:cover}.golv .vv.mirror video{transform:scaleX(-1)}
.golv .vfb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#CBD5E1}
.golv .btn{position:relative;z-index:1}
@media (max-width:899px){
  /* Phone/tablet: full-bleed live, chat floats over the video like other live apps */
  .room.is-live .vt.main{aspect-ratio:auto;height:min(62vh,640px);max-height:none}
  .room.is-live .lstage{padding:0 10px}
  .room.is-live .vco{inset-inline-end:20px}
  .room.is-live #rRule,.room.is-live #rGames{display:none}
  .room.is-live .chat{max-height:26vh}
}
@media (min-width:900px){
  .lstage{max-width:720px;margin-inline:auto;width:calc(100% - 32px);padding:0}
  .vt.main{aspect-ratio:16/10;max-height:62vh}
  .vco{inset-inline-end:12px}
  .lspk{max-width:720px;margin-inline:auto;width:calc(100% - 32px);padding-inline:0}
}
/* ---- parties ---- */
.pbar{position:relative;margin:8px 16px 0;padding:34px 12px 12px;border-radius:18px;overflow:hidden;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--p1) 38%,#0B1020),color-mix(in srgb,var(--p2) 26%,#0B1020));border:1px solid rgba(255,255,255,.12)}
.pbar .deco,.pprev .deco{position:absolute;top:0;inset-inline:0;height:28px;display:flex;justify-content:space-around;align-items:flex-start;pointer-events:none;overflow:hidden}
.pbar .deco span,.pprev .deco span{font-size:16px;line-height:1;transform-origin:50% 0;animation:swing 3s ease-in-out infinite}
.pbar .deco span:nth-child(odd),.pprev .deco span:nth-child(odd){animation-delay:-1.5s;margin-top:4px}
.pbar .deco::before,.pprev .deco::before{content:"";position:absolute;top:2px;inset-inline:0;height:10px;border-bottom:1.5px solid rgba(255,255,255,.35);border-radius:0 0 50% 50%}
.pbar .pem{font-size:26px;line-height:1}
.pbar .cap{color:rgba(255,255,255,.8)}
@keyframes swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.pprev{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:40px 14px 16px;border-radius:18px;color:#fff;text-align:center;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--p1) 55%,#111827),color-mix(in srgb,var(--p2) 40%,#111827))}
.pprev b{font:700 18px/1.2 var(--fd)}.pprev>span{font-size:13px;opacity:.85}
.ptheme{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.g2.stack-sm>*{min-width:0}
.g2 input[type=datetime-local]{min-width:0;width:100%}
@media (max-width:479px){.g2.stack-sm{grid-template-columns:1fr}}
.ptheme button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--s1);color:var(--t15);font-size:13px;font-weight:500}
.ptheme button span{font-size:18px}
.ptheme button[aria-checked=true]{border-color:var(--vil);background:rgba(var(--vi-rgb),.14);color:var(--t1);font-weight:600}
.pfs{border:1px solid var(--line);border-radius:14px;padding:12px;margin:0;display:flex;flex-direction:column;gap:10px}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:40}
body>.confetti{position:fixed;z-index:9999}
.confetti i{position:absolute;top:-24px;display:block;opacity:.95;animation-name:fall;animation-timing-function:cubic-bezier(.25,.6,.4,1);animation-fill-mode:forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),105vh) rotate(calc(var(--r) + 540deg));opacity:.9}}
.nowp{display:flex;flex-direction:column;gap:12px}
.mctl{display:flex;justify-content:center;align-items:center;gap:10px}
.mctl .ibtn{position:relative}.mctl .ibtn.big{width:56px;height:56px;border-radius:50%;background:var(--cta);color:#fff;border:0}
.mctl .ibtn.on{color:var(--vil);border-color:rgba(var(--vil-rgb),.5)}
.mctl .ibtn small{position:absolute;top:6px;inset-inline-end:8px;font-size:9px;font-weight:700}
.mctl .ibtn:disabled{opacity:.4}
@media (min-width:900px){.pbar{width:calc(100% - 32px);max-width:720px;margin-inline:auto}}

/* ---------- profile & social ---------- */
.handle{font-weight:600;color:var(--vil);font-size:14px}
.pfid{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:560px}
.stats.four{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.stats>button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;background:none;border:0;color:inherit;padding:0}
.stats>*+*{border-inline-start:1px solid var(--line)}
.stats>button b{font:600 18px/1.2 var(--fd);font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:var(--t2)}
.pfact{display:flex;gap:8px;width:100%}
.pfcols{display:flex;flex-direction:column;gap:14px;width:100%;text-align:start}
.psec{display:flex;flex-direction:column;gap:8px;width:100%}
.actrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;background:var(--s1);color:var(--t1);text-align:start;width:100%;border-bottom:1px solid var(--line)}
.actrow:last-child{border-bottom:0}
.actrow b{font-weight:600;display:block}
.aico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:18px;background:var(--s2);color:var(--t15)}
.aico.live{background:rgba(239,68,68,.14);color:var(--rdl)}
.chip.sm{height:28px;padding:0 10px;font-size:12px;display:inline-flex;align-items:center}
.edcover{height:120px;border-radius:var(--r-lg);display:flex;align-items:flex-end;justify-content:center;padding-bottom:0;margin-bottom:36px}
.edcover:not([style*="background"]){background:radial-gradient(80% 140% at 20% 0%,rgba(var(--pc-rgb,var(--vi-rgb)),.55),transparent 60%),var(--pfcover)}
.edcover #edAv{transform:translateY(44px)}
.covers{display:flex;flex-wrap:wrap;gap:8px}
.covers .cv{width:52px;height:34px;border-radius:10px;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.covers .cv.acc{background:radial-gradient(80% 140% at 20% 0%,rgba(var(--pc-rgb),.7),transparent 70%),var(--pfcover)}
.covers .cv[aria-checked=true]{border-color:var(--t1);outline:2px solid var(--vil);outline-offset:1px}
.affix{display:flex;align-items:center;border-radius:14px;background:var(--s1);border:1px solid var(--line2)}
.affix>span{padding-inline-start:14px;color:var(--t2);font-weight:600}
.affix .inp{border:0;background:transparent;padding-inline-start:4px}
.affix:focus-within{outline:2px solid var(--vil);outline-offset:1px}
.fld .good{color:var(--gnl)}.fld .bad{color:var(--rdl)}
.lrow.tgl{cursor:pointer}
.switch{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:var(--s3);position:relative;flex:none;margin:0;cursor:pointer;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.switch:checked{background:var(--acc-btn)}
.switch:checked::after{transform:translateX(18px)}
[dir=rtl] .switch:checked::after{transform:translateX(-18px)}
.switch:focus-visible{outline:2px solid var(--vil);outline-offset:2px}
@media (min-width:900px){.pfcols{display:grid;grid-template-columns:1fr 1fr;align-items:start}.pfpg .list{max-width:none}}

/* ---------- wallet: totals, ledger, payment options ---------- */
.totals{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tcell{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line)}
.tcell b{font:700 18px/1.2 var(--fd)}
.txlist{display:flex;flex-direction:column}
.txi{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;flex:none}
.txi.in{background:rgba(16,185,129,.14);color:var(--gnl)}
.txi.out{background:rgba(239,68,68,.12);color:var(--rdl)}
.tx .a.soft{color:var(--t2)}
.mico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--s2);color:var(--t15);flex:none}
.mprice{font-weight:700;text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.mprice small{font-size:11px;font-weight:500;color:var(--t2)}
.wallet-pg{display:flex;flex-direction:column;gap:14px}
.wcol{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:600px){.totals{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1200px){.wallet-pg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}.wallet-pg>.btn{grid-column:1/-1}.wallet-pg .wcol:last-child{position:sticky;top:12px}}

/* ---------- games hub + the game kit (js/games/*) ---------- */
.abadges{display:flex;flex-wrap:wrap;gap:8px}
.abadge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--s1);border:1px solid var(--line2);font-size:12.5px;font-weight:600}
.abadge i{font-style:normal;font-size:15px}
.ghero{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(var(--vi-rgb),.16),rgba(var(--bl-rgb),.10));border:1px solid rgba(var(--vil-rgb),.28)}
.ghero .h3{display:block}
.gstats{display:flex;gap:16px;flex:none}
.kv1{display:flex;flex-direction:column;align-items:center;gap:2px}
.kv1 b{font:700 19px/1.1 var(--fd);font-variant-numeric:tabular-nums}
.chiprow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;margin:0 -16px;padding-inline:16px}
.chiprow::-webkit-scrollbar{display:none}
.chiprow .chip{flex:none}
.gamegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gcard2{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);color:var(--t1);text-align:start;box-shadow:var(--sh1);min-width:0;transition:border-color .15s,transform .12s}
.gcard2:hover{border-color:var(--line3)}.gcard2:active{transform:scale(.985)}
.gcard2 b{font:600 15px/20px var(--fd);max-width:100%}
.gcard2 .cap{max-width:100%}
.gbest{margin-top:2px;font-size:11px;font-weight:700;color:var(--t1);background:rgba(var(--vi-rgb),.18);border:1px solid rgba(var(--vil-rgb),.35);border-radius:999px;padding:2px 8px}
.gcardh .gbest{margin-top:0}
.gtiles{display:flex;flex-direction:column;gap:8px}
.gkhead{gap:10px}
.gkhead .h2{font-size:19px}
.gkboard{margin:2px 0 10px;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;min-width:0}
.gkload{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 0}
.gkres{display:flex;flex-direction:column;gap:10px;align-items:center;padding:14px;border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);width:100%}
.gamesheet .gkboard canvas{max-width:100%;height:auto;touch-action:none;border-radius:var(--r-md)}
.ico.cta{background:var(--cta);color:#fff}
@media (min-width:600px){.gamegrid{grid-template-columns:repeat(3,1fr)}.gamecards{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.gamegrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1200px){.gamegrid{grid-template-columns:repeat(5,1fr)}}

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

/* =====================================================================
   Responsive layouts. One design system, four arrangements:
   phone (<700): bottom navigation, single column
   tablet (700–1099): navigation rail on the side, two-column sections
   laptop (1100–1439): full sidebar, multi-column content
   desktop (≥1440): wider content, more columns
   ===================================================================== */
@media (min-width:768px){
  #screen:has(>.nav){display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  #screen:has(>.nav)>.scroll{grid-column:2;grid-row:1}
  #screen:has(>.nav)>.mini{grid-column:2;grid-row:2;width:min(100% - 48px,760px);justify-self:center;margin:0 0 16px}
  #screen>.nav{grid-column:1;grid-row:1/span 2;display:flex;flex-direction:column;align-items:stretch;gap:4px;height:auto;padding:16px 10px;border-top:0;border-inline-end:1px solid var(--line);background:var(--bg2);overflow-y:auto;scrollbar-width:none}
  .nav .nx{display:flex}
  .navbrand{display:flex;justify-content:center;padding:4px 0 14px}
  .nav button{height:60px;gap:4px;font-size:11px}
  .nav button[aria-current=page]{background:var(--wash)}
  .nav button:hover{background:var(--s2)}
  .nav .fab{display:flex;height:48px;border-radius:14px;background:var(--cta);color:#fff;margin-bottom:10px}
  .nav .fab .l{display:none}
  .badge{top:6px}
  .pg{padding:28px 28px 40px;max-width:980px}
  .apphead,.topbar{padding-inline:28px;max-width:980px;padding-top:22px}
  .apphead .brand{display:none}
  .qa{grid-template-columns:repeat(4,1fr)}
  .gamecards{grid-template-columns:repeat(4,1fr)}
  .rlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .homegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
  .chips{margin-inline:0;padding-inline:0;flex-wrap:wrap}
  .friendsrow,.hscroll{margin-inline:0;padding-inline:0}
  .packs{grid-template-columns:repeat(4,1fr)}
  .welcome{max-width:520px}
  #toasts{bottom:28px}
  /* sheets become centred dialogs */
  .sheet{left:50%;right:auto;bottom:50%;width:min(540px,calc(100% - 48px));max-height:86vh;border-radius:24px;border:1px solid var(--line2);animation:dlg .25s var(--ease);transform:translate(-50%,50%);padding-bottom:24px}
  .sheet.gamesheet{width:min(620px,calc(100% - 48px));max-height:92vh}
  .sheet .grab{display:none}
  .sheet.profile{overflow:visible;margin-top:40px}
}
@media (min-width:1200px){
  #screen:has(>.nav){grid-template-columns:248px minmax(0,1fr)}
  #screen>.nav{padding:20px 14px}
  .navbrand{justify-content:flex-start;align-items:center;gap:10px;padding:0 10px 18px;font:700 20px var(--fd);letter-spacing:.05em}
  .navbrand .wm{display:inline}
  .nav button{flex-direction:row;justify-content:flex-start;gap:14px;height:46px;padding:0 14px;font-size:14.5px;border-radius:14px}
  .nav .fab{height:48px;justify-content:center;margin:0 0 14px;font-weight:600;font-size:15px;box-shadow:0 8px 22px rgba(var(--vi-rgb),.3)}
  .nav .fab .l{display:inline}
  .nav .badge{position:static;margin-inline-start:auto}
  .pg{max-width:1120px;padding:32px 40px 48px}
  .apphead,.topbar{padding-inline:40px;max-width:1120px}
  .rlist{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .hscroll.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));overflow:visible}
  .hscroll.grid .rcard{width:auto}
}
.navbrand .wm{display:none}
@media (min-width:1600px){ .pg,.apphead,.topbar{max-width:1360px} .gamecards{grid-template-columns:repeat(6,1fr)} }

/* room: stage + chat side by side on wide screens */
@media (min-width:900px){
  .room{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px)}
  .rmain{display:flex;flex-direction:column;overflow-y:auto;position:relative;padding-bottom:24px;scrollbar-width:thin}
  .rside{display:flex;flex-direction:column;min-height:0;border-inline-start:1px solid var(--line);background:rgba(7,11,20,.55)}
  .rside-h{display:flex;padding:22px 18px 8px}
  .rside .chat{padding:8px 16px;-webkit-mask-image:none;mask-image:none}
  .rside .rbar{padding:10px 14px 16px;border-top:1px solid var(--line)}
  #stage{width:100%;max-width:720px;margin-inline:auto;padding-top:28px;gap:18px}
  .seats{gap:22px 12px;--sv:72px}
  .seats.d-m{--sv:64px}.seats.d-l{--cols:6;--sv:58px}.seats.d-xl{--cols:7;--sv:52px;gap:18px 8px}
  .seats.lay-compact{--cols:8;--sv:48px;gap:14px 6px}.seats.lay-expanded{--cols:4;--sv:88px}.seats.lay-front{--sv:80px}
  .lay-hostcol .seats.d-l{--cols:5}.lay-hostcol .seats.d-xl{--cols:6}
  .seatpages{flex-direction:column;overflow:visible}.seatpages>.seats{flex:none}.seatswipe{display:none}
  .seatring{width:min(100%,520px)}.seatring>.seat{--sv:56px;width:76px;margin:-40px 0 0 -38px}.seatring>.seat .nm{max-width:76px}
  .hostseat .av{--s:96px!important}
  .rhead,.rinfo,.rule,.bbar,.mbar,.gamecard,.gstrip,.net{width:calc(100% - 32px);max-width:720px;margin-inline:auto}
  .rhead{padding-inline:0}
  .rinfo{padding-inline:0}
  .pocket{inset-inline-end:24px;bottom:24px}
  .tray{inset-inline-end:auto;inset-inline-start:calc(100% - 400px);bottom:84px}
}
@keyframes dlg{from{opacity:0;transform:translate(-50%,calc(50% + 20px))}to{opacity:1;transform:translate(-50%,50%)}}

/* ---- profile photo: change badge + crop sheet ---- */
.avedit{position:relative;display:inline-flex;flex:none}
.avcam{position:absolute;inset-inline-end:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent,var(--vi));color:#fff;border:3px solid var(--bg);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .15s}
.avcam:hover{transform:scale(1.08)}.avcam:focus-visible{outline:2px solid var(--accent,var(--vi));outline-offset:2px}
.spin.sm{width:14px;height:14px;border-width:2px}
.avcrop{display:flex;justify-content:center;padding:6px 0}
.avwin{position:relative;width:280px;height:280px;flex:none;border-radius:50%;overflow:hidden;touch-action:none;cursor:grab;background:var(--s2,#222);box-shadow:0 0 0 4px rgba(var(--vi-rgb),.25);user-select:none;-webkit-user-select:none}
.avwin:active{cursor:grabbing}.avwin:focus-visible{outline:3px solid var(--accent,var(--vi));outline-offset:3px}
.avwin img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none}
.avzoom{display:flex;align-items:center;gap:10px;padding:0 8px;color:var(--t2)}
.avcrop{overflow:hidden}@media (max-width:359px){.avwin{transform:scale(.82);margin:-25px}}
.avzoom input{flex:1;accent-color:var(--accent,var(--vi))}
.avprog{height:6px;border-radius:3px;background:var(--s2,rgba(127,127,127,.2));overflow:hidden}
.avprog i{display:block;height:100%;background:var(--accent,var(--vi));transition:width .2s}

/* ---- phone verification + account ---- */
.lv.warn{background:rgba(245,158,11,.14);color:var(--gol)}
.note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--wash);border:1px solid rgba(var(--vil-rgb),.25);font-size:13.5px;line-height:1.5;color:var(--t1)}
.note>.ic{color:var(--vil);margin-top:2px;flex:none}
.lrow.static{cursor:default;padding-block:10px}
.lrow.static>.grow{min-width:0}
@media (max-width:359px){.lrow.static{flex-wrap:wrap}.lrow.static>.grow{min-width:60%}}
.brandico svg{width:20px;height:20px}
.phrow{display:flex;align-items:stretch;gap:8px}
.phcode{display:grid;place-items:center;min-width:64px;padding:0 10px;border-radius:14px;border:1px solid var(--line2);background:var(--s2);color:var(--t1);font-weight:600;font-size:15px}
.phrow .inp{flex:1;min-width:0}
.otp{font-size:24px;letter-spacing:.5em;text-align:center;font-weight:700;padding-inline-start:.5em}
.otp::placeholder{letter-spacing:.3em;color:var(--t3);opacity:.45}
.phflow{display:flex;flex-direction:column;gap:14px}
.acctid{display:flex;flex-direction:column;gap:6px}

/* ---- game stage: full screen; board + side panel on wide or landscape screens ---- */
.gstage{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(90% 40% at 50% 0%,rgba(var(--vi-rgb),.12),transparent 70%),var(--bg);color:var(--t1);outline:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);z-index:1}
.gstagebar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none;background:color-mix(in srgb,var(--bg2) 85%,transparent);backdrop-filter:blur(10px)}
.gstagebar .h2{font-size:18px;line-height:1.2}
.gstagebody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:14px 16px 20px;width:100%;margin-inline:auto}
.gstagemain{display:flex;flex-direction:column;gap:12px;min-width:0}
.gstagemain>.gkboard,.gstagemain>.ttt,.gstagemain>.c4wrap,.gstagemain>.gkload,.gstagemain>.gwait{align-self:center}
.gstagemain>.gkboard{max-width:640px}
.gstageside{display:flex;flex-direction:column;gap:12px;min-width:0}
.gstageacts{display:flex;flex-direction:column;gap:8px}
.gstagewarn{flex:none;padding:8px 16px;background:rgba(245,158,11,.14);color:var(--gol);font-size:13px;font-weight:600;text-align:center}
.gstagehelp{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line);font-size:14px;line-height:1.5}
.gstagehelp ul{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px;color:var(--t2)}
.gstagehelp p{margin:0}
.gkboard{isolation:isolate}
.gstageask{position:absolute;inset:0;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;padding:12px;animation:fade .15s;z-index:2}
.gstageask .box{width:min(440px,100%);background:var(--bg2);border:1px solid var(--line2);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh3);animation:up .25s var(--ease);margin-bottom:env(safe-area-inset-bottom,0px)}
.gstageask.still,.gstageask.still .box{animation:none}
.gstageask .box .h2{margin:0}
.gstageask .box p{margin:0 0 4px}
.conn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--s1);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--t2);flex:none}
.conn i{width:8px;height:8px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.conn.off{color:var(--gol)}.conn.off i{background:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,.2);animation:blink 1s infinite}
.vpill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:rgba(16,185,129,.14);color:var(--gnl);font-size:12px;font-weight:700;flex:none}
.gstatus.myturn{color:var(--vil);animation:blink 1.6s ease-in-out 2}
.turndot{width:8px;height:8px;border-radius:50%;background:var(--vil);flex:none;animation:blink 1.2s infinite}
.gresult{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);text-align:center;animation:gresin .35s var(--ease)}
@keyframes gresin{from{transform:scale(.92);opacity:0}}
.gresult.win{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(236,72,153,.12));border-color:rgba(245,158,11,.4)}
.gresult b{font:700 20px/1.3 var(--fd)}
.gremo{font-size:40px;line-height:1}
.gwait{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 12px;text-align:center}
.gchatbox{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--s1);overflow:hidden;min-height:200px;max-height:300px}
.gchath{padding:10px 12px;border-bottom:1px solid var(--line);gap:10px}
.gchat.chat{padding:10px 12px;-webkit-mask-image:none;mask-image:none;min-height:0}
.gchat .msg{background:var(--s2);color:var(--t1)}
.gchat .msg.join{color:var(--t2)}
.gchatbox .cin{padding:8px;border-top:1px solid var(--line);flex:none}
.gchatbox .cin input{background:var(--bg);height:40px}
@media (prefers-reduced-motion:reduce){.gstatus.myturn,.turndot,.conn.off i{animation:none}}
@media (max-width:480px){.gstagebar .vtxt{display:none}.gstagebar .conn{padding:0 8px}}
/* tablet / laptop / landscape phone: board on the left, controls + chat on the right */
@media (min-width:768px),(orientation:landscape) and (min-width:600px){
  .gstagebody{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:stretch;overflow:hidden;padding:16px 20px}
  .gstage.noside .gstagebody{grid-template-columns:minmax(0,1fr)}
  .gstagemain{overflow-y:auto;min-height:0;padding-inline:6px;scrollbar-width:thin}
  .gstageside{overflow-y:auto;min-height:0}
  .gchatbox{flex:1;max-height:none}
  .gstageask{align-items:center}
}
@media (orientation:landscape) and (max-height:520px){
  .gstagebar{padding:6px 12px}.gstagebody{padding:10px 14px;gap:10px}
  .gstagemain{gap:8px}.gstagemain .gp{padding-block:3px}
  .gstagemain>.gkboard{max-width:min(100%,calc(100dvh - 150px))}
  .gstagemain>.gkboard:has(.gk-sudoku,.gk-snake,.gk-minesweeper,.gk-wordhunt,.gk-wb-row,.gk-cards,[class*=gk-dominoes]){max-width:min(100%,560px)}
  /* the carrom board is square: it must fit the screen height whole (the column scrolls the names out of the way) */
  .gstagemain>.gkboard:has([class*=gk-carrom]){max-width:min(100%,calc(100dvh - 72px))}
}
@media (min-width:1200px){.gstagebody{grid-template-columns:minmax(0,1fr) 360px;max-width:1440px;gap:24px}}
@media (min-width:1600px){.gstagebody{grid-template-columns:minmax(0,1fr) 400px;max-width:1600px}.gstagemain>.gkboard{max-width:720px}}
.gstagescrim{animation:none}
.mainonly,.sideonly{display:flex;flex-direction:column;gap:10px}
.sideonly{display:none}
.gstage.noside .gstageside{display:none}
.gstagemain>.gkboard,.gstagemain>.ttt,.gstagemain>.c4wrap{margin-block:auto}
#app:has(.gstage) .demo-flag{display:none}
@media (min-width:768px),(orientation:landscape) and (min-width:600px){
  .mainonly{display:none}
  .gstage:not(.noside) .sideonly{display:flex}
  .gstage.noside .mainonly{display:flex}
  .gstageside .gplayers{flex-direction:column;flex-wrap:nowrap}
  .gstageside .gp{border-radius:14px;padding:8px 12px 8px 8px}
  .gstageside .gstatus{text-align:start}
}
/* ---- profile cover: change button + wide crop window ---- */
.edcover{position:relative}
.cvcam{position:absolute;top:10px;inset-inline-end:10px;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:0;background:rgba(15,23,42,.55);color:#fff;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.cvcam:hover{background:rgba(15,23,42,.7)}.cvcam:focus-visible{outline:2px solid #fff;outline-offset:2px}
.avwin.cvwin{width:300px;height:100px;border-radius:14px}
@media (max-width:359px){.avwin.cvwin{transform:scale(.88);margin:-6px -18px}}
/* ---- Go Live: real camera preview with camera / mic / flip controls ---- */
/* same shape as the live stage it previews: portrait-ish on phones, 16:10 on wide screens */
.golv.lpbox{height:auto;aspect-ratio:3/4;width:min(100%,calc(52vh * .75));max-height:none;margin-inline:auto;padding:0}
.lpbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.lpbox video.mirror{transform:scaleX(-1)}
.lpbox .vfb{padding:16px;text-align:center}
.lpbox .vfb b{color:#F1F5F9;font-size:15px}
.lperr{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#FCD34D}
.lpbar{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.lpctl{width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;backdrop-filter:blur(8px);transition:background .15s}
.lpctl:hover:not([disabled]){background:rgba(255,255,255,.28)}
.lpctl.off{background:#E11D48}
.lpctl[disabled]{opacity:.45;cursor:not-allowed}
.lpctl:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lpmic{position:relative;display:inline-grid}
.lplvl{position:absolute;inset-inline:8px;bottom:-6px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.lplvl i{display:block;height:100%;background:#34D399;transform-origin:left;transform:scaleX(0);transition:transform .08s linear}
[dir=rtl] .lplvl i{transform-origin:right}
@media (min-width:900px){.golv.lpbox{aspect-ratio:16/10;width:100%}}
@media (prefers-reduced-motion:reduce){.lplvl i{transition:none}}

/* ================= Game Coins (virtual, free, non-transferable) — js/economy/ui.js ================= */
.gcoin{display:inline-grid;place-items:center;flex:none;border-radius:50%;font-weight:800;line-height:1;color:#fff;background:radial-gradient(circle at 32% 28%,#5EEAD4,#0D9488 58%,#115E59);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.2);font-family:var(--fd,system-ui)}
.gcn{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.gcpill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 6px;border-radius:999px;border:1px solid var(--line);background:var(--s1);color:var(--t1);font-weight:700;font-size:13px;position:relative;cursor:pointer}
.gcpill:focus-visible{outline:3px solid var(--vil);outline-offset:2px}
.gcdot{position:absolute;top:4px;inset-inline-end:4px;width:8px;height:8px;border-radius:50%;background:#14B8A6;box-shadow:0 0 0 2px var(--s1)}
.gcbig{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0}.gcbig b{font:800 34px/1 var(--fd)}
.gcnote{padding:10px 12px;border-radius:12px;background:var(--s2)}
.up{color:var(--gnl)}.down{color:var(--rdl)}
.gtxlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.gtxrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--s1);border:1px solid var(--line);font-size:13.5px}
.gtxrow .num{font-weight:700}
/* entry sheet */
.rktable{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rkth,.rktr{display:grid;grid-template-columns:4.5em 5.5em 1fr;gap:8px;align-items:center;padding:9px 12px;font-size:13px}
.rkth{background:var(--s2);color:var(--t2);font-weight:600;font-size:12px}
.rktr+.rktr{border-top:1px solid var(--line)}
.rkpz{display:flex;flex-wrap:wrap;gap:4px 12px;min-width:0}.rkpz>span{white-space:nowrap}
.rkyou{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;background:var(--s1);border:1px solid var(--line);font-size:13.5px}
.rkmode .ico{background:rgba(20,184,166,.14)}
/* match panel */
.gecon{border:1px solid rgba(20,184,166,.35);border-radius:14px;background:linear-gradient(135deg,rgba(20,184,166,.10),rgba(124,58,237,.06));font-size:13px}
.gecon summary{display:flex;align-items:center;gap:6px;padding:9px 12px;cursor:pointer;list-style:none;min-height:40px}
.gecon summary::-webkit-details-marker{display:none}
.gecon summary .dot{color:var(--t3)}
.gecon[open] summary svg{transform:rotate(180deg)}
.geconb{padding:0 12px 10px;display:flex;flex-direction:column;gap:6px}
.rktimer{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums}
.rktimer.low{color:var(--rdl);font-weight:700}
/* results */
.rkres{display:flex;flex-direction:column;gap:10px}
.rklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rklist li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--s1);border:1px solid var(--line);min-width:0}
.rklist li.paid{border-color:rgba(245,158,11,.4)}
.rklist li.me{box-shadow:0 0 0 2px var(--vi) inset}
.rklist .pl{width:28px;text-align:center;font-size:20px;flex:none}
.rkpr{font-weight:800;white-space:nowrap}.rklist li.paid .rkpr{color:var(--gol)}.rklist li:not(.paid) .rkpr{color:var(--t3);font-weight:600;font-size:12.5px}
.rksum{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.rksum>span{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--s2)}
.rksum b{font:700 17px var(--fd)}
/* games hub card */
.gechub{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-lg,20px);border:1px solid rgba(20,184,166,.3);background:linear-gradient(160deg,rgba(20,184,166,.10),rgba(124,58,237,.08) 60%,transparent),var(--s1)}
.gechead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gechtop{display:flex;flex-direction:column;gap:8px}
/* podium */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px}
.pod{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 0;border:0;background:none;color:inherit;min-width:0;cursor:pointer;border-radius:16px}
.pod:focus-visible{outline:3px solid var(--vil);outline-offset:2px}
.pod b{max-width:100%;font-size:13.5px}.pod .cap{font-size:11px}
.pmed{font-size:22px;line-height:1}
.pst{display:flex;flex-direction:column;align-items:center;font-size:11.5px;color:var(--t2)}
.podbar{display:grid;place-items:center;width:100%;margin-top:6px;border-radius:12px 12px 0 0;font:800 22px var(--fd);color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent),var(--pb,#64748B)}
.pod.p1 .podbar{height:74px;--pb:linear-gradient(135deg,#F59E0B,#B45309)}.pod.p2 .podbar{height:54px;--pb:linear-gradient(135deg,#94A3B8,#475569)}.pod.p3 .podbar{height:40px;--pb:linear-gradient(135deg,#D97706,#78350F)}
/* leaderboard screen */
.lbpg{display:flex;flex-direction:column;gap:14px}
.lbpg .chiprow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.lbpg .chiprow .chip{flex:none}
.lbcols{display:flex;flex-direction:column;gap:14px}
.lbmain{display:flex;flex-direction:column;gap:12px;min-width:0}
.lblist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lbrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--s1);border:1px solid var(--line);min-width:0}
.lbrow.me{box-shadow:0 0 0 2px var(--vi) inset}
.lbrow .rk{width:2em;text-align:center;font-weight:800;color:var(--t2);flex:none}
.lbv{display:flex;flex-direction:column;align-items:flex-end;flex:none}.lbv b{font:700 15px var(--fd)}
.lbme{display:flex;flex-direction:column;gap:10px}
.lbhow p{margin:0;font-size:13.5px}
/* profile game stats */
.pgs{width:100%;text-align:start;display:flex;flex-direction:column;gap:10px}
.pgsgrid{display:grid;grid-template-columns:1fr;gap:8px}
.pgscard{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--s1);color:inherit;text-align:start;cursor:pointer;min-width:0}
.pgscard:focus-visible{outline:3px solid var(--vil);outline-offset:2px}
.pgsk{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--t15)}
.kvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kvgrid .kv{grid-template-columns:1fr;margin:0;gap:2px}.kvgrid .kv b{text-align:start;font:700 17px var(--fd)}
@media (min-width:768px){
  .pgsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kvgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pod b{font-size:15px}.pod.p1 .podbar{height:96px}.pod.p2 .podbar{height:70px}.pod.p3 .podbar{height:52px}
}
@media (min-width:1200px){
  .lbcols{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  .lbside{position:sticky;top:12px}
  .pgsgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gechub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start}.gechub>.cap{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.gecon[open] summary svg{transform:none}}
@media (min-width:768px){.lbpg .chiprow{flex-wrap:wrap;overflow:visible}}
.pod{overflow:visible}.podbar{flex:none;line-height:1}
@media (max-width:560px){.apphead .gcpill{display:none}}

/* ---- Game Coin levels, wallet, buy & convert (js/economy/ui.js) ---- */
.gcacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.gcacts .btn{min-height:44px}
.walletpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wcard{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--s1);min-width:0}
.wcard.game{border-color:rgba(20,184,166,.45);background:linear-gradient(160deg,rgba(20,184,166,.12),transparent 70%),var(--s1)}
.wcard.app{border-color:rgba(245,158,11,.4);background:linear-gradient(160deg,rgba(245,158,11,.10),transparent 70%),var(--s1)}
.wbig{font:800 22px/1.1 var(--fd);overflow-wrap:anywhere}
.gccard{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-lg,20px);border:1px solid rgba(20,184,166,.4);background:linear-gradient(160deg,rgba(20,184,166,.10),transparent 70%),var(--s1)}
.gtxid{color:var(--t3);font-size:11px}
.gpacks{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.gpack{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border-radius:16px;border:1px solid rgba(20,184,166,.35);background:var(--s1);color:inherit;cursor:pointer}
.gpack b{font:800 20px var(--fd)}.gpack:focus-visible{outline:3px solid var(--vil);outline-offset:2px}
/* conversion */
.convbox{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--s1)}
.convamt{font:700 24px var(--fd);text-align:start;height:54px}
.convarrow{align-self:center;display:grid;place-items:center;width:38px;height:38px;margin:-8px 0;border-radius:50%;background:var(--s2);border:1px solid var(--line);font-size:18px;color:var(--t2);z-index:1}
.convrecv{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.convrecv b{font:800 24px var(--fd);color:#0D9488;overflow-wrap:anywhere}
[data-mode=dark] .convrecv b{color:#5EEAD4}
.convkv{margin:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.convkv>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;font-size:13.5px}
.convkv>div+div{border-top:1px solid var(--line)}
.convkv dt{color:var(--t2)}.convkv dd{margin:0;text-align:end;display:flex;flex-direction:column;align-items:flex-end}
.convok{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;text-align:center}
.okmark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#14B8A6,#0D9488);color:#fff;font:800 32px/1 var(--fd);box-shadow:0 10px 26px rgba(20,184,166,.35);animation:okpop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes okpop{from{transform:scale(.4);opacity:0}}
.convsum{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.convsum>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--s2)}
.convsum b{font:700 16px var(--fd);overflow-wrap:anywhere}
.gconv .seg button[disabled]{opacity:.45}
/* entry levels */
.rkbal{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:14px;background:var(--s2)}
.rktiers .chip{min-width:72px;justify-content:center}.rktiers .chip.dim:not(.on){opacity:.55}
.rkpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rkpick>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--s1);border:1px solid var(--line);min-width:0}
.rkpick b{font:700 16px var(--fd);overflow-wrap:anywhere}
.rkshort{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;border:1px solid rgba(248,113,113,.45);background:rgba(248,113,113,.08)}
.rkshort>b{color:var(--rdl)}.rkshort p{margin:0}
@media (max-width:380px){.walletpair,.rkpick{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.okmark{animation:none}}
.sheet.gconv>*,.sheet.rkentry>*{flex-shrink:0}
.rkpick b{white-space:nowrap;overflow-wrap:normal;font-size:clamp(12.5px,3.5vw,16px)}
.rkpick>div{padding-inline:10px}

/* ---------------- Privacy Policy consent & reader ---------------- */
.pconsent{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line2)}
.pconsent.bad{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.08);color:var(--t1);align-items:flex-start}
.pconsent.nudge{animation:pcnudge .45s var(--ease);border-color:var(--vil)}
@keyframes pcnudge{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.pconsent.nudge{animation:none}}
.pcagree{display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:600;line-height:1.4;color:var(--t1);cursor:pointer;min-height:44px;padding:4px 0}
.pcagree input{accent-color:var(--acc-btn);width:22px;height:22px;margin:0;flex:none;cursor:pointer}
.pcagree input:focus-visible{outline:3px solid var(--vil);outline-offset:3px;border-radius:4px}
.pcrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-inline-start:34px}
.pplink{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 2px;background:none;border:0;color:var(--vill);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pplink:focus-visible{outline:3px solid var(--vil);outline-offset:2px;border-radius:6px}
.pcskel{height:18px;width:78%}.pcskel.short{width:46%;height:14px}
.sheet.ppsheet{max-height:100%;height:100%;border-radius:0;padding:0;gap:0;overflow:hidden}
@media (min-width:720px) and (max-width:767.98px){.sheet.ppsheet{max-width:760px;margin-inline:auto;height:94%;top:3%;border-radius:24px;border:1px solid var(--line2)}}
/* 768px+: centred like the other dialogs (the shared .sheet rule centres with translate(-50%,50%)), just taller and wider */
@media (min-width:768px){.sheet.ppsheet{top:auto;bottom:50%;width:min(760px,calc(100% - 48px));height:min(92vh,960px);max-height:92vh;padding:0;border-radius:24px}.ppsheet .pptop{padding-top:10px}}
.pptop{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;border-bottom:1px solid var(--line);flex:none}
.pptop h2{flex:1;text-align:center;margin:0}
.pptop a.xbtn{display:inline-flex;align-items:center;justify-content:center;color:var(--t1)}
.ppscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding:22px 20px 28px;-webkit-overflow-scrolling:touch}
@media (prefers-reduced-motion:reduce){.ppscroll{scroll-behavior:auto}}
.ppfoot{flex:none;display:flex;flex-direction:column;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line2);background:var(--bg2);box-shadow:0 -10px 30px rgba(0,0,0,.18)}
.pphead{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.pptitle{font-family:var(--fd,inherit);font-size:clamp(24px,6vw,30px);line-height:1.2;font-weight:800;margin:0;text-wrap:balance}
.ppmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:6px 0 0;padding:14px;border-radius:var(--r-md);background:linear-gradient(135deg,rgba(var(--vil-rgb),.14),rgba(var(--vil-rgb),.04));border:1px solid rgba(var(--vil-rgb),.25)}
.ppmeta div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ppmeta dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.ppmeta dd{margin:0;font-size:14.5px;font-weight:600;color:var(--t1);overflow-wrap:anywhere}
.pptoc{margin:0 0 22px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line2);background:var(--s1)}
.pptoc ol{margin:8px 0 0;padding-inline-start:20px;display:grid;gap:4px}
.pptoc li{color:var(--t3)}
.pptoc .link{font-size:14px;text-align:start;min-height:32px}
.ppbody{font-size:16px;line-height:1.7;color:var(--t15);max-width:68ch;overflow-wrap:anywhere}
.ppbody h2{font-size:19px;line-height:1.35;color:var(--t1);margin:30px 0 10px;padding-top:18px;border-top:1px solid var(--line);scroll-margin-top:12px}
.ppbody h2:first-child{margin-top:0;padding-top:0;border-top:0}
.ppbody h3{font-size:16.5px;color:var(--t1);margin:20px 0 6px}
.ppbody h4{font-size:15px;color:var(--t1);margin:16px 0 4px}
.ppbody p{margin:0 0 12px}
.ppbody ul,.ppbody ol{margin:0 0 14px;padding-inline-start:22px;display:grid;gap:6px}
.ppbody li::marker{color:var(--vil)}
.ppbody strong{color:var(--t1)}
.ppbody a{color:var(--vill);text-decoration:underline;text-underline-offset:3px}
.ppbody hr{border:0;border-top:1px solid var(--line2);margin:22px 0}
.ppweb{margin:26px 0 0;text-align:center}
.ppweb .link{display:inline-flex;align-items:center;gap:6px}
.ppskel{display:flex;flex-direction:column;gap:12px}
.pperr{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:40px 12px}
.pperr .ic{color:var(--t3)}
.cgate{align-items:stretch;gap:16px;max-width:520px;padding-top:max(40px,8vh)}
.cgate .logo,.cgate>svg{align-self:center}
.cgicon{align-self:center;width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--vi),var(--pk));box-shadow:0 10px 30px rgba(var(--vil-rgb),.35)}
.cgcard{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--r-md);background:var(--s1);border:1px solid var(--line2)}
.cgcard>div{display:flex;flex-direction:column;gap:2px}
.cgsaving{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;color:var(--t2)}
.pppublic{max-width:820px;margin-inline:auto;padding:0 16px 40px}
.pubbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 0 12px;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:22px}
.pubbar .wm{font-size:20px}
.ppcard{padding:clamp(18px,4vw,34px);border-radius:24px;background:var(--bg2);border:1px solid var(--line2)}
.cgate .link{display:inline-flex;align-items:center;justify-content:center;gap:6px}

/* ---------------- account setup (after sign-in) ---------------- */
.sheet.setupsheet{max-height:100%}
.sucard{display:flex;flex-direction:column;gap:14px;padding:6px 2px 4px}
.suprog{height:8px;border-radius:99px;background:var(--s3);overflow:hidden}
.suprog>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--vi),var(--pk));transition:width .35s var(--ease)}
.suprog>span.bad{background:var(--rdl)}
.ssteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sstep{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--t3);min-height:32px}
.sstep.ok,.sstep.now{color:var(--t1)}
.sstep.now{font-weight:600}
.sstep.bad{color:var(--rdl);font-weight:600}
.smark{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--s2);border:1px solid var(--line2)}
.sstep.ok .smark{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.45);color:var(--gnl)}
.sstep.bad .smark{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.45);color:var(--rdl)}
.smark .dot{width:6px;height:6px;border-radius:50%;background:var(--line3)}
@media (prefers-reduced-motion:reduce){.suprog>span{transition:none}}

/* Privacy Center: states, search, quick topics, contents (mobile: collapsible · desktop public page: sticky side) */
.ppeff{margin:0;color:var(--t2);font-size:14px}
.ppstale{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:var(--r-md);background:rgba(var(--vil-rgb),.08);border:1px solid rgba(var(--vil-rgb),.22);font-size:13.5px;color:var(--t15)}
.ppstale .ic{flex:none;margin-top:2px;color:var(--vil)}
.ppquick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ppchip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--s1);color:var(--t1);font-weight:600;font-size:13px}
.ppchip:hover{border-color:rgba(var(--vil-rgb),.5)}
.ppsearch{position:relative;display:flex;flex-direction:column;gap:4px;margin:0 0 16px}
.ppsearch .inp{padding-inline-start:38px;min-height:44px}
.ppsi{position:absolute;inset-inline-start:13px;top:14px;color:var(--t3);pointer-events:none;line-height:0}
.ppsearch #ppHits:empty{display:none}
details.pptoc{padding:0}
details.pptoc>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;padding:0 16px;cursor:pointer;list-style:none;border-radius:var(--r-md)}
details.pptoc>summary::-webkit-details-marker{display:none}
details.pptoc>summary .ic{transition:transform .2s var(--ease)}
details.pptoc[open]>summary .ic{transform:rotate(180deg)}
details.pptoc>ol{margin:0;padding:0 16px 14px 36px}
details.pptoc>summary:focus-visible,.ppchip:focus-visible{outline:2px solid var(--vil);outline-offset:2px}
.pptoc.side{display:none}
.ppnone{color:var(--t3);font-style:italic}
.ppref{display:block;opacity:.85}
.ppcontact{margin-top:28px;padding:18px;border-radius:var(--r-lg);border:1px solid var(--line2);background:var(--s1);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ppcontact p{margin:0}
.pperr .btn .ic,.pconsent .btn .ic{margin-inline-end:6px}
@media (prefers-reduced-motion:reduce){details.pptoc>summary .ic{transition:none}}
@media (min-width:1024px){
  .pppublic:has(.pplay.wide){max-width:1120px}
  .pplay.wide{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
  .pplay.wide>details.pptoc{display:none}
  .pplay.wide>.pptoc.side{display:block;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;margin:0}
}
.pptoc li{padding-block:5px}
.pptoc .link{display:inline-block;min-height:0;line-height:1.45;vertical-align:top;padding:0 2px}

/* ================= Lucky Games (Game Center) ================= */
.lksec{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-lg);border:1px solid rgba(250,204,21,.28);background:radial-gradient(80% 60% at 100% 0%,rgba(250,204,21,.10),transparent 70%),linear-gradient(160deg,rgba(124,58,237,.12),transparent 60%),var(--s1);min-width:0}
.lkhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lktools{display:flex;flex-direction:column;gap:10px;min-width:0}
.lksearch{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:14px;border:1px solid var(--line2);background:var(--bg2);color:var(--t2)}
.lksearch .inp{border:0;background:transparent;padding:10px 0;flex:1;min-width:0;outline:none}
.lksec .chiprow{margin:0;padding-inline:0}
.lkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){.lkgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:860px){.lkgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.lkgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.lkcw{position:relative;min-width:0}
.lkcard{width:100%;display:flex;flex-direction:column;gap:6px;padding:8px 8px 10px;border-radius:18px;border:1px solid var(--line);background:var(--bg2);text-align:start;color:var(--t1);transition:transform .18s var(--ease),border-color .18s,box-shadow .18s;position:relative}
.lkcard:hover{transform:translateY(-2px);border-color:rgba(250,204,21,.45);box-shadow:var(--sh2)}
.lkcard:active{transform:scale(.98)}
.lkcard.dim .lkimg{filter:saturate(.55) brightness(.8)}
.lkimg{display:block;aspect-ratio:1;max-width:100%;border-radius:14px;overflow:hidden}
.lkimg svg,.lkhero svg,.lkmini svg{width:100%;height:100%;display:block}
.lkname{font:700 14px/1.2 var(--fd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lkmeta{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--t2)}
.lktag{position:absolute;top:14px;inset-inline-start:14px;padding:3px 8px;border-radius:999px;font:700 10px/1.3 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(15,23,42,.72);backdrop-filter:blur(4px)}
.lktag.new{background:linear-gradient(135deg,#F59E0B,#DB2777)}
.lktag.maint{background:#B45309}
.lkfav{position:absolute;top:12px;inset-inline-end:12px;width:32px;height:32px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(15,23,42,.6);color:#fff;padding:0}
.lkfav.on{color:#F472B6}.lkfav.on svg{fill:currentColor}
.lknone{text-align:center;padding:12px}
.lkdetail{display:flex;flex-direction:column;gap:12px}
.lkhero{width:min(180px,50%);aspect-ratio:1;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:var(--sh2)}
.lkfacts{display:flex;flex-wrap:wrap;gap:6px}
.lkfacts .pill,.lktrinfo .pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--s2);color:var(--t1);font-size:12px;font-weight:700}
.lkpays{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--s1)}
.lkpays summary{cursor:pointer;font-weight:700}
.lkpays[open] summary{margin-bottom:8px}
.lkpay{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.lkpay:last-of-type{border-bottom:0}
.lksyms{display:inline-flex;gap:2px}.lksy{width:26px;height:26px;display:inline-block}.lksy svg{width:100%;height:100%}
.lksegs{display:flex;flex-wrap:wrap;gap:6px}.lksegs span{padding:4px 8px;border-radius:8px;background:var(--s2);font-weight:700;font-size:12px}.lksegs .z{opacity:.55}
.lkhist,.lkboard{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.lkhrow{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--s1);border:1px solid var(--line);min-width:0}
.lkhrow>div{display:flex;flex-direction:column}
.lkmini{width:42px;height:42px;border-radius:12px;overflow:hidden;flex:none}
.lkid{font-size:11px;opacity:.8}
.up{color:var(--gnl)}.down{color:var(--rdl)}
.lkboard li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--s1);border:1px solid var(--line)}
.lkboard li.me{border-color:var(--vil);background:var(--wash)}
.lkboard li>span.grow{display:flex;flex-direction:column}
.lkrank{width:28px;text-align:center;font-weight:800;color:var(--gol)}
.lkwon{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- playing screen: one committed dark "night table" look in both app themes ---- */
.lkplay{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));color:#F8FAFC;
  background:radial-gradient(70% 45% at 50% 18%,rgba(250,204,21,.14),transparent 70%),radial-gradient(90% 60% at 50% 100%,rgba(124,58,237,.35),transparent 70%),#0B0717;overflow-y:auto;outline:none;animation:dlg .22s var(--ease)}
.lkplay .cap,.lkplay .over{color:#C4B5FD}
.lkplay .ibtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#F8FAFC}
.lkplay .ibtn[disabled]{opacity:.4}
.lkplay .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#E2E8F0}
.lkplay .chip.on{background:#FACC15;color:#1F1300;border-color:#FACC15}
.lkplay .chip[aria-disabled=true]{opacity:.45}
.lkplay .pill{background:rgba(255,255,255,.09);color:#F8FAFC;border-color:rgba(255,255,255,.14)}
.lkbar{display:flex;align-items:center;gap:8px;width:100%;max-width:720px;margin:0 auto}
.lkbar b{font:700 18px var(--fd)}
.gcpill.static{cursor:default;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#F8FAFC}
.lkhelp{max-width:720px;margin:0 auto;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.lkstage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:260px;width:100%;max-width:720px;margin:0 auto}
.lklive{min-height:52px;display:flex;justify-content:center;width:100%;max-width:720px;margin:0 auto}
.lkban{padding:10px 18px;border-radius:24px;font:800 16px var(--fd);text-align:center;animation:lkpop .35s var(--ease);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 6px;max-width:100%}
.lkban small{flex-basis:100%}
.lkban small{font:500 11px var(--fb);opacity:.85}
.lkban.win{background:linear-gradient(135deg,#FACC15,#F59E0B);color:#1F1300;box-shadow:0 8px 30px rgba(250,204,21,.35)}
.lkban.big{background:linear-gradient(135deg,#FDE68A,#F472B6,#A78BFA);font-size:19px}
.lkban.lose{background:rgba(255,255,255,.08);color:#CBD5E1}
.lkban.push{background:rgba(56,189,248,.18);color:#BAE6FD}
.lkerr{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;width:100%;max-width:720px;margin:0 auto;padding:10px 12px;border-radius:14px;background:rgba(239,68,68,.16);border:1px solid rgba(248,113,113,.4);color:#FECACA}
.lkerr .xbtn{color:#FECACA}
.lkctl{display:flex;flex-direction:column;gap:10px;width:100%;max-width:520px;margin:0 auto}
.lkbet{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.lkbetv{display:flex;flex-direction:column;align-items:center}
.lkbetv b{display:inline-flex;align-items:center;gap:6px;font:800 20px var(--fd)}
.lkchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.lkchips .chip{flex:none}
.lkplay .lkgo{height:56px;border:0;font:800 18px var(--fd);border-radius:18px;background:linear-gradient(135deg,#FACC15,#F97316);color:#1F1300;box-shadow:0 10px 30px rgba(249,115,22,.35);display:flex;align-items:center;justify-content:center;gap:10px}
.lkplay .lkgo[disabled]{opacity:.7;box-shadow:none}
.lkoff{padding:24px;text-align:center}
/* reels */
.lkreels{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,420px);padding:14px;border-radius:26px;background:linear-gradient(180deg,#2E1065,#1E1B4B);border:3px solid #FACC15;box-shadow:0 0 0 6px rgba(250,204,21,.12),0 20px 50px rgba(0,0,0,.5)}
.lkreel{aspect-ratio:3/4;max-width:100%;border-radius:16px;background:linear-gradient(180deg,#F8FAFC,#E2E8F0 50%,#F8FAFC);overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 6px 12px rgba(0,0,0,.25),inset 0 -6px 12px rgba(0,0,0,.25)}
.lkface{width:78%;display:block}.lkface svg,.lkstrip svg,.lkcell svg{width:100%;height:auto;display:block}
.lkstrip{display:flex;flex-direction:column;width:78%;animation:lkroll .35s linear infinite;filter:blur(1.5px)}
.lkface.drop{animation:lkdrop .45s var(--ease) both}
.lkface.hl{animation:lkdrop .45s var(--ease) both,lkglow 1s ease-in-out 1.6s infinite alternate}
.lkreels.won{border-color:#FDE68A;box-shadow:0 0 0 6px rgba(250,204,21,.25),0 0 50px rgba(250,204,21,.45)}
.lkpayline{position:absolute;left:10px;right:10px;top:50%;height:2px;background:rgba(250,204,21,.45);pointer-events:none}
/* 3x3 grid */
.lkgridb{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,380px);padding:12px;border-radius:24px;background:linear-gradient(160deg,#064E3B,#1E1B4B);border:3px solid #34D399}
.lkcell{aspect-ratio:1;max-width:100%;border-radius:14px;background:rgba(255,255,255,.9);display:grid;place-items:center;overflow:hidden}
.lkcell>span{width:74%}
.lkcell.hl{background:#FEF3C7;box-shadow:0 0 0 3px #FACC15}
.lkblur{animation:lkroll .3s linear infinite;filter:blur(1.5px)}
.lklines{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);pointer-events:none}
.lklines line{stroke:#F59E0B;stroke-width:6;stroke-linecap:round;opacity:.85;stroke-dasharray:400;animation:lkline .5s ease-out 1.1s both}
/* wheel */
.lkwheel{position:relative;width:min(100%,380px);aspect-ratio:1;max-width:100%}
.lkwsvg{width:100%;height:100%;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.lkwsvg.idle{animation:lkspinIdle 1s linear infinite}
.lkwsvg.land{animation:lkspin 4s cubic-bezier(.15,.85,.2,1) both}
.lkwt{fill:#fff;font:800 11px var(--fd);text-anchor:middle;dominant-baseline:middle}
.lkptr{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:28px solid #FACC15;z-index:2;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.lkwres{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:800 18px var(--fd);color:#FACC15;animation:lkpop .35s var(--ease)}
/* teen patti */
.lktable{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,460px);padding:18px;border-radius:120px/60px;background:radial-gradient(ellipse at center,#166534,#052e16 75%);border:6px solid #78350F;box-shadow:inset 0 0 40px rgba(0,0,0,.5),0 20px 50px rgba(0,0,0,.5)}
.lkhand{display:flex;flex-direction:column;align-items:center;gap:6px}
.lkcards{display:flex;gap:8px}
.lkvs{font:800 13px var(--fd);color:#FDE68A;letter-spacing:.1em}
.lkcard3{position:relative;width:clamp(52px,16vw,74px);aspect-ratio:5/7;perspective:600px}
.lkcard3>span{position:absolute;inset:0;border-radius:9px;backface-visibility:hidden;transition:none}
.lkcard3 .back{background:repeating-linear-gradient(45deg,#7C3AED 0 6px,#5B21B6 6px 12px);border:3px solid #F8FAFC}
.lkcard3 .front{background:#F8FAFC;color:#0F172A;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotateY(180deg);font-family:Georgia,'Times New Roman',serif}
.lkcard3 .front.red{color:#BE123C}
.lkcard3 .front b{font-size:clamp(18px,5vw,26px)}.lkcard3 .front i{font-style:normal;font-size:clamp(18px,5vw,26px);line-height:1}
.lkcard3.open .back{animation:lkflipB .5s var(--ease) both;animation-delay:inherit}
.lkcard3.open .front{animation:lkflipF .5s var(--ease) both;animation-delay:inherit}
.lktable.dealing .lkcard3{animation:lkdeal .6s ease-in-out infinite alternate}
/* treasure */
.lktrinfo{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.lkchests{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:8px;width:min(100%,420px)}
.lkchest{aspect-ratio:1;max-width:100%;border-radius:14px;border:1px solid rgba(250,204,21,.3);background:linear-gradient(160deg,#3B0764,#1E1B4B);padding:12%;display:grid;place-items:center;color:inherit;transition:transform .15s}
.lkchest svg{width:100%;height:100%}
.lkchest:not([disabled]):hover{transform:translateY(-2px);border-color:#FACC15}
.lkchest:not([disabled]):active{transform:scale(.94)}
.lkchest.got{background:linear-gradient(160deg,#0E7490,#164E63);border-color:#67E8F9;animation:lkpop .3s var(--ease)}
.lkchest.trap{background:#450A0A;border-color:#F87171}
.lkchest.hit{box-shadow:0 0 0 3px #F87171,0 0 24px rgba(248,113,113,.6);animation:lkshake .4s}
.lkchest.empty{opacity:.35}
.lkchest.wait{animation:lkpulse .6s ease-in-out infinite alternate}
.lkchest[disabled]{cursor:default}
/* confetti */
.lkconf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lkconf i{position:absolute;top:-12px;left:var(--x);width:8px;height:14px;border-radius:2px;animation:lkfall 2.2s ease-in var(--d) both}
@keyframes lkroll{from{transform:translateY(0)}to{transform:translateY(-40%)}}
@keyframes lkdrop{0%{transform:translateY(-60%);opacity:0}70%{transform:translateY(6%);opacity:1}100%{transform:none;opacity:1}}
@keyframes lkglow{to{filter:drop-shadow(0 0 10px rgba(250,204,21,.9))}}
@keyframes lkpop{0%{transform:scale(.85);opacity:0}100%{transform:none;opacity:1}}
@keyframes lkline{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
@keyframes lkspin{from{transform:rotate(0)}to{transform:rotate(var(--rot))}}
@keyframes lkspinIdle{to{transform:rotate(360deg)}}
@keyframes lkflipB{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes lkflipF{from{transform:rotateY(180deg)}to{transform:rotateY(0)}}
@keyframes lkdeal{to{transform:translateY(-4px)}}
@keyframes lkshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes lkpulse{to{opacity:.5}}
@keyframes lkfall{to{transform:translateY(110vh) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){
  .lkplay,.lkplay *{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0ms!important}
  .lkwsvg.land{animation:none!important;transform:rotate(var(--rot))}
  .lkstrip,.lkblur,.lkwsvg.idle{animation:none!important;filter:none}
  .lkconf{display:none}
}
@media (min-width:900px){.lkplay{padding-inline:32px}}
/* room settings → seat layout picker */
.laypick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.laypick button{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:1px;align-items:center;text-align:start;padding:10px;border-radius:14px;border:1px solid var(--line2);background:var(--s1);color:var(--t1);min-height:56px}
.laypick button svg{grid-row:span 2;color:var(--vil)}
.laypick button b{font-size:13.5px}
.laypick button .cap{font-size:11.5px;line-height:1.3}
.laypick button[aria-checked=true]{border-color:var(--vil);background:var(--wash);box-shadow:0 0 0 1px var(--vil) inset}
.laypick button:disabled{opacity:.5;cursor:not-allowed}
.delico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:rgba(239,68,68,.14);color:var(--rdl)}
/* music queue: move up/down */
.qmove{display:inline-flex;flex-direction:column;gap:2px}
.qmove .ibtn{width:30px;height:22px;border-radius:8px}
.qmove .ibtn .ic{transform:rotate(90deg)}
[dir=rtl] .qmove .ibtn .ic{transform:rotate(90deg)}
.seat.reserved .slot{border:2px dashed var(--gol);color:var(--gol)}

/* ================= 1-to-1 calls (their own layer, above everything) ================= */
#callLayer{position:fixed;inset:0;z-index:90;pointer-events:none}
#callLayer.on{pointer-events:auto}
#callLayer.mini{inset:auto;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));pointer-events:auto}
.callscr{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:16px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(28px + env(safe-area-inset-bottom,0px));color:#F8FAFC;overflow:hidden;
  background:radial-gradient(70% 50% at 50% 28%,rgba(var(--vi-rgb),.42),transparent 72%),radial-gradient(60% 40% at 50% 100%,rgba(236,72,153,.18),transparent 70%),#080A14;animation:dlg .2s var(--ease)}
.callscr .ctop{width:100%;max-width:720px;display:grid;grid-template-columns:minmax(44px,auto) minmax(0,1fr) minmax(44px,auto);gap:8px;align-items:center;position:relative;z-index:2}
.callscr .ctop .ibtn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.cbadge{justify-self:center;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12px;font-weight:600;letter-spacing:.02em}
.cmid{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative;z-index:2;max-width:100%}
.cav{border-radius:50%;padding:6px;background:rgba(255,255,255,.06)}
.cav.pulse{animation:cpulse 1.8s ease-out infinite}
@keyframes cpulse{0%{box-shadow:0 0 0 0 rgba(var(--vi-rgb),.55)}100%{box-shadow:0 0 0 28px rgba(var(--vi-rgb),0)}}
.cname{font:700 26px/1.2 var(--fd);margin:6px 0 0;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callscr .cap{color:#CBD5E1}
.cstatus{margin:0;font-size:15px;color:#E2E8F0;min-height:22px}
.s-failed .cstatus,.s-busy .cstatus,.s-declined .cstatus{color:#FCA5A5}
.s-reconnecting .cstatus{color:#FCD34D}
.cnote{max-width:320px}
.crow{display:flex;justify-content:center;gap:clamp(14px,5vw,28px);position:relative;z-index:2;flex-wrap:wrap}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:#F8FAFC;padding:0;min-width:64px}
.cbtn>span{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);transition:transform .15s}
.cbtn:active>span{transform:scale(.94)}
.cbtn.on>span{background:#F8FAFC;color:#0F172A}
.cbtn.end>span{background:#E11D48;border-color:#E11D48}
.cbtn.end svg{transform:rotate(135deg)}
.cbtn.ok>span{background:#16A34A;border-color:#16A34A;animation:cring 1.2s ease-in-out infinite}
@keyframes cring{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}50%{transform:rotate(0)}}
.cbtn small{font-size:12px;color:#E2E8F0}
.cbtn:focus-visible>span{outline:3px solid #fff;outline-offset:3px}
/* call picture layer: big view (fill or fit over a blurred copy), floating self-view that can be dragged/swapped */
.cstage{position:absolute;inset:0;display:none}
#callLayer.on .cstage{display:block}
.cbig{position:absolute;inset:0;z-index:0;background:#05070D;overflow:hidden;display:none}
.cstage.hasbig .cbig{display:block}
.cbig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cbig .cbg{display:none;filter:blur(28px) brightness(.5) saturate(1.2);transform:scale(1.15)}
.cstage[data-fit=fit] .cbg{display:block}
.cstage[data-fit=fit] .cmain{object-fit:contain}
.cbig video.mirror{transform:scaleX(-1)}
.cbig .cbg.mirror{transform:scale(-1.15,1.15)}
.cstage[data-state=reconnecting] .cmain,.cstage[data-state=connecting] .cmain{filter:blur(6px) brightness(.6)}
.cui{position:absolute;inset:0;z-index:1}
.cpip{--pa:.75;position:absolute;z-index:3;width:auto;height:min(30vh,calc(min(28vw,150px) / var(--pa)));aspect-ratio:var(--pa);max-width:min(40vw,240px);border-radius:16px;overflow:hidden;background:#1E293B;border:2px solid rgba(255,255,255,.35);box-shadow:0 10px 30px rgba(0,0,0,.4);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;transition:top .2s,left .2s,right .2s,bottom .2s}
.cpip[hidden]{display:none}
.cpip.drag{transition:none;cursor:grabbing;opacity:.92}
.cpip video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cpip video.mirror{transform:scaleX(-1)}
.cpoff{position:absolute;inset:0;display:none;place-items:center;color:#94A3B8}
.cpip.off video{display:none}
.cpip.off .cpoff{display:grid}
.cpip[data-corner^=t]{top:calc(68px + env(safe-area-inset-top,0px))}
.cpip[data-corner^=b]{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
.cpip[data-corner$=l]{left:calc(12px + env(safe-area-inset-left,0px))}
.cpip[data-corner$=r]{right:calc(12px + env(safe-area-inset-right,0px))}
#callLayer.mini .cstage{display:none}
.callscr.vid{background:transparent}
.callscr.vid::before,.callscr.vid::after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:1}
.callscr.vid::before{top:0;height:160px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.callscr.vid::after{bottom:0;height:260px;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.callscr.vid .cmid{margin-top:auto;margin-bottom:8px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.callscr.rv .cmid .cname{font-size:20px}
.ctop .ibtn.on{background:#F8FAFC;color:#0F172A}
/* permission screen */
.callscr.s-permission{overflow-y:auto;justify-content:flex-start}
.callscr.s-permission .cperm{margin-block:auto}
.cperm{position:relative;z-index:2;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px 18px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.cperm h2{margin:4px 0 0;color:#fff}
.cperm p{margin:0;color:#E2E8F0;font-size:14px;line-height:1.5}
.cpermi{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:rgba(225,29,72,.18);color:#FDA4AF}
.cpermb{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:6px}
.cpermb .btn{width:100%;justify-content:center}
.callscr .cpermb .btn:not(.cta){background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.chow{width:100%;text-align:start;font-size:13px;color:#CBD5E1;border-top:1px solid rgba(255,255,255,.12);padding-top:8px;margin-top:4px}
.chow summary{cursor:pointer;font-weight:600;color:#fff;padding:4px 0}
.chow ul{margin:6px 0 0;padding-inline-start:18px;display:grid;gap:6px}
/* camera problem during a call */
.cbanner{position:relative;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:440px;padding:10px 14px;border-radius:14px;background:rgba(225,29,72,.9);color:#fff;font-size:13px}
.cbanner .btn{background:#fff;color:#9F1239;border-color:#fff}
.callpill{display:flex;align-items:center;gap:8px;max-width:240px;height:44px;padding:0 14px;border-radius:999px;border:0;background:#16A34A;color:#fff;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media (max-width:400px){.crow{gap:6px;flex-wrap:nowrap;width:100%}.cbtn{min-width:0;flex:1 1 0;max-width:72px}.cbtn>span{width:52px;height:52px}.cbtn small{font-size:11px;line-height:1.2;max-width:100%;text-align:center;overflow-wrap:anywhere}.cav .av{--s:104px!important}.cpip[data-corner^=b]{bottom:calc(132px + env(safe-area-inset-bottom,0px))}}
@media (max-width:340px){.cbtn>span{width:48px;height:48px}}
@media (min-width:900px){.cname{font-size:30px}.cbtn>span{width:72px;height:72px}.cpip{height:min(34vh,calc(220px / var(--pa)));max-width:300px}}
@media (orientation:landscape) and (max-height:520px){.cav{display:none}.callscr{padding-block:8px}.cname{font-size:20px}.cbtn>span{width:48px;height:48px}.cbtn small{display:none}.cpip{height:min(38vh,160px)}.cpip[data-corner^=t]{top:calc(52px + env(safe-area-inset-top,0px))}.cpip[data-corner^=b]{bottom:calc(76px + env(safe-area-inset-bottom,0px))}.cperm{max-height:calc(100vh - 80px);overflow:auto;padding:12px}.cpermi{display:none}}
@media (prefers-reduced-motion:reduce){.cav.pulse,.cbtn.ok>span{animation:none}}