/* ===========================================================================
   چوگان — سیستم طراحی مشترک
   همه‌ی صفحه‌ها و بازی‌ها فقط از توکن‌های همین فایل استفاده می‌کنند.
   هیچ رنگ یا اندازه‌ی خامی داخل بازی‌ها نوشته نمی‌شود.
   =========================================================================== */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-variable.woff2') format('woff2-variations'),
       url('../fonts/vazirmatn-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- توکن‌ها */
:root {
  color-scheme: light;

  /* پالت پاستلی گرم */
  --c-bg:          #FBF6EF;
  --c-bg-tint:     #F4EADD;
  --c-surface:     #FFFFFF;
  --c-surface-2:   #F7F1E8;
  --c-surface-3:   #EFE6D9;
  --c-line:        #E7DACA;
  --c-text:        #2C2620;
  --c-text-dim:    #7C7063;
  --c-text-faint:  #A99C8C;

  --c-accent:      #E07A5F;
  --c-accent-soft: #FBE7DF;
  --c-accent-ink:  #FFFFFF;

  --c-good:        #5C9A6B;
  --c-good-soft:   #E1F0E4;
  --c-warn:        #C8912F;
  --c-warn-soft:   #F8EDD6;
  --c-bad:         #C8574B;
  --c-bad-soft:    #FAE3E0;
  --c-gold:        #D9A441;

  /* رده‌های لیگ */
  --c-tier-1: #B08050;
  --c-tier-2: #9AA3AB;
  --c-tier-3: #D9A441;
  --c-tier-4: #6BB6C4;
  --c-tier-5: #A57BD1;

  /* شعاع */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* فاصله */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* سایه‌ی نرم و گرم */
  --sh-1: 0 1px 2px rgba(78, 58, 38, .06), 0 2px 6px rgba(78, 58, 38, .05);
  --sh-2: 0 2px 6px rgba(78, 58, 38, .07), 0 8px 20px rgba(78, 58, 38, .07);
  --sh-3: 0 6px 14px rgba(78, 58, 38, .09), 0 18px 40px rgba(78, 58, 38, .10);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* تایپوگرافی */
  --f: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 42px;

  /* حرکت */
  --t-fast: 120ms;
  --t-mid: 220ms;
  --t-slow: 360ms;
  --ease: cubic-bezier(.2, .8, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  /* چیدمان */
  --w-page: 560px;
  --w-wide: 900px;
  --nav-h: 62px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* پیش‌فرض روشن است؛ تاریک فقط زیر مدیا یا با انتخاب دستی */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg:          #15120E;
    --c-bg-tint:     #1D1913;
    --c-surface:     #211C16;
    --c-surface-2:   #2A241C;
    --c-surface-3:   #342C22;
    --c-line:        #3A3128;
    --c-text:        #F4EEE4;
    --c-text-dim:    #A99C8B;
    --c-text-faint:  #7C7162;
    --c-accent:      #E8917A;
    --c-accent-soft: #3A2620;
    --c-accent-ink:  var(--game-ink-dark, #201410);
    --c-good:        #7ABE8A;
    --c-good-soft:   #24301F;
    --c-warn:        #DFB45E;
    --c-warn-soft:   #33291A;
    --c-bad:         #E0796C;
    --c-bad-soft:    #362020;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .25);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .3);
    --sh-3: 0 6px 14px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .38);
    --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:          #15120E;
  --c-bg-tint:     #1D1913;
  --c-surface:     #211C16;
  --c-surface-2:   #2A241C;
  --c-surface-3:   #342C22;
  --c-line:        #3A3128;
  --c-text:        #F4EEE4;
  --c-text-dim:    #A99C8B;
  --c-text-faint:  #7C7162;
  --c-accent:      #E8917A;
  --c-accent-soft: #3A2620;
  --c-accent-ink:  var(--game-ink-dark, #201410);
  --c-good:        #7ABE8A;
  --c-good-soft:   #24301F;
  --c-warn:        #DFB45E;
  --c-warn-soft:   #33291A;
  --c-bad:         #E0796C;
  --c-bad-soft:    #362020;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .25);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .3);
  --sh-3: 0 6px 14px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .38);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ------------------------------------------------------------------ پایه */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f);
  font-size: var(--fs-md);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body.ch-noscroll {
  overflow: hidden;
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* In the installed app a drag or Ctrl+A painted the menu's titles and the
   bottom bar selection-blue, which no native app does (#208). Fields stay
   selectable so a name can still be edited and pasted. */
body.ch-menu { -webkit-user-select: none; user-select: none; }
body.ch-menu input, body.ch-menu textarea, body.ch-menu [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0; }
a  { color: var(--c-accent); text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.ch-dim   { color: var(--c-text-dim); }
.ch-faint { color: var(--c-text-faint); }
.ch-sm    { font-size: var(--fs-sm); }
.ch-xs    { font-size: var(--fs-xs); }
.ch-bold  { font-weight: 800; }
.ch-num   { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.ch-center { text-align: center; }
.ch-hidden { display: none !important; }
.ch-row   { display: flex; align-items: center; gap: var(--s-3); }
.ch-col   { display: flex; flex-direction: column; gap: var(--s-3); }
.ch-grow  { flex: 1; min-width: 0; }
.ch-wrap  { flex-wrap: wrap; }

/* --------------------------------------------------------------- چیدمان */
.ch-page {
  max-width: var(--w-page);
  margin: 0 auto;
  padding:
    calc(var(--s-4) + var(--safe-t))
    calc(var(--s-4) + var(--safe-r))
    calc(var(--nav-h) + var(--s-7) + var(--safe-b))
    calc(var(--s-4) + var(--safe-l));
}
.ch-page--wide { max-width: var(--w-wide); }
.ch-page--flat { padding-bottom: calc(var(--s-6) + var(--safe-b)); }

.ch-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
/* دکمه‌ی تمام‌صفحه کنار سکه‌ها، فقط جایی که مرورگر پشتیبانی می‌کند */
.ch-head .ch-iconbtn { flex: none; }
.ch-head__title { flex: 1; min-width: 0; }
.ch-head h1 { font-size: var(--fs-2xl); }
.ch-head p { color: var(--c-text-dim); font-size: var(--fs-sm); }

.ch-section { margin-bottom: var(--s-6); }
.ch-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.ch-section__head h2 { font-size: var(--fs-lg); }
/* Category chips over the menu's games, and the heading of each category in All (#283) */
.ch-cats { margin-bottom: var(--s-4); }
/* five chips: with the default padding the Spanish row broke onto a second line at 390px and
   360px. Two classes, so it wins over .ch-seg button further down. */
.ch-seg.ch-cats button { padding-inline: 10px; }
@media (max-width: 360px) { .ch-seg.ch-cats button { padding-inline: 7px; } }
.ch-cat__head { font-size: var(--fs-md); color: var(--c-text-dim); margin: var(--s-5) 0 var(--s-3); }
.ch-cats + .ch-cat__head { margin-top: 0; }
/* Search by name above the chips (#521). 16px text, or iOS zooms the page on focus;
   while a search is on, the chips step back because the results ignore them. */
.ch-search {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: 0 6px 0 14px; margin-bottom: var(--s-3); color: var(--c-text-dim);
  box-shadow: var(--sh-1);
}
.ch-search:focus-within { border-color: var(--c-accent); }
.ch-search > svg { flex: none; }
.ch-search__input {
  flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--fs-md); color: var(--c-text);
}
.ch-search__input::placeholder { color: var(--c-text-dim); opacity: 1; }
.ch-search__input::-webkit-search-cancel-button { display: none; }
.ch-search__clear {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--c-surface-2);
  color: var(--c-text-dim); display: grid; place-items: center; cursor: pointer;
}
.ch-search__clear[hidden] { display: none; }
.ch-cats--off { opacity: .45; }
.ch-search__none { color: var(--c-text-dim); text-align: center; padding: var(--s-6) 0; }

/* ------------------------------------------------------- playing cards */
/* Shared by the card games (#178). --pw is the card's width; a game sets it, or
   it falls back to the game's --cw. Cards are physical objects: same face in
   both themes except the frame colour. */
.ch-pcard {
  --pw: var(--cw, 56px);
  width: var(--pw); aspect-ratio: 5 / 7; border-radius: 8px; border: 1px solid var(--c-line);
  background: var(--ch-pface, var(--c-surface)); color: var(--c-text); font: inherit; padding: 0; cursor: pointer;
  position: relative; box-shadow: var(--sh-1); touch-action: manipulation;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ch-pcard[disabled] { cursor: default; }
.ch-pcard--red { color: var(--c-bad); }
/* In the dark theme a card's edge is light: a dark face with a dark line ran into the
   next card in a stack, and Spider's columns read as one block (#485) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-pcard { border-color: rgba(255, 255, 255, .42); } }
:root[data-theme="dark"] .ch-pcard { border-color: rgba(255, 255, 255, .42); }
.ch-pcard__r { position: absolute; top: 3px; left: 5px; font-weight: 800; font-size: calc(var(--pw) * .3); line-height: 1; }
.ch-pcard__s { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-size: calc(var(--pw) * .5); line-height: 1; }
.ch-pcard__mini { position: absolute; top: 3px; right: 5px; font-size: calc(var(--pw) * .24); line-height: 1; }
.ch-pcard__face { position: absolute; left: 6%; right: 6%; bottom: 4%; height: 68%; pointer-events: none; }
.ch-pcard__face svg { width: 100%; height: 100%; display: block; }
/* Card back: one of two Persian pictures (carpet, termeh) chosen by the player; the
   picture itself is set by Chogan.cards.applyBack so it is built once in JS (#181) */
.ch-pback {
  width: calc(var(--cw, 56px) * .62); aspect-ratio: 5 / 7; border-radius: 6px; box-sizing: border-box;
  border: 2px solid #FBF5E6;   /* the white margin of a printed card keeps stacked backs apart */
  background: #1F3A93 center / 100% 100% no-repeat; box-shadow: var(--sh-1);
}
.ch-pbackbtn .ch-pback { width: 20px; border-width: 1px; border-radius: 3px; box-shadow: none; }

/* ----------------------------------------------------------------- کارت */
.ch-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--s-4);
  border: 1px solid transparent;
}
.ch-card--flat { box-shadow: var(--sh-1); }
.ch-card--tint { background: var(--c-surface-2); box-shadow: none; border-color: var(--c-line); }

.ch-tap {
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
.ch-tap:active { transform: scale(.975); box-shadow: var(--sh-1); }

/* کارت بازی */
.ch-games { display: grid; gap: var(--s-3); }
@media (min-width: 620px) { .ch-games { grid-template-columns: 1fr 1fr; } }

.ch-game {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
}
.ch-game__icon {
  width: 62px; height: 62px;
  flex: 0 0 62px;
  border-radius: var(--r-md);
  background: var(--game-soft, var(--c-surface-2));
  display: grid; place-items: center;
  overflow: hidden;
}
.ch-game__icon svg, .ch-game__icon img { width: 100%; height: 100%; display: block; }
.ch-game__body { flex: 1; min-width: 0; }
.ch-game__name { font-weight: 800; font-size: var(--fs-lg); }
.ch-game__sum {
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-game__meta { display: flex; gap: var(--s-2); margin-top: var(--s-1); flex-wrap: wrap; }

/* کاشی‌های مربعی، پیش‌فرض خانه (#149): دو ستون روی گوشی، روی صفحه‌ی پهن هر چه جا شود */
.ch-games--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .ch-games--grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } }
.ch-games--grid .ch-game {
  flex-direction: column; justify-content: center; text-align: center;
  gap: var(--s-2); padding: var(--s-3); aspect-ratio: 1;
}
.ch-games--grid .ch-game__icon { width: 56px; height: 56px; flex: 0 0 56px; }
.ch-games--grid .ch-game__body { flex: 0 0 auto; width: 100%; }
.ch-games--grid .ch-game__name { font-size: var(--fs-md); line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.ch-games--grid .ch-game__meta { justify-content: center; }
.ch-games--grid .ch-game__meta:empty { display: none; }

/* Pin toggle on each menu card (#193). The 40px button sits in the card's
   top corner; outside the card padding so it never covers the name. */
.ch-game__pin {
  position: absolute; top: 2px; inset-inline-end: 2px; width: 40px; height: 40px; padding: 3px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent;
  background-clip: content-box; color: var(--c-text-dim); opacity: .6; cursor: pointer; z-index: 1;
}
/* An 18px pin at 1.9 stroke and 45% opacity read as a faint smudge on a
   173px card, and a pinned card looked almost unpinned (#289). */
.ch-game__pin svg { stroke-width: 2.2; }
.ch-game__pin:hover, .ch-game__pin:focus-visible { opacity: 1; }
.ch-game__pin--on { color: var(--game, var(--c-accent)); background-color: var(--game-soft, var(--c-surface-2)); opacity: 1; }
.ch-game__pin--on svg { fill: currentColor; fill-opacity: .35; }
.ch-games:not(.ch-games--grid) .ch-game { padding-inline-end: 44px; }
/* Profile game list (#292): one list instead of "Per game" plus a second list
   under "Erase data". It scrolls inside the card so the page stays short; the
   height cuts a row in half, which shows that there is more to scroll. */
.ch-pergame { max-height: 330px; overflow-y: auto; overscroll-behavior: contain; padding-block: 0; }
.ch-pergame__row {
  width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: start;
  cursor: pointer; touch-action: manipulation;
}
.ch-pergame__row:hover, .ch-pergame__row:focus-visible { background: var(--c-surface-2); }
.ch-pergame__icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; overflow: hidden; }
.ch-sheet__head { align-items: center; margin-bottom: var(--s-3); }
.ch-sheet__head .ch-game__icon { width: 56px; height: 56px; flex: 0 0 56px; }
.ch-sheet__head p { margin: 0; }
.ch-sheet__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.ch-sheet__stats .ch-stat b { font-size: var(--fs-md); overflow-wrap: anywhere; }
.ch-sheet__erase { border-top: 1px solid var(--c-line); padding-top: var(--s-3); margin-bottom: var(--s-2); }
.ch-sheet__erase p { margin: 0 0 var(--s-2); }
/* Recently played: up to three compact chips in one row */
.ch-recent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.ch-recent__item {
  display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 6px 10px;
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
  color: var(--c-text); font: inherit; font-weight: 700; font-size: var(--fs-sm); text-align: start; cursor: pointer;
}
.ch-recent__item img { width: 32px; height: 32px; flex: 0 0 32px; }
/* two lines, not an ellipsis: "Block Drop" was cut to "Block …" at 390px */
.ch-recent__name { min-width: 0; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- نشان‌ها */
.ch-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--c-surface-3);
  color: var(--c-text-dim);
  line-height: 1.8;
  white-space: nowrap;
}
.ch-badge--accent { background: var(--game-soft, var(--c-accent-soft)); color: var(--game, var(--c-accent)); }
.ch-badge--good   { background: var(--c-good-soft); color: var(--c-good); }
.ch-badge--warn   { background: var(--c-warn-soft); color: var(--c-warn); }
.ch-badge--bad    { background: var(--c-bad-soft); color: var(--c-bad); }
.ch-badge--gold   { background: var(--c-warn-soft); color: var(--c-gold); }

/* ----------------------------------------------------------------- دکمه */
.ch-btn {
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: var(--r-pill);
  padding: 0 var(--s-5);
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  cursor: pointer;
  background: var(--c-surface-2);
  color: var(--c-text);
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.ch-btn:active { transform: scale(.96); }
.ch-btn:disabled { opacity: .45; cursor: default; transform: none; }
.ch-btn--primary {
  background: var(--game, var(--c-accent));
  color: var(--c-accent-ink);
  box-shadow: var(--sh-2);
}
.ch-btn--ghost { background: transparent; color: var(--c-text-dim); }
.ch-btn--soft  { background: var(--game-soft, var(--c-accent-soft)); color: var(--game, var(--c-accent)); }
.ch-btn--danger { background: var(--c-bad-soft); color: var(--c-bad); }
.ch-btn--sm { min-height: 38px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.ch-btn--block { width: 100%; }
.ch-btn--icon { padding: 0; width: 48px; height: 48px; border-radius: var(--r-md); }

.ch-btn__ripple { position: relative; overflow: hidden; }

/* --------------------------------------------------------- نوار ناوبری */
.ch-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 6px calc(var(--s-2) + var(--safe-r)) calc(6px + var(--safe-b)) calc(var(--s-2) + var(--safe-l));
  background: var(--c-surface);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
}
.ch-nav__in { display: flex; width: 100%; max-width: var(--w-page); }
.ch-nav__item {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-text-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  min-height: 50px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: color var(--t-fast) var(--ease);
  touch-action: manipulation;
}
.ch-nav__item svg { width: 24px; height: 24px; display: block; transition: transform var(--t-mid) var(--ease-back); }
.ch-nav__item[aria-selected="true"] { color: var(--c-accent); }
.ch-nav__item[aria-selected="true"] svg { transform: translateY(-2px) scale(1.08); }
.ch-nav__item:active svg { transform: scale(.9); }

/* ------------------------------------------------- سربرگ داخل بازی‌ها */
.ch-gamebar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding:
    calc(var(--s-2) + var(--safe-t))
    calc(var(--s-3) + var(--safe-r))
    var(--s-2)
    calc(var(--s-3) + var(--safe-l));
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  flex: 0 0 auto;
  z-index: 10;
}
/* Installed desktop app with the title bar hidden (#344). The browser's
   title bar took a strip of the window, so the manifest asks for the window
   controls overlay; the minimise/maximise/close buttons then float over the
   page's top corner, on the left or the right depending on the OS. Everything
   that clears the top edge (menu, welcome, toasts) clears the controls' strip
   instead, and the game bar moves up into it, padded away from the controls on
   both sides. Its empty part drags the window, its buttons stay clickable.
   Scoped to the display mode, so phones, the Android app and browsers without
   the overlay are untouched. --tb-* exist so a test can stand in for env(). */
@media (display-mode: window-controls-overlay) {
  :root {
    --tb-h: env(titlebar-area-height, 0px);
    --tb-l: env(titlebar-area-x, 0px);
    --tb-r: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
  }
  :root, body { --safe-t: max(env(safe-area-inset-top, 0px), var(--tb-h)); }
  body.ch-menu::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--tb-h);
    background: var(--c-bg);
    z-index: 30;
    -webkit-app-region: drag;
    app-region: drag;
  }
  .ch-gamebar {
    padding:
      var(--s-2)
      calc(var(--s-3) + max(var(--safe-r), var(--tb-r)))
      var(--s-2)
      calc(var(--s-3) + max(var(--safe-l), var(--tb-l)));
    /* the controls are painted in theme-color, which is --c-bg */
    background: var(--c-bg);
    -webkit-app-region: drag;
    app-region: drag;
  }
  .ch-gamebar button, .ch-gamebar a, .ch-gamebar input, .ch-gamebar select {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}
.ch-gamebar__title {
  font-weight: 800;
  font-size: var(--fs-md);
  /* بدون این، نام بازی روی عددهای سربرگ سرریز می‌کرد */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-gamebar__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  min-width: 52px;
}
.ch-gamebar__stat b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.ch-gamebar__stat span { font-size: 10px; color: var(--c-text-faint); font-weight: 700; }

.ch-iconbtn {
  border: 0;
  background: var(--c-surface-2);
  color: var(--c-text);
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  touch-action: manipulation;
}
.ch-iconbtn:active { transform: scale(.92); }
.ch-iconbtn svg { width: 22px; height: 22px; }
.ch-iconbtn--plain { background: transparent; }
.ch-iconbtn--gold { background: var(--c-warn-soft); color: var(--c-gold); }
/* After the result window is closed with X (#306): the result and the next round,
   floating over the bottom of the finished board */
.ch-afterbar {
  position: fixed; z-index: 20; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 32px);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); display: flex; gap: var(--s-2);
  padding: var(--s-2); border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--sh-3, var(--sh-2));
  animation: ch-rise var(--t-mid) var(--ease) both;
}
.ch-afterbar .ch-btn { gap: 6px; }
/* "See the board" in the result window (#315) */
.ch-seeboard { display: flex; gap: 6px; margin: var(--s-3) auto 0; }
/* کلاس‌های خودمان display می‌گذارند و بر [hidden] مرورگر می‌چربند */
[hidden] { display: none !important; }
.ch-iconbtn[aria-pressed="true"] { background: var(--game-soft, var(--c-accent-soft)); color: var(--game, var(--c-accent)); }

/* روی صفحه‌های باریک، سربرگ بازی جا کم می‌آورد: دکمه‌ی بازگشت، نام بازی،
   دو سه عدد و دو سه دکمه. اول فضا را از عددها و فاصله‌ها می‌گیریم، و زیر
   ۳۸۰ پیکسل نام بازی کلاً کنار می‌رود — بریدنش به «س…» از نشان ندادنش بدتر
   است، و کاربر همین الان از منو آمده و می‌داند کدام بازی را باز کرده. */
@media (max-width: 420px) {
  .ch-gamebar { gap: 4px; padding-inline: 8px; }
  .ch-gamebar__stat { min-width: 44px; }
  .ch-iconbtn { width: 42px; height: 42px; }
}
@media (max-width: 380px) {
  .ch-gamebar__title { display: none; }
  .ch-gamebar__stat { min-width: 40px; }
  .ch-iconbtn { width: 40px; height: 40px; }
}

/* پوسته‌ی صفحه‌ی بازی */
.ch-gameroot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
}
.ch-gamemain {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) calc(var(--s-3) + var(--safe-r)) calc(var(--s-3) + var(--safe-b)) calc(var(--s-3) + var(--safe-l));
  gap: var(--s-3);
  overflow: hidden;
}
.ch-gamemain--scroll { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.ch-board { max-width: min(100%, 620px); width: 100%; }
/* Boards fill the screen they are on (#359). Most games stopped their board at a
   fixed 400-620px, so a 7-inch phone, a tablet or a laptop showed it in a third to
   a half of the screen. The game area is a size container named game, so a game
   can lay itself out by the room it really has (@container game, cqw/cqh), and
   .ch-fit is a slot that takes whatever height the game's other rows leave and
   holds the largest board of aspect --fit-ar (width / height) that fits there. */
.ch-gamemain { container: game / size; }
.ch-fit {
  flex: 1 1 0; min-height: 0; min-width: 0; align-self: stretch;
  container-type: size; display: grid; place-items: center;
  /* the one cell is the slot's own size, never its content's: an auto row grew to the
     canvas a game had drawn, and games that size their canvas by its box read that
     size back, so turning a phone kept the upright board and it ran off the screen
     (#474: Gorillas, Darts, Ludo, Snakes and Ladders, Chain Reaction, Bowling) */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  /* never taller than the board it holds, so in a tall window the other rows stay
     next to the board instead of being pushed to the edges */
  max-height: calc(100cqw / var(--fit-ar, 1));
}
.ch-fit > * { width: min(100cqw, 100cqh * var(--fit-ar, 1)); max-width: none; }
/* A game laid out around one board: its other rows stacked above and below the
   board in a tall window, and in a column beside it in a wide one, where the board
   can then use the full height. Children: the .ch-fit slot and a .ch-side with the
   other rows; a row marked .ch-above sits above the board when stacked. If the
   side column is ever taller than the window, it scrolls; the board never does. */
.ch-split {
  --side-w: clamp(240px, 28cqw, 380px);
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s-3);
}
.ch-split > .ch-side { display: contents; }
.ch-split > .ch-side > * { width: 100%; max-width: 560px; }
.ch-split .ch-above { order: -1; }
@container game (min-aspect-ratio: 5 / 4) {
  .ch-split { flex-direction: row; }
  .ch-split > .ch-fit {
    flex: 0 1 auto; height: 100%; max-height: none;
    width: min(100cqh * var(--fit-ar, 1), 100cqw - var(--side-w) - var(--s-3));
  }
  .ch-split > .ch-side {
    display: flex; flex-direction: column; justify-content: center; gap: var(--s-3);
    width: var(--side-w); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  }
  .ch-split .ch-above { order: 0; }
}

/* ---------------------------------------------------------------- سکه */
.ch-coin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--c-gold);
  background: var(--c-warn-soft);
  border-radius: var(--r-pill);
  padding: 4px 12px 4px 8px;
  font-size: var(--fs-sm);
}
[dir="rtl"] .ch-coin { padding: 4px 8px 4px 12px; }
.ch-coin svg { width: 18px; height: 18px; }

/* Tap the balance to read what coins are: local credits, not cash. */
.ch-gamebar .ch-coin--bar {
  flex: 0 0 auto;
  border: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 3px 8px;
  gap: 4px;
  touch-action: manipulation;
}
.ch-gamebar .ch-coin--bar b { font-size: var(--fs-sm); }
.ch-gamebar .ch-coin--bar svg { width: 15px; height: 15px; }
.ch-gamebar .ch-coin--bar:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (max-width: 430px) {
  .ch-gamebar .ch-coin--bar { padding: 3px 4px; gap: 3px; }
  .ch-gamebar .ch-coin--bar svg { width: 14px; height: 14px; }
}

/* --------------------------------------------------------------- سوییچ */
.ch-switch {
  position: relative;
  width: 52px; height: 32px;
  flex: 0 0 52px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  border: 0;
  cursor: pointer;
  transition: background var(--t-mid) var(--ease);
  padding: 0;
}
.ch-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--t-mid) var(--ease-back);
}
.ch-switch[aria-checked="true"] { background: var(--c-good); }
.ch-switch[aria-checked="true"]::after { transform: translateX(20px); }
[dir="rtl"] .ch-switch[aria-checked="true"]::after { transform: translateX(-20px); }

/* -------------------------------------------------------------- فهرست */
.ch-list { display: flex; flex-direction: column; }
.ch-item {
  display: flex;
  align-items: center;
  /* کنترل سه‌گزینه‌ای روی صفحه‌ی ۳۲۰ پیکسلی از کارت بیرون می‌زد و برچسب را می‌برید */
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-1);
  min-height: 52px;
  border-bottom: 1px solid var(--c-line);
}
.ch-item:last-child { border-bottom: 0; }
/* حداقل عرض برچسب، وگرنه به جای شکستن خط، برچسب له می‌شود */
.ch-item__label { flex: 1 1 auto; min-width: 5em; font-weight: 600; }
.ch-item > .ch-seg { flex: 0 0 auto; margin-inline-start: auto; max-width: 100%; }
.ch-item__hint { font-size: var(--fs-xs); color: var(--c-text-faint); font-weight: 400; }
.ch-version { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ch-version__build { font-size: var(--fs-xs); }
.ch-version__hash { font-family: ui-monospace, monospace; letter-spacing: .02em; unicode-bidi: isolate; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ch-version__link { text-decoration: none; }
.ch-version__link:hover, .ch-version__link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

.ch-seg {
  display: inline-flex;
  background: var(--c-surface-2);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.ch-seg button {
  border: 0;
  background: none;
  font: inherit;
  /* با سه زبان، برچسب داخل دکمه وسط کلمه می‌شکست */
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-dim);
  padding: 7px 16px;
  min-height: 38px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  touch-action: manipulation;
}
.ch-seg button[aria-selected="true"] {
  background: var(--c-surface);
  color: var(--game, var(--c-accent));
  box-shadow: var(--sh-1);
}
/* In the dark theme, text in the game's colour takes a lightened copy of it
   (--game-text-dark, set with --game) that reads at 4.5:1; deep accents were
   at 2.2:1 (#396). Fills keep the accent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ch-game__pin--on,
  :root:not([data-theme="light"]) .ch-badge--accent,
  :root:not([data-theme="light"]) .ch-btn--soft,
  :root:not([data-theme="light"]) .ch-iconbtn[aria-pressed="true"],
  :root:not([data-theme="light"]) .ch-seg button[aria-selected="true"] { color: var(--game-text-dark, var(--game, var(--c-accent))); }
}
:root[data-theme="dark"] .ch-game__pin--on,
:root[data-theme="dark"] .ch-badge--accent,
:root[data-theme="dark"] .ch-btn--soft,
:root[data-theme="dark"] .ch-iconbtn[aria-pressed="true"],
:root[data-theme="dark"] .ch-seg button[aria-selected="true"] { color: var(--game-text-dark, var(--game, var(--c-accent))); }
/* با چهار زبان، انتخاب زبان در ۳۲۰ پیکسل از کارت بیرون می‌زد و «Deutsch» بریده
   می‌شد (#121). فقط روی صفحه‌ی خیلی باریک فاصله‌ی داخل دکمه کم می‌شود. */
@media (max-width: 360px) {
  .ch-seg button { padding-inline: 9px; }
}
/* With five languages the picker ran past the card at 390px and the whole page
   scrolled sideways (#256). The language picker wraps onto a second row instead,
   with the buttons sharing each row, so a sixth language needs no new rule. */
.ch-seg--wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-radius: 22px;
}
.ch-seg--wrap button { flex: 1 1 auto; }
/* Five languages still wrapped at every phone width with the 16px side padding,
   leaving Español alone on a second row (#291). Narrow padding keeps them on one
   row down to about 360px; below that the wrap above is the fallback. */
.ch-seg.ch-langs { gap: 1px; }
.ch-seg.ch-langs button { padding-inline: 6px; }

/* ------------------------------------------------------------ پیمایه */
.ch-bar {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  overflow: hidden;
}
.ch-bar__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--game, var(--c-accent));
  transition: width var(--t-slow) var(--ease);
}

/* ------------------------------------------------------- پنجره و شیت */
.ch-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(24, 18, 12, .48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  animation: ch-fade var(--t-mid) var(--ease);
}
.ch-modal {
  width: min(100%, 420px);
  max-height: calc(100dvh - var(--s-7));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: var(--s-5);
  animation: ch-pop var(--t-slow) var(--ease-back);
}
.ch-card__img { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.ch-modal__head { display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-2); }
.ch-modal__head h2 { flex: 1; margin: 0; min-width: 0; }
.ch-modal__head .ch-iconbtn { flex: none; width: 34px; height: 34px; margin-block-start: -2px; }
.ch-modal__head .ch-iconbtn svg { width: 20px; height: 20px; }
.ch-modal h2 { margin-bottom: var(--s-2); }
/* Equal-width buttons broke longer labels in two («مرحله‌ی / بعد», #242): a label stays
   on one line, buttons grow to share a row, and wrap to a new row when they do not fit */
.ch-modal__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.ch-modal__actions .ch-btn { flex: 1 1 auto; white-space: nowrap; padding-inline: var(--s-4); }

/* ------------------------------------------------------------- اعلان */
/* نوار آپدیت، بالای نوار پایین صفحه */
.ch-update {
  position: fixed;
  inset-inline: var(--s-3);
  bottom: calc(var(--nav-h) + var(--s-3) + var(--safe-b));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 520px;
  margin-inline: auto;
  padding: 8px 8px 8px var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: ch-rise var(--t-mid) var(--ease);
}
.ch-update__t { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; }
.ch-update .ch-iconbtn { width: 34px; height: 34px; flex: none; }
.ch-update .ch-iconbtn svg { width: 18px; height: 18px; }
.ch-toasts {
  position: fixed;
  top: calc(var(--s-3) + var(--safe-t));
  inset-inline: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  pointer-events: none;
  padding: 0 var(--s-4);
}
.ch-toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--c-surface);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  padding: 8px 18px 8px 8px;
  max-width: min(100%, 400px);
  animation: ch-drop var(--t-slow) var(--ease-back);
  border: 1px solid var(--c-line);
  /* the host lets taps through to the page; the notice itself can be held or closed (#234) */
  pointer-events: auto;
  cursor: pointer;
}
[dir="rtl"] .ch-toast { padding: 8px 8px 8px 18px; }
.ch-toast--out { animation: ch-lift var(--t-mid) var(--ease) forwards; }
.ch-toast__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-warn-soft);
  display: grid; place-items: center;
  flex: 0 0 40px;
}
.ch-toast__icon svg { width: 26px; height: 26px; }
.ch-toast__t { font-weight: 800; font-size: var(--fs-sm); line-height: 1.4; }
.ch-toast__s { font-size: var(--fs-xs); color: var(--c-text-dim); line-height: 1.4; }

/* ----------------------------------------------------------- کانفتی */
.ch-confetti {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
/* the shared particle layer of Chogan.ui.burst (#398): above the board, below dialogs */
.ch-fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

/* ------------------------------------------------------------ حرکت */
@keyframes ch-fade { from { opacity: 0; } }
@keyframes ch-pop  { from { opacity: 0; transform: scale(.9) translateY(12px); } }
@keyframes ch-drop { from { opacity: 0; transform: translateY(-18px); } }
@keyframes ch-lift { to { opacity: 0; transform: translateY(-14px); } }
@keyframes ch-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ch-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
@keyframes ch-pulse { 50% { transform: scale(1.14); } }
/* a piece set down on a board: falls a little, overshoots, settles (#398) */
@keyframes ch-dropin {
  0% { transform: translateY(-40%) scale(1.5); opacity: 0; }
  55% { transform: translateY(0) scale(.88); opacity: 1; }
  78% { transform: scale(1.08); }
}
/* the back that covers a card while Chogan.ui.fly turns it face up: it shows for
   the first half of the turn, while the card is narrowing, then is gone */
@keyframes ch-turnback { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }

.ch-enter { animation: ch-rise var(--t-slow) var(--ease) backwards; }
.ch-shake { animation: ch-shake 500ms var(--ease); }
.ch-pulse { animation: ch-pulse var(--t-slow) var(--ease-back); }
.ch-dropin { animation: ch-dropin 340ms var(--ease) backwards; }
.ch-turnback { position: absolute; inset: -1px; width: auto; border-radius: inherit; pointer-events: none;
  animation: ch-turnback var(--turn-ms, 360ms) linear forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}

/* ------------------------------------------------------------- تقویم */
/* minmax(0, …): با پانزده بازی، ردیف نقطه‌های هر روز ستون را تا ۱۱۵ پیکسل پهن
   می‌کرد و تقویم در گوشی ۳۹۰ پیکسلی ۸۷۴ پیکسل می‌شد (#123). */
.ch-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ch-cal__dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-faint);
  padding-bottom: var(--s-1);
}
.ch-day {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  position: relative;
  transition: transform var(--t-fast) var(--ease);
  touch-action: manipulation;
}
.ch-day:active { transform: scale(.92); }
.ch-day--empty { background: none; cursor: default; }
.ch-day--future { opacity: .35; cursor: default; }
.ch-day--today { box-shadow: inset 0 0 0 2px var(--c-accent); }
.ch-day--done { background: var(--c-good-soft); color: var(--c-good); }
/* پنج ستون ثابت: پانزده بازی سه ردیف مرتب می‌شود و در ۳۲۰ پیکسل هم در خانه جا دارد */
.ch-day__dots { display: grid; grid-template-columns: repeat(5, 4px); justify-content: center; gap: 2px; max-width: 100%; }
.ch-day__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-text-faint); opacity: .35; }
.ch-day__dot--on { opacity: 1; }

/* --------------------------------------------------------------- لیگ */
.ch-tier {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--tier-c, var(--c-accent));
  background: linear-gradient(135deg, var(--tier-c, var(--c-accent)) 0%, color-mix(in srgb, var(--tier-c, var(--c-accent)) 60%, #fff) 100%);
  color: #fff;
  box-shadow: var(--sh-2);
}
.ch-tier__medal { width: 66px; height: 66px; flex: 0 0 66px; }
.ch-star-off { color: var(--c-text-faint); opacity: .45; }
.ch-rank {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  border-bottom: 1px solid var(--c-line);
}
.ch-rank--me { background: var(--c-accent-soft); border-bottom-color: transparent; }
.ch-rank__n {
  width: 30px;
  text-align: center;
  font-weight: 800;
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}
.ch-rank__name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rank__pts { font-weight: 800; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- دستاوردها */
.ch-achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: var(--s-3); }
.ch-ach {
  text-align: center;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.ch-ach:active { transform: scale(.94); }
.ch-ach--locked { opacity: .42; filter: grayscale(1); }
.ch-ach svg { width: 48px; height: 48px; }
.ch-ach__n { font-size: 11px; font-weight: 700; line-height: 1.4; margin-top: 4px; }

/* ----------------------------------------------------------- آماره‌ها */
.ch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s-3); }
.ch-stat {
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: var(--s-3);
  text-align: center;
}
.ch-stat b { display: block; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: 1.3; }
.ch-stat span { font-size: var(--fs-xs); color: var(--c-text-dim); font-weight: 600; }

/* ------------------------------------------------------------- خالی */
.ch-empty {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--c-text-dim);
}
.ch-empty svg { width: 92px; height: 92px; margin-bottom: var(--s-3); }

/* --------------------------------------------------- خوشامدگویی اول */
/* صفحه‌ی اولین اجرا. عمداً جدا از .ch-tut است چون آموزش داخل بازی یک
   پنجره‌ی کوچک است و این یک صفحه‌ی تمام‌قد با گام‌های قابل افزودن. */
.ch-welcome {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--s-5) + var(--safe-t))
    calc(var(--s-4) + var(--safe-r))
    calc(var(--s-4) + var(--safe-b))
    calc(var(--s-4) + var(--safe-l));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ch-welcome__in {
  width: 100%;
  max-width: 460px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.ch-welcome__art { display: grid; place-items: center; }
.ch-welcome__art svg { max-width: 148px; height: auto; }
.ch-welcome h1 { font-size: var(--fs-2xl); text-align: center; }
.ch-welcome__sub { color: var(--c-text-dim); text-align: center; font-size: var(--fs-md); }
.ch-welcome__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.ch-welcome__foot .ch-btn--primary { flex: 1; }

.ch-chars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.ch-char {
  border: 2px solid var(--c-line);
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--s-2) 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-dim);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  touch-action: manipulation;
  min-height: 88px;
}
.ch-char svg { width: 100%; height: auto; max-width: 56px; }
.ch-char:active { transform: scale(.94); }
.ch-char[aria-pressed="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.ch-field {
  width: 100%;
  font: inherit;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-text);
}
.ch-field:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* ------------------------------------------------------------ آموزش */
.ch-tut { text-align: center; }
.ch-tut__art { width: 100%; max-width: 260px; margin: 0 auto var(--s-4); display: block; }
.ch-tut__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--s-4); }
.ch-tut__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-surface-3); transition: all var(--t-mid) var(--ease); }
.ch-tut__dot--on { background: var(--c-accent); width: 22px; border-radius: var(--r-pill); }

/* --------------------------------------------------------- دسکتاپ */
@media (min-width: 900px) {
  :root { --fs-3xl: 48px; }
  .ch-nav { padding-bottom: 8px; }
}
@media (hover: hover) {
  .ch-tap:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
  .ch-btn:hover:not(:disabled) { filter: brightness(1.05); }
  .ch-nav__item:hover { color: var(--c-text-dim); }
  .ch-day:hover:not(.ch-day--empty):not(.ch-day--future) { background: var(--c-surface-3); }
}