@font-face { font-family: IRANSans; font-weight: 300; font-display: swap;
  src: url('/assets/play-preview/alive/assets/fonts/IRANSans/IRANSans-Light-web.woff2') format('woff2'); }
@font-face { font-family: IRANSans; font-weight: 400; font-display: swap;
  src: url('/assets/play-preview/alive/assets/fonts/IRANSans/IRANSans-web.woff2') format('woff2'); }
@font-face { font-family: IRANSans; font-weight: 500 700; font-display: swap;
  src: url('/assets/play-preview/alive/assets/fonts/IRANSans/IRANSans-Medium-web.woff2') format('woff2'); }
:root {
  --bg: #1c1c1c;
  --bg-2: #232323;
  --bg-3: #2a2a2a;
  --ink: #000;
  --gold: #CD993D;
  --gold-2: #E8BC63;
  --gold-deep: #9a6f22;       /* برای متنِ روی زمینه‌ی روشن و دکمه‌ی AA */
  --orange: #F5921E;
  --line: #333;
  --line-2: #3d3d3d;
  --txt: #fff;
  --txt-2: #c9c9c9;
  --txt-3: #9a9a9a;

  --wrap: 1440px;
  --pad: 10px;
  --col-l: 350px;             /* ستون چپ  (.right-bar در مارک‌آپ مرجع) */
  --col-c: 750px;             /* ستون وسط (.event-container) */
  --col-r: 300px;             /* ستون راست (.left-bar) */
  --fa: IRANSans, Vazirmatn, tahoma, sans-serif;
}
:root {
  --gw-surface: var(--bg-2);
  --gw-surface-2: var(--bg-3);
  --gw-line: var(--line);
  --gw-text: var(--txt);
  --gw-muted: var(--txt-2);
  --gw-accent: var(--gold);
  --gw-accent-ink: #1c1c1c;
  --gw-radius: 4px;
}
.preview-brand-0{--gw-brand:#CC1330;--gw-brand-ink:#FFFFFF;--gw-logo-w:72px;--gw-logo-h:72px}
.preview-brand-1{--gw-brand:#D2B183;--gw-brand-ink:#14110B;--gw-logo-w:200px;--gw-logo-h:44px}
.preview-brand-2{--gw-brand:#C2C8D0;--gw-brand-ink:#0E131B;--gw-logo-w:200px;--gw-logo-h:42px}
.preview-brand-3{--gw-brand:#6B4AD9;--gw-brand-ink:#FFFFFF;--gw-logo-w:168px;--gw-logo-h:70px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--txt);font-family:IRANSans,sans-serif;direction:rtl}main{max-width:1440px;margin:auto}.hz-main{padding:16px 16px 24px}
/* ═══ gateway:start ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
 * دروازه‌ی برند + پاپ‌آپ پایان بازی
 *
 * این بلوک با اسکریپت _tools/gateway/install.mjs به انتهای همین فایل اضافه
 * شده است. هیچ قاعده‌ی بالاتری را بازنویسی نمی‌کند: همه‌ی کلاس‌ها با .gw-
 * شروع می‌شوند و رنگ‌ها از توکن‌های خودِ همین سایت خوانده می‌شوند، پس
 * دروازه همان هویت بصری سایت را می‌گیرد.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* توکن‌ها روی :root می‌نشینند چون پاپ‌آپ مستقیم به <body> اضافه می‌شود و
   بیرون از .gw است؛ اگر اینجا نباشند، کارتِ پاپ‌آپ بی‌پس‌زمینه می‌ماند. */
:root {
  --gw-surface: var(--bg-2);
  --gw-surface-2: var(--bg-3);
  --gw-line: var(--line);
  --gw-text: var(--txt);
  --gw-muted: var(--txt-2);
  --gw-accent: var(--gold);
  --gw-accent-ink: #1c1c1c;
  --gw-radius: 4px;
}

/* ── صفحه‌ی دروازه ───────────────────────────────────────────────────────── */

.gw__head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(20px, 4vw, 34px);
}
.gw__t {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2rem);
  line-height: 1.6;
  font-weight: 800;
  color: var(--gw-text);
}
.gw__d {
  margin: 0;
  font-size: clamp(.9rem, .85rem + .25vw, 1rem);
  line-height: 2.1;
  color: var(--gw-muted);
}

.gw__grid {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 620px) {
  .gw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .gw__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── کارت برند ───────────────────────────────────────────────────────────── */

.gw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius);
  padding: clamp(16px, 2.2vw, 22px);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.gw-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--gw-brand, var(--gw-accent));
}
.gw-card:hover,
.gw-card:focus-within {
  border-color: var(--gw-brand, var(--gw-accent));
  transform: translateY(-2px);
}

.gw-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  margin-bottom: 12px;
}
/* هر برند اندازه‌ی طبیعی خودش را دارد (--gw-logo-w/h از روی همان کارت).
   بدون این سقف، لوگوهای واژه‌ای عریض روی موبایل تا لبه‌ی کارت کش می‌آیند
   و کارت‌ها با هم ناهماهنگ می‌شوند. */
.gw-card__logo img {
  max-width: min(100%, var(--gw-logo-w, 200px));
  max-height: min(72px, var(--gw-logo-h, 72px));
  width: auto;
  height: auto;
  object-fit: contain;
}
/* لوگوی گرد بعضی برندها خودش پس‌زمینه‌ی تیره دارد و روی کارتِ تیره گم
   می‌شود؛ یک بشقاب روشنِ ملایم زیرش می‌گذاریم. */
.gw-card__logo img.is-round {
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  padding: 4px;
  box-shadow: 0 0 0 1px var(--gw-line);
}

.gw-card__name {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.7;
  color: var(--gw-text);
  text-align: center;
}
.gw-card__feat {
  margin: 0 0 14px;
  font-size: .8rem;
  line-height: 1.95;
  color: var(--gw-muted);
  text-align: center;
}

.gw-card__bonus {
  margin-block: auto 14px;
  padding: 12px;
  border-radius: calc(var(--gw-radius) - 4px);
  background: var(--gw-surface-2);
  border: 1px dashed var(--gw-line);
  text-align: center;
}
.gw-card__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.9;
  background: var(--gw-brand, var(--gw-accent));
  color: var(--gw-brand-ink, var(--gw-accent-ink));
}
.gw-card__bonus-t {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.85;
  color: var(--gw-text);
}
.gw-card__bonus-d {
  margin: 4px 0 0;
  font-size: .78rem;
  line-height: 1.85;
  color: var(--gw-muted);
}

.gw-card__cta {
  display: block;
  padding: 13px 14px;
  border-radius: calc(var(--gw-radius) - 4px);
  background: var(--gw-brand, var(--gw-accent));
  color: var(--gw-brand-ink, var(--gw-accent-ink));
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  min-height: 46px;
  transition: filter .15s ease;
}
.gw-card__cta:hover { filter: brightness(1.08); }
.gw-card__app {
  display: block;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: calc(var(--gw-radius) - 6px);
  border: 1px solid var(--gw-line);
  background: transparent;
  color: var(--gw-muted);
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
}
.gw-card__app:hover { color: var(--gw-text); border-color: var(--gw-brand, var(--gw-accent)); }

/* کل کارت کلیک‌پذیر است؛ لینک CTA کشیده می‌شود روی کارت و دکمه‌ی اپ
   بالاتر می‌نشیند تا قابل کلیک بماند. */
.gw-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.gw-card__app { position: relative; z-index: 1; }

.gw__note {
  margin: clamp(20px, 3vw, 30px) auto 0;
  max-width: 46rem;
  padding: 14px 16px;
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius);
  background: var(--gw-surface);
  color: var(--gw-muted);
  font-size: .8rem;
  line-height: 2.05;
  text-align: center;
}


button{font-family:inherit;width:100%;cursor:default}button:disabled{opacity:1}.gw-card__cta{border:0}.gw-card__cta::after{display:none}

/* Editable cards: app first, free game last; each control has its own hit area. */
.gw-card__app{margin-top:0;font-weight:700;font-size:.88rem;padding:12px;min-height:46px;color:var(--gw-brand-ink);background:var(--gw-brand);border-color:var(--gw-brand)}
.gw-card__app:hover{color:var(--gw-brand-ink);filter:brightness(1.08)}
.gw-card__access{margin:10px 0 14px;padding:10px;border:1px solid var(--gw-line);border-radius:4px;text-align:center;font-size:.76rem;line-height:2;color:var(--gw-muted);min-height:70px}
.gw-card__access strong{display:block;color:var(--gw-text);font-weight:600}
.gw-card__cta{margin-top:0;background:transparent;color:var(--gw-text);border:1px solid var(--gw-brand);font-size:.86rem}
.gw-card__cta::after{display:none}
.gw-card a[aria-disabled="true"]{cursor:default;opacity:.75}
.gw-card a[href]{cursor:pointer}
.gw-card a:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.gw-card,.gw-card__cta{transition:none}.gw-card:hover,.gw-card:focus-within{transform:none}}