/* ============================================================
   ادگیمز — استایل مشترک صفحه‌های معرفی
   این فایل را index.html و صفحه‌های موضوعی (پیش‌بینی بیت‌کوین،
   مسابقه با جایزه، پیش‌بینی فوتبال) با هم استفاده می‌کنند.
   یک فایل هم‌مبدأ است، نه CDN بیرونی — همان قاعده «بدون درخواست
   خارجی» سر جایش می‌ماند و بین صفحه‌ها کش می‌شود.
   ============================================================ */
@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-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

/* توکن‌ها آینه --hud-* در frontend/src/index.css هستند تا صفحه معرفی
   و خود اپ یک زبان بصری داشته باشند. */
:root{
  --void:#0a0711;--plate:#150f24;--plate-2:#100b1c;
  --edge:rgba(255,255,255,.12);--edge-2:rgba(255,255,255,.22);
  --pink:#ff2d95;--cyan:#22e3ff;--lime:#b4ff3a;--amber:#ffc72e;--violet:#a855f7;--red:#ff3b52;
  --lime-ink:#0d1206;--amber-ink:#1a1206;
  --tx:#fff;--tx-2:#a99cc4;
  --cut:14px;--cut-s:8px;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--tx);
  font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:17px;line-height:1.85;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.45;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.cut{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.cut-s{clip-path:polygon(var(--cut-s) 0,100% 0,100% calc(100% - var(--cut-s)),calc(100% - var(--cut-s)) 100%,0 100%,0 var(--cut-s))}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99}
.skip:focus{inset-inline-start:0;background:var(--lime);color:var(--lime-ink);padding:10px 18px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ——— هدر ——— */
.hdr{position:sticky;top:0;z-index:50;background:var(--void);border-bottom:1px solid var(--edge)}
/* عمداً backdrop-filter ندارد: روی هدر چسبان، لایه شیشه‌ای در وب‌ویوی اندروید
   و گوشی‌های ضعیف هر اسکرول را کند می‌کند. رنگ توپر همان کار را می‌کند. */
.hdr-in{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px}
.brand img{width:38px;height:38px;border-radius:10px}
.nav{display:none;gap:26px;margin-inline-start:18px;font-size:15px;color:var(--tx-2)}
.nav a:hover{color:var(--tx)}
.hdr-cta{margin-inline-start:auto;display:flex;gap:10px;align-items:center}
@media(min-width:900px){.nav{display:flex}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;font-family:inherit;font-size:16px;font-weight:700;
  border:0;cursor:pointer;transition:transform .15s,filter .15s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-amber{background:var(--amber);color:var(--amber-ink)}
.btn-line{background:var(--plate);color:var(--tx);box-shadow:inset 0 0 0 1px var(--edge-2)}
.btn-sm{padding:9px 18px;font-size:15px}

/* ——— قاب‌ها ——— */
/* روی هر سطح پخ‌دار، خط دور از inset box-shadow می‌آید نه از border:
   clip-path دقیقاً روی مرز border می‌افتد و فایرفاکس آن اضلاع را رستر نمی‌کند.
   همین قاعده در frontend/src/index.css (بالای .hud-cut) توضیح داده شده. */
.plate{background:var(--plate);box-shadow:inset 0 0 0 1px var(--edge);padding:26px;position:relative}
.plate::after{content:"";position:absolute;inset-inline-start:0;top:0;width:34px;height:3px;background:var(--accent,var(--cyan))}
.soft{background:var(--plate-2);box-shadow:inset 0 0 0 1px var(--edge);padding:20px}

section{padding:76px 0;position:relative}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--cyan);border:1px solid var(--edge-2);padding:6px 14px;margin-bottom:18px}
h2{font-size:clamp(25px,4.4vw,38px);margin-bottom:14px}
h3{font-size:19px;margin-bottom:8px}
.lead{color:var(--tx-2);font-size:18px;max-width:66ch}
.sec-head{margin-bottom:40px}

/* ——— هیرو ——— */
/* گرادیان مستقیم روی خود سکشن است، نه روی یک شبه‌المان با z-index منفی:
   لایه منفی پشت پس‌زمینه بدنه یک لایه ترکیب جدا می‌سازد و کنار هدر چسبان،
   هر اسکرول را به بازنقاشی تمام‌صفحه وادار می‌کند. */
.hero{padding:64px 0 60px;overflow:hidden;
  background:
    radial-gradient(60% 55% at 78% 8%,rgba(255,45,149,.20),transparent 62%),
    radial-gradient(52% 50% at 12% 22%,rgba(34,227,255,.14),transparent 62%),
    radial-gradient(70% 60% at 50% 100%,rgba(168,85,247,.16),transparent 65%)}
.hero-grid{display:grid;gap:44px;align-items:center}
@media(min-width:940px){.hero-grid{grid-template-columns:1.15fr .85fr;gap:56px}}
h1{font-size:clamp(32px,6.4vw,56px);line-height:1.3;margin-bottom:18px;text-wrap:balance}
h1 .hl{color:var(--lime)}
.hero p.lead{font-size:19px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;font-size:14px;color:var(--tx-2)}
.hero-tags li{border:1px solid var(--edge);padding:6px 13px}
.phone{max-width:290px;margin-inline:auto;
  box-shadow:inset 0 0 0 1px var(--edge-2),0 30px 80px rgba(0,0,0,.65)}

/* ——— نوار آمار ——— */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--edge);border:1px solid var(--edge)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--void);padding:24px 18px;text-align:center}
.stat b{display:block;font-size:34px;line-height:1.2;color:var(--lime)}
.stat span{font-size:14px;color:var(--tx-2)}
.stat:nth-child(2) b{color:var(--cyan)}
.stat:nth-child(3) b{color:var(--amber)}
.stat:nth-child(4) b{color:var(--pink);font-size:28px}

/* ——— شبکه‌های عمومی ——— */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}}
.plate p{color:var(--tx-2);font-size:16px}

/* ——— مراحل ——— */
.steps{counter-reset:s;display:grid;gap:18px}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{counter-increment:s;background:var(--plate);box-shadow:inset 0 0 0 1px var(--edge);padding:24px}
.step::before{content:"۰" counter(s, persian);display:block;font-size:28px;font-weight:700;color:var(--violet);margin-bottom:10px}

/* ——— بازی‌ها ——— */
.games{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.game{background:var(--plate);box-shadow:inset 0 0 0 1px var(--edge);padding:16px;display:flex;flex-direction:column;align-items:flex-start;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.game i{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  font-size:24px;font-style:normal;margin-bottom:12px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.game h3{font-size:16px;margin-bottom:5px}
.game p{font-size:13.5px;color:var(--tx-2);line-height:1.7}
.game .play{display:inline-flex;align-items:center;margin-top:auto;padding-top:0;position:relative;top:10px;padding:6px 14px;background:var(--lime);color:var(--lime-ink);font-size:13px;font-weight:700;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.game .play:hover{filter:brightness(1.08)}
.game .only{margin-top:auto;position:relative;top:10px;font-size:12.5px;color:var(--tx-2);box-shadow:inset 0 0 0 1px var(--edge);padding:5px 12px}

/* ——— جوایز ——— */
.prize-row{display:grid;gap:26px;align-items:center}
@media(min-width:900px){.prize-row{grid-template-columns:1fr 300px}}
.tiers li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--edge)}
.tiers li:last-child{border-bottom:0}
.rank{flex:none;width:38px;height:38px;display:grid;place-items:center;font-weight:700;
  background:var(--amber);color:var(--amber-ink);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.rank.s{background:#cbd5e1;color:#111}
.rank.b{background:#c2794a;color:#180d05}

/* ——— جدول درآمد / برندها ——— */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{border:1px solid var(--edge);padding:13px 15px;text-align:right;vertical-align:top}
.tbl th{background:var(--plate);font-size:14px;color:var(--cyan)}
.tbl td{color:var(--tx-2)}
.tbl td:first-child{color:var(--tx);font-weight:700}
.tbl-scroll{overflow-x:auto}

/* ——— گالری ——— */
.shots{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.shots figure{margin:0}
.shots img{box-shadow:inset 0 0 0 1px var(--edge)}
.shots figcaption{font-size:13px;color:var(--tx-2);padding-top:8px;text-align:center}

/* ——— سوالات متداول ——— */
.faq details{background:var(--plate);box-shadow:inset 0 0 0 1px var(--edge);margin-bottom:10px}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lime);font-size:24px;flex:none;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 22px 20px;color:var(--tx-2);font-size:16px}

/* ——— دعوت به اقدام پایانی ——— */
.final{text-align:center;background:var(--plate);box-shadow:inset 0 0 0 1px var(--edge-2);padding:52px 26px}
.final h2{margin-bottom:12px}
.final .lead{margin-inline:auto}
.final .hero-cta{justify-content:center}

/* ——— فوتر ——— */
footer{border-top:1px solid var(--edge);padding:46px 0 34px;color:var(--tx-2);font-size:15px}
.f-grid{display:grid;gap:30px;margin-bottom:32px}
@media(min-width:760px){.f-grid{grid-template-columns:1.6fr 1fr 1fr}}
footer h3{font-size:15px;color:var(--tx);margin-bottom:12px}
footer li{padding:5px 0}
footer a:hover{color:var(--lime)}
.f-btm{border-top:1px solid var(--edge);padding-top:20px;font-size:14px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.ltr{direction:ltr;unicode-bidi:isolate}
/* ——— صفحه‌های موضوعی ——— */
.crumbs{font-size:14px;color:var(--tx-2);padding-top:26px}
.crumbs a:hover{color:var(--lime)}
.crumbs span{padding-inline:6px;opacity:.5}
.prose p{color:var(--tx-2);margin-bottom:16px;max-width:72ch}
.prose h3{margin-top:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips li{font-size:14px;font-weight:700;padding:7px 14px;background:var(--plate);
  box-shadow:inset 0 0 0 1px var(--edge);color:var(--tx-2);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.rule li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--edge)}
.rule li:last-child{border-bottom:0}
.rule b{flex:none;min-width:64px;text-align:center;padding:5px 10px;font-size:15px;
  background:var(--plate-2);box-shadow:inset 0 0 0 1px var(--edge-2);color:var(--lime);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.rule b.neg{color:var(--red)}
.rule span{color:var(--tx-2);font-size:16px}
.note{background:var(--plate-2);box-shadow:inset 0 0 0 1px var(--edge);padding:20px;
  border-inline-start:3px solid var(--amber);color:var(--tx-2);font-size:16px;margin-top:22px}

/* ——— تورنمنت‌های زنده ———
   تنها بخشی از صفحه که داده‌اش از API می‌آید. تا وقتی داده نیامده
   پنهان است و متن ثابتِ زیرش دیده می‌شود، پس هیچ‌وقت قاب خالی نمی‌ماند. */
.live-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:18px}
@media(min-width:700px){.live-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.live-grid{grid-template-columns:repeat(3,1fr)}}
.live-card{background:var(--plate);box-shadow:inset 0 0 0 1px var(--edge);transition:box-shadow .15s,transform .15s}
.live-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--edge-2)}
.live-card a{display:block;padding:20px;height:100%}
.live-top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.live-type,.live-status{font-size:12.5px;font-weight:700;padding:4px 11px;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.live-type{background:var(--hud-cyan,var(--cyan));color:#04202a}
.live-status{background:var(--plate-2);box-shadow:inset 0 0 0 1px var(--edge-2);color:var(--tx-2)}
.live-status.on{background:var(--amber);color:var(--amber-ink);box-shadow:none}
.live-card h3{font-size:17px;margin-bottom:6px}
.live-desc{color:var(--tx-2);font-size:14px;line-height:1.7;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.live-meta{margin:0 0 16px}
.live-meta>div{display:flex;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--edge)}
.live-meta>div:last-child{border-bottom:0}
.live-meta dt{font-size:13.5px;color:var(--tx-2);margin:0}
.live-meta dd{font-size:14px;font-weight:700;margin:0;text-align:end}
.live-meta dd.gold{color:var(--amber)}
.live-go{display:inline-block;font-size:14.5px;font-weight:700;color:var(--lime)}

/* ——— کسب درآمد ——— */
/* The one gold surface on the page. Outline is an inset shadow (see .plate). */
.income{position:relative;overflow:hidden;padding:36px 26px;
  background:
    radial-gradient(70% 90% at 0% 0%,rgba(255,199,46,.22),transparent 60%),
    radial-gradient(60% 80% at 100% 100%,rgba(180,255,58,.12),transparent 62%),
    var(--plate);
  box-shadow:inset 0 0 0 1px rgba(255,199,46,.45)}
.income::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,224,122,.14),transparent);
  animation:income-sweep 4.5s ease-in-out infinite}
@keyframes income-sweep{0%,50%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
.income .eyebrow{color:var(--amber)}
.income .gold{background:linear-gradient(90deg,#ffe07a,var(--amber),var(--lime));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.income-coin{position:absolute;inset-inline-end:26px;top:28px;width:84px;height:84px;
  filter:drop-shadow(0 8px 24px rgba(255,199,46,.35));animation:float-coin 4s ease-in-out infinite}
@keyframes float-coin{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
@media(max-width:620px){.income-coin{width:58px;height:58px;top:22px;inset-inline-end:18px}}
.income-steps{display:grid;gap:12px;margin-top:26px}
@media(min-width:760px){.income-steps{grid-template-columns:repeat(3,1fr)}}
.income-steps li{background:rgba(10,7,17,.55);box-shadow:inset 0 0 0 1px var(--edge);padding:16px 18px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.income-steps b{display:block;color:var(--amber);font-size:18px}
.income-steps span{color:var(--tx-2);font-size:15px}