/* ============================================================
   تیتانو گیم — طراحی صفحه‌های سرورساید (سئو)
   ------------------------------------------------------------
   همان زبان بصری کهکشان: شیشهٔ تیره، هالهٔ رنگی، RTL، وزیرمتن.
   ولی این صفحه‌ها اسکرول عادی دارند و باید روی موبایل هم خوانا
   و سبک باشند.

   هر بازی رنگ لهجهٔ خودش را دارد (--g) و همین رنگ در تیتر، حلقه
   و دکمهٔ دانلود می‌آید؛ پس صفحهٔ هر بازی «رنگ خودش» را دارد.
   ============================================================ */

/* ---------- پایه: صفحه‌های سئو اسکرول عادی دارند ----------
   مهم: style.css قفلِ قاب را روی «ریشه» (html) و body می‌گذارد، چون
   کهکشان یک برنامهٔ تمام‌صفحه است. این‌جا همان قفل روی ریشه باز می‌شود.
   اگر فقط body باز شود، سند اسکرول نمی‌شود و هر چه زیر تای صفحه است
   برای کاربر دیده نمی‌شود (نه با چرخ ماوس، نه با کشیدن انگشت).
   هم‌الگو با planet.css که همین کار را برای صفحهٔ سیاره می‌کند. */
html {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* نوار بالای صفحه چسبان است؛ هر لنگر درون‌صفحه (مثل «مأموریت و هدف»
     در صفحهٔ حمایت) باید زیر نوار بایستد، وگرنه تیترِ بخش زیرِ نوار
     پنهان می‌شود و به‌نظر می‌رسد صفحه از بالا زده بیرون. ارتفاع نوار
     واقعاً اندازه‌گیری شده (دسکتاپ ‎۶۷px‎، تبلت ‎۱۰۵px‎، ‎۷۲۰px
     به‌پایین ‎۱۵۱px‎ و موبایل ‎۱۹۳px‎) و کمی هم نفس دارد.
     همین کار را در gpage با ‎.gp-sec{scroll-margin-top}‎ می‌کردیم. */
  scroll-padding-top: 88px;
}
@media (max-width: 900px) { html { scroll-padding-top: 124px; } }
@media (max-width: 740px) { html { scroll-padding-top: 170px; } }
@media (max-width: 500px) { html { scroll-padding-top: 214px; } }
/* وقتی لایت‌باکس/دیالوگ باز است پشتش نباید بلغزد (به‌جای body، ریشه) */
html.is-lbx { overflow: hidden; }

body.is-gpage,
body.is-lpage {
  height: auto;
  min-height: 100%;
  overflow: visible;
  overscroll-behavior-y: auto;
  background:
    radial-gradient(1100px 620px at 82% -6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%),
    radial-gradient(900px 560px at 8% 4%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 66%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2) 72%, var(--bg-1));
  background-attachment: fixed;
}

body.is-lbx { overflow: hidden; }

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

main,
.sx-bar,
.sx-foot {
  position: relative;
  z-index: 1;
}

.sx-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 60;
  padding: 10px 16px;
  background: var(--glass-strong);
  color: var(--ink);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
}
.sx-skip:focus { inset-inline-start: 0; }

a { color: color-mix(in srgb, var(--accent) 70%, #cfe4ff 30%); }

/* ============================================================
   نوار بالا
   ============================================================ */
.sx-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--hud-pad);
  background: color-mix(in srgb, var(--bg-1) 82%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--edge);
}
.sx-bar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 65%, transparent), transparent);
  opacity: 0.55;
}

.sx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  margin-inline-end: auto;
}
.sx-brand__ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--accent-2) 40%, transparent);
  position: relative;
  flex: none;
}
.sx-brand__ring::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fff, color-mix(in srgb, var(--accent) 85%, #000) 62%, #12071f);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.sx-brand__txt { display: flex; flex-direction: column; line-height: 1.25; }
.sx-brand__txt b { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }
.sx-brand__txt i { font-size: 11px; font-style: normal; color: var(--ink-faint); }

.sx-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sx-nav__i {
  padding: 8px 13px;
  font-size: 12.5px;
  color: var(--ink-dim);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.22s, background 0.22s, border-color 0.22s, transform 0.22s;
}
.sx-nav__i:hover {
  color: var(--ink);
  border-color: var(--edge-hot);
  background: var(--glass);
  transform: translateY(-1px);
}
.sx-nav__i.is-on {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 22%, var(--glass));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ------------------------------------------------------------
   جست‌وجوی بازی‌ها — فرم GET بدون جاوااسکریپت
   همان چیزی که SearchAction گوگل هم به آن اشاره می‌کند.
   ------------------------------------------------------------ */
.sx-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 250px;
  min-width: 150px;
  padding: 4px 6px 4px 12px;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: 999px;
  transition: border-color 0.22s, background 0.22s;
}
.sx-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--glass-strong);
}
.sx-search__i {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.sx-search__i::placeholder { color: var(--ink-faint); }
.sx-search__i::-webkit-search-cancel-button { display: none; }
.sx-search__b {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  background: color-mix(in srgb, var(--accent) 26%, var(--glass));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 50%;
  transition: background 0.22s, transform 0.22s;
}
.sx-search__b:hover { background: color-mix(in srgb, var(--accent) 42%, var(--glass)); transform: translateY(-1px); }

@media (max-width: 720px) {
  .sx-search { flex: 1 1 100%; order: 4; }
}

/* ============================================================
   مسیر صفحه
   ============================================================ */
.gp-crumbs { padding: 18px var(--hud-pad) 0; max-width: 1220px; margin: 0 auto; }
.gp-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--ink-faint);
}
.gp-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.gp-crumbs a { color: var(--ink-dim); text-decoration: none; }
.gp-crumbs a:hover { color: var(--accent); }
.gp-crumbs i { font-style: normal; opacity: 0.5; }
.gp-crumbs .is-here span { color: var(--ink); }

/* ============================================================
   قهرمانِ صفحهٔ بازی
   ============================================================ */
main { max-width: 1220px; margin: 0 auto; padding: 0 var(--hud-pad) 60px; }

.gp-hero {
  position: relative;
  margin: 18px 0 8px;
  padding: clamp(20px, 3.4vw, 42px);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, color-mix(in srgb, var(--g) 12%, var(--glass-strong)), var(--glass) 62%);
  overflow: hidden;
  box-shadow: 0 30px 80px -50px color-mix(in srgb, var(--g) 70%, #000);
}
.gp-hero__aura {
  position: absolute;
  inset: auto -10% -60% 40%;
  height: 120%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 42%, transparent), transparent 72%);
  filter: blur(30px);
  opacity: 0.5;
  pointer-events: none;
  animation: gp-float 14s ease-in-out infinite alternate;
}
@keyframes gp-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-3%, -4%, 0) scale(1.08); }
}

.gp-hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}

.gp-hero__kicker {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: color-mix(in srgb, var(--g) 62%, #ffffff 38%);
}
.gp-hero__title {
  margin: 0 0 12px;
  font-size: clamp(24px, 4.4vw, 44px);
  line-height: 1.28;
  font-weight: 800;
  background: linear-gradient(105deg, #ffffff 8%, color-mix(in srgb, var(--g) 78%, #ffffff 22%) 68%, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.gp-hero__lead {
  margin: 0 0 10px;
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--ink);
  opacity: 0.92;
}
.gp-hero__intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 2;
  color: var(--ink-dim);
  max-width: 62ch;
}

.gp-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
}
.gp-badges li {
  padding: 5px 11px;
  font-size: 11.5px;
  color: var(--ink-dim);
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.gp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.gp-hero__score { display: inline-flex; align-items: center; gap: 8px; }
.gp-hero__score b {
  font-size: 17px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gp-hero__score i { font-style: normal; font-size: 11.5px; }

.stars-view { display: inline-flex; gap: 1px; font-size: 14px; line-height: 1; }
.stars-view i { font-style: normal; color: rgba(255, 255, 255, 0.2); }
.stars-view i.is-full,
.stars-view i.is-half { color: #ffca55; }
.stars-view i.is-half {
  background: linear-gradient(90deg, #ffca55 50%, rgba(255, 255, 255, 0.2) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- دکمه‌های فراخوان ---------- */
.gp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.gp-cta__dl {
  background-image: linear-gradient(105deg, var(--g), color-mix(in srgb, var(--g) 40%, #8b5cff)) !important;
  border-color: transparent !important;
  color: #0b0416 !important;
  font-weight: 700;
  box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--g) 85%, #000);
}
.gp-cta__dl:hover { transform: translateY(-2px); }
.gp-cta__soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 999px;
  color: #ffe6b8;
  background: rgba(255, 190, 90, 0.1);
  border: 1px dashed rgba(255, 190, 90, 0.45);
}

/* ---------- گویِ بازی ---------- */
.gp-hero__orb {
  position: relative;
  width: clamp(150px, 20vw, 236px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: none;
}
.gp-hero__icon {
  width: 76%;
  height: 76%;
  object-fit: cover;
  border-radius: 26%;
  border: 1px solid color-mix(in srgb, var(--g) 55%, transparent);
  box-shadow: 0 26px 60px -24px #000, 0 0 60px -12px color-mix(in srgb, var(--g) 65%, transparent);
  animation: gp-bob 7s ease-in-out infinite alternate;
}
@keyframes gp-bob {
  from { transform: translateY(-4px) rotate(-0.6deg); }
  to { transform: translateY(5px) rotate(0.8deg); }
}
.gp-hero__glyph {
  font-size: clamp(58px, 9vw, 96px);
  filter: drop-shadow(0 0 30px color-mix(in srgb, var(--g) 70%, transparent));
}
.gp-hero__ring {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--g) 45%, transparent);
  animation: gp-spin 34s linear infinite;
  pointer-events: none;
}
.gp-hero__ring--2 {
  inset: 8%;
  border-style: solid;
  border-color: color-mix(in srgb, var(--g) 22%, transparent);
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes gp-spin { to { transform: rotate(360deg); } }

/* ============================================================
   نوار بخش‌ها
   ============================================================ */
.gp-jump {
  position: sticky;
  top: 63px;
  z-index: 20;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 14px 0 6px;
  padding: 9px 12px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-1) 86%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  scrollbar-width: none;
}
.gp-jump::-webkit-scrollbar { display: none; }
.gp-jump a {
  flex: none;
  padding: 6px 13px;
  font-size: 12.5px;
  color: var(--ink-dim);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.gp-jump a:hover { color: var(--ink); border-color: var(--edge-hot); }
.gp-jump a.is-on {
  color: #fff;
  background: color-mix(in srgb, var(--g) 26%, transparent);
  border-color: color-mix(in srgb, var(--g) 50%, transparent);
}

/* ============================================================
   بخش‌ها
   ============================================================ */
.gp-sec {
  scroll-margin-top: 118px;
  margin: 34px 0;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(10px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* بدون جاوااسکریپت همه‌چیز خوانا می‌ماند؛ انیمیشن فقط وقتی JS هست */
.has-js .gp-sec:not(.is-in),
.has-js [data-rv]:not(.is-in) {
  opacity: 0;
  transform: translateY(18px);
}
.gp-sec.is-in,
[data-rv].is-in { opacity: 1; transform: none; }

.gp-sec__t {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: clamp(17px, 2.2vw, 23px);
  font-weight: 700;
  color: var(--ink);
}
.gp-sec__t span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 15px;
  color: color-mix(in srgb, var(--g, var(--accent)) 70%, #fff 30%);
  background: color-mix(in srgb, var(--g, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--g, var(--accent)) 30%, transparent);
  flex: none;
}
.gp-sec__l {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-dim);
}
.gp-empty { color: var(--ink-faint); font-size: 13.5px; }

/* ---------- گالری ---------- */
.gp-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 26vw, 260px), 1fr));
  gap: 12px;
}
.gp-shot { margin: 0; }
.gp-shot__a {
  display: block;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--edge);
  background: rgba(0, 0, 0, 0.35);
  aspect-ratio: 16 / 9;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.35s;
}
.gp-shot__a::after {
  content: "⌕";
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  color: #fff;
  background: rgba(8, 4, 18, 0.62);
  border: 1px solid var(--edge-hot);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s, transform 0.3s;
  backdrop-filter: blur(6px);
}
.gp-shot__a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--g, var(--accent)) 55%, transparent); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--g, var(--accent)) 80%, #000); }
.gp-shot__a:hover::after { opacity: 1; transform: none; }
.gp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-shot figcaption {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--ink-faint);
  text-align: center;
}
.gp-shot__a.is-cur { border-color: var(--g, var(--accent)); }

/* ---------- ویدیو ---------- */
.gp-video {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--edge);
  background: #000;
  box-shadow: 0 40px 90px -60px color-mix(in srgb, var(--g, var(--accent)) 80%, #000);
}
.gp-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #05030b; }
.gp-video__note {
  margin: 0;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink-faint);
  background: rgba(0, 0, 0, 0.4);
}

/* ---------- درباره ---------- */
.gp-about {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 34px);
}
.gp-about__text p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 2.15;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.gp-about__text p:first-child::first-letter {
  font-size: 1.6em;
  line-height: 1;
  color: color-mix(in srgb, var(--g, var(--accent)) 80%, #fff 20%);
}
.gp-about__h {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink);
}
.gp-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.gp-feats li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
}
.gp-feats li span { color: color-mix(in srgb, var(--g, var(--accent)) 78%, #fff 22%); flex: none; }

/* ---------- مشخصات ---------- */
.gp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0;
}
.gp-facts__row {
  padding: 13px 15px;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.028);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.gp-facts__row:hover {
  border-color: color-mix(in srgb, var(--g, var(--accent)) 40%, transparent);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}
.gp-facts dt { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 5px; }
.gp-facts dd { margin: 0; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- امتیاز ---------- */
.gp-rate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}
.gp-rate__ring {
  --p: 0%;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background:
    conic-gradient(color-mix(in srgb, var(--g, var(--accent)) 85%, #fff 15%) var(--p), rgba(255, 255, 255, 0.08) 0);
  box-shadow: 0 0 50px -18px color-mix(in srgb, var(--g, var(--accent)) 80%, #000);
}
.gp-rate__ring::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1a1029, #0a0514 70%);
  border: 1px solid var(--edge);
}
.gp-rate__ring b,
.gp-rate__ring span { position: relative; z-index: 1; display: block; text-align: center; }
.gp-rate__ring b { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.gp-rate__ring span { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; }
.gp-rate__line {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 2;
  color: var(--ink-dim);
}
.gp-rate__line b { color: var(--ink); }
.gp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.gp-bar__head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.gp-bar__head i { font-style: normal; color: var(--ink-faint); }
.gp-bar__track {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.gp-bar__track i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--g, var(--accent)), color-mix(in srgb, var(--g, var(--accent)) 40%, #8b5cff));
  animation: gp-bar 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gp-bar { from { width: 0 !important; } }

/* ---------- پرسش‌ها ---------- */
.gp-faq { display: grid; gap: 9px; }
.gp-faq__i {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.028);
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s;
}
.gp-faq__i[open] {
  border-color: color-mix(in srgb, var(--g, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--g, var(--accent)) 7%, rgba(255, 255, 255, 0.03));
}
.gp-faq__i summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  list-style: none;
}
.gp-faq__i summary::-webkit-details-marker { display: none; }
.gp-faq__i summary span { line-height: 1.8; }
.gp-faq__i summary i {
  font-style: normal;
  color: color-mix(in srgb, var(--g, var(--accent)) 75%, #fff 25%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  flex: none;
}
.gp-faq__i[open] summary i { transform: rotate(135deg); }
.gp-faq__a {
  padding: 0 16px 15px;
  font-size: 13.5px;
  line-height: 2.05;
  color: var(--ink-dim);
  animation: gp-fade 0.45s ease both;
}
.gp-faq__a p { margin: 0; }
@keyframes gp-fade { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- نظرها ---------- */
.gp-revs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 30vw, 330px), 1fr));
  gap: 12px;
}
.gp-rev {
  padding: 15px;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.3s, border-color 0.3s, background 0.3s;
}
.gp-rev:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--g, var(--accent)) 38%, transparent);
  background: rgba(255, 255, 255, 0.05);
}
.gp-rev header { display: flex; gap: 11px; align-items: center; margin-bottom: 10px; }
.gp-rev__av {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g, var(--accent)) 85%, #fff 15%), #8b5cff);
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--g, var(--accent)) 90%, #000);
}
.gp-rev b { font-size: 13.5px; }
.gp-rev__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-faint); }
.gp-rev__stars { display: inline-flex; gap: 1px; }
.gp-rev__stars i { font-style: normal; color: rgba(255, 255, 255, 0.18); }
.gp-rev__stars i.is-on { color: #ffca55; }
.gp-rev p { margin: 0; font-size: 13px; line-height: 1.95; color: var(--ink-dim); }

/* ---------- دانلود ---------- */
.gp-sec--dl {
  background: linear-gradient(140deg, color-mix(in srgb, var(--g, var(--accent)) 13%, var(--glass-strong)), var(--glass));
  border-color: color-mix(in srgb, var(--g, var(--accent)) 30%, var(--edge));
}
.gp-dl__lead { margin: 0 0 16px; font-size: 13.5px; line-height: 2; color: var(--ink-dim); max-width: 70ch; }
.gp-dl__row { display: grid; gap: 12px; }
.gp-dl__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: #0b0416;
  background: linear-gradient(105deg, var(--g, var(--accent)), color-mix(in srgb, var(--g, var(--accent)) 34%, #ff5d9e));
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--g, var(--accent)) 90%, #000);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
.gp-dl__btn:hover { transform: translateY(-3px); box-shadow: 0 34px 70px -30px color-mix(in srgb, var(--g, var(--accent)) 95%, #000); }
.gp-dl__ic {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}
.gp-dl__t { display: grid; gap: 4px; }
.gp-dl__t b { font-size: 15.5px; }
.gp-dl__t i { font-style: normal; font-size: 12px; opacity: 0.75; }
.gp-dl__ext { margin-inline-start: auto; font-size: 20px; opacity: 0.7; }
.gp-dl__note { margin: 0; font-size: 12px; color: var(--ink-faint); line-height: 1.9; }

/* ============================================================
   کارت‌های فهرست
   ============================================================ */
.lc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 29vw, 340px), 1fr));
  gap: 12px;
}
.lc { margin: 0; }
.lc__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, color-mix(in srgb, var(--g) 8%, var(--glass)), var(--glass));
  text-decoration: none;
  color: inherit;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.32s;
}
.lc__link:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--g) 45%, transparent);
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--g) 85%, #000);
}
.lc__art {
  position: relative;
  width: 72px;
  height: 72px;
  flex: none;
  display: grid;
  place-items: center;
}
.lc__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--g) 40%, transparent);
  box-shadow: 0 14px 30px -18px #000;
}
.lc__glyph { font-size: 34px; }
.lc__soon {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: -8px;
  padding: 2px 9px;
  font-size: 10px;
  border-radius: 999px;
  color: #ffe6b8;
  background: rgba(20, 12, 4, 0.85);
  border: 1px solid rgba(255, 190, 90, 0.5);
  white-space: nowrap;
}
.lc__body { display: grid; gap: 5px; min-width: 0; }
.lc__kicker { font-size: 11px; color: color-mix(in srgb, var(--g) 55%, #ffffff 45%); }
.lc__title { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.lc__tag {
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-faint);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.lc__rate { color: #ffca55; }
.lc__rate i { font-style: normal; color: var(--ink-faint); }
.lc__go {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 17px;
  color: color-mix(in srgb, var(--g) 70%, #fff 30%);
  background: color-mix(in srgb, var(--g) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--g) 30%, transparent);
  transition: transform 0.3s, background 0.3s;
}
.lc__link:hover .lc__go { transform: translateX(-4px); background: color-mix(in srgb, var(--g) 24%, transparent); }

/* ============================================================
   صفحه‌های فهرست
   ============================================================ */
.lp-head {
  margin: 18px 0 26px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 11%, var(--glass-strong)), var(--glass));
}
.lp-head__t {
  margin: 0 0 12px;
  font-size: clamp(22px, 3.6vw, 36px);
  font-weight: 800;
  line-height: 1.35;
  background: linear-gradient(105deg, #fff 10%, color-mix(in srgb, var(--accent) 70%, #fff 30%) 70%, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.lp-head__l { margin: 0 0 18px; font-size: 14px; line-height: 2.1; color: var(--ink-dim); max-width: 80ch; }
.lp-head__stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.lp-head__stats li { display: grid; gap: 3px; }
.lp-head__stats b { font-size: 24px; font-variant-numeric: tabular-nums; }
.lp-head__stats span { font-size: 11.5px; color: var(--ink-faint); }

.lp-sec {
  margin: 30px 0;
  padding: clamp(16px, 2.4vw, 28px);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--glass);
}
.lp-sec__t { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: clamp(16px, 2vw, 21px); font-weight: 700; }
.lp-sec__t span { color: var(--accent); }
.lp-sec__l { margin: 0 0 18px; font-size: 13.5px; line-height: 2; color: var(--ink-dim); }
.lp-sec--note { background: rgba(255, 255, 255, 0.02); }
.lp-note { display: grid; gap: 12px; }
.lp-note p { margin: 0; font-size: 13.5px; line-height: 2.1; color: var(--ink-dim); }
.lp-note b { color: var(--ink); }

.lp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, var(--glass));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
}
.lp-tag--soft {
  background: var(--glass);
  border-color: var(--edge);
  color: var(--ink-dim);
}
.lp-tag b {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.lp-tag:hover { transform: translateY(-2px); border-color: var(--accent); color: #fff; }

/* ============================================================
   پاصفحه
   ============================================================ */
.sx-foot {
  margin-top: 50px;
  padding: clamp(24px, 3.4vw, 46px) var(--hud-pad) 26px;
  border-top: 1px solid var(--edge);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45));
}
.sx-foot__grid {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
}
.sx-foot__brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.sx-foot__about p { margin: 0 0 12px; font-size: 12.5px; line-height: 2.05; color: var(--ink-dim); max-width: 54ch; }
.sx-foot__cta { display: flex; gap: 9px; flex-wrap: wrap; }
.sx-foot__col h3 {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--accent) 65%, #fff 35%);
  letter-spacing: 0.2px;
}
.sx-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-foot__col a { font-size: 12.5px; color: var(--ink-dim); text-decoration: none; transition: color 0.2s; }
.sx-foot__col a:hover { color: var(--accent); }
.sx-foot__n { color: var(--ink-faint); font-size: 11px; }
.sx-foot__base {
  max-width: 1220px;
  margin: 26px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.sx-foot__dot { opacity: 0.5; }
/* شبکه‌های اجتماعی در پاصفحه — با نشان هر شبکه و رنگ خودش */
.sx-foot__soc { display: inline-flex; gap: 8px; align-items: center; margin-inline-start: auto; }
.sx-soc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  font-size: 11.5px;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.sx-soc:hover { transform: translateY(-1px); }
.sx-soc--yt:hover { color: #ff6b6b; border-color: rgba(255, 60, 60, 0.42); background: rgba(255, 60, 60, 0.10); }
.sx-soc--ig:hover { color: #ff8ac4; border-color: rgba(255, 93, 158, 0.42); background: rgba(255, 93, 158, 0.10); }
@media (max-width: 640px) {
  .sx-foot__soc { margin-inline-start: 0; width: 100%; }
}

/* ============================================================
   گالری بزرگ (لایت‌باکس)
   ============================================================ */
.lbx {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: clamp(10px, 3vw, 40px);
  background: rgba(4, 2, 10, 0.92);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lbx.is-on { opacity: 1; pointer-events: auto; }
.lbx__f {
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
  max-height: 100%;
}
.lbx img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--r-md);
  border: 1px solid var(--edge-hot);
  box-shadow: 0 50px 120px -60px #000;
  animation: gp-fade 0.35s ease both;
}
.lbx figcaption { font-size: 12.5px; color: var(--ink-dim); text-align: center; }
.lbx__x {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: var(--glass-strong);
  border: 1px solid var(--edge-hot);
  cursor: pointer;
}
.lbx__nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  background: var(--glass);
  border: 1px solid var(--edge);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lbx__nav:hover { background: var(--glass-strong); border-color: var(--accent); }

/* ============================================================
   ۴۰۴
   ============================================================ */
.nf { padding-top: 40px; }
.nf__t { margin: 0 0 10px; font-size: clamp(20px, 3vw, 30px); }
.nf__l { margin: 0 0 20px; color: var(--ink-dim); font-size: 14px; line-height: 2; }
.nf__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }

/* ============================================================
   موبایل
   ============================================================ */
@media (max-width: 900px) {
  .gp-about { grid-template-columns: minmax(0, 1fr); }
  .gp-rate { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .gp-rate__line { text-align: start; }
  .sx-foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sx-foot__about { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .gp-hero__in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .gp-hero__intro { margin-inline: auto; }
  .gp-hero__meta,
  .gp-badges,
  .gp-cta { justify-content: center; }
  .gp-hero__orb { order: -1; width: 132px; }
  .gp-jump { top: 56px; }
  .sx-bar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .sx-nav { width: 100%; order: 3; overflow-x: auto; }
  .sx-nav__i { flex: none; }
  .lc__link { grid-template-columns: auto minmax(0, 1fr); }
  .lc__go { display: none; }
  .sx-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .lbx { grid-template-columns: minmax(0, 1fr); }
  .lbx__nav { position: absolute; inset-block-end: 14px; }
  .lbx__nav--p { inset-inline-end: 20px; }
  .lbx__nav--n { inset-inline-start: 20px; }
}

@media (max-width: 420px) {
  .gp-hero { padding: 16px; }
  .gp-sec, .lp-sec, .lp-head { padding: 15px; }
  .gp-shots { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* حرکت کمتر: هر چیزی که می‌چرخد یا شنا می‌کند، می‌ایستد */
@media (prefers-reduced-motion: reduce) {
  .gp-hero__aura,
  .gp-hero__icon,
  .gp-hero__ring { animation: none !important; }
  .gp-sec { opacity: 1; transform: none; transition: none; }
  .gp-bar__track i { animation: none; }
}

/* ============================================================
   صفحهٔ بازی — دکمه‌های چند فروشگاهی
   ------------------------------------------------------------
   هر دکمه با رنگ برند خودش می‌درخشد و لوگویش را کنار متن دارد.
   ============================================================ */

.stores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 12px;
  margin: 4px 0 12px;
}
.store {
  --store: #7ac6ff;
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--store) 42%, transparent);
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--store) 24%, transparent), transparent 62%),
    rgba(9, 7, 22, .8);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.store::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--store), transparent);
}
.store:hover, .store:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--store) 85%, transparent);
  box-shadow: 0 18px 46px -26px var(--store);
}
.store--main { border-width: 1.5px; }
.store--main .store__body b { font-size: 1.02rem; }
.store__logo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid color-mix(in srgb, var(--store) 38%, transparent);
  box-shadow: inset 0 0 22px -12px var(--store);
}
.store__body { display: grid; gap: 3px; min-width: 0; }
.store__body b { font-size: .96rem; }
.store__body i {
  font-style: normal;
  font-size: .8rem;
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store__go {
  margin-inline-start: auto;
  color: var(--store);
  font-size: 1.1rem;
  opacity: .9;
}
@media (max-width: 520px) {
  .stores { grid-template-columns: 1fr; }
  .store__body i { white-space: normal; }
}

/* ============================================================
   تختهٔ «به‌زودی» — بازی‌هایی که تاریخ انتشار ندارند
   ------------------------------------------------------------
   به‌جای عدد جعلی، یک صحنهٔ مداری زنده: هستهٔ درخشان، دو حلقهٔ
   چرخان و یک سیاره که در مدار می‌گردد. کنارش متن و دو دکمه.
   ============================================================ */

.soonbox {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
  margin: clamp(18px, 3vw, 30px) 0;
  padding: clamp(18px, 2.6vw, 30px);
  border-radius: var(--r-lg, 22px);
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(70% 90% at 12% 8%, rgba(255, 93, 158, .13), transparent 62%),
    radial-gradient(64% 84% at 92% 92%, rgba(139, 92, 255, .14), transparent 64%),
    rgba(10, 6, 20, .55);
  overflow: hidden;
}

.soonbox__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 240px;
  justify-self: center;
}
.soonbox__core {
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffd7ea, #ff6aa6 42%, #a1226f 78%, #43103f);
  box-shadow: 0 0 34px rgba(255, 93, 158, .55), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  animation: soonPulse 4.2s ease-in-out infinite;
}
.soonbox__ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px dashed rgba(190, 150, 255, .55);
  transform: rotate(-18deg) scaleY(.42);
  animation: soonSpin 18s linear infinite;
}
.soonbox__ring--2 {
  inset: 20%;
  border-style: solid;
  border-color: rgba(255, 93, 158, .34);
  transform: rotate(12deg) scaleY(.5);
  animation: soonSpinBack 26s linear infinite;
}
.soonbox__orbit {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  transform: rotate(-18deg) scaleY(.42);
  animation: soonSpin 7.5s linear infinite;
}
.soonbox__orbit::after {
  content: "";
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: 50%;
  width: 11px; height: 11px;
  margin-inline-start: -5.5px;
  border-radius: 50%;
  background: #cbb2ff;
  box-shadow: 0 0 14px rgba(190, 150, 255, .9);
}
@keyframes soonSpin { from { transform: rotate(-18deg) scaleY(.42) rotate(0deg); } to { transform: rotate(-18deg) scaleY(.42) rotate(360deg); } }
@keyframes soonSpinBack { from { transform: rotate(12deg) scaleY(.5) rotate(360deg); } to { transform: rotate(12deg) scaleY(.5) rotate(0deg); } }
@keyframes soonPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.045); filter: brightness(1.12); }
}

.soonbox__body { min-width: 0; }
.soonbox__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 93, 158, .34);
  background: rgba(255, 93, 158, .10);
  color: #ffc2da;
  font-size: 12px;
  font-weight: 700;
}
.soonbox__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff5d9e;
  animation: soonBlink 1.9s ease-in-out infinite;
}
@keyframes soonBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 158, .6); }
  50% { box-shadow: 0 0 0 10px rgba(255, 93, 158, 0); }
}
.soonbox__title {
  margin: 0 0 10px;
  font-size: clamp(19px, 3vw, 27px);
  line-height: 1.6;
}
.soonbox__lead {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 2.05;
  color: var(--ink-dim);
  max-width: 62ch;
}
.soonbox__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.soonbox__note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, .10);
  font-size: 12px;
  line-height: 1.95;
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .soonbox { grid-template-columns: minmax(0, 1fr); }
  .soonbox__art { max-width: 180px; }
  .soonbox__acts .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .soonbox__ring, .soonbox__ring--2, .soonbox__orbit, .soonbox__core, .soonbox__dot { animation: none !important; }
}

/* ============================================================
   بهینه‌سازی موبایل — صفحه‌های سرورساید
   ------------------------------------------------------------
   نوارهای شیشه‌ای روی بومِ آرام صفحه؛ روی گوشی شعاع محو کم می‌شود
   تا اسکرولِ متن روان بماند. ظاهر و چیدمان دست‌نخورده است.
   ============================================================ */
@media (max-width: 900px) {
  .sx-bar { backdrop-filter: blur(9px) saturate(140%); -webkit-backdrop-filter: blur(9px) saturate(140%); }
  .gp-jump { backdrop-filter: blur(9px) saturate(140%); -webkit-backdrop-filter: blur(9px) saturate(140%); }
  .gp-sec { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
  .lbx { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .gp-badges li { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .gp-shot__a::after { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}