/* ---------------------------------------------------------------------------
   سایتِ بازی وان.

   زبانِ بصری از لندینگ‌های خوبِ امروزی گرفته شده (21st.dev): شبکه‌ی نقطه با
   ماسکِ شعاعی، قوسِ نور پشتِ سرصفحه، تیترِ گرادیانی، کارتِ بنتو، و درخششی که
   با نشانه‌گر روشن می‌شود. ولی همه‌اش با CSS انجام شده و نه یک بایت جاوااسکریپت
   — چون همین صفحه باید روی اینترنتِ موبایلِ ایران سریع بالا بیاید.

   پالت همان پالتِ بازی است (src/style.css و Palette.cs) تا سایت و میز یکی
   دیده شوند، و هیچ تصویری در کار نیست: نقش، ورق و نور همه کشیده می‌شوند.
--------------------------------------------------------------------------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --night: #231b56;
  --night-deep: #130c33;
  --ink-0: #0f0929;
  --plate: #251d55;
  --plate-hi: #2f2569;
  --sand: #f6e7d4;
  --cream: #f1e1c7;
  --card: #fcf5eb;
  --ink: #2a2440;
  --gold: #c9a24a;
  --gold-bright: #e9cd7e;
  --gold-btn-top: #e6b651;
  --gold-btn-bot: #c58334;
  --green: #5ad07a;
  --text: #e9dfcc;
  --muted: #b9b0d4;
  --faint: #8d85ad;
  --hair: #ffffff1a;
  --hair-2: #ffffff0f;

  --wrap: 1140px;
  /* پلکانِ گردی. پیش‌تر ده مقدارِ جدا در شیت بود (۷ تا ۳۰) که شش‌تاشان
     بینِ ۷ و ۱۵ و از هم تشخیص‌ناپذیر بودند. حالا چهار پله + قرصِ ۹۹۹.
     استثنا: شکلِ «ورق» (.fc، .gmark) گردی‌اش با اندازه‌اش
     بالا و پایین می‌رود — آن یک شکلِ تکرارشونده است، نه پله‌ی رابط. */
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 13px;
  --r-xs: 9px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* دکمه و ورودی قلمِ صفحه را به ارث نمی‌برند و به Arial می‌افتند؛ صریح می‌گوییم. */
button, input, select, textarea { font: inherit; }

/* hidden باید ببرد. هر قاعده‌ای که display می‌دهد (مثلِ دکمه‌ی خروج با inline-flex)
   وگرنه صفتِ hidden ِ مرورگر را باطل می‌کند و عنصر همیشه دیده می‌شود — همان
   باگی که «ورود / ثبت‌نام» و «خروج» را کنارِ هم نشان می‌داد. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Vazirmatn", system-ui, "Tahoma", sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
  background: var(--ink-0);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img { max-width: 100%; }
a { color: var(--gold-bright); text-underline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; position: relative; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 30;
  background: var(--gold-bright); color: var(--ink);
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { inset-inline-start: 0; }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

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

/* ===========================================================================
   نوارِ بالا
=========================================================================== */
.top {
  position: sticky; top: 0; z-index: 20;
  background: #130c33cc;
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--hair-2);
}
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 66px; }
/* نشان: یک ورقِ کوچکِ کج — همان چیزی که کلِ سایت درباره‌اش است. */
.top nav { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-size: 15px; padding: 8px 13px; border-radius: var(--r-sm); transition: color .15s, background .15s; }
.top nav a:hover { color: var(--sand); background: #ffffff0f; }
.top nav a.cta {
  color: var(--ink); font-weight: 700; margin-inline-start: 8px;
  background: linear-gradient(180deg, var(--gold-btn-top), var(--gold-btn-bot));
  box-shadow: 0 2px 12px #e6b6513d;
}
.top nav a.cta:hover { color: var(--ink); filter: brightness(1.06); }

@media (max-width: 620px) {
  .top nav a:not(.cta) { display: none; }
  .top nav a.cta { margin-inline-start: 0; padding: 8px 15px; font-size: 14.5px; }
}

/* ===========================================================================
   لایه‌های زمینه — شبکه‌ی نقطه، قوسِ نور، دانه
=========================================================================== */
.bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* نقطه‌ها تا نیمه‌ی صفحه دیده می‌شوند و بعد محو: ماسکِ شعاعی همان ترفندی است
   که زمینه را «عمیق» نشان می‌دهد بی‌آن‌که شلوغ شود. */
.bg .dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, #ffffff26 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 75% 62% at 50% 8%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 62% at 50% 8%, #000 25%, transparent 72%);
}
/* قوسِ نور: یک بیضیِ طلاییِ بسیار محو، پشتِ تیتر. */
.bg .glow {
  position: absolute; inset-inline: -20%; top: -46%;
  height: 92%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #6a4bd499 0%, #3b2a8f4d 45%, transparent 100%);
  filter: blur(26px);
}
.bg .glow.warm {
  inset-inline: 8%; top: auto; bottom: -34%; height: 58%;
  background: radial-gradient(closest-side, #e9cd7e3d 0%, #c9a24a1f 48%, transparent 100%);
}
@media (min-width: 940px) {
  /* در طرح میز حدودِ ۶۰٪ عرضِ هیرو را می‌گیرد و متن بقیه را؛ با نسبتِ
     تقریباً مساویِ قبلی میز کوچک می‌مانْد و هیرو خالی به نظر می‌رسید. */
  .hero .wrap { grid-template-columns: 1fr 1.35fr; padding-block: 72px 76px; gap: 30px; }
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1.26;
  letter-spacing: -.015em;
  color: var(--sand);
}

.actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none;
  padding: 14px 27px; border-radius: var(--r-sm);
  font-weight: 700; font-size: 16.5px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-btn-top), var(--gold-btn-bot));
  box-shadow: 0 6px 22px #e6b65133, inset 0 1px 0 #ffffff66;
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px #e6b6514d, inset 0 1px 0 #ffffff66; }
.btn:active { transform: translateY(0); }
/* برقِ آرامی که از روی دکمه رد می‌شود. */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, #ffffff8c 48%, transparent 58%);
  transform: translateX(-120%);
  animation: sweep 4.6s ease-in-out infinite;
}
@keyframes sweep { 0%, 62% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }

.btn.ghost {
  color: var(--text);
  background: #ffffff0d;
  border: 1px solid var(--hair);
  box-shadow: none;
}
.btn.ghost::after { display: none; }
.btn.ghost:hover { background: #ffffff17; box-shadow: none; }
.btn svg { width: 17px; height: 17px; fill: currentColor; opacity: .85; }

@media (max-width: 480px) {
  .fc { width: 80px; height: 116px; margin-inline-end: -24px; border-radius: 11px; /* شکلِ ورق */ }
  .fc .mid svg { width: 40px; height: 40px; }
  .fc .corner { font-size: 13px; inset-block-start: 7px; inset-inline-start: 8px; }
  .fc .corner svg { width: 10px; height: 10px; }
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ===========================================================================
   بخش‌ها
=========================================================================== */
section { padding-block: 62px 10px; position: relative; }
@media (min-width: 820px) { .bento { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .cell.wide { grid-column: span 2; } }
@media (max-width: 560px) { .cell.feature .big { width: 118px; height: 118px; inset-inline-end: 10px; } }

/* ---- شبکه‌ی بازی‌ها ---- */
.grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
@keyframes blink { 50% { opacity: .35; } }

.tile {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  border-radius: var(--r-md); padding: 21px; min-height: 296px;
  text-decoration: none; color: inherit;
  border: 1px dashed #ffffff33;
  background: #ffffff08;
  transition: background .2s ease, border-color .2s ease;
}
.tile:hover { background: #ffffff12; border-color: #e9cd7e70; }
.tile b { color: var(--sand); font-size: 18px; }
.tile span { color: var(--muted); font-size: 14px; line-height: 1.7; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 34px; } }

/* ---- فراخوانِ پایانی ---- */
.cta-band { position: relative; overflow: hidden; margin-block: 70px 0; }
.cta-band .inner {
  position: relative; overflow: hidden;
  border: 1px solid #e9cd7e33; border-radius: var(--r-lg);
  padding: 52px 30px;
  text-align: center;
  background:
    radial-gradient(120% 150% at 50% 0%, #3a2b86 0%, #241a5c 45%, #1a1245 100%);
}
.cta-band .inner::before {
  content: ""; position: absolute; inset-inline: 22%; inset-block-start: -62%;
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #e9cd7e33, transparent);
}
.cta-band h2 { position: relative; margin: 0 0 12px; font-size: clamp(26px, 4.6vw, 38px); color: var(--sand);text-wrap: balance; }
.cta-band p { position: relative; margin: 0 0 26px; color: var(--muted); font-size: 16px; }
.cta-band .actions { position: relative; justify-content: center; }
@media (min-width: 900px) { .ghero .wrap { grid-template-columns: 1fr auto; } }
@media (max-width: 900px) { .gmark { display: none; } }

.cols { display: grid; gap: 16px; grid-template-columns: 1fr; padding-block: 44px 0; }
@media (min-width: 880px) { .cols { grid-template-columns: 1.4fr .6fr; } }

/* ===========================================================================
   متنِ بلند (حریمِ خصوصی)
=========================================================================== */
.prose { max-width: 70ch; padding-block: 52px 10px; }
.prose h1 { font-size: clamp(30px, 5vw, 42px); margin-bottom: 6px; }
.prose h2 { font-size: 21px; color: var(--gold-bright); margin-block: 36px 8px; background: none; -webkit-text-fill-color: currentColor; }
.prose p, .prose li { color: var(--text); font-size: 15.5px; line-height: 1.95; }
.prose ul { padding-inline-start: 22px; }
.prose li { margin-bottom: 8px; }
.foot { border-top: 1px solid var(--hair-2); background: #0d0725; margin-top: 62px; }
.foot .wrap { display: grid; gap: 30px; grid-template-columns: 1fr; padding-block: 46px 34px; }
@media (min-width: 780px) { .foot .wrap { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot h4 { margin: 0 0 12px; font-size: 13px; color: var(--gold); letter-spacing: .1em; }
.foot ul { margin: 0; padding: 0; list-style: none; }
/* هدفِ لمس دستِ‌کم ۴۴ پیکسل. پیش‌تر پیوندها جعبه‌ی ۲۳ پیکسلی بودند با ۸ پیکسل
   فاصله — روی گوشی نیمی از ضربه‌ها به پیوندِ بغلی می‌خورد. حالا خودِ <a> جعبه
   را می‌سازد و فاصله‌ی li صفر می‌شود، پس ریتمِ دیداری تقریباً همان می‌ماند. */
.foot li { margin-bottom: 0; }
.foot a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none; font-size: 14.5px; transition: color .15s;
}
.foot a:hover { color: var(--sand); }
.foot .muted { color: var(--faint); font-size: 14px; line-height: 1.85; }

/* ستونِ نشان: کاشیِ خال، نام، و دو خطِ کوتاه — مثلِ آیکونِ اپ در فروشگاه. */
.fbrand { text-align: start; }
.ftile {
  display: grid; place-items: center; inline-size: 68px; block-size: 68px;
  border-radius: 20px; background: linear-gradient(180deg, #2b2f74, #1b1f56);
  border: 2px solid var(--gold-rim, #8f6f2e); box-shadow: inset 0 1px 0 #ffffff1f;
  margin-block-end: 14px;
}
.ftile svg { inline-size: 34px; block-size: 34px; fill: var(--gold, #e6b651); }
.fname { margin: 0 0 8px !important; font-size: 19px !important; color: var(--sand) !important; letter-spacing: 0 !important; }

/* فهرست‌ها نشان‌دار می‌شوند: خالِ هر بازی همان است که سرِ کارتِ تالار دارد. */
.flist a { gap: 10px; }
.flist .fp, .flist .fi { inline-size: 17px; block-size: 17px; flex: none; opacity: .85; }
.flist .fp { fill: var(--gold, #e6b651); }
.flist .fi { stroke: var(--gold, #e6b651); }

.legal { border-top: 1px solid var(--hair-2); }
.legal .wrap {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  padding-block: 17px; color: var(--faint); font-size: 13px;
}
.fsocial { display: flex; gap: 6px; }
.fsocial a { padding: 10px; min-height: 0; }
.fsocial .fi { inline-size: 19px; block-size: 19px; stroke: var(--gold, #e6b651); opacity: .8; }
.fsocial a:hover .fi { opacity: 1; }

/* =========================================================================
   «میزِ فرش» — لایه‌ی طراحیِ منتخب.

   زبان از خودِ اپ می‌آید (Palette.cs): سرمه‌ای عمیق، قابِ طلاییِ برجسته،
   پلاکِ کرم، فیروزه‌ای برای حالتِ فعال. صفحه بینِ سرمه‌ای و کرم نوبت
   می‌گیرد: سربرگِ کرم، هیروی سرمه‌ای، بخشِ بازی‌ها روی کرم.

   هیچ تصویرِ تازه‌ای اضافه نشد. فرشِ میز همان carpet-lajvard.webp است که
   کلاینتِ بازی از قبل سرو می‌کند، پرتره‌ها همان آواتارهای اپ، و آرتِ
   بازی‌ها همان‌هاست. سایت و اپ عمداً یک دارایی دارند.
   ========================================================================= */
:root {
  --ind: #2b3074;
  --ind-2: #232a63;
  --gold-rim: #c58334;
  --gold-hi: #e9cd7e;
  --teal-rim: #1f5f63;
  --plate: #f1e1c7;
  --plate-edge: #d69c53;
}

/* ---- سربرگِ کرم ---- */
.top { background: var(--plate); border-block-end: 3px solid var(--gold-rim); box-shadow: 0 2px 0 #00000026; }
.top nav a { color: #4a3718; }
.top nav a:hover { background: #00000010; color: #2a1d08; }
.top nav a.cta {
  background: linear-gradient(180deg, var(--gold-btn-top), var(--gold-btn-bot));
  color: #3a2a10; border: 2px solid #8f6f2e;
}

/* چهار ورقِ وسط، صلیبی */
.trick { position: absolute; inset: 0; display: grid; place-items: center; }

/* ---- بخشِ بازی‌ها روی کاغذ ---- */
/* بخش‌ها داخلِ .wrap اند، پس زمینه‌شان فقط به عرضِ ستون می‌شد. این ترفند
   زمینه را تا لبه‌ی صفحه می‌کشد بی‌آن‌که ساختارِ HTML عوض شود. */
#games, #how {
  background: var(--plate); padding-block: 44px;
  box-shadow: 0 0 0 100vmax var(--plate);
  clip-path: inset(0 -100vmax);
}
/* بخشِ بازی‌ها و سه‌قدم یک بلوکِ کاغذیِ پیوسته‌اند؛ فاصله بینشان نوارِ
   تیره‌ی بی‌دلیل می‌ساخت. */
#games { padding-block-end: 8px; }
#how { padding-block-start: 8px; }

.tile { border: 2px dashed #8f6f2e; background: #ffffff1a; }
.tile b { color: #3a2a10; }
.tile span { color: #6b5426; }
.tile:hover { background: #ffffff33; }

/* ---- نوارِ پایانی و پاورقی ---- */
.cta-band { background: var(--ind); padding-block: 56px; margin-block-start: 0; }
.cta-band .inner { border: 2px solid #8f6f2e; background: linear-gradient(180deg, #34397f, #262c6b); }
.foot { background: var(--ind-2); border-block-start: 3px solid var(--gold-rim); margin-block-start: 0; }

/* ---- بدنه‌ی هر دو صفحه روی کاغذ ----
   مثلِ #games تمام‌عرض می‌شود، چون داخلِ .wrap اند. */
.cols, .more, .prose {
  background: var(--plate);
  box-shadow: 0 0 0 100vmax var(--plate);
  clip-path: inset(0 -100vmax);
}
.cols { padding-block: 44px 8px; }
.prose { padding-block: 44px; max-width: none; }
.prose > * { max-width: 72ch; margin-inline: auto; }

/* ---- متنِ بلندِ حریمِ خصوصی ---- */
.prose { text-align: center; }
.prose > :not(h1) { text-align: start; }
.prose h1 { margin-block-end: 18px; font-size: clamp(24px, 4vw, 34px); }
.prose h2 {
  color: #8a5a1a; font-size: 21px; margin-block: 34px 8px;
  background: none; -webkit-text-fill-color: currentColor;
}
.prose p, .prose li { color: #4a3718; }
/* روی کاغذِ کرم ۴٫۳۰ می‌داد؛ یک پرده تیره‌تر تا از ۴٫۵ رد شود. */
.prose .muted { color: #6f5a30; }
.prose b { color: #3a2a10; }
.prose ul { padding-inline-start: 20px; }
.prose li::marker { color: var(--gold-rim); }

/* دکمه‌ی «شبح» روی کاغذ: در تمِ تیره متنِ روشن روی زمینه‌ی شفاف بود، که
   روی کرم محو می‌شد — «به‌زودی در کافه‌بازار» تقریباً نامرئی شده بود.
   روی کاغذ می‌شود قابِ طلاییِ توخالی با متنِ تیره. */
.panel .btn.ghost, .prose .btn.ghost {
  background: #ffffffa6; color: #4a3718;
  border: 2px solid var(--gold-rim);
  box-shadow: inset 0 0 0 2px #ffffffb3;
}
.panel .btn.ghost:hover, .prose .btn.ghost:hover { background: #fff; }

/* روی صفحه‌ی باریک صحنه کوتاه می‌شود (۳۹۰px → ۲۳۷px ارتفاع) و چهار پرتره،
   تقاطعِ وسط و دست با هم جا نمی‌شوند. دست کم‌اهمیت‌ترینِ سه‌تاست و همان هم
   روی پرتره‌ی پایین می‌افتد، پس همان می‌رود؛ میز و قهرمان‌ها می‌مانند. */
@media (max-width: 560px) {
  .scene .fan { display: none; }
  .tc { inline-size: 15%; }
}

/* =========================================================================
   زیورها، از تصویرِ واقعی.

   تا حالا هر قاب و نقش با box-shadowِ لایه‌ای و مسیرِ دست‌سازِ SVG ساخته
   می‌شد. CSS رنگ و گوشه‌ی گرد را خوب می‌سازد، ولی برجستگیِ فلزی و اسلیمیِ
   پرکار را نه — نتیجه بدل درمی‌آمد. این‌ها حالا تصویرند.

   قابِ ۹‌تکه (border-image) به‌کار می‌رود نه پس‌زمینه‌ی کشیده، تا پلاک و
   دکمه با هر طولِ متنی بکشند بی‌آن‌که گوشه‌هایشان بدشکل شود.
   ========================================================================= */

/* ---- بافتِ زمینه‌ی هیرو ---- */
.bg .dots {
  background-image: url("/art/ui/tile.webp");
  background-size: 128px 128px;
  background-repeat: repeat;
  opacity: .10;
}

/* عنوانِ فقط برای صفحه‌خوان — رفرنس بالای شبکه عنوانِ دیداری ندارد، ولی
   صفحه بی‌سرفصل نباید بمانَد. */
.sr {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- قلاب‌های دو طرفِ نشان ----
   تصویر پشتِ واژه می‌نشیند و واژه با قلم روی آن می‌مانَد. */
/* قلاب‌ها فقط دورِ خودِ واژه می‌نشینند، نه دورِ کلِ نشان با BAZIVAN — وگرنه
   آن‌قدر از هم باز می‌شوند که دیگر قابِ واژه به نظر نمی‌رسند. */

/* ---- دکمه: صفحه‌ی طلاییِ واقعی ----
   این‌جا border-image ابزارِ غلطی است: دکمه گرادیانِ عمودی دارد و برشِ
   ۹‌تکه وسطش را عمودی می‌کِشد و گرادیان را خراب می‌کند. کششِ ساده‌ی
   ۱۰۰٪×۱۰۰٪ گرادیان را سالم نگه می‌دارد و سرهای گردش هم در این نسبت‌ها
   تقریباً دست‌نخورده می‌مانند. */
.btn, .top nav a.cta {
  background: linear-gradient(180deg, #fbe6a3 0%, #e6b651 55%, #c58334 100%);
  border: 1.5px solid #8f6f2e; border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff6d8c0, inset 0 -2px 0 #8f5a1e55, 0 3px 0 #6f4f16, 0 10px 18px -8px #00000080;
  color: #3a2a10;
}
.btn:hover, .top nav a.cta:hover { filter: brightness(1.06); }
.btn.ghost {
  border-image: none;
  background: #ffffff14;
  box-shadow: inset 0 0 0 2px #ffffff3d;
  color: var(--sand);
}
.panel .btn.ghost, .prose .btn.ghost { box-shadow: inset 0 0 0 2px var(--gold-rim); }

/* =========================================================================
   شبکه‌ی بازی‌ها، مطابقِ خودِ طرح.

   پیش‌تر ساختارِ قدیمیِ صفحه سرِ جایش مانده بود — بنتو با دو کارتِ ویژه و
   سه خانه‌ی آمار، و یک پلاکِ درشتِ عنوان بالایش. طرح هیچ‌کدام را ندارد:
   یک شبکه‌ی یکدست، هفت کاشی در هر سطر، هر کاشی فقط آرت و پلاکِ نام.
   ========================================================================= */
#games { padding-block: 34px 40px; }
.grid {
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 760px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px)  { .grid { grid-template-columns: repeat(2, 1fr); } }

/* خانه‌ی «میزِ مرورگر» هم‌قدِ بقیه */
.tile {
  min-block-size: 0; aspect-ratio: 1 / 1.06;
  border-radius: 16px; padding: 14px;
  align-items: center; text-align: center; gap: 4px;
}
.tile b { font-size: clamp(13px, 1.1vw, 16px); }
.tile span { font-size: 12px; }

/* =========================================================================
   صفحه‌ی خانه، از نو — مطابقِ طرحِ منتخب.

   سه بند و بس: نوارِ کرمِ بالا، صحنه‌ی فرش، و قفسه‌ی کاشی‌ها. رنگ‌ها از
   خودِ طرح نمونه‌برداری شده‌اند، نه از چشم.

   زمینه‌ی صحنه یک تصویر است که از همان طرح درآمده و متن و دکمه‌اش پاک
   شده، تا این‌جا متنِ واقعی رویش بنشیند — نه متنِ پخته در تصویر.
   ========================================================================= */
:root {
  --shelf: #ead8b7;      /* کرمِ نوارها */
  --shelf-2: #f2e6cd;
  --plaque: #eddfc6;     /* پلاکِ نام */
  --rim: #c79a4e;        /* طلاییِ قاب */
  --rim-dk: #8f6f2e;
  --panel: #0e4957;      /* فیروزه‌ایِ کاشی */
  --panel-hi: #16606f;
  --ink-w: #2c1e0c;      /* مرکب روی کرم */
}

/* ---- نوارِ بالا ---- */
.topbar { background: var(--ink-0); padding: 10px 14px 0; position: sticky; top: 0; z-index: 20; }
.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  max-inline-size: 1720px; margin-inline: auto;
  padding: 6px 10px;
  background: linear-gradient(180deg, var(--shelf-2), var(--shelf));
  border: 2px solid var(--rim);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px #ffffff8c, 0 3px 0 #00000038;
}
/* هیچ‌کدام از قطعه‌ها نباید کوچک شوند: وقتی جا کم است کپسول‌ها روی هم می‌رفتند و
   عدد و «+» به هم می‌چسبیدند. جای کم را «gap» می‌خورد و بعد نقطه‌شکست‌ها. */
.bar > * { flex: none; }
.bar .me { display: block; inline-size: 52px; block-size: 52px; margin-block: -12px; }
.bar .me img {
  inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--rim), 0 0 0 5px var(--rim-dk);
}
/* نوارِ ناوبری اگر جا نشد، **خودش** می‌لغزد و صفحه را پهن نمی‌کند.

   با حسابِ فعال کپسول‌های کیف به نوار اضافه می‌شوند و روی ۱۴۴۰ پیکسل مجموع
   از عرضِ صفحه رد می‌شد: کلِ صفحه افقی اسکرول می‌خورد و سرصفحه از لبه بیرون
   می‌زد. `min-inline-size: 0` لازم است، وگرنه آیتمِ فلکس کوچک‌تر از محتوایش
   نمی‌شود و overflow هیچ‌وقت فعال نمی‌گردد. */
.bar nav {
  display: flex; gap: 2px;
  flex: 1 1 auto; min-inline-size: 0; overflow-x: auto;
  scrollbar-width: none;
}
.bar nav::-webkit-scrollbar { display: none; }
.bar nav a { flex: none; }
.bar nav a {
  display: inline-flex; align-items: center; gap: 7px; min-block-size: 44px;
  padding: 0 13px; border-radius: 10px;
  color: var(--ink-w); font-weight: 700; font-size: 15px; text-decoration: none;
}
.bar nav a svg, .bar .who svg, .bar .tool svg { inline-size: 20px; block-size: 20px; flex: none; }
.bar nav a svg { color: #8a5a1a; }
.bar nav a:hover { background: #00000012; }
/* صفحه‌ی جاری، مثلِ طرح: خطِ طلاییِ زیرِ نام. */
.bar nav a.on { position: relative; }
.bar nav a.on::after {
  content: ""; position: absolute; inset-inline: 12px; inset-block-end: 5px;
  block-size: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--rim), transparent);
}
.bar .gap { flex: 1; }

/* کپسولِ حساب — جای کپسولِ XP ِ اپ، چسبیده به مدال. مهمان: ورود؛ فعال: @نام. */
.bar .who {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px;
  /* کنارِ پرتره می‌نشیند و نه زیرِ مدال: پیش‌تر با حاشیه‌ی منفی زیرِ مدالِ
     سمتِ راست فرو می‌رفت و padding ِ نامتقارنش برای همان بود. حالا نشانِ
     نامِ خودِ بازیکن است، چسبیده به پرتره‌اش. */
  margin-inline-end: -4px; padding: 0 14px; border-radius: 999px;
  background: #00000012; box-shadow: inset 0 0 0 2px #b8955f6b;
  color: var(--ink-w); font-weight: 700; font-size: 14px; text-decoration: none;
  white-space: nowrap;
}
.bar .who:hover { background: #0000001c; }
/* نامِ بازیکن کوچک **نمی‌شود**: تمامِ نکته‌ی این نشان همین است که خوانده
   شود. آن‌که جا کم بیاورد نوارِ ناوبری است و خودش می‌لغزد. */
.bar .who { flex: none; max-inline-size: 22ch; }
.bar .who > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .who .short { display: none; }
.bar .who svg { color: #8a5a1a; }
.bar .who.in { background: linear-gradient(180deg, #fbe6a3, #e0b24f); box-shadow: inset 0 0 0 2px #fff6d8a6, 0 1px 0 #8f6f2e; }
.bar .who.in span { max-inline-size: 22ch; overflow: hidden; text-overflow: ellipsis; }

/* کیف: کپسولِ سکه/گوهر با دکمه‌ی طلاییِ «+» — همان هدرِ اپ */
.bar .purse {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 5px 3px 5px; border-radius: 999px;
  background: #00000012; box-shadow: inset 0 0 0 2px #b8955f6b;
  color: var(--ink-w); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
}
.bar .purse img { inline-size: 30px; block-size: 30px; }
.bar .purse b { padding-inline: 2px 6px; min-inline-size: 3ch; text-align: center; }
.bar .purse .plus {
  display: inline-grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%;
  color: #3a2a10; background: linear-gradient(180deg, #fbe6a3, #e0b24f 60%, #c58334);
  border: 1.5px solid #8f6f2e; box-shadow: inset 0 0 0 1px #fff6d8a6, 0 1px 0 #6f4f16;
}
.bar .purse .plus svg { inline-size: 14px; block-size: 14px; stroke-width: 2.6; }
.bar .purse .plus:hover { filter: brightness(1.06); }

/* ابزارِ گرد (خروج) */
.bar .tool {
  flex: none; display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px;
  border-radius: 50%; border: 0; background: #00000012; box-shadow: inset 0 0 0 2px #b8955f6b;
  color: #8a3a2a; cursor: pointer;
}
.bar .tool:hover { background: #7a2a1a1a; }

/* دکمه‌ی طلاییِ بازی در نوار — روی صفحه‌های پهن */
.bar .go.cta { margin: 0; min-block-size: 40px; padding: 6px 20px; font-size: 15px; border-radius: 12px; }

.bar .sign { flex: none; display: block; inline-size: 48px; margin-block: -10px; }
.bar .sign img { inline-size: 100%; block-size: auto; display: block; }
/* نقطه‌شکست‌ها: اول دکمه‌ی بازی می‌رود، بعد متنِ ناوبری، بعد کیف. */
@media (max-width: 1240px) { .bar .go.cta { display: none; } }
@media (max-width: 1040px) { .bar nav a span { display: none; } .bar nav a { padding: 0 11px; } }
/* نوارِ بالا روی نمایشگرِ باریک از عرض بیرون می‌زد و صفحه را کنار می‌کشید —
   هفت لینکِ ناوبری، کپسولِ حساب، و حالا کدِ اتاق. به‌جای حذفِ یکی‌یکیِ
   قطعه‌ها، خودِ نوار افقی می‌لغزد: هرچه هست در دسترس می‌مانَد و صفحه سرِ
   جایش. نوارِ لغزش پنهان است، وگرنه زیرِ آیکون‌ها یک خطِ خاکستری می‌نشست. */
@media (max-width: 1040px) {
  .bar { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .bar::-webkit-scrollbar { display: none; }
}

@media (max-width: 820px) {
  /* گوشی: ناوبری فقط آیکون، کیف پنهان، متنِ حساب کوتاه */
  .bar { gap: 6px; padding-inline: 10px; }
  .bar nav a span { display: none; }
  .bar nav a { padding: 0 8px; }
  .bar .who .full { display: none; }
  .bar .who .short { display: inline; }
  .bar .who { padding-inline: 26px 12px; }
  .bar .purse { display: none; }
  /* کدِ اتاق روی گوشی می‌مانَد — همان جایی است که بیشترین کاربرد را دارد —
     ولی باریک می‌شود تا نوار نشکند. */
  .joinbox input { inline-size: 88px; padding-inline: 6px; font-size: 14px; }
  .joinbox input::placeholder { font-size: 11px; }
  .joinbox button { padding-inline: 9px; font-size: 13px; }
  .bar .who { font-size: 13px; padding-inline-end: 10px; }
  /* حسابِ فعال روی گوشی: کپسولِ طلایی فقط با آیکون — نام جا نمی‌گیرد و
     خودِ رنگِ طلایی یعنی «وارد شده‌ای»؛ نام در صفحه‌ی حساب هست. */
  .bar .who.in span { display: none; }
  .bar .who.in { padding-inline: 26px 10px; }
  .bar .tool { inline-size: 40px; block-size: 40px; }
  .bar .me { inline-size: 42px; block-size: 42px; }
}

/* ---- صحنه‌ی فرش ---- */
/* ‎section عمومیِ شیت ۶۲px padding-block دارد و صحنه را از سربرگ جدا
   می‌کرد؛ این سه بخش فاصله‌ی خودشان را دارند. */
.stage, .shelf, .how { padding-block: 0; }
.stage { position: relative; background: var(--ink-0); }
.stage .rug { display: block; inline-size: 100%; block-size: auto; }
.stage .say {
  position: absolute; inset-block: 18% auto; inset-inline: 0;
  text-align: center; padding-inline: 16px;
}
.stage h1 {
  margin: 0; font-size: clamp(22px, 3.4vw, 50px); line-height: 1.35; font-weight: 700;
  color: #fdf3df; text-wrap: balance;
  text-shadow: 0 2px 18px #00000073;
  background: none; -webkit-text-fill-color: currentColor;
}
.stage .say > p {
  margin: clamp(6px, 1.2vw, 18px) 0 0;
  font-size: clamp(12px, 1.25vw, 19px); color: #e8dcc4;
  text-shadow: 0 2px 12px #000000a6;
}
.go {
  display: inline-flex; align-items: center; justify-content: center;
  margin-block-start: clamp(10px, 2vw, 30px);
  min-block-size: 44px;
  padding: clamp(9px, 1.1vw, 15px) clamp(26px, 3.4vw, 54px);
  font-weight: 700; font-size: clamp(14px, 1.5vw, 23px);
  color: #3a2a10; text-decoration: none;
  background: linear-gradient(180deg, #fbe6a3 0%, #e6b651 55%, #c58334 100%);
  border: 1.5px solid #8f6f2e; border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff6d8c0, inset 0 -2px 0 #8f5a1e55, 0 3px 0 #6f4f16, 0 10px 18px -8px #00000080;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.go:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 1px 0 #fff6d8c0, inset 0 -2px 0 #8f5a1e55, 0 5px 0 #6f4f16, 0 14px 22px -8px #00000099; }
.go:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #fff6d8c0, 0 1px 0 #6f4f16; }

/* ---- قفسه‌ی کاشی‌ها ---- */
#games.shelf, .shelf {   /* تالارِ اپ: (با id تا از قاعده‌ی قدیمیِ #games, #how جلو بزند) لاجوردِ Palette.Indigo با بافتِ گرهِ کم‌رنگ و هاله‌ی نرم */
  background:
    radial-gradient(120% 70% at 50% 0%, #3a4190 0%, #2b3074 45%, #221f5c 100%);
  position: relative;
  box-shadow: none; clip-path: none;   /* سایه‌ی کرمِ ۱۰۰vmax ِ قاعده‌ی قدیمی */
  border-block-start: 3px solid var(--rim);
  padding: 30px 16px 56px !important;
}
.shelf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/art/ui/tile.webp") center/128px 128px repeat; opacity: .07;
}
.shelf > * { position: relative; }
#games { scroll-margin-block-start: 84px; }
/* روی کارتِ آنلاین، آرت کمی پایین‌تر می‌نشیند تا زیرِ پیلِ «آنلاین» نرود */
.gt.live .pic { inset-block-start: 13%; }

/* عنوانِ تالار — همان بنرِ طلاییِ «بازی سریع»ِ اپ، وسطِ صفحه */
/* عنوانِ بخش‌ها: تایپوگرافی، نه دکمه. متنِ عاج با خطِ کوتاهِ طلایی زیرش —
   بنرِ طلایی شبیهِ دکمه بود و بازدیدکننده رویش می‌زد. */
.hall { display: flex; justify-content: center; margin: 0 0 24px; }
.hall span {
  position: relative; display: inline-block; padding: 0 4px 12px;
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; color: #fff8ea; letter-spacing: .01em;
  text-shadow: 0 2px 12px #00000073;
}
.hall span::after {
  content: ""; position: absolute; inset-inline: 50%; inset-block-end: 0; inline-size: 64px; block-size: 3px; margin-inline-start: -32px;
  border-radius: 2px; background: linear-gradient(90deg, #c58334, #fbe6a3, #c58334);
}
.rowhead .hall span::after { inset-inline-start: 0; margin-inline-start: 0; }
/* ---- قفسه‌ی بازی‌ها = تالارِ بازی‌های اپ (GamesHallV3View) ----
   همان شبکه: سه ستون، کارتِ ایستاده به نسبتِ ۴۳۵/۵۹۸، رنگِ هر کارت از
   شش‌رنگِ Palette.GameCardV3 به ترتیب، قابِ برنزی (FrameV3) با درخششِ داخلی،
   آرت در بالا (۷٪ تا ۷۰٪ِ ارتفاع) و پلاکِ عاجِ نام در ۷۲٪ تا ۹۳٪. ردیف‌ها
   هر چند تا لازم شد — اپ صفحه‌بندی می‌کند، وب می‌پیمایَد. */
.rack {
  display: grid; gap: 28px 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* پهنای قفسه: کارت‌ها روی دسکتاپ درشت‌اند (~۴۰۰px) تا دو سوی صفحه خالی نمانَد؛
     نسبت و فاصله‌ها به همان نسبتِ اپ بزرگ می‌شوند. */
  max-inline-size: 1140px; margin-inline: auto;
  padding-inline: 24px;
}
/* رنگ‌های اپ (Palette) — کارت‌های تالار، قاب و عاج */
:root {
  --c1: #388d94; --c2: #25666e; --c3: #4161a0; --c4: #7d3e8d; --c5: #b3443a; --c6: #377d4f;
  --frame: #b48752;          /* FrameV3 */
  --ivory: #fcf5eb;          /* Card */
  --ivory-edge: #d7c397;     /* CardBorder */
  --cream: #f1e1c7;          /* HdrCream — شیتِ شروع */
  --trough: #dbc4a5;         /* TroughV3 — چیپِ خاموش */
  --gold-top: #e6b651;       /* GoldBtnTop — چیپِ روشن */
}

.gt {
  position: relative; display: block;
  aspect-ratio: 435 / 598;
  container-type: inline-size;
  text-decoration: none;
  /* رنگِ کارت با یک پرده‌ی نور از بالا، تا تخت و مقوایی نباشد */
  background:
    radial-gradient(90% 60% at 50% 0%, #ffffff2e 0%, #ffffff00 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--c, var(--c1)) 82%, #fff 18%) 0%, var(--c, var(--c1)) 38%, color-mix(in srgb, var(--c, var(--c1)) 84%, #000 16%) 100%);
  border: 4px solid var(--frame);
  border-radius: clamp(14px, 3vw, 40px);   /* ≈۱۳٪ِ پهنای کارت؛ cqw روی خودِ کانتینر کار نمی‌کند */
  box-shadow:
    inset 0 0 0 2px #fff2d980,
    inset 0 -18px 30px -18px #00000059,
    0 10px 24px -8px #00000099,
    0 3px 0 #5c3f1c;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  overflow: hidden;
}
.gt:hover, .gt:focus-visible {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    inset 0 0 0 2px #fff2d9c0,
    inset 0 -18px 30px -18px #00000059,
    0 22px 34px -10px #000000b3,
    0 3px 0 #5c3f1c,
    0 0 0 3px #ffd98a66;
}
.gt .pic {
  position: absolute; inset-inline: 9%; inset-block: 8% 30%;
  display: block;
}
.gt .pic img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 14px #00000080);
  transition: transform .2s ease;
}
.gt:hover .pic img { transform: translateY(-3px) scale(1.04); }
/* پلاکِ عاجِ نام — با یک برقِ ملایم روی لبه‌ی بالا */
.gt .name {
  position: absolute; inset-inline: 6%; inset-block: 73% 8%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4%; text-align: center;
  font-weight: 700; font-size: clamp(14px, 8.6cqw, 27px); line-height: 1.2; color: var(--ink-w);
  background: linear-gradient(180deg, #fffaf1, var(--ivory));
  border: 2px solid var(--ivory-edge); border-radius: 6.5cqw;
  box-shadow: inset 0 2px 0 #ffffffcc, 0 3px 8px #00000040;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* برچسبِ «آنلاین» — به جای نقطه‌ی ریز: پیلِ عاج با نقطه‌ی سبز، گوشه‌ی بالا */
.gt.live::after {
  content: "آنلاین";
  position: absolute; inset-block-start: 5%; inset-inline-end: 6%;
  display: inline-flex; align-items: center;
  padding: .28em .8em .28em 1.6em; border-radius: 999px;
  font-size: clamp(10px, 4.6cqw, 14px); font-weight: 700; color: #1f4d2f;
  background:
    radial-gradient(circle at .85em 50%, #3ec46d 0 .27em, #ffffff .3em .36em, transparent .4em),
    var(--ivory);
  border: 1.5px solid var(--ivory-edge);
  box-shadow: 0 2px 6px #00000059;
}

/* پاورقی: ‎--faint (#8d85ad) روی سرمه‌ای ۳٫۸۳ می‌دهد، زیرِ ۴٫۵. یک پرده
   روشن‌تر، فقط در همین دامنه تا بقیه‌ی جاها دست‌نخورده بماند. */
.foot .muted, .legal .wrap { color: #a9a2c6; }

/* روی گوشی، تصویرِ ۱۶:۹ به ارتفاعِ ۱۴۳ پیکسل می‌رسید و متن روی پرتره‌ها
   می‌افتاد و از لبه می‌زد. صحنه گرید می‌شود تا تصویر و متن روی هم بنشینند،
   تصویر با cover پر می‌کند و کناره‌ها بریده می‌شوند — ترنجِ وسط همان جا
   می‌مانَد. */
@media (max-width: 720px) {
  .stage { min-block-size: 58vh; display: grid; }
  .stage .rug { grid-area: 1/1; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
  .stage .say { grid-area: 1/1; position: static; align-self: center; padding-inline: 20px; }
  .stage h1 { font-size: clamp(20px, 6.4vw, 30px); }
  .stage .say > p { font-size: clamp(12px, 3.4vw, 16px); }
  .go { font-size: 16px; padding: 12px 30px; }
}
/* روی گوشی هم سه ستون — همان اپ؛ فقط حاشیه و فاصله جمع می‌شود. */
@media (max-width: 620px) {
  .rack { gap: 14px 10px; padding-inline: 12px; }
  .gt { border-width: 3px; }
  .shelf { padding: 22px 12px 40px !important; }
  .hall { margin-block-end: 18px; }
}

/* =========================================================================
   صفحه‌ی بازی و حریمِ خصوصی، به همان زبانِ صفحه‌ی خانه.

   همان سه توکنِ خانه: کرمِ نوار، طلاییِ قاب، فیروزه‌ایِ پنل. عنوان‌ها روی
   همان پلاکِ کرمی می‌نشینند که نامِ کاشی‌ها رویش است — یک قطعه، دو جا.
   ========================================================================= */

/* پلاکِ عنوان — همان border-imageِ نامِ کاشی */
.plate {
  display: inline-block; padding: 8px 22px;
  border-image: url("/art/ui/nameplate.webp") 18 17 fill / 10px 9px / 0 round;
  color: var(--ink-w);
}

/* ---- سربرگِ صفحه‌ی بازی ----
   متن مستقیم روی رنگِ کارتِ همان بازی — بی شیتِ کرمی که بیشترش خالی می‌ماند —
   و کارتِ تالار کج و شناور کنارش. یک دکمه‌ی اصلی، یک لینکِ فرعی. */
.crest {
  padding: 0 !important;
  background: var(--c, #2b3074);
  border-block-end: 4px solid var(--frame);
  position: relative; overflow: hidden;
}
.crest::before {
  content: ""; position: absolute; inset: 0;
  background: url("/art/ui/tile.webp") center/128px 128px repeat;
  opacity: .08;
}
.crest::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 80% at 22% 45%, #ffffff30 0%, #ffffff00 62%),
    radial-gradient(70% 70% at 90% 100%, #00000040 0%, #00000000 60%),
    linear-gradient(180deg, #00000008, #0000004a);
}
.crest > * { position: relative; z-index: 1; }
.crest .inner {
  position: relative; z-index: 1;
  max-inline-size: 1140px; margin-inline: auto;
  padding: 34px 24px 56px;
}
.crest .hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 48px; align-items: center;
}
.crest .lead { min-inline-size: 0; }
.crest .trail { margin: 0 0 22px; font-size: 14px; color: #fff3dccc; }
.crest .trail a {
  display: inline-block;
  padding-block: 11px; margin-block: -11px;
  padding-inline: 6px; margin-inline: -6px;
  color: #fff8ea; font-weight: 700; text-decoration: none;
}
.crest .trail a:hover { text-decoration: underline; }
.crest h1 {
  margin: 0; font-size: clamp(38px, 5vw, 66px); line-height: 1.1; color: #fff8ea;
  text-shadow: 0 2px 0 #00000033, 0 10px 30px #00000059;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.crest h1 small { font-size: .38em; font-weight: 400; color: #fff3dc99; letter-spacing: .02em; direction: ltr; }
.crest .says { margin: 12px 0 0; font-size: clamp(17px, 1.6vw, 22px); font-weight: 400; color: #fff3dcd9; text-wrap: balance; max-inline-size: 34ch; }
.crest .facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.crest .facts li {
  display: inline-flex; align-items: center; gap: 7px; min-block-size: 38px; padding: 6px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #fff8ea;
  background: #ffffff1c; border: 1.5px solid #ffffff38; backdrop-filter: blur(4px);
}
.crest .facts li svg { inline-size: 17px; block-size: 17px; opacity: .9; }
.crest .facts li.on { background: #2f7a46cc; border-color: #7ddc9a99; }
.crest .facts li.on::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 999px; background: #7ddc9a; box-shadow: 0 0 8px #7ddc9a; }
.crest .acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 28px 0 0; }
.crest .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-block-size: 54px; padding: 13px 42px;
  font-weight: 700; font-size: 18px; color: #3a2a10; text-decoration: none;
  background: linear-gradient(180deg, #fbe6a3 0%, #e6b651 55%, #c58334 100%);
  border: 1.5px solid #8f6f2e; border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff6d8c0, inset 0 -2px 0 #8f5a1e55, 0 3px 0 #6f4f16, 0 10px 18px -8px #00000080;
  transition: transform .12s ease, filter .12s ease;
}
.crest .btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.crest .btn.ghost {
  background: #ffffff14; border: 1.5px solid #ffffff59; border-radius: 16px;
  color: #fff8ea; filter: none; padding-inline: 24px; font-size: 16px;
}
.crest .btn.ghost:hover { background: #ffffff26; transform: translateY(-2px); }

/* کارتِ شناور: کمی کج، سایه‌ی بلند — مثلِ کارتی که روی میز انداخته‌اند */
.crest .gt.big {
  inline-size: 100%; transform: rotate(-4deg);
  box-shadow:
    inset 0 0 0 2px #fff2d980, inset 0 -18px 30px -18px #00000059,
    0 30px 50px -18px #000000b3, 0 3px 0 #5c3f1c;
}
.crest .gt.big:hover { transform: rotate(-4deg); }

/* نوارِ بالا روی نمایشگرِ باریک از عرض بیرون می‌زد و صفحه را کنار می‌کشید —
   هفت لینکِ ناوبری، کپسولِ حساب، و حالا کدِ اتاق. به‌جای حذفِ یکی‌یکیِ
   قطعه‌ها، خودِ نوار افقی می‌لغزد: هرچه هست در دسترس می‌مانَد و صفحه سرِ
   جایش. نوارِ لغزش پنهان است، وگرنه زیرِ آیکون‌ها یک خطِ خاکستری می‌نشست. */
@media (max-width: 1040px) {
  .bar { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .bar::-webkit-scrollbar { display: none; }
}

@media (max-width: 820px) {
  .crest .inner { padding: 22px 16px 40px; }
  .crest .hero { grid-template-columns: 1fr; gap: 26px; justify-items: center; text-align: center; }
  .crest .hero .gt.big { order: -1; max-inline-size: 200px; transform: rotate(-3deg); }
  .crest .trail { margin-block-end: 14px; }
  .crest h1 { justify-content: center; }
  .crest .says { margin-inline: auto; }
  .crest .facts, .crest .acts { justify-content: center; }
  .crest .acts .btn { flex: 1 1 100%; }
}

/* ---- تنه‌ی صفحه‌ی بازی: همان تالارِ لاجورد، با شیت‌های کرم رویش ----
   پیش‌تر کرم بود و بینِ سربرگِ رنگی و تالارِ لاجوردِ «بازی‌های دیگر» یک نوارِ
   سومِ ناهم‌رنگ می‌ساخت. حالا از سربرگ به پایین یک صحنه است — مثلِ اپ که شیتِ
   کرمِ «شروع» روی تالارِ لاجورد می‌آید. */
.sheet {
  position: relative;
  padding: 40px 16px 44px !important;
  background:
    radial-gradient(120% 70% at 50% 0%, #3a4190 0%, #2b3074 45%, #221f5c 100%);
}
.sheet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/art/ui/tile.webp") center/128px 128px repeat; opacity: .07;
}
.sheet > * { position: relative; }
/* تالارِ «بازی‌های دیگر» بی‌درز به تنه می‌چسبد: خطِ برنزی فقط زیرِ سربرگ */
.crest + .sheet + .shelf { border-block-start: 0; padding-block-start: 6px !important; }
.cols {
  display: grid; gap: 16px; grid-template-columns: 1fr;
  max-inline-size: 1180px; margin-inline: auto; align-items: start;
  background: none; box-shadow: none; clip-path: none;
}
@media (min-width: 900px) { .cols { grid-template-columns: 1.7fr 1fr; } }

.card {   /* همان شیتِ کرمِ اپ: HdrCream، قابِ برنزیِ FrameV3 با درخششِ داخلی */
  background: var(--cream);
  border: 4px solid var(--frame);
  border-radius: 30px;
  box-shadow: inset 0 0 0 2px #fff2d98c, 0 6px 0 #00000033, 0 22px 40px -16px #00000099;
  padding: 24px;
  max-inline-size: none;
}
.card h2, .card h1 { margin: 0 0 16px; font-size: clamp(18px, 2vw, 24px); }
/* عنوان روی شیت خودِ متن است، بی پلاکِ جدا — مثلِ نامِ بازی سرِ شیتِ اپ */
.card .plate { border-image: none; padding: 0; }
.card p { color: #4a3718; margin: 0 0 16px; }
.card .btn { inline-size: 100%; justify-content: center; }

/* قاعده‌ها */
.rules { counter-reset: r; margin: 0; padding: 0; list-style: none; }
.rules li {
  position: relative; padding-inline-start: 46px; padding-block: 13px;
  border-block-end: 2px solid #8f6f2e2e; color: #4a3718; font-size: 16px; line-height: 1.85;
}
.rules li:last-child { border-block-end: 0; }
.rules li::before {
  counter-increment: r; content: counter(r, persian);
  position: absolute; inset-inline-start: 0; inset-block-start: 14px;
  inline-size: 32px; block-size: 32px; display: grid; place-items: center;
  border-radius: 9px; font-size: 14px; font-weight: 700;
  background: var(--gold-top);
  color: #3a2a10; border: 2px solid var(--frame);
  box-shadow: inset 0 1px 0 #ffffff80;
}

/* دکمه‌ی کاغذی */
.sheet .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-block-size: 44px; padding: 13px 26px; border-radius: 14px;
  font-weight: 700; font-size: 16px; text-decoration: none; color: #3a2a10;
  background: linear-gradient(180deg, #fbe6a3 0%, #e6b651 55%, #c58334 100%);
  border: 1.5px solid #8f6f2e; border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff6d8c0, inset 0 -2px 0 #8f5a1e55, 0 3px 0 #6f4f16, 0 10px 18px -8px #00000080;
}
.sheet .btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.sheet .btn.ghost {   /* «انصراف» ِ شیت */
  background: #fff6e6; color: var(--ink-w);
  border: 3px solid var(--frame); border-radius: 18px; box-shadow: none;
}

/* ---- متنِ بلند ---- */
.prose { max-inline-size: 78ch; margin-inline: auto; }
.prose h1 { text-align: center; display: block; }
.prose h2 { color: #8a5a1a; font-size: 20px; margin-block: 30px 8px; }
.prose p, .prose li { color: #4a3718; font-size: 17px; line-height: 1.9; }
.prose .muted { color: #6f5a30; font-size: 15px; }
.prose b { color: var(--ink-w); }
.prose ul { padding-inline-start: 20px; margin: 0 0 16px; }
.prose li { margin-block-end: 8px; }
.prose li::marker { color: var(--rim); }

/* ---- نشانِ سطح — همان مدالِ سرِ هدرِ اپ (Redesign3/Icons/badge_xp) ----
   پیش‌تر شمسه با CSS کشیده می‌شد و شبیهِ اپ نبود. حالا خودِ تصویرِ اپ می‌آید:
   ستاره‌ی هشت‌پرِ طلایی با مغزِ فیروزه‌ای و پرِ زرین. کمی از نوار بیرون
   می‌زند، مثلِ اپ که مدال روی لبه‌ی هدر می‌نشیند. */
.bar .sign {
  inline-size: 52px; block-size: 56px; flex: none; margin-block: -12px;
  display: block; background: none; clip-path: none;
  filter: drop-shadow(0 3px 4px #00000059);
}
.bar .sign img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }
.bar .sign:hover img { transform: translateY(-1px) scale(1.04); transition: transform .15s ease; }

/* ---- گوشه‌های نوار ----
   پرتره و نشان روی قوسِ گوشه می‌افتادند و خطِ طلاییِ نوار از پشتشان
   می‌بُرد. حالا از شعاعِ گوشه فاصله می‌گیرند و بیرون‌زدگیِ عمودی هم کم شد. */
.bar { padding-inline: 16px; }
.bar .me { inline-size: 46px; block-size: 46px; margin-block: -6px; }

/* ---- قدِ صحنه ----
   تصویر ۱۶۸۰×۶۱۶ است، پس روی نمایشگرِ پهن ۷۳۰ پیکسل بلند می‌شد و سطرِ
   اولِ کاشی‌ها زیرِ لبه می‌ماند. قد به‌اندازه‌ی جای‌ماندنِ یک سطر بریده
   می‌شود. ذخیره از روی بدترین حالت گرفته شده، نه چشمی: سربرگ ۷۰ + قفسه
   ۲۲ + بلندترین کاشی. قدِ کاشی با تعدادِ ستون عوض می‌شود و در ۹۰۰ پیکسل
   (دو ستون) به ۲۶۴ می‌رسد — با ۳۴۰ روی ۱۲۸۰×۸۰۰ و ۱۶۸۰×۱۰۵۰ چند پیکسل
   کم می‌آورد. */
@media (min-width: 721px) {
  .stage { block-size: clamp(300px, calc(100svh - 390px), 720px); display: grid; }
  .stage .rug { grid-area: 1/1; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 42%; }
  .stage .say { grid-area: 1/1; position: static; align-self: center; }
}

/* ---- حساب: ورود / ثبت‌نام (auth.js) ----
   همان صحنه‌ی هیرو — فرش زیرِ سایه‌ی شب — و کارتِ کرم وسطش، مثلِ سفره‌ای
   روی میز. ورود تبِ پیش‌فرض است؛ توضیحِ ثبت‌نام فقط در تبِ خودش دیده می‌شود
   تا کسی که فقط می‌خواهد وارد شود، متن نخوانَد. */
.acct {
  position: relative; isolation: isolate; overflow: hidden;
  min-block-size: calc(100svh - 70px);
  display: grid; place-items: center;
  /* کفِ صفحه تا زیرِ نوارِ خانه‌ی آیفون نرود: حاشیه‌ی امن به padding اضافه می‌شود. */
  padding: clamp(24px, 5vw, 56px) 16px calc(clamp(24px, 5vw, 56px) + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--ink-0);
}
.acct .rug {
  position: absolute; inset: 0; z-index: -1;
  inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 30%;
  filter: saturate(.9) brightness(.55);
}
.acct::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 40%, #00000000 0%, #0f092999 70%, #0f0929e6 100%),
    linear-gradient(180deg, #0f0929b3, #0f092955 30%, #0f092955 70%, #0f0929e6);
}
.acct .card {
  inline-size: min(440px, 100%);
  padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 28px) 22px;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 2px #ffffffb3, 0 6px 0 #00000040, 0 24px 60px #00000080;
}
.acct .head { text-align: center; margin-block-end: 18px; }
.acct .head .mark { display: inline-grid; place-items: center; inline-size: 34px; block-size: 46px;
  border-radius: 6px 6px 8px 8px / 9px; background: #fff; box-shadow: 0 2px 0 #00000026, inset 0 0 0 1px #00000014;
  margin-block-end: 8px; color: var(--ink); }
.acct .head .mark svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.acct h1 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); }
.acct .lead { margin: 12px 0 0; color: #5b4523; font-size: 15px; line-height: 1.8; text-wrap: balance; }

/* هر تکه‌ای که data-for دارد فقط در حالتِ خودش هست. */
.acct [data-for] { display: none; }
.acct[data-mode="login"] [data-for="login"],
.acct[data-mode="register"] [data-for="register"],
.acct[data-mode="verify"] [data-for="verify"],
.acct[data-mode="forgot"] [data-for="forgot"],
.acct[data-mode="reset"] [data-for="reset"],
.acct[data-mode="password"] [data-for="password"] { display: block; }
/* تب‌ها و فرمِ ورود/ثبت‌نام در هر دو تب هستند. */
.acct[data-mode="login"] [data-for="tabs"], .acct[data-mode="register"] [data-for="tabs"] { display: flex; }
/* نوارِ قدرتِ رمز هم فلکس است، وگرنه قاعده‌ی بالا آن را بلوکی می‌کند */
.acct[data-mode="register"] .pw-meter[data-for="register"] { display: flex; }
/* و در ورود نیست: سنجیدنِ قدرتِ رمزی که کاربر سال‌ها پیش ساخته کارِ این صفحه
   نیست. `.acct [data-for]{display:none}` تنهایی بسش نبود — `.acct .pw-meter`
   هم‌وزنِ آن است و پایین‌ترِ فایل می‌آید، پس نوار را دوباره روشن می‌کرد. */
.acct[data-mode="login"] .pw-meter[data-for="register"] { display: none; }
.acct[data-mode="login"] [data-for="auth"], .acct[data-mode="register"] [data-for="auth"],
.acct[data-mode="verify"] #acct-verify, .acct[data-mode="forgot"] #acct-forgot,
.acct[data-mode="reset"] #acct-reset, .acct[data-mode="password"] #acct-pw-form { display: grid; gap: 12px; }
/* فیلدِ ثبت‌نام (ایمیل، تکرارِ رمز) فقط در تبِ ثبت‌نام. */
.acct[data-mode="login"] .field[data-for="register"] { display: none; }
.acct[data-mode="register"] .field[data-for="register"] { display: grid; }

/* لینک‌های ریزِ زیرِ فرم («کد نرسید؟»، «برگرد به ورود»). */
.acct .sub { margin: 2px 0 0; text-align: center; font-size: 13px; color: #8a7a5c; }
.acct .sub button, .acct .forgot button {
  border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 13px; font-weight: 700;
  color: #8f5a12; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 6px;
}
.acct .sub button:hover, .acct .forgot button:hover { color: #3a2a10; }
.acct .sub button:focus-visible, .acct .forgot button:focus-visible { outline: 3px solid var(--rim); }
/* کدِ ۶رقمی: درشت، بافاصله، چپ‌به‌راست. */
.acct input.code { font-size: 22px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; padding-right: 46px; }
.acct input.code::placeholder { letter-spacing: 8px; text-align: center; direction: ltr; }

.acct .forgot { margin: 2px 0 0; padding-inline-start: 4px; font-size: 13px; }


.acct .tabs {
  display: flex; gap: 4px; padding: 4px; margin: 0 0 16px;
  background: linear-gradient(180deg, #dcc59a, #e9d8b6);
  border: 1.5px solid #c7a76a; border-radius: 15px;
  box-shadow: inset 0 2px 4px #00000026, inset 0 -1px 0 #ffffff80;
}
.acct .tabs button {
  flex: 1; min-block-size: 42px; border-radius: 11px; border: 1.5px solid transparent;
  background: transparent; color: #6b5530; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.acct .tabs button:hover { color: #3a2a10; background: #ffffff40; }
.acct .tabs button[aria-selected="true"] {
  color: #3a2a10; border-color: #b8934a;
  background: linear-gradient(180deg, #fffdf6, #f5e7c9);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 #b8934a, 0 4px 8px #00000026;
}
.acct .tabs button:focus-visible { outline: 3px solid var(--rim); outline-offset: -3px; }

.acct form { display: grid; gap: 12px; }
.acct .field { display: grid; gap: 6px; }
.acct .field > label { font-size: 13px; font-weight: 700; color: #6b5530; padding-inline-start: 4px; cursor: pointer; }
.acct .box { position: relative; display: block; }
/* آیکونِ فیلد در لبه‌ی آغازین (راست)، چون متنِ فیلد لاتین است و از چپ شروع می‌شود. */
.acct .fi {
  position: absolute; inset-inline-start: 14px; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 20px; block-size: 20px; color: #a08d68; pointer-events: none;
}
.acct .box:focus-within .fi { color: var(--rim-dk); }
/* padding فیزیکی، نه منطقی: فیلد خودش ltr است و «آغازِ» آن چپ می‌شد، ولی آیکون
   نسبت به جعبه‌ی rtl در راست نشسته. متنِ لاتین از چپ شروع می‌شود و
   placeholderِ فارسی از راست، پس هر دو طرف جا لازم است. */
.acct .box input { padding-right: 46px; padding-left: 14px; }
.acct input {
  inline-size: 100%; box-sizing: border-box; min-block-size: 48px;
  padding: 10px 14px; border-radius: var(--r-sm); border: 2px solid #dcc59a;
  background: #fff; color: var(--ink); font: inherit; font-size: 16px;
  direction: ltr; text-align: left; transition: border-color .12s ease, box-shadow .12s ease;
}
.acct .pw input { padding-left: 56px; }
.acct input::placeholder { direction: rtl; text-align: right; color: #8f7a52; } /* ~۴:۱ روی سفید */
.acct input:hover { border-color: var(--rim); }
.acct input:focus { outline: none; border-color: var(--rim-dk); box-shadow: 0 0 0 4px #c79a4e40; }
.acct .eye {
  position: absolute; inset-block: 6px; inset-inline-end: 6px; inline-size: 40px;
  display: grid; place-items: center; border-radius: 10px;
  border: 1.5px solid #d6bd8a; background: linear-gradient(180deg, #fbf3e2, #efdfbf);
  color: #6b5530; cursor: pointer; box-shadow: inset 0 1px 0 #fff, 0 1px 0 #c7a76a;
  transition: background .15s ease, color .15s ease;
}
.acct .eye:active { box-shadow: inset 0 1px 2px #00000026; }
.acct .eye .ei { inline-size: 20px; block-size: 20px; }
.acct .eye:hover, .acct .eye[aria-pressed="true"] { background: #e6d3ad; color: #3a2a10; }
.acct .eye:focus-visible { outline: 3px solid var(--rim); outline-offset: 1px; }

/* خطای فیلد: فقط وقتی JS آن را علامت زده (aria-invalid) — یک منبعِ حقیقت، تا
   کادرِ قرمزِ بی‌متن پیش نیاید. رنگِ لبه + متن، نه رنگِ تنها. */
.acct .error-msg { display: none; margin: 0; padding-inline-start: 4px; font-size: 12.5px; line-height: 1.7; color: #9b2f22; font-weight: 700; }
.acct input[aria-invalid="true"] { border-color: #c4463a; background: #fff3f1; }
.acct .field:has(input[aria-invalid="true"]) .error-msg { display: block; }
/* دکمه‌ی اصلی — طلای ساخته‌شده با CSS، نه بیت‌مپِ کش‌آمده. سه لایه: قابِ
   طلاییِ تیره، لبه‌ی روشنِ کرم داخلش، و بدنه‌ی گرادیانی با برقِ بالا؛ زیرش
   یک پله‌ی سه‌بعدی که با فشار فرو می‌رود. همان زبانِ پلاک‌های دوقابِ اپ. */
.acct .btn {
  inline-size: 100%; margin-block-start: 4px; min-block-size: 54px;
  font-size: 17px; font-weight: 700; letter-spacing: .01em;
  color: #3a2a10; text-shadow: 0 1px 0 #fff3c9a6;
  border: 2px solid #8f6f2e; border-radius: 16px;
  background:
    linear-gradient(180deg, #fbe6a3 0%, #ecc65f 34%, #d9a53f 62%, #c58334 100%);
  box-shadow:
    inset 0 0 0 2px #fff6d8b3,          /* لبه‌ی روشنِ داخلی */
    inset 0 -3px 0 #a8742a66,           /* سایه‌ی زیرِ بدنه */
    0 4px 0 #6f4f16,                    /* پله‌ی سه‌بعدی */
    0 10px 18px #00000040;
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.acct .btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: inset 0 0 0 2px #fff6d8b3, inset 0 -3px 0 #a8742a66, 0 5px 0 #6f4f16, 0 14px 22px #00000048; }
.acct .btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px #fff6d8b3, inset 0 -3px 0 #a8742a66, 0 1px 0 #6f4f16, 0 4px 8px #00000040; }
.acct .btn:focus-visible { outline: 3px solid #e9cd7e; outline-offset: 3px; }
.acct .btn::after { display: none; }   /* برقِ روان روی دکمه‌ی فرم زیادی است */
.acct .btn[disabled] {
  filter: none; cursor: default; transform: none;
  color: #7a6440; text-shadow: none;
  background: linear-gradient(180deg, #ecdcb3, #d9c39a);
  border-color: #b79d6a;
  box-shadow: inset 0 0 0 2px #fff6d8b3, 0 3px 0 #9c8560, 0 6px 10px #00000026;
}
.acct .msg { min-block-size: 1.4em; margin: 12px 0 0; text-align: center; color: #8a3b2b; font-weight: 700; font-size: 14px; }
.acct .msg:empty { display: none; }
.acct .state { margin: 0; text-align: center; font-size: 13.5px; line-height: 1.7; color: #8a3b2b; font-weight: 700; }
.acct .state:empty { display: none; }
/* دکمه‌ی فرعی («دوباره»): همان قابِ دوخط، بدنه‌ی کرم، پله‌ی کوتاه‌تر. */
.acct .btn.ghost {
  min-block-size: 48px; font-size: 15px; margin-block-start: 0;
  color: #4a3718; text-shadow: none;
  background: linear-gradient(180deg, #fffaf0, #f1e3c6);
  border: 2px solid var(--rim);
  box-shadow: inset 0 0 0 2px #ffffffb3, 0 3px 0 #a8823f, 0 6px 10px #00000026;
}
.acct .btn.ghost:hover { filter: none; background: linear-gradient(180deg, #fffdf6, #f6ead2); }
.acct .btn.ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #ffffffb3, 0 1px 0 #a8823f; }
.acct .btn[disabled] { filter: grayscale(.5) brightness(.9); cursor: default; }
.acct .msg.ok { color: #2f7a46; }
@media (max-width: 480px) {
  .acct { padding: 18px 12px calc(28px + env(safe-area-inset-bottom, 0px)) !important; align-content: start; }
  .acct .card { padding: 20px 16px 18px; }
}
/* گوشیِ افقی (ارتفاعِ کم): نوارِ بالا چسبنده نمانَد و ۷۰ پیکسل از ۳۹۰ را نخورد؛
   فرم از بالا شروع می‌شود و با صفحه اسکرول می‌کند. */
@media (max-height: 520px) {
  .acctpage .topbar { position: static; }
  .acct { min-block-size: auto; align-content: start; padding-block-start: 16px !important; }
}
/* تب‌ها فقط در ورود/ثبت‌نام؛ قاعده‌ی عمومیِ .acct .tabs (display:flex) را این‌جا می‌بندیم. */
.acct:not([data-mode="login"]):not([data-mode="register"]) .tabs { display: none; }

/* ---- نوارِ قدرتِ رمز: یک جمله، یک رنگ ----
   قرمز = هنوز شرطِ سرور را ندارد، سبز = دارد. پرشدنِ نوار = چند تا از پنج شرط. */
.acct .pw-meter { display: flex; align-items: center; gap: 10px; padding: 4px 6px 0; font-size: 12.5px; font-weight: 700; color: #8a7a5c; }
.acct .pw-meter i { flex: 1; display: block; block-size: 6px; border-radius: 999px; background: #d9c8a6; overflow: hidden; position: relative; }
.acct .pw-meter i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--fill, 0) * 100%); border-radius: 999px; background: currentColor; transition: inline-size .2s ease, background-color .2s ease; }
.acct .pw-meter span { flex: none; white-space: nowrap; }
.acct .pw-meter[data-level="weak"] { color: #b3443a; }
.acct .pw-meter[data-level="strong"] { color: #2f7a46; }

/* ---- خروج در نوارِ بالا و پنجره‌ی پرسش ---- */
.bar nav #acct-logout {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 12px; border-radius: 10px;
  border: 0; background: none; color: #8a3b2b; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.bar nav #acct-logout:hover { background: #00000012; }
#site-ask { border: 3px solid var(--rim); border-radius: 18px; padding: 22px 20px; inline-size: min(380px, calc(100vw - 32px));
  background: #fffaf0; color: #3a2a10; box-shadow: inset 0 0 0 2px #ffffffb3, 0 18px 50px #00000073; text-align: right; }
#site-ask::backdrop { background: #08061899; backdrop-filter: blur(3px); }
#site-ask b { display: block; font-size: 17px; margin-bottom: 8px; }
#site-ask p { margin: 0 0 16px; font-size: 14px; line-height: 1.8; color: #5b4523; }
#site-ask .acts { display: flex; gap: 8px; }
#site-ask .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-block-size: 46px; border-radius: 14px;
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; border: 2px solid var(--rim); background: linear-gradient(180deg, #fffaf0, #f1e3c6); color: #4a3718; }
#site-ask .btn.out { border-color: #b8564a; background: linear-gradient(180deg, #d96a5e, #a83b31); color: #fff4f1; }

/* شمارِ میزِ زنده‌ی هر بازی روی کارتِ قفسه — زیرِ پیلِ «آنلاین» */
.gt .live-n {
  position: absolute; inset-block-start: calc(5% + 2.4em); inset-inline-end: 6%;
  padding: .22em .7em; border-radius: 999px; font-size: clamp(10px, 4.2cqw, 13px); font-weight: 700;
  color: #fff8e6; background: #1f4d2fd9; border: 1.5px solid #3ec46d99; box-shadow: 0 2px 6px #00000059;
}
@media (max-width: 620px) { .live-grid { padding-inline: 12px; gap: 12px; } .live-card .seats { grid-template-columns: 1fr; } }

/* ---- «در یک نگاه» — ستونِ کنارِ قواعد ---- */
.card.side .specs { margin: 0 0 14px; padding: 0; display: grid; gap: 0; }
.card.side .specs > div {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 10px 0; border-block-end: 2px solid #8f6f2e2e;
}
.card.side .specs > div:last-child { border-block-end: 0; }
.card.side .specs dt { margin: 0; color: #8a5a1a; font-size: 14px; font-weight: 700; flex: none; }
.card.side .specs dd { margin: 0; color: var(--ink-w); font-size: 15px; font-weight: 700; text-align: start; }
.card.side .muted { color: #6f5a30; font-size: 14.5px; line-height: 1.8; margin: 0 0 16px; }
.card.side .btn { inline-size: 100%; }

/* «n آنلاین» در نوارِ بالا */
.bar .onl { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding: 0 12px; border-radius: 999px; background: #00000012; box-shadow: inset 0 0 0 2px #b8955f6b; color: var(--ink-w); font-size: 13px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.bar .onl i { inline-size: 8px; block-size: 8px; border-radius: 999px; background: #3ec46d; box-shadow: 0 0 6px #3ec46d; }
/* نوارِ بالا روی نمایشگرِ باریک از عرض بیرون می‌زد و صفحه را کنار می‌کشید —
   هفت لینکِ ناوبری، کپسولِ حساب، و حالا کدِ اتاق. به‌جای حذفِ یکی‌یکیِ
   قطعه‌ها، خودِ نوار افقی می‌لغزد: هرچه هست در دسترس می‌مانَد و صفحه سرِ
   جایش. نوارِ لغزش پنهان است، وگرنه زیرِ آیکون‌ها یک خطِ خاکستری می‌نشست. */
@media (max-width: 1040px) {
  .bar { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .bar::-webkit-scrollbar { display: none; }
}

@media (max-width: 820px) { .bar .onl { display: none; } }

/* سرِ ردیف‌ها: عنوانِ بنری + لینک/آمار در سمتِ دیگر */
.rowhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-inline-size: 1140px; margin: 0 auto 10px; padding-inline: 24px; flex-wrap: wrap; }
.rowhead .hall { margin: 0; }
.morelink {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 38px; padding: 6px 14px; border-radius: 999px;
  color: #ffe08a; font-weight: 700; text-decoration: none; font-size: 14px;
  background: #ffffff10; border: 1.5px solid #ffffff26; white-space: nowrap;
}
.morelink:hover { background: #ffffff1f; }
.rowhead .live-stat { margin: 0; }
.live-stat { text-align: center; color: #f3e9d2; font-size: 15px; font-weight: 700; text-shadow: 0 1px 2px #00000080; }
.live-stat::before { content: ""; display: inline-block; inline-size: 9px; block-size: 9px; border-radius: 999px; background: #3ec46d; box-shadow: 0 0 8px #3ec46d; margin-inline-end: 8px; vertical-align: middle; }

/* بازی‌های آنلاین — کارت‌های افقی با شمارِ نفر */
.modes-sec { padding-block: 26px 20px !important; }
.modes-sec + .shelf { border-block-start: 0; padding-block-start: 6px !important; }
.modes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); max-inline-size: 1140px; margin-inline: auto; padding-inline: 24px; }
.mode {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 18px; text-decoration: none; color: #fff8ea;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c, #388d94) 88%, #fff 12%), color-mix(in srgb, var(--c, #388d94) 80%, #000 20%));
  border: 3px solid var(--frame); box-shadow: inset 0 0 0 2px #fff2d966, 0 8px 22px -10px #000000b3;
  transition: transform .14s ease;
}
.mode:hover { transform: translateY(-3px); }
.mode::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(90% 60% at 50% 0%, #ffffff26 0%, #ffffff00 70%); pointer-events: none; }
.mode { position: relative; overflow: hidden; }
.mode img { inline-size: 68px; block-size: 68px; filter: drop-shadow(0 8px 10px #00000073); position: relative; z-index: 1; }
.mode div { display: flex; flex-direction: column; min-inline-size: 0; }
.mode b { font-size: 19px; }
.mode .d { font-size: 13px; color: #fff3dccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode .n { font-size: 12px; color: #fff3dc99; }
.mode .on { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #0b0a2a66; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mode .on i { inline-size: 8px; block-size: 8px; border-radius: 999px; background: #8a8a8a; }
.mode.hot .on i { background: #3ec46d; box-shadow: 0 0 8px #3ec46d; }
@media (max-width: 620px) { .modes { padding-inline: 12px; } .mode { grid-template-columns: 52px 1fr; } .mode .on { grid-column: 1 / -1; justify-self: start; } }

/* میزهای زنده — جدولِ میزها روی لاجورد */
.live { padding-block: 26px 30px !important; }
.live-panel {
  max-inline-size: 1140px; margin-inline: auto; padding: 14px;
  background: #0b0a2a66; border: 2px solid #ffffff1f; border-radius: 20px;
  box-shadow: inset 0 1px 0 #ffffff14, 0 20px 40px -24px #000000b3;
}
.live-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 12px; }
.live-tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: #0b0a2a80; border: 1.5px solid #ffffff1a; }
.live-tabs button {
  min-block-size: 38px; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  color: #e0d6bd; background: transparent; border: 0;
}
.live-tabs button:hover { background: #ffffff12; }
.live-tabs button b { margin-inline-start: 5px; color: #ffe08a; font-variant-numeric: tabular-nums; }
.live-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #fbe6a3, #e0b24f); color: #2a1f08; box-shadow: inset 0 0 0 1.5px #fff6d8a6, 0 1px 0 #8f6f2e; }
.live-tabs button[aria-selected="true"] b { color: #5c3f1c; }
.live-table { margin: 0; padding: 0; }
.live-table table { inline-size: 100%; border-collapse: separate; border-spacing: 0; background: #0b0a2a66; border: 2px solid #ffffff1f; border-radius: 16px; overflow: hidden; color: #f3e9d2; }
.live-table th { text-align: start; font-size: 12px; letter-spacing: .06em; color: #c9bfa4; padding: 12px 14px; border-block-end: 2px solid #ffffff1f; background: #0b0a2a55; font-weight: 700; }
.live-table td { padding: 12px 14px; border-block-end: 1px solid #ffffff14; vertical-align: middle; font-size: 15px; }
.live-table tr:last-child td { border-block-end: 0; }
.live-table tbody tr:hover td { background: #ffffff0a; }
.live-table .c-i { color: #ffe08a; font-weight: 700; inline-size: 44px; }
.live-table .c-m { display: flex; align-items: center; gap: 12px; }
.live-table .c-m .ga { inline-size: 44px; block-size: 44px; flex: none; filter: drop-shadow(0 4px 6px #00000059); }
.live-table .c-m div { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.live-table .c-m b { font-size: 16px; color: #fff8ea; }
.live-table .c-m small { font-weight: 400; color: #c9bfa4; font-size: 12.5px; }
.live-table .faces { display: flex; gap: 2px; }
.live-table .faces img { inline-size: 26px; block-size: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0b0a2a; margin-inline-end: -6px; }
.live-table .faces img.bot { opacity: .55; }
.live-table .faces img.off { filter: grayscale(1); opacity: .5; }
.live-table .pill { display: inline-block; padding: 4px 12px; border-radius: 8px; background: #ffffff12; border: 1px solid #ffffff2b; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.live-table .c-n b { font-size: 17px; color: #fff8ea; }
.live-table .c-n small { color: #c9bfa4; font-size: 12px; margin-inline-start: 6px; }
.live-table .c-w, .live-table .c-s, .live-table .c-t { color: #e0d6bd; white-space: nowrap; }
.live-table .c-a { text-align: end; inline-size: 120px; }
.live-table .join {
  display: inline-flex; align-items: center; justify-content: center; min-inline-size: 104px; min-block-size: 42px; padding: 8px 18px; border-radius: 10px;
  font-weight: 800; font-size: 15px; color: #fff; text-decoration: none; letter-spacing: .03em;
  background: linear-gradient(180deg, #3ec46d, #2a9a52); border: 1.5px solid #1f7a40; box-shadow: 0 3px 0 #17602f, 0 6px 14px -6px #000000b3;
}
.live-table .join:hover { filter: brightness(1.07); transform: translateY(-1px); }
/* حالتِ خالی: کارتِ روشن با آیکون، عنوان، توضیح و دو کار — نه یک جمله‌ی لخت */
.live-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 36px 20px 30px; border-radius: 16px; border: 1.5px dashed #ffffff2b; background: #ffffff08; color: #f3e9d2;
}
.live-empty svg.big { inline-size: 56px; block-size: 56px; color: #ffe08a; opacity: .9; margin-block-end: 4px; }
.live-empty h3 { margin: 0; font-size: 20px; color: #fff8ea; }
.live-empty p { margin: 0; max-inline-size: 52ch; color: #d9cfb6; font-size: 15px; line-height: 1.8; }
.live-empty .acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-block-start: 12px; }
.live-empty .join {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding: 8px 24px; border-radius: 10px;
  font-weight: 800; font-size: 15px; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #3ec46d, #2a9a52); border: 1.5px solid #1f7a40; box-shadow: 0 3px 0 #17602f, 0 6px 14px -6px #000000b3;
}
.live-empty .ghost { display: inline-flex; align-items: center; min-block-size: 44px; padding: 8px 18px; border-radius: 10px; color: #f3e9d2; text-decoration: none; font-weight: 700; font-size: 15px; background: #ffffff10; border: 1.5px solid #ffffff2b; }
@media (max-width: 860px) {
  .live-panel { padding: 10px; border-radius: 16px; }
  .live-table table, .live-table tbody, .live-table tr, .live-table td { display: block; }
  .live-table thead { display: none; }
  .live-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px; border-block-end: 1px solid #ffffff14; }
  .live-table td { padding: 0; border: 0; }
  .live-table .c-i { display: none; }
  .live-table .c-m { grid-column: 1 / -1; }
  .live-table .c-g { grid-column: 1 / -1; }
  .live-table td[data-l]::before { content: attr(data-l) " "; color: #c9bfa4; font-size: 12px; margin-inline-end: 4px; }
  .live-table .c-a { grid-column: 1 / -1; text-align: center; inline-size: auto; padding-block-start: 4px; }
  .live-table .join { inline-size: 100%; }
  .live-bar .morelink { display: none; }
}

/* فروشگاه */
.shop { padding-block: 26px 40px !important; }
.shopgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); max-inline-size: 1140px; margin-inline: auto; padding-inline: 24px; }
.card.item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 20px 18px; }
.card.item img { inline-size: 72px; block-size: 72px; filter: drop-shadow(0 6px 10px #00000040); }
.card.item svg.big { inline-size: 64px; block-size: 64px; fill: #c58334; filter: drop-shadow(0 6px 10px #00000040); }
.card.item h3 { margin: 4px 0 0; font-size: 22px; color: var(--ink-w); }
.card.item p { margin: 0 0 8px; color: #6f5a30; font-size: 14.5px; line-height: 1.8; }
.card.item .btn { inline-size: auto; padding-inline: 30px; }
.card.item.gold { background: linear-gradient(180deg, #fbe6a3, #eed9a8); }
.shopnote { max-inline-size: 640px; margin: 18px auto 0; text-align: center; color: #c9bfa4; font-size: 13px; }

/* ---- فروشگاه (‎/shop.html) ----
   سربرگ با نشانِ کوچک، تیزرِ اشتراک، زبانه‌ی دسته‌ها، و شبکه‌ی کارت‌ها.
   خودِ خرید در ‎/play است و هر کارت به همان‌جا می‌بَرد؛ این‌جا ویترین است. */

/* سربرگ فشرده، مثلِ بقیه‌ی صفحه‌های درونی (topbanner/subbanner).
   بی این، هیروی لندینگ ارث می‌رسید و سیصد پیکسل نوارِ سیاهِ خالی بالای
   صفحه می‌گذاشت. */
.shophero { padding-block: 34px 20px; text-align: center; }
.shophero .big {
  inline-size: 56px; block-size: 56px; stroke: var(--gold-bright, #f0d79a);
  filter: drop-shadow(0 6px 14px #00000059);
}
.shophero h1 { margin: 0 0 8px; font-size: clamp(27px, 4.6vw, 42px); }
.shophero .lede { margin: 0 auto; max-inline-size: 54ch; color: var(--muted); }
.pillbadge {
  display: inline-flex; align-items: center; gap: 8px; margin-block-end: 14px;
  padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--gold, #e6b651); background: #e6b6511a; border: 1px solid #e6b65159;
}
.pillbadge svg { inline-size: 13px; block-size: 13px; fill: currentColor; }

/* تیزرِ اشتراک: عنوان و دکمه در یک ردیف، سه مزیت زیرشان. */
/* عنوان و دکمه در یک ردیف، ولی متن رشد می‌کند و دکمه فقط جای خودش را
   می‌گیرد — با space-between، وسطِ کارت یک حفره‌ی بزرگ می‌مانْد. */
.shopsub .subhead { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
@media (max-width: 680px) { .shopsub .subhead { grid-template-columns: 1fr; } }
.shopsub h2 { margin: 0 0 6px; font-size: 21px; color: var(--gold, #e6b651); }
.shopsub .muted { margin: 0; }
.shopsub .btn { inline-size: auto; padding-inline: 26px; }
.freetag {
  display: inline-block; margin-inline-start: 8px; padding: 3px 9px; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; color: #2a1d05; background: var(--gold, #e6b651);
}
.perkrow {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border-block-start: 1px solid #e6b65126;
}
.perkrow li { display: flex; align-items: center; gap: 12px; }
.perkrow .fi { inline-size: 22px; block-size: 22px; flex: none; stroke: var(--gold, #e6b651); }
.perkrow span { display: grid; gap: 2px; font-size: 12.5px; color: #c9bfa4; }
.perkrow b { font-size: 13.5px; color: #e9dfc4; }

/* زبانه‌ها: روی گوشی افقی می‌لغزند تا پنج‌تایی در یک خط جا شود. */
.shoptabs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  overflow-x: auto; padding-block-end: 4px; margin-block-end: 26px; scrollbar-width: none;
}
.shoptabs::-webkit-scrollbar { display: none; }
.shoptab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 18px; border-radius: 14px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text); background: #ffffff0d; border: 1px solid var(--hair); transition: background .15s, color .15s;
}
.shoptab .fi { inline-size: 16px; block-size: 16px; stroke: currentColor; }
.shoptab:hover { background: #ffffff17; }
.shoptab.on { color: #2a1d05; background: var(--gold, #e6b651); border-color: transparent; }

/* شبکه‌ی کارت‌ها: دو، سه، چهار ستون.
   با auto-fill روی دسکتاپِ پهن شش ستون می‌شد و کارت‌ها آن‌قدر باریک که
   برچسبِ دکمه دوخطی می‌شد؛ شمارِ ثابت این را می‌بندد. */
.srack { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px)  { .srack { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .srack { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* جمله‌ی هر دسته، بالای شبکه. ویژگی‌اش از `.catlead` تنها بالاتر است:
   قاعده‌ی عمومیِ بند در .shelf چینشِ start را برمی‌گرداند و جمله به لبه
   می‌چسبید. */
.shoppanel .catlead {
  margin: 0 auto 18px; max-inline-size: 60ch; text-align: center;
  font-size: 13px; color: #a79c80;
}

/* کارتِ قلم = همان شیتِ کرمِ بقیه‌ی سایت.
   اول پلاکِ تیره بود و صفحه یک دیوارِ سرمه‌ایِ یکنواخت می‌شد — نه شبیهِ
   لندینگ، نه شبیهِ صفحه‌ی اشتراک. کرم همان چیزی است که سایت را سایت
   می‌کند. */
.sitem { gap: 6px; padding: 14px 12px 16px; border-radius: 22px; border-width: 3px; }
.sitem-art {
  display: grid; place-items: center; inline-size: 100%; aspect-ratio: 4 / 3;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #f3e3bd, #e7d3a6);
  box-shadow: inset 0 0 0 2px #ffffffa6, inset 0 2px 10px #0000001a;
}
.sitem-art img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }
.sitem h3 { margin: 6px 0 0; font-size: 17px; }
.sitem .sitem-price { font-size: 13.5px; color: #6f5a30; }
.sitem-price b { font-size: 17px; font-weight: 800; color: #8a5a1a; }
.sitem-price s { opacity: .6; margin-inline-end: 6px; font-size: 12.5px; }
/* برچسبِ دکمه روی کارتِ باریکِ گوشی سه‌خطی می‌شد. */
.sitem .btn { inline-size: 100%; padding-inline: 8px; font-size: 13.5px; white-space: nowrap; }

/* تا نیامدنِ هنرِ قلم‌ها، قابْ خالی نمی‌مانَد: نشانِ خالِ طلایی روی همان
   کرم — جای خالیِ خاکستری، کارت را شکسته نشان می‌داد. */
.sitem-art:not(:has(img))::after {
  content: ""; inline-size: 46%; block-size: 46%;
  background: var(--gold-rim, #8f6f2e);
  opacity: .22;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-2 3.4-6.4 6-6.4 9.6 0 2.4 1.9 4 4 4 1 0 1.8-.3 2.4-.9-.2 2-.9 3.3-2 4.1h4c-1.1-.8-1.8-2.1-2-4.1.6.6 1.4.9 2.4.9 2.1 0 4-1.6 4-4 0-3.6-4.4-6.2-6.4-9.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-2 3.4-6.4 6-6.4 9.6 0 2.4 1.9 4 4 4 1 0 1.8-.3 2.4-.9-.2 2-.9 3.3-2 4.1h4c-1.1-.8-1.8-2.1-2-4.1.6.6 1.4.9 2.4.9 2.1 0 4-1.6 4-4 0-3.6-4.4-6.2-6.4-9.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* بخشِ دانلودِ اپ.
   سه دکمه‌ی نشان‌دار کنارِ هم، و زیرشان نسخه و حجم در یک خط. روی گوشیِ
   اندروید کافه‌بازار تمام‌عرض و اصلی می‌شود — بازارِ هدف ایران است و آن‌جا
   آدم واقعاً نصب می‌کند. تا وقتی نشانی‌ای نیامده، دکمه‌ها لینک نیستند و
   کم‌رنگ می‌مانند. */
.dlcard { max-inline-size: 700px; margin-inline: auto; text-align: center; }
.dlnote { margin: 0 auto; max-inline-size: 460px; color: #c9bfa4; font-size: 14px; line-height: 1.8; }
.dlrow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block-start: 22px; }
.dlbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; inline-size: auto; padding-inline: 20px; }
.dlbtn .bi { inline-size: 22px; block-size: 22px; flex: none; }
.dlbtn .fi { inline-size: 20px; block-size: 20px; flex: none; }
.dlrow [aria-disabled="true"] { opacity: .5; cursor: default; }
.dlrow [aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.dlrow.onphone { flex-direction: column; align-items: stretch; }
.dlrow.onphone .dlbtn { inline-size: 100%; }

.dlmeta { margin-block-start: 18px; }
.dlver { margin: 0; color: #e9dfc4; font-weight: 600; font-size: 14px; }

/* ---- لیگ و جام روی لندینگ (live.js پرش می‌کند) ----

   هشدار: از --plate این‌جا استفاده نکن. پایین‌ترِ همین شیت یک :root دوم آن را
   برای «سربرگِ کرم» به #f1e1c7 عوض می‌کند و چون بعدتر است، همه‌جا می‌بَرد.
   کارت با آن از نیلی به کرم محو می‌شد و متنِ کم‌رنگ روی کرم ناخوانا بود. */
.cups { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

.cup {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); text-decoration: none; color: var(--text);
  background: linear-gradient(180deg, #2f2569, #201a4e);
  border: 1px solid var(--hair);
  box-shadow: 0 10px 30px #00000055;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cup:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 18px 44px #00000075; }

/* قابِ تصویر. همیشه هست — حتی بی‌بنر — تا همه‌ی کارت‌ها یک قد بمانند. */
.cup .shot { position: relative; display: block; aspect-ratio: 3 / 1; overflow: hidden; background: radial-gradient(120% 140% at 50% 0%, #3a2f7e 0%, #1b1544 100%); }
.cupbanner { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.cup:hover .cupbanner { transform: scale(1.045); }
/* محوشدنِ تصویر در بدنه، تا لبه‌ی تیزِ عکس وسطِ کارت نیفتد. */
.cup .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #00000000 45%, #201a4ee6 100%); pointer-events: none; }
/* بی‌بنر: نشانِ نوع، درشت و کم‌رنگ، جای عکس. */
.cup .shot.noimg::before { content: attr(data-glyph); position: absolute; inset: 0; display: grid; place-items: center; font-size: 54px; opacity: .22; }

.cup .k {
  position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-start: 10px;
  background: #130c33d9; border: 1px solid var(--gold); color: var(--gold-bright);
  border-radius: 999px; padding: 2px 11px; font-size: 12px; line-height: 20px;
}

.cup .body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.cup b { font-size: 18px; color: var(--text); line-height: 1.5; }
/* توضیح تا دو خط؛ کارزارِ پرحرف نباید کارتِ کنارش را بلند کند. */
.cup .d { color: var(--muted); font-size: 13.5px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cup .m { display: flex; flex-wrap: wrap; gap: 6px; }
.cup .m span { background: #ffffff0f; border: 1px solid var(--hair-2); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--muted); white-space: nowrap; }
/* جایزه تنها چیزی است که باید از فاصله دیده شود. */
.cup .m .prize { background: linear-gradient(180deg, var(--gold-btn-top), var(--gold-btn-bot)); border-color: transparent; color: #2a1d06; font-weight: 700; }

/* ---- برترین بازیکنان ---- */
.toplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.toplist li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 12px; align-items: center;
  background: linear-gradient(180deg, #2f2569, #241d56); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 9px 14px; }
.toplist .rk { font-variant-numeric: tabular-nums; color: var(--faint); text-align: center; }
/* سه نفرِ اول دیده شوند، وگرنه فهرست یک ستونِ یکنواختِ عدد است. */
.toplist li:nth-child(1) { border-color: var(--gold); background: linear-gradient(180deg, #3a2f6e, #2a2159); }
.toplist li:nth-child(1) .rk, .toplist li:nth-child(2) .rk, .toplist li:nth-child(3) .rk { color: var(--gold-bright); font-weight: 700; }
.toplist .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toplist .wn { color: var(--muted); font-size: 13px; white-space: nowrap; }
.toplist .pt { color: var(--gold-bright); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- صفحه‌بندیِ میزهای زنده ---- */
.live-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-block-start: 1px solid var(--hair-2); }
.live-pager button { background: #ffffff12; border: 1px solid var(--hair); color: var(--text); border-radius: 999px; padding: 5px 16px; cursor: pointer; }
.live-pager button:disabled { opacity: .4; cursor: default; }
.live-pager span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ═══════════════ صفحه‌ی برترین بازیکنان (/top.html) ═══════════════
   هشدار: این بخش تهِ شیت است و بالاتر یک :root ِ دوم --plate را به کرم
   برمی‌گردانَد. پس رنگِ تیره این‌جا صریح نوشته می‌شود، نه با متغیرِ --plate.
   همان اشتباهی که یک بار کارتِ لیگِ لندینگ را شیری کرد. */

.topbanner { padding-block: 34px 18px; }
.topbanner h1 { margin: 0 0 6px; font-size: clamp(26px, 4.4vw, 40px); }
.topbanner .lede { margin: 0; color: var(--muted); max-inline-size: 60ch; }

/* ---- فیلترها ---- */
/* دو گروهِ فیلتر، هر کدام یک ردیف. با یک فلکسِ مشترک، روی گوشی چیپ‌های
   «بازی» و «بازه» در هم می‌رفتند و معلوم نبود کدام به کدام گروه است. */
.tfilters { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-block-end: 20px; }
.tgroup { position: relative; }
.tgroup::after {
  content: ""; position: absolute; inset-block: 6px; inset-inline-end: -11px;
  inline-size: 1px; background: var(--hair);
}
.tgroup:last-child::after { display: none; }
.tgroup { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip {
  background: #ffffff10; border: 1px solid var(--hair); color: var(--text);
  border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 14px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tchip:hover { background: #ffffff1c; }
.tchip.on {
  background: linear-gradient(180deg, var(--gold-btn-top), var(--gold-btn-bot));
  border-color: #f0d79a; color: #2a1f08; font-weight: 700;
}

/* ---- دیسکِ حرفِ اول ----
   آواتارِ واقعی نداریم؛ رنگ از خودِ نام می‌آید، پس هر کس همیشه همان رنگ را
   دارد و چشم ردیف‌ها را از هم جدا می‌کند. */
.tav {
  inline-size: 38px; block-size: 38px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  font-weight: 700; font-size: 17px; line-height: 1;
  color: #fdf6e6;
  background: linear-gradient(180deg, hsl(var(--h) 44% 46%), hsl(var(--h) 46% 32%));
  box-shadow: inset 0 0 0 1px #ffffff2e, 0 1px 3px #0006;
}

/* ---- سکوی سه نفرِ اول ---- */
.podium {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end;
}
.pod {
  position: relative; display: grid; justify-items: center; gap: 6px;
  padding: 20px 12px 16px;
  background: linear-gradient(180deg, #332a72, #241d56);
  border: 1px solid var(--hair); border-radius: var(--r-md);
  text-align: center;
}
/* بلندیِ پله‌ها. با align-items:end، پله‌ی کوتاه‌تر کفش هم‌تراز می‌مانَد و
   سرش پایین‌تر می‌نشیند — همان سکوی مدال. تفاوت باید از یک نگاه دیده شود:
   با اختلافِ چند پیکسل، هر سه یک‌قد به نظر می‌آمدند. */
.pod.gold   { padding-block: 34px 26px; border-color: var(--gold);
  background: linear-gradient(180deg, #443888, #2a2159);
  box-shadow: 0 0 0 1px #f0d79a33, 0 10px 26px #0006; }
.pod.silver { padding-block: 22px 18px; }
.pod.bronze { padding-block: 12px 14px; }
.pod .tav { inline-size: 54px; block-size: 54px; font-size: 23px; }
.pod.gold .tav { inline-size: 64px; block-size: 64px; font-size: 27px; }
.pmedal {
  position: absolute; inset-block-start: -11px; inset-inline-start: 50%; transform: translateX(50%);
  min-inline-size: 30px; padding: 2px 9px; border-radius: 999px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #2a1f08; background: linear-gradient(180deg, #cfcfd6, #9d9daa); box-shadow: 0 1px 3px #0007;
}
.pod.gold .pmedal { background: linear-gradient(180deg, var(--gold-bright), var(--gold-btn-bot)); }
.pod.bronze .pmedal { background: linear-gradient(180deg, #d5a173, #a97243); }
.pname { font-size: 16px; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppt { color: var(--gold-bright); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.ppt i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--muted); }
.pwn { color: var(--muted); font-size: 12px; }

/* ---- جدولِ بقیه ---- */
.tboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.trow {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 38px 38px minmax(0, 1fr) 96px auto 64px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #2c2465, #241d56);
  border: 1px solid var(--hair); border-radius: var(--r-sm);
}
.trow:hover { background: linear-gradient(180deg, #342b75, #281f5f); }
.trk { text-align: center; color: var(--faint); font-variant-numeric: tabular-nums; font-size: 14px; }
.tnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twn { color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tpt { color: var(--gold-bright); font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }

/* نرخِ برد: عدد تنها معنا نمی‌دهد، نوار در یک نگاه مقایسه‌شدنی است. */
.trate { display: grid; grid-template-columns: 1fr 34px; gap: 8px; align-items: center; }
.trate i {
  display: block; block-size: 7px; border-radius: 999px; min-inline-size: 7px;
  background: linear-gradient(90deg, var(--gold-btn-bot), var(--gold-bright));
}
.trate::before {
  content: ""; grid-area: 1 / 1; block-size: 7px; border-radius: 999px;
  background: #ffffff1f; box-shadow: inset 0 1px 2px #0004;
}
.trate i { grid-area: 1 / 1; }
.trate b { font-size: 12px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; text-align: start; }

.tnote { margin: 18px 0 0; color: var(--muted); text-align: center; }
.tfoot { margin: 10px 0 0; color: var(--faint); font-size: 13px; text-align: center; }

@media (max-width: 720px) {
  .tfilters { flex-direction: column; gap: 10px; }
  .tgroup::after { display: none; }
  /* روی گوشی، نرخِ برد و «n برد از m» یک چیز را دو بار می‌گویند و ردیف را
     می‌شکنند. عدد می‌مانَد، نوار می‌رود. */
  .trow { grid-template-columns: 30px 34px minmax(0, 1fr) auto 54px; gap: 9px; padding: 8px 10px; }
  .trate { display: none; }
  .tav { inline-size: 34px; block-size: 34px; font-size: 15px; }
  .twn { font-size: 12px; }
  .podium { gap: 7px; }
  .pod { padding: 16px 6px 12px; }
  .pod.gold { padding-block: 24px 16px; }
  .pod .tav { inline-size: 44px; block-size: 44px; font-size: 19px; }
  .pod.gold .tav { inline-size: 52px; block-size: 52px; font-size: 22px; }
  .pname { font-size: 14px; }
  .ppt { font-size: 17px; }
  .pwn { font-size: 11px; }
}

/* ═══════════════ کدِ اتاق در هدر، و «اشتراکِ ماهانه» ═══════════════ */

/* کدِ اتاق در خودِ نوارِ بالا. کوچک و بی‌ادعا: هدر جای شش قطعه‌ی دیگر هم
   هست و این نباید نوار را بشکند. */
.joinbox { display: flex; align-items: center; gap: 6px; }
.joinbox input {
  inline-size: 118px; padding: 7px 10px; border-radius: 999px;
  background: #00000026; border: 1px solid #00000033; color: var(--ink);
  font: inherit; font-size: 15px; text-align: center; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.joinbox input::placeholder { letter-spacing: normal; font-size: 13px; opacity: .65; }
.joinbox input:focus { outline: 2px solid var(--gold-deep, #c58334); outline-offset: 1px; }
.joinbox button {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-btn-top), var(--gold-btn-bot));
  border: 1px solid #f0d79a; color: #2a1f08; font: inherit; font-weight: 700; font-size: 14px;
}

/* پلاکِ تیره‌ی طلایی‌قاب — کارتِ «اشتراکِ ماهانه» در فروشگاه و کارتِ دانلودِ اپ. */
.subcard {
  padding: 24px 26px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #3b2f70, #271f59);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px #f0d79a2e, 0 14px 34px #0005;
}
.subhead { display: flex; align-items: center; gap: 16px; margin-block-end: 16px; }
.subhead h2 { margin: 0 0 3px; font-size: clamp(21px, 3vw, 27px); }
.subhead p { margin: 0; font-size: 14px; }
.btn.gold {
  background: linear-gradient(180deg, var(--gold-btn-top), var(--gold-btn-bot));
  border-color: #f0d79a; color: #2a1f08; font-weight: 700;
}

/* دو کارتیِ فروشگاه نباید تا ته کش بیاید و مثلِ بنر دیده شود. */
.shopgrid.two { max-inline-size: 760px; margin-inline: auto; }



/* ═══════════════ صفحه‌ی اشتراکِ ماهانه (/sub.html) ═══════════════ */

.subbanner { padding-block: 34px 18px; text-align: center; }
.subbanner svg { inline-size: 64px; block-size: 64px; fill: var(--gold-bright);
  filter: drop-shadow(0 4px 10px #00000066); }
.subbanner h1 { margin: 6px 0 6px; font-size: clamp(27px, 4.6vw, 42px); }
.subbanner .lede { margin: 0 auto; color: var(--muted); max-inline-size: 52ch; }

/* کارتِ وضعیت: تنها جای کنشِ صفحه، پس از همه برجسته‌تر. */
.subact {
  margin-block-end: 26px; padding: 26px 24px; text-align: center;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #3b2f70, #271f59);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px #f0d79a2e, 0 14px 34px #0005;
}
.subact .btn { display: inline-block; inline-size: auto; min-inline-size: 240px; }
.subok { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: var(--gold-bright); }
.submsg { margin: 0 0 14px; color: var(--text); }
/* «هنوز باز نشده» باید خوانده شود ولی داد نزند: خبر است، نه خطا. */
.subsoon { margin: 14px auto 0; color: var(--faint); font-size: 13px; max-inline-size: 46ch; }

.subgrid {
  display: grid; gap: 14px; margin-block-end: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.subgrid .item svg.big { inline-size: 40px; block-size: 40px; color: var(--gold-bright); fill: none; }

.faq { display: grid; gap: 8px; }
.faq details {
  background: linear-gradient(180deg, #2c2465, #241d56);
  border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 12px 16px;
}
.faq summary { cursor: pointer; font-weight: 700; }
.faq summary::marker { color: var(--gold); }
.faq p { margin: 10px 0 2px; color: var(--muted); }

/* ─────────────────────────────────────────────────────────────── صندوق
   پیام‌ها و پشتیبانی. تا دیروز درونِ صفحه‌ی بازی بودند، پشتِ یک دکمه در
   نوارِ بالا؛ حالا صفحه‌ی خودشان را دارند و ریتمشان با صفحه‌ی بازی قاطی
   نمی‌شود. استخوان‌بندی همان جدولِ «برترین‌ها» است تا سایت یک‌دست بمانَد. */
.ibox { max-width: 760px; }
.ibact { display: flex; gap: 10px; justify-content: center; margin: 14px 0 0; }
.ibact .btn { inline-size: auto; padding-inline: 22px; }

.notices, .tickets, .msgs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }

.notice {
  padding: 14px 16px; border-radius: var(--r-md);
  background: #ffffff0a; box-shadow: inset 0 0 0 1px #ffffff1a;
}
/* هشدار و تعمیرات با رنگ هم گفته می‌شوند، ولی نه فقط با رنگ: برچسبِ
   جنس همیشه نوشته می‌شود. */
.notice.warn { box-shadow: inset 0 0 0 1px #e6b65166; background: #e6b6510f; }
.notice .nhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.notice .nhead b { font-size: 16px; }
.notice .k { font-size: 12px; color: var(--muted); }
.notice .t { font-size: 12px; color: var(--faint); margin-inline-start: auto; }
.notice p { margin: 8px 0 0; color: var(--muted); line-height: 1.85; }
.notice .got { color: #7fd18b; }
.btn.small { inline-size: auto; padding: 8px 18px; font-size: 14px; }

.tk {
  inline-size: 100%; text-align: start; cursor: pointer;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 13px 16px; border: 0; border-radius: var(--r-md); color: inherit; font: inherit;
  background: #ffffff0a; box-shadow: inset 0 0 0 1px #ffffff1a;
}
.tk:hover { background: #ffffff14; }
.tk b { font-size: 15px; }
.tk .st { font-size: 12px; color: var(--muted); }
.tk .t { font-size: 12px; color: var(--faint); margin-inline-start: auto; }

.ibform { margin: 16px 0 0; display: grid; gap: 8px; }
.ibform label { font-size: 14px; color: var(--muted); }
.ibform input, .ibform select, .ibform textarea {
  inline-size: 100%; padding: 11px 13px; border-radius: var(--r-md);
  border: 0; box-shadow: inset 0 0 0 1px #ffffff26; background: #ffffff0d;
  color: inherit; font: inherit; line-height: 1.7;
}
.ibform textarea { resize: vertical; }
.ibform h2 { margin: 6px 0 0; font-size: 18px; }

/* گفت‌وگو: پیامِ من و پیامِ پشتیبانی دو طرفِ ستون، مثلِ هر گفت‌وگوی دیگری. */
.msgs li { padding: 12px 14px; border-radius: var(--r-md); max-inline-size: 86%; }
.msgs .me { background: #e6b6511f; box-shadow: inset 0 0 0 1px #e6b65133; margin-inline-start: auto; }
.msgs .them { background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff1a; }
.msgs .who { font-size: 12px; color: var(--faint); }
.msgs p { margin: 6px 0 0; line-height: 1.85; white-space: pre-wrap; }

.tnote.ok { color: #7fd18b; }
.tnote.bad { color: #f0a0a0; }

/* ─────────────────────────────────────────────────────────────────────
   نوارِ بالا روی گوشی

   در انتهای فایل و نه کنارِ قاعده‌های دیگرِ نوار، عمداً: بلوکِ
   `@media (max-width: 1040px)` در این فایل سه بار تکرار شده و آخرینش
   پایین‌تر از بخشِ نوار است، پس هر قاعده‌ای که بالاتر بنویسیم را
   بی‌صدا پس می‌زند. (خودِ آن تکرار از قبل بوده و این‌جا دست نخورده.)
   ───────────────────────────────────────────────────────────────────── */

/* ۱. ناوبری نباید تا صفر جمع شود.
   `.bar nav` بالاتر `flex: 1 1 auto; min-inline-size: 0` دارد تا روی
   دسکتاپ فضای اضافه را پر کند. روی نمایشگرِ باریک همان قاعده کلِ نقشه را
   خنثی می‌کرد: بقیه‌ی فرزندان `flex: none`اند، پس فلکس تنها چیزی که
   می‌توانست جمع کند را جمع می‌کرد — خودِ ناوبری — تا صفر. نتیجه: هر هشت
   لینک (خانه، بازی‌ها، زنده، جام، برترین‌ها، صندوق، حساب) روی گوشی
   کاملاً ناپدید می‌شدند، و چون نوار هیچ‌وقت سرریز نمی‌کرد، لغزشِ افقی هم
   که برای همین گذاشته شده بود هرگز فعال نمی‌شد. */
@media (max-width: 1040px) {
  .bar nav { flex: none; min-inline-size: auto; overflow-x: visible; }
}

/* ۲. روی گوشی ناوبری خطِ خودش را می‌گیرد.
   لغزشِ افقیِ نوار روی دسکتاپِ باریک درست است، ولی روی گوشی یعنی هشت
   لینک پشتِ لغزشی پنهان می‌مانند که هیچ نشانه‌ای ندارد — چیزی که دیده
   نمی‌شود، نیست. با آیکون‌تنها این هشت‌تا ۳۰۲ پیکسل‌اند و در ۳۷۵ جا
   می‌شوند، پس فقط به خطِ خودشان نیاز دارند. */
@media (max-width: 820px) {
  .bar { flex-wrap: wrap; row-gap: 8px; overflow-x: visible; }
  .bar nav {
    order: 10; flex: 1 0 100%; min-inline-size: 0;
    justify-content: space-around; overflow-x: auto;
  }
  /* فاصله‌اندازها در چیدمانِ چندخطی فقط خط را می‌شکنند. */
  .bar .gap { display: none; }
  /* کدِ اتاق پایه‌ی صفر می‌گیرد و باقی‌مانده را پر می‌کند.
     نکته‌ی ظریف: فلکس خط را بر پایه‌ی اندازه‌ی *فرضیِ* آیتم می‌شکند و
     ضریبِ جمع‌شدن را تازه بعد از تقسیمِ خط اعمال می‌کند. پس با پایه‌ی
     `auto` (۱۷۰ پیکسل) خط ده پیکسل کم می‌آورد و کپسولِ حساب به خطِ بعد
     می‌رفت — حتی با `shrink: 1`، چون نوبتِ جمع‌شدن هیچ‌وقت نمی‌رسید.
     با پایه‌ی صفر هیچ‌وقت باعثِ شکستنِ خط نمی‌شود و همان جای مانده را
     می‌گیرد. */
  .bar .joinbox { flex: 1 1 0; min-inline-size: 0; }
  /* آواتار می‌رود: خودش و کپسولِ کناری‌اش هر دو به `/account.html`
     می‌روند و ردیفِ ناوبری هم آیکونِ حساب دارد — سه راه به یک صفحه، و
     هدرِ چسبان روی نمایشگرِ ۸۱۲ پیکسلی جا کم دارد. */
  .bar .me { display: none; }
  /* نشانِ ستاره هم روی گوشی می‌رود: تزئینی است (لینکِ خانه، که در کشو
     هم هست) و ۵۲ پیکسل از خطی می‌گرفت که تنگ بود. */
  .bar .sign { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   کشوی ناوبریِ گوشی

   هشت آیکونِ بی‌برچسب کنارِ هم خوانده نمی‌شد — دو تاشان ورق بودند و دو
   تاشان آدمک. روی گوشی همبرگر می‌آید و فهرست با برچسب باز می‌شود.

   لغزشِ انگشتی با scroll-snap (روشِ پیشنهادیِ راهنما) این‌جا کنار گذاشته
   شد: صفحه راست‌چین است و در RTL مقدارِ scrollLeft از صفر به **منفی**
   می‌رود، پس ناحیه‌ی لغزش به هیچ‌کدام از دو توقفگاه نمی‌رسید و ورق وسطِ
   صفحه گیر می‌کرد، روی محتوا. یک translate ِ ساده در هر دو جهت درست
   کار می‌کند و همان کاری را می‌کند که کاربر می‌خواهد.
   ───────────────────────────────────────────────────────────────────── */

.burger { display: none; }

@media (max-width: 820px) {
  .bar nav { display: none; }
  .burger {
    display: flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px; flex: none;
    border: 0; border-radius: 12px; padding: 0;
    background: #00000010; color: var(--ink-w); cursor: pointer;
  }
  .burger svg { inline-size: 24px; block-size: 24px; }
}
@media (min-width: 821px) { .drawer { display: none; } }

.drawer {
  inline-size: auto; block-size: auto; max-inline-size: none; max-block-size: none;
  inset: 0; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
}
/* ورود و خروج هر دو انیمیشن دارند.
   `allow-discrete` روی display/overlay لازم است تا عنصر تا پایانِ حرکتِ
   بسته‌شدن در لایه‌ی بالا بماند؛ بی آن، hidePopover همان لحظه ناپدیدش
   می‌کند و حرکتِ خروج اصلاً دیده نمی‌شود. */
.drawer {
  transition: display .28s allow-discrete, overlay .28s allow-discrete;
}
.drawer::backdrop { background: #000; opacity: 0; transition: opacity .25s ease, display .25s allow-discrete, overlay .25s allow-discrete; }
.drawer:popover-open::backdrop { opacity: .5; }
@starting-style { .drawer:popover-open::backdrop { opacity: 0; } }

.drawer-sheet {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  inline-size: min(20em, 82dvw);
  /* svh و نه dvh: با باز و بسته‌شدنِ نوارِ نشانیِ سافاری ارتفاع نمی‌پرد. */
  block-size: 100svh; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(180deg, var(--shelf-2), var(--shelf));
  border-inline-end: 2px solid var(--rim);
  padding: 10px 12px;
  /* بسته: یک عرضِ کامل بیرونِ لبه. `translate` منطقی نیست، پس علامت را
     خودمان با متغیرِ جهت می‌دهیم. */
  transform: translateX(var(--out, -100%));
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
/* در صفحه‌ی راست‌چین `inset-inline-start: 0` خودش یعنی لبه‌ی راست، پس
   جای ورق درست است و فقط *علامتِ* بیرون‌رفتن باید برعکس شود: بسته یعنی
   یک عرض به سمتِ راست. */
[dir="rtl"] .drawer-sheet { --out: 100%; }
.drawer:popover-open .drawer-sheet { transform: translateX(0); }
/* حالتِ آغازین، وگرنه ورق بی حرکت ظاهر می‌شود. */
@starting-style { .drawer:popover-open .drawer-sheet { transform: translateX(var(--out, -100%)); } }

@media (prefers-reduced-motion: reduce) {
  .drawer-sheet, .drawer::backdrop { transition: none; }
}

.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 12px; }
.drawer-head b { font-size: 18px; color: var(--ink-w); }
.drawer-x {
  inline-size: 40px; block-size: 40px; border: 0; border-radius: 10px;
  background: #00000010; color: var(--ink-w); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.drawer-x svg { inline-size: 22px; block-size: 22px; }
.drawer-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.drawer-sheet a {
  display: flex; align-items: center; gap: 12px;
  min-block-size: 48px; padding: 0 12px; border-radius: 12px;
  color: var(--ink-w); font-weight: 700; font-size: 16px; text-decoration: none;
}
.drawer-sheet a svg { inline-size: 22px; block-size: 22px; color: #8a5a1a; flex: none; }
.drawer-sheet a:hover { background: #00000012; }
.drawer-sheet a.on { background: #00000018; }

/* ─────────────────────────────────────────────────────────────────────
   سربرگِ تازه — طبقِ طرحِ ۱۴۰۵/۰۷

   نوارِ شامپاینیِ براق با لبه‌ی طلا و دو سرِ گرد؛ نشانِ شمسه سمتِ راست و
   پرتره در قابِ مرواریدنشان سمتِ چپ، هر دو کمی بیرون از لبه‌ی نوار.
   ناوبری با آیکونِ طلایی و خطِ درخشانِ زیرِ هر نام؛ «برو» ِ قرمز کنارِ
   کدِ اتاق؛ و کپسولِ حساب که شمارِ آنلاین‌ها را هم در خودش دارد.

   ته فایل است تا از قاعده‌های پراکنده‌ی قبلیِ `.bar` جلو بزند.
   ───────────────────────────────────────────────────────────────────── */
.vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.topbar { padding: 16px 30px 8px; }
.bar {
  gap: 14px; min-block-size: 54px; padding: 4px 26px;
  border: 1.5px solid #c9a24a; border-radius: 999px;
  background:
    linear-gradient(180deg, #fffaf066 0, #fffaf000 38%),
    radial-gradient(60% 140% at 50% 0%, #fff8e633, transparent 70%),
    linear-gradient(180deg, #ece2c9 0%, #d9ccb1 50%, #bba886 100%);
  box-shadow:
    inset 0 1.5px 0 #fffbefd9,          /* لبه‌ی روشنِ بالا */
    inset 0 -2px 0 #8c6b3a4d,           /* سایه‌ی لبه‌ی پایین */
    inset 0 0 0 3px #f6ebd0a6,          /* نوارِ کرمِ داخلِ قاب */
    0 0 0 1px #5a3d1266,                /* خطِ تیره‌ی بیرونِ طلا */
    0 6px 16px #00000080,
    0 0 22px #e9cd7e1f;
}

/* نشانِ شمسه: بزرگ‌تر، با هاله‌ی طلایی، سوار بر سرِ گردِ نوار */
.bar .sign {
  inline-size: 66px; block-size: 70px; margin-block: -16px; margin-inline: -44px 4px;
  filter: drop-shadow(0 0 10px #f6d98ab3) drop-shadow(0 0 3px #fff1c299) drop-shadow(0 3px 4px #00000066);
}

/* ناوبری و کدِ اتاق به سمتِ نشان جمع می‌شوند؛ جای خالی میانِ کدِ اتاق و
   کپسولِ حساب می‌افتد (margin-inline-end: auto روی joinbox). */
.bar nav { flex: 0 1 auto; justify-content: flex-start; gap: 18px; padding-inline-end: 14px; }
.bar .joinbox { margin-inline-end: auto; }
.bar nav a {
  position: relative; gap: 7px; min-block-size: 46px; padding: 0 8px;
  border-radius: 10px; color: #2c1e0c; font-size: 15px; font-weight: 700;
}
.bar nav a svg { inline-size: 21px; block-size: 21px; color: #a8772a; filter: drop-shadow(0 1px 0 #fff6dc99); }
.bar nav a:hover { background: none; }
/* خطِ درخشانِ زیرِ نام — کم‌رنگ برای همه، پررنگ برای صفحه‌ی جاری و زیرِ نشانگر */
.bar nav a::after, .bar nav a.on::after {
  content: ""; position: absolute; inset-inline: 10px; inset-block-end: 6px;
  block-size: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #d4a94c, transparent);
  opacity: .35; transition: opacity .15s;
}
.bar nav a:hover::after, .bar nav a:focus-visible::after, .bar nav a.on::after {
  opacity: 1; box-shadow: 0 0 6px #f1cf7acc;
}

/* کدِ اتاق: خانه‌ی روشنِ فرورفته با قابِ طلا، تا پیدا باشد که جای نوشتن است؛
   «برو» قرصِ قرمز سمتِ راستش */
.bar .joinbox { gap: 10px; }
.bar .joinbox button { order: -1; }
.joinbox input {
  inline-size: 140px; block-size: 38px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid #b8914a; background: linear-gradient(180deg, #fffdf6, #f5ead2);
  box-shadow: inset 0 2px 3px #7a5a2a33, 0 1px 0 #fff8e6b3;
  color: #2c1e0c; font-weight: 700; font-size: 17px; text-align: center; letter-spacing: .14em;
}
.joinbox input::placeholder { color: #6e5a38; opacity: 1; font-size: 15px; font-weight: 700; letter-spacing: normal; }
.joinbox input:hover { border-color: #a07a35; }
.joinbox input:focus { outline: 0; border-color: #a07a35; box-shadow: inset 0 2px 3px #7a5a2a33, 0 0 0 3px #e9cd7e99; }
.joinbox input:focus::placeholder { opacity: .45; }
.joinbox button {
  min-inline-size: 58px; min-block-size: 34px; padding: 0 16px; border-radius: 999px;
  border: 1px solid #5e1710; color: #fff6ee; font-size: 15px; font-weight: 700;
  text-shadow: 0 1px 1px #00000066;
  background: linear-gradient(180deg, #d0564a 0%, #a8322a 55%, #7f1f19 100%);
  box-shadow: inset 0 1px 0 #ffb3a399, inset 0 -2px 3px #00000040, 0 2px 4px #0000004d;
}
.joinbox button:hover { filter: brightness(1.08); }
.joinbox button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px #00000059; }

/* کپسولِ حساب: کرمِ روشن، قابِ طلا با هاله؛ «ورود / ثبت‌نام» و شمارِ آنلاین */
.idpill {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  min-block-size: 38px; padding-inline: 14px 12px; border-radius: 999px;
  background: linear-gradient(180deg, #fbf4e3, #eadcbd);
  border: 1.5px solid #c9a24a;
  box-shadow: inset 0 1px 0 #ffffffcc, inset 0 -1px 0 #b8955f59, 0 0 8px #e9cd7e59, 0 2px 3px #00000033;
}
.idpill .who {
  margin: 0; padding: 0 2px; min-block-size: 36px; gap: 8px;
  background: none; box-shadow: none; color: #2c1e0c; font-size: 15px;
}
.idpill .who:hover { background: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #c9a24a; }
.idpill .who svg { color: #8a6a3a; inline-size: 21px; block-size: 21px; }
.idpill .onl {
  gap: 7px; min-block-size: 30px; padding: 0 10px 0 2px; margin-inline-start: 14px;
  background: none; box-shadow: none; color: #8a7b62; font-size: 14px; font-weight: 700;
}
.idpill .onl i { inline-size: 9px; block-size: 9px; background: #3ec46d; box-shadow: 0 0 6px #3ec46dcc; }
/* حسابِ فعال: همان کپسول، طلایی — یعنی «وارد شده‌ای» */
.idpill:has(.who.in) { background: linear-gradient(180deg, #fbe6a3, #e0b24f); }
.idpill .who.in { background: none; box-shadow: none; }

/* پرتره در قاب: عکس در حلقه‌ی وسطِ SVG می‌نشیند */
.bar .me {
  position: relative; inline-size: 70px; block-size: 70px;
  margin-block: -14px; margin-inline: 2px -48px;
  filter: drop-shadow(0 3px 5px #00000073);
}
.bar .me .frame { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.bar .me img {
  position: absolute; inset: 23%; inline-size: 54%; block-size: 54%;
  border-radius: 50%; object-fit: cover; box-shadow: none;
}
.bar .me:hover { filter: drop-shadow(0 0 8px #f6d98acc) drop-shadow(0 3px 5px #00000073); }

.bar .tool { background: #fffaf066; box-shadow: inset 0 0 0 1.5px #c9a24a99; }
.bar .purse { background: #fffaf04d; box-shadow: inset 0 0 0 1.5px #c9a24a99; }

/* پیش از آن‌که نام‌ها بروند، فاصله‌ها تنگ می‌شوند؛ و زیرِ ۱۱۸۰ شش نام
   دیگر کنارِ کدِ اتاق و کپسولِ حساب جا نمی‌گیرند و بریده می‌شدند. */
@media (max-width: 1320px) { .bar nav { gap: 4px; } }
@media (max-width: 1180px) {
  .bar nav a span { display: none; }
  .bar nav a { padding: 0 11px; }
  .bar nav a::after { opacity: 0; }
  .bar nav a.on::after { opacity: 1; }
}

/* جا که تنگ شد، اول نامِ ناوبری می‌رود (قاعده‌ی قبلی در ۱۰۴۰) و نوار
   افقی می‌لغزد؛ لغزش هر بیرون‌زدگیِ عمودی را می‌بُرد، پس نشان و پرتره
   از همین‌جا داخلِ نوار می‌نشینند. */
@media (max-width: 1040px) {
  .topbar { padding-inline: 14px; }
  .bar { padding-inline: 14px; gap: 10px; }
  .bar nav { justify-content: space-around; }
  .bar nav a::after { opacity: 0; }
  .bar .sign { inline-size: 44px; block-size: 46px; margin: 0; }
  .bar .me { inline-size: 50px; block-size: 50px; margin: 0; }
}
@media (max-width: 820px) {
  .topbar { padding: 10px 10px 6px; }
  .bar { border-radius: 22px; padding-inline: 10px; }
  .idpill { padding-inline: 10px; }
  .idpill .who { font-size: 13px; }
  .joinbox input::placeholder { font-size: 13px; }
  .joinbox input { inline-size: 96px; block-size: 34px; font-size: 15px; padding: 0 8px; }
  .joinbox button { min-inline-size: 48px; min-block-size: 32px; padding: 0 12px; font-size: 13px; }
  .burger { background: #fffaf04d; box-shadow: inset 0 0 0 1.5px #c9a24a99; }
}

/* ─────────────────────────────────────────────────────────────────────
   کارتِ حساب — طبقِ طرحِ ۱۴۰۵/۰۷

   یک جامه‌ی طلایی برای همه‌ی حالت‌ها (ورود، ثبت‌نام، تأیید، فراموشی…)،
   هم‌رنگِ سربرگ و دکمه‌های طلاییِ سایت. رنگ‌ها متغیرند تا یک‌جا عوض شوند.
   ───────────────────────────────────────────────────────────────────── */
.acct {
  --a-card: #f1ece1; --a-rim: #c4a071; --a-rim-dk: #8a6a3e; --a-rim-w: 3px;
  --a-track: linear-gradient(90deg, #3a2a0c 0%, #6e5626 38%, #9a7d3e 50%, #6e5626 62%, #3a2a0c 100%);
  --a-track-ink: #e3c373;
  --a-tab: linear-gradient(180deg, #f7df98 0%, #d9ad55 45%, #b1822f 100%);
  --a-tab-rim: #7a561a; --a-tab-ink: #1f1405; --a-tab-glow: #fff3c4b3;
  --a-field: linear-gradient(180deg, #d9d4c9, #e3ded3);
  --a-field-rim: #b99a5c; --a-field-edge: inset 0 0 0 1.5px #f6ecd0cc, inset 0 2px 4px #00000026;
  --a-field-w: 2px;
  --a-btn: linear-gradient(180deg, #e9c983 0%, #c89a47 40%, #a8782c 70%, #8b611f 100%);
  --a-btn-rim: #6a4a14; --a-btn-ink: #fff2cf; --a-btn-line: #ffeebf80;
}

.acct .card {
  inline-size: min(480px, 100%);
  padding: 30px clamp(18px, 4vw, 34px) 26px;
  border-radius: 26px;
  border: var(--a-rim-w) solid var(--a-rim);
  background:
    radial-gradient(120% 70% at 50% 0%, #ffffffb3, transparent 60%),
    var(--a-card);
  box-shadow:
    inset 0 0 0 1.5px #fffaf0cc,
    0 0 0 1.5px var(--a-rim-dk),
    0 8px 0 #00000040, 0 28px 60px #000000a6;
}

/* سرِ کارت: پیکِ طلایی، عنوانِ درشتِ سرمه‌ای، یک خط توضیح */
.acct .head { margin-block-end: 22px; }
.acct .head .spade { display: block; margin: 0 auto 6px; block-size: 84px; inline-size: auto; filter: drop-shadow(0 4px 5px #0000004d); }
.acct h1 { font-size: clamp(28px, 4vw, 34px); color: #1f2340; }
.acct .lead { margin-block-start: 10px; color: #2c2418; font-size: 16px; }

/* تب‌ها: شیارِ تیره، و تبِ روشن مثلِ دکمه‌ی فلزی درونش */
.acct .tabs {
  gap: 6px; padding: 6px; margin-block-end: 22px; border-radius: 18px;
  background: var(--a-track); border: 2px solid #2a1d08;
  box-shadow: inset 0 3px 6px #00000080, inset 0 -1px 0 #ffffff26, 0 1px 0 #ffffffb3;
}
.acct .tabs button {
  min-block-size: 50px; border-radius: 13px; border: 0;
  color: var(--a-track-ink); font-size: 17px; text-shadow: 0 1px 1px #00000066;
}
.acct .tabs button:hover { background: #ffffff14; color: var(--a-track-ink); }
.acct .tabs button[aria-selected="true"] {
  color: var(--a-tab-ink); text-shadow: 0 1px 0 var(--a-tab-glow);
  background: var(--a-tab); border: 1.5px solid var(--a-tab-rim);
  box-shadow: inset 0 1.5px 0 var(--a-tab-glow), inset 0 -2px 3px #00000033, 0 3px 6px #00000073;
}

/* برچسب و فیلد */
.acct form { gap: 14px; }
.acct .field > label { color: #2c2418; font-size: 14px; }
.acct input {
  min-block-size: 58px; border-radius: 14px; font-size: 17px; color: #2a2016;
  border: var(--a-field-w) solid var(--a-field-rim);
  background: var(--a-field);
  box-shadow: var(--a-field-edge), 0 1px 0 #ffffffcc;
}
.acct .box input { padding-right: 50px; padding-left: 16px; }
.acct .pw input { padding-left: 66px; }
.acct input::placeholder { color: #6b5e4c; }
.acct .fi { inset-inline-start: 16px; inline-size: 22px; block-size: 22px; color: #6b5e4c; }
.acct input:hover { border-color: var(--a-rim-dk); }
.acct input:focus { border-color: var(--a-rim-dk); box-shadow: var(--a-field-edge), 0 0 0 4px #c9a24a4d; }
.acct input[aria-invalid="true"] { border-color: #b3443a; background: #fbeeea; }
/* چشم: کاشیِ کرمِ برجسته درونِ لبه‌ی چپِ فیلد */
.acct .eye {
  inset-block: 7px; inset-inline-end: 7px; inline-size: 48px; border-radius: 11px;
  border: 1.5px solid var(--a-field-rim);
  background: linear-gradient(180deg, #fbf6ea, #e9e0cc);
  color: #3a2e1e; box-shadow: inset 0 1px 0 #fff, 0 2px 3px #00000033;
}
.acct .eye:hover, .acct .eye[aria-pressed="true"] { background: linear-gradient(180deg, #f3ead6, #ddd1b6); }

/* قدرتِ رمز: نوارِ قرمز → زرد → سبز، که به اندازه‌ی قدرت از چپ روشن می‌شود */
.acct .pw-meter { gap: 12px; padding: 2px 4px 0; color: #4a3f30; font-size: 13px; }
.acct .pw-meter i {
  block-size: 9px; border-radius: 999px;
  background: linear-gradient(90deg, #b8322a, #d9a531 50%, #3aa04a); opacity: 1;
  box-shadow: inset 0 1px 2px #00000059, 0 1px 0 #ffffffb3;
  filter: saturate(.6) opacity(.7);
}
.acct .pw-meter[data-level]:not([data-level="empty"]) i { filter: none; }
/* روشن‌شدن = پوششِ خاکستری روی بخشِ هنوز خاموش، از سمتِ سبز */
.acct .pw-meter i::after {
  inset-inline-start: auto; left: auto; right: 0;
  inline-size: calc((1 - var(--fill, 0)) * 100%);
  background: #efe8dab8; border-radius: 0 999px 999px 0;
}
.acct .pw-meter[data-level="weak"], .acct .pw-meter[data-level="strong"] { color: #4a3f30; }
.acct .pw-meter span { font-weight: 700; }

/* «رمزت را فراموش کرده‌ای؟» — لینکِ سرمه‌ای، درشت، بی‌زیرخط */
.acct .forgot { margin: 4px 0 2px; }
.acct .forgot button { color: #1f2a5c; font-size: 17px; text-decoration: none; padding: 4px 2px; }
.acct .forgot button:hover { color: #0f1638; text-decoration: underline; }

/* دکمه‌ی اصلی: پلاکِ فلزیِ ضخیم با خطِ قابِ داخلی */
.acct .btn {
  min-block-size: 66px; margin-block-start: 8px; border-radius: 18px;
  font-size: 24px; color: var(--a-btn-ink); text-shadow: 0 2px 2px #0000008c;
  border: 3px solid var(--a-btn-rim);
  background: var(--a-btn);
  box-shadow:
    inset 0 2px 0 #ffffff66, inset 0 -3px 4px #00000040,
    0 4px 0 #3e2a0c, 0 12px 20px #00000059;
}
.acct .btn::before {
  content: ""; position: absolute; inset: 6px; border-radius: 12px; pointer-events: none;
  border: 1.5px solid var(--a-btn-line); box-shadow: inset 0 0 0 1px #00000026;
}
.acct .btn:hover { filter: brightness(1.06); box-shadow: inset 0 2px 0 #ffffff66, inset 0 -3px 4px #00000040, 0 5px 0 #3e2a0c, 0 14px 24px #00000066; }
.acct .btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #ffffff66, inset 0 -3px 4px #00000040, 0 1px 0 #3e2a0c, 0 4px 8px #00000059; }
.acct .btn[disabled] { color: #efe2c4; background: var(--a-btn); filter: grayscale(.55) brightness(.92); border-color: var(--a-btn-rim); }

@media (max-width: 480px) {
  .acct .card { padding: 22px 16px 20px; border-radius: 22px; }
  .acct .head .spade { block-size: 64px; }
  .acct .tabs button { min-block-size: 46px; font-size: 16px; }
  .acct input { min-block-size: 54px; }
  .acct .btn { min-block-size: 60px; font-size: 21px; }
}

/* دکمه و فیلد قدِ خودشان را دارند: padding ِ عمومیِ .btn و فاصله‌ی خطِ پایه‌ی
   ورودیِ inline هر کدام چند پیکسل به قدِ کارت اضافه می‌کردند. */
.acct .btn { padding-block: 0; justify-content: center; }
.acct .box input { display: block; }
.acct input { line-height: 1.3; padding-block: 0; }

/* ---- کارتِ حساب بی‌اسکرول ----
   ثبت‌نام (چهار فیلد، نوارِ رمز، دکمه) روی لپ‌تاپِ ۷۶۰ پیکسلی ۲۰۰ پیکسل از
   صفحه بیرون می‌زد. روی صفحه‌ی کوتاه همان چیدمانِ طرح می‌ماند و فقط
   فاصله‌ها و قدِ فیلدها جمع می‌شوند؛ پله‌ی دوم برای گوشی‌های کوتاه. */
@media (max-height: 940px) {
  .acct { padding-block: 10px !important; min-block-size: calc(100svh - 81px); }
  .acct .card { padding: 16px clamp(16px, 3vw, 30px) 16px; }
  .acct .head { margin-block-end: 12px; }
  .acct .head .spade { block-size: 50px; margin-block-end: 2px; }
  .acct h1 { font-size: 26px; line-height: 1.35; }
  .acct .lead { margin-block-start: 2px; font-size: 14.5px; line-height: 1.6; }
  .acct .tabs { padding: 5px; margin-block-end: 12px; }
  .acct .tabs button { min-block-size: 42px; font-size: 16px; }
  .acct form { gap: 9px; }
  .acct .field { gap: 3px; }
  .acct .field > label { font-size: 13px; line-height: 1.5; }
  .acct input { min-block-size: 48px; font-size: 16px; }
  .acct .eye { inset-block: 5px; inline-size: 42px; }
  .acct .pw-meter { padding-block: 0; line-height: 1.4; }
  .acct .forgot { margin-block: 0; }
  .acct .btn { min-block-size: 54px; margin-block-start: 4px; font-size: 21px; }
  .acct .btn::before { inset: 5px; }
}
@media (max-height: 720px) {
  .acct { padding-block: 6px !important; }
  .acct .card { padding-block: 10px; }
  .acct .head { margin-block-end: 6px; }
  .acct .head .spade { block-size: 38px; }
  .acct h1 { font-size: 22px; }
  .acct .lead { font-size: 13px; }
  .acct .tabs { padding: 4px; margin-block-end: 6px; }
  .acct .tabs button { min-block-size: 36px; font-size: 15px; }
  .acct form { gap: 4px; }
  .acct .field { gap: 2px; }
  .acct .field > label { font-size: 12.5px; }
  .acct input { min-block-size: 40px; font-size: 16px; }
  .acct .eye { inset-block: 4px; inline-size: 38px; }
  .acct .btn { min-block-size: 46px; font-size: 19px; }
}

/* بازی‌ای که از ویترین برداشته شده — [[closeGamePage]].
   کارتِ بزرگِ سربرگ هم کم‌رنگ می‌شود تا صفحه «بسته» به نظر برسد و نه خراب. */
.closed-note {
  display: inline-flex; align-items: center; min-block-size: 46px;
  padding: 0 16px; border-radius: 14px;
  background: #00000038; color: #ffd9c9;
  font-weight: 700; font-size: 15px;
}
body.game-off .crest .gt.big { opacity: .45; filter: grayscale(.5); }
body.game-off .crest .facts li.on { opacity: .5; }

/* نوارِ هشدارِ تعمیرات — بالای همه چیز، در همه‌ی صفحه‌ها.
   جای محتوا را می‌گیرد و رویش نمی‌نشیند: هشداری که چیزی را می‌پوشاند،
   خودش یک خرابیِ تازه است. */
.maintbar {
  position: sticky; inset-block-start: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px) * 0);
  background: linear-gradient(180deg, #b8564a, #8e3a30);
  color: #fff3ee; font-size: 14px; line-height: 1.7; text-align: center;
  box-shadow: 0 2px 10px #00000059;
}
.maintbar b { font-weight: 700; }
.maintbar .left { opacity: .85; }
/* دکمه‌ی ورودِ خاموش‌شده: دیده می‌شود، ولی دستش نمی‌آید. */
[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* نشانِ «بازیِ روز» روی کارتِ بازی.
   نوارِ کوچکِ گوشه و نه قابِ درشت: کارت از قبل رنگ و آرت دارد و نشانِ
   بزرگ، خودِ بازی را می‌پوشاند. */
.gt.daily { outline: 2px solid var(--gold, #e8c37a); outline-offset: -2px; }

.gt .dailytag {
  position: absolute;
  inset-inline-start: 8px;
  top: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold, #e8c37a);
  color: #23180b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  pointer-events: none;
}