/* ══════════════════════════════════════════════════════════════
   HOTBET — استایل تم (بازنویسی pillow.style.rtl.css)
   کلاس‌ها دقیقاً همان کلاس‌های سایت اصلی است.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#000000;
  --bg-soft:#0b0a0d;
  --panel:#141318;
  --line:#26242c;
  --red:#d40d33;
  --pink:#ff2f63;
  --gold:#d9a441;
  --txt:#ffffff;
  --muted:#9c96a4;
  --container:1200px;
  --font:"Vazirmatn","Vazir","IRANSans","Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font); font-size:14px; line-height:1.9;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ border:0; display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; cursor:pointer; }
center{ display:block; }

.container{ width:min(var(--container),100%); margin-inline:auto; padding-inline:12px; }
.left{ float:right; }            /* در RTL «left» تم یعنی سمت راست */
.right{ float:left; }
.clear{ clear:both; }
.inline{ display:block; }
.pr10{ padding-inline:10px; }
.mt5{ margin-top:5px; } .mb5{ margin-bottom:5px; }
.mt10{ margin-top:10px; } .ml10{ margin-inline-start:10px; }
.bold{ font-weight:700; }
.pointer{ cursor:pointer; }
.mobile{ display:none; }

/* ══════════════ هدر بالا: لوگو + ورود/ثبت‌نام ══════════════ */
.header-main-center{ position:relative; z-index:40; background:var(--bg); }
.header-top{ background:var(--bg); }
.header-top .container{ min-height:84px; }
.hdr-logo img{ height:74px !important; width:auto; }

.hdr-actions .link{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:8px;
  font-size:14px; font-weight:700; color:#fff; white-space:nowrap;
  transition:transform .18s, box-shadow .18s, color .18s;
}
.hdr-actions .link.login{
  background:linear-gradient(180deg,#ff375f,#d40d33);
  box-shadow:0 6px 20px -6px rgba(255,47,99,.65);
}
.hdr-actions .link.login:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(255,47,99,.9); }
.hdr-actions .link.signup:hover,
.hdr-actions .link.language:hover{ color:var(--pink); }
.hdr-actions .link.language{ font-size:13px; color:#cfc9d4; padding:9px 10px; }

/* آیکون‌های متریال → SVG محلی */
.material-symbols-outlined{
  width:20px; height:20px; flex:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
[data-icon="login"]{ background-image:url("../img/icons/login.svg"); }
[data-icon="person_add"]{ background-image:url("../img/icons/person_add.svg"); }
[data-icon="help"]{ background-image:url("../img/icons/help.svg"); }
[data-icon="featured_seasonal_and_gifts"]{ background-image:url("../img/icons/gift.svg"); }

.fa-caret-down{ font-style:normal; font-size:10px; }
.fa-caret-down::before{ content:"▾"; }

.language-selector{ display:none; }

/* ══════════════ نوار منوی اصلی ══════════════ */
.header.container.pr10{ padding-block:0; }
.top-bar{ width:100%; }
.top-bar .container{
  display:flex; align-items:center; justify-content:center; gap:2px;
  height:52px; overflow-x:auto; scrollbar-width:none;
}
.top-bar .container::-webkit-scrollbar{ display:none; }
.top-bar a{
  position:relative; padding:8px 13px; border-radius:8px;
  font-size:14px; font-weight:600; color:#ddd8e2; white-space:nowrap;
  transition:color .18s, background .18s;
}
.top-bar a:hover{ color:#fff; background:#ffffff0f; }
.top-bar a::after{
  content:""; position:absolute; inset-inline:13px; bottom:2px; height:2px;
  background:var(--pink); border-radius:2px; transform:scaleX(0); transition:transform .22s;
}
.top-bar a:hover::after{ transform:scaleX(1); }
.top-bar a div{ display:none; }        /* آیکون‌های منو در نسخه اصلی مخفی‌اند */

/* خط طلایی زیر منو — در سایت اصلی یک خط تمام‌عرض است، نه یک درخششِ وسط.
   نسخه‌ی قبلی دو سرش را به شفاف می‌برد و عملاً روی مانیتور دیده نمی‌شد. */
.header-seperator{
  height:2px; opacity:.9;
  background:linear-gradient(90deg,#7d5a1d,var(--gold) 22%,#f0c46a 50%,var(--gold) 78%,#7d5a1d);
}
/* همان خط، روی موبایل. عنصر .header-seperator کلاس .desktop دارد و روی
   موبایل مخفی است، ولی در اسکرین‌شات نسخه‌ی اصلی (Pixel 7) این خط زیر نوار
   لوگو هست. به‌جای دست‌زدن به مارک‌آپ، همان خط به خودِ نوار موبایل اضافه شد. */
.mobile-bar{ position:relative; }
.mobile-bar::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:2px; opacity:.9;
  background:linear-gradient(90deg,#7d5a1d,var(--gold) 22%,#f0c46a 50%,var(--gold) 78%,#7d5a1d);
}

/* ══════════════ بنر وسط (اسلایدر) ══════════════ */
.main-splash{ position:relative; overflow:hidden; background:#000; }
.main-splash .image-container{
  display:flex; width:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.main-splash .image-container > *{ flex:0 0 100%; width:100%; }
.main-splash .image{
  width:100%; aspect-ratio:2500/1052;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.splash-dots{
  position:absolute; inset-inline:0; bottom:14px; z-index:2;
  display:flex; justify-content:center; gap:8px;
}
.splash-dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:#ffffff55; cursor:pointer; transition:background .2s, width .2s;
}
.splash-dots button.on{ background:var(--pink); width:24px; border-radius:5px; }

/* ══════════════ کارت‌های بازی ══════════════ */
.main-games-box{
  display:grid; grid-template-columns:repeat(6,1fr); gap:3px;
  background:#000; margin-top:3px;
}
.main-games-box .clear{ display:none; }
.main-games-box .game{ display:block; overflow:hidden; background:#0a0207; }
.main-games-box .game img{
  width:100%; height:auto; display:block;
  transition:transform .35s, filter .35s;
}
.main-games-box .game:hover img{ transform:scale(1.06); filter:brightness(1.1); }

/* ══════════════ فوتر ══════════════ */
.footer,
.footer-links{ background:var(--bg); }
.footer-links{ padding:34px 0 26px; }
.footer-links .container{ display:flow-root; }

.footer-link{
  display:inline-flex !important; align-items:center; gap:8px;
  padding:7px 0; font-size:13.5px; color:#d3ced9;
}
.footer-link:hover{ color:var(--pink); }
.footer-links .left{ float:right; }
.footer-links .left .footer-link{ display:flex !important; }

.custom-footer-download-links{ flex-wrap:wrap; }
.footer-download-link-container{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:112px; padding:16px 8px 13px; border-radius:14px;
  background:linear-gradient(180deg,#17161d,#0c0b10);
  border:1px solid var(--line);
  text-align:center; font-size:12.5px; line-height:1.6;
  transition:border-color .22s, transform .22s;
}
.footer-download-link-container:hover{ border-color:var(--pink); transform:translateY(-4px); }
.footer-download-link-icon{
  width:44px !important; height:44px; padding:9px;
  border-radius:50%; background:#000; border:1px solid #2c2a34;
}
.footer-download-link-title{ color:#ded9e4; }

/* ══════════════ نوار پایین موبایل ══════════════ */
.mobile-footer-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:70;
  background:rgba(10,9,13,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-footer-bar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  height:62px; padding:7px 2px;
  font-size:10px; font-weight:600; color:#b7b1bf; text-align:center; line-height:1.35;
}
.mobile-footer-bar a::before{
  content:""; width:22px; height:22px; flex:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.mobile-footer-bar .sport::before{ background-image:url("../img/icons/nav-sport.svg"); }
.mobile-footer-bar .live::before{ background-image:url("../img/icons/nav-live.svg"); }
.mobile-footer-bar .scores::before{ background-image:url("../img/icons/nav-scores.svg"); }
.mobile-footer-bar .casino::before{ background-image:url("../img/icons/nav-casino.svg"); }
.mobile-footer-bar .account::before{ background-image:url("../img/icons/nav-account.svg"); }
.mobile-bar-holder{ display:none; }   /* اسپیسر تم — جایش padding روی body */

/* ══════════════ هدر و منوی موبایل ══════════════ */
.mobile-bar{
  display:none; align-items:center; justify-content:space-between;
  min-height:60px; background:var(--bg);
}
.mobile-bar .logo img{ height:38px; width:auto; margin-inline:auto; }
.mobile-bar .icon{ width:44px; }
.mobile-menu-action{
  position:relative; display:block; width:44px; height:44px;
}
.mobile-menu-action::before{          /* سه خط همبرگر */
  content:""; position:absolute; top:14px; inset-inline:9px;
  height:2.5px; border-radius:2px; background:#fff;
  box-shadow:0 7.5px 0 #fff, 0 15px 0 #fff;
}

.mobile-menu{
  position:fixed; inset-block:0; inset-inline-end:0; z-index:95;
  width:min(320px,86vw); background:var(--bg-soft);
  border-inline-start:1px solid var(--line);
  padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto;
  transform:translateX(-100%);            /* RTL: بیرون از کادر سمت راست */
  transition:transform .28s cubic-bezier(.22,.9,.3,1);
}
.mobile-menu.open{ transform:none; }
.mobile-menu-backdrop{
  position:fixed; inset:0; z-index:90; background:#000c;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.mobile-menu-backdrop.on{ opacity:1; pointer-events:auto; }

.mobile-menu .buttons{ display:grid; gap:8px; margin-bottom:16px; }
.mobile-menu .buttons a{
  margin:0 !important; padding:11px 14px; border-radius:8px;
  font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,#ff375f,#d40d33);
}
.mobile-menu .buttons a:nth-child(2){ background:#ffffff10; border:1px solid var(--line); }
.mobile-menu .buttons a:nth-child(2) .material-symbols-outlined{ filter:none; }
.mobile-menu .buttons a:nth-child(3){ background:transparent; color:#cfc9d4; font-weight:600; }

.mobile-menu .items{ display:flex; flex-direction:column; }
.mobile-menu .items a{
  padding:12px 10px; border-bottom:1px solid #ffffff0a;
  font-size:14px; font-weight:600; color:#d7d2dc;
}
.mobile-menu .items a:hover{ color:#fff; background:#ffffff0d; }
.mobile-menu .items img{ width:24px; height:24px; margin-inline-end:10px; }
.mobile-menu .custom-mobile-menu-items a{ gap:0; }

/* ══════════════ ریسپانسیو ══════════════ */
@media (max-width:1080px){
  .main-games-box{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px){
  .desktop{ display:none !important; }
  .mobile{ display:block; }
  .mobile-bar{ display:flex; }
  .mobile-footer-bar{ display:flex; }
  body{ padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
  .main-games-box{ grid-template-columns:1fr; gap:6px; }
}

@media (min-width:901px){
  .mobile-menu,
  .mobile-menu-backdrop,
  .mobile-bar-holder{ display:none !important; }
}

@media (max-width:600px){
  .footer-download-link-container{ width:calc(33.333% - 9px); }
  .custom-footer-download-links{ justify-content:center; gap:10px !important; }
  .footer-links .right{ float:none; width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ▼▼▼ از اینجا به بعد: اضافات هات بت ▼▼▼

   هیچ‌کدام از قواعد بالا دست نخورده است — دیزاین اصلی سایت عیناً همان است.
   این بخش فقط بخش‌هایی را استایل می‌دهد که *زیر* دیزاین اصلی اضافه شده‌اند
   (عنوان صفحه، محتوا، سوالات متداول، صفحات داخلی و میز بازی‌ها) و از همان
   متغیرهای رنگی بالا استفاده می‌کند.
   ══════════════════════════════════════════════════════════════════════════ */

/* فونت فارسی خودمیزبان — تم اصلی Vazirmatn را صدا می‌زد ولی فایلش را نداشت
   و به فونت پیش‌فرض سیستم می‌افتاد. حالا واقعاً لود می‌شود. */
@font-face{font-family:Vazirmatn;src:url(/assets/fonts/IRANSansX-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/assets/fonts/IRANSansX-Medium.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/assets/fonts/IRANSansX-Bold.woff2) format("woff2");font-weight:700 900;font-display:swap}

/* ── دسترس‌پذیری ─────────────────────────────────────────────────────────── */
.hb-skip{position:absolute;right:-9999px;top:0;z-index:200;background:var(--red);
  color:#fff;padding:10px 18px;border-radius:0 0 10px 10px}
.hb-skip:focus{right:16px}
.hb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--pink);outline-offset:2px;border-radius:6px}

/* [hidden] باید واقعاً مخفی کند، حتی روی کامپوننت‌هایی که display صریح دارند */
.hb-gcard[hidden],.hb-stageload[hidden],.hb-empty[hidden]{display:none!important}

/* ── ظرف محتوای اضافه‌شده ───────────────────────────────────────────────── */
.hb-main{width:min(var(--container),100%);margin-inline:auto;padding:26px 12px 60px}
.hb-h1{font-size:clamp(23px,4.4vw,36px);line-height:1.5;margin:4px 0 12px;font-weight:700}
.hb-lead{font-size:clamp(14.5px,2.1vw,16.5px);color:#cfc9d4;max-width:74ch;margin:0 0 24px}
.hb-lead a{color:var(--pink)}

.hb-crumb{margin:0 0 10px}
.hb-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;
  font-size:12.5px;color:var(--muted)}
.hb-crumb li+li::before{content:"‹";margin-left:6px;color:var(--line)}
.hb-crumb a:hover{color:var(--pink)}

.hb-sec{margin:48px 0 0}
.hb-sec__h{font-size:clamp(19px,3vw,26px);margin:0 0 6px;font-weight:700}
.hb-sec__sub{color:var(--muted);margin:0 0 18px;font-size:14px;max-width:70ch}

/* عنوان بخش‌های اضافه‌شده‌ی صفحه‌ی اصلی، با همان خط طلایی تم */
.hb-below{border-top:2px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--gold),transparent) 1;
  margin-top:0;padding-top:6px}

/* ── متن مقاله‌ای ───────────────────────────────────────────────────────── */
.hb-prose{max-width:78ch;font-size:14.5px}
.hb-prose h2{font-size:clamp(18px,2.8vw,24px);margin:34px 0 10px;font-weight:700}
.hb-prose h3{font-size:clamp(16px,2.3vw,19px);margin:24px 0 8px;font-weight:700;color:#f0edf3}
.hb-prose p{margin:0 0 14px;color:#ddd8e2}
.hb-prose ul,.hb-prose ol{margin:0 0 16px;padding-inline-start:22px;color:#ddd8e2}
.hb-prose li{margin:0 0 7px}
.hb-prose a{color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.hb-prose a:hover{color:#fff}
.hb-prose strong{color:#fff}
.hb-prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13.5px}
.hb-prose th,.hb-prose td{border:1px solid var(--line);padding:9px 12px;text-align:right}
.hb-prose th{background:#ffffff0a;font-weight:700}
.hb-prose--wide{max-width:none}
.hb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── دکمه‌ها: هم‌زبان با .hdr-actions .link تم اصلی ─────────────────────── */
.hb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:8px;font:inherit;font-weight:700;font-size:14px;
  border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
/* یک پله تیره‌تر از گرادیان دکمه‌ی لاگینِ تم، چون این دکمه‌ها متن سفید
   دارند و باید نسبت کنتراست ۴.۵ را رد کنند. دکمه‌ی لاگینِ خودِ تم
   (.hdr-actions .link.login) عمداً دست‌نخورده مانده — بخشی از دیزاین اصلی است. */
.hb-btn--go{background:linear-gradient(180deg,#e01f4f,#b80a2b);color:#fff;
  box-shadow:0 6px 20px -6px rgba(255,47,99,.65)}
.hb-btn--go:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(255,47,99,.9)}
.hb-btn--play{background:linear-gradient(180deg,#2fd06f,#1f8f4a);color:#04160c;
  box-shadow:0 6px 20px -6px rgba(47,208,111,.55)}
.hb-btn--play:hover{transform:translateY(-2px)}
.hb-btn--ghost{background:#ffffff10;border-color:var(--line);color:#fff}
.hb-btn--ghost:hover{border-color:var(--pink)}
.hb-btn--sm{padding:9px 16px;font-size:13px}
/* ویژگی بالاتر از `.hb-note a` و `.hb-prose a`، وگرنه متن دکمه رنگ لینک می‌گیرد */
a.hb-btn.hb-btn--go,a.hb-btn.hb-btn--go:hover{color:#fff;text-decoration:none}
a.hb-btn.hb-btn--play,a.hb-btn.hb-btn--play:hover{color:#04160c;text-decoration:none}
a.hb-btn.hb-btn--ghost,a.hb-btn.hb-btn--ghost:hover{color:#fff;text-decoration:none}

/* ── فهرست بازی‌ها (زیر نوار کارت‌های اصلی) ─────────────────────────────── */
.hb-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.hb-gcard{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .18s,border-color .18s}
.hb-gcard:hover{transform:translateY(-4px);border-color:var(--pink)}
/* height:auto اجباری است. عرض/ارتفاع HTML یک presentational hint می‌سازد
   (height:350px) و چون aspect-ratio ارتفاع صریح را کنار نمی‌زند، کارت
   ارتفاع ذاتیِ ۳۵۰ را نگه می‌داشت و عرضش کشیده می‌شد → object-fit:cover
   ۶۰٪ عرض تصویر را می‌برید («BACKGAMMON» می‌شد «ACKGAMMO»).
   نسبت هم همان ۷۰۰×۳۵۰ خودِ آرت‌ورک است تا هیچ چیز بریده نشود. */
.hb-gcard__img{width:100%;height:auto;aspect-ratio:700/350;object-fit:cover;background:#0a0207}
.hb-gcard__b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.hb-gcard__t{font-size:16px;font-weight:700;margin:0}
.hb-gcard__d{font-size:12.8px;color:var(--muted);margin:0;flex:1;line-height:1.75}
.hb-gcard__cta{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:13px;font-weight:700;color:#2fd06f}
.hb-gcard:hover .hb-gcard__cta{color:#5ce795}

.hb-finder{display:flex;gap:10px;align-items:center;margin:0 0 18px;flex-wrap:wrap}
.hb-finder input{flex:1 1 260px;min-width:0;padding:11px 15px;border-radius:8px;
  border:1px solid var(--line);background:#0e0d12;color:#fff;font:inherit;font-size:14px}
.hb-finder input::placeholder{color:#6f6a77}
.hb-finder__n{font-size:12.5px;color:var(--muted)}
.hb-empty{color:var(--muted);padding:20px 0;font-size:14px}

/* ── کارت‌های محتوایی ───────────────────────────────────────────────────── */
.hb-cards{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.hb-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.hb-card__h{font-size:16px;font-weight:700;margin:0 0 8px}
.hb-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.85}
.hb-card ul{margin:8px 0 0;padding-inline-start:20px;color:var(--muted);font-size:13.5px}
.hb-card a{color:var(--pink)}

.hb-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:11px}
.hb-steps li{counter-increment:s;position:relative;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:15px 60px 15px 17px}
.hb-steps li::before{content:counter(s);position:absolute;right:15px;top:14px;
  width:31px;height:31px;display:grid;place-items:center;border-radius:9px;
  font-weight:700;font-size:13.5px;background:linear-gradient(180deg,#e01f4f,#b80a2b);color:#fff}
.hb-steps b{display:block;margin:0 0 3px;font-size:15px}
.hb-steps span{color:var(--muted);font-size:13.5px}
.hb-steps a{color:var(--pink)}

.hb-note{border:1px solid var(--line);background:#ffffff07;border-radius:12px;
  padding:15px 18px;margin:20px 0;color:#cfc9d4;font-size:13.8px}
.hb-note strong{color:#fff}
.hb-note a{color:var(--pink)}
.hb-note--warn{border-color:#d9a44140;background:#d9a4410f}
.hb-note--stamp{font-size:12.5px;color:var(--muted)}

.hb-bonus{background:linear-gradient(160deg,#1b1119,#111016);
  border:1px solid #d9a44130;border-radius:14px;padding:19px}
.hb-bonus__t{font-size:16.5px;font-weight:700;margin:0 0 4px}
.hb-bonus__terms{font-size:12.5px;color:var(--gold);margin:0 0 13px}
.hb-bonus__l{display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.hb-bonus__l:last-of-type{border-bottom:0}
.hb-bonus__l b{font-size:20px;color:var(--gold)}
.hb-bonus__n{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* ── سوالات متداول ─────────────────────────────────────────────────────── */
.hb-faq{margin:48px 0 0}
.hb-faq h2{font-size:clamp(19px,3vw,26px);margin:0 0 16px;font-weight:700}
.hb-faq__list{display:grid;gap:8px;max-width:82ch}
.hb-faq__item{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hb-faq__item summary{padding:14px 18px;cursor:pointer;font-weight:700;font-size:14.5px;
  list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.hb-faq__item summary::-webkit-details-marker{display:none}
.hb-faq__item summary::after{content:"+";color:var(--pink);font-size:20px;flex:none}
.hb-faq__item[open] summary::after{content:"–"}
.hb-faq__a{padding:0 18px 16px;color:var(--muted);font-size:13.8px;line-height:1.9}
.hb-faq__a p{margin:0 0 10px}
.hb-faq__a p:last-child{margin:0}
.hb-faq__a a{color:var(--pink)}

/* ── فهرست لینک ─────────────────────────────────────────────────────────── */
.hb-links{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.hb-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 17px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;font-size:14px;font-weight:600;transition:border-color .18s}
.hb-links a:hover{border-color:var(--pink)}
.hb-links a::after{content:"←";color:var(--pink);flex:none}
.hb-links span{color:var(--muted);font-size:12px;font-weight:400;display:block}

/* ── صفحه‌ی ۴۰۴ ─────────────────────────────────────────────────────────── */
.hb-404{text-align:center;padding:50px 0}
.hb-404__n{font-size:clamp(60px,15vw,124px);font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--red),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   میز بازی — نقطه‌ی جداسازی استایل بازی از سایت
   استایل هر بازی زیر #hb-stage محدود شده است.
   ══════════════════════════════════════════════════════════════════════════ */
.hb-stagewrap{margin:0 0 8px}
.hb-stagebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px 12px 0 0;border-bottom:0}
.hb-stagebar__tag{font-size:11.5px;font-weight:700;color:#2fd06f;background:#2fd06f16;
  border:1px solid #2fd06f38;padding:4px 11px;border-radius:999px}
.hb-stagebar__sp{flex:1}
.hb-stagebar a,.hb-stagebar button{font:inherit;font-size:12.5px;font-weight:600;
  color:#cfc9d4;background:#ffffff0a;border:1px solid var(--line);border-radius:8px;
  padding:6px 12px;cursor:pointer}
.hb-stagebar a:hover,.hb-stagebar button:hover{border-color:var(--pink);color:#fff}

#hb-stage{position:relative;border:1px solid var(--line);border-radius:0 0 12px 12px;
  background:var(--bg-soft);min-height:340px;overflow:hidden;contain:layout paint style}

/* تم اصلی چند عنصر لخت را استایل می‌دهد (img/a/center). آن قواعد نباید به
   داخل میز بازی نشت کنند، وگرنه چیدمان بعضی بازی‌ها بهم می‌ریزد. */
#hb-stage img{display:revert;max-width:revert;border:revert}
#hb-stage a{color:revert;text-decoration:revert}

/* لودر «روی» میز، نه «بالای» آن — اگر داخل جریان باشد، لحظه‌ی مخفی‌شدنش
   کل میز به بالا می‌پرد و CLS خراب می‌شود. */
.hb-stageload{position:absolute;inset:0;z-index:2;background:var(--bg-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:30px;text-align:center;color:var(--muted)}
.hb-stageload__ring{width:38px;height:38px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--pink);animation:hb-spin .9s linear infinite}
@keyframes hb-spin{to{transform:rotate(360deg)}}
.hb-stageload__err{color:#ffb3c1}
.hb-stageload__acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ── ریسپانسیو اضافات ───────────────────────────────────────────────────── */
@media (max-width:600px){
  .hb-main{padding:20px 12px 46px}
  .hb-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
  .hb-gcard__t{font-size:14px}
  .hb-gcard__d{font-size:12px}
  .hb-steps li{padding:14px 54px 14px 14px}
}

/* ── فوتر تکمیلی (زیر فوتر اصلی تم) ────────────────────────────────────── */
.hb-foot{border-top:1px solid var(--line);background:var(--bg-soft)}
.hb-foot__grid{width:min(var(--container),100%);margin-inline:auto;padding:34px 12px 22px;
  display:grid;gap:26px;grid-template-columns:2fr 1fr 1fr 1fr}
@media (max-width:900px){.hb-foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.hb-foot__grid{grid-template-columns:1fr}}
.hb-foot__h{font-size:13.5px;font-weight:700;margin:0 0 11px;color:#fff}
.hb-foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hb-foot__col a{color:var(--muted);font-size:13px}
.hb-foot__col a:hover{color:var(--pink)}
.hb-foot__bot{width:min(var(--container),100%);margin-inline:auto;padding:14px 12px 26px;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.hb-foot__bot p{margin:0}
.hb-foot__note{max-width:62ch}
.hb-foot__bot a{color:var(--pink)}
/* روی موبایل، نوار ثابت پایین نباید روی فوتر بیفتد */
@media (max-width:900px){.hb-foot__bot{padding-bottom:16px}}

/* ── لینک‌های داخل متن باید فقط با رنگ تشخیص داده نشوند (WCAG 1.4.1) ───── */
.hb-card p a,.hb-card ul a,.hb-foot__note a,.hb-steps a,.hb-note a,.hb-faq__a a{
  text-decoration:underline;text-underline-offset:3px}

/* ══════════════════════════════════════════════════════════════════════════
   پولیش پایین صفحه — نزدیک‌کردن بخش‌های اضافه‌شده به حال‌وهوای دیزاین اصلی

   دیزاین اصلی سایت (هدر، اسلایدر، نوار کارت‌ها، نوار پایین موبایل) دست
   نخورده است. چیزی که اینجا عوض می‌شود فقط بخش‌های *اضافه‌شده*ی زیر آن است:
   قبلاً مشکی تخت بودند و بیشتر شبیه صفحه‌ی مستندات به نظر می‌رسیدند تا
   ادامه‌ی همان سایت. سه چیزی که فاصله را می‌ساخت و اینجا جبران شده:

     ۱) پس‌زمینه‌ی زرشکیِ محوِ سایت اصلی ادامه پیدا نمی‌کرد؛
     ۲) عنوان بخش‌ها هیچ لنگرِ رنگی نداشتند؛
     ۳) کارت‌ها لبه‌ی خاکستری خنثی داشتند، نه لبه‌ی گرمِ تم.
   ══════════════════════════════════════════════════════════════════════════ */

/* ۱) درخشش زرشکی بالای محتوا.
   روی #main می‌نشیند و نه روی .hb-main، چون #main تمام‌عرض است و درخشش
   باید تا لبه‌ی صفحه برود. نسخه‌ی اول این کار را با inset-inline:-50vw روی
   .hb-main انجام می‌داد که ۶۰۰ پیکسل به scrollWidth بدنه اضافه می‌کرد؛
   overflow-x:hidden پنهانش می‌کرد ولی اسکرین‌شات تمام‌صفحه لوش می‌داد.
   حالا هیچ inset منفی‌ای در کار نیست.

   روی صفحه‌ی اصلی دیده نمی‌شود چون اسلایدر بالای #main پس‌زمینه‌ی مات دارد —
   یعنی دیزاین اصلی همان است که بود. #hb-stage هم پس‌زمینه‌ی مات خودش را
   دارد، پس داخل میز بازی نشت نمی‌کند. */
#main{position:relative;isolation:isolate}
#main::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset-inline:0;top:0;height:600px;
  background:
    radial-gradient(52% 100% at 50% 0,rgba(212,13,51,.20),transparent 72%),
    radial-gradient(34% 72% at 84% 6%,rgba(255,47,99,.10),transparent 70%);
}

/* ۲) لنگر رنگی عنوان بخش — همان صورتیِ تم، در ابتدای خط (RTL: سمت راست) */
.hb-sec__h{position:relative;padding-inline-start:0}
.hb-sec__h::before{
  content:"";display:block;width:46px;height:3px;border-radius:3px;
  margin:0 0 10px;
  background:linear-gradient(90deg,var(--pink),var(--red));
}

/* ۳) لبه‌ی گرم‌تر برای کارت‌ها + درخشش ملایم هنگام هاور */
.hb-card{transition:border-color .18s,transform .18s,box-shadow .18s}
.hb-card:hover{border-color:#3a2530}
.hb-gcard:hover{box-shadow:0 14px 34px -18px rgba(255,47,99,.75)}
.hb-links a:hover{box-shadow:0 10px 26px -16px rgba(255,47,99,.7)}

/* ══════════════════════════════════════════════════════════════════════════
   بلوک‌های صفحه‌های آموزش / قوانین / دسته‌بندی / ورزشی
   ══════════════════════════════════════════════════════════════════════════ */

/* نوار دکمه‌ی بالای صفحه‌های آموزش و قوانین — «برو تمرین کن» باید اول دیده شود */
.hb-guidebar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 26px}

/* کارت هشدار — برای «اشتباه‌های رایج». همان کارت است با لبه و تیترِ گرم. */
.hb-card--warn{border-color:#4a1f2c;background:linear-gradient(160deg,#1a1016,var(--panel))}
.hb-card--warn .hb-card__h{color:#ff8ea8}
.hb-card--warn:hover{border-color:var(--pink)}

/* جعبه‌ی مثال عددی — کمی روشن‌تر از .hb-note معمولی تا از متن جدا شود */
.hb-note--ex{border-color:#33202a;background:linear-gradient(160deg,#17111a,#100e14)}
.hb-note--ex ul{margin:10px 0 0;padding-inline-start:20px}
.hb-note--ex li{margin:0 0 7px}
.hb-note--ex b{color:#fff}

/* فهرست قوانین پایه — شماره‌دار نیست چون ترتیبش ترتیب مراجعه است، نه اجرا */
.hb-rulelist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hb-rulelist li{
  position:relative;padding:12px 42px 12px 15px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  font-size:14px;line-height:1.85;color:#ddd8e2;
}
.hb-rulelist li::before{
  content:"";position:absolute;right:16px;top:19px;
  width:8px;height:8px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 0 3px rgba(255,47,99,.16);
}
.hb-rulelist b{color:#fff}

/* جدول‌های صفحه‌ی قوانین: ستون اول سرستونِ ردیف است و باید متمایز باشد */
.hb-prose td,.hb-prose th[scope="row"]{vertical-align:top}
.hb-prose th[scope="row"]{background:#ffffff07;font-weight:700;color:#fff;white-space:normal}

@media (max-width:600px){
  #main::before{height:440px}
  .hb-rulelist li{padding:11px 36px 11px 13px;font-size:13.5px}
  .hb-rulelist li::before{right:13px}
}

/* ── ناحیه‌ی لمسی نقطه‌های اسلایدر ─────────────────────────────────────────
   خودِ نقطه ۹ پیکسل می‌ماند (دیزاین اصلی دست نمی‌خورد)، ولی یک ناحیه‌ی
   نامرئیِ ۲۴ پیکسلی دورش ساخته می‌شود تا روی موبایل راحت زده شود.
   چون absolute است، هیچ چیزی در چیدمان جابه‌جا نمی‌شود.               */
.splash-dots button{position:relative}
.splash-dots button::after{content:"";position:absolute;top:50%;left:50%;
  width:24px;height:24px;transform:translate(-50%,-50%)}