/* =============================================================
   MINIPOLY — استایل‌های مختص صفحهٔ خانه
   بعد از ui.css لود می‌شود، پس بر آن سوار می‌شود.
   فقط چیزهایی که جای دیگری تکرار نمی‌شوند: صحنهٔ هیرو، بنتوی
   مسابقات، پلکان قدم‌ها، ناحیهٔ بنفشِ کش‌بک، دیوار اسپانسر.
   ============================================================= */

/* =========================================================
   ۱) هیرو — «پوستر فینال»
   نه دو ستون. تیتر روی کل عرض، آرت به‌عنوان بوم پشتِ متن که از
   لبهٔ چپ بیرون می‌زند، و یک ریل آماریِ تمام‌بلید چسبیده به کف.
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 7vw, 132px) var(--gutter) 0;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 88% 4%, rgba(124, 245, 107, .09), transparent 62%),
    linear-gradient(180deg, var(--surface-1), var(--bg) 74%);
}

/* بوم آرت: لبهٔ فیزیکیِ چپِ کادر — عمداً `left` و نه
   `inset-inline-start`، چون سند RTL است و «start» همان سمتی است که
   متن رویش می‌نشیند. آرت باید در سمت مقابلِ متن بیفتد.
   z منفی + isolation روی .hero تا هرگز جلوی متن نیاید. */
.hero__canvas {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: clamp(88px, 9vw, 140px);
  left: -8%;
  width: min(58%, 820px);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.hero__canvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* از چپ تیره و پررنگ، به سمت راست کاملاً محو — تا تیتر روی
     ناحیهٔ خالی بنشیند و هیچ‌جا با آرت نجنگد. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 88%);
  mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 88%);
  /* آرت خودش تاریک نوشته شده، پس دیگر لازم نیست با CSS خفه‌اش کنیم. */
  opacity: .78;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: block;
  padding-bottom: clamp(56px, 6.4vw, 108px);
}

/* بلوک متن نامتقارن: از لبهٔ راست (start در RTL) شروع می‌شود و
   حدود دوسوم عرض را می‌گیرد، پس نیمهٔ چپ برای بومِ آرت خالی می‌ماند. */
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 1.9vw, 30px);
  max-width: min(100%, 1120px);
}

.hero__title { max-width: 100%; }
/* خط دوم تیتر: تنها جای صفحه که هالهٔ سبز مجاز است */
.hero__title .t-green { display: inline-block; }

.hero__cta { padding-top: var(--sp-2); }

/* ریل آماری — تمام‌بلید، چسبیده به خط پایانی هیرو، مثل تختهٔ
   آمارِ پایین قاب پخش تلویزیونی. */
.hero__rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-9);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--sp-6) var(--gutter);
  border-top: 1px solid var(--line);
  background: rgba(5, 7, 10, .5);
}
.hero__rail-lead {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-fine);
  color: var(--muted);
}
.hero__rail-lead .pxl { border-radius: 50%; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) clamp(28px, 3.4vw, 64px);
}
.hero__stats > div { min-width: 0; }

/* =========================================================
   ۲) شمارش معکوس + مسابقهٔ ویژه — «تختهٔ پخش»
   ========================================================= */
.countdown {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* کارت شمارش دیگر کارت نیست: عددها مستقیم روی باند می‌نشینند. */
#countdown-card { border: 0; box-shadow: none; background: none; }

.countdown__meta { padding-top: var(--sp-2); }

/* =========================================================
   ۳) بنتوی مسابقات — بی‌درز
   شش ستون: کارت اول چهار ستون، بقیه دو ستون. هیچ فاصله‌ای بین
   کارت‌ها نیست؛ فقط خط مویی جداکننده، مثل تختهٔ نتایج.
   ========================================================= */
@media (min-width: 901px) {
  #tournament-grid.grid--3 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-1);
  }
  #tournament-grid.grid--3 > * {
    grid-column: span 2;
    border: 0;
    border-radius: 0;
    border-inline-start: 1px solid var(--line);
    border-top: 1px solid var(--line);
    box-shadow: none;
    background: none;
  }
  /* کارت اول دو برابر عرض می‌گیرد و پوستر بلندتری دارد */
  #tournament-grid.grid--3 > *:first-child { grid-column: span 4; }
  #tournament-grid.grid--3 > *:first-child .tcard__poster { height: 288px; }
  #tournament-grid.grid--3 > *:first-child .tcard__title { font-size: var(--fs-h5); }

  /* ردیف اول خط بالایی نمی‌خواهد؛ ستون آخرِ هر ردیف خط کناری هم نه */
  #tournament-grid.grid--3 > *:first-child,
  #tournament-grid.grid--3 > *:nth-child(2) { border-top: 0; }
  #tournament-grid.grid--3 > *:first-child { border-inline-start: 0; }

  /* ردیف آخرِ ناقص در یک بنتوی بی‌درز، یک حفرهٔ آشکار است. آخرین
     کارت عرضِ باقی‌مانده را پر می‌کند تا لبهٔ پایینی صاف بماند. */
  #tournament-grid.grid--3 > *:only-child,
  #tournament-grid.grid--3 > *:nth-child(3):last-child,
  #tournament-grid.grid--3 > *:nth-child(7):last-child { grid-column: span 6; }
  #tournament-grid.grid--3 > *:nth-child(4):last-child,
  #tournament-grid.grid--3 > *:nth-child(8):last-child { grid-column: span 4; }

  #tournament-grid.grid--3 > *:hover { background: rgba(255, 255, 255, .022); }
  /* بلندشدنِ کارت در بنتوی بی‌درز درز می‌سازد — به‌جایش سطح روشن می‌شود */
  #tournament-grid.grid--3 > .card-lift:hover { transform: none; }
}

/* شمارهٔ غول‌پیکرِ توخالی پشت تیتر بخش */
.band-index { position: relative; }
.band-index::before {
  content: attr(data-index);
  position: absolute;
  top: calc(var(--band-y) * -.42);
  inset-inline-end: 0;
  font-family: var(--font-display);
  font-size: clamp(120px, 15vw, 280px);
  font-weight: 900;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.band-index > * { position: relative; z-index: 1; }

/* =========================================================
   ۴) سه قدم — پلکان نامتقارن روی یک خط پیوسته
   ========================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  padding-top: var(--sp-11);
  border-top: 1px solid var(--line);
}
.steps > .step-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 34ch;
}
/* آفست عمودیِ متفاوت — تقارن عمدی شکسته می‌شود */
.steps > .step-card:nth-child(2) { margin-top: clamp(24px, 3.2vw, 64px); }
.steps > .step-card:nth-child(3) { margin-top: clamp(48px, 6.4vw, 128px); }

/* هر قدم یک خط عمودیِ مویی سمت راست دارد که تا کف بلوک می‌رود */
.steps > .step-card::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: var(--sp-5);
  background: linear-gradient(90deg, rgba(124, 245, 107, .34), transparent 62%);
}

/* =========================================================
   ۵) کش‌بک — تنها ناحیهٔ بنفش سایت، هیچ سبزی اینجا نیست
   ========================================================= */
.cashback {
  background:
    radial-gradient(720px 340px at 18% 24%, rgba(183, 157, 255, .14), transparent 68%),
    var(--surface-violet);
}
.cashback .btn--violet { align-self: flex-start; }

/* کارت نمونهٔ کد تخفیف — بلیتِ بریده با لبهٔ دندانه‌دار */
.coupon-demo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: clamp(32px, 3.4vw, 56px) clamp(24px, 2.6vw, 44px);
  text-align: center;
  overflow: hidden;
}
/* دو نیم‌دایرهٔ کناری: حسِ بلیتِ جداشده از ته‌برگ */
.coupon-demo::before,
.coupon-demo::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--surface-violet);
  border: 1px dashed var(--violet-edge);
}
.coupon-demo::before { inset-inline-start: -14px; }
.coupon-demo::after { inset-inline-end: -14px; }

.coupon-demo__code {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 60px);
  font-weight: 900;
  font-stretch: 116%;
  line-height: 1;
  letter-spacing: .06em;
}

/* =========================================================
   ۶) اسپانسرها — دیوار لوگوی تک‌ردیفه
   ========================================================= */
#sponsor-grid.grid--3 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
#sponsor-grid.grid--3 > * {
  border: 0;
  border-radius: 0;
  border-inline-start: 1px solid var(--line);
  box-shadow: none;
  background: none;
  height: 96px;
}
#sponsor-grid.grid--3 > *:first-child { border-inline-start: 0; }
#sponsor-grid.grid--3 > *:hover { background: rgba(255, 255, 255, .025); }

/* =========================================================
   ۷) فوتر — واژه‌نشان غول‌پیکرِ نیمه‌شفاف پشت کل بلوک
   ========================================================= */
.site-foot::before {
  content: "MINIPOLY";
  position: absolute;
  inset-block-end: -.22em;
  inset-inline-start: var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(90px, 15vw, 260px);
  font-weight: 900;
  font-stretch: 120%;
  line-height: 1;
  letter-spacing: -.045em;
  color: rgba(255, 255, 255, .018);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* =========================================================
   ۸) ریسپانسیو
   ========================================================= */
@media (max-width: 1100px) {
  .hero__canvas {
    inset-inline-start: -14%;
    width: min(76%, 720px);
    opacity: .55;
  }
  .hero__copy { max-width: 100%; }
}

@media (max-width: 900px) {
  .hero { padding-top: clamp(40px, 6vw, 72px); }
  .hero__canvas {
    position: relative;
    z-index: 0;
    inset: auto;
    width: 100%;
    max-height: 240px;
    margin-bottom: var(--sp-7);
    opacity: 1;
  }
  .hero__canvas img {
    -webkit-mask-image: none;
    mask-image: none;
    max-height: 240px;
  }
  .hero__title { max-width: none; }
  .steps { grid-template-columns: 1fr; gap: var(--sp-9); padding-top: var(--sp-9); }
  .steps > .step-card:nth-child(2),
  .steps > .step-card:nth-child(3) { margin-top: 0; }
  .steps > .step-card { max-width: none; }
  #sponsor-grid.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sponsor-grid.grid--3 > *:nth-child(3n+1) { border-inline-start: 0; }
  #sponsor-grid.grid--3 > *:nth-child(n+4) { border-top: 1px solid var(--line); }
  .band-index::before { font-size: clamp(96px, 22vw, 180px); top: calc(var(--band-y) * -.3); }
}

@media (max-width: 640px) {
  .hero__rail { gap: var(--sp-5); }
  .hero__stats { gap: var(--sp-5) var(--sp-7); }
  #sponsor-grid.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sponsor-grid.grid--3 > *:nth-child(3n+1) { border-inline-start: 1px solid var(--line); }
  #sponsor-grid.grid--3 > *:nth-child(2n+1) { border-inline-start: 0; }
  #sponsor-grid.grid--3 > *:nth-child(n+3) { border-top: 1px solid var(--line); }
  .coupon-demo::before,
  .coupon-demo::after { display: none; }
}

/* دعوت به اسپانسری، زیر دیوار لوگو */
.sponsor-cta { padding-top: clamp(48px, 5vw, 96px); }