/* ─────────────────────────────────────────────────────────────
   پس‌زمینه، اسکرول‌بار و چیدمان کلی
   ساخته‌شده از jupitgames-v2-home.html با wp_extract.py
   دستی ویرایش نکن؛ طراحی را در فایل HTML عوض کن و دوباره بساز.
   ───────────────────────────────────────────────────────────── */

/* ==================== فضاسازی پس‌زمینه (ثابت، مستقل از اسکرول) ==================== */
/* لایه ۱ — کانون‌های نور: هاله‌های بزرگ و بسیار کم‌رنگ با درفتِ آرام.
   عمداً کم‌شدت است؛ نباید «شدو» دیده شود، فقط باید تختی پس‌زمینه را بشکند. */
body::before{content:"";position:fixed;inset:-22%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 26% at 74% 2%,  var(--aur1), transparent 72%),
    radial-gradient(32% 26% at 12% 18%, var(--aur2), transparent 72%),
    radial-gradient(46% 32% at 62% 54%, var(--aur3),  transparent 72%),
    radial-gradient(34% 28% at 24% 86%, var(--aur4),  transparent 72%);
  animation:aur 42s ease-in-out infinite}
@keyframes aur{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%    {transform:translate3d(-1.4%,1.2%,0) scale(1.04)}
  66%    {transform:translate3d(1.2%,-1%,0)  scale(1.02)}
}
/* لایه ۲ — بافت: دات‌گرید ریز + خطوط عمودی محو (حس شبکه فنی)، با ماسک محوشونده */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(var(--grid1) 1px,transparent 1px),
    linear-gradient(to left,var(--grid2) 1px,transparent 1px);
  background-size:38px 38px,156px 100%;
  -webkit-mask-image:radial-gradient(122% 80% at 50% 0%,#000 4%,rgba(0,0,0,.5) 38%,transparent 78%);
          mask-image:radial-gradient(122% 80% at 50% 0%,#000 4%,rgba(0,0,0,.5) 38%,transparent 78%)}
h1,h2,h3,h4,h5{margin:0;font-weight:800;line-height:1.45;letter-spacing:-.7px}
p{margin:0} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input{font:inherit}
img{display:block;max-width:100%}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
input[type=search]{appearance:none}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}

/* ==================== تایپوگرافی وریبل ====================
   محور wdth فقط با نسخه وریبل فعال می‌شود؛ روی Yekan استاتیک بی‌اثر و بی‌خطر است.
   هرجا wght را اینجا ست می‌کنیم چون font-variation-settings بر font-weight اولویت دارد. */
.lg b   {font-weight:800;font-variation-settings:"wght" 800,"wdth" 118}
.lg small{font-weight:500;font-variation-settings:"wght" 500,"wdth" 106}
.hs h1   {font-weight:800;font-variation-settings:"wght" 800,"wdth" 114}
.sh h2   {font-weight:800;font-variation-settings:"wght" 800,"wdth" 112}
.nl h3,.bn h3,.mg .pr h4,.ft .fh{font-weight:800;font-variation-settings:"wght" 800,"wdth" 110}
.pc h4,.pc h3{font-weight:700;font-variation-settings:"wght" 700,"wdth" 110}
.bc h4,.bc h3,.sres .t b,.mg a.it b            {font-weight:700;font-variation-settings:"wght" 700,"wdth" 106}
.btn,.auth,.mg .pr .gob,.bn .go{font-weight:700;font-variation-settings:"wght" 700,"wdth" 106}
.sh .more{font-weight:700;font-variation-settings:"wght" 700,"wdth" 116}
.nv > li > a,.nv > li > button          {font-weight:600;font-variation-settings:"wght" 600,"wdth" 106}
.hs .kk,.bc .tg                         {font-weight:600;font-variation-settings:"wght" 600,"wdth" 104}
/* واحد پول: کمی کشیده‌تر تا کنار عددهای مونو جا بیفتد */
.pc .pr b em{font-weight:500;font-variation-settings:"wght" 500,"wdth" 108}
.nl p{font-variation-settings:"wght" 400,"wdth" 108}

/* ==================== اسکرول‌بار کاستوم ==================== */
html{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--ac) var(--p1)}
*{scrollbar-width:thin;scrollbar-color:var(--ac) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--p1)}
::-webkit-scrollbar-thumb{border-radius:99px;border:3px solid var(--p1);
  background:linear-gradient(180deg,var(--ac),var(--ac2));background-clip:padding-box;
  transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--ac-h),#C084FC);
  background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--ac2);background-clip:padding-box}
::-webkit-scrollbar-corner{background:var(--p1)}

/* نسخه باریک برای پنل‌های داخلی: سرچ، دراپ‌داون، دراور */
.scb{scrollbar-width:thin;scrollbar-color:var(--ac-d) transparent}
.scb::-webkit-scrollbar{width:8px;height:8px}
.scb::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.scb::-webkit-scrollbar-thumb{border-radius:99px;border:2px solid transparent;
  background:rgba(139,92,246,.42);background-clip:padding-box}
.scb::-webkit-scrollbar-thumb:hover{background:rgba(168,85,247,.85);background-clip:padding-box}

.wrap{width:min(100% - 28px,1280px);margin-inline:auto}
.mono{font-family:var(--m);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;
  border-radius:10px;font-size:14px;font-weight:700;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s,transform .15s var(--e),box-shadow .25s}
.btn:active{transform:translateY(1px)}
.btn-a{background:linear-gradient(120deg,var(--ac),var(--ac2));color:#fff;
  box-shadow:0 10px 26px -12px rgba(139,92,246,.65)}
.btn-a:hover{box-shadow:0 16px 34px -14px rgba(139,92,246,.8)}
.btn-o{border:1px solid var(--ln2);color:var(--tx)}
.btn-o:hover{border-color:var(--ac);background:rgba(139,92,246,.10)}
.btn svg{width:16px;height:16px}

/* سربرگ بخش: آیکون + تیتر سمت راست، «مشاهده همه» سمت چپ */
.sec{padding:52px 0}
.sh{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.sh .ttl{display:flex;align-items:center;gap:11px;min-width:0}
.sh .si{flex-shrink:0;display:grid;place-items:center;color:var(--ac2);
  filter:drop-shadow(0 0 10px rgba(168,85,247,.45))}
.sh .si svg{display:block;width:21px;height:21px}
.sh h2{font-size:23px;letter-spacing:-1px}

/* «مشاهده همه»: در حالت عادی فقط یک دایره ۳۴px زیر فلش است؛ روی hover تا زیر
   متن کشیده می‌شود. فلش ۲۶px با ۴px فاصله از لبه -> مرکزش روی ۱۷px، یعنی دقیقاً
   هم‌مرکز با دایره ۳۴px.

   نکته وسط‌چین عمودی: متریک فونت ascent=900 descent=600 روی em=1000 است، پس مرکز
   جعبه متن ۰.۱۵em بالای خط پایه می‌افتد در حالی که مرکز جوهر فارسی حدود ۰.۲۵em
   است. اختلاف ۰.۱em باعث می‌شد متن بالاتر از مرکز دیده شود؛ با همان مقدار پایین
   می‌آید. چون بر حسب em است، با تغییر font-size خودش مقیاس می‌گیرد. */
.more{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:7px;
  height:34px;padding-inline-start:14px;padding-inline-end:4px;flex-shrink:0;
  font-size:12.5px;font-weight:700;line-height:1;color:var(--tx2);transition:color .3s}
.more::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:34px;
  border-radius:99px;background:var(--p2);
  transition:width .4s var(--e),background .3s}
.more:hover::before{width:100%;background:var(--ac)}
.more:hover{color:#fff}
.more > span{transform:translateY(.1em)}
.more .ar{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  transition:background .3s}
.more:hover .ar{background:rgba(12,9,20,.32)}
.more .ar svg{display:block;width:12px;height:12px;transition:transform .38s var(--e)}
.more:hover .ar svg{transform:translateX(-3px)}


/* ── روانی اسکرول در گوشی ──────────────────────────────────────────
   سه چیز گوشی را هنگام اسکرول کند می‌کرد:
   ۱) هالهٔ پس‌زمینه یک لایهٔ ثابتِ ۱۴۴٪ صفحه با چهار گرادیان بزرگ بود که
      ۴۲ ثانیه بی‌وقفه جابه‌جا می‌شد — یعنی بازنقاشی دائمی بزرگ‌ترین لایهٔ
      صفحه. در گوشی ثابت می‌ماند.
   ۲) blur شیشه‌ای (backdrop-filter) روی هدر چسبان، نوار پایین خرید و
      منوها: در هر فریمِ اسکرول هرچه زیرشان است دوباره تار می‌شود. روی
      دستگاه لمسی جایش پس‌زمینهٔ تقریباً مات می‌نشیند — تقریباً همان ظاهر.
   ۳) نویز روی عکس هیرو با mix-blend-mode که ترکیب لایه‌ها را گران می‌کند. */
@media (hover:none), (max-width:860px){
  body::before{animation:none;inset:-8%}
}
@media (hover:none) and (pointer:coarse){
  :root{--glass:rgba(16,13,26,.97);--glass2:rgba(16,13,26,.95)}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hs::after{display:none}
}

/* لوگوی دلخواه (جوپیت ← برند و اشتراک): بی کاشیِ بنفش، با رنگ‌های خودِ لوگو */
.lg .m.im{background:none!important;box-shadow:none!important;border-radius:0!important}
.lg .m.im img{width:100%;height:100%;object-fit:contain;display:block;
  /* سایهٔ ریز و نرم: یک لایهٔ نزدیکِ تیره برای جدا شدن از زمینه + یک هالهٔ بنفشِ خیلی کم‌رنگ */
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)) drop-shadow(0 6px 14px rgba(139,92,246,.22))}