/* نقاش‌باشی — توکن‌های دیزاین‌سیستم، CSS خالص، بدون هیچ منبع خارجی */
/* وزیرمتن داخل خود مخزن است، نه از گوگل‌فونت: برای کاربر ایرانی فرقِ
   «فونت درست» با «فونت سیستمی نامعلوم» است. فایل متغیر، همه‌ی وزن‌ها. */
@font-face{
  font-family:Vazirmatn;
  src:url('/font/vazirmatn.woff2') format('woff2-variations');
  font-weight:100 900; font-display:swap; font-style:normal;
}
:root{
  --primary:#6366f1; --primary-dark:#4338ca; --primary-soft:#e1e0ff;
  --cyan:#06b6d4; --cyan-dark:#0891b2;
  --amber:#f59e0b; --amber-soft:#fef3c7; --amber-ink:#92400e;
  --ok:#10b981; --ok-soft:#d1fae5;
  --danger:#f43f5e; --danger-dark:#be123c;
  --bg:#f1f5fb; --card:#fff; --card-2:#eff4ff; --card-3:#e5eeff;
  --ink:#0b1c30; --ink-2:#5b6472; --line:#dbe6f6;
  --r-sm:.7rem; --r:1rem; --r-md:1.4rem; --r-lg:2rem;
  --fa:Vazirmatn,Tahoma,'Noto Sans Arabic',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* هر قانون display با سلکتور ID یا کلاس از قانون پیش‌فرض مرورگر برای [hidden]
   قوی‌تر است و بی‌اثرش می‌کند. این خط جلویش را می‌گیرد. */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 var(--fa);direction:rtl;
  overflow:hidden;overscroll-behavior:none}
button,input,select,textarea{font-family:var(--fa);font-size:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.35}
.muted{color:var(--ink-2);font-size:13px}
.ic{width:1.15em;height:1.15em;display:block;flex:0 0 auto}

/* دکمه‌ی تاکتیل: لبه‌ی ضخیم پایین، با فشار می‌نشیند */
.btn{border:0;border-radius:999px;padding:.6rem 1.2rem;font-weight:700;cursor:pointer;
  background:var(--primary);color:#fff;box-shadow:0 4px 0 var(--primary-dark);
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  transition:transform .06s,box-shadow .06s}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--primary-dark)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:0 4px 0 #cbd5e1}
.btn.g{background:var(--card-3);color:var(--ink);box-shadow:0 4px 0 var(--line)}
.btn.sm{padding:.35rem .9rem;font-size:13px;box-shadow:0 3px 0 var(--primary-dark)}
.btn.icon{padding:.55rem;border-radius:50%}
.btn.block{display:flex;width:100%}
input,select{background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  padding:.6rem .9rem;width:100%;outline:0}
input:focus,select:focus{border-color:var(--primary)}
.codein{text-align:center;letter-spacing:.3em;font-weight:800;text-transform:uppercase}

/* ── ورود ──────────────────────────────────────────── */
#gate{height:100dvh;display:grid;place-items:center;padding:1rem;overflow:auto}
#gate .box{width:min(420px,100%);display:grid;gap:.8rem}
.brand{text-align:center;margin-bottom:.3rem}
.brand h1{font-size:2.4rem;font-weight:800;letter-spacing:-.02em}
.brand p{margin:.2rem 0 0;color:var(--ink-2);font-size:14px}
.avatars{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.avatars svg{width:52px;height:52px;border-radius:50%;cursor:pointer;border:3px solid transparent;background:var(--card)}
.avatars svg.on{border-color:var(--primary)}
.err{color:var(--danger);font-size:13px;min-height:1.2em;text-align:center}
#invited{background:var(--primary-soft);color:var(--primary-dark);border-radius:var(--r);
  padding:.55rem .8rem;text-align:center;font-size:14px;font-weight:700}
#invited b{font-size:1.1rem;letter-spacing:.15em;direction:ltr;display:inline-block}
.sep{display:flex;align-items:center;gap:.6rem;color:var(--ink-2);font-size:13px}
.sep::before,.sep::after{content:'';flex:1;height:2px;background:var(--line);border-radius:2px}

/* ── چیدمان بازی ───────────────────────────────────── */
#app{display:none;height:100dvh;flex-direction:column}
header{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;background:var(--card);
  box-shadow:0 2px 14px rgba(11,28,48,.07);flex:0 0 auto;z-index:5}
header .title{font-size:1.15rem;font-weight:800;line-height:1.1}
header .sub{font-size:11px;color:var(--ink-2)}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--card-3);color:var(--ink);
  border-radius:999px;padding:.35rem .7rem;font-size:13px;font-weight:700;border:0;cursor:pointer}
.pill.icon{padding:.4rem}

main{flex:1;min-height:0;display:flex;gap:.7rem;padding:.7rem;overflow:hidden}
#stage{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:.55rem}
#side{flex:0 0 clamp(240px,24vw,320px);display:flex;flex-direction:column;gap:.55rem;min-height:0}
.panel{background:var(--card);border-radius:var(--r-md);padding:.6rem;display:flex;flex-direction:column;min-height:0}
.panel.grow{flex:1}
.phead{font-size:12px;font-weight:800;color:var(--ink-2);padding:0 .2rem .4rem}

/* نوار کلمه */
#bar{display:flex;flex:0 0 auto;align-items:center;gap:.7rem;background:var(--card);border-radius:var(--r-md);padding:.5rem .7rem}
.wordwrap{flex:1;min-width:0;text-align:center}
#mask{font-size:1.4rem;font-weight:800;letter-spacing:.3em;direction:rtl;
  white-space:nowrap;overflow:auto;background:var(--amber-soft);color:var(--amber-ink);
  border-radius:999px;padding:.2rem .9rem;display:inline-block;max-width:100%}
#hint{font-size:11px;color:var(--ink-2);margin-top:.15rem}
#clock{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  background:var(--card-3);font-weight:800;font-variant-numeric:tabular-nums;font-size:1.05rem}
#clock.hot{background:#ffe4e6;color:var(--danger-dark);animation:pulse .8s infinite}
@keyframes pulse{50%{transform:scale(1.07)}}

/* ── لابی ──────────────────────────────────────────── */
/* بوم خالی در لابی حرفی برای گفتن ندارد؛ جایش کارت دعوت می‌نشیند. */
#lobby{display:none;flex-direction:column;gap:.6rem;margin:auto;width:min(430px,100%);padding:.5rem 0}
#lobby.on{display:flex}
.lcard{background:var(--card);border-radius:var(--r-md);padding:.8rem .9rem}
.lc{margin:.5rem 0 0;text-align:center}
.invite{display:flex;align-items:center;gap:.5rem;background:var(--card-2);
  border:2px dashed var(--line);border-radius:var(--r);padding:.45rem .5rem .45rem .9rem}
#invCode{flex:1;font-size:1.5rem;font-weight:800;letter-spacing:.22em;text-align:center;
  direction:ltr;font-variant-numeric:tabular-nums}
#lobby #start{padding:.8rem;font-size:1.05rem}

#settings{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.slabel{font-size:12px;font-weight:800;color:var(--ink-2);margin:.7rem .2rem .35rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{border:0;cursor:pointer;border-radius:999px;padding:.32rem .8rem;font-size:12.5px;font-weight:700;
  background:var(--card-2);color:var(--ink-2);display:inline-flex;align-items:center;gap:.3rem;
  transition:transform .06s}
.chip:active{transform:translateY(2px)}
.chip.on{background:var(--primary);color:#fff}
.chip .d{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.8}
.chip.e .d{background:var(--ok)} .chip.m .d{background:var(--amber)} .chip.h .d{background:var(--danger)}
.chip.on .d{opacity:1}
#settings label{display:flex;align-items:center;gap:.35rem;font-size:12px;font-weight:700;
  background:var(--card-2);border-radius:999px;padding:.25rem .3rem .25rem .7rem}
#settings select{width:auto;padding:.2rem .45rem;border-radius:999px;font-size:12px;border-width:0;background:var(--card)}

/* بوم — نسبت ۴:۳ قفل تا همه یک شکل ببینند */
/* بوم مطلق قرار می‌گیرد تا از جریان چیدمان بیرون باشد و نتواند جعبه‌ابزار را
   از صفحه بیرون براند. قاب اندازه را تعیین می‌کند، بوم درونش جا می‌شود. */
#canvasWrap{flex:1;min-height:0;position:relative}
canvas{position:absolute;inset:0;margin:auto;aspect-ratio:4/3;height:100%;width:auto;max-width:100%;
  background:#fff;border-radius:var(--r-md);border:2px solid var(--line);
  box-shadow:0 6px 20px rgba(11,28,48,.06);touch-action:none;cursor:default}
canvas.live{cursor:crosshair}
#canvasActions{position:absolute;top:.6rem;left:.6rem;display:none;gap:.35rem}
#canvasActions.on{display:flex}
.fab{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--card-3);color:var(--ink);box-shadow:0 2px 8px rgba(11,28,48,.12)}
.fab.danger{background:#ffe4e6;color:var(--danger-dark)}
#penNote{position:absolute;bottom:.6rem;right:.8rem;font-size:11px;color:var(--ink-2);display:none}
#penNote.on{display:block}

/* جعبه‌ابزار */
#tools{display:none;flex:0 0 auto;align-items:center;gap:.4rem;flex-wrap:wrap;
  background:var(--card);border-radius:var(--r-md);padding:.5rem .6rem}
#tools.on{display:flex}
.trow{display:flex;align-items:center;gap:.3rem}
.trow.wide{flex:1;flex-wrap:wrap;justify-content:flex-end}
.tsep{width:2px;height:24px;background:var(--line);border-radius:2px;margin:0 .2rem}
.tool{width:34px;height:34px;border-radius:50%;border:0;background:var(--card-3);color:var(--ink);
  cursor:pointer;display:grid;place-items:center}
.tool.on{background:var(--primary);color:#fff}
.dot{border-radius:50%;border:0;background:var(--card-3);cursor:pointer;display:grid;place-items:center;
  width:34px;height:34px}
.dot i{display:block;border-radius:50%;background:var(--ink)}
.dot.on{background:var(--primary)} .dot.on i{background:#fff}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer;padding:0}
.sw.on{outline:3px solid var(--cyan);outline-offset:2px}

/* بازیکنان */
#players{display:flex;flex-direction:column;gap:.35rem;overflow:auto;min-height:0}
.pl{display:flex;align-items:center;gap:.5rem;background:var(--card-2);border-radius:var(--r);
  padding:.35rem .5rem;border:2px solid transparent}
.pl svg{width:32px;height:32px;flex:0 0 auto;border-radius:50%}
.pl .info{flex:1;min-width:0}
.pl .n{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .tag{font-size:10px;color:var(--ink-2);font-weight:600}
.pl .s{font-weight:800;font-variant-numeric:tabular-nums;font-size:14px}
.pl.drawer{border-color:var(--primary);background:var(--primary-soft)}
.pl.ok{border-color:var(--ok);background:var(--ok-soft)}
.pl.off{opacity:.45}
.kick{border:0;background:transparent;cursor:pointer;opacity:.3;font-size:12px;padding:0 .15rem;color:var(--danger)}
.kick:hover{opacity:1}

/* چت */
#log{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.3rem;padding-left:.2rem}
.msg{background:var(--card-2);border-radius:var(--r);padding:.3rem .6rem;font-size:13.5px;max-width:95%}
.msg b{font-size:11px;color:var(--primary);display:block;font-weight:700}
.msg.sys{background:transparent;color:var(--ink-2);font-size:12px;text-align:center;max-width:100%}
.msg.cor{background:var(--ok);color:#fff;font-weight:700;text-align:center;max-width:100%;
  display:flex;align-items:center;justify-content:center;gap:.3rem}
.msg.close{background:var(--amber-soft);color:var(--amber-ink);font-weight:700}
#say{display:flex;gap:.4rem;padding-top:.5rem}

/* ── لایه‌های رویی ─────────────────────────────────── */
.veil{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(6px);
  display:none;place-items:center;padding:1rem;z-index:20;overflow:auto}
.veil.on{display:grid}
.sheet{background:var(--card);border-radius:var(--r-lg);padding:1.3rem;width:min(440px,100%);
  box-shadow:0 18px 44px -8px rgba(15,23,42,.4);text-align:center}
.ring{--p:1;width:86px;height:86px;border-radius:50%;margin:0 auto .7rem;display:grid;place-items:center;
  color:var(--primary-dark);font-variant-numeric:tabular-nums;position:relative;
  background:conic-gradient(var(--primary) calc(var(--p)*360deg),var(--card-3) 0)}
.ring::after{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--card)}
.ring > *{position:relative;z-index:1}
.ring span{font-size:1.5rem;font-weight:800;line-height:1.1}
.ring small{display:block;font-size:10px;font-weight:700;color:var(--ink-2);margin-top:-2px}
.ring.hot{background:conic-gradient(var(--danger) calc(var(--p)*360deg),var(--card-3) 0);color:var(--danger-dark)}
.word{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;
  margin-bottom:.55rem;background:var(--card);border:2px solid var(--line);
  border-radius:var(--r-md);padding:.75rem .9rem;cursor:pointer;box-shadow:0 4px 0 var(--line);
  font-size:1.25rem;font-weight:800;transition:transform .06s;text-align:right}
.word:hover{border-color:var(--primary)}
.word:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.word{flex-wrap:wrap}
.word .tags{display:flex;align-items:center;gap:.3rem;flex:1;justify-content:flex-start}
.word .lvl,.word .cat,.word .pts{font-size:11px;font-weight:700;border-radius:999px;padding:.12rem .55rem}
.word .cat{background:var(--card-3);color:var(--ink-2)}
.word .pts{background:var(--amber-soft);color:var(--amber-ink);margin-inline-start:auto}
.word .lvl.e{background:var(--ok-soft);color:#047857}
.word .lvl.m{background:var(--amber-soft);color:var(--amber-ink)}
.word .lvl.h{background:#ffe4e6;color:var(--danger-dark)}
.word.e{border-color:#a7f3d0} .word.m{border-color:#fde68a} .word.h{border-color:#fecdd3}
.big{font-size:2.4rem;font-weight:800;color:var(--primary);margin:.2rem 0}
.rows{margin-top:.6rem}
.row{display:flex;align-items:center;gap:.5rem;background:var(--card-2);border-radius:var(--r);
  padding:.45rem .6rem;margin-bottom:.35rem;text-align:right}
.row svg{width:30px;height:30px;border-radius:50%;flex:0 0 auto}
.row .n{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .d{font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums}
.row.dim{opacity:.55;background:transparent;border:2px dashed var(--line)}
.row.ok{background:var(--ok-soft);box-shadow:0 0 0 2px var(--ok) inset}
.row .av{position:relative;flex:0 0 auto;line-height:0}
.row .rk{position:absolute;bottom:-3px;left:-3px;width:16px;height:16px;border-radius:50%;
  background:var(--ok);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--card)}
.row .who{flex:1;min-width:0;text-align:right}
.row .who .n{font-weight:800;font-size:14px}
.row .who .sub{font-size:10.5px;color:var(--ink-2);font-weight:600}
.row .tag{font-size:10px;font-weight:800;border-radius:999px;padding:.1rem .5rem;
  background:var(--ok-soft);color:#047857;white-space:nowrap}
.row .tag.first{background:var(--amber-soft);color:var(--amber-ink)}
.row .d .sub{font-size:10px;font-weight:700;color:var(--ink-2)}
.nextcard{background:var(--card-2);border-radius:var(--r);padding:.6rem .75rem;margin-top:.7rem;text-align:right}
.nextcard .nx{font-size:13px;font-weight:700;display:flex;align-items:center;gap:.35rem}
.nextcard .nx .dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.nextcard .nx b{color:var(--primary)}
.nextcard .nxt{font-size:11.5px;color:var(--ink-2);font-weight:700;margin:.15rem 0 .4rem}
.nextcard .bar{height:6px;border-radius:99px;background:var(--card-3);overflow:hidden}
.nextcard .bar i{display:block;height:100%;background:var(--primary);border-radius:99px;
  width:100%;transition:width .25s linear}
.next{margin-top:.7rem;font-weight:700}
.crown{width:52px;height:52px;margin:0 auto .3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--amber-soft);color:var(--amber)}
.crown svg{width:30px;height:30px}
#overWin{font-size:15px;font-weight:700;color:var(--ink);margin-top:.2rem}

/* سکو */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:.4rem;margin:1.2rem 0 .8rem}
/* فقط فرزند مستقیم: وگرنه div های اسم و امتیاز هم ستون سکو می‌شوند */
.podium > .step{background:var(--card-3);border-radius:var(--r) var(--r) 0 0;padding:.5rem .3rem;
  flex:1 1 0;max-width:33%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:.2rem;font-size:12px}
/* بدون این، ستون کوتاه آواتار را له می‌کند و یک نقطه‌ی رنگی باقی می‌ماند */
.podium > .step > *{flex:0 0 auto}
.podium > .step.win{background:#fde68a;box-shadow:inset 0 -6px 0 var(--amber)}
.podium .medal{font-size:15px;font-weight:800;color:var(--amber-ink)}
.podium .av{position:relative;line-height:0}
.podium .rk{position:absolute;top:-6px;left:-6px;width:20px;height:20px;border-radius:50%;
  background:var(--amber);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--card)}
.podium .step:not(.win) .rk{background:var(--ink-2)}
.podium .ribbon{font-size:10px;font-weight:800;background:var(--amber);color:#fff;
  border-radius:999px;padding:.08rem .5rem;margin-top:.1rem}
.podium svg{border-radius:50%}

/* کانفتی: چند مستطیل که می‌افتند. بدون کتابخانه، بدون کنواس. */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}
.podium .who{font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium .pts{font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}

/* ── موبایل: تک‌ستونی، مثل طرح ─────────────────────── */
@media (max-width:860px){
  main{flex-direction:column;gap:.5rem;padding:.5rem}
  #side{flex:0 0 auto;flex-direction:column;min-height:0}
  #players{flex-direction:row;overflow-x:auto;padding-bottom:.15rem}
  #players .pl{flex:0 0 auto}
  #players .pl .n{max-width:78px}
  .panel.grow{flex:0 0 32vh}
  #canvasWrap{flex:0 0 42vh;min-height:170px}
  #mask{font-size:1.15rem;letter-spacing:.22em}
  header .title{font-size:1rem}
}