/* 🌕 گرگ‌نما — تم شبِ مهتاب: آبیِ عمیق، ماه کهربایی، تیم‌ها با رنگ لبه */
:root{
  --night:#0a0f1e; --night-2:#0f1730; --panel:#141d38; --panel-2:#192448;
  --line:rgba(148,168,214,.18);
  --ink:#e9edf9; --ink-dim:#a7b3d4; --ink-mute:#7d8ab0;
  --moon:#f2cf7a; --moon-2:#e0a63c;
  --villager:#4fbf8b; --wolf:#e0596b; --cult:#9d7cf0; --killer:#ff6a3d;
  --vampire:#d94f9c; --fireice:#f0973e; --knight:#7f95c2; --joker:#b56ae8;
  --bomber:#f5d63d; --neutral:#8ea3c4; --independent:#3fbfc4;
  /* 🔤 نام بازیکن‌ها اغلب با حروف فانتزیِ یونیکد است؛ این فهرستِ فونت می‌دهد تا آن
     گلیف‌ها به سریفِ پیش‌فرضِ ویندوز نیفتند و با خطِ فارسیِ سایت قاطی نشوند */
  --name-font:"Vazirmatn","Nirmala UI","Segoe UI Symbol","Cambria Math","STIX Two Math","Noto Sans","Segoe UI",Tahoma,sans-serif;
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:3.4rem}
body{
  margin:0; background:var(--night); color:var(--ink);
  font-family:"Vazirmatn","Segoe UI",Tahoma,sans-serif;
  font-size:16px; line-height:1.95; -webkit-font-smoothing:antialiased;
  /* 📱 روی گوشی نه هایلایت خاکستریِ لمسی، نه بزرگ‌نمایی خودکارِ Safari در چرخش صفحه */
  -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
/* 📱 اندازهٔ فیلدها همیشه ۱۶px می‌ماند تا iOS هنگام فوکوس زوم نکند */
input,button,select,textarea{font-size:16px; touch-action:manipulation}
a{color:var(--moon)}
h1,h2,h3{line-height:1.4; margin:0; font-weight:900; letter-spacing:-.2px}
code{font-family:"Vazirmatn",ui-monospace,monospace; background:rgba(242,207,122,.12); color:var(--moon);
  padding:1px 7px; border-radius:7px; font-size:.92em; direction:ltr; unicode-bidi:isolate; white-space:nowrap}
/* 🔤 دستور لاتین وسط متن فارسی، بدون جابه‌جایی اسلش */
.cmd{direction:ltr; unicode-bidi:isolate; display:inline-block; color:var(--moon); font-weight:700}
.wrap{width:min(1120px,100% - 2.2rem); margin-inline:auto}
.hide{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.skip{position:absolute; inset-inline-start:1rem; top:-4rem; background:var(--panel); padding:.5rem 1rem; border-radius:10px; z-index:9}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--moon); outline-offset:3px}
.scroll-x{display:flex; flex-wrap:nowrap; gap:.55rem; overflow-x:auto; scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
.topbar a{flex:0 0 auto}

/* ---------- سرصفحه ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 48% at 82% 8%, rgba(242,207,122,.30), transparent 62%),
    radial-gradient(42% 36% at 84% 12%, rgba(255,246,220,.55), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(30,54,110,.85), transparent 60%),
    linear-gradient(180deg,#0d1428,#0a0f1e 70%);
}
.hero-bg::before{
  content:""; position:absolute; inset-inline:0; bottom:0; height:48%;
  background:url("assets/hero.jpg") bottom center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
  mask-image:linear-gradient(180deg,transparent,#000 55%);
  opacity:.92;
}
.hero-bg::after{
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 62%, #dfe7ff, transparent),
    radial-gradient(1.6px 1.6px at 46% 18%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 63% 52%, #cfd9ff, transparent),
    radial-gradient(1.3px 1.3px at 8% 78%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 92% 62%, #e7eeff, transparent),
    radial-gradient(1.5px 1.5px at 72% 30%, #fff, transparent);
}
.hero-in{position:relative; padding:clamp(3rem,9vw,6.5rem) 0 2.6rem}
.kicker{margin:0 0 .6rem; color:var(--moon); font-weight:700; letter-spacing:.4px}
.hero h1{font-size:clamp(2rem,6.4vw,3.5rem)}
.h1-key{display:block; font-size:clamp(1.05rem,3.2vw,1.5rem); font-weight:700; color:var(--moon); margin-top:.45rem; letter-spacing:0}
.botid{margin:.55rem 0 0; font-size:.98rem; color:var(--ink-dim)}
.botid a{color:var(--moon); font-weight:700; text-decoration:none; unicode-bidi:plaintext; padding:.1rem .4rem; border-radius:8px; background:rgba(242,207,122,.1)}
.botid a:hover,.botid a:focus-visible{background:rgba(242,207,122,.2)}
.lede{max-width:62ch; color:var(--ink-dim); margin:1rem 0 1.7rem; font-size:1.06rem}
.cta{display:flex; flex-wrap:wrap; gap:.7rem}
.btn{text-decoration:none; border:0; cursor:pointer; font:inherit; font-weight:700; color:inherit;
  border-radius:999px;
  padding:.72rem 1.4rem; min-height:2.9rem; display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem; transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-moon{background:linear-gradient(180deg,var(--moon),var(--moon-2)); color:#20180a; box-shadow:0 10px 30px rgba(224,166,60,.28)}
.btn-ghost{border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.04)}
.facts{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; padding:0; margin:2.2rem 0 0;
  color:var(--ink-mute); font-size:.95rem}
.facts b{color:var(--ink); font-weight:900}

/* ---------- نوار بخش‌ها ---------- */
.topbar{position:sticky; top:0; z-index:5; backdrop-filter:blur(10px);
  background:rgba(10,15,30,.82); border-bottom:1px solid var(--line)}
.topbar a{color:var(--ink-dim); text-decoration:none; white-space:nowrap; font-weight:500;
  display:inline-flex; align-items:center; min-height:2.9rem; padding:.4rem .8rem}
.topbar a:hover,.topbar a:focus-visible{color:var(--moon)}
/* 📱 #369 — بخش جاری روشن می‌ماند تا کاربر بداند کجای صفحه است */
.topbar a.now,.tabbar a.now{color:var(--moon)}

/* ---------- بخش‌ها ---------- */
.sec{padding:3.4rem 0 0}
.sec h2{font-size:clamp(1.4rem,3.6vw,2rem)}
.sub{color:var(--ink-mute); margin:.45rem 0 1.4rem; max-width:70ch}
.sec-head{display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; justify-content:space-between}
.search input{width:min(320px,72vw); background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:.6rem 1.05rem; font:inherit}
.chips{margin:1.1rem 0 .4rem; padding-bottom:.3rem}
.chip{background:var(--panel); border:1px solid var(--line); color:var(--ink-dim); border-radius:999px;
  padding:.45rem 1rem; min-height:2.5rem; display:inline-flex; align-items:center;
  font:inherit; font-size:.9rem; cursor:pointer; white-space:nowrap; transition:.15s}
.chip:hover{color:var(--ink); border-color:rgba(242,207,122,.5)}
.chip[aria-pressed="true"]{background:var(--moon); border-color:var(--moon); color:#1b1408; font-weight:700}
.count{color:var(--ink-mute); font-size:.9rem; margin:.2rem 0 1rem}
.empty{color:var(--ink-mute); border:1px dashed var(--line); border-radius:var(--r); padding:1.4rem; text-align:center}

/* ---------- راهنمای متنی ---------- */
.rich{display:grid; gap:1.1rem}
.rich-cols{grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); align-items:start}
.block{background:linear-gradient(180deg,var(--panel),var(--night-2)); border:1px solid var(--line);
  border-radius:var(--r); padding:1.15rem 1.3rem}
.block h3{font-size:1.06rem; color:var(--moon); margin-bottom:.5rem}
.block ul{margin:0; padding:0; list-style:none}
.block li{padding-inline-start:1.05rem; position:relative; color:var(--ink-dim)}
.block li::before{content:"·"; position:absolute; inset-inline-start:0; color:var(--moon-2); font-weight:900}
.block p{margin:.2rem 0; color:var(--ink-dim)}

/* ---------- مراحل ---------- */
.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.steps li{counter-increment:s; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:.9rem 1.1rem .9rem 1.1rem; color:var(--ink-dim); display:flex; gap:.8rem; align-items:baseline}
.steps li::before{content:counter(s); color:var(--moon); font-weight:900; font-size:1.15rem; min-width:1.4rem}

/* ---------- کارت نقش‌ها ---------- */
.grid{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid-modes{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.role{background:linear-gradient(180deg,var(--panel),var(--night-2)); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; border-inline-start:4px solid var(--team,var(--neutral))}
.role summary{cursor:pointer; padding:.95rem 1.1rem; display:flex; gap:.6rem; align-items:center;
  justify-content:space-between; list-style:none; font-weight:700}
.role summary::-webkit-details-marker{display:none}
.role summary .nm{display:flex; gap:.45rem; align-items:center; flex-wrap:wrap}
.role summary .tm{font-size:.8rem; color:var(--ink-mute); font-weight:500; white-space:nowrap}
.role summary .tw{color:var(--ink-mute); transition:transform .2s}
.role[open] summary .tw{transform:rotate(180deg)}
.role .body{padding:0 1.1rem 1.05rem; color:var(--ink-dim); border-top:1px dashed var(--line); margin-top:.1rem}
.role .body p{margin:.65rem 0 0}
.role .code{font-size:.78rem; color:var(--ink-mute)}
.more{margin:.7rem 0 0}
.more a{color:var(--moon); text-decoration:none; font-weight:700; font-size:.9rem}
.more a:hover,.more a:focus-visible{text-decoration:underline}

/* ---------- کارت حالت‌ها ---------- */
.mode{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.05rem 1.2rem}
.mode h3{font-size:1.05rem}
.mode .meta{display:flex; flex-wrap:wrap; gap:.4rem; margin:.55rem 0 .1rem}
.mode .meta span{background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px;
  padding:.1rem .6rem; font-size:.82rem; color:var(--ink-dim)}
.mode p{margin:.4rem 0 0; color:var(--ink-dim); font-size:.95rem}
.mode .out{margin-top:.6rem; font-size:.85rem; color:var(--ink-mute)}

/* ---------- جدول امتیازها ---------- */
.board{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem}
.board table{width:100%; border-collapse:collapse; font-size:.95rem}
.board th,.board td{padding:.5rem .4rem; border-bottom:1px solid var(--line); text-align:start}
.board th{color:var(--moon); font-weight:700; font-size:.88rem}
.board .medal{font-weight:900}
.board .note{color:var(--ink-mute); font-size:.9rem; margin:.7rem 0 0}
.board-title{margin:0 0 .9rem; color:var(--ink); font-size:1.05rem}
.board .num{font-variant-numeric:tabular-nums; white-space:nowrap}
.grouptbl{margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.rankcard{background:var(--night-2); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem}
.rankcard .rank-name{margin:0; font-size:1.15rem; color:var(--ink)}
.rankcard .rank-title{margin:.25rem 0 .9rem; color:var(--moon); font-weight:700}
.rank-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr)); gap:.6rem}
.rank-cell{background:var(--panel); border:1px solid var(--line); border-radius:calc(var(--r) - .4rem); padding:.55rem .7rem; display:flex; flex-direction:column; gap:.2rem}
.rank-cell .rk{color:var(--ink-mute); font-size:.8rem}
.rank-cell .rv{color:var(--ink); font-weight:800; font-size:1.05rem}
.board-alt{display:inline-block; margin:.9rem 0 0; color:var(--moon); font-weight:700}
.skel{height:14px; border-radius:8px; background:linear-gradient(90deg,var(--panel-2),var(--panel),var(--panel-2));
  background-size:200% 100%; animation:sh 1.2s linear infinite}
@keyframes sh{to{background-position:-200% 0}}

/* ---------- 🐉 تورنومنت تیمی (#379) ---------- */
.teams{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); align-items:start; margin:.2rem 0 0}
.teams-clock{grid-column:1/-1; margin:0; color:var(--moon); font-weight:700; font-size:.9rem}
.team-card{background:linear-gradient(180deg,var(--panel-2),var(--night-2)); border:1px solid var(--line); border-radius:var(--r); padding:.85rem .95rem}
.team-card.lead{border-color:rgba(242,207,122,.5)}
.team-card.champ-team{border-color:rgba(242,207,122,.62)}
.tm-head{display:flex; align-items:baseline; gap:.5rem; margin:0 0 .3rem}
.tm-medal{min-width:1.6rem; color:var(--moon); font-weight:900; font-size:1.02rem; font-variant-numeric:tabular-nums}
.tm-name{flex:1 1 auto; color:var(--ink); font-weight:800; font-size:1.02rem}
.tm-score{color:var(--moon); font-weight:900; white-space:nowrap; font-variant-numeric:tabular-nums}
.tm-mates{margin:.1rem 0 .35rem; color:var(--ink-dim); font-size:.9rem; overflow-wrap:anywhere}
.tm-mates b{color:var(--ink); font-weight:700}
.tm-meta{margin:.1rem 0 .55rem; color:var(--ink-mute); font-size:.82rem}
.tm-meta b{color:var(--wolf)}
.tm-missions{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.tm-missions li{display:grid; gap:.22rem}
.tm-missions span{color:var(--ink-dim); font-size:.85rem}
.tm-missions em{font-style:normal; color:var(--ink-mute); font-size:.76rem; font-variant-numeric:tabular-nums}
.tm-bar{display:block; height:5px; border-radius:999px; background:rgba(148,168,214,.16); overflow:hidden}
.tm-bar b{display:block; height:100%; background:linear-gradient(90deg,var(--moon-2),var(--moon))}
.tm-missions li.ok span::after{content:" ✓"; color:var(--villager); font-weight:900}
.tm-missions li.ok em{color:var(--villager)}

/* ---------- 👑 قهرمان هفته (#302/#303) ---------- */
.champ{margin:1.3rem 0 0; padding:.72rem 1.05rem; border-radius:999px; font-size:.98rem; color:var(--ink-dim);
  background:linear-gradient(180deg,rgba(242,207,122,.15),rgba(242,207,122,.04)); border:1px solid rgba(242,207,122,.3)}
.champ b{color:var(--moon); font-weight:900; unicode-bidi:plaintext; overflow-wrap:anywhere}
.top2{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); margin:0 0 1.1rem}
.top2-card{display:flex; flex-direction:column; gap:.22rem; padding:.85rem .95rem;
  background:linear-gradient(180deg,var(--panel-2),var(--night-2)); border:1px solid var(--line);
  border-radius:calc(var(--r) - .2rem)}
.top2-card.first{border-color:rgba(242,207,122,.45); box-shadow:0 8px 24px rgba(224,166,60,.14)}
.top2-medal{font-size:1.5rem; line-height:1}
.top2-card b{color:var(--ink); font-size:1.02rem; unicode-bidi:plaintext; overflow-wrap:anywhere}
.top2-score{color:var(--moon); font-weight:800; font-size:.95rem}
.top2-meta{color:var(--ink-mute); font-size:.82rem}
.champ-hall{margin-top:1.25rem}

/* ---------- 🏆 تالار افتخار ---------- */
.hall{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); align-items:start}
.pod{background:linear-gradient(180deg,var(--panel),var(--night-2)); border:1px solid var(--line); border-radius:var(--r); padding:1.05rem 1.15rem}
.pod h3{margin:0 0 .7rem; font-size:1.02rem; color:var(--moon)}
.pod-row{margin:.35rem 0 0; color:var(--ink-dim); font-size:.95rem; overflow-wrap:anywhere}
.pod-row b{color:var(--ink); font-weight:800}
/* 🔤 نام بازیکن: وسط جملهٔ فارسی، جهتِ خودش را دارد و خط را جابه‌جا نمی‌کند */
.pn{unicode-bidi:plaintext; font-family:var(--name-font); overflow-wrap:anywhere}
.pod-note{margin:.7rem 0 0; color:var(--ink-mute); font-size:.82rem}
.pod-more{display:inline-block; margin:.2rem 0 0; color:var(--moon); font-weight:700; text-decoration:none; grid-column:1/-1}
.pod-more:hover,.pod-more:focus-visible{text-decoration:underline}
.hall-note{grid-column:1/-1; color:var(--ink-mute); font-size:.9rem; margin:0}

/* ---------- 🔎 جست‌وجوی آیدی + 🆚 مقایسه (#290) ---------- */
.sf{background:var(--night-2); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem; margin:0 0 1rem}
.sf-lead{margin:0 0 .7rem; color:var(--ink-dim); font-size:.92rem}
.sf-row{display:flex; flex-wrap:wrap; gap:.6rem}
.sf-input{flex:1 1 12rem; min-width:0; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:.6rem 1.05rem; font:inherit; direction:ltr; text-align:end}
.sf-input::placeholder{color:var(--ink-mute)}
.sf-err{margin:.6rem 0 0; color:var(--wolf); font-size:.9rem; min-height:1.2rem}
.sf-result>*+*{margin-top:.9rem}
.cmp{background:var(--night-2); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem}
.cmp-title{margin:0 0 .7rem; font-size:1rem; color:var(--moon)}
.cmp table{width:100%; border-collapse:collapse; font-size:.92rem}
.cmp th,.cmp td{padding:.4rem .35rem; border-bottom:1px solid var(--line); text-align:start}
.cmp th{color:var(--ink-mute); font-weight:700; font-size:.85rem}
.cmp .num{font-variant-numeric:tabular-nums; white-space:nowrap}
.cmp .note{color:var(--ink-dim); font-size:.92rem; margin:.7rem 0 0}
/* 🗓 برتر هفته/ماه و تالار همین گروه، زیر جدول گروهی (#291) */
.honor{margin-top:1.2rem}
.honor>.board-title{grid-column:1/-1; margin:0}

/* 📱 #292 داخل تلگرام: فوتر به safe-area و نوار پایین برنامه تن می‌خورد */
.in-tg .foot{padding-bottom:calc(1.4rem + env(safe-area-inset-bottom, 0px))}

/* ---------- ❤️ حمایت ---------- */
.donate{background:linear-gradient(180deg,var(--panel),var(--night-2)); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem}
.d-line{margin:0 0 1rem; color:var(--ink-dim)}
.d-line b{color:var(--ink)}
.card-no{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem;
  width:100%; padding:.9rem 1.1rem; margin:0; cursor:pointer;
  background:var(--panel-2); border:1px dashed var(--moon-2); border-radius:12px; color:var(--ink);
  font-family:inherit; line-height:1.6; transition:border-color .18s, background .18s}
.card-no:hover,.card-no:focus-visible{background:#1e2b57; border-color:var(--moon); outline:none}
.card-no .digits{font-size:clamp(1.05rem,3.4vw,1.5rem); font-weight:900; letter-spacing:1.5px; color:var(--moon); white-space:nowrap; user-select:all; -webkit-user-select:all}
.card-no .tap{font-size:.82rem; color:var(--ink-mute)}
.holder{margin:.9rem 0 0; color:var(--ink-dim)}
.holder b{color:var(--ink)}
#copyMsg{margin:.7rem 0 0; font-size:.92rem; color:var(--villager)}
#copyMsg.bad{color:var(--wolf)}
@media (max-width:520px){.card-no{justify-content:center} .card-no .digits{letter-spacing:.5px}}

/* ---------- گروه‌های بازی ---------- */
.groups{display:grid; gap:.7rem}
.faq-item{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.15rem; margin:0 0 .7rem}
.faq-item h3{margin:0 0 .5rem; font-size:1.05rem; color:var(--moon)}
.faq-item p{margin:0; color:var(--ink-dim); line-height:2}
.g-grid{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.g-card{display:flex; align-items:center; justify-content:space-between; gap:1rem; text-decoration:none;
  min-width:0;
  background:linear-gradient(180deg,var(--panel),var(--night-2)); border:1px solid var(--line);
  border-radius:var(--r); padding:.95rem 1.1rem; color:var(--ink); transition:transform .15s ease, border-color .15s ease}
.g-card:hover,.g-card:focus-visible{transform:translateY(-2px); border-color:rgba(242,207,122,.55)}
.g-name{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.g-join{flex:0 0 auto; font-size:.82rem; color:var(--moon); font-weight:700}
.g-note{margin:0; color:var(--ink-mute); font-size:.9rem}

/* ---------- پاورقی ---------- */
.foot{margin-top:4rem; border-top:1px solid var(--line); background:var(--night-2)}
.foot-in{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; justify-content:space-between; padding:1.5rem 0}
.foot p{margin:0}
.dim{color:var(--ink-mute); font-size:.9rem}

/* ---------- صفحه‌های مجزای نقش و حالت ---------- */
.subhero{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--night-2),var(--night)); padding:1.5rem 0 1.7rem}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0 0 1.1rem; font-size:.86rem; color:var(--ink-mute)}
.crumb a{color:var(--ink-dim); text-decoration:none}
.crumb a:hover,.crumb a:focus-visible{color:var(--moon)}
.crumb .sep{color:var(--ink-mute); opacity:.6}
.pagetitle{font-size:clamp(1.55rem,5.2vw,2.5rem); color:var(--team,var(--ink)); overflow-wrap:anywhere}
.tags{display:flex; flex-wrap:wrap; gap:.45rem; margin:.9rem 0 0}
.teamtag{background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:.3rem .85rem; font-size:.85rem; color:var(--ink-dim); direction:ltr; unicode-bidi:isolate}
.rellist{display:flex; flex-wrap:wrap; gap:.45rem}
.rellist a{background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem; font-size:.9rem; color:var(--ink-dim); text-decoration:none; transition:border-color .15s ease, color .15s ease}
.rellist a:hover,.rellist a:focus-visible{color:var(--moon); border-color:rgba(242,207,122,.55)}
.idx-group ul{margin:.2rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.4rem .9rem}
.idx-group li a{color:var(--ink-dim); text-decoration:none; font-size:.95rem}
.idx-group li a:hover,.idx-group li a:focus-visible{color:var(--moon)}
.idx-group p{margin:.35rem 0 0; color:var(--ink-mute); font-size:.9rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} .skel{animation:none} *{transition:none}}

/* ============================================================
   📱 #369 — موبایل‌محور
   اکثر بازیکن‌ها سایت را با گوشی باز می‌کنند (خیلی‌ها داخل خودِ
   تلگرام)، پس اینجا صفحه تنگ نمی‌شود، دکمه‌ها اندازهٔ انگشت
   می‌گیرند و جدول‌های هفت‌ستونه به کارت‌های دوخطی تبدیل می‌شوند.
   ============================================================ */

/* ---------- نوار پایین: خانهٔ دسترس‌ترین بخش‌ها، فقط در گوشی ---------- */
.tabbar{display:none}
@media (max-width:720px){
  .tabbar{
    display:flex; position:fixed; inset-inline:0; bottom:0; z-index:7;
    background:rgba(10,15,30,.94); backdrop-filter:blur(10px);
    border-top:1px solid var(--line); padding:0 .25rem env(safe-area-inset-bottom,0px)}
  .tabbar a{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.05rem;
    padding:.45rem .1rem .4rem; color:var(--ink-mute); text-decoration:none;
    font-size:.68rem; font-weight:700; -webkit-tap-highlight-color:transparent}
  .tabbar a .ic{font-size:1.2rem; line-height:1.15}
  .tabbar a.now{color:var(--moon)}
  /* 🔒 محتوا زیر نوارِ پایینِ چسبان نمی‌ماند */
  body{padding-bottom:calc(4.1rem + env(safe-area-inset-bottom,0px))}
}

@media (max-width:640px){
  html{scroll-padding-top:3.1rem}
  body{line-height:1.82}
  .wrap{width:min(1120px, 100% - 1.5rem)}

  /* ---------- سرصفحه کوتاه ---------- */
  .hero-in{padding:calc(2.1rem + env(safe-area-inset-top,0px)) 0 1.7rem}
  .lede{font-size:1rem; margin:.8rem 0 1.25rem}
  .cta{gap:.55rem}
  .cta .btn{flex:1 1 100%; justify-content:center}
  .facts{gap:.3rem 1rem; margin-top:1.4rem; font-size:.9rem}
  .champ{margin-top:1rem; padding:.6rem .85rem; font-size:.9rem}

  /* ---------- ریتم عمودی فشرده ---------- */
  .sec{padding:2.2rem 0 0}
  .sec h2{font-size:clamp(1.3rem,6vw,1.7rem)}
  .sub{margin:.4rem 0 1.05rem}
  .sec-head{gap:.7rem}
  .search{width:100%}
  .search input{width:100%}

  /* ---------- شبکه‌ها تک‌ستونه (صفحه‌های ۳۲۰px هم سرریز نکنند) ---------- */
  .grid,.grid-modes,.rich-cols,.hall,.steps,.g-grid,.top2{grid-template-columns:minmax(0,1fr)}
  .rank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ---------- کارت‌ها با ضربه هم باز می‌شوند ---------- */
  .role summary{padding:.9rem 1rem; min-height:3.1rem}
  .role .body{padding:0 1rem 1rem}
  .more a{display:inline-flex; align-items:center; min-height:2.4rem}
  .mode,.block,.pod,.rankcard,.faq-item,.sf,.cmp,.donate{padding:1rem 1.05rem}
  .steps li{padding:.85rem .95rem}
  .g-card{padding:.95rem 1rem; min-height:3rem}
  .board-alt{display:inline-flex; align-items:center; min-height:2.6rem; margin:.5rem 1rem .3rem 0}
  .pod-more{display:inline-flex; align-items:center; min-height:2.4rem}
  .rellist a{display:inline-flex; align-items:center; min-height:2.4rem; padding:.2rem .9rem}
  .crumb a{display:inline-flex; align-items:center; min-height:2.2rem; padding:.1rem .3rem}
  .idx-group li a{display:inline-flex; align-items:center; min-height:2.2rem}
  .subhero{padding:1.1rem 0 1.3rem}

  /* ---------- جدول‌ها: هر رکورد یک کارت دوخطی ---------- */
  .board{padding:.95rem .8rem}
  .board table,.cmp table,.champ-hall table{display:block; font-size:.92rem}
  .board thead,.champ-hall thead{display:none}
  .board tbody,.champ-hall tbody{display:block}
  .board tr,.champ-hall tr{
    display:block; border:1px solid var(--line); border-radius:12px;
    padding:.55rem .7rem; margin:0 0 .5rem; background:rgba(255,255,255,.025)}
  .board td,.champ-hall td{display:inline; padding:0; border:0; text-align:start}
  .board td::before,.champ-hall td::before{content:none}
  .board tr>td:first-child{font-weight:900; color:var(--moon); margin-inline-end:.45rem}
  .board td.pn,.champ-hall td.pn{font-weight:700; color:var(--ink)}
  /* مقدارِ عددیِ هر ستون با برچسبِ خودش، خطِ دوم */
  .board td:nth-child(n+3),.board .champ-hall td:nth-child(n+2){
    display:inline-block; margin:.25rem .7rem 0 0; font-size:.8rem; color:var(--ink-mute)}
  .board td::before,.board .champ-hall td::before{margin-inline-end:.3rem}
  .board .tbl-xp td:nth-child(3)::before{content:"⚡ XP"}
  .board .tbl-xp td:nth-child(4)::before{content:"🎖 درجه"}
  .board .tbl-xp td:nth-child(5)::before{content:"🏅 لقب"}
  .board .tbl-xp td:nth-child(6)::before{content:"🎮 بازی"}
  .board .tbl-xp td:nth-child(7)::before{content:"🏆 برد"}
  .board .tbl-weekly td:nth-child(3)::before{content:"⭐ امتیاز"}
  .board .tbl-weekly td:nth-child(4)::before{content:"✅ کامل"}
  .board .tbl-weekly td:nth-child(5)::before{content:"🔥 سخت"}
  .board .tbl-groups td:nth-child(3)::before{content:"⚡ XP"}
  .board .tbl-groups td:nth-child(4)::before{content:"🎮 بازی"}
  .board .tbl-groups td:nth-child(5)::before{content:"👥 بازیکن"}
  /* 🏛 قهرمانان هفته: «هفته» خط اول، سه نفر برتر برچسب‌دار */
  .board .champ-hall td:nth-child(1){display:block; font-weight:700; color:var(--ink); margin:0}
  .board .champ-hall td:nth-child(2)::before{content:"👑 "}
  .board .champ-hall td:nth-child(3)::before{content:"🥈 "}
  .board .champ-hall td:nth-child(4)::before{content:"🥉 "}
  .board .champ-hall td:nth-child(5)::before{content:"⭐ "}
  /* نامِ بازیکن در کارتِ قهرمانان رنگش را نگه می‌دارد، برچسب فقط پیشش می‌آید */
  .board .champ-hall td.pn:nth-child(n+2){color:var(--ink); font-weight:700}
  /* 🆚 مقایسه در گوشی هم جدول می‌ماند؛ فقط ستون‌ها تنگ‌تر */
  .cmp table{display:table; font-size:.88rem}
  .cmp td,.cmp th{padding:.4rem .3rem}

  /* ---------- پاورقی ---------- */
  .foot{margin-top:2.4rem}
  .foot-in{flex-direction:column; align-items:flex-start; gap:.45rem; padding:1.2rem 0}
}

/* 📱 گوشی‌های ریز: حرف‌فاصله‌های لاتینِ شماره کارت و عنوان‌ها جا می‌شوند */
@media (max-width:380px){
  .pagetitle{font-size:1.5rem}
  .hero h1{font-size:1.75rem}
  .tabbar a{font-size:.62rem}
}

/* ---------- 👆 دستگاه لمسی: افکت hover بعد از ضربه گیر نمی‌کند ---------- */
@media (hover:none){
  .btn:hover,.g-card:hover,.card-no:hover{transform:none}
  .g-card:hover{border-color:var(--line)}
  .chip:not([aria-pressed="true"]):hover{color:var(--ink-dim); border-color:var(--line)}
  .card-no:hover{border-color:var(--moon-2)}
}