/* ══════════════════════════════════════════════════════════════════════════
 * sh.css — سیستم طراحی شاه بت
 *
 * هر مقدار این فایل از اندازه‌گیری مستقیم روی https://shah.bet/fa آمده است
 * (Playwright: getBoundingClientRect + getComputedStyle روی صفحه‌ی رندرشده).
 * چیزی «شبیه‌سازی» یا حدس زده نشده.
 *
 *  فهرست
 *   ۱  توکن‌ها و ریست
 *   ۲  تایپوگرافی
 *   ۳  دکمه‌ها و فرم‌ها
 *   ۴  پوسته: ریل، نوار بالا، نوار پایین موبایل، کشو
 *   ۵  کانتینر و بخش‌ها
 *   ۶  اسلایدر (hero / کارت / ردیف بازی)
 *   ۷  کارت‌های بازی
 *   ۸  پنل لابی و تب‌ها
 *   ۹  بلوک مقاله و پنل محتوا
 *  ۱۰  فوتر
 *  ۱۱  صفحه‌ی بازی
 *  ۱۲  صفحه‌های محتوایی (بردکرامب، FAQ، فرم تماس، جدول)
 * ══════════════════════════════════════════════════════════════════════════ */

/* ═══ ۱ · توکن‌ها و ریست ═══════════════════════════════════════════════ */

@font-face {
  font-family: Vazirmatn;
  src: url('/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 300 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url('/assets/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url('/assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700 900; font-style: normal; font-display: swap;
}

:root {
  /* رنگ — عیناً rgb()های خودِ مرجع */
  --bg: #1c1127;            /* body            rgb(28,17,39)  */
  --surface: #281937;       /* nav / footer    rgb(40,25,55)  */
  --surface-hi: #341f47;    /* آیتم فعال       rgb(52,31,71)  */
  --surface-top: #41265a;   /* تب فعال         rgb(65,38,90)  */
  --line: #341f47;
  --line-hi: #50306e;       /* حاشیه‌ی تب فعال rgb(80,48,110) */

  --primary: #f7c163;       /* دکمه‌ی اصلی     rgb(247,193,99) */
  --primary-hi: #ffd88a;
  --primary-ink: #241a0a;
  --bonus-from: #209003;
  --bonus-border: #82fc65;
  --link: #4cb2e6;
  --arrow-off: #4d5159;
  --ring18: #9474b8;

  --tx: rgba(255,255,255,.87);
  --tx-dim: rgba(255,255,255,.6);
  --tx-soft: rgba(255,255,255,.4);

  /* هندسه */
  --nav-h: 48px;
  --rail-w: 60px;
  --tab-h: 64px;
  --container: 1280px;
  --gut: 12px;
  --gap: 8px;
  --r: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-xs: 4px;

  --hb-font: Vazirmatn, system-ui, "Segoe UI", Tahoma, sans-serif;
  --font: var(--hb-font);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body.sh-body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--hb-font);
  font-size: 14px;
  line-height: 1.75;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.sh-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sh-skip {
  position: fixed; inset-inline-start: 8px; top: -60px; z-index: 200;
  background: var(--primary); color: var(--primary-ink);
  padding: 8px 16px; border-radius: var(--r-sm); font-weight: 700;
  transition: top .15s;
}
.sh-skip:focus { top: 8px; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs);
}

/* ═══ ۲ · تایپوگرافی ══════════════════════════════════════════════════
 * مقیاس مرجع:  h5/عنوان بخش 30px/500 · متن 14px/300 · small 12px/300
 *              عنوان ردیف 16px/700 · برچسب فوتر 14px/500                */

.sh-h1 { font-size: 30px; font-weight: 500; line-height: 1.5; margin: 0 0 8px; }
.sh-lead { font-size: 14px; font-weight: 300; color: var(--tx); margin: 0 0 4px; }

.sh-panel__h { font-size: 30px; font-weight: 500; line-height: 1.75; margin: 0; }
.sh-h2 { font-size: 20px; font-weight: 500; line-height: 1.6; margin: 24px 0 8px; }
.sh-h3 { font-size: 16px; font-weight: 700; line-height: 1.6; margin: 20px 0 6px; }

.sh-body p { font-size: 14px; font-weight: 300; margin: 0 0 12px; }
.sh-body strong, .sh-body b { font-weight: 700; }
.sh-small { font-size: 12px; font-weight: 300; color: var(--tx); }
.sh-dim { color: var(--tx-dim); }

/* ═══ ۳ · دکمه‌ها و فرم‌ها ════════════════════════════════════════════ */

.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 32px; padding: 4px 10px; border: 0; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer;
  background: transparent; color: var(--tx); white-space: nowrap;
  transition: background .15s, color .15s, opacity .15s;
}
.sh-btn--primary { background: var(--primary); color: var(--primary-ink); font-weight: 700; }
.sh-btn--primary:hover { background: var(--primary-hi); }
.sh-btn--ghost:hover { background: var(--surface-hi); }
.sh-btn--soft { background: var(--surface-hi); }
.sh-btn--soft:hover { background: var(--surface-top); }
.sh-btn--lg {
  height: 48px; padding: 8px 22px; border-radius: var(--r-md); font-size: 16px; font-weight: 700;
}

.sh-i { flex: none; }

/* ═══ ۴ · پوسته ═══════════════════════════════════════════════════════ */

.sh-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.sh-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* ── ریل عمودی راست — 60px، bg #281937، آیتم 40×40 شعاع 8 ───────────── */
.sh-rail {
  flex: none; width: var(--rail-w); align-self: stretch;
  position: sticky; top: 0; height: 100vh;
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center;
  padding: 4px; gap: 4px; z-index: 30;
}
.sh-rail__toggle {
  width: 40px; height: 40px; flex: none; border: 0; background: transparent;
  border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  color: var(--tx); cursor: pointer;
}
.sh-rail__toggle:hover { background: var(--surface-hi); }
.sh-rail__nav {
  flex: 1 1 auto; width: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  scrollbar-width: none;
}
.sh-rail__nav::-webkit-scrollbar { display: none; }
.sh-rail__group { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.sh-rail__group + .sh-rail__group { border-top: 1px solid var(--line); padding-top: 4px; }
.sh-rail__item {
  width: 46px; height: 40px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--tx); transition: background .15s, color .15s;
}
.sh-rail__item:hover { background: var(--surface-hi); }
.sh-rail__item.is-active { background: var(--surface-hi); color: var(--primary); }
.sh-rail__lang {
  flex: none; width: 48px; height: 48px; margin-top: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--tx-dim); letter-spacing: .04em;
}

/* ── نوار بالا — 48px، sticky، grid 1fr 0 1fr ────────────────────────── */
.sh-nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h); background: var(--surface);
  padding: 0 16px; display: grid; grid-template-columns: 1fr 0 1fr; gap: 4px;
  align-items: center;
}
.sh-nav__gap { width: 0; }
.sh-nav__side { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sh-nav__side--end { justify-content: flex-start; gap: 12px; }
.sh-nav__side--start { justify-content: flex-end; }

.sh-nav__logo { display: flex; align-items: center; border-radius: var(--r-sm); }
.sh-nav__logo img { width: 100px; height: 32px; object-fit: contain; }

.sh-nav__item {
  display: inline-flex; align-items: center; gap: 4px; height: 32px;
  padding: 4px 10px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500;
  color: var(--tx); transition: background .15s, color .15s;
}
.sh-nav__item:hover { background: var(--surface-hi); }
.sh-nav__item.is-active { background: var(--surface-hi); color: var(--primary); }

/* دکمه‌ی سبز «ژتون» — گرادیان و حاشیه‌ی خودِ مرجع، با تصویر کادوی بیرون‌زده */
.sh-nav__bonus {
  position: relative; display: inline-flex; align-items: center; height: 32px;
  padding: 4px 10px 4px 40px; border-radius: var(--r-sm);
  background: linear-gradient(0deg, var(--bonus-from), var(--bonus-from));
  border: 1px solid var(--bonus-border); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.sh-nav__bonus:hover { filter: brightness(1.12); }
.sh-nav__bonus img {
  position: absolute; inset-inline-start: 0; top: -5px; width: 42px; height: 42px;
  pointer-events: none;
}

/* ── جست‌وجو ─────────────────────────────────────────────────────────── */
.sh-search { position: relative; display: flex; align-items: center; }
.sh-search__btn {
  width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--r-xs);
  background: var(--surface-hi); color: var(--tx);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sh-search__btn:hover { background: var(--surface-top); }
.sh-search__form {
  display: flex; align-items: center; width: 0; overflow: hidden;
  transition: width .22s ease; height: 32px;
}
.sh-search.is-open .sh-search__form { width: 240px; }
.sh-search.is-open .sh-search__btn { display: none; }
.sh-search__input {
  flex: 1 1 auto; min-width: 0; height: 32px;
  background: var(--bg); border: 1px solid var(--line); border-inline-end: 0;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  color: var(--tx); font: inherit; font-size: 12px; padding: 0 10px;
}
.sh-search__input::placeholder { color: var(--tx-soft); }
.sh-search__go {
  flex: none; width: 46px; height: 32px; border: 0;
  border-radius: var(--r-xs) 0 0 var(--r-xs);
  background: var(--primary); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sh-search__out {
  position: absolute; top: 40px; inset-inline-start: 0; width: 280px; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 6px; max-height: 320px; overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.sh-search__hit {
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--r-sm);
  font-size: 12px;
}
.sh-search__hit:hover, .sh-search__hit:focus-visible { background: var(--surface-hi); }
.sh-search__hit img { width: 32px; height: 43px; border-radius: var(--r-xs); object-fit: cover; }
.sh-search__none { padding: 10px; font-size: 12px; color: var(--tx-dim); }

/* ── نوار پایین موبایل — 64px، خانه‌ی وسط برجسته ──────────────────────── */
.sh-tab { display: none; }
.sh-drawer { display: none; }

/* ═══ ۵ · کانتینر و بخش‌ها ════════════════════════════════════════════ */

.sh-main {
  flex: 1 1 auto; width: 100%; max-width: var(--container); margin: 0 auto;
  padding: var(--gut) var(--gut) var(--gut);
  display: flex; flex-direction: column; gap: var(--gut);
}

/* ═══ ۶ · اسلایدر ════════════════════════════════════════════════════
 * مرجع از embla استفاده می‌کند: ریل افقی با اسکرول‌اسنپ و نقطه‌های زیر آن.
 * اینجا با scroll-snap بومی ساخته شده — بدون هیچ کتابخانه‌ای.            */

.sh-slider { position: relative; }
.sh-slider__rail {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.sh-slider__rail::-webkit-scrollbar { display: none; }
.sh-slider__slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }

.sh-dots {
  display: flex; justify-content: center; align-items: center; gap: 2px;
  height: 10px; margin-top: 8px;
}
.sh-dots button {
  width: 10px; height: 10px; margin: 0 5px; padding: 0; border: 0; border-radius: 100%;
  background: #808080; cursor: pointer; transition: background .15s;
}
.sh-dots button[aria-current="true"] { background: var(--primary); }

/* ── بنر اصلی — 1256×523 (نسبت 2.402)، شعاع 16 ─────────────────────────
 * متن روی بنر HTML واقعی است، نه بخشی از تصویر. یک پرده‌ی گرادیانی در سمت
 * متن، کنتراست را روی هر سه بنر — حتی بنر پس‌زمینه‌روشن — تضمین می‌کند.  */
.sh-hero .sh-slider__slide {
  position: relative; border-radius: var(--r); overflow: hidden;
}
.sh-hero img {
  width: 100%; aspect-ratio: 2.402 / 1; object-fit: cover; border-radius: var(--r);
}
.sh-hero .sh-slider__slide::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r);
  background: linear-gradient(to right, rgba(24,14,34,.96) 0%, rgba(24,14,34,.9) 24%, rgba(24,14,34,.45) 44%, transparent 60%);
}
.sh-hero__copy {
  position: absolute; inset-block: 0; left: 0;
  width: min(56%, 600px); padding: 0 clamp(20px, 3.4vw, 52px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 12px; text-align: right; pointer-events: none;
}
.sh-hero__h {
  font-size: clamp(24px, 3vw, 44px); font-weight: 700; line-height: 1.3; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.sh-hero__sub {
  font-size: clamp(12px, 1.05vw, 15px); font-weight: 300; line-height: 1.8;
  color: rgba(255,255,255,.88); max-width: 40ch;
}
.sh-hero__cta { display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; height: 44px; padding: 0 20px; border-radius: var(--r-md);
  background: var(--primary); color: var(--primary-ink); font-size: 14px; font-weight: 700;
}
.sh-hero .sh-slider__slide:hover .sh-hero__cta { background: var(--primary-hi); }

/* ── بنر عریض ثانویه — 1256×324 (نسبت 3.877) ─────────────────────────── */
.sh-wide img {
  width: 100%; aspect-ratio: 3.877 / 1; object-fit: cover; border-radius: var(--r);
}

/* ═══ ردیف خوش‌آمد + بنر ═══════════════════════════════════════════════
 * مرجع: دو خانه‌ی 624×259 با فاصله‌ی 8، سپس شش کارت 203×203.             */

.sh-intro {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap);
}
.sh-welcome {
  background: rgba(65,38,90,.5); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 48px; display: flex; flex-direction: column; justify-content: center;
  min-height: 259px;
}
.sh-welcome__h { font-size: 20px; font-weight: 500; line-height: 1.4; margin: 0; }
.sh-welcome__sub { font-size: 12px; font-weight: 300; color: var(--tx); margin: 0; }
.sh-welcome__tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding-top: 12px;
}
.sh-tile {
  height: 120px; border-radius: var(--r-md); background: var(--surface-hi);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--tx);
  transition: background .15s, transform .15s;
}
.sh-tile:hover { background: var(--surface-top); transform: translateY(-2px); }
.sh-tile img { width: 61px; height: 40px; object-fit: contain; }
.sh-tile .sh-i { color: var(--primary); }

.sh-promo-wide { border-radius: var(--r); overflow: hidden; display: block; position: relative; }
.sh-promo-wide img {
  width: 100%; height: 100%; min-height: 259px; object-fit: cover; border-radius: var(--r);
}

/* ترتیب DOM از چیدمان موبایل پیروی می‌کند (کارت خوش‌آمد اول، بنر دوم — عیناً
   مثل مرجع). روی دسکتاپ مرجع کارت خوش‌آمد سمت چپ است؛ در RTL یعنی خانه‌ی
   دوم گرید، پس با order جابه‌جا می‌شود نه با تغییر مارک‌آپ. */
@media (min-width: 900px) {
  .sh-intro > .sh-welcome { order: 2; }
}

/* ═══ ۷ · کارت‌های بازی ═══════════════════════════════════════════════ */

/* مربع 203×203 — ردیف زیر بنر خوش‌آمد */
.sh-sq {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap);
}
.sh-sq__card { position: relative; border-radius: var(--r); overflow: hidden; display: block; }
.sh-sq__card img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .25s;
}
.sh-sq__card:hover img { transform: scale(1.05); }
.sh-sq__card::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* کارت 3:4 — ردیف‌های لابی و نوار «همه‌ی بازی‌ها» */
.sh-card { position: relative; display: block; }
.sh-card__art {
  position: relative; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-hi);
}
.sh-card__art img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .25s;
}
.sh-card:hover .sh-card__art img { transform: scale(1.06); }
.sh-card__over {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(28,17,39,.62); opacity: 0; transition: opacity .18s;
}
.sh-card:hover .sh-card__over, .sh-card:focus-visible .sh-card__over { opacity: 1; }
.sh-card__play {
  width: 44px; height: 44px; border-radius: 100%; background: var(--primary);
  color: var(--primary-ink); display: flex; align-items: center; justify-content: center;
}
.sh-card__tag {
  position: absolute; top: 4px; inset-inline-end: 4px; z-index: 2;
  background: var(--primary); color: var(--primary-ink);
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: var(--r-xs);
}
.sh-card__name {
  display: block; font-size: 14px; font-weight: 700; text-align: center;
  margin-top: 8px; line-height: 1.5;
}
/* در مرجع، کارت داخل ردیف و شبکه فقط تصویر است و نام بازی درون خودِ هنر
   کارت نوشته شده. برچسب زیر کارت فقط در نوار افقی (معادل «آخرین بردها»)
   دیده می‌شود، همان‌جا که مرجع هم مبلغ را زیر کارت می‌گذارد. */
.sh-row__rail .sh-card__name,
.sh-row__rail .sh-card__meta,
.sh-grid .sh-card__name,
.sh-grid .sh-card__meta { display: none; }
.sh-card__meta {
  display: block; font-size: 10px; font-weight: 300; color: var(--tx-dim);
  text-align: center; line-height: 1.4;
}

/* کارت کاتالوگ — نشان گوشه و نام استودیو زیر تصویر، مثل مرجع */
.sh-card__tag--hot  { background: #ff7a29; color: #2a1200; }
.sh-card__tag--live { background: #e8203a; color: #fff; }
.sh-card__tag--new  { background: #2f7de1; color: #fff; }
.sh-card__prov {
  display: block; font-size: 10px; font-weight: 400; color: var(--tx-dim);
  text-align: center; margin-top: 6px; line-height: 1.4;
}
.sh-row__rail .sh-card--cat .sh-card__prov,
.sh-grid .sh-card--cat .sh-card__prov,
.sh-strip__rail .sh-card--cat .sh-card__prov { display: block; }

/* نوار افقی کارت‌ها — کارت 132px روی دسکتاپ، 85px روی موبایل */
.sh-strip { display: flex; flex-direction: column; gap: 24px; }
.sh-strip__head { display: flex; align-items: center; gap: 8px; height: 32px; }
.sh-strip__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700; line-height: 1.75; margin: 0;
}
.sh-strip__title .sh-i { color: var(--primary); }
.sh-strip__rail {
  display: flex; gap: 4px; overflow-x: auto; padding: 0 0 4px 4px;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.sh-strip__rail::-webkit-scrollbar { display: none; }
.sh-strip__rail > * { flex: 0 0 132px; scroll-snap-align: start; }

/* ═══ نوار دسته‌بندی (chip rail) ═══════════════════════════════════════ */
.sh-chips {
  display: flex; gap: var(--gap); overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.sh-chips::-webkit-scrollbar { display: none; }
.sh-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 8px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--tx); white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.sh-chip .sh-i { color: var(--primary); }
.sh-chip:hover { background: var(--surface-hi); }
.sh-chip.is-active {
  background: var(--surface-top); border-color: var(--line-hi); color: #fff;
}

/* ═══ ۸ · پنل لابی ════════════════════════════════════════════════════
 * مرجع: پنل bg #1c1127 شعاع 16 حاشیه 1px #341f47؛ سربرگ 72px bg #281937؛
 * جست‌وجو 280×48 شعاع 12؛ تب 48px شعاع 12، فعال bg #41265a حاشیه #50306e. */

.sh-lobby {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; gap: var(--gap); overflow: hidden;
}
.sh-lobby__head {
  background: var(--surface); padding: 12px;
  display: flex; align-items: center; gap: var(--gap);
}
.sh-lobby__search {
  flex: 0 0 280px; display: flex; align-items: center; height: 48px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.sh-lobby__search button {
  flex: none; width: 30px; height: 46px; border: 0; background: transparent;
  color: var(--tx-dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding-inline-start: 8px;
}
.sh-lobby__search input {
  flex: 1 1 auto; min-width: 0; height: 46px; border: 0; background: transparent;
  color: var(--tx); font: inherit; font-size: 12px; padding: 0 8px;
}
.sh-lobby__search input::placeholder { color: var(--tx-soft); }
.sh-lobby__tabs {
  flex: 1 1 auto; min-width: 0; display: flex; gap: var(--gap);
  overflow-x: auto; scrollbar-width: none;
}
.sh-lobby__tabs::-webkit-scrollbar { display: none; }
.sh-tab-link {
  flex: none; display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  min-width: 80px; height: 48px; padding: 8px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent;
  font-size: 12px; font-weight: 500; color: var(--tx); white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.sh-tab-link .sh-i { color: var(--tx-dim); }
.sh-tab-link:hover { background: var(--surface-hi); }
.sh-tab-link.is-active {
  background: var(--surface-top); border-color: var(--line-hi); color: #fff;
}
.sh-tab-link.is-active .sh-i { color: var(--primary); }

.sh-lobby__body { padding: 0 8px 8px; }
.sh-lobby__inner { display: flex; flex-direction: column; gap: var(--gut); padding: var(--gut); }

/* ── یک ردیف بازی داخل لابی ──────────────────────────────────────────── */
.sh-row { display: flex; flex-direction: column; gap: var(--gut); }
.sh-row__head { display: flex; align-items: center; gap: var(--gap); height: 32px; }
.sh-row__title {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 16px; font-weight: 700; line-height: 1.6;
}
.sh-row__title .sh-i { color: var(--primary); }
.sh-row__tools { margin-inline-end: auto; display: flex; align-items: center; gap: var(--gap); }
.sh-row__arrow {
  width: 38px; height: 32px; border: 0; border-radius: var(--r-sm);
  background: var(--surface-hi); color: var(--tx);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sh-row__arrow:hover:not(:disabled) { background: var(--surface-top); }
.sh-row__arrow:disabled { background: var(--arrow-off); opacity: .55; cursor: default; }
.sh-row__all {
  height: 32px; padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--surface-hi); font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center;
}
.sh-row__all:hover { background: var(--surface-top); }
.sh-row__rail {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; scroll-behavior: smooth;
}
.sh-row__rail::-webkit-scrollbar { display: none; }
.sh-row__rail > * { flex: 0 0 145px; scroll-snap-align: start; }

/* ── شبکه‌ی بازی‌ها (صفحه‌های دسته و هاب) ─────────────────────────────── */
.sh-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--gap);
}

/* ═══ کارت‌های تبلیغی — 413×380، تصویر 395×218، دکمه 48px ════════════ */
.sh-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.sh-pcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
}
.sh-pcard__img {
  width: 100%; aspect-ratio: 1.812 / 1; object-fit: cover; border-radius: var(--r-md);
}
.sh-pcard__body {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; text-align: center; padding: 8px 4px;
}
.sh-pcard__h { font-size: 24px; font-weight: 500; line-height: 1.5; margin: 0; }
.sh-pcard__sub { font-size: 12px; font-weight: 300; margin: 0; color: var(--tx); }

/* ═══ سربرگ صفحه‌ی بازی کاتالوگ ═══════════════════════════════════════
 * کارت واقعی بازی سمت راست، جدول مشخصات سمت چپ — همان زبان بصری کارت‌های
 * لابی، فقط در اندازه‌ی بزرگ‌تر. */
.sh-ghead {
  display: grid; grid-template-columns: 260px 1fr; gap: 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px;
}
.sh-ghead__art { position: relative; border-radius: var(--r-md); overflow: hidden; }
.sh-ghead__art img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sh-ghead__art .sh-card__tag { top: 8px; inset-inline-end: 8px; font-size: 12px; padding: 4px 8px; }
.sh-ghead__meta { display: flex; flex-direction: column; justify-content: center; gap: 16px; }

.sh-facts { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
.sh-facts > div {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.sh-facts dt { flex: none; font-size: 12px; color: var(--tx-dim); min-width: 88px; }
.sh-facts dd { margin: 0; font-size: 14px; font-weight: 500; }
.sh-facts dd a { color: var(--primary); }

/* کارت «نسخه‌ی رایگان» — تنها جای سایت که کارت افقی است، چون یک CTA است */
.sh-freecard {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center;
  background: var(--surface-hi); border: 1px solid var(--line-hi);
  border-radius: var(--r-md); padding: 12px; transition: background .15s;
}
.sh-freecard:hover { background: var(--surface-top); }
.sh-freecard > img { width: 180px; height: 167px; object-fit: cover; border-radius: var(--r-sm); }
.sh-freecard__b { display: flex; flex-direction: column; gap: 6px; }
.sh-freecard__t { font-size: 18px; font-weight: 700; }
.sh-freecard__d { font-size: 13px; font-weight: 300; color: var(--tx-dim); }
.sh-freecard__cta {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 4px; height: 36px; padding: 0 16px; border-radius: var(--r-sm);
  background: var(--primary); color: var(--primary-ink); font-size: 13px; font-weight: 700;
}

/* ═══ ۹ · بلوک مقاله و پنل محتوا ═════════════════════════════════════ */

.sh-panel {
  border-radius: var(--r); padding: var(--gut); display: flex; flex-direction: column;
  gap: var(--gut); background: transparent;
}
.sh-panel--solid { background: var(--surface); border: 1px solid var(--line); padding: 24px; }

.sh-article { position: relative; }
.sh-article__body { font-size: 14px; font-weight: 300; }
.sh-article__body h2 { font-size: 16px; font-weight: 700; margin: 18px 0 6px; }
.sh-article__body h3 { font-size: 14px; font-weight: 700; margin: 16px 0 4px; }
.sh-article__body p { margin: 0 0 12px; }
.sh-article__body ul, .sh-article__body ol { margin: 0 0 12px; padding-inline-start: 20px; }
.sh-article__body li { margin-bottom: 6px; }
.sh-article__body a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

.sh-article__clip {
  max-height: 496px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.sh-article.is-open .sh-article__clip {
  max-height: none; -webkit-mask-image: none; mask-image: none;
}
.sh-article__more {
  align-self: flex-start; border: 0; background: transparent; cursor: pointer;
  color: var(--link); font-size: 12px; padding: 0; height: 20px;
}

/* ═══ ۱۰ · فوتر ═══════════════════════════════════════════════════════ */

.sh-foot {
  background: var(--surface); padding-top: 24px; margin-top: var(--gut);
  display: flex; flex-direction: column; gap: 24px;
}
.sh-foot__top {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: flex; flex-direction: column; gap: 24px;
}
.sh-foot__badge-row { display: flex; justify-content: center; }
.sh-foot__badge {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--primary); font-size: 14px; font-weight: 700;
}
.sh-foot__badge:hover { background: var(--surface-hi); }

.sh-foot__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0 8px;
}
.sh-foot__col { display: flex; flex-direction: column; gap: 8px; }
.sh-foot__h { font-size: 14px; font-weight: 500; margin: 0; line-height: 22px; }
.sh-foot__link {
  font-size: 12px; font-weight: 300; color: var(--tx); line-height: 32px;
  border-radius: var(--r-sm);
}
.sh-foot__link:hover { color: var(--primary); }
.sh-foot__link.is-active { color: var(--primary); }

.sh-foot__band { position: relative; }
.sh-foot__strip-art {
  width: 100%; height: 40px; object-fit: cover; object-position: center bottom;
  opacity: .28; filter: saturate(.5);
}
.sh-foot__strip { background: var(--surface-hi); }
.sh-foot__strip-in {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 12px 16px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap);
}
.sh-foot__tile {
  height: 68px; border-radius: var(--r-sm); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--tx); transition: background .15s;
}
.sh-foot__tile .sh-i { color: var(--primary); }
.sh-foot__tile:hover { background: var(--surface-top); }

.sh-foot__bottom {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: flex; flex-direction: column; gap: 24px;
}
.sh-foot__social {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.sh-foot__social hr {
  width: 120px; height: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); margin: 0;
}
.sh-foot__social > span { font-size: 12px; font-weight: 500; }
.sh-foot__social-row { display: flex; gap: 24px; padding-bottom: 12px; }
.sh-foot__social-btn {
  width: 32px; height: 32px; border-radius: 100%; background: var(--surface-hi);
  display: flex; align-items: center; justify-content: center; color: var(--primary);
}
.sh-foot__social-btn:hover { background: var(--surface-top); }

.sh-foot__logo-row { display: flex; justify-content: center; padding: 24px 0; }
.sh-foot__logo-row img { width: 180px; height: 48px; object-fit: contain; }

.sh-foot__note { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.sh-foot__note p { font-size: 12px; font-weight: 400; color: var(--tx-dim); margin: 0; text-align: center; }
.sh-foot__note-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-foot__age {
  width: 54px; height: 54px; flex: none; border-radius: 100%;
  border: 1px solid var(--ring18); display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--tx-dim);
}
.sh-foot__safe {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: var(--r-sm); color: var(--primary); font-size: 12px; font-weight: 500;
}
.sh-foot__safe:hover { background: var(--surface-hi); }

.sh-foot__copy {
  background: var(--surface-hi); padding: 24px; text-align: center;
  font-size: 12px; font-weight: 300; color: var(--tx-dim);
}

/* ═══ ۱۱ · صفحه‌ی بازی ════════════════════════════════════════════════ */

.sh-game { display: flex; flex-direction: column; gap: var(--gut); }
.sh-game__bar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 16px; display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap;
}
.sh-game__title { font-size: 20px; font-weight: 500; margin: 0; line-height: 1.4; }
.sh-game__tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--gap); }
.sh-stage-wrap {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px; overflow: hidden;
}
#sh-stage { border-radius: var(--r-md); overflow: hidden; font-family: var(--hb-font); }
#sh-stage :where(a) { text-decoration: none; }

.sh-stage-wrap.is-full {
  position: fixed; inset: 0; z-index: 120; border-radius: 0; border: 0;
  padding: 0; overflow: auto; background: var(--bg);
}
.sh-stage-wrap.is-full #sh-stage { border-radius: 0; }
.sh-fullbar {
  display: none; position: sticky; top: 0; z-index: 2;
  background: var(--surface); padding: 8px 12px;
  align-items: center; justify-content: space-between; gap: 8px;
}
.sh-stage-wrap.is-full .sh-fullbar { display: flex; }

/* ═══ ۱۲ · صفحه‌های محتوایی ═══════════════════════════════════════════ */

.sh-page { display: flex; flex-direction: column; gap: var(--gut); }
.sh-page__head { padding: 4px 0 0; }

.sh-crumb ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0; padding: 0; font-size: 12px; color: var(--tx-dim);
}
.sh-crumb li + li::before { content: "‹"; margin-inline-end: 6px; color: var(--tx-soft); }
.sh-crumb a:hover { color: var(--primary); }
.sh-crumb [aria-current="page"] { color: var(--tx); }

.sh-prose { font-size: 14px; font-weight: 300; }
.sh-prose h2 { font-size: 20px; font-weight: 500; margin: 24px 0 8px; }
.sh-prose h3 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.sh-prose p { margin: 0 0 12px; }
.sh-prose ul, .sh-prose ol { margin: 0 0 12px; padding-inline-start: 20px; }
.sh-prose li { margin-bottom: 6px; }
.sh-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.sh-prose strong { font-weight: 700; }

.sh-faq__list { display: flex; flex-direction: column; gap: var(--gap); }
.sh-faq__item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 16px;
}
.sh-faq__item summary {
  cursor: pointer; font-size: 14px; font-weight: 500; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sh-faq__item summary::-webkit-details-marker { display: none; }
.sh-faq__item summary::after {
  content: "+"; color: var(--primary); font-size: 18px; line-height: 1; flex: none;
}
.sh-faq__item[open] summary::after { content: "−"; }
.sh-faq__a { font-size: 14px; font-weight: 300; padding-top: 8px; }
.sh-faq__a p { margin: 0 0 8px; }
.sh-faq__a a { color: var(--link); }

.sh-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.sh-note {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px;
}
.sh-note h3 { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.sh-note p { font-size: 12px; font-weight: 300; margin: 0; color: var(--tx); }

.sh-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.sh-field { display: flex; flex-direction: column; gap: 6px; }
.sh-field label { font-size: 12px; font-weight: 500; }
.sh-field input, .sh-field textarea, .sh-field select {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--tx); font: inherit; font-size: 14px; padding: 10px 12px; min-height: 44px;
}
.sh-field textarea { min-height: 120px; resize: vertical; }
.sh-field input:focus, .sh-field textarea:focus, .sh-field select:focus {
  outline: 2px solid var(--primary); outline-offset: 1px;
}
.sh-field__err { font-size: 12px; color: #ff8f7a; min-height: 0; }
.sh-field.is-bad input, .sh-field.is-bad textarea { border-color: #ff8f7a; }
.sh-form__ok {
  display: flex; align-items: center; gap: 8px;
  background: rgba(32,144,3,.16); border: 1px solid var(--bonus-border);
  border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px;
}
.sh-form__ok .sh-i { color: var(--bonus-border); }

/* ═══ ریسپانسیو ═══════════════════════════════════════════════════════
 * چیدمان موبایل مرجع جدا اندازه‌گیری شده و «دسکتاپِ کوچک‌شده» نیست:
 *   ریل حذف · هدر فقط لوگوی نشان + دو دکمه · نوار پایین ۵خانه‌ای ظاهر
 *   می‌شود · بنر تمام‌عرض بدون شعاع · کارت‌ها ۲ستونه · تب‌ها با فلش.     */

@media (max-width: 1279px) {
  .sh-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 1023px) {
  .sh-grid { grid-template-columns: repeat(4, 1fr); }
  .sh-sq { grid-template-columns: repeat(3, 1fr); }
  .sh-foot__strip-in { grid-template-columns: repeat(3, 1fr); }
  .sh-welcome { padding: 16px 24px; }
}

@media (max-width: 899px) {
  .sh-rail { display: none; }
  .sh-nav__side--end { gap: 8px; }
  .sh-nav__item span { display: none; }
  .sh-nav__item { padding: 4px 8px; }
  .sh-cards { grid-template-columns: 1fr; }
  .sh-intro { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  body.sh-body { padding-bottom: var(--tab-h); }

  /* هدر موبایل — نشان 32×32 راست، «راهنما» و «بازی رایگان» چپ */
  .sh-nav { grid-template-columns: 1fr 0 1fr; padding: 0 16px; }
  .sh-nav__side--end > .sh-nav__item,
  .sh-nav__side--end > .sh-nav__bonus { display: none; }
  .sh-nav__logo img { width: 32px; height: 32px; content: url('/assets/img/sh-mark.png'); }
  .sh-search { display: none; }

  .sh-main { padding: 0 0 var(--gut); gap: var(--gut); max-width: 100%; }
  .sh-main > * { margin-inline: var(--gut); }
  /* بنر اصلی روی موبایل تمام‌عرض و بدون شعاع است — عیناً مثل مرجع.
     ⚠️ متن بنر روی صفحه‌ی باریک در نسبت 2.39 جا نمی‌شد و بریده می‌شد؛
     پس روی موبایل بنر کمی بلندتر می‌شود، برش تصویر از سمت چپ (پنل خالی)
     انجام می‌گیرد تا هنر سالم بماند، و متن پایین‌چین با پرده‌ی عمودی
     می‌نشیند. توضیح: در مرجع متن داخل خودِ تصویر پخته شده و این مسئله
     را ندارد. */
  .sh-main > .sh-hero { margin-inline: 0; }
  .sh-hero .sh-slider__slide, .sh-hero img { border-radius: 0; }
  .sh-hero img { aspect-ratio: 1.85 / 1; object-position: right center; }
  .sh-hero .sh-slider__slide::before {
    border-radius: 0;
    background: linear-gradient(to top, rgba(24,14,34,.96) 0%, rgba(24,14,34,.78) 42%, rgba(24,14,34,.2) 70%, transparent 100%);
  }
  .sh-hero__copy {
    inset-block: auto 0; left: 0; right: 0; width: auto;
    justify-content: flex-end; padding: 0 16px 14px; gap: 8px;
  }
  .sh-hero__h { font-size: 19px; line-height: 1.4; }
  .sh-hero__sub { font-size: 11px; line-height: 1.6; max-width: 34ch; }
  .sh-hero__cta { height: 36px; padding: 0 16px; font-size: 12px; margin-top: 0; }

  .sh-welcome { padding: 8px; min-height: 0; }
  .sh-welcome__tiles { gap: 8px; }
  .sh-tile { height: 79px; font-size: 10px; gap: 4px; }
  .sh-tile img { width: 31px; height: 20px; }
  .sh-promo-wide img { min-height: 0; aspect-ratio: 2.407 / 1; }

  .sh-sq { grid-template-columns: repeat(2, 1fr); }
  .sh-grid { grid-template-columns: repeat(3, 1fr); }

  .sh-strip { gap: 16px; }
  .sh-strip__rail > * { flex-basis: 85px; }
  .sh-strip__title { font-size: 16px; }
  .sh-card__name { font-size: 12px; margin-top: 6px; }

  .sh-lobby__head { flex-direction: column; align-items: stretch; }
  .sh-lobby__search { flex: none; width: 100%; order: 1; }
  .sh-lobby__tabs { order: 2; }
  .sh-lobby__inner { padding: 8px; gap: 16px; }
  .sh-row__rail > * { flex-basis: 103px; }
  .sh-row__title { font-size: 14px; }

  .sh-wide img { aspect-ratio: 2.6 / 1; }
  .sh-pcard__h { font-size: 20px; }

  .sh-h1 { font-size: 22px; }
  .sh-panel__h { font-size: 20px; }
  .sh-panel { padding: 0; }
  .sh-panel--solid { padding: 16px; }

  .sh-foot__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sh-foot__strip-in { grid-template-columns: repeat(2, 1fr); }
  .sh-foot__note { padding: 12px 0; }
  .sh-foot__note-row { flex-direction: column; gap: 12px; }
  .sh-notes { grid-template-columns: 1fr; }
  .sh-ghead { grid-template-columns: 1fr; gap: 16px; padding: 12px; }
  .sh-ghead__art { max-width: 220px; margin-inline: auto; }
  .sh-facts { grid-template-columns: 1fr; gap: 0; }
  .sh-freecard { grid-template-columns: 1fr; }
  .sh-freecard > img { width: 100%; height: auto; aspect-ratio: 844 / 783; }
  .sh-game__bar { padding: 10px 12px; }
  .sh-game__title { font-size: 16px; }

  /* نوار پایین موبایل */
  .sh-tab {
    display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    height: var(--tab-h); background: var(--surface); padding: 8px 4px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .sh-tab__grid {
    display: grid; grid-template-columns: 1fr 1fr 108px 1fr 1fr; height: 48px;
  }
  .sh-tab__cell { position: relative; }
  .sh-tab__btn {
    width: 100%; height: 48px; border: 0; background: transparent;
    border-radius: var(--r-sm); cursor: pointer;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 6px 0; color: var(--tx); font-size: 10px; font-weight: 700;
  }
  .sh-tab__btn.is-active { color: var(--primary); }
  .sh-tab__btn--raised {
    position: absolute; inset-inline: 0; top: -16px; height: 64px;
    background: var(--surface-hi);
    border: 1px solid var(--surface-top); border-bottom: 0;
    border-radius: 24px 24px 0 0; padding: 12px 16px 6px;
  }

  /* کشوی موبایل */
  .sh-drawer {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(0,0,0,.55);
  }
  .sh-drawer[hidden] { display: none; }
  .sh-drawer__panel {
    position: absolute; inset-block: 0; inset-inline-end: 0; width: min(320px, 86vw);
    background: var(--surface); display: flex; flex-direction: column;
    padding: 12px; gap: 12px; overflow-y: auto;
    animation: sh-slide-in .2s ease;
  }
  @keyframes sh-slide-in { from { transform: translateX(-100%); } to { transform: none; } }
  [dir="rtl"] .sh-drawer__panel { animation-name: sh-slide-in-rtl; }
  @keyframes sh-slide-in-rtl { from { transform: translateX(100%); } to { transform: none; } }
  .sh-drawer__head { display: flex; align-items: center; justify-content: space-between; }
  .sh-drawer__close {
    width: 40px; height: 40px; border: 0; background: var(--surface-hi);
    border-radius: var(--r-sm); color: var(--tx);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .sh-drawer__nav { display: flex; flex-direction: column; gap: 4px; }
  .sh-drawer__item {
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px;
    border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
  }
  .sh-drawer__item .sh-i { color: var(--tx-dim); }
  .sh-drawer__item:hover, .sh-drawer__item.is-active { background: var(--surface-hi); }
  .sh-drawer__item.is-active { color: var(--primary); }
  .sh-drawer__item.is-active .sh-i { color: var(--primary); }
}

@media (max-width: 479px) {
  .sh-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-nav__cta { font-size: 11px; padding: 4px 8px; }
  .sh-tab__grid { grid-template-columns: 1fr 1fr 92px 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}