/* ============================================================================
   شب‌نشینی — پوسته. مرجع ۳۷۵×۸۱۲ عمودی (§۶.۱). چیدمان بدون عدد پیکسلی ثابت (§۶.۲ قلم ۱۱).
   پالت: شبِ بنفش #1B1233 · فانوسِ زعفرانی #FFB74A · نعنای فیروزه‌ای #3ED2C1 · طلای پول #E8B93B
   ============================================================================ */
@font-face{font-family:'Vazirmatn';font-weight:400;font-display:swap;src:local('Vazirmatn'),url('../fonts/Vazirmatn-Regular.woff2') format('woff2')}
@font-face{font-family:'Vazirmatn';font-weight:700;font-display:swap;src:local('Vazirmatn Bold'),url('../fonts/Vazirmatn-Bold.woff2') format('woff2')}

:root{
  color-scheme:dark;
  --bg:#1B1233; --bg2:#251A44; --plate:#2C2052; --edge:#43356E;
  --txt:#F4EFFF; --dim:#B4A8D6; --line:rgba(244,239,255,.12);
  --gold:#E8B93B; --amber:#FFB74A; --amber2:#FFD37A; --mint:#3ED2C1; --rose:#FF6F91; --good:#5BD7A6; --bad:#FF6F91;
  --safeT:env(safe-area-inset-top,0px); --safeB:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden}
body{font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif;color:var(--txt);
  background:radial-gradient(110% 60% at 50% -8%,#3A2A6B 0%,transparent 60%),radial-gradient(80% 40% at 50% 108%,rgba(255,183,74,.14) 0%,transparent 60%),linear-gradient(180deg,#20163D,var(--bg) 60%);
  user-select:none;-webkit-user-select:none;font-size:14px}
body.th02{--bg:#2A1418;--bg2:#3A1C22;--plate:#46242B;--edge:#6B3A44}
body.th03{--bg:#0F2A2E;--bg2:#153A3F;--plate:#1B474D;--edge:#2E6A72}
body.th04{--bg:#2B1D0E;--bg2:#3B2914;--plate:#4A341A;--edge:#6E4E27}
button{font-family:inherit;font-weight:700;border:none;cursor:pointer;color:var(--txt);background:none;font-size:15px;touch-action:manipulation;min-height:44px;transition:transform .08s,filter .15s}
button:active{transform:translateY(2px)} button:disabled{opacity:.4}
input{font-family:inherit;font-size:16px;color:var(--txt);background:#140C28;border:1px solid var(--edge);border-radius:12px;padding:10px 12px;min-height:44px;outline:none;width:100%}
input:focus{border-color:var(--amber)}
.hidden{display:none!important}
.ic{width:1em;height:1em;fill:currentColor;vertical-align:-.12em;flex:none}

/* ---------- ستاره‌های شب (CSS، نه RAF) ---------- */
#stars{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.55}
#stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFF1C9;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.15;transform:scale(.6)}}

/* ---------- صفحه ---------- */
.screen{position:fixed;inset:0;z-index:2;display:none;flex-direction:column;padding:calc(10px + var(--safeT)) 14px calc(12px + var(--safeB));overflow-y:auto;overflow-x:hidden}
.screen.on{display:flex}
.wrap{width:100%;max-width:430px;margin:0 auto}
.pgTop{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pgTop h2{font-size:19px;margin:0;flex:1;text-align:center}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--plate);border:1px solid var(--edge);font-size:17px;color:var(--txt);position:relative}
.iconbtn.primary{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#2A1606;border:none}
.card{background:linear-gradient(180deg,var(--bg2),#1D1438);border:1px solid var(--edge);border-radius:18px;padding:14px;box-shadow:0 18px 44px -22px #000;margin-bottom:10px}
.card h3{margin:0 0 6px;font-size:16px}
.sub{color:var(--dim);font-size:13px;margin:4px 0;line-height:1.7}
.row{display:flex;align-items:center;gap:8px}
.spacer{flex:1}
.primary{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#2A1606;border-radius:14px;padding:13px 16px;font-size:16px;box-shadow:0 8px 18px -8px var(--amber);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.secondary{background:var(--plate);border:1px solid var(--edge);border-radius:14px;padding:12px 14px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--txt)}
.golden{background:linear-gradient(180deg,#F6D46B,var(--gold));color:#3A2A05;border-radius:14px;padding:12px 14px}
.ghost{border:1px solid var(--line);border-radius:14px;padding:11px 14px;color:var(--dim);background:rgba(244,239,255,.03)}
.mint{background:linear-gradient(180deg,#7FE9DC,var(--mint));color:#062A27;border-radius:14px;padding:12px 14px}
.danger{background:linear-gradient(180deg,#FF8FA8,var(--rose));color:#3A0A16;border-radius:14px;padding:12px 14px}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.035);filter:brightness(1.08)}}
.king{width:100%;font-size:18px;padding:15px}
.badge{position:absolute;inset-inline-end:-4px;top:-4px;background:var(--rose);color:#fff;border-radius:999px;font-size:10px;padding:1px 6px;min-width:16px}
.tag{display:inline-block;border-radius:8px;font-size:10.5px;padding:2px 7px;background:var(--edge);color:var(--txt)}
.tag.gold{background:var(--gold);color:#3A2A05}.tag.mint{background:var(--mint);color:#062A27}.tag.rose{background:var(--rose);color:#fff}.tag.dim{opacity:.7}

/* ---------- کیف پول ---------- */
.wallet{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.chip{display:flex;align-items:center;gap:6px;background:var(--plate);border:1px solid var(--edge);border-radius:999px;padding:6px 11px;font-size:13px;font-weight:700;min-height:36px}
.chip .ic{font-size:15px}.chip.coins{color:var(--gold)}.chip.gems{color:var(--mint)}.chip.lvl{color:var(--amber2)}
.chip small{color:var(--dim);font-weight:400;font-size:11px}
.chip.add{padding-inline-start:6px}.chip .plus{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--amber);color:#2A1606;font-size:12px}

/* ---------- اسپلش ---------- */
#splash{display:flex;align-items:center;justify-content:center;z-index:60;background:var(--bg);transition:opacity .6s}
#splash.out{opacity:0;pointer-events:none}
#splash .in{text-align:center;animation:sp .9s cubic-bezier(.2,.9,.3,1.2)}
@keyframes sp{from{transform:scale(.8);opacity:0}}
#splash h1{font-size:34px;margin:12px 0 2px}
.logoBig{width:min(120px,30vw);height:min(120px,30vw)}
#splash .bar{width:150px;height:4px;border-radius:4px;background:var(--edge);margin:16px auto 0;overflow:hidden}
#splash .bar i{display:block;height:100%;width:40%;background:var(--amber);animation:ld 1.1s ease-in-out infinite}
@keyframes ld{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
.brandIn{text-align:center;animation:sp .7s ease-out}.brandIn img{width:min(140px,36vw);height:min(140px,36vw);object-fit:contain;border-radius:28px}.brandIn h2{font-size:20px;margin:12px 0 2px}.brandIn p{color:var(--dim);margin:0;font-size:13px}

/* ---------- منو ---------- */
#scr-menu{justify-content:center}
.logoWrap{text-align:center;margin-bottom:6px}
.logoMenu{width:min(84px,22vw);height:min(84px,22vw)}
.logoWrap h1{font-size:26px;margin:2px 0 0}
.cornerBtns{position:absolute;top:calc(8px + var(--safeT));inset-inline-start:12px;display:flex;gap:6px;z-index:5;align-items:center}
.netPill{display:flex;align-items:center;gap:6px;background:var(--plate);border:1px solid var(--edge);border-radius:999px;padding:6px 10px;font-size:11.5px;color:var(--dim);min-height:34px}
.netPill i{width:8px;height:8px;border-radius:50%;background:var(--bad)}
.netPill.on i{background:var(--good);box-shadow:0 0 8px var(--good)}.netPill.on{color:var(--txt)}
.netPill.mid i{background:var(--amber);animation:tw 1s infinite}
.meCard{display:flex;align-items:center;gap:10px;background:var(--plate);border:1px solid var(--edge);border-radius:16px;padding:8px 12px;margin-bottom:8px;min-height:60px}
.meCard .nm{flex:1;text-align:start}.meCard .nm b{display:block;font-size:15px}.meCard .nm span{color:var(--dim);font-size:11.5px}
.meCard .edit{color:var(--dim);font-size:15px}
#btnJoin{width:100%;margin-top:8px}
.menuGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.menuGrid button{display:grid;place-items:center;gap:4px;padding:10px 4px;min-height:70px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.07),var(--plate));border:1px solid var(--edge);font-size:11px;color:var(--dim);position:relative}
.menuGrid button .ic{font-size:24px;color:var(--amber2);filter:drop-shadow(0 4px 7px rgba(0,0,0,.4))}

/* ---------- آواتار ---------- */
.av{display:inline-grid;place-items:center;border-radius:50%;background:var(--plate);position:relative;flex:none;width:44px;height:44px;overflow:visible}
.av svg{width:78%;height:78%}
.av.sm{width:32px;height:32px}.av.lg{width:68px;height:68px}.av.xl{width:96px;height:96px}
.av.f01{box-shadow:0 0 0 3px #8B5A2B}.av.f02{box-shadow:0 0 0 3px #1E8FA3,0 0 0 5px #F2E6C8}.av.f03{box-shadow:0 0 0 3px var(--amber),0 0 14px var(--amber)}
.av.f04{box-shadow:0 0 0 3px #B23A48,0 0 0 5px #E8B93B}.av.f05{box-shadow:0 0 0 3px #FF7A2F,0 0 18px #FF7A2F}.av.f06{box-shadow:0 0 0 3px var(--mint),0 0 0 6px rgba(62,210,193,.35),0 0 18px var(--mint)}
.av.off{opacity:.45;filter:grayscale(1)}
.nm.c01{color:var(--gold)}.nm.c02{color:var(--mint)}.nm.c03{color:var(--rose)}.nm.c04{color:#C79BFF}
.avGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avGrid button{display:grid;place-items:center;gap:3px;padding:8px 2px;min-height:76px;border-radius:14px;background:var(--plate);border:1px solid var(--edge);font-size:10.5px;color:var(--dim)}
.avGrid button.on{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,183,74,.3)}
.avGrid button.lock{opacity:.55}

/* ---------- کارت بازی ---------- */
.gcard{display:flex;gap:10px;background:linear-gradient(180deg,var(--bg2),#1D1438);border:1px solid var(--edge);border-radius:18px;padding:12px;margin-bottom:10px;align-items:stretch}
.gcard .art{width:min(84px,22vw);height:min(84px,22vw);border-radius:16px;background:var(--plate);display:grid;place-items:center;flex:none;overflow:hidden}
.gcard .art svg{width:100%;height:100%}
.gcard .txt{flex:1;text-align:start;min-width:0}
.gcard .txt b{display:block;font-size:16px}
.gcard .txt p{margin:3px 0;color:var(--dim);font-size:12.5px;line-height:1.6}
.gcard .meta{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.gcard .modes{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.gcard .modes button{flex:1;min-width:0;min-height:40px;border-radius:12px;font-size:12.5px;padding:8px 6px;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.gcard .modes .ic{font-size:14px}
.gcard.soon{opacity:.5}

/* ---------- لابی ---------- */
.codeBanner{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#3B2A6E,var(--plate));border:1px solid var(--edge);border-radius:18px;padding:10px 12px;margin-bottom:10px}
.codeBanner .code{font-size:30px;font-weight:700;letter-spacing:.12em;color:var(--amber2);flex:1;text-align:center;direction:ltr}
.codeBanner small{display:block;color:var(--dim);font-size:11px;text-align:center}
.plist{display:grid;gap:7px;margin-bottom:10px}
.prow{display:flex;align-items:center;gap:9px;background:var(--plate);border:1px solid var(--edge);border-radius:14px;padding:7px 10px;min-height:56px}
.prow .nm{flex:1;text-align:start;min-width:0}.prow .nm b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.prow .nm span{color:var(--dim);font-size:11px}
.prow .sc{font-weight:700;color:var(--gold);font-size:14px;min-width:28px;text-align:center}
.prow .x{width:38px;height:38px;min-height:38px;border-radius:11px;background:rgba(255,111,145,.15);color:var(--rose);display:grid;place-items:center}
.prow.me{border-color:var(--amber)}
.setRow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 2px;border-bottom:1px solid var(--line)}
.setRow:last-child{border-bottom:none}
.setRow .lbl{font-size:13.5px;flex:1;text-align:start}
.seg{display:flex;background:#140C28;border-radius:11px;overflow:hidden;border:1px solid var(--edge);flex-wrap:wrap}
.seg button{padding:6px 10px;font-size:12.5px;color:var(--dim);min-height:38px;flex:1}
.seg button.on{background:var(--amber);color:#2A1606}
.seg button.lock{opacity:.5}
.lobbyActs{display:grid;gap:8px;margin-top:8px}
.lobbyActs .row button{flex:1}

/* ---------- گیم‌پلی ---------- */
#scr-game{padding-top:calc(6px + var(--safeT))}
.gameWrap{display:flex;flex-direction:column;min-height:100%}
.gtop{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.gchip{background:var(--plate);border:1px solid var(--edge);border-radius:12px;padding:6px 9px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:5px;min-height:40px}
.gchip.timer b{font-size:16px;font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
.gchip.timer.low{color:var(--rose);border-color:var(--rose);animation:tw 1s infinite}
.gphase{font-size:12.5px;color:var(--dim);flex:1;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#gameBody{flex:1;display:flex;flex-direction:column;gap:8px}
.bigBox{background:linear-gradient(180deg,var(--bg2),#1D1438);border:1px solid var(--edge);border-radius:18px;padding:16px;text-align:center}
.bigBox h2{margin:4px 0;font-size:22px}
.bigBox.spyBox{border-color:var(--rose);background:linear-gradient(180deg,#3A1C2B,#1D1438)}
.bigBox.okBox{border-color:var(--mint)}
.optList{display:grid;gap:7px}
.opt{display:flex;align-items:center;gap:9px;background:var(--plate);border:1px solid var(--edge);border-radius:14px;padding:9px 11px;min-height:50px;text-align:start;width:100%;font-size:14px}
.opt.on{border-color:var(--amber);background:linear-gradient(180deg,#3B2A6E,var(--plate))}
.opt.dis{opacity:.5}
.opt .cnt{margin-inline-start:auto;color:var(--gold);font-weight:700}
.opt .who{display:flex;gap:2px;margin-inline-start:auto}
.opt .who .av{width:22px;height:22px}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chips button{background:var(--plate);border:1px solid var(--edge);border-radius:999px;padding:7px 12px;font-size:13px;min-height:38px}
.chips button.on{background:var(--amber);color:#2A1606}
.locGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.locGrid button{background:var(--plate);border:1px solid var(--edge);border-radius:12px;padding:8px 6px;font-size:12.5px;min-height:44px;color:var(--txt)}
.locGrid button.cross{opacity:.4;text-decoration:line-through}
.readyRow{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.readyRow .av{width:30px;height:30px}.readyRow .av.wait{opacity:.35}
.floatTxt{position:fixed;z-index:40;font-weight:700;font-size:18px;color:var(--amber2);pointer-events:none;text-shadow:0 2px 6px #000;animation:fl 1.1s ease-out forwards}
@keyframes fl{to{transform:translateY(-56px);opacity:0}}
#reactLayer{position:fixed;inset:0;pointer-events:none;z-index:45}
.reactFly{position:absolute;bottom:20%;width:44px;height:44px;animation:rf 1.6s ease-out forwards}
.reactFly svg{width:100%;height:100%}
@keyframes rf{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-20px) scale(1.1)}100%{transform:translateY(-240px) scale(.9);opacity:0}}
.textIn{display:flex;gap:6px}.textIn input{flex:1}
.timerBar{height:6px;border-radius:4px;background:#140C28;overflow:hidden;margin:6px 0}
.timerBar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--amber));transition:width .25s linear}

/* ---------- نتیجه ---------- */
.winBox{text-align:center;padding:14px;border-radius:18px;background:linear-gradient(180deg,#3B2A6E,var(--plate));border:1px solid var(--gold);margin-bottom:10px}
.winBox .avs{display:flex;justify-content:center;gap:10px;margin:8px 0}
.winBox h2{margin:6px 0 2px;font-size:22px;color:var(--amber2)}
.rewardLine{display:inline-flex;gap:10px;background:rgba(232,185,59,.15);border:1px solid var(--gold);border-radius:999px;padding:6px 14px;margin-top:8px;color:var(--gold);font-weight:700}

/* ---------- فروشگاه ---------- */
.tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;background:var(--plate);border:1px solid var(--edge);border-radius:999px;padding:7px 13px;font-size:12.5px;min-height:38px;color:var(--dim)}
.tabs button.on{background:var(--amber);color:#2A1606;border-color:var(--amber)}
.shopItem{display:flex;align-items:center;gap:10px;background:var(--plate);border:1px solid var(--edge);border-radius:15px;padding:10px;margin-bottom:8px;min-height:64px}
.shopItem .pic{width:48px;height:48px;border-radius:12px;background:var(--bg);display:grid;place-items:center;flex:none;color:var(--amber2);font-size:22px;overflow:hidden}
.shopItem .pic svg{width:80%;height:80%}
.shopItem .txt{flex:1;text-align:start;font-size:13.5px;min-width:0}
.shopItem .txt small{display:block;color:var(--dim);font-size:11.5px;line-height:1.5}
.buyBtn{background:linear-gradient(180deg,#F6D46B,var(--gold));color:#3A2A05;border-radius:12px;padding:9px 12px;font-size:13px;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center;gap:4px}
.buyBtn.gem{background:linear-gradient(180deg,#7FE9DC,var(--mint));color:#062A27}
.buyBtn.own{background:var(--edge);color:var(--txt)}
.buyBtn.money{background:linear-gradient(180deg,#FF8FA8,var(--rose));color:#3A0A16}
.offer{border:1px solid var(--gold);background:linear-gradient(180deg,#3A2E12,#1D1438)}
.offer .was{text-decoration:line-through;color:var(--dim);font-size:11px}
.packGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:8px}
.packCard{background:var(--plate);border:1px solid var(--edge);border-radius:15px;padding:10px;text-align:center;display:grid;gap:4px}
.packCard b{font-size:18px;color:var(--mint)}.packCard small{color:var(--dim);font-size:11px}
.bar{height:8px;border-radius:6px;background:#140C28;overflow:hidden;margin:7px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--gold))}

/* ---------- دفترچه، گردونه، هدیه ---------- */
.passRow{display:grid;grid-template-columns:34px 1fr 1fr;gap:7px;align-items:center;margin-bottom:7px;font-size:12.5px}
.passCell{background:var(--plate);border:1px solid var(--edge);border-radius:11px;padding:8px;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center;gap:4px}
.passCell.gold{border-color:var(--gold);color:var(--gold)}.passCell.done{opacity:.45}.passCell.lock{opacity:.5}
.passCell button{min-height:32px;font-size:12px;padding:4px 10px;border-radius:9px}
.wheelBox{position:relative;width:min(260px,78vw);height:min(260px,78vw);margin:8px auto;border-radius:50%;border:5px solid var(--edge);overflow:hidden;transition:transform 3.6s cubic-bezier(.15,.9,.2,1);background:var(--plate)}
.wheelBox div{position:absolute;inset:0;clip-path:polygon(50% 50%,50% 0,93% 13%);display:grid;place-items:start center;padding-top:12px;font-size:12px;font-weight:700}
.wheelPin{width:0;height:0;border:11px solid transparent;border-top-color:var(--amber);margin:0 auto -6px}
.daily7{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.dayCard{background:var(--plate);border:1px solid var(--edge);border-radius:12px;padding:8px 4px;text-align:center;font-size:11.5px;display:grid;gap:3px;place-items:center}
.dayCard .ic{font-size:20px;color:var(--amber2)}
.dayCard.today{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,185,59,.25)}
.dayCard.past{opacity:.45}

/* ---------- اورلی ---------- */
.ov{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(10,6,22,.8);padding:18px}
.ov.on{display:flex}
.ovCard{width:100%;max-width:360px;background:linear-gradient(180deg,var(--bg2),#170F2C);border:1px solid var(--edge);border-radius:20px;padding:18px 16px;text-align:center;position:relative;animation:ovIn .25s ease-out;max-height:88vh;overflow-y:auto}
@keyframes ovIn{from{transform:scale(.92) translateY(10px);opacity:0}}
.ovCard h3{margin:6px 0 4px;font-size:19px}
.ovClose{position:absolute;inset-inline-end:8px;top:8px;width:38px;height:38px;min-height:38px;border-radius:12px;background:rgba(244,239,255,.06);display:grid;place-items:center}
.ovActs{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ovIcon{font-size:30px;color:var(--mint)}.ovIcon.gold{color:var(--gold)}
.codeInput{text-align:center;font-size:28px;letter-spacing:.2em;direction:ltr;margin-top:8px}
.bigCode{font-size:40px;font-weight:700;letter-spacing:.14em;color:var(--amber2);direction:ltr;margin:6px 0}
.qrBox{display:grid;place-items:center;margin:8px auto;background:#fff;border-radius:12px;padding:8px;width:min(200px,60vw);min-height:60px}
.qrBox:empty{display:none}
.qrBox svg{width:100%;height:auto;display:block}
.nameList{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.nameList span{background:var(--plate);border:1px solid var(--edge);border-radius:999px;padding:6px 10px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.nameList span b{color:var(--rose);cursor:pointer;font-size:14px}
.nameInput{margin-top:6px}
.passCard{border-color:var(--amber)}
.passName{font-size:30px;font-weight:700;color:var(--amber2);margin:6px 0}
.privCard{border-color:var(--mint)}
.holdBox{position:relative;min-height:170px;border-radius:16px;background:#140C28;border:1px dashed var(--edge);display:grid;place-items:center;overflow:hidden;touch-action:none}
.holdHint{display:grid;place-items:center;gap:6px;color:var(--dim);font-size:13px}
.holdHint .ic{font-size:34px;color:var(--mint)}
.holdContent{position:absolute;inset:0;display:none;place-items:center;padding:12px;background:linear-gradient(180deg,#1F3A38,#140C28)}
.holdBox.show .holdContent{display:grid}.holdBox.show .holdHint{visibility:hidden}
.chatCard{max-width:400px;display:flex;flex-direction:column;max-height:86vh}
.chatLog{flex:1;overflow-y:auto;text-align:start;display:grid;gap:5px;align-content:start;min-height:180px;max-height:46vh;padding:4px 2px}
.msg{display:flex;gap:7px;align-items:flex-end}
.msg .av{width:26px;height:26px}
.msg .b{background:var(--plate);border:1px solid var(--edge);border-radius:14px;padding:6px 10px;font-size:13px;max-width:78%;line-height:1.6}
.msg .b small{display:block;color:var(--dim);font-size:10.5px}
.msg.me{flex-direction:row-reverse}.msg.me .b{background:#3B2A6E}
.msg .st svg{width:64px;height:64px}
.msg.sys{justify-content:center}.msg.sys .b{background:none;border:none;color:var(--dim);font-size:11.5px}
.reactRow,.stickerRow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:6px 0}
.reactRow button,.stickerRow button{width:44px;height:44px;border-radius:12px;background:var(--plate);border:1px solid var(--edge);display:grid;place-items:center;padding:0}
.reactRow button svg,.stickerRow button svg{width:70%;height:70%}
.stickerRow button.lock{opacity:.4}
.chatIn{margin-top:4px}.chatIn input{flex:1}
.howtoArt{width:96px;height:96px;margin:0 auto;border-radius:20px;background:var(--plate);display:grid;place-items:center;overflow:hidden}
.howtoArt svg{width:100%;height:100%}

/* ---------- راهنمای فلش‌دار (§۷) — CSS + setTimeout ---------- */
#tut{position:fixed;inset:0;z-index:70;display:none;pointer-events:none}
#tut.on{display:block}
#tut .msk{position:absolute;background:rgba(6,3,14,.74);pointer-events:auto}
#tut .ring{position:absolute;border:3px solid var(--gold);border-radius:16px;box-shadow:0 0 0 4px rgba(232,185,59,.2);animation:ring 1.2s ease-in-out infinite;pointer-events:none}
@keyframes ring{50%{box-shadow:0 0 0 12px rgba(232,185,59,0)}}
#tut .bub{position:absolute;background:var(--gold);color:#2A1E04;font-weight:700;font-size:13.5px;padding:9px 13px;border-radius:13px;max-width:230px;text-align:center;pointer-events:none}
#tut .hand{position:absolute;font-size:24px;color:#fff;animation:tap 1.1s ease-in-out infinite;pointer-events:none}
@keyframes tap{50%{transform:translate(6px,6px) scale(.9)}}
#tut .skip{position:absolute;bottom:calc(16px + var(--safeB));inset-inline-end:16px;pointer-events:auto;background:rgba(244,239,255,.1);border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:13px}

@media (max-width:340px){.menuGrid{gap:6px}.menuGrid button{font-size:10px;min-height:62px}.gcard .art{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}#stars{display:none}}