@font-face{font-family:Vazir;src:url(/static/Vazir.ttf) format("truetype");font-display:swap}
/* Estedad (variable, 100–900: real bold, not a thickened regular), on trial on the landing (/hometest) */
@font-face{font-family:Estedad;src:url(/static/Estedad.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:radial-gradient(1200px 700px at 90% -10%,#2b2b30 0%,#151517 46%,#09090a 100%);
  --surface:rgba(26,26,29,.62);--surface-2:rgba(32,32,36,.82);--border:rgba(170,170,180,.2);--border-hi:rgba(210,210,220,.38);
  --shadow:0 24px 70px rgba(0,0,0,.55);--shadow-soft:0 10px 28px rgba(0,0,0,.4);
  --text:#ececee;--muted:#9a9aa4;--acc:#d6d6dc;--acc2:#8d8d98;--acc-soft:rgba(214,214,220,.14);--on-acc:#0b0b0c;
  --ok:#4ade80;--bad:#fb7185;--orb:rgba(180,180,195,.16);--r:1.75rem;--blur:18px;--ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1)}
html.light{
  --bg:radial-gradient(1200px 700px at 90% -10%,#ffffff 0%,#eeeef1 46%,#dcdce1 100%);
  --surface:rgba(255,255,255,.66);--surface-2:rgba(255,255,255,.85);--border:rgba(24,24,27,.12);--border-hi:rgba(24,24,27,.3);
  --shadow:0 22px 56px rgba(24,24,27,.16);--shadow-soft:0 10px 26px rgba(24,24,27,.1);
  --text:#18181b;--muted:#6b6b76;--acc:#3a3a42;--acc2:#18181b;--acc-soft:rgba(24,24,27,.08);--on-acc:#fff;--ok:#16a34a;--bad:#e11d48;--orb:rgba(60,60,70,.1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);background-attachment:fixed;min-height:100%}
body{margin:0;min-height:100dvh;color:var(--text);font:15px/1.7 Vazir,system-ui,Tahoma,sans-serif;overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
body::before,body::after{content:"";position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(56px);background:var(--orb)}
body::before{width:min(95vw,920px);height:min(62vw,600px);top:-20%;right:-22%;filter:blur(90px)}
body::after{width:min(90vw,860px);height:min(58vw,560px);left:-22%;bottom:-24%;filter:blur(90px)}
button[aria-busy=true]{opacity:.6;cursor:progress}
.boot{text-align:center;margin-top:38vh;color:var(--muted)}
#app{position:relative;z-index:1;width:100%;max-width:680px;margin:0 auto;padding:14px 14px calc(7.5rem + env(safe-area-inset-bottom))}
@media(min-width:640px){#app{padding:22px 24px calc(7.5rem + env(safe-area-inset-bottom))}}
@media(min-width:1024px){#app{max-width:1000px}}
h2,h3{margin:0 0 .6em;font-weight:700;letter-spacing:-.01em}h3{font-size:1.05rem}
.mut{color:var(--muted);font-size:.85rem}.ltr{direction:ltr;text-align:left}.err{color:var(--bad)}.ok{color:var(--ok)}
.glass,.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-soft);
  backdrop-filter:blur(var(--blur)) saturate(1.1);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.1)}
.card{padding:18px;margin-bottom:14px;transition:border-color .2s,box-shadow .25s}
@media(hover:hover){.card:hover{border-color:var(--border-hi);box-shadow:var(--shadow)}}
.view{animation:sect .2s var(--ease) both}
@keyframes sect{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mo{from{opacity:0;transform:scale(.72)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes ti{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* header */
.top{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;margin-bottom:14px;border-radius:999px;position:sticky;top:max(8px,env(safe-area-inset-top));z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;flex:1 0 auto;white-space:nowrap}
.logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:grid;place-items:center;color:var(--on-acc);flex:none;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.who{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){.who{display:none}}

/* controls */
input,select,textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:1rem;padding:11px 14px;margin:4px 0 10px;min-height:46px;outline:0;
  transition:border-color .2s,box-shadow .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
/* ticks: small and plain everywhere (the inputs' own box above isn't for them); .tg: an on/off setting as a small switch */
input[type=checkbox],input[type=radio]{appearance:auto;width:16px;height:16px;min-height:0;flex:none;margin:0;padding:0;border-radius:4px;box-shadow:none;accent-color:var(--acc);cursor:pointer;vertical-align:middle}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none}
input[type=checkbox].tg{appearance:none;-webkit-appearance:none;position:relative;width:36px;height:20px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);transition:background .2s,border-color .2s}
input[type=checkbox].tg::before{content:"";position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .22s var(--spring,ease),background .2s}
input[type=checkbox].tg:checked{background:var(--ok,#16a34a);border-color:transparent}input[type=checkbox].tg:checked::before{background:#fff;transform:translateX(-16px)}html[dir=ltr] input[type=checkbox].tg:checked::before{transform:translateX(16px)}
input[type=checkbox].tg:disabled{opacity:.45;cursor:default}
input[type=file]{padding:9px 12px}input[type=range]{padding:0;min-height:30px;accent-color:var(--acc)}
button{font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 18px;border-radius:1rem;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);box-shadow:0 12px 28px rgba(0,0,0,.35);
  transition:transform .15s var(--spring),box-shadow .15s,filter .15s,background .2s,border-color .2s;will-change:transform}
@media(hover:hover){button:hover{transform:translateY(-2px) scale(1.012);filter:brightness(1.08);box-shadow:0 18px 38px rgba(0,0,0,.45)}}
button:active{transform:translateY(1px) scale(.97);filter:brightness(.95);transition-duration:.08s}
button:disabled{opacity:.5;pointer-events:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button.sec{background:var(--surface-2);color:var(--text);border-color:var(--border);box-shadow:none}
@media(hover:hover){button.sec:hover{border-color:var(--border-hi);box-shadow:var(--shadow-soft)}}
button.bad{background:transparent;color:var(--bad);border-color:var(--border);box-shadow:none}
@media(hover:hover){button.bad:hover{background:rgba(251,113,133,.12);border-color:var(--bad)}}
button.icon{padding:0;width:44px;flex:none}button.sm{min-height:38px;padding:6px 12px;font-size:.88rem}
.ic{display:inline-flex;width:20px;height:20px;flex:none}.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row>*{margin-top:0;margin-bottom:0}.grow{flex:1;min-width:0}
a{color:inherit;text-decoration:none}a.lnk{color:var(--acc);text-decoration:underline}

/* bottom dock: floating glass, same idea as the main panel */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(1px,.25vw,4px);
  width:max-content;max-width:calc(100vw - 20px);padding:clamp(5px,.5vw,8px);border-radius:1.6rem;background:var(--surface);border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 48px rgba(0,0,0,.5);backdrop-filter:blur(calc(var(--blur) + 4px)) saturate(1.1);-webkit-backdrop-filter:blur(calc(var(--blur) + 4px)) saturate(1.1);animation:fade .4s both}
.dock button{flex-direction:column;gap:clamp(3px,.35vw,5px);min-width:clamp(34px,4.8vw,66px);min-height:clamp(50px,1.2vw + 38px,58px);padding:6px clamp(2px,.4vw,6px);border-radius:1.15rem;background:transparent;border-color:transparent;box-shadow:none;color:var(--muted);font-size:clamp(.62rem,.56rem + .18vw,.76rem);font-weight:500;line-height:1.1}
.dock button .ic{width:clamp(20px,.3vw + 18px,24px);height:clamp(20px,.3vw + 18px,24px);transition:transform .25s var(--spring)}
@media(hover:hover){.dock button:hover{background:var(--acc-soft);color:var(--text);transform:none;box-shadow:none;filter:none}.dock button:hover .ic{transform:translateY(-2px) scale(1.1)}}
.dock button.on{background:var(--acc-soft);color:var(--text);border-color:var(--border)}.dock button.on .ic{color:var(--acc)}

/* files */
#drop{border:2px dashed var(--border);border-radius:1.4rem;padding:26px 16px;text-align:center;margin-bottom:10px;transition:border-color .2s,background .2s,transform .25s var(--ease)}
#drop.hot{border-color:var(--acc);background:var(--acc-soft);transform:scale(1.01)}
#drop>.ic{width:34px;height:34px;color:var(--acc);margin-bottom:6px}
#drop .pick{justify-content:center;margin-top:10px}.pick{margin:4px 0 10px}.num{direction:ltr;unicode-bidi:isolate;display:inline-block}
.bar{height:7px;background:var(--acc-soft);border-radius:6px;overflow:hidden;margin-top:6px}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:6px;transition:width .5s var(--ease)}
.up-row{padding:8px 0}.up-row .bar>i{background:linear-gradient(90deg,var(--acc2),var(--acc),var(--acc2));background-size:200% 100%;animation:shimmer 1.6s linear infinite}
.files{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.files{grid-template-columns:repeat(2,minmax(0,1fr))}}
.file{background:var(--surface-2);border:1px solid var(--border);border-radius:1.3rem;padding:12px;animation:rowin .3s var(--ease) both;animation-delay:calc(var(--i,0)*40ms);
  transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
@media(hover:hover){.file:hover{transform:translateY(-2px);border-color:var(--border-hi);box-shadow:var(--shadow-soft)}}
.file .head{display:flex;align-items:center;gap:10px}.chip{width:42px;height:42px;border-radius:13px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc);flex:none}
.file .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.file .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.file .acts>*{flex:1 1 auto;width:auto}.file .acts a{display:flex}.file .acts a>button{width:100%}.file .acts button{padding:6px 12px;white-space:nowrap}
img.pv,video.pv{display:block;max-width:100%;max-height:340px;border-radius:1rem;margin-top:10px;animation:fade .3s both}audio.pv{width:100%;margin-top:10px}
.empty{text-align:center;padding:28px 0;color:var(--muted)}

/* tools / prices / admin */
.cols{display:grid;gap:14px}.cols .card{margin:0}@media(min-width:900px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}@media(min-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
.price{background:var(--surface-2);border:1px solid var(--border);border-radius:1.2rem;padding:13px 14px;animation:rowin .3s var(--ease) both;animation-delay:calc(var(--i,0)*35ms);transition:transform .25s var(--ease),border-color .2s}
@media(hover:hover){.price:hover{transform:translateY(-3px);border-color:var(--border-hi)}}
.price b{display:block;font-size:1.1rem;line-height:1.4;margin:2px 0}.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:.78rem;background:var(--acc-soft)}
.pill.up{color:var(--bad)}.pill.down{color:var(--ok)}
.sk{height:84px;border-radius:1.2rem;background:linear-gradient(90deg,var(--acc-soft) 25%,transparent 50%,var(--acc-soft) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
ul.list{list-style:none;padding:0;margin:0}ul.list li{display:flex;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--border);animation:rowin .3s var(--ease) both;animation-delay:calc(var(--i,0)*30ms)}
ul.list li:first-child{border-top:0}ul.list .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg{display:flex;gap:4px;padding:4px;border-radius:1.1rem;background:var(--surface-2);border:1px solid var(--border);margin-bottom:14px}
.seg button{flex:1;background:transparent;color:var(--muted);box-shadow:none;border-color:transparent;min-height:38px;padding:6px 16px}.seg button.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc)}
.seg.tight button{min-width:0;padding:6px 4px}

/* auth */
.auth{min-height:100dvh;box-sizing:border-box;padding:16px 0;display:grid;place-items:center}#app:has(>.auth){padding-block:0}  /* sign-in / sign-up / username: in the middle of the screen */.auth .card{width:min(100%,430px);padding:26px 22px;animation:mo .35s var(--ease) both}
.auth .logo{width:52px;height:52px;border-radius:17px;margin:0 auto 12px}.auth h2{text-align:center}

/* modal + toast */
.mo{position:fixed;inset:0;z-index:100;display:grid;place-items:start center;overflow-y:auto;overscroll-behavior:contain;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:rgba(0,0,0,.5);backdrop-filter:blur(6px);animation:fade .2s both}
.md{margin-block:auto;width:min(100%,420px);padding:22px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);animation:mo .38s var(--spring) both;backdrop-filter:blur(var(--blur))}
.md .row{margin-top:14px}.md .row button{flex:1}
.toasts{position:fixed;left:50%;bottom:calc(6.2rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:120;display:flex;flex-direction:column-reverse;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.toast{padding:10px 20px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);animation:tin .25s var(--ease) both;max-width:100%;text-align:center;overflow-wrap:anywhere;pointer-events:auto}
.toast.ok{border-color:color-mix(in srgb,var(--good,#34d399) 55%,var(--border-hi))}.toast.err{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,var(--surface-2))}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* tabs that scroll sideways: an arrow on the side that has more (segArrows) */
.segw{position:relative;margin-bottom:14px}.segw>.seg{margin-bottom:0}
button.segar{position:absolute;top:50%;z-index:2;width:34px;height:34px;min-height:0;padding:0;border-radius:50%;translate:0 -50%;background:var(--surface-2);color:var(--text);border:1px solid var(--border-hi);
  box-shadow:0 4px 14px rgba(0,0,0,.35);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));transition:opacity .25s,scale .25s var(--spring)}
button.segar.s{inset-inline-start:-8px}button.segar.e{inset-inline-end:-8px}button.segar .ic{width:18px;height:18px}
button.segar.off{opacity:0;scale:.6;pointer-events:none}
@media(hover:hover){button.segar:hover{transform:none;filter:none;background:var(--acc-soft);box-shadow:0 4px 14px rgba(0,0,0,.35)}}
.seg.scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.seg.scroll::-webkit-scrollbar{display:none}.seg.scroll button{flex:0 0 auto;white-space:nowrap}.seg .ic{width:18px;height:18px}
.txt{white-space:pre-wrap;word-break:break-word;max-height:9em;overflow:auto;padding:2px 2px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.chip2{padding:2px 10px;border-radius:99px;background:var(--acc-soft);font-size:.8rem}
.chk{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;margin:0 0 6px 6px;font-size:.88rem;user-select:none;transition:border-color .2s,background .2s}
.chk input{width:auto;min-height:0;margin:0;accent-color:var(--acc)}.chk:has(input:checked){background:var(--acc-soft);border-color:var(--acc)}
.item{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--border)}.item:first-child{border-top:0}.item.done .n{text-decoration:line-through;color:var(--muted)}
.item .n{flex:1;min-width:0;word-break:break-word}.tick{width:28px;height:28px;min-height:0;padding:0;border-radius:9px;flex:none}
.pos{color:var(--ok)}.neg{color:var(--bad)}.days{padding:2px 10px;border-radius:99px;background:var(--acc-soft);font-size:.8rem;white-space:nowrap}.days.soon{color:var(--ok)}.days.past{color:var(--bad)}
.sub{font-size:.85rem;color:var(--muted);margin:10px 0 4px}
.up-row.paused .bar>i{animation:none;opacity:.55}.up-row.ind .bar>i{opacity:.6}.up-row>.row>.ic{color:var(--acc)}.up-row button.icon{width:38px}
.conv-out{margin-top:8px;font-size:1.05rem;min-height:3rem}.conv select{min-width:0}
.dres{font-weight:700;margin-top:4px;min-height:1.7em}.sub{margin:8px 0 4px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal .wd{text-align:center;color:var(--muted);font-size:.78rem;padding:4px 0}.cal .off{color:var(--bad)}.cal .wd.off{color:var(--bad)}
.cal button.cell{flex-direction:column;gap:0;min-height:52px;padding:4px 2px;border-radius:.9rem;background:var(--surface-2);color:var(--text);border-color:var(--border);box-shadow:none;font-weight:600;line-height:1.25}
.cal button.cell.off{color:var(--bad)}.cal button.cell .g{font-size:.66rem;font-weight:400;color:var(--muted)}
.cal button.cell.sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft)}
.cal button.cell.today{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc)}.cal button.cell.today .g{color:inherit;opacity:.75}
@media(min-width:640px){.cal button.cell{min-height:64px;font-size:1.05rem}}

/* steam specials */
.games{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}@media(min-width:900px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}}
.game{display:flex;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:1.2rem;padding:10px;animation:rowin .3s var(--ease) both;animation-delay:calc(var(--i,0)*30ms);transition:transform .25s var(--ease),border-color .2s}
@media(hover:hover){.game:hover{transform:translateY(-2px);border-color:var(--border-hi)}}
.game .cap{position:relative;width:120px;aspect-ratio:231/87;flex:none;border-radius:.8rem;overflow:hidden;background:var(--acc-soft)}.game .cap img{width:100%;height:100%;object-fit:cover;display:block}
.game .rank{position:absolute;top:4px;right:4px;min-width:22px;padding:0 6px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:.72rem;text-align:center;line-height:1.6}
.game .gi{flex:1;min-width:0}.game .n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.game .gp{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.game .gp b{font-size:1.02rem}.game .sm{font-size:.76rem}
@media(max-width:420px){.game .cap{width:92px}}
.seg[role=tablist]{margin:0}
/* admin: disk + uploads */
.cols .wide{grid-column:1/-1}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:6px}
.stat{background:var(--surface-2);border:1px solid var(--border);border-radius:1.1rem;padding:10px;min-width:0}.stat b{display:block;font-size:clamp(.95rem,4vw,1.15rem);margin-top:2px;white-space:nowrap}.settings .stat b{font-size:1rem;white-space:normal;line-height:1.35}
.stat.warn b,.bar.warn>i{color:var(--bad)}.bar.disk{height:10px}.bar.warn>i{background:var(--bad)}
.owner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sort{width:auto;flex:none}

/* home */
.top .brand{background:none;border:0;box-shadow:none;color:var(--text);padding:0;min-height:0;justify-content:flex-start;font-size:1.05rem;font-weight:700}
@media(hover:hover){.top .brand:hover{transform:none;box-shadow:none;filter:none}.top .brand:hover .logo{transform:rotate(-8deg) scale(1.05)}}.top .brand .logo{transition:transform .3s var(--spring)}
.dock button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:640px){.dock button[data-tab=overlay]:not(.on){display:none}}  /* phones: the overlay (a Windows app feature) stays on the home page's tiles only */
@media(max-width:400px){.dock{width:calc(100vw - 12px);max-width:none;padding:5px;gap:1px}.dock button{font-size:.72rem;padding:6px 0;letter-spacing:-.02em;min-width:0}.dock button .ic{width:20px;height:20px}}
.hero{position:relative;overflow:hidden;padding:24px 22px 20px}
.hero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--acc-soft) 0%,transparent 70%);pointer-events:none}

.hero>*{position:relative}
.hero h2{font-size:clamp(1.6rem,6vw,2.2rem);line-height:1.3;margin:12px 0 4px;letter-spacing:-.02em}
.hero .lead{color:var(--muted);margin:0 0 18px;max-width:34em}
.hero .date{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--border);font-size:.82rem;color:var(--muted)}.hero .date .ic{width:16px;height:16px}
.cta button{flex:1 1 140px}@media(min-width:640px){.cta button{flex:0 0 auto;padding-inline:26px}}
.hfoot{display:flex;gap:12px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.hfiles{display:flex;align-items:center;gap:10px;flex:none}.hfiles b{display:block;font-size:1.25rem;line-height:1.2}.hfiles .mut{font-size:.78rem}
.hstore{flex:1;min-width:0;padding-inline-start:12px;border-inline-start:1px solid var(--border)}.hstore .bar{margin-top:4px}
.sec-t{margin:22px 4px 10px;color:var(--muted);font-size:.9rem;font-weight:600}
.tiles{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:14px}
@media(min-width:900px){.tiles{grid-template-columns:repeat(4,1fr)}}
button.tile{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;text-align:start;min-height:0;padding:14px;border-radius:1.4rem;position:relative;
  background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-soft);font-weight:400;
  backdrop-filter:blur(var(--blur)) saturate(1.1);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.1);animation:rowin .35s var(--ease) backwards;animation-delay:calc(var(--i,0)*40ms);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s ease}  /* backwards, not both: the entrance doesn't hold transform, so the hover can move it smoothly */
@media(hover:hover){button.tile:hover{transform:translateY(-2px);border-color:var(--border-hi);box-shadow:var(--shadow);filter:none}button.tile:hover .go{opacity:1;transform:none}button.tile:hover .chip{color:var(--on-acc)}button.tile:hover .chip::before{opacity:1}}
.tile .chip{position:relative;overflow:hidden;transition:color .35s ease}.tile .chip .ic{width:22px;height:22px;position:relative}
.tile .chip::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--acc),var(--acc2));opacity:0;transition:opacity .35s ease}  /* a gradient can't fade: a layer over it does */
.tile .tt{display:flex;flex-direction:column;gap:2px;min-width:0}.tile .tt b{font-size:.98rem;font-weight:700}.tile .tt .mut{font-size:.78rem;line-height:1.55}
.tile .go{position:absolute;top:16px;inset-inline-end:14px;color:var(--muted);opacity:.5;transform:translateX(4px);transition:opacity .35s ease,transform .45s var(--ease)}.tile .go .ic{width:18px;height:18px}
.mk{grid-template-columns:repeat(2,1fr)}@media(min-width:640px){.mk{grid-template-columns:repeat(4,1fr)}}.mk .price b{font-size:1rem}
@media(max-width:360px){.tiles{grid-template-columns:1fr}}
/* upload wizard + games */
.choices{display:grid;gap:10px}
button.choice{justify-content:flex-start;text-align:start;gap:14px;min-height:68px;padding:12px 16px;border-radius:1.2rem;font-weight:400}
button.choice>.ic{width:26px;height:26px;color:var(--acc)}button.choice>span{display:flex;flex-direction:column;gap:2px;min-width:0}
button.choice b{font-size:1rem}button.choice small{color:var(--muted);font-size:.8rem;line-height:1.55}
.gpv{display:flex;gap:12px;align-items:center;padding:10px;margin:6px 0 2px;border-radius:1.1rem;background:var(--acc-soft);animation:fade .25s both}
.gpv img{width:112px;aspect-ratio:460/215;object-fit:cover;border-radius:.7rem;flex:none}.gpv b{display:block;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.pill .ic{width:13px;height:13px;vertical-align:-2px;margin-inline-end:3px}.pill.pub{color:var(--ok)}
.pill.gtag{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
img.thumb{width:76px;height:42px;border-radius:12px;object-fit:cover;flex:none;background:var(--acc-soft)}


.gcards{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:14px}@media(min-width:900px){.gcards{grid-template-columns:repeat(2,minmax(0,1fr))}}.gcards>.card{margin:0;grid-column:1/-1}
.gcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-soft);backdrop-filter:blur(var(--blur)) saturate(1.1);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.1);
  animation:rowin .35s var(--ease) both;animation-delay:calc(var(--i,0)*45ms);transition:border-color .2s,box-shadow .25s,transform .25s var(--ease)}
@media(hover:hover){.gcard:hover{border-color:var(--border-hi);box-shadow:var(--shadow);transform:translateY(-2px)}.gcard:hover .gcov img{transform:scale(1.03)}}
.gcov{position:relative;display:grid;place-items:center;aspect-ratio:460/215;background:var(--acc-soft);color:var(--muted);overflow:hidden}
.gcov>.ic{width:42px;height:42px}.gcov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.gcov .steam{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font-size:.74rem;direction:ltr;backdrop-filter:blur(6px)}
.gcov .steam .ic{width:13px;height:13px}
.gbody{padding:14px 16px 16px}.gbody h4{margin:0 0 4px;font-size:1.12rem;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdesc{margin:4px 0 10px;color:var(--muted);font-size:.84rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gfile{display:flex;align-items:center;gap:10px;padding:8px;margin-top:8px;border-radius:1.1rem;background:var(--surface-2);border:1px solid var(--border)}
.gfile .chip{width:38px;height:38px;border-radius:12px}.gfile .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.gfile .mut{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gfile button.icon{width:38px}.gfile a{flex:none}
.empty>.ic{width:34px;height:34px;margin-bottom:6px}
@media(max-width:420px){.gfile .lbl,.gfile>.chip{display:none}.gfile button{padding:0;width:38px}.gfile{gap:6px;padding:8px 10px}}
.md .row button.find{flex:none}
/* admin: one member */
button.urow{width:100%;display:flex;align-items:center;gap:10px;padding:6px 4px;background:transparent;color:var(--text);border-color:transparent;box-shadow:none;font-weight:400;text-align:start;border-radius:1rem}
@media(hover:hover){button.urow:hover{transform:none;background:var(--surface-2);box-shadow:none}}
button.urow .chip{width:36px;height:36px;border-radius:11px}button.urow .grow{display:flex;flex-direction:column;min-width:0;gap:2px}
button.urow .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.urow>.ic{color:var(--muted);flex:none}
ul.list li:has(>.urow){padding:4px 0}
.uhead .head{display:flex;align-items:center;gap:10px}.uhead .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uhead .tags{margin-top:4px}
.pill.blk{color:var(--bad)}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.qgrid>:first-child{grid-column:1/-1}.qgrid button{width:100%;padding:6px 8px}
.uacts{display:grid;gap:8px}.uacts button{width:100%;justify-content:flex-start}
/* English (i18n.js): left-to-right, arrows point the other way; language button */
html[dir=ltr] .ic-chevl svg,html[dir=ltr] .ic-chevr svg{transform:scaleX(-1)}
button.lang{font-weight:700;font-size:.82rem;letter-spacing:.02em}
html[dir=ltr] .game .n,html[dir=ltr] .gbody h4,html[dir=ltr] .gpv b{text-align:left}
/* overlay tab on the site: points to the Windows app */
.appcard{text-align:center;max-width:480px;margin:6vh auto 0;padding:28px 22px}.appcard .chip.big{width:64px;height:64px;border-radius:20px;margin:0 auto 6px}
.appcard .chip.big .ic{width:30px;height:30px}.appcard h3{margin:10px 0 4px}.appcard a button{min-width:230px;margin-top:6px}

/* scrollbars follow the theme: thin, rounded, no white track */
:root{color-scheme:dark}html.light{color-scheme:light}
html{background:#0c0c0e}html.light{background:#e4e4e8}  /* what shows behind the scrollbar */
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(160,160,175,.28);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(190,190,205,.5)}::-webkit-scrollbar-thumb:active{background-color:rgba(210,210,220,.62)}
html.light ::-webkit-scrollbar-thumb{background-color:rgba(24,24,27,.22)}html.light ::-webkit-scrollbar-thumb:hover{background-color:rgba(24,24,27,.4)}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:rgba(160,160,175,.4) transparent}html.light{scrollbar-color:rgba(24,24,27,.3) transparent}}
/* settings (settings.js) */
.who{display:inline-flex;align-items:center;gap:7px;min-width:0}.who bdi{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(max-width:520px){.who bdi{display:none}}
.av{width:var(--s,28px);height:var(--s,28px);border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);font-weight:700;font-size:calc(var(--s,28px)*.42);line-height:1}
.setgrid{display:grid;gap:14px;align-items:start}@media(min-width:760px){.setgrid{grid-template-columns:210px 1fr}.setnav{position:sticky;top:calc(96px + env(safe-area-inset-top))}}
.setnav{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:1.4rem}
.setnav button{justify-content:flex-start;gap:10px;background:transparent;border-color:transparent;box-shadow:none;color:var(--muted);min-height:44px;padding:8px 12px;border-radius:1rem;text-align:start;font-weight:600}
.setnav button .ic{width:19px;height:19px}.setnav button.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc)}
@media(hover:hover){.setnav button:not(.on):hover{background:var(--acc-soft);color:var(--text);transform:none}}
@media(max-width:759px){.setnav{flex-direction:row;overflow-x:auto;scrollbar-width:none}.setnav button{flex:0 0 auto}}
.setbody{min-width:0}.setbody>.card{margin:0}.settings .cols{display:grid;gap:14px;align-items:start}.settings .cols{grid-template-columns:1fr}@media(min-width:1024px){.settings .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}.settings .cols .card{margin:0}
.setrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 0;border-top:1px solid var(--border)}.setrow:first-child{border-top:0;padding-top:4px}
.setrow .grow{min-width:200px}.setrow .ctl{flex:0 1 auto;min-width:0}.setrow .seg{margin:0}.setrow .seg button{min-height:36px;padding:4px 14px}.setrow input[type=range]{min-width:160px}
.pic .av{box-shadow:var(--shadow-soft)}
.devices li{gap:12px}
.cols.tools{align-items:start}.stack{display:grid;gap:14px;align-content:start}.stack>.card{margin:0}input.dnum{text-align:center}

.pwbox{position:relative}.pwbox input{padding-right:46px}.pwbox .eye{position:absolute;right:6px;top:9px;width:34px;height:34px;min-height:0;padding:0;margin:0;background:none;border:0;box-shadow:none}
.wave{display:inline-block;position:relative;animation:wave 1.6s .4s var(--ease) both;transform-origin:70% 70%}
@keyframes wave{0%,100%{transform:none}20%{transform:rotate(16deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(12deg)}80%{transform:rotate(-4deg)}}
.cursorglow{position:fixed;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;will-change:transform;background:radial-gradient(closest-side,rgba(var(--glow),.09) 0%,rgba(var(--glow),.06) 25%,rgba(var(--glow),.03) 50%,rgba(var(--glow),.01) 75%,transparent 100%)}
.cursorglow.on{opacity:1}
@media(hover:none){.cursorglow{display:none}}
:root{--glow:255,255,255}html.light{--glow:24,24,27}  /* soft white light on the dark theme, soft shade on the light one */
.hero h2{text-shadow:0 0 18px rgba(var(--glow),.16)}  /* one soft light over the whole greeting (text + wave) */
.spark{position:relative;width:100%;max-width:140px;height:38px}.spark svg{width:100%;height:100%;display:block;overflow:visible}.spark polyline{stroke:rgba(140,165,230,.95)}
.spark i{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:rgb(140,165,230);box-shadow:0 0 8px rgba(140,165,230,.8)}
.pc .pill.up{color:var(--ok);background:rgba(74,222,128,.13)}.pc .pill.down{color:var(--bad);background:rgba(251,113,133,.13)}
.ico{display:inline-block;width:28px;height:28px;border-radius:8px;overflow:hidden;flex:none;box-shadow:0 0 0 1px var(--border)}.ico svg{width:100%;height:100%;display:block}.pch{gap:8px;justify-content:flex-start}
[hidden]{display:none!important}
.pc{container-type:inline-size;align-content:start}.pcin{display:flex;flex-direction:column;gap:8px}.pcx{min-width:0;flex:1 1 auto}.pcu{gap:6px;justify-content:flex-start}
@container (min-width:300px){.pcin{flex-direction:row;align-items:center;justify-content:space-between}.pcin .spark{flex:0 0 120px;width:120px}}
button.dlapp{white-space:nowrap;padding-inline:14px;gap:6px}@media(max-width:520px){button.dlapp{padding-inline:10px;font-size:.8rem}}
@media(max-width:430px){.top{gap:5px}.top .brand span{display:none}button.dlapp{padding-inline:8px;font-size:.76rem;gap:4px}}

.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.covrow{align-items:center;gap:10px;flex-wrap:wrap}.covpv{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.covpv img{width:96px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.fcard .gcov{display:grid;place-items:center}.fcard .gcov.noimg .ic{width:42px;height:42px;opacity:.5}.fdesc{white-space:pre-line}
textarea{resize:vertical;min-height:84px}
/* a field next to a button in a row: no stray margin, same height, centered together */
.row>.grow>input,.row>.grow>select{margin:0}.row:has(>.grow>input,>.grow>select){align-items:stretch}.row:has(>.grow>input,>.grow>select)>.grow{display:flex;flex-direction:column;justify-content:center}
.gfile button,.gfile button.icon{min-height:38px;height:38px}.gfile .grow{display:flex;flex-direction:column;justify-content:center;gap:2px}
html:not([dir=ltr]) .gfile .n{text-align:right}
.gcard{display:flex;flex-direction:column}.gcov{flex:none}.gbody{flex:1;display:flex;flex-direction:column}.gbody>:not(.gfile):has(+.gfile){margin-bottom:8px}.gbody>:not(.gfile)+.gfile{margin-top:auto}  /* the files sit at the bottom: cards side by side line up whatever the description's length */
.wpeople{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.wpeople .pill{display:inline-flex;align-items:center;gap:6px}
.wlog{max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.wmsg{padding:6px 10px;border-radius:12px;background:var(--surface-2);align-self:flex-start;max-width:85%;overflow-wrap:anywhere}.wmsg.me{align-self:flex-end;background:var(--acc-soft)}.wstat{margin-top:4px}
/* the Windows app: the room's video is in its full screen window, the player's place greyed out */
.wpopped{margin:12px 0 8px;padding:16px;border-radius:calc(var(--r) - 6px);aspect-ratio:16/9;background:#55555d;color:#ececf1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.wpopped>.ic{width:34px;height:34px;opacity:.75}.wpopped button{margin-top:0!important}
.wtop{justify-content:space-between;flex-wrap:wrap;gap:8px}.wnone{margin:12px 0 8px;padding:40px 16px;background:var(--surface-2)}.wpick{cursor:pointer;border:1px solid var(--border)}.wpick .ic{width:16px;height:16px}
/* video player (watch together): always dark, like the picture; controls left-to-right like a timeline */
.player{position:relative;margin:12px 0 8px;border-radius:calc(var(--r) - 6px);overflow:hidden;background:#000;aspect-ratio:16/9;outline:none;user-select:none;-webkit-user-select:none;color:#fff;isolation:isolate}
.player video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.player.fs{border-radius:0;aspect-ratio:auto}
.player:not(.ui):not(.paused){cursor:none}
.player button{min-height:0;box-shadow:none;filter:none}
@media(hover:hover){.player button:hover{transform:none;filter:none;box-shadow:none}}
.psub{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:92%;display:flex;flex-direction:column;align-items:center;gap:.15em;pointer-events:none;text-align:center;
  font:600 var(--sub,20px)/1.45 Vazir,system-ui,sans-serif;transition:bottom .25s var(--ease);z-index:1}
.player.ui .psub,.player.paused .psub{bottom:calc(6% + 62px)}
.psub span{max-width:100%;padding:.06em .5em;border-radius:.35em;background:rgba(0,0,0,.6);color:#fff;text-shadow:0 1px 3px #000;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}
.pbar{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 8px;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 60%,transparent);opacity:0;transition:opacity .25s;z-index:2}
.player.ui .pbar,.player.paused .pbar{opacity:1}
.prow{display:flex;align-items:center;gap:2px}
.picon{width:40px;height:40px;padding:0;border:0;border-radius:12px;background:transparent;color:#fff;flex:none}
.picon .ic{width:22px;height:22px}
@media(hover:hover){.player .picon:hover{background:rgba(255,255,255,.14)}}
.picon.on{background:rgba(255,255,255,.2)}
.pgap{flex:1}
.ptime{padding:0 8px;font-size:.85rem;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}.pdur{opacity:.65}
.pvol{display:flex;align-items:center}
.pvolr{width:0;margin:0;padding:0;opacity:0;accent-color:#fff;transition:width .2s var(--ease),opacity .2s;min-height:0;border:0;background:none}
.pvol:hover .pvolr,.pvolr:focus{width:84px;opacity:1;margin:0 6px}
.pseek{position:relative;height:20px;display:flex;align-items:center;cursor:pointer;touch-action:none;margin-bottom:2px}
.ptrack{position:relative;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.22);transition:height .15s}
.pseek:hover .ptrack,.player.drag .ptrack{height:6px}
.pbuf,.pfill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit}.pbuf{background:rgba(255,255,255,.32)}.pfill{background:#fff}
.pknob{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18);transform:scale(0);transition:transform .15s var(--spring)}
.pseek:hover .pknob,.player.drag .pknob{transform:scale(1)}
.ptip{position:absolute;bottom:22px;transform:translateX(-50%);padding:2px 8px;border-radius:8px;background:rgba(0,0,0,.85);font-size:.78rem;pointer-events:none;white-space:nowrap}
.pbig{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(18,18,20,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;opacity:0;pointer-events:none;transform:scale(.85);transition:opacity .2s,transform .3s var(--spring);z-index:2}
.pbig .ic{width:32px;height:32px;margin-left:4px}
.player.paused .pbig{opacity:1;pointer-events:auto;transform:none}
.pspin{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:#fff;animation:pspin .8s linear infinite;pointer-events:none;z-index:2}
@keyframes pspin{to{transform:rotate(360deg)}}
.ppop{position:absolute;right:12px;bottom:66px;z-index:3;width:280px;max-width:calc(100% - 24px);max-height:calc(100% - 82px);overflow:auto;padding:6px;border-radius:18px;
  background:rgba(22,22,25,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.5);direction:rtl;text-align:right;animation:mo .18s var(--ease)}
html[dir=ltr] .ppop{direction:ltr;text-align:left}
.phead{padding:8px 10px 4px;font-size:.76rem;font-weight:600;color:rgba(255,255,255,.6)}
.popt{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:#fff;font-weight:500;text-align:start}
@media(hover:hover){.player .popt:hover{background:rgba(255,255,255,.1)}}
.popt.on{background:rgba(255,255,255,.14)}
.pchk{width:16px;flex:none;text-align:center}.plab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.popt small{color:rgba(255,255,255,.5);font-size:.75rem}
.padd{margin-top:4px;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 12px 12px}.padd .ic{width:16px;height:16px}
.pseg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:2px 6px 8px}
.pseg button{white-space:nowrap;padding:7px 2px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;font-size:.78rem;font-weight:500}
.pseg button.on{background:#fff;color:#0b0b0c;border-color:#fff}
.pstep{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 4px}
.pstep button{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
.pval{font-variant-numeric:tabular-nums;white-space:nowrap}
.pnote{margin:6px 10px 6px;color:rgba(255,255,255,.5)!important;font-size:.74rem;line-height:1.6}
@media(max-width:520px){.ppop{right:8px;bottom:56px;max-height:calc(100% - 64px);width:240px}.pvol,.prow>.picon:nth-child(2),.prow>.picon:nth-child(3){display:none}.ptime{font-size:.76rem;padding:0 4px}.picon{width:36px;height:36px}.player.ui .psub,.player.paused .psub{bottom:calc(4% + 58px)}}
.wtitle{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 140px}.wfoot{justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.wfoot .wstat{margin:0}
/* right-to-left alignment: names (often Latin) and emails line up with the Persian text around them */
html:not([dir=ltr]) .n,html:not([dir=ltr]) .file .owner{text-align:right}
html:not([dir=ltr]) :is(input.ltr,textarea.ltr,[dir=auto]):placeholder-shown:not([placeholder^="http"]){direction:rtl;text-align:right}
html:not([dir=ltr]) input.ltr[placeholder^="http"]:placeholder-shown{text-align:right}
.files>.empty{grid-column:1/-1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.list>li.mut:only-child{justify-content:center;text-align:center;padding:18px 0}
.gown{display:flex;gap:6px;flex:none}
.gcard .gfile{flex-wrap:wrap}.gcard .gown{flex:1 0 100%;justify-content:flex-end;padding-top:8px;margin-top:2px;border-top:1px solid var(--border)}
.pch{flex-wrap:nowrap;align-items:center}.pch>.mut{min-width:0;line-height:1.4}
.whero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 18px 26px}.whero>.chip{width:56px;height:56px;border-radius:18px;margin-bottom:10px}.whero>.chip .ic{width:26px;height:26px}
.whero h3{margin:0 0 4px;font-size:1.2rem}.whero>div:not(.chip){width:100%;margin:6px 0 16px}.whero p{margin:0}.whero .files{text-align:right;grid-template-columns:minmax(0,1fr)}html[dir=ltr] .whero .files{text-align:left}.whero>button{min-width:180px}
.pnote2{position:absolute;top:12px;right:12px;z-index:3;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:6px 12px;border-radius:99px;background:rgba(0,0,0,.66);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:.8rem;font-weight:500;direction:rtl;animation:fade .2s}
html[dir=ltr] .pnote2{right:auto;left:12px;direction:ltr}
.pnote2.me{background:rgba(190,40,60,.78)}.pdot{width:8px;height:8px;border-radius:50%;background:#fbbf24;flex:none;animation:pspin 1s linear infinite;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;background:none;width:12px;height:12px}
.card:has(>.player){backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-2)}
body:has(.player:not(.paused)) .cursorglow{display:none}
/* games */
.gpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:14px}
button.gpk{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;margin:0;padding:16px;min-height:0;color:var(--text);font:inherit;cursor:pointer;transition:transform .25s var(--spring),border-color .2s}
button.gpk b{font-size:1rem}button.gpk .mut{line-height:1.6}
@media(hover:hover){button.gpk:hover{transform:translateY(-3px)}}
.gglyph{font-size:2rem;line-height:1.2;margin-bottom:4px;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",Vazir,sans-serif}.gglyph.sm{font-size:1.15rem;margin:0}.chip.gglyph.sm{font-size:1.2rem}
.gstart{margin-top:14px;flex-wrap:wrap}.gstart button{flex:1 1 160px}
.groom .wtop{margin-bottom:6px}
.gseats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.gseat{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid transparent;transition:border-color .2s,background .2s}
.gseat.on{border-color:var(--border-hi);background:var(--surface-2);box-shadow:0 0 0 3px var(--acc-soft)}.gseat.me bdi{font-weight:700}
.gdot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--dot,#888);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.gseat.c0{--dot:var(--k0)}.gseat.c1{--dot:var(--k1)}.gseat.c2{--dot:var(--k2)}.gseat.c3{--dot:var(--k3)}
.ttt{--k0:#fb7185;--k1:#60a5fa}.c4{--k0:#ef4444;--k1:#facc15}.othello{--k0:#111;--k1:#f4f4f5}.chess{--k0:#f4f4f5;--k1:#111}.quoridor{--k0:#f4f4f5;--k1:#111}
.ludo{--k0:#ef4444;--k1:#22c55e;--k2:#eab308;--k3:#3b82f6}
.gstatus{min-height:1.7em;margin-bottom:10px;font-weight:600;color:var(--muted)}.gstatus.mine{color:var(--text)}.gstatus.over{color:var(--text);font-size:1.05rem}
:root{--bs:clamp(520px,calc(100vh - 380px),660px)}  /* game boards: 520px, a bit bigger on a tall screen as long as the whole room still fits */
@media(min-width:1400px){#app:has(.groom){max-width:1140px}}  /* a game on a big screen: room for the bigger board beside the chat */
.gwrap{display:flex;justify-content:center}.gwrap>*{width:min(100%,var(--bs))}
.gfoot{margin-top:12px;flex-wrap:wrap}
.gstack{position:relative}
.gboard{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap,4px);width:100%;max-width:var(--bs);margin:0 auto;user-select:none;-webkit-user-select:none}
.gcell{aspect-ratio:1;display:grid;grid-template-columns:100%;place-items:center;overflow:hidden;position:relative;border:0;padding:0;margin:0;min-height:0;border-radius:0;box-shadow:none;font:inherit;color:inherit;background:none}
button.gcell{cursor:pointer}
/* tic-tac-toe */
.gboard.ttt{--gap:8px;max-width:calc(var(--bs) * .7);margin:0 auto}
.ttt .gcell{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;font-size:clamp(2rem,10vw,3.4rem);font-weight:800}
.ttt .gcell.p0{color:var(--k0)}.ttt .gcell.p1{color:var(--k1)}.ttt .gcell.win{background:var(--acc-soft);border-color:var(--border-hi)}
@media(hover:hover){.ttt button.gcell:hover{border-color:var(--border-hi)}}
/* connect four */
.gboard.c4{--gap:6px;padding:10px;border-radius:18px;background:#1e3a8a;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.c4 .gcell i{width:86%;height:86%;border-radius:50%;background:rgba(0,0,0,.35);box-shadow:inset 0 3px 6px rgba(0,0,0,.4);transition:background .2s}
.c4 .gcell.p0 i{background:var(--k0)}.c4 .gcell.p1 i{background:var(--k1)}.c4 .gcell.win i{box-shadow:0 0 0 3px #fff}
.c4 .gcell.last:not(.win) i{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.gwrap.anim .c4 .gcell.last{overflow:visible;z-index:2}.gwrap.anim .c4 .gcell.last i{animation:gdrop .42s cubic-bezier(.45,0,.8,1.25)}@keyframes gdrop{from{transform:translateY(calc(var(--dr,1) * -116%))}}
@media(hover:hover){.c4 button.gcell:hover i{background:rgba(255,255,255,.18)}}
/* othello */
.gboard.othello{--gap:2px;padding:6px;border-radius:14px;background:#14532d}
.othello .gcell{background:#1f7a4d}.othello .gcell i{width:82%;height:82%;border-radius:50%;transition:background .25s}
.othello .gcell.p0 i{background:#111;box-shadow:inset 0 -3px 5px rgba(255,255,255,.12)}.othello .gcell.p1 i{background:#f4f4f5;box-shadow:inset 0 -3px 5px rgba(0,0,0,.2)}
.othello .gcell.hint i{width:24%;height:24%;background:rgba(0,0,0,.3)}.othello .gcell.last{box-shadow:inset 0 0 0 2px #facc15}
/* chess */
.gboard.chess{--gap:0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-soft)}
.chess .gcell.lt{background:#e8e2d4}.chess .gcell.dk{background:#8a8f9c}
.chess .gcell.last{background-image:linear-gradient(rgba(250,204,21,.38),rgba(250,204,21,.38))}.chess .gcell.sel{background-image:linear-gradient(rgba(34,197,94,.45),rgba(34,197,94,.45))}
.chess .gcell.chk{background-image:radial-gradient(circle,rgba(239,68,68,.9),rgba(239,68,68,.25) 70%)}
.chess .gcell.dot::after{content:"";width:28%;height:28%;border-radius:50%;background:rgba(0,0,0,.28);position:absolute}
.chess .gcell.cap::after{content:"";position:absolute;inset:4%;border-radius:50%;border:4px solid rgba(0,0,0,.28)}
.cpc{width:88%;height:88%;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}.cpc svg{width:100%;height:100%;display:block}
.cpc .f{stroke-width:1.5;stroke-linejoin:round}.cpc .d,.cpc .x{fill:none;stroke-width:1.5;stroke-linecap:round}.cpc .x{stroke-width:2.4}
.cpc.w .f{fill:#fafafa;stroke:#1c1c1f}.cpc.w .d,.cpc.w .x{stroke:#1c1c1f}.cpc.w .d2{fill:#1c1c1f}
.cpc.b .f{fill:#232327;stroke:#0a0a0b}.cpc.b .d{stroke:#d4d4d8}.cpc.b .x{stroke:#0a0a0b}.cpc.b .d2{fill:#d4d4d8}
.chess small{position:absolute;font-size:.62rem;font-weight:700;color:rgba(0,0,0,.5);line-height:1}.chess .rk{top:3px;left:4px}.chess .fl{bottom:2px;right:4px}
.gpromo{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;background:rgba(0,0,0,.55);border-radius:10px;color:#fff;backdrop-filter:blur(3px)}
.gpromo .row{justify-content:center}.gpromo button{width:64px;height:64px;padding:6px}.gpromo .cpc{width:100%;height:100%}
/* quoridor */
.quoridor{--k0:#60a5fa;--k1:#fb7185}
.qboard{display:grid;grid-template-columns:repeat(8,1fr 8px) 1fr;grid-template-rows:repeat(8,auto 8px) auto;padding:12px;border-radius:20px;max-width:520px;margin:0 auto;
  background:var(--surface-2);border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-soft);user-select:none;-webkit-user-select:none}
.qcell{aspect-ratio:1;border-radius:9px;background:rgba(255,255,255,.055);border:0;padding:0;margin:0;min-height:0;display:grid;grid-template-columns:100%;place-items:center;box-shadow:none;font:inherit;transition:background .2s}
html.light .qcell{background:rgba(24,24,27,.06)}
.qcell.g0{background:color-mix(in srgb,var(--k0) 16%,transparent)}.qcell.g1{background:color-mix(in srgb,var(--k1) 16%,transparent)}
button.qcell{cursor:pointer}.qcell.last{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--text) 22%,transparent)}
.qcell.t{background:color-mix(in srgb,var(--kt) 26%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--kt) 70%,transparent)}
.qcell.t::after{content:"";width:28%;height:28%;border-radius:50%;background:var(--kt);opacity:.85}
@media(hover:hover){.qcell.t:hover{background:color-mix(in srgb,var(--kt) 42%,transparent)}}
.qpawn{width:68%;height:68%;border-radius:50%;transition:transform .2s var(--spring)}
.qpawn.p0{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),transparent 42%),var(--k0);box-shadow:0 0 0 3px color-mix(in srgb,var(--k0) 28%,transparent),0 5px 12px rgba(0,0,0,.4)}
.qpawn.p1{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),transparent 42%),var(--k1);box-shadow:0 0 0 3px color-mix(in srgb,var(--k1) 28%,transparent),0 5px 12px rgba(0,0,0,.4)}
.qpawn.mine{animation:qbreath 2s ease-in-out}.qpawn.sel{transform:scale(1.12);animation:none;outline:2px solid var(--text);outline-offset:3px}
@keyframes qbreath{50%{transform:scale(1.07)}}
.qwall{border-radius:5px;z-index:1;pointer-events:none}
.qwall.by0{background:linear-gradient(135deg,#93c5fd,#3b82f6);box-shadow:0 0 12px rgba(96,165,250,.55)}.qwall.by1{background:linear-gradient(135deg,#fda4af,#e11d48);box-shadow:0 0 12px rgba(251,113,133,.55)}
.qwall.new{animation:qdrop .35s var(--spring)}@keyframes qdrop{from{transform:scale(1.4);opacity:0}}
.qwall.pre.ok{background:color-mix(in srgb,var(--kt) 60%,transparent);outline:2px dashed var(--kt);outline-offset:1px}.qwall.pre.bad{background:rgba(239,68,68,.55);outline:2px dashed #ef4444}
.qtray{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;max-width:var(--bs);margin-inline:auto}
.qitem{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:18px;background:var(--surface-2);border:1px solid var(--border);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;text-align:center;transition:border-color .2s,transform .2s}
.qitem .mut{font-size:.75rem}.qitem.drag{cursor:grabbing;border-color:var(--kt);transform:scale(.97)}.qitem.off{opacity:.45;cursor:not-allowed}
@media(hover:hover){.qitem:not(.off):hover{border-color:var(--border-hi)}}
.qshape{display:block;border-radius:5px;background:linear-gradient(135deg,color-mix(in srgb,var(--kt) 55%,#fff),var(--kt));box-shadow:0 0 12px color-mix(in srgb,var(--kt) 50%,transparent)}
.qshape.h{width:70px;height:10px;margin:14px 0}.qshape.v{width:10px;height:38px}
.qghost{position:fixed;left:0;top:0;z-index:200;pointer-events:none;border-radius:5px;background:linear-gradient(135deg,color-mix(in srgb,var(--kt) 55%,#fff),var(--kt));opacity:.9;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.qleft{text-align:center;margin:8px 0 0}
/* ludo */
.ldice{justify-content:center;gap:12px;margin-bottom:10px;min-height:48px}
.ldie{width:44px;height:44px;border-radius:11px;background:#fff;display:grid;grid-template-columns:repeat(3,1fr);padding:6px;gap:2px;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.ldie i{border-radius:50%}.ldie i.on{background:#111}.ldie.empty{background:var(--surface-2);box-shadow:none;border:1px dashed var(--border-hi)}
.lboard{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));grid-template-rows:repeat(15,auto);gap:1px;padding:6px;border-radius:14px;background:#d4d4d8;position:relative}
.lsq{aspect-ratio:1;background:#fafafa;display:grid;place-items:center;font-size:.7rem;color:#a1a1aa;border-radius:2px}
.lboard .c0{--dot:var(--k0)}.lboard .c1{--dot:var(--k1)}.lboard .c2{--dot:var(--k2)}.lboard .c3{--dot:var(--k3)}
.lsq.lane,.lsq.start{background:var(--dot)}.lsq.star{color:#71717a}
.lbase{background:var(--dot);border-radius:12px;display:grid;place-items:center}.lbase i{width:66%;height:66%;border-radius:12px;background:#fafafa}.lbase.off{opacity:.35}
.lmid{background:conic-gradient(from 225deg,var(--k1) 0 25%,var(--k2) 0 50%,var(--k3) 0 75%,var(--k0) 0);border-radius:4px}
.lpc{z-index:2;align-self:center;justify-self:center;width:78%;aspect-ratio:1;border-radius:50%;background:var(--dot);border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.45);padding:0;margin:0;min-height:0}
.lpc.s2{transform:translate(22%,-22%)}.lpc.s3{transform:translate(-22%,22%)}.lpc.s4{transform:translate(22%,22%)}
button.lpc.go{cursor:pointer;animation:lgo 1s ease-in-out}@keyframes lgo{50%{box-shadow:0 0 0 4px rgba(255,255,255,.85),0 2px 4px rgba(0,0,0,.45)}}

/* ---------- profiles, badges, chat, reactions, notifications ---------- */
.k-gold{--k:#f5c451}.k-violet{--k:#a78bfa}.k-teal{--k:#2dd4bf}.k-red{--k:#f87171}.k-amber{--k:#fb923c}.k-green{--k:#4ade80}.k-blue{--k:#60a5fa}.k-rose{--k:#f472b6}.k-indigo{--k:#818cf8}.k-slate{--k:#94a3b8}
.a-violet{--a:#8b5cf6}.a-blue{--a:#3b82f6}.a-teal{--a:#14b8a6}.a-green{--a:#22c55e}.a-amber{--a:#f59e0b}.a-rose{--a:#ec4899}.a-red{--a:#ef4444}.a-slate{--a:#64748b}
.bdisc{width:var(--s);height:var(--s);border-radius:50%;flex:none;display:inline-grid;place-items:center;color:#111;vertical-align:middle;
  background:radial-gradient(circle at 30% 25%,#fff8 0,transparent 45%),linear-gradient(145deg,var(--k),color-mix(in srgb,var(--k) 55%,#000));box-shadow:0 0 0 1px color-mix(in srgb,var(--k) 60%,transparent),0 4px 14px color-mix(in srgb,var(--k) 35%,transparent)}
.bdisc svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bchip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 3px;border-radius:99px;font-size:.78rem;font-weight:600;vertical-align:middle;color:var(--text);
  background:color-mix(in srgb,var(--k) 16%,transparent);border:1px solid color-mix(in srgb,var(--k) 40%,transparent)}
html[dir=rtl] .bchip{padding:2px 3px 2px 9px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.bcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 10px 12px;border-radius:1.2rem;animation:rowin .4s var(--ease) both;animation-delay:calc(var(--i,0)*40ms);
  background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--k) 18%,transparent),transparent 70%),var(--surface-2);border:1px solid color-mix(in srgb,var(--k) 30%,var(--border))}
.bcard .bdisc{margin-bottom:6px;transition:transform .3s var(--spring)}@media(hover:hover){.bcard:hover .bdisc{transform:scale(1.1) rotate(-6deg)}}
.bcard .mut{font-size:.78rem;line-height:1.5}.sm{font-size:.75rem}
.phero{padding:0;overflow:hidden}
.pav{position:relative;border-radius:50%;display:inline-grid;flex:none}.phero .pav{padding:4px;background:var(--surface-2);box-shadow:var(--shadow-soft)}
.pav.on::after{content:"";position:absolute;inset-block-end:6%;inset-inline-end:6%;width:22%;height:22%;min-width:10px;min-height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--surface-2)}
.ponline{color:var(--ok);font-weight:600}
.prates{display:grid;gap:12px}.prate{display:flex;gap:12px;align-items:center}.prate .pr,.lbrow .pr{font-size:1.15rem}
.wld{display:flex;height:6px;border-radius:9px;overflow:hidden;background:var(--acc-soft);margin:6px 0 4px}.wld i{display:block}.wld .w{background:var(--ok)}.wld .d{background:var(--muted)}.wld .l{background:var(--bad)}
.pill.res.w{color:var(--ok);background:rgba(74,222,128,.13)}.pill.res.l{color:var(--bad);background:rgba(251,113,133,.13)}
.delta{font-size:.85rem;color:var(--muted)}.delta.up{color:var(--ok)}.delta.down{color:var(--bad)}
button.lnk{all:unset;cursor:pointer;color:inherit}@media(hover:hover){button.lnk:hover{text-decoration:underline}}button.lnk:focus-visible{outline:2px solid var(--acc)}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
button.sw{width:34px;height:34px;min-height:0;padding:0;border-radius:50%;background:var(--a,var(--k));border:2px solid transparent;box-shadow:none}button.sw.on{border-color:var(--text);box-shadow:0 0 0 3px var(--acc-soft)}
.pinpick,.icpick{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
button.pinb{all:unset;cursor:pointer;border-radius:99px;padding:2px;border:2px solid transparent}button.pinb.on{border-color:var(--text)}
.icpick button{width:42px;height:42px;min-height:0;padding:0;border-radius:50%;background:transparent;border:2px solid transparent;box-shadow:none}.icpick button.on{border-color:var(--text)}
.bprev{display:flex;justify-content:center;margin-bottom:12px}.bprev .bcard{min-width:180px}
.blist{display:grid;gap:6px}
.brow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:1rem;background:var(--surface-2);border:1px solid var(--border);text-align:start}
button.brow{min-height:0;color:var(--text);box-shadow:none;font-weight:400;justify-content:flex-start}button.brow.on{border-color:var(--border-hi)}
.brow .grow{display:flex;flex-direction:column;min-width:0}.brow .tick{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--acc-soft);font-weight:700}button.brow.on .tick{background:var(--ok);color:#06210f}
.lb{display:grid;gap:6px}.lbseg{overflow-x:auto;scrollbar-width:none}.lbseg::-webkit-scrollbar{display:none}.lbseg button{flex:0 0 auto;white-space:nowrap}
button.lbrow{justify-content:flex-start;gap:10px;min-height:0;padding:8px 12px;border-radius:1rem;background:var(--surface-2);border:1px solid var(--border);color:var(--text);box-shadow:none;font-weight:400;text-align:start}
button.lbrow.me{border-color:var(--border-hi)}.lbrow .grow{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-width:0}.lbrow .grow .mut{flex-basis:100%}.lbn{width:28px;text-align:center;font-weight:700}
.gpick.sm{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.gpick.sm button.gpk{align-items:center;padding:12px}
button.who{background:transparent;border:1px solid transparent;box-shadow:none;min-height:40px;padding:3px 10px 3px 4px;border-radius:99px;color:var(--muted);font-weight:500}
html[dir=rtl] button.who{padding:3px 4px 3px 10px}button.who.on,button.who:hover{background:var(--surface-2);border-color:var(--border)}
@media(max-width:420px){.who{display:inline-flex}.who bdi{display:none}button.who{padding:3px}}
/* chat */
.wchat .wlog{max-height:320px;min-height:60px}.wempty{text-align:center;padding:10px 0}
.wmsg{display:flex;gap:8px;align-items:flex-start;background:none!important;padding:0;max-width:92%}.wmsg.me{flex-direction:row-reverse}
button.wav{all:unset;cursor:pointer;border-radius:50%;flex:none}
.wbody{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:5px 11px;min-width:0}.wmsg.me .wbody{background:var(--acc-soft)}
.wmeta{display:flex;gap:8px;align-items:baseline;font-size:.78rem}.wmeta b{font-weight:700}.wmeta .mut{font-size:.7rem}.wtext{overflow-wrap:anywhere;white-space:pre-wrap}
/* reactions */
.rbar{display:flex;gap:4px;margin:8px 0 2px}
.rbar button{min-height:36px;flex:1 1 0;min-width:0;max-width:48px;padding:0;font-size:1.15rem;border-radius:12px;background:var(--surface-2);border-color:var(--border);box-shadow:none;line-height:1}
.rbar button:active{transform:scale(.85)}
.fxl{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.gstage{position:relative}
.fly{position:absolute;bottom:4%;left:var(--x);display:flex;flex-direction:column;align-items:center;animation:flyup 2.9s cubic-bezier(.2,.7,.3,1) forwards;pointer-events:none}
.fly b{font-size:2.1rem;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}.fly small{font-size:.68rem;font-weight:600;color:#fff;background:rgba(0,0,0,.45);border-radius:99px;padding:0 7px;margin-top:2px;white-space:nowrap}
@keyframes flyup{0%{opacity:0;transform:translate(-50%,20px) scale(.4)}12%{opacity:1;transform:translate(-50%,0) scale(1.15)}25%{transform:translate(calc(-50% + var(--d)*.3),-12%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--d)),-260%) scale(.9)}}
.fsmsg{position:absolute;inset-inline-start:16px;bottom:84px;max-width:min(60%,420px);z-index:7;padding:7px 14px;border-radius:14px;background:rgba(0,0,0,.6);color:#fff;font-size:.95rem;animation:ti .25s var(--ease) both;pointer-events:none;backdrop-filter:blur(6px)}
/* chess clock */
.gclock{font-variant-numeric:tabular-nums;font-weight:700;padding:0 8px;border-radius:8px;background:var(--acc-soft);margin-inline-start:4px;direction:ltr}
.gclock.run{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc)}.gclock.low{background:var(--bad);color:#fff;animation:pulse 1s ease-in-out}
@keyframes pulse{50%{opacity:.6}}
/* notifications */
button.bell{position:relative}.nbadge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:.66rem;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface-2)}
.nstack{position:fixed;top:calc(74px + env(safe-area-inset-top));inset-inline-end:14px;z-index:130;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 28px))}
.ncard{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 12px;border-radius:1.2rem;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));animation:nin .35s var(--spring) both}
.ncard.out{animation:nout .25s ease forwards}.ncard.nb{background:radial-gradient(120% 120% at 0 0,color-mix(in srgb,var(--k,#f5c451) 22%,transparent),transparent 60%),var(--surface-2)}
@keyframes nin{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}@keyframes nout{to{opacity:0;transform:translateY(-8px) scale(.97)}}
.nic{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;background:var(--acc-soft)}
button.nbody{all:unset;cursor:pointer;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.nbody b{font-size:.92rem}.nbody .mut,.nrow .mut{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ncard .picon.nx{width:30px;height:30px;color:var(--muted);background:transparent;border:0;box-shadow:none;min-height:0}.ncard .picon.nx .ic{width:16px;height:16px}
.nlist{display:grid;gap:6px;max-height:55vh;overflow:auto;margin-top:8px}
button.nrow{justify-content:flex-start;align-items:center;gap:10px;min-height:0;padding:8px 10px;border-radius:1rem;background:transparent;border:1px solid transparent;box-shadow:none;color:var(--text);font-weight:400;text-align:start}
button.nrow.new{background:var(--surface-2);border-color:var(--border)}button.nrow .grow{display:flex;flex-direction:column;min-width:0}.nrow .nt{flex:none;font-size:.72rem}
button.nrow.new .nic{box-shadow:0 0 0 2px var(--bad)}
.nperm{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:1rem;background:var(--acc-soft)}.nperm>.ic{width:22px;height:22px}.nperm button{flex:none}
@media(prefers-reduced-motion:reduce){.fly,.ncard,.bcard,.ptile{animation-duration:.01ms}}
.files.one{grid-template-columns:minmax(0,1fr)}
.card.wide .blist{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* profile page: compact, no empty space */
.pban{height:96px;background:radial-gradient(90% 140% at 15% 0,color-mix(in srgb,var(--a) 85%,#fff 0%),transparent 60%),radial-gradient(80% 120% at 100% 100%,color-mix(in srgb,var(--a) 55%,#000),transparent 70%),color-mix(in srgb,var(--a) 35%,var(--surface-2))}
.pid{display:flex;align-items:flex-end;gap:14px;padding:0 20px;margin-top:-46px}
.pname{min-width:0;padding-bottom:4px}.pname h2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:1.4rem;line-height:1.5}.pname h2 bdi{overflow:hidden;text-overflow:ellipsis}
.pid .pacts{gap:6px;flex:none;padding-bottom:8px}.pid .pacts button{flex:none}
.pbio{margin:12px 20px 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}
.pstrip{display:flex;margin:14px 20px 18px;border:1px solid var(--border);border-radius:1.1rem;background:var(--surface-2);overflow:hidden}
.pst{flex:1;display:flex;flex-direction:column;align-items:center;padding:9px 4px;min-width:0}.pst+.pst{border-inline-start:1px solid var(--border)}
.pst b{font-size:1.1rem;line-height:1.4}.pst span{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:720px){.pid{flex-wrap:wrap}.pid .pacts{width:100%;padding:0}.pid .pacts button{flex:1 1 0;min-width:0}}
@media(max-width:560px){.pid{flex-direction:column;align-items:center;text-align:center}.pname h2{justify-content:center}.pbio{text-align:center}
  .pstrip{flex-wrap:wrap}.pst{flex:1 1 33%}.pst:nth-child(4){border-inline-start:0}.pst:nth-child(n+4){border-top:1px solid var(--border)}}
.pcols{columns:2 340px;column-gap:14px}.pcols>.card{break-inside:avoid;display:inline-block;width:100%;vertical-align:top}
.ph{justify-content:space-between;align-items:baseline}
.pempty{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:1rem;background:var(--surface-2);color:var(--muted);font-size:.88rem}.pempty>.ic{width:20px;height:20px;flex:none}.pempty button{flex:none}
.k-bronze{--k:#d08b55}.k-silver{--k:#c3cad6}.k-locked{--k:#6b7280}
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.ach{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:1rem;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--k) 35%,var(--border));animation:rowin .4s var(--ease) both;animation-delay:calc(var(--i,0)*30ms)}
.ach .grow{min-width:0;display:flex;flex-direction:column;gap:3px}.ach.k-locked .bdisc{opacity:.55}.ach .tier{font-size:.72rem;font-weight:800;color:var(--k)}.ach .rare{font-size:.7rem;opacity:.75}
.ach .bar,.plvl .bar{display:block;height:5px;border-radius:9px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}.ach .bar i,.plvl .bar i{display:block;height:100%;border-radius:9px;background:var(--k,var(--acc))}
.plvl{display:flex;align-items:center;gap:8px;margin:2px 0}.plvl .bar{width:120px}.plvl b{font-size:.85rem}
.tfxbox{position:relative;display:block}.tfxbox input{color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--text)}
.tfxbox input::placeholder{color:var(--muted);-webkit-text-fill-color:var(--muted)}
.tfx{position:absolute;pointer-events:none;overflow:hidden;white-space:pre;display:flex;align-items:center;direction:ltr;color:var(--text);border:solid transparent;box-sizing:border-box}
.tfx>span{display:inline-block;white-space:pre}.tfx>span>span{display:inline-block}
.tfx .in{animation:tfxin .2s cubic-bezier(.2,.8,.2,1) both}@keyframes tfxin{from{opacity:0;transform:translateY(.45em);filter:blur(2px)}}
@media(prefers-reduced-motion:reduce){.tfx .in{animation:none}}
button.lnk.fgtlnk{display:block;width:fit-content;margin:-2px 0 12px;margin-inline-start:auto;font-size:.82rem;color:var(--muted)}button.lnk.fgtlnk.back{margin:16px auto 0;font-size:.9rem}
.fgthead{text-align:center;margin:0 0 14px}
.lookpick .palpick{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lookpick .palpick button{justify-content:flex-start;margin:0}
.md .row:has(>.lookskip){justify-content:center}.md button.lookskip{background:none;border:0;box-shadow:none;color:var(--muted);font-size:.85rem;min-height:0;padding:6px 14px;flex:none;width:auto}
.lookl{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lookl button{min-height:64px;font-size:1.1rem;font-weight:800}.lookpick .seg{margin-bottom:12px}
.blist2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}@media(max-width:420px){.bitem{flex-direction:column;text-align:center;gap:6px}.bitem .grow{align-items:center}}
.bitem{display:flex;align-items:center;gap:10px;padding:10px;border-radius:1rem;animation:rowin .4s var(--ease) both;animation-delay:calc(var(--i,0)*40ms);
  background:radial-gradient(120% 160% at 100% 0,color-mix(in srgb,var(--k) 18%,transparent),transparent 65%),var(--surface-2);border:1px solid color-mix(in srgb,var(--k) 28%,var(--border))}
.bitem .grow{display:flex;flex-direction:column;min-width:0;line-height:1.5}.bitem .mut{font-size:.76rem}
.precs{display:grid;gap:6px}.prec{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:1rem;background:var(--surface-2);border:1px solid var(--border);animation:rowin .4s var(--ease) both;animation-delay:calc(var(--i,0)*30ms)}.prec .grow{min-width:0}
.plist{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px}
button.prow{justify-content:flex-start;gap:10px;min-height:0;padding:7px 10px;border-radius:1rem;color:var(--text);box-shadow:none;font-weight:400;text-align:start;animation:rowin .4s var(--ease) both;animation-delay:calc(var(--i,0)*30ms);
  background:linear-gradient(90deg,color-mix(in srgb,var(--a) 18%,transparent),transparent 70%),var(--surface-2);border:1px solid var(--border)}
html[dir=rtl] button.prow{background:linear-gradient(270deg,color-mix(in srgb,var(--a) 18%,transparent),transparent 70%),var(--surface-2)}
button.prow.cur{border-color:color-mix(in srgb,var(--a) 60%,transparent)}.prow .grow{display:flex;flex-direction:column;min-width:0;line-height:1.45}.prow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
/* a game on a wide screen: the chat beside the board */
@media(min-width:1024px){.glay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}.glay>.card{margin:0}
  .glay .wchat{position:sticky;top:calc(90px + env(safe-area-inset-top));display:flex;flex-direction:column}.glay .wchat .wlog{max-height:none;height:calc(100vh - 360px);min-height:260px}}
/* friends: side panel */
.drawer-wrap{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.35);animation:fade .2s both}.drawer-wrap.out{animation:fade .2s reverse both}
.drawer{position:absolute;top:calc(10px + env(safe-area-inset-top));bottom:calc(10px + env(safe-area-inset-bottom));inset-inline-end:max(10px,env(safe-area-inset-right));width:min(400px,calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:#17171a;animation:din .3s var(--ease) both}
html[dir=ltr] .drawer{animation-name:dinl}.drawer-wrap.out .drawer{animation:dout .2s ease both}
@keyframes din{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}@keyframes dinl{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}@keyframes dout{to{opacity:0;transform:scale(.98)}}
@media(max-width:520px){.drawer{inset:0;width:100%;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}}
.dhead{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}.dhead h3{margin:0}.dhead>.grow{flex:1}
.dadd{padding:12px 14px 4px}.dadd .row{gap:6px}.dadd .mut{min-height:1.4em;margin-top:4px}
.dbody{flex:1;overflow:auto;padding:4px 10px 14px;display:flex;flex-direction:column;gap:4px}
.dsec{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700;color:var(--muted);padding:10px 6px 2px}
.frow{display:flex;align-items:center;gap:10px;padding:8px;border-radius:1rem;text-align:start;min-width:0}
button.frow{background:transparent;border:1px solid transparent;box-shadow:none;color:var(--text);min-height:0;font-weight:400;justify-content:flex-start}
@media(hover:hover){button.frow:hover{background:var(--acc-soft);transform:none;filter:none}}button.frow.new{background:var(--acc-soft)}
.frow.req{background:var(--acc-soft);border:1px solid var(--border)}
.frow .grow{display:flex;flex-direction:column;min-width:0;line-height:1.45}.frow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frn{display:flex;align-items:center;gap:6px;min-width:0}.fprev{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fside{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}.fbadge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center}
button.dwho{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;flex:1;min-width:0}.dwho .grow{display:flex;flex-direction:column;min-width:0;line-height:1.4}.dwho b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dhead:has(.dwho)>.grow{display:none}
.dtools{display:flex;gap:6px;padding:8px 14px;border-bottom:1px solid var(--border)}.dtools button{flex:1}.dtools button.icon{flex:none}
.dlog{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.dday{align-self:center;font-size:.72rem;color:var(--muted);background:var(--acc-soft);padding:1px 10px;border-radius:99px;margin:8px 0 4px}
.dmsg{align-self:flex-start;max-width:82%;padding:6px 12px 4px;border-radius:16px 16px 16px 4px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;animation:rowin .2s var(--ease) both}
html[dir=rtl] .dmsg{border-radius:16px 16px 4px 16px}
.dmsg.me{align-self:flex-end;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);border-color:transparent;border-radius:16px 16px 4px 16px}
html[dir=rtl] .dmsg.me{border-radius:16px 16px 16px 4px}
.dtxt{white-space:pre-wrap;overflow-wrap:anywhere}.dtime{font-size:.66rem;opacity:.65;align-self:flex-end}
.dsend{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}
.dsend textarea{flex:1;resize:none;min-height:44px;max-height:120px;margin:0;line-height:1.5}
.dlog .pempty{align-self:stretch;margin:auto 0}
html.light .drawer{background:#f5f5f7}
@media(max-width:440px){.top{gap:4px;padding:6px 8px 6px 10px}.top button.icon{width:36px;min-height:36px}.top .logo{width:30px;height:30px}button.who{min-height:36px}}
@media(max-width:360px){.top button.icon{width:33px;min-height:33px}.top button.icon .ic{width:18px;height:18px}}
.appdl .chip.big{width:52px;height:52px;border-radius:16px;flex:none}.appdl .chip.big .ic{width:26px;height:26px}.appdl a button{margin-top:4px}
.dhead{min-height:62px}.dhead button.sm:not(.icon){flex:none}
.dsearch{margin:6px 0 2px}
.dempty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin:auto 0;padding:30px 18px}
.dempty h3{margin:10px 0 0}.dempty p{margin:0 0 14px;max-width:290px;line-height:1.8}
.dico{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 55%),var(--acc-soft);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.dico .ic{width:38px;height:38px}.dico.sm{width:48px;height:48px;margin-bottom:6px}.dico.sm .ic{width:22px;height:22px}
.dadd2{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 14px;margin:6px 0 4px;border-radius:1.2rem;background:var(--acc-soft);border:1px solid var(--border)}
.dadd2 p{margin:4px 0 12px;line-height:1.7}.dadd2 .row{width:100%;gap:6px}.dadd2 .row button{flex:none}.dmsg2{min-height:1.4em;margin-top:6px}
.dlist{display:flex;flex-direction:column;gap:4px}
.grank{margin-top:4px;font-size:.85rem;color:var(--muted)}.grank .delta{font-size:.9rem}
/* apple emoji pictures */
img.emo{width:1.25em;height:1.25em;vertical-align:-.28em;margin:0 .03em;display:inline-block}
.rbar img.emo{width:1.35rem;height:1.35rem;vertical-align:middle}.fly b img.emo{width:2.3rem;height:2.3rem}
.emop{position:absolute;bottom:calc(100% + 6px);inset-inline-start:8px;z-index:20;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;width:min(320px,calc(100% - 16px));border-radius:1.1rem;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);animation:nin .2s var(--ease) both}
.emop button{min-height:0;height:36px;padding:0;background:transparent;border:0;box-shadow:none;border-radius:10px}.emop button:hover{background:var(--acc-soft);transform:none}.emop img.emo{width:24px;height:24px;margin:0}
.dsend,.wsay{position:relative}.wsay{gap:6px}.wsay>button.icon{flex:none}
button.dico2{width:40px;min-height:40px;flex:none}
/* watch: full screen with the chat beside the video */
.wfs{position:relative}
.wfs:fullscreen,.wpop .wfs{display:flex;width:100vw;height:100vh;background:#000}
.wpop .wfs{position:absolute;inset:0}
.wfs:fullscreen>.player,.wpop .wfs>.player{position:relative;inset:auto;flex:1;min-width:0;height:100%;margin:0;border-radius:0;aspect-ratio:auto}
.wside{display:none}
.wfs.chat>.wside{display:flex;flex-direction:column;flex:none;width:min(360px,36vw);background:#141416;border-inline-end:1px solid rgba(255,255,255,.08);animation:fade .25s both}
.wside .wchat{flex:1;display:flex;flex-direction:column;margin:0;border-radius:0;border:0;box-shadow:none;background:transparent;min-height:0}
.wside .wchat .wlog{flex:1;max-height:none;min-height:0}
button.pchat{position:absolute;top:12px;inset-inline-start:12px;z-index:8;display:none;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;transition:opacity .3s}
.player.fs button.pchat{display:grid}.player.fs:not(.ui):not(.paused) button.pchat:not(.on){opacity:0}button.pchat.on{background:rgba(255,255,255,.22)}
/* chats: pictures, files, seen, typing, groups */
.dimgl{display:block;margin:2px -6px 2px}.dimg{display:block;max-width:100%;max-height:260px;border-radius:12px;object-fit:cover}
.dmsg.pic{padding:4px}.dmsg.pic .dtime{padding:0 6px 2px}
a.dfile{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:2px 0;border-radius:10px;background:rgba(127,127,140,.15);color:inherit;min-width:180px}a.dfile .grow{display:flex;flex-direction:column;min-width:0;line-height:1.35}a.dfile b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
.dmsg.sending,.wmsg.sending{opacity:.55}
.dseen{align-self:flex-end;font-size:.68rem;color:var(--muted);margin-top:-2px}.dseen.on{color:#60a5fa}
.dtyping{min-height:1.5em;padding:0 16px;font-size:.76rem;color:var(--muted);font-style:italic}
.dupl{padding:0 12px}.dupl .up-row{margin:4px 0}
.dsys{align-self:center;font-size:.74rem;color:var(--muted);text-align:center;padding:2px 10px}
button.dfrom{all:unset;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.74rem;margin-bottom:2px}button.dfrom b{font-weight:700}
.gav{position:relative;width:var(--s);height:var(--s);flex:none}.gav>*{position:absolute;box-shadow:0 0 0 2px var(--surface-2)}
.gav>:nth-child(1){top:0;inset-inline-start:0}.gav>:nth-child(2){bottom:0;inset-inline-end:0}.gav>:nth-child(3){bottom:0;inset-inline-start:0;transform:scale(.8)}
button.pickr .tick{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-hi);color:transparent}button.pickr.on .tick{background:var(--ok);color:#06210f;border-color:transparent}button.pickr.on{background:var(--acc-soft)}
/* games: coloured icon tiles; cards top-aligned */
.gico{width:var(--s);height:var(--s);flex:none;border-radius:calc(var(--s) * .3);display:inline-grid;place-items:center;vertical-align:middle;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -6px var(--gc,rgba(0,0,0,.4))}
.gico::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0,rgba(255,255,255,.35),transparent 55%);pointer-events:none}
.gico svg{width:62%;height:62%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.gico.g-chess{background:linear-gradient(140deg,#fbbf24,#d97706 55%,#92400e);--gc:rgba(217,119,6,.55)}
.gico.g-quoridor{background:linear-gradient(140deg,#60a5fa,#4f46e5);--gc:rgba(79,70,229,.55)}
.gico.g-ludo{background:linear-gradient(140deg,#fb7185,#e11d48 60%,#9f1239);--gc:rgba(225,29,72,.5)}
.gico.g-othello{background:linear-gradient(140deg,#34d399,#0d9488);--gc:rgba(13,148,136,.55)}
.gico.g-c4{background:linear-gradient(140deg,#818cf8,#7c3aed);--gc:rgba(124,58,237,.55)}
.gico.g-ttt{background:linear-gradient(140deg,#22d3ee,#0284c7);--gc:rgba(2,132,199,.55)}
button.gpk{justify-content:flex-start;gap:6px}button.gpk .gico{margin-bottom:8px;transition:transform .3s var(--spring)}
@media(hover:hover){button.gpk:hover .gico{transform:scale(1.08) rotate(-4deg)}}
.wtitle .gico{margin-inline-end:4px}.gpick.sm button.gpk .gico{margin-bottom:2px}

.gpick:not(.sm){grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:700px){.gpick:not(.sm){grid-template-columns:repeat(3,minmax(0,1fr))}}
.gnet{margin:-4px 0 10px;padding:8px 12px;border-radius:12px;font-size:.86rem;background:rgba(245,158,11,.14);color:#fbbf24}.gnet.bad{background:rgba(251,113,133,.14);color:var(--bad)}html.light .gnet{color:#b45309}

/* games: the board glows on my turn and with the result; the result over the board; a banner when it's my turn */
@property --na{syntax:"<angle>";inherits:false;initial-value:0deg}
.gwrap>*{position:relative}
.gwrap.myturn>*,.gwrap.won>*,.gwrap.lost>*,.gwrap.drawn>*{--nc:#38bdf8;border-radius:16px;box-shadow:0 0 0 2px color-mix(in srgb,var(--nc) 70%,transparent),0 0 16px 2px color-mix(in srgb,var(--nc) 35%,transparent)}
.gwrap.won>*{--nc:#22c55e}.gwrap.lost>*{--nc:#ef4444}.gwrap.drawn>*{--nc:#60a5fa}
.gwrap.fx>*{animation:gneon 1.2s ease-out 1}  /* once, when it becomes my turn / the game ends (fx comes and goes with that moment), then it stays still */
@keyframes gneon{0%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}40%{box-shadow:0 0 0 4px var(--nc),0 0 38px 9px color-mix(in srgb,var(--nc) 60%,transparent)}}
.gwrap.fx.won>*::before,.gwrap.fx.lost>*::before,.gwrap.fx.drawn>*::before{content:"";position:absolute;inset:-6px;border-radius:21px;padding:3px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--na),transparent 0 50%,var(--nc) 72%,#fff 80%,var(--nc) 88%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:nspin 2.4s linear 1 both}
@keyframes nspin{90%{opacity:1}to{--na:360deg;opacity:0}}
.gseat.on.me{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.25)}
.gend{--nc:#a1a1aa;position:absolute;inset:0;z-index:20;display:grid;place-items:center;cursor:pointer;border-radius:16px;background:radial-gradient(circle,rgba(0,0,0,.5),rgba(0,0,0,.12) 72%);animation:fade .3s both}
.gend.won{--nc:#22c55e}.gend.lost{--nc:#ef4444}.gend.drawn{--nc:#60a5fa}
.gendc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 36px;border-radius:24px;color:#fff;background:rgba(14,14,17,.84);backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--nc) 65%,transparent);box-shadow:0 0 44px color-mix(in srgb,var(--nc) 45%,transparent),inset 0 0 18px color-mix(in srgb,var(--nc) 18%,transparent);animation:gpop .5s var(--spring) both}
.gendi{font-size:2.6rem;line-height:1.1}.gend.won .gendi{animation:gbounce 1.2s var(--spring) .25s both}
.gendt{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;line-height:1.3;color:var(--nc);text-shadow:0 0 18px color-mix(in srgb,var(--nc) 75%,transparent)}
.gendd{font-size:1.2rem;font-weight:800;padding:4px 16px;border-radius:99px;background:rgba(255,255,255,.08)}.gendd.up{color:#4ade80}.gendd.down{color:#f87171}
.gend small{opacity:.55;font-size:.72rem}
@keyframes gpop{from{transform:scale(.6);opacity:0}}
@keyframes gbounce{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:none}}
.gturn{position:absolute;left:50%;top:40%;z-index:7;padding:10px 26px;border-radius:99px;font-weight:800;font-size:1.3rem;color:#fff;white-space:nowrap;pointer-events:none;
  background:rgba(14,165,233,.92);box-shadow:0 0 30px rgba(56,189,248,.7);transform:translate(-50%,-50%)}
.gturn.go{animation:gturn 1.7s ease both}
@keyframes gturn{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}24%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-75%)}}
.gwatch{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;margin-inline-start:10px;font-size:.8rem;font-weight:600;vertical-align:middle}.gwatch .ic{width:15px;height:15px}
.goffer{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;margin-inline-start:8px}
.grev{justify-content:center;gap:6px;margin-top:10px}.grev:empty,.ghist:empty{display:none}
.chist{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:2px 3px;max-width:var(--bs);max-height:92px;overflow-y:auto;margin:10px auto 0;padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);font-size:.85rem}
.chn{color:var(--muted);margin-inline-start:6px;font-variant-numeric:tabular-nums}
button.chm{min-height:0;padding:2px 6px;margin:0;border-radius:6px;background:transparent;border:0;box-shadow:none;color:var(--text);font:inherit;font-weight:600}button.chm.on{background:var(--acc-soft);outline:1px solid var(--border-hi)}
.ctaken{display:inline-flex;align-items:center;margin-inline-start:4px}.cpc.mini{width:16px;height:16px;margin-inline-end:-5px}.ctaken b{font-size:.75rem;margin-inline-start:8px;color:var(--muted)}
.chess .gcell.pre{background-image:linear-gradient(rgba(239,68,68,.38),rgba(239,68,68,.38))}
.chess .gcell.mv{touch-action:none;cursor:grab}.chess .gcell.drag .cpc{opacity:.3}
.cpc.cdrag{position:fixed;left:0;top:0;z-index:300;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.gwrap.anim .chess .gcell.last{overflow:visible;z-index:2}.gwrap.anim .chess .gcell.last .cpc{animation:cslide .22s ease-out}
@keyframes cslide{from{transform:translate(calc(var(--dx,0) * 113.6%),calc(var(--dy,0) * 113.6%))}}
.ttt .gcell.last:not(.win){border-color:var(--border-hi);box-shadow:inset 0 0 0 2px var(--acc-soft)}.gwrap.anim .ttt .gcell.last{animation:gpop .3s var(--spring)}
.gwrap.anim .othello .gcell.fl i{animation:oflip .45s ease}.gwrap.anim .othello .gcell.last i{animation:gpop .3s var(--spring)}
@keyframes oflip{50%{transform:rotateY(90deg) scale(1.1)}}
.othello .ocnt{position:absolute;font-size:.72rem;font-weight:800;color:#fff;opacity:0;transition:opacity .15s;pointer-events:none}
@media(hover:hover){.othello button.gcell:hover .ocnt{opacity:.95}.othello button.gcell.hint:hover i{opacity:0}}
@media(hover:none){.othello .ocnt{opacity:.85}.othello .gcell.hint i{opacity:0}}
.gwrap.anim .qpawn[style*="--dx"]{position:relative;z-index:2;animation:qslide .26s ease-out}
@keyframes qslide{from{transform:translate(calc(var(--dx) * (100% / .68 + 8px)),calc(var(--dy) * (100% / .68 + 8px)))}}
.qpath{width:22%;height:22%;border-radius:50%;opacity:.6;pointer-events:none}.qpath.p0{background:var(--k0)}.qpath.p1{background:var(--k1)}
.gwrap.anim .ldie.roll{animation:lroll .55s ease-out}@keyframes lroll{0%{transform:rotate(-220deg) scale(.4)}60%{transform:rotate(18deg) scale(1.12)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.gwrap>*,.gwrap>*::before,.gturn.go,.gendc,.gendi{animation:none!important}}
.gname{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps{margin:8px 0 0;padding-inline-start:20px;line-height:1.9}.steps li{margin:2px 0}
details.howto{margin-top:10px}details.howto summary{cursor:pointer;color:var(--muted)}
.perms{display:flex;flex-direction:column;gap:10px}.perm{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}.perm.on{opacity:.7}.perm .ok{font-weight:800}
.oapps .ogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}
.oapp{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border)}
.pill.official{background:rgba(56,189,248,.15);color:#7dd3fc;border:1px solid rgba(56,189,248,.35);font-weight:700;padding:2px 10px}
html.light .pill.official{color:#0369a1}
.chip2.tagc.light{background:rgba(255,255,255,.14);color:var(--text)}.chip2.tagc.dark{background:rgba(255,255,255,.06);color:var(--muted)}
html.light .chip2.tagc.light{background:rgba(24,24,27,.07)}html.light .chip2.tagc.dark{background:rgba(24,24,27,.15);color:#3f3f46}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.tagc{display:inline-flex;align-items:center;gap:6px}
button.tagx{min-height:0;padding:0 2px;margin:0;border:0;background:none;box-shadow:none;color:inherit;font-size:1rem;line-height:1;cursor:pointer}
.tagadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.tagadd input{flex:1 1 160px}.seg.tagcol button{padding:4px 6px}
/* ---- the newer games: backgammon, dots and boxes, Hokm, UNO, اسم‌فامیل, Pictionary ---- */
.gnew{display:inline-block;margin-inline-start:6px;padding:0 7px;border-radius:99px;background:linear-gradient(90deg,#f43f5e,#f59e0b);color:#fff;font-size:.68rem;font-weight:800;vertical-align:2px;animation:gnewp 2.4s ease-in-out}
@keyframes gnewp{50%{filter:brightness(1.25)}}
.gico.g-bg{background:linear-gradient(140deg,#d6a46a,#92400e 60%,#5b2a0c);--gc:rgba(146,64,14,.55)}
.gico.g-dots{background:linear-gradient(140deg,#a3e635,#16a34a);--gc:rgba(22,163,74,.55)}
.gico.g-hokm{background:linear-gradient(140deg,#475569,#0f172a);--gc:rgba(15,23,42,.6)}
.gico.g-uno{background:linear-gradient(140deg,#fb923c,#dc2626 55%,#7f1d1d);--gc:rgba(220,38,38,.55)}
.gico.g-esm{background:linear-gradient(140deg,#f0abfc,#a21caf);--gc:rgba(162,28,175,.5)}
.gico.g-draw{background:linear-gradient(140deg,#fde047,#f97316 60%,#db2777);--gc:rgba(249,115,22,.55)}
.gseat.c4{--dot:var(--k4)}.gseat.c5{--dot:var(--k5)}.gseat.c6{--dot:var(--k6)}.gseat.c7{--dot:var(--k7)}
.bg{--k0:#f8f5ee;--k1:#2a201b}.dots{--k0:#ef4444;--k1:#3b82f6;--k2:#22c55e;--k3:#eab308}.hokm{--k0:#3b82f6;--k1:#ef4444}
.uno,.esm,.draw,.spy{--k0:#ef4444;--k1:#3b82f6;--k2:#22c55e;--k3:#eab308;--k4:#a855f7;--k5:#ec4899;--k6:#14b8a6;--k7:#f97316}
.pcard,.ucard,.bgp,.ea,.hsuit,.ucol,.dsw,.dpen,.unobtn,.bgoff,.bgbar-s,.udeck{min-height:0;padding:0;margin:0;font:inherit;box-shadow:none;border-radius:0;color:inherit;background:none;border:0}
/* dots and boxes */
.dwrap{width:100%;max-width:var(--bs);margin:0 auto;border-radius:18px;background:var(--surface-2);border:1px solid var(--border);padding:4px}
.dsvg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.ddot{fill:var(--text)}.dedge{stroke-width:2.2;stroke-linecap:round;stroke:var(--k0)}
.dedge.k0{stroke:var(--k0)}.dedge.k1{stroke:var(--k1)}.dedge.k2{stroke:var(--k2)}.dedge.k3{stroke:var(--k3)}
.dedge.last{stroke-dasharray:100;animation:dline .35s ease-out;filter:drop-shadow(0 0 2px currentColor)}@keyframes dline{from{stroke-dashoffset:100}}
.dbox{opacity:.42}.dbox.k0{fill:var(--k0)}.dbox.k1{fill:var(--k1)}.dbox.k2{fill:var(--k2)}.dbox.k3{fill:var(--k3)}
.dbox.new{animation:dbox .45s var(--spring);transform-box:fill-box;transform-origin:center}@keyframes dbox{from{transform:scale(.2);opacity:0}}
.dhit{stroke:transparent;stroke-width:9;stroke-linecap:round;cursor:pointer}.dghost{stroke:var(--muted);stroke-width:1;stroke-dasharray:1.5 2.5;opacity:.35;pointer-events:none}
@media(hover:hover){.dhit:hover+.dghost{stroke:var(--text);stroke-width:2.2;stroke-dasharray:none;opacity:.55}}
/* backgammon */
.bgwrap{width:100%;max-width:var(--bs);margin:0 auto}
.bgboard{display:grid;gap:0;padding:10px;border-radius:18px;background:linear-gradient(135deg,#7a4a24,#4a2a12 55%,#6b3d1c);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 2px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.45)}
.bgfelt{display:grid;grid-template-columns:repeat(6,1fr) minmax(16px,.6fr) repeat(6,1fr) minmax(18px,.7fr);grid-template-rows:auto minmax(54px,auto) auto;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at center,#2f6b45,#1d4a30 75%);box-shadow:inset 0 2px 10px rgba(0,0,0,.55)}
.bgzone{display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.bgp{position:relative;aspect-ratio:1/5.6;display:flex;flex-direction:column;align-items:center;cursor:default}
.bgp.pt-b{flex-direction:column-reverse}
.bgp .tri{position:absolute;inset:0;background:linear-gradient(180deg,#e9cf9f,#c9a36a);clip-path:polygon(6% 0,94% 0,50% 84%)}.bgp.o .tri{background:linear-gradient(180deg,#b23a24,#7e2414)}
.bgp.pt-b .tri{clip-path:polygon(50% 16%,94% 100%,6% 100%)}.bgp.pt-b .tri{background:linear-gradient(0deg,#e9cf9f,#c9a36a)}.bgp.pt-b.o .tri{background:linear-gradient(0deg,#b23a24,#7e2414)}
.bgp .bgstk{position:relative;display:flex;flex-direction:inherit;width:100%;align-items:center;padding:2px 0}
.bgc{display:grid;place-items:center;width:92%;aspect-ratio:1;border-radius:50%;flex:none;font-style:normal;font-size:.7rem;font-weight:800;margin:0 0 -1px}
.bgp.pt-b .bgc{margin:-1px 0 0}
.bgc.k0{background:radial-gradient(circle at 35% 30%,#fff 0 30%,#e4dccb 70%,#cfc4ad);color:#5a3416;box-shadow:inset 0 0 0 2px #d6ccb6,inset 0 0 0 4px #f6f1e6,0 2px 3px rgba(0,0,0,.55)}
.bgc.k1{background:radial-gradient(circle at 35% 30%,#6b574b 0 25%,#2c211b 70%,#140e0b);color:#f8f5ee;box-shadow:inset 0 0 0 2px #3c2e26,inset 0 0 0 4px #1f1712,0 2px 3px rgba(0,0,0,.6)}
.bgc.last{outline:2px solid #facc15;outline-offset:-1px}
button.bgp{cursor:pointer}.bgp.can .bgstk .bgc:last-child,.bgbar-s.can .bgc:last-child{box-shadow:0 0 0 3px #38bdf8,0 0 14px #38bdf8}
.bgp.sel .bgstk .bgc:last-child{box-shadow:0 0 0 3px #facc15,0 0 14px #facc15}.bgp.sel .tri{filter:brightness(1.25)}
.bgp.dst::after{content:"";position:absolute;left:50%;width:50%;aspect-ratio:1;border-radius:50%;background:#22c55e;box-shadow:0 0 12px #22c55e;transform:translateX(-50%);animation:gpulse 1s ease-in-out;z-index:3}
.bgp.pt-t.dst::after{bottom:20%}.bgp.pt-b.dst::after{top:20%}@keyframes gpulse{50%{opacity:.4}}
.bgbar{background:linear-gradient(90deg,#3d220e,#5a3416,#3d220e);display:flex;align-items:center;justify-content:center}
.bgbar-s{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%}.bgbar-s .bgc{width:90%}
.bgoff{display:flex;flex-direction:column-reverse;gap:1px;padding:3px 2px;background:#2b170a;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.bgfelt>.bgoff:nth-child(4){flex-direction:column}
.bgo{display:block;height:5px;border-radius:2px}.bgo.k0{background:#f2ebdc}.bgo.k1{background:#3a2b22;box-shadow:inset 0 0 0 1px #7b6455}
.bgoff.dst{box-shadow:inset 0 0 0 3px #22c55e;cursor:pointer;animation:gpulse 1s ease-in-out}
.bgbar.mid{min-height:100%}.bgoff.mid{box-shadow:none}
.bgdice{display:flex;gap:8px}.bgdice.old{opacity:.55}
.bgdie{display:inline-block;transform:translateX(var(--dx,0)) rotate(var(--rot,0deg))}.bgdie .ldie{width:34px;height:34px;padding:5px;box-shadow:0 4px 8px rgba(0,0,0,.5)}.bgdie.used{opacity:.3}
.bgdie.roll{animation:bgroll .7s cubic-bezier(.2,.8,.3,1.1)}
@keyframes bgroll{0%{transform:translate(calc(var(--dx,0) * 12),-40px) rotate(-540deg) scale(.6);opacity:.2}60%{transform:translateX(var(--dx,0)) rotate(calc(var(--rot,0deg) + 25deg)) scale(1.08)}}
button.bgroll{min-height:36px;padding:5px 18px;margin:0;border-radius:99px;background:linear-gradient(180deg,#facc15,#d97706);color:#3b1d06;border:0;box-shadow:0 3px 0 #92400e,0 6px 14px rgba(0,0,0,.4);font-weight:800;animation:gpulse 1.4s ease-in-out}
.bgundo{position:absolute;inset-inline-end:6px;width:30px;height:30px;min-height:0;padding:0;margin:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none;font-size:1.1rem}
.bginfo{justify-content:space-between;margin-top:8px;min-height:24px}.bghand{font-weight:700}.bgto{margin-inline-start:auto}

/* playing cards (Hokm) */
.pcard{position:relative;display:inline-flex;flex-direction:column;justify-content:space-between;width:54px;height:78px;border-radius:9px;background:linear-gradient(160deg,#fff,#f1f1f4);border:1px solid rgba(0,0,0,.18);box-shadow:0 2px 6px rgba(0,0,0,.3);padding:4px 5px;flex:none;transition:transform .18s var(--spring),box-shadow .18s,opacity .2s;color:#111;font-weight:800}
.pcard.red{color:#dc2626}.pcard .pc-r{display:flex;flex-direction:column;line-height:1;font-size:.95rem;align-items:flex-start}.pcard .pc-r i{font-style:normal;font-size:.8rem}
.pcard .pc-s{align-self:center;font-size:1.9rem;line-height:1;margin-bottom:6px}
.pcard.sm{width:38px;height:54px;padding:2px 4px}.pcard.sm .pc-s{font-size:1.2rem;margin-bottom:2px}.pcard.sm .pc-r{font-size:.75rem}
button.pcard{cursor:pointer}.pcard.can{transform:translateY(-8px);box-shadow:0 0 0 2px #38bdf8,0 8px 18px rgba(0,0,0,.35)}
@media(hover:hover){button.pcard.can:hover{transform:translateY(-14px)}}
.pcard.off{opacity:.45;filter:saturate(.5)}
.pbacks{display:inline-flex;align-items:center;direction:ltr}.pbacks i{width:14px;height:22px;border-radius:3px;margin-inline-end:-9px;background:repeating-linear-gradient(45deg,#1e40af 0 3px,#3b82f6 3px 6px);border:1px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.pbacks b{margin-inline-start:14px;font-size:.8rem}
.hwrap{width:100%;max-width:var(--bs);margin:0 auto}
.hinfo{flex-wrap:wrap;gap:8px;margin-bottom:8px;align-items:stretch}.hsc{display:flex;align-items:center;gap:8px;padding:4px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.hsc.t0{border-color:#3b82f6}.hsc.t1{border-color:#ef4444}.hsc b{font-size:1.3rem}.hace{align-self:center}
.hfelt{position:relative;aspect-ratio:1/.82;max-height:56vh;width:100%;margin:0 auto;border-radius:26px;background:radial-gradient(ellipse at center,#1f7a4d,#0f4a2e 80%);box-shadow:inset 0 0 0 6px #5a3416,inset 0 0 30px rgba(0,0,0,.5);overflow:hidden}
.hseat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:.85rem;padding:4px 8px;border-radius:12px;transition:background .2s}
.hseat.on{background:rgba(255,255,255,.16);box-shadow:0 0 0 2px #facc15}
.hseat.t{top:8px;left:50%;transform:translateX(-50%)}.hseat.l{left:8px;top:50%;transform:translateY(-50%)}.hseat.r{right:8px;top:50%;transform:translateY(-50%)}.hseat.b{bottom:8px;left:50%;transform:translateX(-50%)}
.hseat.t0 .hname{border-bottom:2px solid #60a5fa}.hseat.t1 .hname{border-bottom:2px solid #f87171}
.hname{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.htable{position:absolute;inset:22% 22%}
.hplay{position:absolute;left:50%;top:50%;transition:transform .3s}.hplay .pcard{transform:translate(-50%,-50%)}
.hplay.b{transform:translateY(28%)}.hplay.t{transform:translateY(-28%)}.hplay.l{transform:translateX(-62%)}.hplay.r{transform:translateX(62%)}
.hplay.b .pcard{transform:translate(-50%,-10%)}.hplay.t .pcard{transform:translate(-50%,-90%)}.hplay.l .pcard{transform:translate(-110%,-50%) rotate(-8deg)}.hplay.r .pcard{transform:translate(10%,-50%) rotate(8deg)}
.hplay.in.b{animation:hin-b .3s ease-out}.hplay.in.t{animation:hin-t .3s ease-out}.hplay.in.l{animation:hin-l .3s ease-out}.hplay.in.r{animation:hin-r .3s ease-out}
@keyframes hin-b{from{transform:translateY(160%);opacity:0}}@keyframes hin-t{from{transform:translateY(-160%);opacity:0}}@keyframes hin-l{from{transform:translateX(-200%);opacity:0}}@keyframes hin-r{from{transform:translateX(200%);opacity:0}}
.hplay.win .pcard{box-shadow:0 0 0 3px #facc15,0 0 18px #facc15}
.htrump{position:absolute;top:-16%;inset-inline-start:-20%;display:flex;flex-direction:column;align-items:center;background:#fff;color:#111;border-radius:12px;padding:2px 10px;box-shadow:0 3px 10px rgba(0,0,0,.4);line-height:1.2}
.htrump.red{color:#dc2626}.htrump b{font-size:1.8rem;line-height:1}.htrump small{font-size:.65rem;color:#555}
.hend{position:absolute;inset:18% 8%;display:grid;place-content:center;text-align:center;border-radius:18px;background:rgba(0,0,0,.6);color:#fff}.hend.pop{animation:gpop .35s var(--spring)}
.hend b{font-size:1.6rem}.hend.won b{color:#4ade80}.hend.lost b{color:#fb7185}
.hpick{position:absolute;inset:auto 6% 26% 6%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:18px;background:rgba(0,0,0,.65);color:#fff}.hpick.pop{animation:gpop .3s var(--spring)}
.hpick .row{gap:8px;flex-wrap:wrap;justify-content:center}
.hsuit{display:flex;flex-direction:column;align-items:center;width:64px;padding:6px 0;border-radius:14px;background:#fff;color:#111;cursor:pointer;font-size:.8rem;transition:transform .15s var(--spring)}
.hsuit b{font-size:2rem;line-height:1}.hsuit.red{color:#dc2626}@media(hover:hover){.hsuit:hover{transform:translateY(-4px) scale(1.05)}}
.hpeek{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}.hpeek .win .pcard{box-shadow:0 0 0 2px #facc15}
.hhand{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:12px;padding-top:8px;min-height:90px}
@media(max-width:520px){.hhand .pcard{width:44px;height:64px}.hhand .pcard .pc-s{font-size:1.5rem}.htable .pcard{width:44px;height:64px}.htable .pcard .pc-s{font-size:1.5rem}}
.ctime{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 6px;border-radius:99px;background:#facc15;color:#111;font-size:.75rem;font-weight:800}
/* اسم‌فامیل */
.ewrap{width:100%;max-width:var(--bs);margin:0 auto}
.ehead{gap:12px;align-items:center;margin-bottom:12px}
.eltr{display:grid;place-items:center;width:64px;height:64px;flex:none;border-radius:18px;background:linear-gradient(140deg,#f0abfc,#a21caf);color:#fff;font-size:2.2rem;font-weight:900;box-shadow:0 6px 18px rgba(162,28,175,.45)}.eltr.pop{animation:gpop .4s var(--spring)}
.eltr.q{background:var(--surface-2);color:var(--muted);box-shadow:none}.eltr-s{color:#d946ef;font-size:1.2rem}
.etime,.drtime{font-weight:800;font-size:1.1rem;min-width:2.5em;text-align:end}
.tbar{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:6px}.tbar i{display:block;height:100%;width:calc(var(--p) * 100%);background:linear-gradient(90deg,#f59e0b,#22c55e);transition:width .25s linear;border-radius:inherit}
.egrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}@media(min-width:700px){.egrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ecell span{font-size:.8rem;color:var(--muted);font-weight:700}.ecell input{margin:2px 0 6px}
.eact{justify-content:center;gap:12px;margin:8px 0;flex-wrap:wrap}
.estop{padding:10px 40px;border-radius:99px;background:linear-gradient(180deg,#ef4444,#b91c1c);color:#fff;font-size:1.2rem;font-weight:900;box-shadow:0 4px 0 #7f1d1d}
.eprog{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}.eprog .pill.full{border-color:#22c55e;color:#22c55e}
.ecount{display:flex;flex-direction:column;align-items:center;gap:4px;margin:4px 0 12px}.ecount b{font-size:3.4rem;line-height:1;color:#d946ef;animation:gpop .5s var(--spring)}
.ecols{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ecol{padding:8px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}.ecol>b{display:block;margin-bottom:4px}
.eans{display:flex;flex-direction:column;gap:4px}
.ea{display:flex;flex-direction:column;gap:4px;width:100%;padding:5px 8px;border-radius:12px;background:var(--surface);border:1px solid var(--border);text-align:start;font-weight:600;transition:opacity .2s}
.ea-top{display:flex;align-items:center;gap:6px;min-width:0}
.ea small{color:var(--muted);font-size:.7rem;max-width:4.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-top span{flex:1;min-width:0;overflow-wrap:anywhere}
.ea.nope .ea-top span{text-decoration:line-through;opacity:.5}.ea.self{border-style:dashed}
.ept{min-width:26px;text-align:center;border-radius:8px;background:rgba(34,197,94,.16);color:#4ade80;font-size:.8rem}.ept.zero{background:var(--acc-soft);color:var(--muted)}
.epts{display:flex;gap:4px}
.ep{position:relative;flex:1;display:grid;place-items:center;min-height:28px;padding:0;margin:0;border-radius:8px;font-size:.78rem;font-weight:800;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);box-shadow:none}
button.ep{cursor:pointer}.ep.on{color:#fff;background:linear-gradient(140deg,#d946ef,#a21caf);border-color:transparent}.ep.x.on{background:linear-gradient(140deg,#f43f5e,#be123c)}
.ep sup{position:absolute;top:-6px;inset-inline-end:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:99px;background:#facc15;color:#111;font-size:.6rem;line-height:15px}
.prank{margin-top:12px;padding:12px}.prk{display:flex;align-items:center;gap:10px;padding:4px 0}.pmed{width:1.6em;text-align:center}
/* Pictionary */
.dwrap2{width:100%;max-width:min(var(--bs),calc(100vh - 300px));min-width:min(100%,320px);margin:0 auto}
.dtop{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.dword{display:inline-flex;align-items:flex-end;gap:4px;font-size:1.3rem;letter-spacing:.04em}
.dword.mask i{display:inline-grid;place-items:center;width:20px;height:26px;border-bottom:3px solid var(--text);font-style:normal}.dword.mask i.on{border-color:#22c55e;color:#22c55e}.dword.mask u{width:10px}
.dstage{position:relative}
.dcv{display:block;width:100%;aspect-ratio:1;background:#fff;border-radius:18px;box-shadow:var(--shadow-soft);touch-action:none}.dcv.on{cursor:crosshair;box-shadow:0 0 0 3px #38bdf8,var(--shadow-soft)}
.dover{position:absolute;inset:0;display:grid;place-items:center;border-radius:18px;background:rgba(10,10,12,.62);color:#fff;padding:16px}
.dpick{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;animation:gpop .35s var(--spring)}.dpick .row{gap:8px;flex-wrap:wrap;justify-content:center}
.dpick .prank{min-width:220px;background:rgba(255,255,255,.08);border-radius:14px}.dbig{font-size:2rem}
.dtbar{display:flex;flex-direction:column;gap:6px;margin-top:8px}.dpal,.dpens{gap:6px;flex-wrap:wrap;justify-content:center}
.dsw{width:30px;height:30px;border-radius:50%;background:var(--c);border:2px solid var(--border-hi);cursor:pointer}.dsw.on{box-shadow:0 0 0 3px var(--text);transform:scale(1.12)}
.dpen{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer}.dpen.on{border-color:var(--text)}
.dpen i{width:var(--w);height:var(--w);border-radius:50%;background:var(--text)}
.dguess{gap:8px;margin-top:8px}.dguess input{margin:0}
.dhits{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.dhits .pill{border-color:#22c55e;color:#22c55e}
/* the players: a card each */
.gseats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.gpc{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:var(--surface-2);border:1.5px solid var(--border);transition:border-color .25s,box-shadow .25s;min-width:0}
.gpc.on{border-color:#e9c46a;box-shadow:0 0 0 3px rgba(233,196,106,.18),0 6px 20px rgba(233,196,106,.12)}
.gpc-av{flex:none;width:56px;height:56px;padding:0;margin:0;min-height:0;border-radius:50%;border:2px solid var(--border-hi);background:none;box-shadow:none;overflow:hidden;display:grid;place-items:center}
.gpc.on .gpc-av{border-color:#e9c46a}button.gpc-av{cursor:pointer}
.gpc-av .av{--s:52px;width:100%!important;height:100%!important;border-radius:50%;font-size:1.3rem}.gpic{display:block;width:100%;height:100%;overflow:hidden}.gpic svg{display:block;width:100%;height:100%}
.gpc-b{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.gpc-n{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.02rem}.gpc-n bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gpc-n .gdot{width:14px;height:14px}
.gpc-turn{align-self:flex-start;padding:1px 10px;border-radius:99px;border:1px solid #22c55e;background:rgba(34,197,94,.14);color:#4ade80;font-size:.75rem;font-weight:700}
.gpc-away{align-self:flex-start;font-size:.75rem;color:var(--bad)}
.gpc-s{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--muted);font-size:.8rem}.gpc-s>*+*::before{content:"-";margin-inline-end:8px;opacity:.6}
.gpc-s .mut{font-size:inherit}.gpc-s .gclock{margin-inline-start:auto}
.gseats.many{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.gseats.many .gpc{gap:9px;padding:8px 10px}.gseats.many .gpc-av{width:42px;height:42px}.gseats.many .gpc-n{font-size:.9rem;gap:6px}.gseats.many .gpc-n .gdot{width:11px;height:11px}
/* UNO: the players' cards above, the table (deck and pile), my hand fanned out below */
.uwrap{width:100%;max-width:var(--bs);margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ucard{--w:60px;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--w);height:calc(var(--w) * 1.5);border-radius:calc(var(--w) * .15);border:calc(var(--w) * .055) solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4);color:#fff;font-weight:900;overflow:hidden;transition:transform .2s var(--spring),box-shadow .2s,filter .2s}
.ucard.ur{background:#e11d48}.ucard.uy{background:#eab308}.ucard.ug{background:#16a34a}.ucard.ub{background:#2563eb}.ucard.uw,.ucard.back{background:#151515}
.ucard .uc-o{position:relative;display:grid;place-items:center;width:82%;height:66%;border-radius:50%;background:#fff;transform:rotate(-30deg);overflow:hidden}
.ucard .uc-o b{position:relative;transform:rotate(30deg);font-size:calc(var(--w) * .42);line-height:1;font-weight:900}
.ucard.ur .uc-o b{color:#e11d48}.ucard.uy .uc-o b{color:#ca8a04}.ucard.ug .uc-o b{color:#16a34a}.ucard.ub .uc-o b{color:#2563eb}
.ucard.uw .uc-o b{color:#fff;text-shadow:0 1px 3px #000,0 0 2px #000}
.uwheel{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}.uwheel i:nth-child(1){background:#e11d48}.uwheel i:nth-child(2){background:#2563eb}.uwheel i:nth-child(3){background:#eab308}.uwheel i:nth-child(4){background:#16a34a}
.ucard.back .uc-o{background:#e11d48}.ucard.back .uc-o b{transform:none;color:#facc15;font-size:calc(var(--w) * .26);letter-spacing:.02em;text-shadow:0 2px 0 #7f1d1d}
.uc-c{position:absolute;top:2%;left:7%;font-size:calc(var(--w) * .2);line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.45)}.uc-c.b{top:auto;left:auto;bottom:2%;right:7%;transform:rotate(180deg)}
.ucard.lg{--w:84px}.ucard.xs{--w:24px;vertical-align:middle;box-shadow:none}.ucard.xs .uc-c{display:none}
button.ucard{cursor:pointer}
.umid{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:clamp(36px,12vw,76px);padding:30px 16px 16px;border-radius:24px;background:radial-gradient(ellipse at 50% 40%,#36363e,#1b1b20 75%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 12px 30px rgba(0,0,0,.45)}
.uspot{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.uspot small{font-size:.75rem;color:#a1a1aa;line-height:1.45}
.upile .ucard{box-shadow:0 0 0 4px var(--ring,#fff),0 0 26px var(--ring,transparent)}
.upile.ring-r{--ring:#e11d48}.upile.ring-y{--ring:#eab308}.upile.ring-g{--ring:#16a34a}.upile.ring-b{--ring:#2563eb}

.udeck{display:block;border-radius:14px;cursor:default}.udeck.can{cursor:pointer}
.udeck .ucard{box-shadow:3px 3px 0 -1px #e4e4e7,4px 4px 0 -1px #151515,6px 6px 0 -1px #e4e4e7,0 8px 18px rgba(0,0,0,.5)}
.udeck.can .ucard{box-shadow:3px 3px 0 -1px #e4e4e7,4px 4px 0 -1px #151515,6px 6px 0 -1px #e4e4e7,0 0 0 3px #38bdf8,0 0 20px #38bdf8}
@media(hover:hover){.udeck.can:hover .ucard{transform:translateY(-4px)}}
.udir{position:absolute;top:12px;inset-inline-start:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:1.25rem;color:#e4e4e7}.udir.rev{transform:scaleX(-1)}
.upend{position:absolute;top:-10px;inset-inline-end:-14px;padding:0 9px;border-radius:99px;background:#facc15;color:#111;font-size:.95rem;font-weight:900;line-height:1.7;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.ulog{min-height:28px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;text-align:center}
.uhand{--ov:-14px;display:flex;flex-wrap:nowrap;justify-content:center;padding:28px 12px 4px;min-height:132px;overflow:visible}
.uhand .ucard{margin-left:var(--ov,0px);transform:translateY(var(--y,0px)) rotate(var(--r,0deg));transform-origin:50% 100%}.uhand .ucard:first-child{margin-left:0}
.uhand .ucard.can{transform:translateY(calc(var(--y,0px) - 16px)) rotate(var(--r,0deg));box-shadow:0 0 0 3px #4ade80,0 0 18px rgba(74,222,128,.65),0 8px 16px rgba(0,0,0,.45);z-index:1}
@media(hover:hover){.uhand button.ucard.can:hover{transform:translateY(calc(var(--y,0px) - 26px)) rotate(var(--r,0deg));z-index:2}}
.uhand .ucard.off{filter:brightness(.55) saturate(.7)}.uhand .ucard.drawn{box-shadow:0 0 0 3px #facc15,0 0 18px rgba(250,204,21,.6)}
@media(max-width:520px){.uhand .ucard{--w:52px}.ucard.lg{--w:76px}}
.unacts{justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
button.unobtn{min-height:0;margin:0;padding:8px 24px;border-radius:99px;font-size:1rem;font-weight:900;letter-spacing:.02em;color:#fb7185;background:transparent;border:2px solid rgba(244,63,94,.45);box-shadow:none}
button.unobtn:disabled{opacity:.45}
button.unobtn.now{color:#fff;background:linear-gradient(180deg,#f43f5e,#be123c);border-color:transparent;box-shadow:0 4px 0 #881337,0 6px 16px rgba(225,29,72,.45);animation:unop 1s ease-in-out}
button.unobtn.on{color:#fff;background:linear-gradient(180deg,#22c55e,#15803d);border-color:transparent;box-shadow:0 4px 0 #14532d;animation:none}@keyframes unop{50%{transform:scale(1.07)}}
.unote{text-align:center}.unob{color:#ef4444;font-weight:900}
.ucolors{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px;border-radius:18px;background:var(--surface-2);border:1px solid var(--border)}
.ucolors .row{gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
button.ucol{min-height:0;margin:0;padding:10px 18px;border-radius:12px;border:0;color:#fff;font-weight:800;box-shadow:0 3px 0 rgba(0,0,0,.3)}
button.ucol.ur{background:#e11d48}button.ucol.uy{background:#eab308}button.ucol.ug{background:#16a34a}button.ucol.ub{background:#2563eb}
.pbacks.u i{background:repeating-linear-gradient(45deg,#151515 0 3px,#e11d48 3px 6px)}
.pbacks.mini{flex:none}.pbacks.mini b{display:none}.pbacks.mini i{width:14px;height:21px;margin-inline-end:-9px}.gseats.many .pbacks.mini i{width:11px;height:17px;margin-inline-end:-7px}
/* the line saying whose turn it is */
.gstatus{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;padding:8px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}
.gstatus::before{content:"";width:9px;height:9px;border-radius:50%;background:#facc15;flex:none}.gstatus.mine::before{background:#22c55e}.gstatus.over::before{background:#a1a1aa}
.gstatus:empty{display:none}
.gpc-turn{white-space:nowrap}.gseats.many .gpc-turn{font-size:.68rem;padding:0 8px}
.gpc-s{min-width:0}.gpc-s>.ctaken{flex-basis:100%;flex-wrap:wrap;row-gap:3px;margin:2px 0 0;padding-inline-start:5px;min-width:0}.gpc-s>.ctaken::before{display:none}
.gpc-s .cpc.mini{width:15px;height:15px;margin-inline-end:-4px;filter:drop-shadow(0 0 1px rgba(255,255,255,.75)) drop-shadow(0 0 .5px rgba(255,255,255,.6))}html.light .gpc-s .cpc.mini{filter:none}
.na,.na::before,.na::after{animation:none!important}  /* app.js: a redrawn element doesn't play its motion again */
.keepseg{margin:6px 0 4px}.keepseg button{padding-inline:4px;min-width:0;white-space:nowrap;font-size:.86rem}.md .row.qalt{margin-top:8px}
/* dock: under 640px only the main tabs + «بیشتر» (the current one of the rest shows on that button) */
@media(max-width:640px){.dock button.more2{display:none}}
@media(min-width:641px){.dock button.morebtn{display:none}}
.moregrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.moregrid button{justify-content:flex-start;min-height:52px}.moregrid button.on{border-color:var(--acc);color:var(--text)}
/* search box + filter chips (files, games, showcase) */
.sbox{position:relative}.sbox .ic{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}.sbox input{padding-inline-start:42px}
.fchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 1px 8px;margin-bottom:4px}.fchips::-webkit-scrollbar{display:none}
.fchips button{flex:none;min-height:34px;padding:4px 14px;border-radius:99px;font-size:.86rem;font-weight:600;background:var(--surface-2);border-color:var(--border);color:var(--muted);box-shadow:none}
.fchips button.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);border-color:transparent}
.fcn{font-size:.72rem;opacity:.75;margin-inline-start:2px}
.fstats{margin:0 0 12px}.fstats .bar{margin-top:8px}
.ftools{margin-bottom:6px}.ftools .sbox input{margin-bottom:8px}
.fempty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px 18px}.fempty .row{justify-content:center;margin-top:6px}
/* the games list: search, categories, cards in rows (icon beside the name) */
.whero .sbox{width:100%;max-width:440px;margin:4px auto 0}.whero .sbox input{margin:0}
.gpick.glist{grid-template-columns:minmax(0,1fr)}@media(min-width:640px){.gpick.glist{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1000px){.gpick.glist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.glist button.gpk{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}.glist button.gpk .gico{margin:0}
.gtx{display:flex;flex-direction:column;gap:2px;min-width:0}.glist .gtx .mut{font-size:.82rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.glist>.empty{grid-column:1/-1}
.dseg{gap:8px;align-items:center;margin-bottom:6px}.dseg .seg{margin:0}.dseg .seg button{padding-inline:8px;white-space:nowrap}
/* home: the most used sections */
.favs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:6px}@media(min-width:640px){.favs{grid-template-columns:repeat(4,minmax(0,1fr))}}
button.fav{justify-content:flex-start;gap:10px;min-height:58px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:none;animation:rowin .3s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
button.fav .chip{width:38px;height:38px;border-radius:12px}button.fav b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* loading: the logo's three layers land one after another, the top one draws its outline, a beat, then they lift away.
   Over the page (blurred) while a section opens; alone while the site starts */
.jwait{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(9,9,10,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
html.light .jwait{background:rgba(238,238,241,.35)}
.jwait.on{opacity:1;pointer-events:auto}
.jload{width:64px;height:64px;overflow:visible;filter:drop-shadow(0 6px 14px rgba(var(--glow),.14))}
.jload path{fill:none;stroke:var(--text);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;animation:jl 2.4s cubic-bezier(.34,1.4,.64,1) infinite both}
.jload .l2{animation-delay:.14s}.jload .l1{animation-name:jtop;animation-delay:.28s;stroke-dasharray:36}
@keyframes jl{0%{opacity:0;transform:translateY(-5px)}22%,74%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(3px)}}
@keyframes jtop{0%{opacity:0;transform:translateY(-6px);stroke-dashoffset:36}30%,74%{opacity:1;transform:none;stroke-dashoffset:0}92%,100%{opacity:0;transform:translateY(-3px);stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.jload path,.jload .l1{animation:none!important;opacity:1;stroke-dasharray:none}}
/* without an account */
.glock{text-align:center;padding:34px 20px}.glock .chip{margin:0 auto 10px}.glock h3{margin:0 0 6px}.glock p{margin:0 0 14px}
.auth .glook{display:block;margin:14px auto 0}
button.glogin{flex:none;white-space:nowrap}

/* phone camera as webcam (cam.js) */
.camwrap{position:relative;margin:12px 0;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:16/9;display:grid;place-items:center}
.campage .camwrap{aspect-ratio:3/4;max-height:62vh}
.camv{width:100%;height:100%;object-fit:contain;background:#000}.camv.mir{transform:scaleX(-1)}
.campill{font-size:.78rem;padding:4px 10px;border-radius:999px;background:var(--acc-soft);color:var(--muted)}.campill.ok{color:var(--ok)}
.camb{gap:8px;flex-wrap:wrap}.camb>button{flex:1 1 auto}
.campair{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.camqr{width:200px;height:200px;border-radius:14px;background:#fff;padding:6px;image-rendering:pixelated}
.camcodebig{font:700 2.2rem/1.1 Vazir,system-ui,sans-serif;letter-spacing:.12em}
.camcode{flex:1;font-size:1.2rem;letter-spacing:.2em;text-align:center}
.camvc{align-items:center;gap:12px;margin:8px 0 12px;padding:10px 12px;border-radius:14px;background:var(--acc-soft);cursor:pointer;flex-wrap:nowrap}
/* the virtual webcam's on/off: a small switch, not the browser's checkbox */
.camvc input{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;min-height:0;margin:0;padding:0;border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.14));background:rgba(var(--glow),.08);position:relative;cursor:pointer;transition:background .2s var(--ease)}
.camvc input::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .25s var(--spring),background .2s}
.camvc input:checked{background:var(--ok);border-color:transparent}.camvc input:checked::after{background:#fff;transform:translateX(16px)}
[dir=rtl] .camvc input:checked::after{transform:translateX(-16px)}.camvc input:disabled{opacity:.5}
.camdiag{margin-top:6px;word-break:break-all;opacity:.8}
.camout{aspect-ratio:auto;max-height:70vh}.camcv{display:block;max-width:100%;max-height:70vh;width:auto;height:auto}
.campanel{display:grid;gap:10px;margin:10px 0}.campanel h4{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.campanel input[type=range]{width:100%}.camrow{justify-content:space-between;margin-bottom:-4px}.camrow2{gap:16px;align-items:flex-start}
.campos{direction:ltr;display:grid;grid-template-columns:repeat(3,26px);gap:4px}.campos button{width:26px;height:26px;padding:0;border-radius:7px;min-height:0}
.campos button.on{background:var(--acc);border-color:var(--acc);box-shadow:none}
/* PC games on profiles and friends (profile.js) */
.pplay{color:var(--ok);display:inline-flex;align-items:center;gap:4px}.pplay .ic svg{width:14px;height:14px}
.pclist{display:grid;gap:8px}.pcrow{display:flex;gap:10px;align-items:center}
.pcpic{width:92px;height:35px;border-radius:8px;object-fit:cover;flex:none;background:var(--acc-soft)}.pcpic.none{display:grid;place-items:center}
/* «بازی‌ها»: Jong's games / the launcher; the launcher's grid (launcher.js) */

.lbar{align-items:center;gap:8px;margin-top:10px}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.lcard{color:var(--text);font:inherit;display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:start;border-radius:18px;background:var(--card,rgba(255,255,255,.04));border:1px solid var(--line,rgba(255,255,255,.08));min-height:0}
.lcard.sk{height:170px}.lcard.run{border-color:var(--ok)}
.lcover{aspect-ratio:460/215;background:linear-gradient(135deg,var(--acc-soft),transparent);display:grid;place-items:center;overflow:hidden}
.lcover img{width:100%;height:100%;object-fit:cover}.lcover img.licon{width:56px;height:56px;object-fit:contain}.lcover>.ic svg{width:40px;height:40px;opacity:.5}
.lmeta{padding:10px 12px;display:grid;gap:4px}.lmeta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsrc{font-size:.72rem;padding:1px 7px;border-radius:999px;background:var(--acc-soft)}
.ldetail{display:grid;gap:8px}.lhero{width:100%;border-radius:14px}.ldetail h3{margin:6px 0 0}.ldir{word-break:break-all;opacity:.75}
.lacts{gap:8px;flex-wrap:wrap;margin-top:6px}
.ladd{display:grid;gap:8px}.ladd button{justify-content:flex-start}
.lpick{display:grid;gap:4px;max-height:50vh;overflow:auto;margin-top:8px}.lpi{gap:10px;align-items:flex-start;padding:8px;border-radius:10px;cursor:pointer}.lpi:hover{background:var(--acc-soft)}
.lpi input{margin-top:4px;flex:none}.lpi .mut{word-break:break-all}
.lfind{display:grid;gap:6px;max-height:46vh;overflow:auto;margin-top:8px}
.lfi{display:flex;align-items:center;gap:10px;text-align:start;padding:6px;border-radius:12px;color:var(--text);font:inherit;min-height:0}
.lfi img,.lfimg{width:120px;height:45px;border-radius:8px;object-fit:cover;flex:none;background:var(--acc-soft);display:grid;place-items:center}
.lhero{border-radius:14px}
/* a game's page in the launcher (launcher.js libDetail) */
.md.lgmodal{width:min(860px,calc(100vw - 32px));max-width:none}
.lgpage{display:grid;gap:16px}
.lghero{position:relative;border-radius:18px;overflow:hidden;background:#000}
.lgart{aspect-ratio:460/215;width:100%}.lgart img{width:100%;height:100%;object-fit:cover}
.lgtop{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:40px 20px 18px;background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.lgtop h2{margin:0;color:#fff;font-size:1.6rem;text-shadow:0 2px 12px rgba(0,0,0,.6)}
button.lgplay{min-width:150px;font-size:1.05rem;padding:12px 26px;background:var(--ok);color:#06210f;border-color:transparent}
.lgrun{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;background:rgba(74,222,128,.18);color:var(--ok);font-weight:700}
.lgfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.lgfact{display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--acc-soft)}
.lgdesc{margin:0;line-height:1.9}.lgabout{display:grid;gap:10px}
.lgsec h4{margin:0 0 8px;font-size:.95rem}
.lgfr{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.lgfi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;text-align:start;color:var(--text);font:inherit;min-height:0;justify-content:flex-start;width:100%;background:var(--surface-2);border:1px solid var(--border);box-shadow:none}  /* a row, not the accent button: every theme's own surface */
@media(hover:hover){.lgfi:hover{transform:none;filter:none;box-shadow:none;border-color:var(--border-hi);background:var(--acc-soft)}}
.lgfi .grow{display:grid;gap:2px}
@media(max-width:640px){.lgtop{flex-direction:column;align-items:flex-start}.lgtop h2{font-size:1.25rem}}

/* ---- motions (motion.js and the sections): once, when it happens; none under «reduce motion» ---- */
/* the dock: one pill slides to the chosen section */
.dock.haspill button.on{background:transparent;border-color:transparent}
.dockpill{position:absolute;top:0;left:0;border-radius:1.15rem;background:var(--acc-soft);border:1px solid var(--border);pointer-events:none;opacity:0;
  transition:transform .42s var(--spring),width .42s var(--spring),height .42s var(--spring),opacity .2s}
.dock button{position:relative;z-index:1}
/* numbers: the market's card flashes the way its price went */
.price.tick-up{animation:tickup 1.2s ease-out}.price.tick-down{animation:tickdn 1.2s ease-out}
@keyframes tickup{0%{box-shadow:0 0 0 2px rgba(74,222,128,.55)}100%{box-shadow:0 0 0 2px rgba(74,222,128,0)}}
@keyframes tickdn{0%{box-shadow:0 0 0 2px rgba(251,113,133,.55)}100%{box-shadow:0 0 0 2px rgba(251,113,133,0)}}
/* bars fill from nothing */
.bar>i,.wld i{animation:barin .9s var(--ease) both;transform-origin:left}[dir=rtl] .bar>i,[dir=rtl] .wld i{transform-origin:right}
@keyframes barin{from{transform:scaleX(0)}}
/* an upload's bar shines while it runs */
.up-row .bar>i{background-image:linear-gradient(90deg,var(--acc2),var(--acc)),linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:100% 100%,200% 100%;background-blend-mode:overlay;animation:barin .9s var(--ease) both,upshine 1.4s linear infinite}
@keyframes upshine{from{background-position:0 0,200% 0}to{background-position:0 0,-200% 0}}
/* files: dropping onto the box, a new one, a deleted one */
#drop.hot{animation:drophot 1s ease-in-out infinite alternate}@keyframes drophot{to{box-shadow:0 0 0 6px var(--acc-soft)}}
.file.fresh{animation:rowin .3s var(--ease) both,fresh 1.6s ease-out .3s}@keyframes fresh{0%{box-shadow:0 0 0 2px var(--ok)}100%{box-shadow:0 0 0 2px transparent}}
.file.gone{animation:gone .28s var(--ease) forwards;pointer-events:none}@keyframes gone{to{opacity:0;transform:scale(.96);max-height:0;padding-block:0;margin:0}}
/* cards that tilt toward the mouse */
.gcard,.lcard{transition:transform .25s var(--ease)}.gcard.tilt,.lcard.tilt{transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px)}
.gcard img,.lcover img{transition:transform .4s var(--ease)}.gcard.tilt img,.lcard.tilt .lcover img{transform:scale(1.04)}
/* the launcher: a running game glows; «اجرا» becomes a ring while the game starts */
.lcard.run{animation:runglow 1.6s ease-out;box-shadow:0 0 22px rgba(74,222,128,.18)}@keyframes runglow{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}100%{box-shadow:0 0 22px rgba(74,222,128,.18)}}
button.lgplay.launching{color:transparent;position:relative}button.lgplay.launching .ic{opacity:0}
button.lgplay.launching::after{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;border:3px solid rgba(6,33,15,.25);border-top-color:#06210f;animation:pspin .7s linear infinite}
::view-transition-old(lgart),::view-transition-new(lgart){animation-duration:.35s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
/* a game won: confetti over the page */
canvas.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:300}
/* watch together: the same reaction from several people flies big */
.fly.big b{font-size:3.6rem}.fly.big b img.emo{width:3.9rem;height:3.9rem}
/* tools: the date turns round; a QR's squares are drawn in (motion.js qrReveal); the phone's first picture sharpens */
.dswap .ic{transition:transform .45s var(--spring)}.dswap:active .ic{transform:rotate(180deg)}
.swapin{animation:swapin .4s var(--ease)}@keyframes swapin{from{opacity:0;transform:rotateX(70deg)}}
canvas.qrfx{display:block;margin:0 auto;border-radius:12px;image-rendering:pixelated}
.camcv.fresh{animation:camsharp .9s var(--ease)}@keyframes camsharp{from{filter:blur(14px) saturate(.6);opacity:.4}}
/* notes and friends: the bell rings, online pulses a few times, typing dots wave, a new badge turns and shines */
button.bell.ring .ic{animation:ring .7s ease-in-out;transform-origin:50% 10%}@keyframes ring{0%,100%{transform:none}15%{transform:rotate(18deg)}35%{transform:rotate(-15deg)}55%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}}
.pav.on::after{animation:onpulse 2.2s ease-out 3}@keyframes onpulse{0%{box-shadow:0 0 0 3px var(--surface-2),0 0 0 3px rgba(74,222,128,.6)}100%{box-shadow:0 0 0 3px var(--surface-2),0 0 0 9px rgba(74,222,128,0)}}
.tdots{display:inline-flex;gap:2px;margin-inline-start:2px}.tdots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:tdot 1.1s ease-in-out infinite}
.tdots i:nth-child(2){animation-delay:.15s}.tdots i:nth-child(3){animation-delay:.3s}@keyframes tdot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.ncard.nb .bdisc{animation:bspin .9s var(--spring) .1s both}@keyframes bspin{0%{transform:rotateY(180deg) scale(.4);filter:brightness(2)}70%{filter:brightness(1.6) drop-shadow(0 0 10px gold)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.dockpill{transition:none}.gcard.tilt,.lcard.tilt{transform:none}.tdots i{animation:none}}
.lcard:not(.sk){animation:rowin .35s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}.lcard.run{animation:rowin .35s var(--ease) both,runglow 1.6s ease-out .35s}
/* dialogs: grow out of the button that opened them (app.js modal sets the origin), shrink back into it on close */
.mo.out{animation:fade .2s ease reverse both;pointer-events:none}.mo.out .md{animation:mdout .2s ease-in both}
@keyframes mdout{to{opacity:0;transform:scale(.78)}}
/* the friends' side panel: all the way in from the screen's edge, with a little spring; back out the same way */
.drawer{animation:din .45s var(--spring) both}html[dir=ltr] .drawer{animation-name:dinl}
@keyframes din{from{transform:translateX(calc(-100% - 20px))}to{transform:none}}@keyframes dinl{from{transform:translateX(calc(100% + 20px))}to{transform:none}}
.drawer-wrap.out .drawer{animation:dout .25s ease-in both}html[dir=ltr] .drawer-wrap.out .drawer{animation-name:doutl}
@keyframes dout{to{transform:translateX(calc(-100% - 20px))}}@keyframes doutl{to{transform:translateX(calc(100% + 20px))}}
.drawer .frow,.drawer .gitem,.drawer .nrow{animation:rowin .35s var(--ease) both;animation-delay:calc(var(--i,0)*35ms + .12s)}
/* the theme switch: the new page is revealed by the growing circle, the old one stays still under it */
html.themevt::view-transition-old(root),html.themevt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.themevt::view-transition-new(root){z-index:2}
/* جاسوس (party.js GAMES.spy) */
.gico.g-spy{background:linear-gradient(140deg,#a78bfa,#6d28d9 55%,#3b0764);--gc:rgba(109,40,217,.55)}
.swrap{display:grid;gap:14px}.stop{align-items:center;gap:10px}
.scard{display:grid;justify-items:center;gap:8px;text-align:center;padding:22px 18px;border-radius:22px;background:var(--surface-2);border:1px solid var(--border);animation:mo .4s var(--spring) both}
.scard input{width:min(100%,320px);text-align:center;font-size:1.1rem}.scard .row{justify-content:center;gap:8px}
.sbig{font-size:2.6rem;line-height:1}.sword{font-size:2rem;font-weight:800;letter-spacing:.02em}
.srole{animation:sflip .7s var(--spring) both}.srole.spy{background:radial-gradient(120% 120% at 50% 0,rgba(124,58,237,.35),var(--surface-2) 70%);border-color:rgba(124,58,237,.55)}
@keyframes sflip{0%{opacity:0;transform:perspective(800px) rotateY(90deg)}100%{opacity:1;transform:none}}
.sact{display:grid;gap:10px;justify-items:center;margin-top:12px}.sact .row{gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.svote{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.svb{min-height:0;padding:10px 16px}.svb.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc)}
.sguess{justify-content:center;gap:8px;margin-top:10px}.sguess input{max-width:240px}
.spts{flex-wrap:wrap;gap:6px;justify-content:center}.sshow{gap:10px}
/* اسم رمز (party.js GAMES.cn) */
.gico.g-cn{background:linear-gradient(140deg,#fb7185,#e11d48 45%,#1d4ed8);--gc:rgba(225,29,72,.5)}
.cnwrap{display:grid;gap:12px;--cr:#ef4444;--cb:#3b82f6;--cn:#d6c7a1;--cx:#111;--cg:#22c55e}
.cntop{align-items:center;gap:8px}.cnr.on{background:var(--cr);color:#fff}.cnb.on{background:var(--cb);color:#fff}.cnroles{gap:14px;justify-content:center}
.cnteams{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cnteam{display:grid;gap:8px;align-content:start;padding:14px;border-radius:18px;background:var(--surface-2);border:2px solid transparent}
.cnteam.t0{border-color:color-mix(in srgb,var(--cr) 60%,transparent)}.cnteam.t1{border-color:color-mix(in srgb,var(--cb) 60%,transparent)}.cnmem{gap:8px;align-items:center;justify-content:space-between}
.cnclue{display:flex;gap:10px;align-items:baseline;justify-content:center;padding:10px;border-radius:16px;background:var(--surface-2);animation:mo .35s var(--spring) both}.cnclue b{font-size:1.5rem}.cnn{color:var(--acc)}
.cngrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cnc{position:relative;min-height:62px;padding:6px 4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-weight:700;font-size:clamp(.72rem,2.6vw,.95rem);flex-direction:column;gap:2px;
  animation:rowin .3s var(--ease) both;animation-delay:calc(var(--i,0)*12ms)}
.cnc:disabled{opacity:1;cursor:default}.cnc.hint{box-shadow:inset 0 0 0 3px var(--hk)}.cnc.end{opacity:.7;box-shadow:inset 0 0 0 3px var(--hk)}
.cnc.k-r{--hk:var(--cr)}.cnc.k-b{--hk:var(--cb)}.cnc.k-n{--hk:var(--cn)}.cnc.k-x{--hk:#000}.cnc.k-g{--hk:var(--cg)}
.cnc.rv{animation:cnflip .5s var(--spring) both;color:#fff;border-color:transparent}.cnc.rv.k-r{background:var(--cr)}.cnc.rv.k-b{background:var(--cb)}.cnc.rv.k-n{background:var(--cn);color:#222}.cnc.rv.k-x{background:var(--cx)}.cnc.rv.k-g{background:var(--cg)}
@keyframes cnflip{0%{transform:perspective(500px) rotateX(90deg)}100%{transform:none}}
.cnc.pk{outline:3px dashed var(--acc);outline-offset:-3px}.cnpk{font-size:.6rem;font-weight:500;opacity:.8}
.cnform,.cnact{justify-content:center;gap:8px;align-items:center}.cnform input{max-width:200px}.cnform select{width:auto}
.cnend{text-align:center;padding:12px;border-radius:16px;background:var(--acc-soft);font-size:1.1rem;animation:mo .4s var(--spring) both}
.cnlog{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.cnlog .cnr{background:color-mix(in srgb,var(--cr) 30%,transparent)}.cnlog .cnb{background:color-mix(in srgb,var(--cb) 30%,transparent)}
/* بیلیارد (pool.js): the table standing up, the power bar beside it */
.gico.g-pool{background:linear-gradient(140deg,#4ade80,#16a34a 55%,#14532d);--gc:rgba(22,163,74,.55)}
.gwrap>.blwrap{width:100%;max-width:none}
.blwrap{display:grid;gap:10px;justify-items:center}
.blrow{display:flex;gap:12px;align-items:stretch;justify-content:center;width:100%}
.blstage{border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45);line-height:0}
.blcv{display:block;width:min(calc(100vw - 110px),calc(82vh * .55),550px);height:auto;aspect-ratio:704/1280;touch-action:none;cursor:crosshair}  /* sized by its width: the height follows (never stretched) */
.blpow{display:flex;flex-direction:column;align-items:center;gap:8px;width:46px;touch-action:none;cursor:ns-resize;user-select:none}
.blpow>span{position:relative;flex:1;width:28px;border-radius:14px;background:rgba(255,255,255,.07);overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.blpow>span>i{position:absolute;inset:0 0 auto 0;height:0;border-radius:0 0 12px 12px;transition:background .1s}.blpow>span>b{position:absolute;left:-4px;right:-4px;top:0;height:6px;border-radius:3px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.blpow.on>span{box-shadow:inset 0 0 0 2px #fff}.blpow.off{opacity:.4;cursor:default}
.blctl{gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}.blgr{gap:6px;align-items:center;flex-wrap:wrap}
.blpip{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--c);color:#fff;font:700 .62rem/1 system-ui;font-style:normal;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}.blpip.gone{opacity:.25}.blpip.st{background:linear-gradient(#f8fafc 0 24%,var(--c) 24% 76%,#f8fafc 76%);color:#111;text-shadow:0 0 2px #fff}
.blbar{gap:10px;align-items:center;width:100%;max-width:640px}.blchk{gap:8px;align-items:center;cursor:pointer}.blchk input{width:20px;height:20px;accent-color:var(--ok)}
.blbar .drtime.low{color:var(--bad)}
/* a game full screen (g.fs): a side panel (the game, its players, status, reactions, actions at the bottom), the board in
   the middle, the chat on the other side; a phone: the panel's top above the board, the chat a sheet from the bottom */
.gfsbar{gap:6px}.gfsb .ic{width:18px;height:18px}
html.gfson,html.gfson body{overflow:hidden}html.gfson .dock{display:none}html.gfson .view{transform:none!important;animation:none!important}  /* the tab's entry animation leaves a transform: the full screen would be caught inside the page instead of the window */
.glay.gfs{position:fixed;inset:0;top:var(--gtop,0px);z-index:60;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));background:var(--bg);max-width:none;margin:0;overflow:hidden}
.glay.gfs.chat{grid-template-columns:minmax(0,1fr) 320px}
.glay.gfs>.groom{position:relative;margin:0;height:100%;min-height:0;overflow:hidden;display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;padding:14px}
.gside{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;padding:2px;scrollbar-width:thin}
.gside>.wtop{margin:0;flex-wrap:nowrap}.gside .wtitle{font-size:1.05rem;margin:0}
.gside .gseats{display:flex;flex-direction:column;gap:8px;margin:0}
.gside .gpc{padding:8px 10px;gap:10px;border-radius:14px}.gside .gpc-av{width:42px;height:42px}.gside .gpc-av .av{--s:38px}
.gside .gstatus{margin:0;font-size:.88rem}
.gside .rbar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0}.gside .rbar button{max-width:none;min-height:38px}
.gside .gfoot{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
.gside .gfoot>button{width:100%;justify-content:center;margin:0}.gside .gfoot>button:first-child{grid-column:1/-1}
.glay.gfs .gstage{height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.glay.gfs>.wchat{margin:0;height:100%;display:flex;flex-direction:column;min-height:0}.glay.gfs>.wchat .wlog{flex:1;max-height:none;height:auto;min-height:0}
.glay.gfs:not(.chat)>.wchat{display:none}
@media(max-width:899px){
  .glay.gfs{padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))}
  .glay.gfs.chat{grid-template-columns:minmax(0,1fr)}
  .glay.gfs.chat>.wchat{position:fixed;inset:auto 8px calc(8px + env(safe-area-inset-bottom)) 8px;height:52dvh;z-index:2;box-shadow:0 -10px 60px rgba(0,0,0,.55)}  /* the button that closes it stays in sight */
  .glay.gfs>.groom{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px;overflow-y:auto;align-content:start}
  .gside{display:contents}.gside>*{order:5}.gside>.wtop{order:1}.gside>.gseats{order:2}.gside>.gstatus{order:3}.glay.gfs .gstage{order:4;height:auto;min-height:auto}  /* the board right under the players; reactions and actions a scroll below it */
  .gside .gseats{display:grid;grid-template-columns:1fr 1fr}.gside .gfoot{margin:0}
  .gside .gpc-av{width:34px;height:34px}.gside .gpc-av .av{--s:30px}
}

/* ---------- the site's front page for visitors (landing.js): told as you scroll ---------- */
html.ldon body{padding:0;font-family:Estedad,Vazir,system-ui,Tahoma,sans-serif}html.ldon #app{max-width:none;padding:0}
.ld{position:relative;overflow-x:clip;--y:0;--w:min(1240px,calc(100% - 32px))}
.ld>:not(.ldstars){position:relative;z-index:1}
.ldstars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}html.light .ldstars{display:none}
.ld .ic{width:18px;height:18px}
.ldlinks button,.ldbrand,.ldfoot button,.ldcue{background:none;border:0;box-shadow:none;color:inherit;min-height:0}
@media(hover:hover){.ldlinks button:hover,.ldbrand:hover,.ldfoot button:hover,.ldcue:hover{transform:none;box-shadow:none;filter:none}}
.ldup{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.ldup.in{opacity:1;transform:none;filter:none}
/* the bar */
.ldnav{position:sticky;top:12px;z-index:30!important;width:var(--w);margin:12px auto 0;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 18px;border-radius:999px;border:1px solid transparent;
  transition:background .35s,border-color .35s,box-shadow .35s,backdrop-filter .35s}
.ldnav.solid{background:var(--surface-2);border-color:var(--border);box-shadow:var(--shadow-soft);backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4)}
.ldbrand{gap:10px;padding:0;font-size:1.15rem}.ldbrand .logo{width:34px;height:34px}.ldbrand b{font-weight:800}
.ldlinks{flex:1;display:flex;justify-content:center;gap:4px}.ldlinks button{color:var(--muted);padding:8px 14px;border-radius:999px;font-weight:600;transition:color .2s,background .2s}
.ldlinks button:hover{color:var(--text);background:var(--acc-soft)}
.ldnavr{display:flex;gap:8px}.ldnavr button{min-height:40px;padding:8px 18px}
/* the hero */
.ldhero{width:var(--w);margin:0 auto;min-height:calc(100svh - 76px);display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:48px;padding:40px 0 110px}
.ldhtext{position:relative;z-index:2}
.ldbadge,.ldkick{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.85rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ldhero h1{font-size:clamp(2.5rem,5.6vw,4.9rem);line-height:1.12;font-weight:900;letter-spacing:-.02em;margin:.45em 0 .35em}
.ldgrad{background:linear-gradient(100deg,var(--text) 10%,var(--acc2) 55%,var(--text) 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ldsheen 2.6s var(--ease) .9s both}
@keyframes ldsheen{from{background-position:100% 0}to{background-position:0 0}}
.ldlead{font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.95;color:var(--muted);max-width:33em;margin:0}
.ldcta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 26px}
button.ldbig{min-height:56px;padding:12px 28px;font-size:1.05rem;border-radius:1.15rem}
.ldchips{display:flex;flex-wrap:wrap;gap:8px}.ldchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--acc-soft);border:1px solid var(--border);color:var(--muted);font-size:.82rem}
.ldchip .ic{width:15px;height:15px}
.ldorb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.ldorb.o1{width:560px;height:560px;top:-160px;inset-inline-start:30%;background:radial-gradient(circle,rgba(200,200,215,.2),transparent 70%);transform:translateY(calc(var(--y) * 160px))}
.ldorb.o2{width:460px;height:460px;bottom:-60px;inset-inline-end:-120px;background:radial-gradient(circle,rgba(150,150,170,.18),transparent 70%);transform:translateY(calc(var(--y) * -90px))}
html.light .ldorb.o1{background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%)}html.light .ldorb.o2{background:radial-gradient(circle,rgba(160,160,175,.25),transparent 70%)}
.ldplanet{position:absolute;z-index:0;width:1500px;aspect-ratio:1;border-radius:50%;inset-inline-end:-38%;top:72%;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.1),transparent 45%),radial-gradient(circle at 50% 50%,#141417 60%,#0b0b0d);
  box-shadow:0 -1px 0 rgba(255,255,255,.28),0 -40px 140px rgba(200,200,225,.13);transform:translateY(calc(var(--y) * 260px)) rotate(calc(var(--y) * 8deg));opacity:calc(1 - var(--y) * 1.3)}
html.light .ldplanet{background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.95),transparent 45%),#e4e4e9;box-shadow:0 -1px 0 rgba(24,24,27,.08),0 -40px 140px rgba(255,255,255,.9)}
/* the app's screen, tilted in space; straight by a screen down */
.ldstage{position:relative;z-index:1;perspective:1700px}
.ldmock{--q:min(1,calc(var(--y) * 1.5));position:relative;border-radius:28px;padding:16px;border:1px solid var(--border-hi);background:linear-gradient(160deg,var(--surface-2),var(--surface));
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));box-shadow:0 50px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset,0 1px 0 rgba(255,255,255,.12) inset;
  transform:rotateY(calc(var(--mx,0) * 9deg)) rotateX(calc(var(--my,0) * -7deg)) rotateX(calc(14deg * (1 - var(--q)))) rotateY(calc(-17deg * (1 - var(--q)))) rotateZ(calc(2.5deg * (1 - var(--q)))) translateY(calc(var(--q) * -24px)) scale(calc(.97 + var(--q) * .05));
  transform-origin:50% 60%;animation:ldrise 1.2s var(--ease) .25s both;font-size:.82rem}
@keyframes ldrise{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
.ldmbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}.ldmbar .logo{width:26px;height:26px;border-radius:9px}.ldmbar .ic,.ldmb .ic{width:14px;height:14px}
.ldmb{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted)}
.ldti{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--acc-soft);border:1px solid var(--border);margin-bottom:4px}.ldti .ic{width:15px;height:15px}
.ldcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;color:var(--muted);font-size:.75rem;opacity:calc(1 - var(--y) * 4)}
.ldcue i{width:22px;height:36px;border-radius:12px;border:1.5px solid var(--border-hi);position:relative}
.ldcue i::after{content:"";position:absolute;top:7px;left:50%;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--text);animation:ldwheel 1.6s var(--ease) 1.4s 3 both}
@keyframes ldwheel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
/* the sections */
.ldsec{width:var(--w);margin:0 auto;padding:clamp(70px,10vw,140px) 0}
.ldhead{text-align:center;max-width:780px;margin:0 auto 50px}.ldhead h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.3;font-weight:850;margin:18px 0 10px;text-wrap:balance}.ldhead p{font-size:1.05rem;line-height:1.9}
.ldfeat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* the app's screen and the cards are buttons: their own look, not the site's */
.ld button.ldmb,.ld button.ldcard,.ld button.ldmlib,.ld button.ldmlobby,.ld button.ldmvoice{font:inherit;color:inherit;min-height:0;box-shadow:none;text-align:start;will-change:auto}
.ld button.ldmb{padding:0;background:none;border:1px solid var(--border);border-radius:50%}
.ld button.ldcard{display:block;width:100%;padding:24px 22px 46px;border-radius:24px;background:var(--surface);border:1px solid var(--border);font-weight:400}
@media(hover:hover){.ld button.ldmb:hover,.ld button.ldmlib:hover,.ld button.ldmlobby:hover,.ld button.ldmvoice:hover{transform:none;filter:none;box-shadow:none;border-color:var(--border-hi);background:var(--surface-2)}}
.ldgo{position:absolute;bottom:18px;inset-inline-end:20px;color:var(--muted);opacity:.5;transition:opacity .3s,translate .3s var(--ease)}.ldgo .ic{width:18px;height:18px}
@media(hover:hover){.ldcard:hover .ldgo{opacity:1;translate:-4px 0}html[dir=ltr] .ldcard:hover .ldgo{translate:4px 0}}
.ldtrial{display:flex;align-items:center;gap:8px;margin:-12px 0 22px;color:var(--muted);font-size:.92rem}.ldtrial .ic{width:16px;height:16px;color:var(--acc2)}
.ldcard{position:relative;overflow:hidden;padding:28px 26px;border-radius:26px;background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease),border-color .3s,box-shadow .3s}
.ldcard::before{content:"";position:absolute;inset:-1px;background:radial-gradient(420px 180px at 85% 0%,rgba(255,255,255,.09),transparent 70%);pointer-events:none}
@media(hover:hover){.ldcard.in:hover{transform:translateY(-5px);border-color:var(--border-hi);box-shadow:var(--shadow-soft)}}
.ldci{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);box-shadow:0 10px 26px rgba(0,0,0,.35);margin-bottom:18px}
.ldci .ic{width:24px;height:24px}.ldcard h3{font-size:1.2rem;margin:0 0 8px}.ldcard p{color:var(--muted);line-height:1.95;margin:0;font-size:.95rem}
/* the pinned part */
.ldstory{height:300vh;position:relative}
.ldpin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.ldpinin{width:var(--w);display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.ldsteps{position:relative;min-height:280px}
.ldstep{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(26px);filter:blur(4px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease);pointer-events:none}
.ldstep.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.ldsn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-hi);background:var(--surface);font-weight:800;font-size:1.1rem}
.ldstep h3{font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.25;font-weight:850;margin:18px 0 12px}.ldstep p{color:var(--muted);font-size:1.08rem;line-height:2;margin:0;max-width:28em}
.lddevice{position:relative;aspect-ratio:4/3.1;border-radius:32px;padding:22px 22px 46px;border:1px solid var(--border-hi);background:linear-gradient(160deg,var(--surface-2),var(--surface));
  box-shadow:0 50px 110px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.1) inset;transform:rotate(calc((var(--sp,0) - .5) * -5deg)) translateY(calc((var(--sp,0) - .5) * -30px))}
.ldscenes{position:relative;height:100%}
.ldscene{position:absolute;inset:0;display:grid;align-content:center;gap:12px;opacity:0;transform:scale(.95) translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.ldscene.on{opacity:1;transform:none}
.lddots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:6px}.lddots i{width:8px;height:8px;border-radius:99px;background:var(--border-hi);transition:width .4s var(--ease),background .4s}
.lddots i.on{width:28px;background:var(--text)}
.ldscreen{position:relative;aspect-ratio:16/8.5;border-radius:18px;overflow:hidden;background:radial-gradient(80% 90% at 30% 20%,#4a4a55,#141418);display:grid;place-items:center}
.ldplay{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fff}.ldplay .ic{width:26px;height:26px}
.ldseek{position:absolute;bottom:12px;left:14px;right:14px;height:4px;border-radius:9px;background:rgba(255,255,255,.25)}.ldseek>i{display:block;height:100%;width:8%;border-radius:9px;background:#fff;transition:width 2.4s linear .3s}
.on .ldseek>i{width:64%}
.ldppl{display:flex;justify-content:center}.ldppl span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin-inline-start:-8px;border:2px solid var(--surface-2);font-weight:800;font-size:.85rem;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);opacity:0;transform:scale(.4);transition:opacity .4s,transform .5s var(--spring);transition-delay:calc(var(--k) * 110ms + .3s)}
.on>.ldppl span{opacity:1;transform:none}
.ldmsg{position:absolute;padding:8px 14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow-soft);font-size:.88rem;opacity:0;transition:opacity .5s,transform .6s var(--spring)}
.ldmsg.m1{top:10%;inset-inline-start:-6%;transform:translateX(20px);transition-delay:.9s}.ldmsg.m2{top:44%;inset-inline-end:-5%;transform:translateX(-20px);transition-delay:1.3s}
.on>.ldmsg{opacity:1;transform:none}
/* the games, sliding by */
.ldgames{width:100%;overflow:hidden}.ldrows{direction:ltr}.ldgames .ldhead{width:var(--w)}
.ldrow{position:relative;left:50%;display:flex;gap:14px;width:max-content;margin:14px 0;transform:translateX(calc(-50% + (var(--sp,.5) - .5) * 700px))}
.ldrow.r2{transform:translateX(calc(-50% - (var(--sp,.5) - .5) * 700px))}
.ldg{flex:none;width:168px;padding:20px 14px;border-radius:24px;border:1px solid var(--border);background:var(--surface);display:grid;justify-items:center;gap:12px;text-align:center}
.ldg b{font-size:.95rem}
/* numbers */
.ldstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:0}
.ldnum{text-align:center;padding:30px 16px;border-radius:26px;border:1px solid var(--border);background:var(--surface)}
.ldnum b{display:block;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;line-height:1.1;background:linear-gradient(180deg,var(--text),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ldnum span{color:var(--muted);font-size:.92rem}
/* apps */
.ldapps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.ldapp{display:flex;flex-direction:column}.ldapp p{flex:1;margin-bottom:20px}
.ldapp>button,.ldabtn{align-self:flex-start}
.ldabtn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 18px;border-radius:1rem;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:600;text-decoration:none;
  transition:transform .15s var(--spring),border-color .2s}.ldabtn:hover{transform:translateY(-2px);border-color:var(--border-hi)}
/* the games: what goes with them */
.ldsoc{width:var(--w);margin:34px auto 0;justify-content:center}.ldsoc .ldchip{font-size:.9rem;padding:9px 15px}.ldsoc .ic{width:16px;height:16px}
/* price, privacy, questions */
.ldfaq{max-width:780px;margin:56px auto 0;display:grid;gap:10px}
.ldfaq details{border-radius:18px;border:1px solid var(--border);background:var(--surface);transition:border-color .3s,background-color .3s}.ldfaq details.on{border-color:var(--border-hi);background:var(--surface-2)}
.ldfaq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;font-weight:700}
.ldfaq summary::-webkit-details-marker{display:none}.ldfaq summary .ic{width:18px;height:18px;color:var(--muted);transition:rotate .4s cubic-bezier(.22,1,.36,1),color .3s}.ldfaq details.on summary .ic{rotate:135deg;color:var(--text)}
.ldfaq details p{margin:0;padding:0 20px 18px;color:var(--muted);line-height:2;overflow:hidden}.ldfaq a{color:var(--acc2)}
.ldfoot a{padding:6px 10px;color:var(--muted);text-decoration:none}
/* the last call */
.ldend{position:relative;text-align:center;padding:clamp(90px,14vw,170px) 16px clamp(80px,12vw,140px)}
.ldend h2{font-size:clamp(2.6rem,8vw,6rem);font-weight:900;letter-spacing:-.02em;margin:0 0 10px}.ldend p{font-size:1.15rem;margin:0}.ldend .ldcta{justify-content:center}
.ldorb.o3{width:720px;height:380px;top:30%;left:50%;margin-left:-360px;background:radial-gradient(closest-side,rgba(210,210,225,.17),transparent);filter:blur(60px)}
.ldfoot{width:var(--w);margin:0 auto;display:flex;align-items:center;gap:12px;padding:22px 0 30px;border-top:1px solid var(--border);color:var(--muted)}
.ldfoot .logo{width:28px;height:28px;border-radius:9px}.ldfoot b{color:var(--text)}.ldfoot button{padding:6px 10px;color:var(--muted)}.ldfoot>button:last-child{color:var(--text)}
/* narrower screens */
@media(max-width:960px){
  .ldhero{grid-template-columns:1fr;gap:40px;padding-top:24px;min-height:0}.ldstage{max-width:640px;width:100%;margin:0 auto}
  .ldpinin{grid-template-columns:1fr;gap:26px}.ldsteps{min-height:210px}.lddevice{max-width:520px;width:100%;margin:0 auto}
  .ldfeat{grid-template-columns:repeat(2,1fr)}.ldstats{grid-template-columns:repeat(2,1fr)}.ldfoot{flex-wrap:wrap}.ldapps{grid-template-columns:1fr}.ldlinks{display:none}.ldnav{justify-content:space-between}}
@media(max-width:560px){
  .ldnavr .sec:not(.icon){display:none}.ldnavr{gap:6px}.ldnavr button.icon{width:40px}.ldfeat{gap:10px}.ld button.ldcard{padding:16px 14px 40px;border-radius:20px}.ldcard h3{font-size:1rem}.ldcard p{font-size:.8rem;line-height:1.7}.ldci{width:40px;height:40px;border-radius:13px;margin-bottom:12px}.ldgo{bottom:12px;inset-inline-end:14px}.ldhero h1{font-size:2.35rem}.ldmock{padding:11px;font-size:.72rem}.ldmhero{grid-template-columns:1fr}
  .lddevice{padding:14px 14px 38px;aspect-ratio:4/3.6}.ldmsg.m1{inset-inline-start:0}.ldmsg.m2{inset-inline-end:0}.ldg{width:132px;padding:16px 10px}.ldnum{padding:22px 10px}}
/* the launcher's screen in the hero */
.ldmtab{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:10px;color:var(--muted);font-weight:600;font-size:.74rem}.ldmtab .ic{width:13px;height:13px}
.ldmtab.on{background:var(--acc-soft);color:var(--text);border:1px solid var(--border)}
.ldml{display:grid;grid-template-columns:1.45fr 1fr;gap:10px}
.ld button.ldmlib,.ld button.ldmlobby,.ld button.ldmvoice{display:block;width:100%;padding:12px;border-radius:18px;background:var(--surface);border:1px solid var(--border);font-weight:400}
.ldmh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.ldmh b{display:inline-flex;align-items:center;gap:4px}.ldmh b .ic{width:14px;height:14px}.ldmh small{color:var(--muted);font-size:.7rem}
.ldmcovs,.ldcovs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ldcv{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 35%,var(--surface-2)),var(--surface));box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
.ldcv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ldcv b{position:absolute;inset:auto 0 0;padding:16px 7px 7px;font-size:.68rem;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ldmprog{position:absolute;z-index:1;inset:auto 7px 26px;display:grid;gap:3px}.ldmprog>i{display:block;height:4px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden}
.ldmprog>i::after{content:"";display:block;height:100%;width:64%;background:linear-gradient(90deg,var(--acc2),var(--acc));animation:ldfill 3s var(--ease) 1.2s both}.ldmprog small{color:#fff;font-size:.62rem;font-weight:700;text-shadow:0 1px 2px #000}
@keyframes ldfill{from{width:8%}}
.ldmside{display:grid;gap:10px;align-content:start}
.ldlive{padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);font-weight:700;font-size:.66rem}
.ldmppl{display:flex;gap:6px;margin-bottom:10px}
.ldav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:.78rem;color:var(--on-acc);background:linear-gradient(135deg,var(--acc),var(--acc2));border:2px solid var(--surface)}
.ldav.on{box-shadow:0 0 0 2px var(--ok);animation:ldtalk 1.5s ease-in-out infinite}.ldav.add{background:none;border:1px dashed var(--border-hi);color:var(--muted)}.ldav.add .ic{width:13px;height:13px}
@keyframes ldtalk{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 35%,transparent)}}
.ldmgo{display:flex;align-items:center;justify-content:center;gap:5px;padding:7px;border-radius:11px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);font-weight:700;font-size:.74rem}.ldmgo .ic{width:13px;height:13px}
.ld button.ldmvoice{display:flex;align-items:center;gap:9px}.ldmvoice .ldti{margin:0;flex:none}.ldmvoice b{display:block;font-size:.8rem}.ldmvoice small{color:var(--muted);font-size:.66rem}
.ldwave{display:flex;align-items:center;gap:2px;height:20px}.ldwave i{width:3px;border-radius:3px;background:var(--ok);animation:ldwv 1s ease-in-out infinite}
.ldwave i:nth-child(1){height:30%}.ldwave i:nth-child(2){height:70%;animation-delay:.15s}.ldwave i:nth-child(3){height:100%;animation-delay:.3s}.ldwave i:nth-child(4){height:55%;animation-delay:.45s}.ldwave i:nth-child(5){height:35%;animation-delay:.6s}
@keyframes ldwv{50%{transform:scaleY(.4)}}
.ldhtext .ldkick{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px}.ldhtext .ldkick .ic{width:14px;height:14px}
a.ldbig{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 26px;text-decoration:none;font-weight:700}a.ldbig .ic{width:18px;height:18px}
a.ldprim{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);border-radius:1rem;box-shadow:0 14px 34px -12px var(--acc);transition:transform .2s var(--spring),box-shadow .2s}
@media(hover:hover){a.ldprim:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px var(--acc)}}
/* the features: online play first, wide, with the library's covers */
.ld .ldcard.ldwide{grid-column:span var(--span,2);display:grid;grid-template-columns:1fr auto;column-gap:22px;align-items:start;border-color:color-mix(in srgb,var(--acc) 45%,var(--border));
  background:radial-gradient(80% 120% at 0% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%),var(--surface)}
.ldwide>*:not(.ldwcovs):not(.ldmini){grid-column:1}.ldwide h3{font-size:1.5rem}.ld .ldcard.w3{--span:3}
.ldmini{grid-column:2;grid-row:1/span 4;align-self:center;display:grid;grid-template-columns:repeat(4,40px);gap:10px}
.lddaily .ldcard{background:var(--surface)}
.ldwcovs{grid-column:2;grid-row:1/span 4;display:flex;gap:8px;width:250px;align-self:center}.ldwcovs .ldcv{flex:1}.ldwcovs .ldcv:nth-child(2){transform:translateY(-12px)}
/* the scenes */
.ldcovs{width:min(86%,380px);margin:0 auto}.ldcovs .ldcv{opacity:0;transform:translateY(18px) scale(.94);transition:opacity .5s var(--ease),transform .6s var(--spring)}.ldcovs .ldcv:nth-child(2){transition-delay:.12s}.ldcovs .ldcv:nth-child(3){transition-delay:.24s}
.on>.ldcovs .ldcv{opacity:1;transform:none}.on>.ldcovs .ldcv:nth-child(2){transform:translateY(-14px)}
.ldtoast{justify-self:center;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:99px;background:color-mix(in srgb,var(--ok) 14%,transparent);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok);font-weight:700;font-size:.9rem;
  opacity:0;transform:translateY(8px);transition:opacity .5s 1.2s,transform .5s 1.2s var(--spring)}.ldtoast .ic{width:16px;height:16px}.on>.ldtoast,.on .ldtoast{opacity:1;transform:none}
.ldtoast.ldtr{position:absolute;bottom:12px;inset-inline-end:12px;color:var(--text);background:var(--surface-2);border-color:var(--border-hi);white-space:nowrap;font-size:.8rem}
.ldlob{width:min(92%,400px);margin:0 auto;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--border);display:grid;gap:8px}
.ldcode{padding:3px 10px;border-radius:99px;background:var(--acc-soft);border:1px dashed var(--border-hi);font-weight:700;font-size:.8rem;letter-spacing:.06em}
.ldpl{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--surface-2);opacity:0;transform:translateX(-16px);transition:opacity .45s,transform .5s var(--spring);transition-delay:calc(var(--k) * 350ms + .2s)}
.ldpl b{flex:1;font-size:.9rem}.on .ldpl{opacity:1;transform:none}.ldlob .ldmgo{padding:10px;font-size:.88rem;opacity:0;transition:opacity .4s 1.4s}.on .ldlob .ldmgo{opacity:1}
.ldvg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:min(88%,360px);margin:0 auto}
.ldvt{aspect-ratio:16/10;border-radius:16px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;opacity:0;transform:scale(.9);transition:opacity .4s,transform .5s var(--spring);transition-delay:calc(var(--k) * 120ms)}
.on .ldvt{opacity:1;transform:none}.ldvt .ldav{width:52px;height:52px;font-size:1.1rem}
.ldvctl{display:flex;justify-content:center;gap:10px}.ldvctl i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border)}.ldvctl i.bad{background:#e5484d;color:#fff;border:0}.ldvctl .ic{width:18px;height:18px}
.ldgscr{position:relative;aspect-ratio:16/9.5;border-radius:18px;overflow:hidden;background:radial-gradient(70% 80% at 70% 30%,#3d4a7a,#12141f 70%),#12141f}
.s-ov .ldtoast.ldtr{transition-delay:1.3s}
/* the scenes as the real screens */
.ldcv.wide{aspect-ratio:460/215;border-radius:10px}
.s-lib{align-content:center}.ldltabs{display:flex;gap:6px;justify-content:center}.ldltabs span{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:12px;font-size:.78rem;font-weight:600;color:var(--muted);border:1px solid transparent}
.ldltabs span.on{color:var(--text);background:var(--surface);border-color:var(--border)}.ldltabs .ic{width:14px;height:14px}
.ldlgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:min(78%,380px);margin:0 auto}.s-lib{gap:10px}.s-lib .ldtoast{font-size:.74rem;padding:6px 12px}
.ldlc{position:relative;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border);opacity:0;transform:translateY(14px);transition:opacity .45s,transform .5s var(--spring);transition-delay:calc(var(--k) * 110ms)}
.on .ldlc{opacity:1;transform:none}.ldlc .ldcv{border:0;border-radius:0;box-shadow:none}
.ldlm{display:grid;gap:2px;padding:7px 10px 9px;font-size:.78rem}.ldlm small{font-size:.66rem}
.ldlp{display:block;height:3px;border-radius:9px;background:var(--border);overflow:hidden}.ldlp>i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width 2.2s var(--ease) .5s}.on .ldlp>i{width:64%}
.ldbadge{position:absolute;top:7px;inset-inline-start:7px;z-index:1;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:99px;font-size:.62rem;font-weight:700;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.ldbadge.ok{background:color-mix(in srgb,var(--ok) 75%,#000)}.ldbadge.up{background:color-mix(in srgb,var(--acc) 70%,#000)}.ldbadge .ic{width:11px;height:11px}
.ldlob{width:min(96%,470px);gap:12px}.ldlobh{display:flex;align-items:center;gap:10px}.ldlobh>.ldcv{width:96px;flex:none}.ldlobh b{display:block;font-size:.88rem;margin-bottom:3px}
.ldlobh .ldmgo,.ldsbtn{flex:none;padding:6px 9px;font-size:.68rem;border-radius:10px}.ldsbtn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--surface-2);font-weight:600}.ldsbtn .ic{width:12px;height:12px}
.ldlobb{display:grid;grid-template-columns:1.1fr 1fr;gap:10px}.ldlobb>div{display:grid;gap:6px;align-content:start}.ldlobb small{font-size:.66rem}
.ldlobb .ldpl{padding:6px 8px;gap:7px}.ldlobb .ldpl b{font-size:.74rem}.ldlobb .ldav{width:26px;height:26px;font-size:.7rem}.ldokt{color:var(--ok);font-size:.64rem}
.ldlchat{padding:8px;border-radius:12px;background:var(--surface-2)}.ldbub{margin:0;padding:6px 9px;border-radius:10px;background:var(--surface);font-size:.7rem;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--k) * 500ms + 1.2s)}
.on .ldbub{opacity:1;transform:none}.ldin{display:block;padding:6px 9px;border-radius:10px;border:1px solid var(--border);color:var(--muted);font-size:.66rem}
.ldvg{grid-template-columns:repeat(2,1fr)}.ldvt{position:relative;align-content:center;gap:4px;justify-items:center}.ldvt small{font-size:.7rem;color:var(--muted)}
.ldvt.scr{padding:0;overflow:hidden}.ldvt.scr .ldcv{position:absolute;inset:0;border:0;border-radius:0;aspect-ratio:auto}.ldvt.scr small{position:absolute;bottom:6px;inset-inline-start:8px;z-index:1;color:#fff;background:rgba(0,0,0,.55);padding:2px 7px;border-radius:7px;display:inline-flex;align-items:center;gap:3px}.ldvt.scr .ic{width:11px;height:11px}
/* the overlay: as desktop-gameov.js draws it */
.ldgscr{font-size:.62rem;color:#fff}.ldcv.ldgbg{position:absolute;inset:0;border:0;border-radius:0;aspect-ratio:auto}.ldgbg img{filter:blur(6px) brightness(.5);transform:scale(1.08)}.s-ov{align-content:stretch}.s-ov .ldgscr{aspect-ratio:auto;height:100%}
.ldgbar{position:absolute;z-index:1;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:4px 6px;border-radius:14px;background:rgba(20,20,26,.78);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);white-space:nowrap}
.ldgbr{display:flex;align-items:center;gap:4px;padding:0 6px 0 2px}.ldgbr .logo{width:16px;height:16px;border-radius:5px}.ldgbr .logo .ic{width:10px;height:10px}
.ldgb{position:relative;display:grid;justify-items:center;gap:1px;padding:3px 6px;border-radius:8px;color:rgba(255,255,255,.6)}.ldgb .ic{width:12px;height:12px}.ldgb small{font-size:.5rem}
.ldgb.on{background:rgba(255,255,255,.1);color:#fff}.ldgb.on::after{content:"";position:absolute;bottom:1px;left:50%;width:10px;height:2px;margin-left:-5px;border-radius:2px;background:var(--acc)}
.ldgclk{padding:0 6px;font-weight:800;font-size:.7rem}.ldgx{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1)}.ldgx .ic{width:9px;height:9px}
.ldgw{position:absolute;z-index:1;top:56px;display:grid;align-content:start;gap:6px;padding:0 0 8px;border-radius:12px;overflow:hidden;background:rgba(20,20,26,.86);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);box-shadow:0 20px 40px rgba(0,0,0,.5);
  opacity:0;transform:scale(.94);transition:opacity .35s,transform .45s var(--spring)}.on .ldgw{opacity:1;transform:none}.ldgw.fr{left:10px;width:40%;transition-delay:.15s}.ldgw.gm{right:10px;width:50%;transition-delay:.3s}
.ldgw>*:not(.ldgwh){margin:0 8px}.ldgwh{display:flex;align-items:center;gap:5px;padding:5px 8px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}.ldgwh .ic{width:10px;height:10px;color:var(--acc)}.ldgwh .ic:last-child{color:rgba(255,255,255,.5)}
.ldgf{display:flex;align-items:center;gap:6px}.ldgf .ldav{width:20px;height:20px;font-size:.55rem}.ldgf b{display:block;font-size:.62rem}.ldgf small{font-size:.52rem}
.ldginv{display:inline-flex;align-items:center;gap:2px;padding:3px 6px;border-radius:7px;background:var(--ok);color:#06210f;font-weight:800;font-size:.55rem}.ldginv .ic{width:9px;height:9px}
.ldgf:first-of-type .ldginv{animation:ldpress .5s 1.4s both}@keyframes ldpress{50%{transform:scale(.88)}}
.ldgnow{display:flex;align-items:center;gap:7px}.ldgnow .ldcv{width:72px;flex:none}.ldgnow>div{display:grid;gap:1px}.ldgnow b{font-size:.7rem}.ldgnow small{font-size:.52rem}
.ldgst{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.ldgst span{display:grid;gap:1px;padding:4px;border-radius:7px;background:rgba(255,255,255,.06)}.ldgst small{font-size:.48rem}.ldgst b{font-size:.68rem}
.ldgfoot{position:absolute;z-index:1;bottom:8px;left:50%;transform:translateX(-50%);font-size:.52rem;opacity:.75;white-space:nowrap}.ldgfoot .kbd{margin:0 3px;padding:1px 5px;border-radius:5px;border:1px solid rgba(255,255,255,.25)}
.s-ov .ldtoast.ldtr{bottom:28px;inset-inline-end:auto;left:12px;font-size:.62rem;padding:5px 10px;z-index:2}
/* the library's covers sliding by */
.ldrow .ldgc{flex:none;width:150px;aspect-ratio:2/3}.ldrow .ldgc b{font-size:.82rem}
.ldwin{border-color:color-mix(in srgb,var(--acc) 45%,var(--border))}
@media(max-width:960px){.ldml{grid-template-columns:1fr 1fr}.ldmtab:not(.on){display:none}.ld .ldcard.ldwide{grid-column:1/-1}.ldmini{display:none}}
@media(max-width:560px){.ldml{grid-template-columns:1fr}.ldmside{grid-template-columns:1fr 1fr}.ldmvoice small,.ldwave{display:none}.ld .ldcard.ldwide{display:block}.ldwcovs{display:none}.ldrow .ldgc{width:116px}
  .ldgb small,.ldgbr b{display:none}.ldgw.gm,.ldgfoot{display:none}.ldltabs,.s-lib .ldtoast{display:none}.ldlgrid{width:100%}.ldgw.fr{left:8px;right:8px;width:auto;top:44px}.ldgscr{aspect-ratio:4/3.2}.s-ov .ldtoast.ldtr{bottom:8px;left:8px}.ldlobb{grid-template-columns:1fr}.ldlchat{display:none}.ldlobh .ldsbtn{display:none}}
/* «reduce motion»: everything simply there */
/* rebuilt (language / theme): what was seen stays put; the screen doesn't rise again */
.ldre .ldmock,.ldre .ldgrad{animation:none}.ldnow .ldup{transition:none!important}
.ldstill .ldup{opacity:1;transform:none;filter:none;transition:none}.ldstill .ldmock{transform:none;animation:none}
.ldstill .ldrow,.ldstill .ldrow.r2{transform:translateX(-50%)}.ldstill .lddevice{transform:none}.ldstill .ldgrad{animation:none;background-position:0 0}

/* plans (plans.js): the member's page, the shop cards (also on the landing), paying, notices, the admin's side */
.plv{display:grid;gap:14px}.plhead h2{margin:0}.plhead p{margin:4px 0 0}
.plnote{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:var(--acc-soft);border:1px solid var(--border);font-size:.9rem}.plnote .ic{width:18px;height:18px;flex:none}
.plparts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.plpart{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2)}.plpart b{display:block}.plpart .ldti{margin:0;flex:none}
.plpart.soon{border-color:var(--bad)}
.plmeters{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.plm .row{justify-content:space-between;font-size:.88rem}
.plcards{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:12px 0}.plcards>.plcard{flex:0 0 calc((100% - 36px) / 4);min-width:0}  /* 4 to a row; fewer sit in the middle */
.plpays{display:grid;gap:8px}button.plpay{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);box-shadow:none;min-height:0;padding:10px 14px;text-align:start}
.plmonths{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
button.plmo{display:grid;gap:4px;justify-items:center;padding:12px 6px;min-height:0;background:var(--surface-2);color:var(--text);border:1px solid var(--border);box-shadow:none}button.plmo.on{border-color:var(--acc);background:var(--acc-soft);box-shadow:0 0 0 1px var(--acc)}
button.plmo span{font-size:.85rem;color:var(--muted)}button.plmo small{font-size:.7rem}
.plbig{font-size:1.6rem;font-weight:850;text-align:center;margin:6px 0}
.plpaybox{display:grid;gap:10px}
.plamount{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:18px;background:var(--acc-soft);border:1px solid var(--border-hi)}.plamount b{font-size:2rem;font-weight:900;letter-spacing:.02em}
.plwarn{margin:0;font-size:.85rem;color:var(--muted);text-align:center}
.plrial{margin:-4px 0 0;text-align:center}
.plline{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}.plline>span{flex:1}.plline b{font-size:1.02rem}
.pltime{font-variant-numeric:tabular-nums}
.plst{display:flex;align-items:center;gap:8px;font-size:.9rem;line-height:1.8}.plst .ic{width:18px;height:18px;flex:none}
.plspin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--border-hi);border-top-color:var(--acc);animation:plspin .9s linear infinite}
@keyframes plspin{to{rotate:1turn}}
.placts{flex-wrap:wrap}
.pldone{display:grid;justify-items:center;text-align:center;padding:10px 0}.pldone h3{margin:12px 0 4px}
.plok{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:2rem;font-weight:900;background:var(--ok);color:#fff;animation:plpop .5s var(--spring) both}
@keyframes plpop{from{scale:.3;opacity:0}}
.plbanner{display:flex;align-items:center;gap:12px;border-color:var(--bad)}.plbanner b{display:block}.plbanner .ldti{margin:0;flex:none}
.plendbox{display:grid;justify-items:center;text-align:center}.plendbox .ldci{margin-bottom:8px}.plendbox p{margin:4px 0}
.plon{gap:10px;margin-top:14px;align-items:center}.plon input{width:auto;min-height:0;margin:0}
.plcode{padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);font-size:.8rem;overflow-wrap:anywhere}
.plrev{display:grid;gap:10px}.plrow{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap}
.plrow img{width:64px;height:64px;object-fit:cover;border-radius:12px;display:block}.plrow .grow{min-width:160px}
.ldshopw{max-width:1100px;margin:0 auto}
@media(max-width:960px){.plcards>.plcard{flex-basis:calc((100% - 12px) / 2)}}
@media(max-width:560px){.plcards>.plcard{flex-basis:100%}}
@media(max-width:760px){.plparts,.plmeters{grid-template-columns:1fr}.plmonths{grid-template-columns:1fr}.plamount b{font-size:1.6rem}}

/* the header picture's menu (settings.js whoMenu): drops down from it */
.whomenu{position:fixed;z-index:90;padding:8px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);
  transform-origin:top center;animation:whoin .32s var(--spring) both}
.whomenu.out{animation:whoout .18s ease-in both}
@keyframes whoin{from{opacity:0;transform:translateY(-10px) scale(.92)}}
@keyframes whoout{to{opacity:0;transform:translateY(-8px) scale(.95)}}
.whohd{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;margin-bottom:6px;border-bottom:1px solid var(--border)}.whohd b,.whohd small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whohd .grow{min-width:0}
button.whoit{width:100%;display:flex;align-items:center;gap:10px;padding:10px;min-height:0;border-radius:14px;background:transparent;color:var(--text);border:1px solid transparent;box-shadow:none;text-align:start;font-weight:500}
button.whoit b{display:block}button.whoit small{display:block;font-size:.78rem}button.whoit .chip{width:36px;height:36px;flex:none}button.whoit>.ic{width:16px;height:16px;color:var(--muted)}
button.whoit:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media(hover:hover){button.whoit:hover{transform:none;filter:none;box-shadow:none;background:var(--acc-soft);border-color:var(--border)}}
.whomenu .whoit{animation:whoit .35s var(--spring) both}.whomenu .whoit:nth-of-type(2){animation-delay:.05s}.whomenu .whoit:nth-of-type(3){animation-delay:.1s}
@keyframes whoit{from{opacity:0;transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.whomenu,.whomenu.out,.whomenu .whoit{animation:none}}
.ldshop>p{text-align:center}

/* ---- motion, part two: nothing comes or goes all at once (motion.js plays the ones that come from what happens) ---- */
/* a toast goes the way it came */
.toast.out{animation:tout .22s ease-in forwards}@keyframes tout{to{opacity:0;transform:translateY(8px) scale(.96)}}
/* the connection pill (app.js netDown / netUp): comes down from the top; red wifi breathing while it's away, green when back */
.netbar{position:fixed;top:calc(env(safe-area-inset-top) + 10px);left:50%;z-index:130;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);padding:8px 16px 8px 18px;border-radius:999px;
  font-size:.88rem;font-weight:600;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  transform:translateX(-50%);animation:netin .5s var(--spring) both;pointer-events:none}
.netbar .ic{width:18px;height:18px;flex:none;color:var(--bad);animation:netbreath 1.6s ease-in-out infinite}
.netbar.ok{border-color:color-mix(in srgb,var(--ok) 55%,transparent)}.netbar.ok .ic{color:var(--ok);animation:gpop .45s var(--spring)}
.netbar.out{animation:netout .3s ease-in forwards}
@keyframes netin{from{opacity:0;transform:translate(-50%,-150%)}}@keyframes netout{to{opacity:0;transform:translate(-50%,-150%)}}@keyframes netbreath{50%{opacity:.35}}
/* nothing here yet: the picture comes up and then floats, slowly */
.empty>.ic,.empty>.chip.big,.whero>.chip,.wpopped>.ic{animation:emptyin .6s var(--spring) both,floaty 5s ease-in-out .6s infinite}
@keyframes emptyin{from{opacity:0;transform:translateY(8px) scale(.7)}}@keyframes floaty{50%{transform:translateY(-4px)}}
/* waiting for someone: the status dot sends out rings (yellow: their move; green, twice: yours now); the webcam's «connecting» pill pulses */
.gstatus:not(.mine):not(.over)::before{animation:gwait 1.8s ease-out infinite}@keyframes gwait{0%{box-shadow:0 0 0 0 rgba(250,204,21,.55)}80%,100%{box-shadow:0 0 0 7px rgba(250,204,21,0)}}
.gstatus.mine::before{animation:gmine 1.2s ease-out 2}@keyframes gmine{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
.campill{display:inline-flex;align-items:center;gap:6px}.campill:not(.ok)::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:gpulse 1s ease-in-out infinite}
.campill.ok{animation:gpop .4s var(--spring)}
/* watch together: the player's menu grows out of its button, the waiting note drops in, icons that change pop, a skip
   shows on its side, someone else's play / pause / jump comes up at the top with their name */
.ppop:not([hidden]){animation:ppin .26s var(--ease) both;transform-origin:85% 100%}@keyframes ppin{from{opacity:0;transform:translateY(10px) scale(.94)}}
.pnote2{animation:pnin .45s var(--spring) both}@keyframes pnin{from{opacity:0;transform:translateY(-12px) scale(.9)}}
.picon .ic{animation:icpop .32s var(--spring)}@keyframes icpop{from{opacity:.2;transform:scale(.5) rotate(-25deg)}}
.pjump{position:absolute;top:50%;z-index:2;display:flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:1.05rem;pointer-events:none;
  transform:translateY(-50%);animation:pjump .75s var(--ease) forwards;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pjump.f{right:10%}.pjump.b{left:10%}.pjump .ic{width:20px;height:20px}
@keyframes pjump{0%{opacity:0;transform:translateY(-50%) scale(.6)}18%{opacity:1;transform:translateY(-50%) scale(1.06)}30%{transform:translateY(-50%) scale(1)}72%{opacity:1}100%{opacity:0;transform:translateY(-50%) scale(1.04)}}
.pact{position:absolute;top:12px;left:50%;z-index:3;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:6px 14px;border-radius:99px;background:rgba(0,0,0,.66);color:#fff;
  font-size:.86rem;white-space:nowrap;pointer-events:none;transform:translateX(-50%);animation:pact 2.7s var(--ease) forwards}
.pact .ic{width:16px;height:16px;flex:none}.pact span{overflow:hidden;text-overflow:ellipsis}
@keyframes pact{0%{opacity:0;transform:translate(-50%,-12px) scale(.92)}12%,82%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translate(-50%,-6px)}}
.wmsg{animation:wmin .32s var(--ease) both}@keyframes wmin{from{opacity:0;transform:translateY(8px) scale(.97)}}
.wpeople .pill{animation:gpop .38s var(--spring) both}
.wfs.chat>.wside{animation:wsidein .38s var(--ease) both}@keyframes wsidein{from{opacity:0;translate:48px 0}}
html[dir=ltr] .wfs.chat>.wside{animation-name:wsideinl}@keyframes wsideinl{from{opacity:0;translate:-48px 0}}
/* tools: another month slides in from its side (--cx, hub.js), the chosen day pops, a converted picture comes up */
.calgrid.mswap{animation:mswap .38s var(--ease)}@keyframes mswap{from{opacity:0;translate:var(--cx,0) 0}}
.cal button.cell.sel{animation:selpop .32s var(--spring)}@keyframes selpop{from{transform:scale(.82)}}
.tres>*{animation:rowin .4s var(--ease) both}.tres>*:nth-child(2){animation-delay:.06s}.tres>*:nth-child(3){animation-delay:.12s}
@media(prefers-reduced-motion:reduce){.empty>.ic,.empty>.chip.big,.whero>.chip,.wpopped>.ic,.netbar .ic,.gstatus::before,.campill::before{animation:none}}
/* admin › plans: the bank SMSes that came, and pointing at the amount in one (plans.js smsTeach) */
.plsmslog{display:grid;gap:8px}.plsms{padding:10px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}.plsms .row{gap:8px;align-items:center;flex-wrap:wrap}
.plsmstext{white-space:pre-wrap;font-size:.85rem;margin-top:6px;color:var(--muted);overflow-wrap:anywhere;max-height:7.5em;overflow:auto}
.plsmsst{font-size:.78rem;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--acc-soft)}.plsmsst.ok{color:var(--ok)}.plsmsst.none,.plsmsst.nopay,.plsmsst.many{color:var(--bad)}
.plsmspaste{display:flex;gap:8px;align-items:flex-start;margin-top:10px}.plsmspaste textarea{margin:0}.plsmspaste button{flex:none}
.smstext{white-space:pre-wrap;line-height:2.3;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);margin-bottom:12px;overflow-wrap:anywhere;max-height:40vh;overflow:auto}
button.smsn{min-height:0;padding:0 8px;margin:0 2px;border-radius:8px;font-weight:700;background:var(--acc-soft);color:var(--text);border:1px solid var(--border-hi);box-shadow:none;unicode-bidi:isolate}
button.smsn.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);animation:gpop .3s var(--spring)}
.smsout{margin-top:12px;font-weight:700;min-height:1.7em}
/* rows of choices (motion.js rowPill): the chosen one's colour is a pill under the buttons that slides like the dock's */
.haspill:not(.dock){position:relative}.haspill:not(.dock)>button{position:relative;z-index:1;transition:color .3s,transform .15s var(--spring),filter .15s}  /* not the dock: it has its own pill and stays fixed */
.seg.haspill>button.on,.setnav.haspill>button.on,.fchips.haspill>button.on{background:transparent;border-color:transparent}
.rowpill{position:absolute;top:0;left:0;z-index:0;background:linear-gradient(135deg,var(--acc),var(--acc2));pointer-events:none;opacity:0;
  transition:transform .42s var(--spring),width .42s var(--spring),height .42s var(--spring),opacity .2s}
@media(prefers-reduced-motion:reduce){.rowpill{transition:none}}
/* a row of tabs narrower than its box sits in the middle (still scrolls when it's wider) */
.lbseg>button:first-of-type,.seg.scroll>button:first-of-type{margin-inline-start:auto}.lbseg>button:last-of-type,.seg.scroll>button:last-of-type{margin-inline-end:auto}

/* plan cards: their own surface, the name and price in Estedad, a line under the price, the popular one lit */
.plcard{position:relative;display:flex;flex-direction:column;margin:0;padding:22px 20px 20px;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 42%),var(--surface);border:1px solid var(--border);transition:transform .3s var(--spring),border-color .3s,box-shadow .3s}
.plcard::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);pointer-events:none}
@media(hover:hover){.plcard:hover{transform:translateY(-4px);border-color:var(--border-hi);box-shadow:0 18px 40px rgba(0,0,0,.35)}}
.plcard h3{margin:0 0 10px;font-family:Estedad,Vazir,sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.01em}
.plcard.pop{border-color:rgba(255,255,255,.3);background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 50%),var(--surface);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 22px 50px rgba(0,0,0,.45)}html.light .plcard.pop{border-color:var(--acc)}
.plcard.pop::after{content:"";position:absolute;inset:-40% -20% auto;height:70%;background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent);pointer-events:none}
.plcard.mine{box-shadow:0 0 0 2px var(--acc)}
.plpop{position:absolute;top:16px;inset-inline-end:16px;font-size:.72rem;font-weight:700;padding:4px 10px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc);border:0}
.plprice{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plprice b{font-family:Estedad,Vazir,sans-serif;font-size:1.9rem;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.plprice span{font-weight:700;font-size:.95rem}.plprice small{flex-basis:100%;color:var(--muted);font-size:.8rem}
.plworth{margin:-2px 0 2px;font-size:.78rem;color:var(--muted)}.plworth s{opacity:.85}
.plcard ul{list-style:none;padding:14px 0 0;border-top:1px dashed var(--border);margin:14px 0 18px;display:grid;gap:11px;flex:1;align-content:start;font-size:.9rem;line-height:1.6}
.plcard>button{align-self:stretch;min-height:46px;border-radius:14px}
.plfree{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:14px;border:1px dashed var(--border);color:var(--muted);font-size:.85rem}.plfree .ic{width:16px;height:16px;color:var(--ok)}
.plcard li{display:flex;gap:10px;align-items:center}
.plic{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:hsl(var(--h) 80% 60% / .14);border:1px solid hsl(var(--h) 80% 60% / .28);color:hsl(var(--h) 85% 70%)}
.plic .ic{width:15px;height:15px}html.light .plic{color:hsl(var(--h) 70% 38%);background:hsl(var(--h) 80% 50% / .12)}
/* voice (voice.js): servers rail, channels, the stage or the messages — Discord's layout in Jong's look */
.vview{display:grid;grid-template-columns:76px var(--vside,264px) minmax(0,1fr);height:calc(100dvh - 190px);min-height:460px;padding:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(var(--blur))}
.vrail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;background:rgba(0,0,0,.18);overflow-y:auto;scrollbar-width:none}
button.vsrv,span.vsrv{position:relative;width:50px;height:50px;min-height:0;padding:0;flex:none;border-radius:50%;display:grid;place-items:center;font:800 1.2rem Estedad,Vazir,sans-serif;background:var(--surface-2);color:var(--text);border:1px solid var(--border);box-shadow:none;transition:border-radius .25s var(--spring),background .25s,transform .15s}
button.vsrv.on,span.vsrv.on,button.vsrv:hover{border-radius:16px;background:var(--c,var(--acc));color:#fff;border-color:transparent}
button.vsrv.on::before{content:"";position:absolute;inset-inline-start:-13px;width:4px;height:36px;border-radius:4px;background:var(--text)}
button.vsrv.live::after{content:"";position:absolute;bottom:-2px;inset-inline-end:-2px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:3px solid var(--surface)}
.vdot{position:absolute;top:2px;inset-inline-end:2px;width:10px;height:10px;border-radius:50%;background:var(--bad)}
.vsep{width:32px;height:2px;border-radius:2px;background:var(--border)}button.vadd{color:var(--ok)}button.vadd:hover{background:var(--ok)}
.vside{display:flex;flex-direction:column;min-height:0;background:rgba(0,0,0,.08);border-inline-start:1px solid var(--border);border-inline-end:1px solid var(--border)}
button.vhead{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 16px;border-radius:0;background:transparent;color:var(--text);border:0;border-bottom:1px solid var(--border);box-shadow:none;justify-content:flex-start}
button.vhead b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.vhead .mut{font-size:.78rem;font-weight:400}button.vhead .ic{margin-inline-start:auto;width:18px;height:18px}
.vlist{flex:1;overflow-y:auto;padding:10px 8px}
.vsec{margin-bottom:14px}.vsech{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.02em}
button.vplus{width:22px;height:22px;min-height:0;padding:0;border-radius:6px;background:transparent;color:var(--muted);border:0;box-shadow:none}button.vplus .ic{width:15px;height:15px}
button.vch{width:100%;display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 10px;border-radius:10px;background:transparent;color:var(--muted);border:0;box-shadow:none;font-weight:500;justify-content:flex-start}
button.vch .ic{width:18px;height:18px;flex:none}button.vch.on{background:var(--acc-soft);color:var(--text)}button.vch.live{color:var(--ok)}
.vchact{opacity:0;display:grid;place-items:center}.vchact .ic{width:15px;height:15px}button.vch:hover .vchact,button.vch.on .vchact{opacity:.7}
.vbadge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font-size:.72rem;display:grid;place-items:center}
.vppl{padding:2px 0 4px;padding-inline-start:30px;display:grid;gap:2px}
.vp{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:8px;font-size:.84rem;color:var(--muted)}.vp .ic{width:14px;height:14px;color:var(--bad)}
.vp .av,.vfp .av,.vpa .av,.vtile .av{transition:box-shadow .15s}.spk .av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ok)}
.vlive{font-size:.62rem;font-weight:800;padding:1px 6px;border-radius:5px;background:var(--bad);color:#fff}
.vconn{display:flex;align-items:center;gap:6px;padding:10px 12px;border-top:1px solid var(--border);background:rgba(0,0,0,.12)}.vconn small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vok{color:var(--ok);font-size:.86rem}
.vme{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:rgba(0,0,0,.2)}.vme .grow{min-width:0}.vme b,.vme small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vme b{font-size:.86rem}
button.icon.off,.vfctl button.off{color:var(--bad)}button.icon.on.sec{color:var(--ok);border-color:var(--ok)}
.vmainc{display:flex;flex-direction:column;min-width:0;min-height:0}
.vtop{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 16px;border-bottom:1px solid var(--border)}.vtop>.ic{width:20px;height:20px;color:var(--muted)}
button.vback{display:none;width:36px;height:36px;min-height:0;padding:0;background:transparent;border:0;box-shadow:none;color:var(--text)}
.vtext{flex:1;display:flex;flex-direction:column;min-height:0}
.vmsgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.vmsg{display:flex;gap:12px;padding:6px 8px;border-radius:12px;margin-top:8px}.vmsg.same{margin-top:0;padding-top:1px}.vmsg:hover{background:rgba(255,255,255,.03)}
.vmav{width:36px;flex:none}.vmh{display:flex;align-items:baseline;gap:8px}.vmh small{font-size:.72rem}.vmt{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75}
.vcompose{display:flex;gap:8px;align-items:flex-end;padding:12px 16px 16px}
.vro{display:flex;gap:8px;align-items:center;justify-content:center;margin:12px 16px 16px;padding:12px;border-radius:14px;background:var(--surface-2);font-size:13px}.vro .ic{width:15px;height:15px}
button.vch.shut{opacity:.55}.vpv{margin-top:6px}.vpv button{display:flex;gap:6px;align-items:center}.vpv .ic{width:14px;height:14px}.vcompose textarea{margin:0;resize:none;max-height:140px;border-radius:14px}
.vpre{align-items:center;justify-content:center;text-align:center}.vpre h3{margin:6px 0}.vpreppl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 10px}
.vtn{position:absolute;bottom:8px;inset-inline-start:10px;display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:10px;background:rgba(0,0,0,.45);font-size:.8rem;color:#fff}.vtn .ic{width:14px;height:14px}.vtile .vtn .ic{color:#ff6b6b}
.vctl{display:flex;justify-content:center;gap:10px;padding:6px 0 2px}.vctl button.icon{width:52px;height:52px;border-radius:50%}.vctl .ic{width:22px;height:22px}
.vwelcome{grid-column:2/-1;margin:auto;max-width:440px;text-align:center;display:grid;justify-items:center;gap:6px}.vwelcome h2{margin:6px 0 0}
.vinv{display:grid;justify-items:center;text-align:center}.vinv h3{margin:10px 0 2px}
.vmems{display:grid;gap:4px;max-height:60vh;overflow:auto}.vmem{display:flex;align-items:center;gap:6px}button.vmemb{flex:1;display:flex;align-items:center;gap:10px;min-height:0;padding:6px 8px;background:transparent;color:var(--text);border:0;box-shadow:none;border-radius:12px;justify-content:flex-start}
.vonl{width:9px;height:9px;border-radius:50%;background:var(--border-hi)}.vonl.on{background:var(--ok)}
/* in voice, elsewhere: a pill above the dock; in a game: a panel at the side */
.vfloat{position:fixed;z-index:60;bottom:96px;inset-inline-start:50%;translate:50% 0;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);backdrop-filter:blur(var(--blur)) saturate(1.4);animation:whoin .35s var(--spring) both}
[dir=ltr] .vfloat{translate:-50% 0}
button.vfhead{display:flex;align-items:center;gap:8px;min-height:0;padding:4px 6px;background:transparent;color:var(--text);border:0;box-shadow:none}
.vfdot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(34,197,94,.2);animation:gpulse 1.6s ease-in-out infinite}
.vfppl{display:flex;gap:4px}.vfp{display:flex;align-items:center;gap:6px}.vfp .ic{width:13px;height:13px;color:var(--bad)}.vfctl{display:flex;gap:4px}
.vfloat.vgame{bottom:auto;top:96px;inset-inline-start:auto;inset-inline-end:16px;translate:none;flex-direction:column;align-items:stretch;width:220px;border-radius:20px;padding:10px}
.vgame .vfppl{flex-direction:column;gap:6px;max-height:40vh;overflow:auto}.vgame .vfp{font-size:.85rem;padding:2px 4px}.vgame .vfctl{justify-content:center}
@media(max-width:760px){
  .vview{grid-template-columns:64px minmax(0,1fr);height:calc(100dvh - 170px)}.vview .vmainc{display:none}
  .vview.vmain{grid-template-columns:minmax(0,1fr)}.vview.vmain .vrail,.vview.vmain .vside{display:none}.vview.vmain .vmainc{display:flex}
  button.vback{display:grid;place-items:center}button.vsrv{width:44px;height:44px}
  .vfloat{bottom:86px;max-width:calc(100vw - 24px)}.vfloat .vfppl{display:none}.vfloat.vgame{top:auto;bottom:86px;width:auto;flex-direction:row;inset-inline-end:12px}.vgame .vfppl{display:none}}
@media(prefers-reduced-motion:reduce){.vfloat,.vfdot{animation:none}}
button.vch .grow,.vp .grow,.vfp .grow,button.vmemb .grow{text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcompose textarea{min-height:46px;height:46px;padding-block:11px}

/* the stage (voice.js vcLayout): tiles placed and sized by the page, sliding and growing to their new boxes */
.vstage{flex:1;display:flex;flex-direction:column;gap:12px;padding:14px;min-height:0}
.vgrid{position:relative;flex:1;min-height:0}
.vtile{position:absolute;border-radius:18px;overflow:hidden;container-type:size;cursor:default;background:radial-gradient(120% 120% at 50% 0%,hsl(0 0% 100% / .06),transparent 60%),linear-gradient(160deg,var(--surface-2),rgba(0,0,0,.35));border:1px solid var(--border);
  transition:left .5s var(--spring),top .5s var(--spring),width .5s var(--spring),height .5s var(--spring),box-shadow .2s,border-color .2s,opacity .32s,transform .32s var(--spring)}
.vtile.in,.vtile.out{opacity:0;transform:scale(.82)}
.vtv{position:absolute;inset:0;display:grid;place-items:center}.vtv video{width:100%;height:100%;object-fit:cover;display:block}
.vtile.scr{background:#000}.vtile.scr .vtv video{object-fit:contain}.vtile.me.vid:not(.scr) .vtv video{transform:scaleX(-1)}
.vtav .av{--s:clamp(34px,40cqmin,180px)!important;width:var(--s)!important;height:var(--s)!important;font-size:calc(var(--s)*.42)!important;transition:box-shadow .2s,transform .3s var(--spring)}
.vtile.spk{border-color:var(--ok);box-shadow:inset 0 0 0 2px var(--ok),0 0 28px rgba(34,197,94,.28)}
.vtile.spk .vtav .av{box-shadow:0 0 0 4px rgba(34,197,94,.45);animation:vspk 1.1s ease-in-out infinite}
@keyframes vspk{50%{box-shadow:0 0 0 9px rgba(34,197,94,.12)}}
.vtile .vtn{transition:opacity .2s}.vtile.mini .vtn{bottom:5px;inset-inline-start:6px;padding:2px 7px;font-size:.68rem}
button.vpin{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;min-height:0;padding:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:none;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s var(--spring),background .2s}
button.vpin .ic{width:16px;height:16px}.vtile:hover button.vpin,.vtile.pinned button.vpin{opacity:1;transform:none}.vtile.pinned button.vpin{background:var(--acc);color:var(--on-acc)}
.vtile.mini button.vpin{top:4px;inset-inline-end:4px;width:26px;height:26px}
@media(hover:none){button.vpin{opacity:.85;transform:none}}
@media(prefers-reduced-motion:reduce){.vtile{transition:none}.vtile.spk .vtav .av{animation:none}}
.vside{position:relative}
.vgrip{position:absolute;top:0;bottom:0;inset-inline-end:-4px;width:8px;z-index:5;cursor:col-resize;touch-action:none}
.vgrip::after{content:"";position:absolute;top:50%;inset-inline-start:2px;width:4px;height:44px;margin-top:-22px;border-radius:4px;background:var(--border-hi);opacity:0;transition:opacity .2s,height .2s}
.vgrip:hover::after,.vdrag .vgrip::after{opacity:1;height:72px;margin-top:-36px;background:var(--acc)}
.vdrag{user-select:none;cursor:col-resize}.vdrag .vtile{transition:none}
@media(max-width:760px){.vgrip{display:none}}
/* the device arrow by each control, and its menu (voice.js vcDevMenu) */
.vcg{position:relative;display:inline-flex}
button.vchev{position:absolute;bottom:-2px;inset-inline-end:-4px;width:22px;height:22px;min-height:0;padding:0;border-radius:50%;background:var(--surface-2);color:var(--text);border:1px solid var(--border-hi);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .2s var(--spring),background .2s}
button.vchev .ic{width:13px;height:13px}@media(hover:hover){button.vchev:hover{transform:translateY(-2px);background:var(--acc-soft);filter:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}}
.vdev{position:fixed;z-index:95;min-width:240px;max-width:min(340px,calc(100vw - 16px));padding:8px;border-radius:18px;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);backdrop-filter:blur(var(--blur)) saturate(1.4);transform-origin:bottom center;animation:vdevin .3s var(--spring) both}
@keyframes vdevin{from{opacity:0;transform:translateY(10px) scale(.92)}}
.vdevt{display:block;padding:6px 10px 8px;font-size:.8rem;color:var(--muted)}
button.vdevi{width:100%;display:flex;align-items:center;gap:10px;min-height:0;padding:9px 10px;border-radius:12px;background:transparent;color:var(--text);border:0;box-shadow:none;font-weight:500;text-align:start;justify-content:flex-start;animation:whoit .3s var(--spring) both}
button.vdevi .ic{width:16px;height:16px;color:var(--muted);flex:none}button.vdevi.on{background:var(--acc-soft)}button.vdevi.on .ic{color:var(--ok)}
button.vdevi .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(hover:hover){button.vdevi:hover{transform:none;filter:none;box-shadow:none;background:var(--acc-soft)}}
@media(prefers-reduced-motion:reduce){.vdev,button.vdevi{animation:none}}
/* the voice section is wider than the rest of the site (a stage wants room, as Meet / Discord): up to 1600px, centred */
.vview{--vw:min(1600px,calc(100vw - 32px));width:var(--vw);max-width:none;margin-inline:calc((100% - var(--vw)) / 2)}
@media(max-width:760px){.vview{--vw:100%}}
/* voice shortcuts (Settings › ویس چت) */
.vkrow{gap:6px;flex-wrap:nowrap}button.vkbtn{min-width:150px}button.vkbtn kbd{font:600 .82rem ui-monospace,Consolas,monospace;padding:2px 8px;border-radius:7px;background:var(--acc-soft);border:1px solid var(--border-hi)}
button.vkbtn.rec{border-color:var(--acc);color:var(--acc);animation:gpulse 1s ease-in-out infinite}
/* voice: server picture in the rail, channel topic, names / pictures that open a card */
.vsico{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.vtopic{color:var(--muted);font-size:.82rem;padding-inline-start:12px;margin-inline-start:4px;border-inline-start:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:40%}
button.vmavb{padding:0;min-height:0;background:none;border:0;box-shadow:none;border-radius:50%;flex:none;align-self:flex-start}
.vbotav{width:36px;height:36px;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:var(--acc-soft);font-weight:700}.vbotav img{width:100%;height:100%;object-fit:cover}
.vmname,.vtn[role=button],.vp[role=button]{cursor:pointer}.vmname:hover{text-decoration:underline}
/* server settings (Discord-like): sections at the side, the chosen one beside them */
.md.vsetmd{width:min(100%,860px)}
.vset{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;min-height:420px}
.vsetnav{display:flex;flex-direction:column;gap:2px;padding-inline-end:12px;border-inline-end:1px solid var(--border)}
.vsetsrv{padding:4px 10px 10px;font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsetnav button{justify-content:flex-start;gap:10px;min-height:38px;padding:6px 10px;border-radius:10px;background:transparent;color:var(--muted);border:0;box-shadow:none;font-weight:500}
.vsetnav button .ic{width:17px;height:17px}.vsetnav button.on{background:var(--acc-soft);color:var(--text)}.vsetnav button.bad{color:var(--bad);margin-top:auto}
@media(hover:hover){.vsetnav button:hover{transform:none;filter:none;box-shadow:none;background:var(--acc-soft);color:var(--text)}}
.vsetpane{display:grid;gap:10px;align-content:start;min-width:0;animation:vdevin .3s var(--spring) both}.vsetpane h3{margin:0 0 4px}
.vsetrow{display:flex;gap:16px;align-items:center}
.vsetico{width:96px;height:96px;flex:none;border-radius:28px;display:grid;place-items:center;overflow:hidden;background:var(--c);color:#fff;font:800 2.2rem Estedad,Vazir,sans-serif;box-shadow:var(--shadow-soft)}.vsetico img{width:100%;height:100%;object-fit:cover}
.vlab{font-size:.78rem;font-weight:700;color:var(--muted);margin-top:4px}.vset textarea,.vbox textarea{resize:vertical}
.vsnds{display:grid;gap:8px}.vsnd{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;border:1px solid var(--border);background:var(--surface)}
.vsnd .grow{display:grid;gap:4px;min-width:0}.vsnd input{margin:0;min-height:36px}.vsnd input[type=range]{min-height:0}
input.vsem{width:58px!important;flex:none;text-align:center;font-size:1.3rem;padding:4px;margin:0}
@media(max-width:700px){.vset{grid-template-columns:1fr}.vsetnav{flex-direction:row;overflow-x:auto;border:0;border-bottom:1px solid var(--border);padding:0 0 8px}.vsetsrv{display:none}.vsetnav button{flex:none}.vsetnav button.bad{margin:0}}
/* soundboard panel and the emoji that flies off a tile when someone plays a sound */
.vdev.vsb{width:min(420px,calc(100vw - 16px))}.vsbh{align-items:center;padding:0 2px 4px}.vsbh .vdevt{padding:6px 8px}
.vsbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:46vh;overflow:auto;padding:2px}
button.vsbi{display:grid;justify-items:center;gap:4px;min-height:0;padding:12px 6px;border-radius:14px;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none;animation:whoit .3s var(--spring) both;animation-delay:calc(var(--i) * 25ms)}
button.vsbi:active{transform:scale(.92)}.vsbe{font-size:1.6rem;line-height:1}.vsbn{font-size:.76rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(hover:hover){button.vsbi:hover{transform:translateY(-2px);filter:none;box-shadow:none;border-color:var(--acc);background:var(--acc-soft)}}
.vsbfly{position:absolute;inset-inline-start:50%;top:46%;font-size:2.6rem;pointer-events:none;animation:vsbfly 1.6s cubic-bezier(.2,.8,.3,1) forwards;z-index:3}
@keyframes vsbfly{0%{opacity:0;transform:translate(-50%,10px) scale(.4)}15%{opacity:1;transform:translate(-50%,-10px) scale(1.25)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-90px) scale(1)}}
/* a member's card */
.vcard{position:fixed;z-index:96;width:300px;max-width:calc(100vw - 16px);border-radius:20px;overflow:hidden;background:var(--surface-2);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);border:1px solid var(--border-hi);box-shadow:var(--shadow);animation:vdevin .3s var(--spring) both}
.vcardload{display:grid;place-items:center;height:140px}.vcardload .jload{width:42px;height:42px}
.vcardban{height:84px;background:linear-gradient(135deg,var(--a,var(--acc)),color-mix(in srgb,var(--a,var(--acc)) 45%,#000))}
.vcardav{position:relative;margin:-44px 16px 0;width:84px;height:84px;border-radius:50%;padding:4px;background:var(--surface-2)}.vcardav .av{--s:76px!important}
.vcardav .vonl{position:absolute;bottom:6px;inset-inline-end:6px;width:18px;height:18px;border:3px solid var(--surface-2)}
.vcardb{display:grid;gap:8px;padding:8px 16px 16px}.vcardn{gap:6px;align-items:center}.vcardn b{font:800 1.15rem Estedad,Vazir,sans-serif}
.vcardplay{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ok)}.vcardplay .ic{width:15px;height:15px}
.vcardbio{margin:0;padding:10px 12px;border-radius:12px;background:var(--surface);font-size:.86rem;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;max-height:7.2em;overflow:auto}
.vcardbadges{display:flex;flex-wrap:wrap;gap:6px}.vcardstat{display:flex;justify-content:space-between;font-size:.84rem}
.vcarda{gap:6px}.vcarda button{flex:1}
@media(prefers-reduced-motion:reduce){.vcard,.vsetpane,button.vsbi,.vsbfly{animation:none}}
/* reactions and replies (friends chat + voice) */
.dmsg,.vmsg{position:relative}
.rrow{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
button.rchip{display:inline-flex;align-items:center;gap:4px;min-height:0;padding:2px 8px;border-radius:999px;font-size:.82rem;background:var(--surface-2);color:var(--text);border:1px solid var(--border);box-shadow:none;animation:whoit .25s var(--spring) both}
button.rchip.me{background:var(--acc-soft);border-color:var(--acc)}button.rchip .num{font-size:.75rem;font-weight:700}
@media(hover:hover){button.rchip:hover{transform:none;filter:none;box-shadow:none;border-color:var(--acc)}}
.mbar{position:absolute;top:-16px;inset-inline-end:8px;display:flex;gap:1px;padding:2px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow-soft);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s,transform .12s;z-index:4}
.dmsg.me .mbar,.wmsg.me .mbar{inset-inline-end:auto;inset-inline-start:8px}.wmsg{position:relative}.wmsg .mbar{top:-14px}
.mbar button{min-height:0;width:30px;height:28px;padding:0;border-radius:7px;background:transparent;border:0;box-shadow:none;color:var(--muted);font-size:1rem}.mbar .ic{width:17px;height:17px}
@media(hover:hover){.dmsg:hover>.mbar,.vmsg:hover>.mbar,.wmsg:hover>.mbar,.mbar:focus-within{opacity:1;pointer-events:auto;transform:none}.mbar button:hover{transform:none;filter:none;box-shadow:none;background:var(--acc-soft);color:var(--text)}}
.vmsg:hover,.dmsg:hover{z-index:2}
.cmenu{position:fixed;z-index:97;min-width:200px;padding:6px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);display:grid;gap:2px;animation:vdevin .18s var(--spring) both;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.cmreact{display:flex;justify-content:space-between;padding:2px 2px 6px;margin-bottom:2px;border-bottom:1px solid var(--border)}
.cmreact button{min-height:0;width:32px;height:32px;padding:0;border-radius:50%;background:var(--surface);border:0;box-shadow:none;font-size:1.05rem}
.cmenu>button{justify-content:flex-start;gap:10px;min-height:34px;padding:6px 10px;border-radius:8px;background:transparent;border:0;box-shadow:none;color:var(--text);font-weight:500}.cmenu>button .ic{width:17px;height:17px}
@media(hover:hover){.cmenu button:hover{transform:none;filter:none;box-shadow:none;background:var(--acc-soft)}}
button.rquote{display:flex;align-items:center;gap:6px;min-height:0;padding:0 0 4px;background:none;border:0;box-shadow:none;color:var(--muted);font-size:.8rem;font-weight:400;max-width:100%;overflow:hidden;white-space:nowrap;justify-content:flex-start}
button.rquote .ic{width:14px;height:14px;flex:none;transform:scaleX(-1)}[dir=ltr] button.rquote .ic{transform:none}
button.rquote b{color:var(--text);flex:none}button.rquote span{overflow:hidden;text-overflow:ellipsis}
@media(hover:hover){button.rquote:hover{transform:none;filter:none;box-shadow:none;color:var(--text)}}
.rflash{animation:rflash 1.4s ease}@keyframes rflash{0%,40%{background:var(--acc-soft);box-shadow:0 0 0 2px var(--acc)}}
.rpbar{display:flex;align-items:center;gap:8px;padding:6px 12px;margin:0 8px;border-radius:12px 12px 0 0;background:var(--surface-2);border:1px solid var(--border);border-bottom:0;font-size:.84rem;animation:vdevin .2s var(--spring) both}
.rpbar>.ic{width:16px;height:16px;flex:none;color:var(--acc)}.rpbar .grow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
button.rx{min-height:0;width:26px;height:26px;padding:0;border-radius:50%;background:transparent;border:0;box-shadow:none;color:var(--muted)}.rx .ic{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.rflash,.cmenu,.rpbar,button.rchip{animation:none}.mbar{transition:none}}
.mbar img.emo,.cmreact img.emo{width:20px;height:20px;margin:0;vertical-align:middle}.rchip img.emo{width:17px;height:17px;margin:0}
.vsbe img.emo{width:34px;height:34px;margin:0}.vsbfly img.emo{width:56px;height:56px}.vsnd .vsemb img.emo,.vbox .vsemb img.emo{width:26px;height:26px;margin:0}
button.vsemb{width:52px;height:52px;min-height:0;flex:none;padding:0;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:none}
/* files in chats: waiting tray above the composer, drop sign, picture viewer */
.atray{display:none;gap:8px;padding:8px;margin:0 8px;overflow-x:auto;border-radius:14px 14px 0 0;background:var(--surface-2);border:1px solid var(--border);border-bottom:0}
.atray.on{display:flex}
.atit{position:relative;flex:none;width:150px;display:grid;gap:5px;padding:6px;border-radius:12px;background:var(--surface);border:1px solid var(--border);animation:whoit .25s var(--spring) both}
.atit img,.atico{width:100%;height:96px;border-radius:8px;object-fit:cover;display:grid;place-items:center;background:rgba(127,127,140,.12)}.atico .ic{width:34px;height:34px;color:var(--muted)}
.atn{font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atbarw{height:3px;border-radius:3px;background:var(--border);overflow:hidden}.atbar{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
.atit.done .atbarw{opacity:0}.atit.sending{opacity:.6}
button.atx{position:absolute;top:2px;inset-inline-end:2px;width:28px;height:28px;min-height:0;padding:0;border-radius:8px;background:var(--surface-2);color:var(--bad);border:1px solid var(--border);box-shadow:var(--shadow-soft)}.atx .ic{width:15px;height:15px}
.vtext.dropz{position:relative}  /* the friends drawer is fixed already: it keeps its own position */
.dropz.drag::after{content:attr(data-drop);position:absolute;inset:6px;z-index:30;display:grid;place-items:center;border-radius:18px;border:2px dashed var(--acc);background:color-mix(in srgb,var(--acc) 16%,var(--surface-2) 84%);color:var(--text);font:800 1.15rem Estedad,Vazir,sans-serif;pointer-events:none;animation:vdevin .15s var(--spring) both}
button.vatt{flex:none}.vmf{margin-top:4px;max-width:420px}.vmf .dimg{max-height:320px}
.imgv{position:fixed;inset:0;z-index:99;display:grid;place-items:center;grid-template-rows:1fr auto;padding:24px;background:rgba(0,0,0,.85);animation:nin .18s var(--ease) both}
.imgv img{max-width:100%;max-height:calc(100vh - 110px);border-radius:10px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.imgvb{display:flex;align-items:center;gap:8px;width:min(100%,700px);color:#fff;padding-top:12px}.imgvb .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* mentions, links, edits */
.ment{display:inline-block;padding:0 4px;border-radius:5px;background:color-mix(in srgb,var(--acc) 22%,transparent);color:color-mix(in srgb,var(--acc) 70%,var(--text));font-weight:600;cursor:pointer}
.ment.me{background:color-mix(in srgb,var(--warn,#f59e0b) 28%,transparent);color:var(--text)}
.vmsg.mentme{background:color-mix(in srgb,var(--warn,#f59e0b) 10%,transparent);box-shadow:inset 3px 0 0 var(--warn,#f59e0b)}[dir=rtl] .vmsg.mentme{box-shadow:inset -3px 0 0 var(--warn,#f59e0b)}
a.mlink{color:var(--acc);text-decoration:underline;overflow-wrap:anywhere;unicode-bidi:isolate}
small.edited{color:var(--muted);font-size:.72rem}
.meditw{display:grid;gap:4px;margin-top:2px}textarea.medit{margin:0;min-height:38px;resize:none;font:inherit}
.mpop{position:fixed;z-index:97;padding:6px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);display:grid;gap:2px;animation:vdevin .15s var(--spring) both}
.mpoph{font-size:.72rem;font-weight:700;color:var(--muted);padding:2px 8px 4px}
.mpop button{justify-content:flex-start;gap:8px;min-height:34px;padding:4px 8px;border-radius:8px;background:transparent;border:0;box-shadow:none;color:var(--text);font-weight:500}
.mpop button.on{background:var(--acc-soft)}
.cmenu>button.bad{color:var(--bad)}
/* link cards */
a.lcard{display:grid;gap:4px;max-width:400px;margin-top:4px;margin-inline-end:auto;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);border-inline-start:4px solid #ff0033;color:var(--text);text-decoration:none}
a.lcard:empty{display:none}.lcsite{font-size:.72rem;font-weight:700;color:var(--muted)}.lcsite.ap{color:#ea1d5d}a.lcard:has(.lcsite.ap){border-inline-start-color:#ea1d5d}
a.lcard b{font-size:.92rem;line-height:1.6}a.lcard:has(.lcsite.web){border-inline-start-color:var(--acc)}.lcsite.web{direction:ltr;text-align:start}
.lcimg{position:relative;display:block;margin-top:4px;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#000}.lcimg img{width:100%;height:100%;object-fit:cover;display:block}
.lcplay{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff}.lcplay .ic{width:24px;height:24px}
/* voice: mention badges, private lock, typing, top-bar tools, older loading, activity, server mute */
.vbadge.ment{background:var(--bad)}
.vment{position:absolute;bottom:-2px;inset-inline-end:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--bad);color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center;border:3px solid var(--bg,#111)}
.vlock .ic{width:13px;height:13px;color:var(--muted)}
.vtyping{min-height:20px;padding:0 18px;font-size:.78rem;color:var(--muted)}
input.vsearch{width:150px;min-height:34px;margin:0;padding:4px 12px;border-radius:10px;font-size:.85rem;transition:width .2s}input.vsearch:focus{width:220px}
@media(max-width:700px){input.vsearch{display:none}}
.vpop{position:fixed;z-index:96;width:min(420px,calc(100vw - 16px));max-height:70vh;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border-hi);box-shadow:var(--shadow);animation:vdevin .2s var(--spring) both}
.vpopb{overflow:auto;display:grid;gap:2px}.vpopb .jload{width:36px;height:36px;margin:20px auto}
button.vres{display:flex;align-items:flex-start;gap:10px;min-height:0;padding:8px;border-radius:10px;background:transparent;border:0;box-shadow:none;color:var(--text);font-weight:400;text-align:start}
@media(hover:hover){button.vres:hover{transform:none;filter:none;box-shadow:none;background:var(--acc-soft)}}
.vresh{display:block;font-size:.82rem}.vrest{display:block;font-size:.86rem;line-height:1.7;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.vpn{display:grid;min-width:0}.vpn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vact{display:flex;align-items:center;gap:4px;font-size:.7rem;color:var(--ok);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vact .ic{width:12px;height:12px;flex:none}
.vsm .ic{color:var(--bad)}
.vum{min-width:240px}.vumh{padding:4px 10px 8px;font-weight:800;border-bottom:1px solid var(--border);margin-bottom:4px}
.vumv{display:grid;gap:4px;padding:6px 10px;font-size:.84rem}.vumv .row{gap:8px;align-items:center}.vumv .ic{width:16px;height:16px}.vumv input{margin:0;min-height:0}
.vumsep{font-size:.72rem;font-weight:700;color:var(--muted);padding:8px 10px 2px;border-top:1px solid var(--border);margin-top:4px}
.vummv{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 10px}
.vummv button{min-height:28px;padding:2px 10px;gap:4px;border-radius:8px;font-size:.8rem;background:var(--surface);border:1px solid var(--border);box-shadow:none;color:var(--text)}.vummv .ic{width:13px;height:13px}
/* roles, private channel people */
.pill.vrole.owner{background:color-mix(in srgb,#f59e0b 25%,transparent);color:#f59e0b}.pill.vrole.admin{background:color-mix(in srgb,#ef4444 22%,transparent);color:#f87171}.pill.vrole.mod{background:color-mix(in srgb,#3b82f6 22%,transparent);color:#60a5fa}
select.vrolesel{width:auto;min-height:32px;margin:0;padding:2px 8px;font-size:.8rem;border-radius:8px}
.vonl.busy{background:var(--bad)}
label.vchk{display:flex;gap:10px;align-items:flex-start;margin-top:10px;cursor:pointer}label.vchk input{width:auto;margin-top:4px}label.vchk b{display:flex;gap:6px;align-items:center}label.vchk .ic{width:15px;height:15px}label.vchk small{display:block}
.vallow{display:grid;gap:4px;max-height:200px;overflow:auto;padding:8px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
label.vallowi{display:flex;align-items:center;gap:8px;cursor:pointer}label.vallowi input{width:auto;margin:0}
/* status (header menu), banner */
.whost{display:grid;gap:6px;padding:0 6px 10px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.whostr{display:flex;gap:4px}
button.whostb{flex:1;gap:6px;min-height:32px;padding:4px 6px;border-radius:9px;font-size:.78rem;background:var(--surface);border:1px solid var(--border);box-shadow:none;color:var(--muted);font-weight:600}
button.whostb.on{color:var(--text);border-color:var(--acc);background:var(--acc-soft)}
.stdot{width:9px;height:9px;border-radius:50%;flex:none}.stdot.st-on{background:var(--ok)}.stdot.st-busy{background:var(--bad)}.stdot.st-invisible{background:transparent;box-shadow:inset 0 0 0 2px var(--muted)}
.whost input{margin:0;min-height:34px;font-size:.82rem}
.pban.img,.pbanpick.img{background-size:cover;background-position:center}
.pav.busy::after{content:"";position:absolute;inset-block-end:6%;inset-inline-end:6%;width:22%;height:22%;min-width:10px;min-height:10px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 3px var(--surface-2)}
.pstext{font-size:.86rem;margin:2px 0}
.pbanpick{height:110px;border-radius:14px;background:linear-gradient(135deg,var(--a,var(--acc)),color-mix(in srgb,var(--a,var(--acc)) 45%,#000))}
.vcardban{background-size:cover;background-position:center}.vcardst{font-size:.84rem}
.vpinned .ic{width:13px;height:13px;color:var(--acc);vertical-align:middle}
/* floating menus above the friends drawer (110) and boxes (100) */
.cmenu,.mpop,.vcard{z-index:120}.imgv{z-index:130}
/* who reacted (in the right-click menu) */
.cmwho{display:grid;gap:1px;max-height:148px;overflow:auto;padding:2px 2px 6px;margin-bottom:2px;border-bottom:1px solid var(--border)}
.cmwhoi{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:8px;font-size:.8rem}
.cmwhoi .grow{display:flex;flex-direction:column;min-width:0;line-height:1.35}.cmwhoi b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.cmwhoi small{font-size:.68rem}
.cmwhoi .rpe img.emo{width:18px;height:18px;margin:0}
/* motion: reactions (only new / changed ones), new voice messages, popovers leaving */
button.rchip{animation:none}button.rchip.new{animation:rpop .32s var(--spring) both}button.rchip.bump .num{display:inline-block;animation:rbump .3s var(--spring)}
@keyframes rpop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}@keyframes rbump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.vmsg.vin{animation:rowin .28s var(--ease) both}
.cmenu.out,.mpop.out,.vpop.out,.vcard.out,.vdev.out,.emop.out{animation:popout .16s ease forwards}.imgv.out{animation:popout .16s ease forwards}
@keyframes popout{to{opacity:0;transform:scale(.96) translateY(4px)}}
@media(prefers-reduced-motion:reduce){button.rchip.new,button.rchip.bump .num,.vmsg.vin{animation:none}}
/* settings: the side menu stays sticky (haspill's position:relative had turned its top:96px into a 96px push down);
   cards in two columns that each fill from the top (no gap under a short card) */
@media(min-width:760px){.setnav.haspill{position:sticky}}
@media(min-width:1024px){.settings .cols{display:block;columns:2;column-gap:14px}.settings .cols>.card{break-inside:avoid;margin:0 0 14px;display:block;width:100%}}
.whoit.whobad{position:relative;margin-top:9px;color:var(--bad)}.whoit.whobad::before{content:"";position:absolute;inset-inline:6px;top:-6px;height:1px;background:var(--border)}@media(hover:hover){.whoit.whobad:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)}}.whoit.whobad .chip{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}.whoit.whobad b{color:var(--bad)}
/* the app's screen picker (Discord's) */
.md.ssmd{width:min(100%,760px)}
.sspick{display:grid;gap:12px}
.sstabs{display:flex;gap:6px;padding:4px;border-radius:14px;background:var(--surface);border:1px solid var(--border);width:max-content}
.sstabs button{gap:6px;min-height:36px;padding:4px 14px;border-radius:10px;background:transparent;border:0;box-shadow:none;color:var(--muted);font-weight:700}
.sstabs button .ic{width:16px;height:16px}.sstabs button .num{font-size:.72rem;padding:0 6px;border-radius:8px;background:var(--surface-2)}
.sstabs button.on{background:var(--acc-soft);color:var(--text)}
.ssgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;max-height:min(52vh,460px);overflow:auto;padding:2px}
button.ssitem{display:grid;gap:6px;min-height:0;padding:6px;border-radius:14px;background:var(--surface);border:2px solid transparent;box-shadow:none;color:var(--text);font-weight:500;text-align:start;animation:whoit .3s var(--spring) both;animation-delay:calc(var(--i) * 25ms)}
button.ssitem.on{border-color:var(--acc);background:var(--acc-soft)}
@media(hover:hover){button.ssitem:hover{transform:translateY(-2px);filter:none;box-shadow:var(--shadow-soft)}}
.ssthumb{display:grid;place-items:center;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#000}.ssthumb img{width:100%;height:100%;object-fit:contain}.ssthumb .ic{width:30px;height:30px;color:var(--muted)}
.ssname{display:flex;align-items:center;gap:6px;font-size:.82rem;min-width:0}.ssname img{width:18px;height:18px;flex:none}.ssname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssopts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
label.ssaudio{margin:0;align-items:center}label.ssaudio input{margin:0}
.ssq{display:flex;align-items:center;gap:8px}.ssq .seg button{gap:4px}.ssq .seg button.lock{opacity:.7}.ssq .seg .ic{width:13px;height:13px}
@media(prefers-reduced-motion:reduce){button.ssitem{animation:none}}
.ssq .seg button{white-space:nowrap}
/* colour sets for each theme (Settings › Appearance): html[data-pal] picks one; none = the classic silver above */
html[data-pal="charcoal-blue"]:not(.light){--bg:radial-gradient(900px 620px at 88% -12%,rgba(61,126,255,0.26) 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,rgba(61,126,255,0.21) 0%,transparent 60%),linear-gradient(180deg,#2f2f34,#1f1f23);--surface:rgba(56,56,62,0.76);--surface-2:rgba(66,66,73,.95);--border:rgba(85,85,93,.95);--border-hi:rgba(61,126,255,.5);--text:#f1f2f4;--muted:#a9adb4;--acc:#3d7eff;--acc2:#6a9cff;--acc-soft:rgba(61,126,255,.14);--on-acc:#0d1426;--orb:rgba(61,126,255,.16);--glow:61,126,255;--shadow:0 24px 60px rgba(0,0,0,0.5);--shadow-soft:0 10px 26px rgba(0,0,0,0.38)}
html[data-pal="charcoal-blue"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(61,126,255,0.22) 0%,transparent 70%);pointer-events:none}
html[data-pal="mint"]:not(.light){--bg:radial-gradient(900px 620px at 88% -12%,rgba(37,199,122,0.26) 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,rgba(37,199,122,0.21) 0%,transparent 60%),linear-gradient(180deg,#151a1f,#111418);--surface:rgba(26,32,38,0.76);--surface-2:rgba(35,42,49,.95);--border:rgba(58,66,74,.95);--border-hi:rgba(37,199,122,.5);--text:#e7fff2;--muted:#a3abb3;--acc:#25c77a;--acc2:#b7f3d0;--acc-soft:rgba(37,199,122,.14);--on-acc:#0b1410;--orb:rgba(37,199,122,.16);--glow:37,199,122;--shadow:0 24px 60px rgba(0,0,0,0.5);--shadow-soft:0 10px 26px rgba(0,0,0,0.38)}
html[data-pal="mint"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(37,199,122,0.22) 0%,transparent 70%);pointer-events:none}
html[data-pal="crimson"]:not(.light){--bg:radial-gradient(900px 620px at 88% -12%,rgba(203,44,91,0.22) 0%,transparent 62%),linear-gradient(180deg,#0b0b0b,#000000);--surface:rgba(20,20,20,0.78);--surface-2:rgba(30,30,30,.95);--border:rgba(42,42,42,.95);--border-hi:rgba(203,44,91,.5);--text:#eeeeee;--muted:#a9a9a9;--acc:#cb2c5b;--acc2:#a8204a;--acc-soft:rgba(203,44,91,.13);--on-acc:#ffffff;--orb:rgba(203,44,91,.14);--glow:203,44,91;--shadow:0 24px 60px rgba(0,0,0,0.6);--shadow-soft:0 10px 26px rgba(0,0,0,0.45)}
html[data-pal="crimson"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(203,44,91,0.16) 0%,transparent 70%);pointer-events:none}
html.light[data-pal="aqua-carmin"]{--bg:radial-gradient(900px 620px at 88% -12%,rgba(212,31,38,0.14) 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,rgba(149,217,192,0.11) 0%,transparent 60%),linear-gradient(180deg,#ffffff,#eef8f4);--surface:rgba(255,255,255,0.86);--surface-2:rgba(244,251,248,.95);--border:rgba(207,238,226,.95);--border-hi:rgba(212,31,38,.5);--text:#1d1d1f;--muted:#5c5c62;--acc:#d41f26;--acc2:#b5171d;--acc-soft:rgba(212,31,38,.14);--on-acc:#ffffff;--orb:rgba(149,217,192,.16);--glow:212,31,38;--shadow:0 24px 60px rgba(0,0,0,0.12);--shadow-soft:0 10px 26px rgba(0,0,0,0.07)}
html[data-pal="aqua-carmin"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(149,217,192,0.16) 0%,transparent 70%);pointer-events:none}
html.light[data-pal="persian"]{--bg:radial-gradient(900px 620px at 88% -12%,rgba(39,24,126,0.14) 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,rgba(143,132,232,0.11) 0%,transparent 60%),linear-gradient(180deg,#f7f7ff,#e8e7fb);--surface:rgba(255,255,255,0.86);--surface-2:rgba(239,238,254,.95);--border:rgba(220,217,245,.95);--border-hi:rgba(39,24,126,.5);--text:#1a1056;--muted:#55507a;--acc:#27187e;--acc2:#4a35c4;--acc-soft:rgba(39,24,126,.14);--on-acc:#ffffff;--orb:rgba(143,132,232,.16);--glow:39,24,126;--shadow:0 24px 60px rgba(0,0,0,0.12);--shadow-soft:0 10px 26px rgba(0,0,0,0.07)}
html[data-pal="persian"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(143,132,232,0.16) 0%,transparent 70%);pointer-events:none}
html[data-pal="navy-cream"]:not(.light){--bg:radial-gradient(900px 620px at 88% -12%,rgba(58,92,176,.35) 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,rgba(252,241,208,.06) 0%,transparent 60%),linear-gradient(180deg,#0d1c42,#010736 70%);--surface:rgba(13,28,66,.74);--surface-2:rgba(34,57,111,.94);--border:rgba(34,57,111,.95);--border-hi:rgba(252,241,208,.45);--text:#fcf1d0;--muted:#bdb9ad;--acc:#fcf1d0;--acc2:#ecd9a4;--acc-soft:rgba(252,241,208,.12);--on-acc:#010736;--orb:rgba(58,92,176,.2);--glow:252,241,208;--shadow:0 24px 60px rgba(0,2,20,.55);--shadow-soft:0 10px 26px rgba(0,2,20,.4)}
html[data-pal="navy-cream"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(58,92,176,.3) 0%,transparent 70%);pointer-events:none}
html.light[data-pal="latte"]{--bg:radial-gradient(900px 620px at 88% -12%,rgba(136,57,239,0.12) 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,rgba(234,118,203,0.08) 0%,transparent 60%),linear-gradient(180deg,#eff1f5,#dce0e8);--surface:rgba(255,255,255,0.78);--surface-2:rgba(230,233,239,.94);--border:rgba(204,208,218,0.9);--border-hi:rgba(136,57,239,.5);--text:#4c4f69;--muted:#5c5f77;--acc:#8839ef;--acc2:#1e66f5;--acc-soft:rgba(136,57,239,.16);--on-acc:#ffffff;--orb:rgba(234,118,203,.16);--glow:136,57,239;--shadow:0 24px 60px rgba(0,0,0,0.12);--shadow-soft:0 10px 26px rgba(0,0,0,0.08)}
html[data-pal="latte"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(234,118,203,.18) 0%,transparent 70%);pointer-events:none}
html[data-pal="latte"] .tiles>.tile:nth-child(8n+1){--acc:#1e66f5;--acc2:#1e66f5;--acc-soft:rgba(30,102,245,.16)}
html[data-pal="latte"] .tiles>.tile:nth-child(8n+2){--acc:#8839ef;--acc2:#8839ef;--acc-soft:rgba(136,57,239,.16)}
html[data-pal="latte"] .tiles>.tile:nth-child(8n+3){--acc:#40a02b;--acc2:#40a02b;--acc-soft:rgba(64,160,43,.16)}
html[data-pal="latte"] .tiles>.tile:nth-child(8n+4){--acc:#fe640b;--acc2:#fe640b;--acc-soft:rgba(254,100,11,.16)}
html[data-pal="latte"] .tiles>.tile:nth-child(8n+5){--acc:#179299;--acc2:#179299;--acc-soft:rgba(23,146,153,.16)}
html[data-pal="latte"] .tiles>.tile:nth-child(8n+6){--acc:#d20f39;--acc2:#d20f39;--acc-soft:rgba(210,15,57,.16)}
html[data-pal="latte"] .tiles>.tile:nth-child(8n+7){--acc:#df8e1d;--acc2:#df8e1d;--acc-soft:rgba(223,142,29,.16)}
html[data-pal="latte"] .tiles>.tile:nth-child(8n+8){--acc:#ea76cb;--acc2:#ea76cb;--acc-soft:rgba(234,118,203,.16)}
html[data-pal="nord"]:not(.light){--bg:radial-gradient(900px 620px at 88% -12%,rgba(136,192,208,0.2) 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,rgba(180,142,173,0.14) 0%,transparent 60%),linear-gradient(180deg,#2e3440,#242933);--surface:rgba(59,66,82,0.72);--surface-2:rgba(67,76,94,.94);--border:rgba(76,86,106,0.7);--border-hi:rgba(136,192,208,.5);--text:#eceff4;--muted:#c0c8d6;--acc:#88c0d0;--acc2:#81a1c1;--acc-soft:rgba(136,192,208,.16);--on-acc:#242933;--orb:rgba(180,142,173,.16);--glow:136,192,208;--shadow:0 24px 60px rgba(0,0,0,0.45);--shadow-soft:0 10px 26px rgba(0,0,0,0.32)}
html[data-pal="nord"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(180,142,173,.18) 0%,transparent 70%);pointer-events:none}
html[data-pal="nord"] .tiles>.tile:nth-child(8n+1){--acc:#88c0d0;--acc2:#88c0d0;--acc-soft:rgba(136,192,208,.16)}
html[data-pal="nord"] .tiles>.tile:nth-child(8n+2){--acc:#81a1c1;--acc2:#81a1c1;--acc-soft:rgba(129,161,193,.16)}
html[data-pal="nord"] .tiles>.tile:nth-child(8n+3){--acc:#a3be8c;--acc2:#a3be8c;--acc-soft:rgba(163,190,140,.16)}
html[data-pal="nord"] .tiles>.tile:nth-child(8n+4){--acc:#d08770;--acc2:#d08770;--acc-soft:rgba(208,135,112,.16)}
html[data-pal="nord"] .tiles>.tile:nth-child(8n+5){--acc:#b48ead;--acc2:#b48ead;--acc-soft:rgba(180,142,173,.16)}
html[data-pal="nord"] .tiles>.tile:nth-child(8n+6){--acc:#ebcb8b;--acc2:#ebcb8b;--acc-soft:rgba(235,203,139,.16)}
html[data-pal="nord"] .tiles>.tile:nth-child(8n+7){--acc:#8fbcbb;--acc2:#8fbcbb;--acc-soft:rgba(143,188,187,.16)}
html[data-pal="nord"] .tiles>.tile:nth-child(8n+8){--acc:#bf616a;--acc2:#bf616a;--acc-soft:rgba(191,97,106,.16)}
html[data-pal="mocha"]:not(.light){--bg:radial-gradient(900px 620px at 88% -12%,rgba(203,166,247,0.2) 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,rgba(137,180,250,0.14) 0%,transparent 60%),linear-gradient(180deg,#1e1e2e,#11111b);--surface:rgba(49,50,68,0.72);--surface-2:rgba(69,71,90,.94);--border:rgba(88,91,112,0.7);--border-hi:rgba(203,166,247,.5);--text:#cdd6f4;--muted:#a6adc8;--acc:#cba6f7;--acc2:#f5c2e7;--acc-soft:rgba(203,166,247,.16);--on-acc:#11111b;--orb:rgba(137,180,250,.16);--glow:203,166,247;--shadow:0 24px 60px rgba(0,0,0,0.45);--shadow-soft:0 10px 26px rgba(0,0,0,0.32)}
html[data-pal="mocha"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(137,180,250,.18) 0%,transparent 70%);pointer-events:none}
html[data-pal="mocha"] .tiles>.tile:nth-child(8n+1){--acc:#89b4fa;--acc2:#89b4fa;--acc-soft:rgba(137,180,250,.16)}
html[data-pal="mocha"] .tiles>.tile:nth-child(8n+2){--acc:#cba6f7;--acc2:#cba6f7;--acc-soft:rgba(203,166,247,.16)}
html[data-pal="mocha"] .tiles>.tile:nth-child(8n+3){--acc:#a6e3a1;--acc2:#a6e3a1;--acc-soft:rgba(166,227,161,.16)}
html[data-pal="mocha"] .tiles>.tile:nth-child(8n+4){--acc:#fab387;--acc2:#fab387;--acc-soft:rgba(250,179,135,.16)}
html[data-pal="mocha"] .tiles>.tile:nth-child(8n+5){--acc:#94e2d5;--acc2:#94e2d5;--acc-soft:rgba(148,226,213,.16)}
html[data-pal="mocha"] .tiles>.tile:nth-child(8n+6){--acc:#f38ba8;--acc2:#f38ba8;--acc-soft:rgba(243,139,168,.16)}
html[data-pal="mocha"] .tiles>.tile:nth-child(8n+7){--acc:#f9e2af;--acc2:#f9e2af;--acc-soft:rgba(249,226,175,.16)}
html[data-pal="mocha"] .tiles>.tile:nth-child(8n+8){--acc:#f5c2e7;--acc2:#f5c2e7;--acc-soft:rgba(245,194,231,.16)}
html[data-pal="tokyo"]:not(.light){--bg:radial-gradient(900px 620px at 88% -12%,rgba(122,162,247,0.2) 0%,transparent 62%),radial-gradient(800px 600px at -5% 105%,rgba(125,207,255,0.14) 0%,transparent 60%),linear-gradient(180deg,#1a1b26,#13141c);--surface:rgba(36,40,59,0.72);--surface-2:rgba(41,46,66,.94);--border:rgba(65,72,104,0.7);--border-hi:rgba(122,162,247,.5);--text:#c0caf5;--muted:#9aa5ce;--acc:#7aa2f7;--acc2:#bb9af7;--acc-soft:rgba(122,162,247,.16);--on-acc:#13141c;--orb:rgba(125,207,255,.16);--glow:122,162,247;--shadow:0 24px 60px rgba(0,0,0,0.45);--shadow-soft:0 10px 26px rgba(0,0,0,0.32)}
html[data-pal="tokyo"] .hero::after{content:"";position:absolute;inset:auto auto -45% -15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(125,207,255,.18) 0%,transparent 70%);pointer-events:none}
html[data-pal="tokyo"] .tiles>.tile:nth-child(8n+1){--acc:#7aa2f7;--acc2:#7aa2f7;--acc-soft:rgba(122,162,247,.16)}
html[data-pal="tokyo"] .tiles>.tile:nth-child(8n+2){--acc:#bb9af7;--acc2:#bb9af7;--acc-soft:rgba(187,154,247,.16)}
html[data-pal="tokyo"] .tiles>.tile:nth-child(8n+3){--acc:#9ece6a;--acc2:#9ece6a;--acc-soft:rgba(158,206,106,.16)}
html[data-pal="tokyo"] .tiles>.tile:nth-child(8n+4){--acc:#ff9e64;--acc2:#ff9e64;--acc-soft:rgba(255,158,100,.16)}
html[data-pal="tokyo"] .tiles>.tile:nth-child(8n+5){--acc:#7dcfff;--acc2:#7dcfff;--acc-soft:rgba(125,207,255,.16)}
html[data-pal="tokyo"] .tiles>.tile:nth-child(8n+6){--acc:#f7768e;--acc2:#f7768e;--acc-soft:rgba(247,118,142,.16)}
html[data-pal="tokyo"] .tiles>.tile:nth-child(8n+7){--acc:#e0af68;--acc2:#e0af68;--acc-soft:rgba(224,175,104,.16)}
html[data-pal="tokyo"] .tiles>.tile:nth-child(8n+8){--acc:#73daca;--acc2:#73daca;--acc-soft:rgba(115,218,202,.16)}
/* the mouse's light: the colour of the theme's top corner light */
html[data-pal="charcoal-blue"]:not(.light){--glow:61,126,255}
html[data-pal="mint"]:not(.light){--glow:37,199,122}
html[data-pal="crimson"]:not(.light){--glow:203,44,91}
html.light[data-pal="aqua-carmin"]{--glow:212,31,38}
html.light[data-pal="persian"]{--glow:39,24,126}
html[data-pal="navy-cream"]:not(.light){--glow:58,92,176}
html.light[data-pal="latte"]{--glow:136,57,239}
html[data-pal="nord"]:not(.light){--glow:136,192,208}
html[data-pal="mocha"]:not(.light){--glow:203,166,247}
html[data-pal="tokyo"]:not(.light){--glow:122,162,247}
html[data-pal] .cursorglow{background:radial-gradient(closest-side,rgba(var(--glow),.2) 0%,rgba(var(--glow),.12) 30%,rgba(var(--glow),.05) 60%,transparent 100%)}
.avcols{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}.avcols>span{flex-basis:100%}
button.avcol{width:26px;height:26px;min-height:0;padding:0;border-radius:50%;border:2px solid transparent;box-shadow:none;color:#fff}button.avcol .ic{width:14px;height:14px}button.avcol.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
.ltabs{margin:0 0 12px;display:flex;flex-wrap:wrap}.ltabs button{display:inline-flex;align-items:center;gap:6px}.ltabs .ic{width:16px;height:16px}
.lcard{position:relative}.lbadge{position:absolute;top:8px;inset-inline-start:8px;z-index:1;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700;background:rgba(0,0,0,.62);color:#fff;backdrop-filter:blur(6px)}
.lbadge .ic{width:12px;height:12px}.lbadge.ok{background:rgba(22,163,74,.85)}.lbadge.up{background:var(--acc);color:var(--on-acc)}
.lgbtns{gap:8px;flex-wrap:wrap;align-items:center}.lprog{display:grid;gap:6px}.lprog .bar{height:6px}.lgprog{min-width:220px;flex:1}
.pill.wait{background:rgba(234,179,8,.16);color:#eab308}.rvimg{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}.rvd{white-space:pre-wrap;margin-top:4px;max-height:4.5em;overflow:hidden}
.nbadge2{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--acc);color:var(--on-acc);font-size:.78rem;vertical-align:middle}
.palpick{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.palpick button{min-height:40px;padding:6px 12px 6px 10px;gap:8px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);box-shadow:none;font-weight:500}
.palpick button.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft)}
.palpick .dots{display:inline-flex}.palpick .dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(128,128,128,.35);margin-inline-start:-4px}.palpick .dots i:first-child{margin-inline-start:0}

/* the dock's folder: the side sections */
.fpop{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.6rem + env(safe-area-inset-bottom));z-index:60;width:max-content;max-width:calc(100vw - 24px);padding:10px;border-radius:1.6rem;
  background:var(--surface);border:1px solid var(--border-hi);box-shadow:var(--shadow);backdrop-filter:blur(18px);animation:fpin .22s var(--ease) both}
.fpop.out{animation:fpout .16s ease both}@keyframes fpin{from{opacity:0;transform:translate(-50%,10px) scale(.96)}}@keyframes fpout{to{opacity:0;transform:translate(-50%,8px) scale(.97)}}
.fgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;width:calc(var(--n,4) * 84px + (var(--n,4) - 1) * 4px);max-width:100%}.fgrid>button.fitem{width:84px}
button.fitem{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;min-height:0;background:none;border:0;box-shadow:none;color:var(--text);font-size:.78rem;font-weight:600;border-radius:14px}
button.fitem .chip{width:46px;height:46px;border-radius:14px}button.fitem.on .chip{background:var(--acc);color:var(--on-acc)}
@media(hover:hover){button.fitem:hover{background:var(--surface-2);transform:none}}
@media(min-width:641px){button.fitem.fmob{display:none}}
.lbrowse{display:grid;gap:14px}.lbrowse>.lbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}.lbrowse>.lbar>input{flex:0 1 200px;width:auto;min-width:0;margin:0;min-height:42px}.lbrowse>.lbar>button{min-height:42px}
button.gsel{display:flex;align-items:center;gap:10px;width:100%;padding:6px 12px 6px 6px;min-height:52px;margin:0 0 12px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--text);text-align:start;justify-content:flex-start;box-shadow:none}
button.gsel b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button.gsel>.ic{width:18px;height:18px;color:var(--muted)}
.gsth{flex:none;width:58px;height:27px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}.gsth img{width:100%;height:100%;object-fit:cover}.gsth .ic{width:18px;height:18px}
.gspop{position:fixed;z-index:130;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:var(--surface);border:1px solid var(--border-hi);box-shadow:var(--shadow);backdrop-filter:blur(18px);animation:fpin2 .18s var(--ease) both}
.gspop.out{animation:fpout2 .14s ease both}@keyframes fpin2{from{opacity:0;transform:translateY(-6px)}}@keyframes fpout2{to{opacity:0;transform:translateY(-4px)}}
.gslist{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto;overscroll-behavior:contain}
button.gsrow{flex:none;display:flex;align-items:center;gap:10px;padding:5px 10px 5px 6px;min-height:40px;border-radius:11px;background:none;border:0;box-shadow:none;color:var(--text);text-align:start;justify-content:flex-start}
button.gsrow b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button.gsrow>.ic{width:16px;height:16px;color:var(--acc)}button.gsrow.on{background:var(--acc-soft)}
@media(hover:hover){button.gsrow:hover{background:var(--surface-2);transform:none}button.gsel:hover{border-color:var(--border-hi);transform:none}}
.ladd .govsw>.grow{display:flex;flex-direction:column;gap:2px}
.lobbyonly .whero .ltabs,.lobbyonly .whero .lbar,.lobbyonly .whero .ftools{display:none}
/* the admin's game upload: a wide dialog; the folder's files (left out: struck through), the files added, the extras */
.md:has(.pkup){width:min(100%,880px)}.pkup{display:grid;gap:8px;min-width:0}.pkup select,.pkup input:not([type=checkbox]){width:100%;min-width:0}
.pktree,.pkadds{max-height:42vh;overflow:auto;border:1px solid var(--border-hi,rgba(255,255,255,.1));border-radius:10px;padding:4px;background:rgba(0,0,0,.12)}.pkadds:empty{display:none}
.pkrow{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 4px 0 calc(4px + var(--d,0) * 18px);border-radius:8px}.pkrow:hover{background:rgba(255,255,255,.04)}
.pkrow.off{background:rgba(239,68,68,.16)}.pkrow.off .pkname,.pkrow.off .num{color:#f87171}.pkrow.off>button.ghost{color:#f87171}  /* left out: the whole row red */.pkrow .num{flex:none;white-space:nowrap}
.pkup button.pkname{flex:1;min-width:0;min-height:0;width:auto;display:flex;align-items:center;justify-content:flex-start;gap:6px;background:none;border:0;box-shadow:none;padding:4px 2px;color:inherit;font:inherit;text-align:start;cursor:pointer}
.pkup button.pkname:disabled{cursor:default;opacity:1}.pkname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pkname .ic svg{width:15px;height:15px}
.pkrow>button.ghost{flex:none;min-height:0;width:30px;height:30px;padding:0;border-radius:8px;background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}.pkrow>button.ghost:hover{background:rgba(255,80,80,.14);color:#ff7a7a}.pkrow>button.ghost .ic svg{width:16px;height:16px}
.pkadd{display:flex;gap:8px;align-items:center}.pkadd input{flex:1}.pkadd button{flex:none;white-space:nowrap}
.pktick{display:flex;gap:8px;align-items:flex-start;padding:4px 2px;cursor:pointer}.pktick b{font-size:.9rem;font-weight:600}
.pktick input{flex:none;width:15px;height:15px;min-height:0;margin:3px 0 0;padding:0;border-radius:4px;accent-color:var(--accent,#7c5cff)}.pktick>span{flex:1;min-width:0;display:grid;gap:2px}.pktick>span>*{overflow-wrap:anywhere}
@media (max-width:560px){.pkadd{flex-wrap:wrap}.pkadd button{flex:1}}

/* a lobby you're in: its game's art, the players and the chat side by side, the host's settings folded; the lobby list,
   join-by-code and the page's header go away meanwhile */
.lobbyonly.inlobby .whero,.lobby.in>.lbrowse{display:none}
.lbv{display:grid;gap:14px}
.lbhero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:18px}
.lbhero.art::before{content:"";position:absolute;inset:-30px;background:var(--art) center/cover;filter:blur(28px) saturate(1.3);opacity:.35;z-index:0}
.lbhero>*{position:relative;z-index:1}
.lbcover{width:184px;aspect-ratio:460/215;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.lbcover img{width:100%;height:100%;object-fit:cover}.lbcover .ic svg{width:34px;height:34px}
.lbinfo{min-width:0;display:grid;gap:4px}.lbgame{font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbinfo h3{margin:0;font-size:1.35rem;overflow-wrap:anywhere}.lbmeta{gap:8px;margin-top:4px}
.lbcount{font-size:.85rem;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.08)}
button.lbcodebtn{min-height:32px;padding:4px 12px;letter-spacing:.08em}
.lbacts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}.lbacts button{flex:1 1 140px}
.lbcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px}
.lbbox{display:flex;flex-direction:column;gap:8px;padding:14px;min-height:0}.lbtitle{display:flex;align-items:center;gap:8px;font-weight:700}.lbtitle .ic svg{width:18px;height:18px}
.lbplayers{display:grid;gap:6px}.lbp{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.04)}
.lbhost{font-size:.75rem;padding:2px 8px;border-radius:99px;background:var(--acc-soft);color:var(--acc)}
.lbchat{height:340px}.lbmsgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:2px}
.lbm{max-width:85%;align-self:flex-start;display:grid;gap:1px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.06)}.lbm.me{align-self:flex-end;background:var(--acc-soft)}
.lbm b{font-size:.75rem;color:var(--muted)}.lbm span{overflow-wrap:anywhere}.lbm small{font-size:.68rem;justify-self:end}
.lbempty{margin:auto}.lbsay{flex-wrap:nowrap}.lbsay input{margin:0;min-height:40px}.lbsay button{flex:none;min-height:40px;padding:0 14px}
.lbset{padding:0}.lbset summary{display:flex;align-items:center;gap:8px;padding:14px;cursor:pointer;font-weight:600;list-style:none}.lbset summary::-webkit-details-marker{display:none}
.lbsetb{display:grid;gap:10px;padding:0 14px 14px}.lbrow{display:flex;align-items:center;gap:12px;cursor:pointer}.lbrow select{width:auto;margin:0;min-height:38px}
.lbrow .grow{display:grid;gap:2px}.lbcode{flex-wrap:nowrap}.lbcode input{margin:0}
@media (max-width:760px){.lbcols{grid-template-columns:minmax(0,1fr)}.lbhero{grid-template-columns:minmax(0,1fr)}.lbcover{width:100%}}
.pksrcs{display:grid;gap:10px}button.pksrc{display:flex;gap:14px;align-items:flex-start;justify-content:flex-start;text-align:start;padding:14px 16px;border-radius:14px;min-height:0;white-space:normal}
button.pksrc>.ic svg{width:22px;height:22px;margin-top:2px}button.pksrc>span{display:grid;gap:4px;font-weight:400}button.pksrc b{font-weight:700}
/* a button with an icon keeps its label on one line (a long one wrapped under the icon, two-line, lopsided) */
button:where(:has(>.ic)){white-space:nowrap}  /* :where: no weight, so a button made to wrap (.pksrc…) still does */
.lgrid>.fempty{grid-column:1/-1}  /* an empty grid's card spans the row (it was one column wide; its button spilled out) */
.pkurl{display:grid;gap:10px;min-width:min(520px,80vw)}.pklinks{display:grid;gap:8px}.pklink{display:flex;align-items:center;gap:8px}
.pklink>span{flex:none;min-width:48px}.pklink input{flex:1;margin:0;min-width:0;min-height:42px}.pklink>button.ghost{flex:none;min-height:0;width:32px;height:32px;padding:0;background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
.pklink>button.ghost:hover{color:#ff7a7a;background:rgba(255,80,80,.12)}button.pkaddpart{justify-self:start;min-height:36px}
.md:has(.pkurl){width:min(100%,600px)}
.pwbox{display:grid;gap:8px}.pwbox input{margin:0}.pwrecent{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
button.pwchip{min-height:30px;padding:3px 10px;border-radius:99px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* a library game's version on its cover (the status badge has the other corner) */
.lcover{position:relative}.lver{position:absolute;bottom:8px;inset-inline-end:8px;z-index:1;padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:#fff;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18)}
.lgver{display:grid;gap:4px}.lgver .sub{margin:0}
/* a card opening into its page: a ring over its cover while what the page shows is fetched */
.lcard.lopening .lcover::after{content:"";position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .7s linear infinite;z-index:2}
.lcard.lopening .lcover img{filter:brightness(.7)}
@keyframes spin{to{transform:rotate(360deg)}}
/* voice popped out into its own window: the section is the whole window */
html.vpopwin,html.vpopwin body{overflow:hidden}html.vpopwin body{padding:0!important;margin:0}html.vpopwin #app{max-width:none;width:100%;padding:0;margin:0;height:100vh}
html.vpopwin body{display:block}html.vpopwin .vview{--vw:100%;width:100%;max-width:none!important;height:100vh;min-height:0;margin:0!important;border-radius:0;border:0;box-sizing:border-box}
.vview>.vpopped{grid-column:1/-1;align-self:center;justify-self:center;max-width:460px;display:grid;justify-items:center;gap:10px;padding:48px 28px;text-align:center;border:0;background:none}.vpopped .row{justify-content:center}button.vpopb{margin-top:auto}
/* the noise gate's panel: the mic's level, green while it's sent, and the line (the threshold) to drag */
.vgatepop{position:fixed;z-index:200;display:grid;gap:10px;padding:14px;border-radius:16px;box-shadow:var(--shadow)}
.vgrow{display:flex;gap:10px;align-items:center;cursor:pointer}.vgrow .grow{display:grid;gap:2px}
.vgmeter{position:relative;height:24px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden}.vgmeter.off{opacity:.45}
.vgfill{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:rgba(255,255,255,.25);transition:width .06s linear}.vgfill.open{background:var(--ok,#16a34a)}
.vgline{position:absolute;inset-block:0;width:3px;margin-inline-start:-1px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.6);pointer-events:none}
.vgmeter input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;min-height:0}
.vgfoot{gap:6px}button.vgateb.on{color:var(--ok,#16a34a);border-color:rgba(22,163,74,.5)}
/* «فضای ابری من» */
.drive.dhot{outline:2px dashed var(--acc);outline-offset:6px;border-radius:var(--r)}
.dgauge{display:grid;gap:10px;margin-bottom:12px}.dgtop{gap:10px;align-items:center}.dgnum{font-size:1.25rem}.dgpct{font-size:1.4rem;color:var(--acc)}.dgpct.warn{color:var(--bad)}
.dbar{display:flex;gap:2px;height:12px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}.dbar>i{display:block;height:100%;transition:width .5s var(--ease)}
.dbar.warn{border-color:var(--bad)}
.k-image{background:#4f9dff}.k-video{background:#ff5d8f}.k-music{background:#b46cff}.k-doc{background:#ffb02e}.k-zip{background:#2ec4a6}.k-app{background:#7d8cff}.k-file,.k-other{background:#8a94a6}.k-trash{background:repeating-linear-gradient(45deg,var(--bad) 0 4px,transparent 4px 8px)}
.dleg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.84rem}.dleg>span{display:inline-flex;align-items:center;gap:5px}.dleg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.dgfoot{justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem}.dgfoot button{width:auto}
.dcrumbs{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:14px 0 8px}
.dpath{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}.dsep{color:var(--muted);padding:0 2px}
.dcrumb{width:auto;min-height:32px;padding:4px 10px;border-radius:10px;background:none;border-color:transparent;box-shadow:none;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.dcrumb.on{color:var(--text)}.dcrumb .ic{width:16px;height:16px}button.dcrumb:hover{background:var(--surface-2)}
.dacts{gap:6px}.dacts button{width:auto}.dacts button.on{border-color:var(--acc);color:var(--acc)}
.dcount{margin-inline-start:6px;background:var(--bad);color:#fff;border-radius:99px;padding:0 7px;font-size:.75rem}
.dtool{gap:6px;align-items:center;justify-content:flex-end;margin-bottom:8px}.dsort{width:auto;min-height:34px;padding:4px 10px;font-size:.86rem}
.dsel{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;margin-bottom:10px;border-radius:1rem;background:var(--surface);border:1px solid var(--acc);box-shadow:var(--shadow-soft);backdrop-filter:var(--blur)}.dsel button{width:auto}
.dtick{flex:none;margin:0}
.file.on{border-color:var(--acc);background:var(--acc-soft)}
.exp.soon{color:var(--bad);font-weight:600}.dfpath{display:inline-flex;align-items:center;gap:3px}.dfpath .ic{width:12px;height:12px}
.dfold{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:1.3rem;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;animation:rowin .3s var(--ease) both;animation-delay:calc(var(--i,0)*40ms);transition:border-color .2s,transform .2s var(--ease)}
.dfold:hover,.dfold.hot{border-color:var(--acc);transform:translateY(-1px)}.dfold.hot{background:var(--acc-soft)}.dfold .n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dfold button{width:auto;flex:none}
.dnote{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:1rem;border:1px dashed var(--bad);font-size:.88rem}.dnote button{width:auto}
.dmenu{display:grid;gap:8px}.dmenu button{justify-content:flex-start}
/* grid view: cards with a picture on top */
.files.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.files.grid .file{display:flex;flex-direction:column}.files.grid .file .head{flex-wrap:wrap;position:relative}
.files.grid .file .head>.chip,.files.grid .file .head>.thumb{order:-1;width:100%;height:120px;border-radius:1rem;object-fit:cover}.files.grid .file .head>.chip .ic{width:40px;height:40px}
.files.grid .file .dtick{position:absolute;top:8px;inset-inline-start:8px;z-index:1}
.files.grid .file .acts{margin-top:auto;padding-top:10px}.files.grid .file .acts>*{flex:1 1 40%}
.dfolds{grid-column:1/-1;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.drive #drop{padding:16px 12px}.drive #drop>.ic{width:26px;height:26px;margin-bottom:2px}
.dexp{white-space:nowrap}
/* home: the slider (homeSlider) */
.hslider{margin:14px 0 4px}
.hstrack{position:relative;display:grid;min-height:330px;border-radius:28px;overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.hsl{grid-area:1/1;position:relative;display:flex;align-items:center;gap:28px;padding:34px 40px;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s;
  background:radial-gradient(60% 95% at 12% 50%,var(--hs),transparent 62%),radial-gradient(50% 80% at 100% 0,var(--hs3,transparent),transparent 60%)}
.hsl.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.hstx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hsl>*{transform:translateY(14px);opacity:0;transition:transform .7s var(--ease),opacity .6s var(--ease)}.hsl.on>*{transform:none;opacity:1}.hsl.on>.hsart{transition-delay:.12s}
.hseb{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;background:color-mix(in srgb,var(--hs1) 18%,transparent);color:var(--hs1);font-size:.8rem;font-weight:700}.hseb .ic{width:14px;height:14px}
.hslider{font-family:Estedad,Vazir,system-ui,Tahoma,sans-serif}.hslider button{font-family:inherit}
.hstx h2{margin:0;font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.35;font-weight:850;letter-spacing:-.015em}.hstx p{margin:0;color:var(--muted);font-size:1rem;line-height:1.9;max-width:520px}
.hspts{display:flex;flex-wrap:wrap;gap:8px}.hspts>span{display:inline-flex;align-items:center;gap:8px;padding:4px;border-radius:99px;padding-inline:5px 12px;background:color-mix(in srgb,var(--hs1) 9%,var(--surface-2));border:1px solid color-mix(in srgb,var(--hs1) 28%,var(--border));font-size:.84rem;font-weight:600}
.hspi{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--hs1),var(--hs2));color:#fff;box-shadow:0 4px 12px -4px var(--hs1)}.hspi .ic{width:14px;height:14px}
.hsbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}.hsbtns>button{width:auto;padding-inline:20px}
.hsart{flex:none;width:min(40%,400px);display:grid;place-items:center}
.hscard{width:100%;padding:16px;border-radius:22px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--border);backdrop-filter:var(--blur);box-shadow:0 30px 60px -25px rgba(0,0,0,.6)}
.hshd{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);margin-bottom:12px}.hshd>span{display:inline-flex;align-items:center;gap:5px}.hshd .ic{width:15px;height:15px}
.hslive{padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--hs1) 20%,transparent);color:var(--hs1);font-weight:700;font-size:.72rem}
.hsppl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hsp{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:16px;background:var(--surface-2);min-width:0}
.hsp small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hsp.on .av{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--hs1);animation:hspk 1.6s ease-in-out infinite}
@keyframes hspk{50%{box-shadow:0 0 0 3px var(--surface),0 0 0 9px color-mix(in srgb,var(--hs1) 50%,transparent)}}
.hsp.empty{opacity:.55;border:1px dashed var(--border);background:none}.hsadd{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px dashed var(--muted)}
.hsctl{display:flex;justify-content:center;gap:10px;margin-top:12px}.hsctl i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2)}.hsctl i.bad{background:#e5484d;color:#fff}.hsctl .ic{width:18px;height:18px}
.hscovers{display:flex;gap:10px;width:100%}.hscov{flex:1;position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(160deg,var(--c,#6c7bff),#111);box-shadow:0 24px 40px -20px rgba(0,0,0,.7)}
.hscov:nth-child(2){transform:translateY(-14px)}.hscov img{width:100%;height:100%;object-fit:cover}.hscov b{position:absolute;inset:auto 0 0;padding:20px 8px 8px;font-size:.78rem;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hscloud{display:grid;place-items:center;padding:24px}
.hsring{--p:0;width:170px;height:170px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--hs1) calc(var(--p)*1%),var(--surface-2) 0)}
.hsring>div{width:136px;height:136px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.hsring b{font-size:1.9rem}.hsring small{color:var(--muted);font-size:.78rem}
.hsprices{display:grid;gap:8px}.hspr{display:flex;align-items:baseline;gap:8px;padding:10px 12px;border-radius:14px;background:var(--surface-2)}.hspr span{flex:1}.hspr b{font-size:1.1rem}
.hsplayer{padding:0;overflow:hidden}.hsscr{height:150px;display:grid;place-items:center;background:radial-gradient(60% 80% at 50% 40%,color-mix(in srgb,var(--hs1) 45%,#000),#0a0a0d)}.hsscr .ic{width:46px;height:46px;color:#fff}
.hspbar{height:4px;margin:12px 14px;border-radius:9px;background:var(--surface-2);overflow:hidden}.hspbar i{display:block;height:100%;width:38%;background:var(--hs1)}.hsplayer .hshd{margin:0;padding:0 14px 12px}
.hsboard{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:10px;max-width:260px}.hsboard i{aspect-ratio:1;background:color-mix(in srgb,var(--hs1) 12%,var(--surface-2));position:relative}.hsboard i.d{background:color-mix(in srgb,var(--hs1) 40%,var(--surface))}
.hsboard i.pc::after,.hsboard i.pc2::after{content:"";position:absolute;inset:22%;border-radius:50%;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.4)}.hsboard i.pc2::after{background:#222;border:2px solid #888}
.hslobby{display:grid;gap:8px}.hslrow{display:flex;justify-content:space-between;padding:10px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--hs1)}.hslrow.dim{border-color:var(--border);opacity:.7}.hslobby>button{width:100%;pointer-events:none}
.hsplans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hspl{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 6px;border-radius:16px;background:var(--surface-2)}.hspl .ic{width:26px;height:26px;color:var(--hs1)}.hspl:nth-child(2){transform:translateY(-10px);border:1px solid var(--hs1)}
.hsarr{position:absolute;top:calc(50% - 21px);width:42px;min-height:42px;height:42px;padding:0;border-radius:50%;z-index:2;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--border);backdrop-filter:var(--blur);opacity:0;transform:none;transition:opacity .25s,background .2s,border-color .2s,box-shadow .2s}
@media(hover:hover){.hsarr:hover{transform:none;filter:none;background:var(--surface-2);border-color:var(--border-hi);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 14%,transparent)}.hsarr:hover .ic{color:var(--acc)}
  .hstab:hover{transform:none;filter:none;box-shadow:none;background:var(--surface-2);color:var(--text)}}
.hsarr.prev{inset-inline-start:12px}.hsarr.next{inset-inline-end:12px}.hstrack:hover .hsarr,.hsarr:focus-visible{opacity:1}
.hstabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(110px,1fr);gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}.hstabs::-webkit-scrollbar{display:none}
.hstab{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:10px 12px 11px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:none;color:var(--muted);text-align:start;min-height:0}
.hstab b{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.88rem;white-space:nowrap}.hstab .ic{width:16px;height:16px}.hstab.on{color:var(--text);background:var(--surface-2);border-color:var(--border-hi)}.hstab.on .ic{color:var(--hs1)}
.hstab .hsprog{height:3px;padding:0;border-radius:9px;background:var(--border);overflow:hidden}.hstab .hsprog i{display:block;height:100%;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,var(--hs1),var(--hs2))}
.k-games,.k-app{--hs1:#7d8cff;--hs2:#4f9dff;--hs:rgba(108,123,255,.38);--hs3:rgba(79,157,255,.18)}.k-voice{--hs1:#2ec4a6;--hs2:#4f9dff;--hs:rgba(46,196,166,.4);--hs3:rgba(79,157,255,.2)}
.k-lobbies{--hs1:#ff8a3d;--hs2:#ffb02e;--hs:rgba(255,138,61,.34);--hs3:rgba(255,176,46,.15)}.k-files{--hs1:#4f9dff;--hs2:#2ec4a6;--hs:rgba(79,157,255,.36);--hs3:rgba(46,196,166,.15)}
.k-watch{--hs1:#ff5d8f;--hs2:#ffb02e;--hs:rgba(255,93,143,.36);--hs3:rgba(255,176,46,.14)}.k-play{--hs1:#b46cff;--hs2:#ff5d8f;--hs:rgba(180,108,255,.36);--hs3:rgba(255,93,143,.14)}
.k-prices{--hs1:#5b8cff;--hs2:#3a5bd9;--hs:rgba(52,86,200,.34);--hs3:rgba(91,140,255,.14)}.k-plans{--hs1:#7d8cff;--hs2:#3a4fd6;--hs:rgba(70,84,214,.34);--hs3:rgba(125,140,255,.14)}
@media (max-width:760px){.hstrack{min-height:0}.hsl{flex-direction:column;align-items:stretch;padding:22px 18px 20px;gap:18px;background:radial-gradient(90% 60% at 50% 100%,var(--hs),transparent 70%)}
  .hsart{display:none}.k-games .hsart,.k-app .hsart{display:grid;width:100%;order:-1}.hscovers{max-width:260px;margin:0 auto}
  .hsbtns>button{flex:1}.hstabs{grid-auto-columns:max-content}.hsarr{display:none}.hsscr{height:110px}}
@media (prefers-reduced-motion:reduce){.hsl,.hsl>*{transition:none!important;transform:none}.hsp.on .av{animation:none}}
/* a game's page: the whole screen (Steam's store page), a bar with «بازگشت» on top, media and text, facts beside */
.mo.lgfull{padding:0;place-items:stretch;z-index:99;background:var(--bg);background-attachment:fixed;backdrop-filter:none}
body:has(.wbar) .mo.lgfull{top:38px}
.mo.lgfull .md.lgmodal{width:100%;max-width:none;min-height:100%;margin:0;padding:0 0 48px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.md.lgmodal>h3,.md.lgmodal>.row:last-child:empty{display:none}
.lgfull .lgpage{max-width:1240px;margin:0 auto;padding:0 28px;gap:22px}
.lgbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:14px 0 10px;margin-bottom:-6px;pointer-events:none}.lgbar>*{pointer-events:auto}
.lgbarname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
html[dir=ltr] .lgback .ic{transform:scaleX(-1)}
.lgfull .lgart{max-height:min(48vh,480px)}
.lgcols{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:24px;align-items:start}
.lgmain,.lgside{display:grid;gap:16px;align-content:start;min-width:0}
.lgside{position:sticky;top:70px;padding:6px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--border);gap:0}
.lgside .lgfacts{grid-template-columns:1fr;gap:0}.lgside .lgfacts:empty{display:none}
.lgside .lgfact{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-radius:0;background:none;border-bottom:1px solid var(--border)}
.lgside .lgfact b{text-align:end}.lgside>:last-child .lgfact:last-child,.lgside>a:last-child{border-bottom:0}.lgside>a{padding:10px 0;display:block}
.lgside .lglan{padding:12px 0}
.lgmedia{display:grid;gap:10px}
.lgviewbox{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:var(--shadow-soft)}
.lgview{position:absolute;inset:0}.lgview img,.lgview video{width:100%;height:100%;display:block;object-fit:cover;background:#000}.lgview video{object-fit:contain}
.lgwait{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.lgwait .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;animation:pspin .8s linear infinite}
button.lgnav{position:absolute;top:calc(50% - 21px);width:42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);border-color:transparent;color:#fff;opacity:0;transition:opacity .2s}
.lgviewbox:hover .lgnav,.lgnav:focus-visible{opacity:1}.lgnav.prev{inset-inline-start:12px}.lgnav.next{inset-inline-end:12px}
html[dir=ltr] .lgnav .ic{transform:scaleX(-1)}
.lgstrip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
button.lgth{flex:0 0 136px;aspect-ratio:16/9;padding:0;border-radius:10px;overflow:hidden;position:relative;border:2px solid transparent;background:#000;opacity:.6;transition:opacity .2s,border-color .2s}
button.lgth:hover{opacity:.9}button.lgth.on{opacity:1;border-color:var(--acc)}
.lgth img{width:100%;height:100%;object-fit:cover;display:block}
.lgth.vid .ic{position:absolute;inset:0;margin:auto;width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff}
@media(max-width:860px){.lgcols{grid-template-columns:1fr}.lgside{position:static}.lgfull .lgpage{padding:0 14px}button.lgth{flex-basis:108px}}
/* the library game's page (the store page's look): blurred backdrop, big name and tags, a bar that sticks, cards beside */
.lgj{position:relative}.mo.lgfull{overflow-x:hidden}
.lgbg{position:absolute;top:-70px;left:50%;width:100vw;translate:-50% 0;height:720px;overflow:hidden;z-index:-1;pointer-events:none;-webkit-mask:linear-gradient(#000 35%,transparent);mask:linear-gradient(#000 35%,transparent)}
.lgbg img{width:100%;height:100%;object-fit:cover;filter:blur(30px) saturate(1.3) brightness(.5);transform:scale(1.15)}
.lghead{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:28px;align-items:end;padding:26px 0 4px}
.lghtx{display:grid;gap:12px;min-width:0}
.lghtx h1{margin:0;font:900 clamp(1.9rem,4vw,3rem)/1.15 Estedad,Vazir,sans-serif;letter-spacing:-.02em;text-shadow:0 4px 24px rgba(0,0,0,.5)}
.lgsub{margin:0;color:color-mix(in srgb,var(--text) 82%,transparent);line-height:1.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lgsub:empty{display:none}
.lgtags{display:flex;flex-wrap:wrap;gap:8px}
.lgtag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--border);font:700 .8rem Estedad,Vazir,sans-serif}
.lgtag.j{background:color-mix(in srgb,var(--acc) 18%,transparent);border-color:color-mix(in srgb,var(--acc) 45%,transparent);color:color-mix(in srgb,var(--acc) 55%,#fff)}.lgtag .ic{width:14px;height:14px}
.lgj .lghero{border-radius:18px;box-shadow:0 26px 60px rgba(0,0,0,.55)}.lgj .lgart{max-height:none}
.lgact{position:sticky;top:62px;z-index:4;display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:12px 16px;border-radius:18px;background:color-mix(in srgb,var(--surface-2) 92%,transparent);border:1px solid var(--border);backdrop-filter:blur(16px);box-shadow:var(--shadow-soft)}
.lgact .lgbtns{flex:none}.lgstats{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lgstat{display:grid;line-height:1.35}.lgstat span{color:var(--muted);font-size:.76rem}.lgstat b{font:800 1rem Estedad,Vazir,sans-serif}
.lgsep{width:1px;height:32px;background:var(--border)}.lgon{color:var(--ok)}.lgacts{gap:8px;flex-wrap:wrap}
.lgcard{padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.lgcard h3{margin:0 0 10px;font:800 1rem Estedad,Vazir,sans-serif}
.lgj .lgside{position:static;padding:0;background:none;border:0;gap:14px}
.lgj .lgside .lgfacts{gap:0}.lgj .lgside .lgfact:last-child{border-bottom:0}.lglang{font-size:.82rem;font-weight:600}
.lgfrs,.lglobs{display:grid;gap:6px}.lgfrs .lgfi{margin:0}
.lglob{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border)}.lglob button{min-height:34px;padding:4px 14px}
.lgvers{display:grid;gap:12px;padding-inline-start:18px;position:relative}
.lgvers::before{content:"";position:absolute;inset-block:8px;inset-inline-start:5px;width:2px;background:var(--border)}
.lgvi{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.lgvi::before{content:"";position:absolute;inset-inline-start:-18px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--border-hi)}
.lgvi.on::before{background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
.lgvi b{font:800 .9rem Estedad,Vazir,sans-serif}.lgvi p{margin:0;width:100%;font-size:.84rem;color:var(--muted)}
.lgh2{margin:10px 0 12px;font:900 1.25rem Estedad,Vazir,sans-serif}
.lgsimg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
button.lgsc{position:relative;display:block;aspect-ratio:2/3;padding:0;min-height:0;border-radius:14px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);transition:transform .25s var(--spring)}
button.lgsc:hover{transform:translateY(-4px)}.lgsc img{width:100%;height:100%;object-fit:cover;display:block}
.lgsc b{position:absolute;inset:auto 0 0 0;padding:22px 10px 9px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font:800 .85rem Estedad,Vazir,sans-serif;text-align:start}
@media(max-width:860px){.lghead{grid-template-columns:1fr}.lghead .lghero{order:-1}.lgact{top:56px;gap:10px}.lgsep{display:none}.lgsimg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prlist{display:grid;gap:6px;margin-top:10px;max-height:560px;overflow:auto}
details.pr{border:1px solid var(--border);border-radius:12px;padding:8px 12px;background:var(--surface-2)}
details.pr summary{display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0;list-style:none}
details.pr .prt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px/1.5 ui-monospace,monospace;opacity:.85}
details.pr pre{margin:8px 0 0;white-space:pre-wrap;word-break:break-word;font:12px/1.55 ui-monospace,monospace;max-height:340px;overflow:auto;text-align:left}
.lgprog.lgstop{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}.lgprog.lgstop .lgresume{grid-row:span 2}.lgprog.lgstop .bar{grid-column:2}
.lgvmore{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--spring,cubic-bezier(.2,.8,.2,1))}.lgvmore>div{overflow:hidden;min-height:0;display:grid;gap:12px;margin-inline-start:-18px;padding-inline-start:18px}  /* room for the timeline dots */
.lgvers:not(.open) .lgvmore{margin-top:-12px}
.lgvers.open .lgvmore{grid-template-rows:1fr}
.lgvmore .lgvi{opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s;transition-delay:calc(var(--i) * 60ms)}
.lgvers.open .lgvmore .lgvi{opacity:1;transform:none}
.lgvbtn{margin-top:8px;justify-self:start}.lgvbtn svg{transform:rotate(90deg);transition:transform .3s}.lgvers.open .lgvbtn svg{transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){.lgvmore,.lgvmore .lgvi{transition:none}}