/* ════════════════════════════════════════════════════════════════
   چارتا — سیستم طراحی
   ────────────────────────────────────────────────────────────────
   قاعده‌های سفت‌وسختِ این فایل:
     • همه‌چیز RTL است، جز نوارهای پیشرفت که همیشه از چپ پر می‌شوند.
     • هیچ اسکرول‌باری دیده نمی‌شود؛ کاربر با انگشت می‌کشد.
     • صفحه‌های اصلی باید در یک نما جا شوند، نه اینکه اسکرول بخورند.
     • واحدها نسبی‌اند (dvh/clamp) تا از گوشی کوچک تا تبلت درست بماند.
   ════════════════════════════════════════════════════════════════ */

/* ══════════ فونت ══════════ */
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-900.woff2") format("woff2");
  font-weight: 900; font-display: swap;
}

/* ══════════ توکن‌ها ══════════ */
:root {
  --coral: #F97B5B;
  --teal: #2AA7B8;
  --gold: #FFC94A;
  --cream: #FFF6E4;
  --ink: #16394A;
  --ink-soft: #4A6B7A;

  /* رنگ دسته‌ها — از ساده به خیلی سخت، به‌علاوهٔ صورتی برای مرحلهٔ پنج‌دسته‌ای */
  --c-yellow: #F1C33F;
  --c-green: #74C263;
  --c-blue: #4FA3DC;
  --c-purple: #A579CE;
  --c-pink: #E489B6;

  /* دکمه‌های سه‌بعدی: رویه / لبهٔ پایین */
  --b-green: #56C15C;      --b-green-d: #2E8A3C;
  --b-gold: #FFB03A;       --b-gold-d: #D97B0C;
  --b-purple: #A45FD6;     --b-purple-d: #6E2FA0;
  --b-blue: #3FB6F0;       --b-blue-d: #1177BE;
  --b-red: #F5605C;        --b-red-d: #C42F2F;
  --b-grey: #B9C4CB;       --b-grey-d: #8A97A0;

  --panel: rgba(255, 252, 245, .94);
  --panel-line: rgba(22, 57, 74, .10);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-panel: 0 10px 30px rgba(12, 40, 60, .22);
  --shadow-tile: 0 2px 0 rgba(22, 57, 74, .14);

  /* ارتفاع نوارهای ثابت — صفحه‌ها از این‌ها برای «جا شدن» استفاده می‌کنند */
  --topbar-h: 56px;
  --tabbar-h: 74px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* عرض ستون بازی: روی گوشی تمام‌عرض، روی صفحهٔ بزرگ محدود و وسط‌چین */
  --col: min(100vw, 480px);

  /*
   * دورخطِ تیره برای عنوان‌های سفیدی که مستقیم روی تصویر می‌نشینند. فقط سایهٔ نرم
   * روی آسمان روشن یا بازارِ آفتابی کافی نبود و متن گم می‌شد. هشت سایهٔ بی‌محو
   * در هشت جهت یک خطِ دورِ یکدست می‌سازند که همه‌جا کار می‌کند (برخلاف
   * -webkit-text-stroke که روی حروف فارسی از داخل می‌خورد).
   */
  --ol: #0E3345;
  --outline-2: 0 2px 0 var(--ol), 2px 0 0 var(--ol), -2px 0 0 var(--ol), 0 -2px 0 var(--ol),
               1.4px 1.4px 0 var(--ol), -1.4px 1.4px 0 var(--ol), 1.4px -1.4px 0 var(--ol), -1.4px -1.4px 0 var(--ol);
  --outline-1: 0 1.5px 0 var(--ol), 1.5px 0 0 var(--ol), -1.5px 0 0 var(--ol), 0 -1.5px 0 var(--ol),
               1px 1px 0 var(--ol), -1px 1px 0 var(--ol), 1px -1px 0 var(--ol), -1px -1px 0 var(--ol);
}

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

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;                 /* بدنه هیچ‌وقت اسکرول نمی‌خورد */
  overscroll-behavior: none;
  background: #0E2A38;
}

body {
  font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  font-weight: 700;
  color: var(--ink);
  direction: rtl;
  user-select: none;
  -webkit-user-select: none;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* .topbar و .tabbar صریحاً display:flex دارند و ساده‌لوحانه بر [hidden] پیش‌فرض
   مرورگر می‌چربند. بدون این خط، نوارها وسط بازی هم روی صفحه می‌مانند. */
[hidden] { display: none !important; }

/* اندازهٔ پیش‌فرض آیکون. بدون این، آیکونی که در متنِ یک دکمه یا چیپ می‌نشیند
   اندازهٔ پیش‌فرض SVG را می‌گیرد و یا غول می‌شود یا ناپدید. */
.ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.18em; }
/* آیکون‌های تصویری نباید کش بیایند یا برش بخورند. */
img.ic { object-fit: contain; display: inline-block; }
img { display: block; max-width: 100%; }

/* اسکرول‌بار هیچ‌جا دیده نمی‌شود؛ کشیدن با انگشت سر جایش هست. */
.scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ظرف اسکرول لبه‌هایش را می‌بُرد — مدِّ «آ»، سایهٔ کارت‌ها. چند پیکسل جا در دو طرف،
   که با margin منفی خنثی می‌شود تا چیدمان جابه‌جا نشود. */
.screen > .scroll { padding-inline: 6px; margin-inline: -6px; }

/* ══════════ چیدمان کلی ══════════ */
#root {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  width: var(--col);
  margin-inline: auto;
  overflow: hidden;
}

.bg {
  position: absolute; inset: 0;
  background: #1B7FA8 center/cover no-repeat;
  transition: background-image .35s ease;
  z-index: 0;
}
/* پردهٔ ملایم روی پس‌زمینه تا متن همیشه خوانا بماند */
.bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,32,48,.34) 0%, rgba(8,32,48,.06) 26%,
                                      rgba(8,32,48,.10) 62%, rgba(8,32,48,.46) 100%);
}

.app {
  position: relative; z-index: 1;
  flex: 1 1 auto;
  min-height: 0;                    /* بدون این، فرزندِ flex اسکرول را می‌شکند */
  display: flex; flex-direction: column;
}

/* هر صفحه یک ستون است که دقیقاً اندازهٔ فضای موجود است */
.screen {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 10px 14px calc(10px + var(--safe-b));
  gap: 10px;
  animation: screen-in .22s ease both;
}
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }

/* ══════════ نوار بالا ══════════ */
/* نوار بالا برخلاف بقیهٔ برنامه چپ‌به‌راست است: آواتار و قلب سمت چپ، سکه سمت
   راست. عددها هم LTR طبیعی‌تر می‌نشینند. */
.topbar {
  position: relative; z-index: 2;
  direction: ltr;
  flex: 0 0 auto;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) 12px 0;
  display: flex; align-items: center; gap: 8px;
}
/* متن فارسی داخل قرص‌ها باید راست‌به‌چپ بماند. */
.topbar .pill .tiny { direction: rtl; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border-radius: 999px;
  background: rgba(12, 38, 54, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 14px; font-weight: 900;
  white-space: nowrap;
}
.pill .ic { width: 22px; height: 22px; flex: 0 0 auto; }
.pill.tap:active { transform: scale(.94); }

.pill-add {
  width: 21px; height: 21px; margin-inline-start: 2px;
  border-radius: 7px;
  background: var(--b-green);
  box-shadow: 0 2px 0 var(--b-green-d);
  display: grid; place-items: center;
  color: #fff; font-size: 15px; line-height: 1;
}

.topbar .spacer { flex: 1 1 auto; }

.icon-btn {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(12, 38, 54, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, .22);
  display: grid; place-items: center;
  color: #fff;
}
.icon-btn:active { transform: scale(.92); }
.icon-btn .ic { width: 20px; height: 20px; }

/* ══════════ نوار پایین ══════════ */
.tabbar {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  background: linear-gradient(180deg, #FFFDF8 0%, #FFF3DE 100%);
  border-top: 2px solid rgba(201, 144, 30, .28);
  box-shadow: 0 -6px 22px rgba(10, 35, 50, .22);
}

.tab {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  color: var(--ink-soft);
  font-size: 11.5px; font-weight: 900;
  position: relative;
  transition: color .16s;
}

/* آیکون داخل یک «دیسک» می‌نشیند: در حالت فعال دیسک رنگی می‌شود و بالا می‌آید،
   پس نشانهٔ فعال بودن به رنگِ خودِ آیکون وابسته نیست (تصویری است، نه SVG). */
.tab .tab-ic {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 15px;
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), background .2s, box-shadow .2s;
}
.tab .ic { width: 30px; height: 30px; filter: saturate(.85) opacity(.92); transition: filter .2s; }
.tab .tab-label { line-height: 1.2; }

.tab[aria-current="page"] { color: var(--coral); }
.tab[aria-current="page"] .tab-ic {
  transform: translateY(-3px) scale(1.06);
  background: rgba(249, 123, 91, .16);
  box-shadow: inset 0 0 0 2px rgba(249, 123, 91, .34);
}
.tab[aria-current="page"] .ic { filter: drop-shadow(0 2px 5px rgba(10, 35, 50, .32)); }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0;
  width: 38px; height: 4px; border-radius: 0 0 5px 5px;
  background: var(--coral);
}

/* تبِ میانی (خانه) کمی درشت‌تر است تا مرکز ثقل نوار معلوم باشد. */
.tab.main .tab-ic { width: 50px; height: 50px; border-radius: 17px; }
.tab.main .ic { width: 36px; height: 36px; }

.tab.soon .ic { filter: saturate(.25) opacity(.5); }
.tab.soon { color: rgba(74, 107, 122, .6); }

.tab:active .tab-ic { transform: scale(.9); }

/* ══════════ دکمهٔ سه‌بعدی ══════════ */
.btn {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  background: var(--b-green);
  box-shadow: 0 5px 0 var(--b-green-d), 0 8px 16px rgba(10, 35, 50, .26);
  color: #fff;
  font-weight: 900;
  text-align: start;
  transition: transform .1s, box-shadow .1s;
}
/* براقیِ بالای دکمه — همان چیزی که «حس بازی» می‌دهد */
.btn::before {
  content: ""; position: absolute; inset: 3px 3px auto;
  height: 42%;
  border-radius: calc(var(--r-lg) - 4px) calc(var(--r-lg) - 4px) 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events: none;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--b-green-d), 0 3px 8px rgba(10,35,50,.24); }

.btn .btn-ic {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, .24);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1);
  display: grid; place-items: center;
}
/* آیکون سریع‌تر از متن خوانده می‌شود، پس بزرگ‌تر از متن هم هست. */
.btn .btn-ic .ic { width: 38px; height: 38px; }
.btn .btn-tx { flex: 1 1 auto; min-width: 0; }
.btn .btn-title { display: block; font-size: 18px; line-height: 1.3; }
.btn .btn-sub { display: block; font-size: 12px; font-weight: 700; opacity: .9; line-height: 1.45; }

.btn.gold   { background: var(--b-gold);   box-shadow: 0 5px 0 var(--b-gold-d),   0 8px 16px rgba(10,35,50,.26); }
.btn.gold:active   { box-shadow: 0 1px 0 var(--b-gold-d),   0 3px 8px rgba(10,35,50,.24); }
.btn.purple { background: var(--b-purple); box-shadow: 0 5px 0 var(--b-purple-d), 0 8px 16px rgba(10,35,50,.26); }
.btn.purple:active { box-shadow: 0 1px 0 var(--b-purple-d), 0 3px 8px rgba(10,35,50,.24); }
.btn.blue   { background: var(--b-blue);   box-shadow: 0 5px 0 var(--b-blue-d),   0 8px 16px rgba(10,35,50,.26); }
.btn.blue:active   { box-shadow: 0 1px 0 var(--b-blue-d),   0 3px 8px rgba(10,35,50,.24); }
.btn.red    { background: var(--b-red);    box-shadow: 0 5px 0 var(--b-red-d),    0 8px 16px rgba(10,35,50,.26); }
.btn.red:active    { box-shadow: 0 1px 0 var(--b-red-d),    0 3px 8px rgba(10,35,50,.24); }

/* روی پس‌زمینهٔ عکسی، دکمهٔ غیرفعالِ نیمه‌شفاف مثل لکه دیده می‌شد؛ باید هنوز
   شکل دکمه داشته باشد، فقط خاموش. */
.btn[disabled], .btn.off {
  background: #9FAEB7;
  box-shadow: 0 5px 0 #77878F, 0 8px 16px rgba(10, 35, 50, .22);
  color: rgba(255, 255, 255, .82);
  pointer-events: none;
}

.btn.center { justify-content: center; text-align: center; }
.btn.center .btn-tx { flex: 0 1 auto; }
.btn.sm { padding: 10px 14px; border-radius: var(--r-md); }
.btn.sm .btn-title { font-size: 14.5px; }

/* ══════════ پنل ══════════ */
.panel {
  background: var(--panel);
  border-radius: var(--r-xl);
  border: 1.5px solid rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-panel);
  padding: 14px;
}
.panel.tight { padding: 10px; }

.panel-title { font-size: 16px; font-weight: 900; margin: 0 0 2px; }
.panel-sub { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin: 0; }

/* عنوان بزرگِ روی پس‌زمینه (بیرون پنل) */
.hero-title {
  margin: 0; text-align: center;
  font-size: clamp(20px, 5.6vw, 26px); font-weight: 900;
  color: #fff;
  /* دورخط + یک لبهٔ تیرهٔ پایین (مثل نشان بازی) + سایهٔ نرم */
  text-shadow: var(--outline-2), 0 4px 0 var(--ol), 0 6px 14px rgba(0, 0, 0, .35);
}
/* زیرعنوانِ ریز: دورخط در ۱۲ پیکسل سنگین می‌شود، پس روی یک قرصِ تیرهٔ نیمه‌شفاف می‌نشیند. */
.hero-sub {
  width: fit-content; max-width: 100%;
  margin: 5px auto 0; text-align: center;
  padding: 2px 12px 3px;
  border-radius: 999px;
  background: rgba(12, 38, 54, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 700;
  color: #fff;
}

/* ══════════ نوار پیشرفت ══════════
   مهم: پیشرفت همیشه از چپ پر می‌شود، حتی در صفحهٔ راست‌به‌چپ.
   direction:ltr روی خود نوار این را تضمین می‌کند. */
.bar {
  direction: ltr;
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(22, 57, 74, .16);
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(22, 57, 74, .2);
}
.bar > i {
  display: block; height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--b-blue), var(--teal));
  transition: width .5s cubic-bezier(.4, 1.2, .5, 1);
}
.bar > i::after {
  content: ""; position: absolute; inset: 1.5px auto auto 2px;
  height: 3px; width: calc(100% - 4px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .32);
  pointer-events: none;
}
.bar.gold > i { background: linear-gradient(90deg, var(--gold), #FF9E38); }
.bar.green > i { background: linear-gradient(90deg, #7BD37F, #3E9E4C); }
.bar.thin { height: 8px; }

/* ══════════ کاشی بازی ══════════ */
.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  flex: 0 0 auto;
}
/* وقتی fitBoard() ارتفاع ردیف را حساب کرد، کاشی دیگر مربعِ اجباری نیست و همان
   ارتفاع ردیف را پر می‌کند — تا تخته هیچ‌وقت از فضایش بیرون نزند. */
.board.fitted .tile { aspect-ratio: auto; }

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  padding: 3px;
  border-radius: 14px;
  background: #FFFDF7;
  border: 2px solid rgba(22, 57, 74, .10);
  box-shadow: var(--shadow-tile);
  color: var(--ink);
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  /* اندازهٔ قلم با عرض ستون بالا و پایین می‌رود تا کلمهٔ بلند هم جا شود */
  font-size: clamp(9.5px, 3.1vw, 14px);
  overflow: hidden;
  word-break: break-word;
  transition: transform .12s, background .12s, box-shadow .12s;
}
.tile.long { font-size: clamp(8px, 2.5vw, 11.5px); }
.tile:active { transform: scale(.94); }

.tile.sel {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 5px 12px rgba(22, 57, 74, .38);
}
/* رنگ موقتِ «کمک انتخاب»: این‌ها با هم مرتبط‌اند */
.tile.hint {
  background: var(--teal); border-color: var(--teal); color: #fff;
  animation: hint-pulse 1.1s ease-in-out 2;
}
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(42, 167, 184, .6); }
  50% { box-shadow: 0 0 0 8px rgba(42, 167, 184, 0); }
}

.tile.pop { animation: pop .34s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 40% { transform: translateY(-8px) scale(1.09); } }

.tile.shake { animation: shake .42s; }
@keyframes shake {
  10%, 90% { transform: translateX(-3px); }
  30%, 70% { transform: translateX(5px); }
  50% { transform: translateX(-5px); }
}

.tile.gone { animation: gone .28s ease forwards; pointer-events: none; }
@keyframes gone { to { opacity: 0; transform: scale(.6); } }

/* ══════════ ردیف دستهٔ حل‌شده ══════════ */
.solved-row {
  border-radius: 14px;
  padding: 7px 10px;
  text-align: center;
  color: #43331A;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .14);
  animation: solved-in .38s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes solved-in { from { opacity: 0; transform: scale(.9); } }
.solved-row .t { font-size: 13.5px; font-weight: 900; line-height: 1.3; }
.solved-row .w { font-size: 11.5px; font-weight: 700; opacity: .82; margin-top: 1px; }

.lv-yellow { background: var(--c-yellow); }
.lv-green  { background: var(--c-green); }
.lv-blue   { background: var(--c-blue); }
.lv-purple { background: var(--c-purple); }
.lv-pink   { background: var(--c-pink); }
.lv-blue .t, .lv-purple .t, .lv-pink .t,
.lv-blue .w, .lv-purple .w, .lv-pink .w { color: #fff; }

/* ══════════ اشتباه‌ها ══════════ */
.mistakes { display: flex; align-items: center; gap: 5px; }
/* این نقطه‌ها روی پس‌زمینهٔ عکسی می‌نشینند، پس باید خودشان کنتراست بسازند. */
.mistakes .dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  border: 1.5px solid rgba(255, 255, 255, .75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: background .2s, transform .2s;
}
.mistakes .dot.used {
  background: var(--b-red);
  border-color: #fff;
  transform: scale(1.15);
}

/* ══════════ ردیف قدرت‌ها ══════════ */
.powers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }

.power {
  position: relative;
  border-radius: var(--r-md);
  padding: 7px 4px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .2), 0 6px 12px rgba(10, 35, 50, .2);
  transition: transform .1s, box-shadow .1s;
}
.power::before {
  content: ""; position: absolute; inset: 2px 2px auto; height: 40%;
  border-radius: calc(var(--r-md) - 3px) calc(var(--r-md) - 3px) 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events: none;
}
.power:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.power .ic { width: 29px; height: 29px; }
.power .nm { font-size: 10.5px; font-weight: 900; line-height: 1.2; text-align: center; }
.power .px {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 900;
  background: rgba(0, 0, 0, .2);
  padding: 1px 7px; border-radius: 999px;
}
.power .px .ic { width: 11px; height: 11px; }

.power.p-solve  { background: var(--b-purple); }
.power.p-reveal { background: var(--b-gold); }
.power.p-assist { background: var(--b-blue); }
.power[disabled], .power.off { background: var(--b-grey); opacity: .8; pointer-events: none; }

.power .lock {
  position: absolute; inset: 0;
  border-radius: var(--r-md);
  background: rgba(30, 45, 55, .62);
  display: grid; place-items: center;
}
.power .lock .ic { width: 18px; height: 18px; }

/* ══════════ مسیر مراحل ══════════ */
.map {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  border: 1.5px solid rgba(255, 255, 255, .45);
}
.map-scroll { position: absolute; inset: 0; }
.map-inner { position: relative; width: 100%; }
.map-inner .path { position: absolute; inset: 0; width: 100%; height: 100%; }

.node {
  position: absolute;
  /* از چپ جای‌گذاری می‌شود، چون مسیر SVG هم مختصات چپ‌محور دارد؛ اگر یکی از
     راست و دیگری از چپ باشد، خط و گره‌ها روی هم نمی‌افتند. */
  width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 900;
  color: #fff;
  background: var(--b-blue);
  border: 3px solid #fff;
  box-shadow: 0 4px 0 var(--b-blue-d), 0 6px 14px rgba(10, 35, 50, .34);
  transition: transform .14s;
}
.node:active { transform: translate(-50%, -50%) scale(.9); }
.node.done { background: var(--b-green); box-shadow: 0 4px 0 var(--b-green-d), 0 6px 14px rgba(10,35,50,.34); }
.node.locked { background: var(--b-grey); box-shadow: 0 4px 0 var(--b-grey-d); color: rgba(255,255,255,.9); }
.node.boss { width: 62px; height: 62px; font-size: 19px; background: var(--b-purple); box-shadow: 0 4px 0 var(--b-purple-d), 0 6px 16px rgba(10,35,50,.4); }

/* مرحلهٔ جاری نبض می‌زند تا چشم برود سراغش */
.node.current::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  animation: ring 1.6s ease-out infinite;
}
@keyframes ring {
  0% { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ستاره‌ها نشانِ اصلی «چقدر خوب تمامش کردی»اند؛ در ۱۲px عملاً دیده نمی‌شدند.
   کاملاً زیر دایره می‌نشینند، نه رویش — bottom باید از ارتفاع خودشان بیشتر
   باشد وگرنه نیمه‌شان پشت گره می‌ماند. */
/*
 * ستاره‌ها بدون هیچ پس‌زمینه‌ای، روی یک کمان: قرصِ تیرهٔ قبلی زشت بود و ستاره‌ها
 * را ریز نشان می‌داد. خوانایی را حالا سایهٔ دورِ خودِ ستاره می‌دهد.
 */
.node .stars {
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  /* LTR: ستاره‌ها مثل هر پیشرفتِ دیگری از چپ روشن می‌شوند، و کمان هم درست کج می‌شود. */
  direction: ltr;
  display: flex; align-items: flex-start;
  margin-top: -9px;
  pointer-events: none;
}
/*
 * width:max-content ضروری است: جعبهٔ absolute با left:50% داخل گرهٔ ۵۰پیکسلی فقط
 * ~۲۵ پیکسل عرض می‌گرفت، و قانونِ سراسریِ img{max-width:100%} هر ستاره را تا
 * عرض ۱۰ پیکسل له می‌کرد (ارتفاع ۲۷، عرض ۱۰٫۷ — با probe اندازه گرفته شد).
 * «ستاره‌ها خیلی کوچک‌اند» در واقع همین فشرده شدن بود.
 */
.node .stars { width: max-content; }
.node .stars .st { display: block; flex: 0 0 auto; }
.node .stars .ic { max-width: none; }
/* ستارهٔ نگرفته نقره‌ای و کاملاً دیدنی است — باید بگوید «یکی دیگر هم می‌شود گرفت»،
   نه اینکه روی چمن محو شود. */
.node .stars .ic {
  width: 22px; height: 22px;
  filter: grayscale(1) brightness(1.08) contrast(.92) drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}
.node .stars .on .ic { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
/* کمان: کناری‌ها کمی بالاتر و کج، وسطی درشت‌تر و پایین‌تر */
.node .stars .st-0 { transform: translateY(-3px) rotate(-16deg); margin-inline-end: -3px; }
.node .stars .st-1 { transform: translateY(3px); }
.node .stars .st-1 .ic { width: 27px; height: 27px; }
.node .stars .st-2 { transform: translateY(-3px) rotate(16deg); margin-inline-start: -3px; }
.node.boss .stars .ic { width: 25px; height: 25px; }
.node.boss .stars .st-1 .ic { width: 30px; height: 30px; }

/* ══════════ سفر واژه‌ها: انتخاب فصل ══════════
 * شبکهٔ ۳×۴ که ارتفاعِ باقی‌ماندهٔ صفحه را پر می‌کند (دوازده منزل، بی‌اسکرول)؛ هر کارت منظرهٔ منزلش است
 * و متن روی یک سایه‌روشنِ پایین می‌نشیند تا روی هر تصویری خوانا بماند.
 */
.season-grid {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 7px;
}

.season-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 0;
  border-radius: 15px;
  border: 2.5px solid rgba(255, 255, 255, .75);
  background: #7FC6D8 center 35% / cover no-repeat;
  box-shadow: 0 8px 20px rgba(10, 35, 50, .32);
  overflow: hidden;
  text-align: start;
  color: #fff;
  transition: transform .14s;
}
.season-card:active { transform: scale(.97); }
.season-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 26, 38, 0) 38%, rgba(8, 26, 38, .82) 100%);
  pointer-events: none;
}

/* فصلِ جاری: قاب طلایی و درخشش، تا بازیکن ببیند «الان کجای سفرم». */
.season-card.current {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 201, 74, .45), 0 10px 26px rgba(10, 35, 50, .4);
}

.season-card.locked { filter: grayscale(.8) brightness(.78); }

.season-no {
  position: absolute; z-index: 1; top: 5px; inset-inline-start: 5px;
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 252, 245, .95); color: var(--ink);
  font-size: 12px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.season-done {
  position: absolute; z-index: 1; top: 5px; inset-inline-end: 5px;
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--b-green); color: #fff;
  box-shadow: 0 2px 0 var(--b-green-d);
}
.season-done .ic { width: 14px; height: 14px; }

.season-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 7px 7px;
}
.season-name {
  font-size: 12.5px; font-weight: 900; line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.season-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 900;
}
.season-stars { display: inline-flex; align-items: center; gap: 3px; }
.season-stars .ic { width: 12px; height: 12px; }
.season-card .bar { background: rgba(255, 255, 255, .28); }

.season-lock {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(12, 38, 54, .7);
  font-size: 10px; font-weight: 900;
}
.season-lock .ic { width: 12px; height: 12px; }

/* ══════════ کارت‌های عمومی ══════════ */
.card {
  background: var(--panel);
  border-radius: var(--r-lg);
  border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 6px 18px rgba(10, 35, 50, .18);
  padding: 12px;
}

.row { display: flex; align-items: center; gap: 10px; }
.row .grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(22, 57, 74, .08);
  font-size: 12px; font-weight: 900;
}
.chip .ic { width: 15px; height: 15px; }

/* روی پس‌زمینهٔ عکسی، خاکستریِ نیمه‌شفاف اصلاً دیده نمی‌شد. */
.seg {
  display: flex; gap: 5px;
  background: var(--panel);
  border: 1.5px solid rgba(255, 255, 255, .5);
  box-shadow: 0 4px 14px rgba(10, 35, 50, .18);
  padding: 4px; border-radius: 999px;
}
.seg button {
  flex: 1 1 0; padding: 7px 4px; border-radius: 999px;
  font-size: 12.5px; font-weight: 900; color: var(--ink-soft);
  transition: background .16s, color .16s;
}
.seg button[aria-selected="true"] {
  background: #fff; color: var(--ink);
  box-shadow: 0 2px 6px rgba(10, 35, 50, .16);
}

.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* ══════════ آموزش ══════════ */

.tut { position: fixed; inset: 0; z-index: 90; pointer-events: none; }

/*
 * ماسک هم صفحه را تیره می‌کند هم کلیک‌ها را می‌گیرد، پس بازیکن تازه‌کار نمی‌تواند
 * گم شود. وقتی حلقه‌ای روی هدف هست، تیرگی را خودِ حلقه با سایهٔ بزرگش می‌سازد
 * (چون باید وسطش سوراخ باشد) و ماسک شفاف می‌ماند تا دو لایه تیرگی روی هم نیفتد.
 */
.tut-mask {
  position: absolute; inset: 0;
  pointer-events: auto;
  background: rgba(8, 26, 38, .72);
  transition: background .2s;
}
.tut.has-ring .tut-mask { background: transparent; }

/*
 * حفرهٔ دور هدف با یک سایهٔ داخلیِ خیلی بزرگ ساخته می‌شود، نه با چهار مستطیل:
 * یک المان، و گوشه‌های گردش هم درست درمی‌آید.
 */
.tut-ring {
  position: absolute;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(8, 26, 38, .72), 0 0 0 3px #FFC94A inset;
  border: 3px solid var(--gold);
  pointer-events: none;
  animation: tut-pulse 1.5s ease-in-out infinite;
  transition: left .18s, top .18s, width .18s, height .18s;
}
@keyframes tut-pulse {
  50% { border-color: #FFF3D4; }
}

.tut-hand {
  position: absolute;
  width: 58px; height: 58px;         /* باید با HAND_SIZE در tutorial.js یکی باشد */
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
  animation: tut-tap 1.1s ease-in-out infinite;
}
/*
 * نوک انگشت در حالت استراحت دقیقاً روی هدف است و «ضربه» یعنی کمی دور شدن و
 * برگشتن — نه نوسان حول آن نقطه، که نصف زمان انگشت را از روی هدف برمی‌داشت.
 * چرخش هم داخل همین انیمیشن است، چون انیمیشن بر transformِ inline می‌چربد.
 */
@keyframes tut-tap {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  45%      { transform: translateY(var(--away, 9px)) rotate(var(--rot, 0deg)); }
}

.tut-card {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: min(92%, 340px);
  pointer-events: auto;
  background: var(--cream);
  border: 2px solid #fff;
  border-radius: var(--r-xl);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .45);
  padding: 15px 16px;
  text-align: center;
  animation: tut-in .28s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes tut-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }

.tut-text { font-size: 14px; font-weight: 700; line-height: 1.8; }
.tut-count {
  display: inline-block; margin-inline-start: 6px;
  background: var(--b-blue); color: #fff;
  font-size: 11.5px; font-weight: 900;
  padding: 1px 9px; border-radius: 999px;
  vertical-align: 1px;
}
.tut-next { margin-top: 12px; }

/*
 * وقتی گام یک هدف دارد، ماسک نباید هیچ ضربه‌ای بگیرد — وگرنه روی هدف هم می‌نشیند
 * و ضربه به خودِ «مسیر» نمی‌رسد (باگ قبلی دقیقاً همین بود). جلوی ضربه‌های
 * بی‌جا را فیلترِ guard در tutorial.js می‌گیرد، نه ماسک.
 */
.tut.targeting .tut-mask { pointer-events: none; }

/* ══════════ گفتگو ══════════ */

.chat-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 2px;
}

.msg { display: flex; align-items: flex-end; gap: 7px; }
.msg.mine { flex-direction: row-reverse; }

/*
 * گوشهٔ تیزِ حباب همیشه رو به فرستنده است، مثل «دُمِ» حباب گفتگو.
 *
 * با گوشه‌های منطقی (start/end) نوشته شده نه فیزیکی (چپ/راست): قبلاً گوشه‌ها
 * فیزیکی بودند و در RTL درست برعکس درآمدند — حبابِ دیگران (که فرستنده‌اش سمت
 * راست است) گوشهٔ تیزش پایین-چپ بود. حالا جهت متن خودش تعیین می‌کند.
 *   • پیام دیگران سمتِ آغاز (راست) است  ⇒ گوشهٔ پایین-آغاز تیز
 *   • پیام خودم سمتِ پایان (چپ) است      ⇒ گوشهٔ پایین-پایان تیز
 */
.msg-box {
  max-width: 76%;
  background: var(--panel);
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 16px;
  border-end-start-radius: 5px;
  box-shadow: 0 3px 10px rgba(10, 35, 50, .16);
  padding: 7px 11px 5px;
}
/* پیام خودم: رنگی و از سمت دیگر گوشه‌دار، تا بدون خواندن هم معلوم باشد کدام مال کیست. */
.msg.mine .msg-box {
  background: linear-gradient(180deg, #56C15C, #3EA54C);
  border-color: rgba(255, 255, 255, .3);
  border-radius: 16px;
  border-end-end-radius: 5px;
  color: #fff;
}

.msg-name {
  display: block;
  font-size: 11.5px; font-weight: 900;
  color: var(--teal);
  margin-bottom: 2px;
}
.msg-lv {
  display: inline-block;
  background: var(--b-purple); color: #fff;
  font-size: 9px; padding: 1px 6px; border-radius: 999px;
  vertical-align: 1px;
}
.msg-text { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.65; word-break: break-word; }
.msg-at { display: block; font-size: 9.5px; font-weight: 700; opacity: .55; margin-top: 2px; text-align: start; }

.chat-bar { display: flex; gap: 7px; align-items: center; }

.chat-input {
  flex: 1 1 auto; min-width: 0;
  height: 44px; padding: 0 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .6);
  background: var(--panel);
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(10, 35, 50, .18);
}
.chat-input:focus { outline: none; border-color: var(--teal); }

.chat-send {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--b-green);
  box-shadow: 0 4px 0 var(--b-green-d);
  display: grid; place-items: center;
  color: #fff;
}
.chat-send:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--b-green-d); }
.chat-send .ic { width: 21px; height: 21px; }

/* ── فهرست گفتگوهای خصوصی ── */
.thread {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; margin-bottom: 7px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 4px 12px rgba(10, 35, 50, .16);
  text-align: start;
}
.thread:active { transform: scale(.985); }
.thread-tx { flex: 1 1 auto; min-width: 0; }
.thread-name { display: block; font-size: 14px; font-weight: 900; }
.thread-last {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--b-red); color: #fff;
  font-size: 10.5px; font-weight: 900;
}

.dm-who { display: flex; align-items: center; gap: 8px; text-align: start; }
.dm-who .dm-name { display: block; font-size: 14.5px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.dm-who .tiny { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

/* ══════════ فروشگاه ══════════ */

/*
 * عنوانِ بخش‌ها کمی از لبه فاصله دارد: عنوان دقیقاً چسبیده به لبهٔ ظرفِ اسکرول
 * بود و «آ»ی اولِ «آیتم‌های کمکی» (که مدّش از جعبهٔ حرف بیرون می‌زند) و سایه‌اش
 * بریده می‌شد. توضیحِ بلند هم دیگر یک قرصِ هم‌خط نیست که از صفحه بیرون بزند؛
 * زیرِ عنوان می‌نشیند و در صورت لزوم می‌شکند.
 */
.shop-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding-inline: 4px;
  color: #fff;
  font-size: 17px; font-weight: 900;
  line-height: 1.5;
}
.shop-head > span:first-child {
  display: inline-flex; align-items: center; gap: 8px;
  text-shadow: var(--outline-1), 0 3px 0 var(--ol), 0 4px 10px rgba(0, 0, 0, .3);
}
.shop-head .badge-red {
  background: var(--b-red); color: #fff;
  font-size: 11px;
  padding: 1px 9px; border-radius: 999px;
  text-shadow: none;
}
.shop-head .head-note {
  padding: 2px 11px 3px;
  border-radius: 999px;
  background: rgba(12, 38, 54, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11.5px; font-weight: 700;
  color: #fff;
}

/*
 * ترتیبِ کارت‌ها چپ‌به‌راست است، مثل یک فهرست قیمت: رایگان اول، بعد ارزان‌ترین تا
 * گران‌ترین. فقط «جای» کارت‌ها برعکس می‌شود؛ متنِ داخل هر کارت همچنان RTL است.
 */
.grid3.ltr { direction: ltr; }
.grid3.ltr > * { direction: rtl; }

/* کارت بسته — سه‌تایی در هر ردیف */
.pack {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--panel);
  border-radius: var(--r-lg);
  border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 5px 14px rgba(10, 35, 50, .2);
  padding: 10px 7px 9px;
  text-align: center;
}
.pack-art { height: 54px; display: grid; place-items: center; margin-bottom: 5px; }
.pack-art .ic { width: 50px; height: 50px; }
.pack-art.big { height: 60px; border-radius: 14px; }
.pack-art.big .ic { width: 46px; height: 46px; }
.pack-art.p-solve  { background: var(--b-purple); }
.pack-art.p-reveal { background: var(--b-gold); }
.pack-art.p-assist { background: var(--b-blue); }

.pack-coins {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 14px; font-weight: 900; margin-bottom: 8px;
}
.pack-coins .ic { width: 18px; height: 18px; }
.pack-name { font-size: 12.5px; font-weight: 900; margin-bottom: 4px; }
.pack-desc {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 700; line-height: 1.5;
  color: var(--ink-soft); min-height: 47px;
}
.pack .btn { margin-top: auto; }
/* قیمت تومانی در کارت باریک دو خط می‌شد؛ یک خط بماند، حتی کوچک‌تر. */
.pack .btn .btn-title { font-size: 12px; white-space: nowrap; }

.pack-badge {
  position: absolute; top: -7px; inset-inline-end: -4px;
  background: var(--b-red); color: #fff;
  font-size: 9.5px; font-weight: 900;
  padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(10, 35, 50, .3);
  white-space: nowrap;
}

/* ══════════ پیشکش ویژه ══════════
 * از روی ماکتی که Codex کشید (scripts/art/mock/offer-a.png):
 *   • صندوقِ بزرگ گوشهٔ بالا-راست که از لبهٔ کارت بیرون می‌زند
 *   • مُهرِ قرمزِ «+٪ ارزش بیشتر» گوشهٔ بالا-چپ
 *   • عنوان و توضیح، و زیرشان قرصِ تیرهٔ شمارش معکوس با ساعت شنی
 *   • ردیفِ جایزه‌ها: هر جایزه کاشیِ خودش را دارد، آیکون بالا و مقدار زیرش —
 *     دیگر ممکن نیست «۲۵٬۰۰۰» را مالِ قلب بخوانی
 *   • دکمهٔ بزرگ و سبزِ قیمت، سمت چپ
 */

/* عنوانِ بخش: تابلوی فیروزه‌ای با قاب طلایی، مثل ماکت. */
.offers-plaque {
  align-self: center;
  margin-top: 2px;
  padding: 6px 26px 7px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1F7F8C, #13606B);
  border: 3px solid #E9B64A;
  box-shadow: 0 0 0 2px #8A5A12, 0 6px 16px rgba(10, 35, 50, .35);
  color: #FFE39A;
  font-size: 19px; font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  text-align: center;
}
.offers-sub {
  width: fit-content; margin: 0 auto;
  padding: 2px 12px 3px;
  border-radius: 999px;
  background: rgba(12, 38, 54, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 12px; font-weight: 700;
}

.offer {
  position: relative;
  margin-top: 16px;                     /* جا برای صندوقی که از لبهٔ بالا بیرون می‌زند */
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFBF1, #FFF2D8);
  border: 3px solid #E9B64A;
  box-shadow: 0 0 0 1.5px #B9822A, 0 8px 20px rgba(10, 35, 50, .28);
  display: flex; flex-direction: column; gap: 10px;
}

.offer-hero {
  position: absolute; top: -22px; inset-inline-start: -6px;
  width: 92px; height: 92px;
  display: grid; place-items: center;
  filter: drop-shadow(0 6px 8px rgba(80, 40, 0, .35));
  pointer-events: none;
}
.offer-hero .ic { width: 92px; height: 92px; }

.offer-badge {
  position: absolute; top: -12px; inset-inline-end: -8px;
  width: 72px; height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #FF6A5A, #D8342A 70%);
  clip-path: polygon(50.0% 0.0%, 55.7% 6.4%, 62.9% 1.7%, 66.8% 9.3%, 75.0% 6.7%, 76.8% 15.1%, 85.4% 14.6%, 84.9% 23.2%, 93.3% 25.0%, 90.7% 33.2%, 98.3% 37.1%, 93.6% 44.3%, 100.0% 50.0%, 93.6% 55.7%, 98.3% 62.9%, 90.7% 66.8%, 93.3% 75.0%, 84.9% 76.8%, 85.4% 85.4%, 76.8% 84.9%, 75.0% 93.3%, 66.8% 90.7%, 62.9% 98.3%, 55.7% 93.6%, 50.0% 100.0%, 44.3% 93.6%, 37.1% 98.3%, 33.2% 90.7%, 25.0% 93.3%, 23.2% 84.9%, 14.6% 85.4%, 15.1% 76.8%, 6.7% 75.0%, 9.3% 66.8%, 1.7% 62.9%, 6.4% 55.7%, 0.0% 50.0%, 6.4% 44.3%, 1.7% 37.1%, 9.3% 33.2%, 6.7% 25.0%, 15.1% 23.2%, 14.6% 14.6%, 23.2% 15.1%, 25.0% 6.7%, 33.2% 9.3%, 37.1% 1.7%, 44.3% 6.4%);
  color: #fff; text-align: center;
  transform: rotate(-10deg);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3));
}
.offer-badge b { font-size: 15px; font-weight: 900; line-height: 1.1; direction: ltr; }
.offer-badge span { font-size: 8.5px; font-weight: 900; line-height: 1.2; }

.offer-head {
  /* از زیرِ صندوق (راست) و مُهر (چپ) کنار می‌کشد، تا متن رویشان نیفتد. */
  padding-inline: 84px 62px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.offer-name { font-size: 17px; font-weight: 900; line-height: 1.35; }
.offer-desc { font-size: 11px; font-weight: 700; color: var(--ink-soft); line-height: 1.5; }

.offer-timer {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  direction: ltr;
  padding: 3px 12px 3px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5E3410, #3E2107);
  border: 2px solid #E9B64A;
  color: #FFE7A6;
  font-size: 14px; font-weight: 900;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3);
}
.offer-timer .ic { width: 20px; height: 20px; }

.offer-row { display: flex; align-items: stretch; gap: 7px; }
.offer-rewards { flex: 1 1 auto; min-width: 0; display: flex; gap: 5px; }

.reward {
  flex: 1 1 0; min-width: 0; max-width: 66px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px 5px;
  border-radius: 13px;
  background: #FFFDF8;
  border: 1.5px solid rgba(185, 130, 42, .35);
  box-shadow: 0 2px 0 rgba(185, 130, 42, .22);
}
.reward .ic { width: 30px; height: 30px; }
.reward b {
  font-size: 12px; font-weight: 900; line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
  direction: ltr;
}

/* مقدارِ بلند (۱۱۰٬۰۰۰) در کاشیِ باریک جا نمی‌شد. */
.reward b.long { font-size: 10px; letter-spacing: -.2px; }

.offer-buy {
  flex: 0 0 auto;
  min-width: 86px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #5FD266, #34A845);
  border: 2px solid #2E8A3C;
  box-shadow: 0 4px 0 #1F6E2D, 0 6px 12px rgba(10, 35, 50, .25);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  transition: transform .1s, box-shadow .1s;
}
.offer-buy:active { transform: translateY(3px); box-shadow: 0 1px 0 #1F6E2D; }
.offer-buy b { font-size: 16px; font-weight: 900; line-height: 1.15; }
.offer-buy span { font-size: 11px; font-weight: 700; }

/*
 * مدادِ کنار نام: خودِ آیکون دکمه است، بدون قاب مربعی — مداد خودش به‌اندازهٔ کافی
 * «ویرایش» می‌گوید و قاب فقط شلوغش می‌کرد. ناحیهٔ لمس با padding بزرگ می‌ماند.
 */
.name-edit {
  display: inline-grid; place-items: center;
  padding: 4px;
  margin: -4px;
  background: none; border: 0;
  transition: transform .12s;
}
.name-edit .ic { width: 24px; height: 24px; }
.name-edit:active { transform: scale(.88) rotate(-8deg); }

/* ردیفِ «اشتباه‌ها» در صفحهٔ بازی: روی قرصِ تیره، تا روی هر پس‌زمینه‌ای خوانا باشد. */
.mistakes-row {
  width: fit-content; margin: 6px auto 0;
  display: flex; align-items: center; gap: 9px;
  padding: 3px 12px 3px 10px;
  border-radius: 999px;
  background: rgba(12, 38, 54, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
}

/* مداد کوچک روی آواتار پروفایل، تا معلوم باشد قابل تغییر است */
.avatar-edit {
  position: absolute; bottom: -3px; inset-inline-end: -3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--b-blue); border: 2px solid #fff;
  display: grid; place-items: center;
  color: #fff;
}
.avatar-edit .ic { width: 12px; height: 12px; }

/* ══════════ کلیدهای صدا (پروفایل) ══════════ */
.setting {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 2px;
  font-size: 14px; font-weight: 700;
  text-align: start;
}
.setting + .setting { border-top: 1px solid var(--panel-line); }
.setting .grow { flex: 1 1 auto; }

/* مثل نوارهای پیشرفت، جهتِ کلید هم ثابت است: «روشن» یعنی دایره سمت راست. */
.switch {
  flex: 0 0 auto;
  position: relative;
  width: 46px; height: 28px; border-radius: 999px;
  background: var(--b-grey);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18);
  transition: background .18s;
}
.switch::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(10, 35, 50, .3);
  transition: transform .18s;
}
.setting[aria-checked="true"] .switch { background: var(--b-green); }
.setting[aria-checked="true"] .switch::after { transform: translateX(18px); }

/* ══════════ دستاورد ══════════ */
.ach {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 5px 8px;
  border-radius: 16px;
  background: rgba(22, 57, 74, .08);
  color: var(--ink-soft);
  transition: transform .12s;
}
.ach:active { transform: scale(.95); }

.ach[data-on="1"] {
  background: linear-gradient(180deg, #FFC24A, #FFA425);
  box-shadow: 0 3px 0 var(--b-gold-d), 0 5px 12px rgba(10, 35, 50, .18);
  color: #fff;
}
.ach[data-on="0"] { opacity: .62; }

.ach-ic {
  width: 46px; height: 46px;
  display: grid; place-items: center;
}
.ach-ic .ic { width: 40px; height: 40px; }
.ach[data-on="0"] .ach-ic .ic { filter: saturate(.15) opacity(.75); }

.ach-nm {
  font-size: 10.5px; font-weight: 900; line-height: 1.25; text-align: center;
  /* اسم‌ها کوتاه‌اند ولی نباید خانه را بکشند؛ دو خط سقفِ منطقی است. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════ قیمت ══════════
   سکه کنار عدد باید دیده شود، وگرنه «۲۵۰» می‌تواند هر چیزی باشد. */
.price { display: inline-flex; align-items: center; gap: 5px; }
.price .ic { width: 20px; height: 20px; }

/* ══════════ آواتار ══════════ */
.avatar {
  position: relative;
  border-radius: 50%;
  background: #DFF0F5 center/cover no-repeat;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(10, 35, 50, .3);
  flex: 0 0 auto;
}
.avatar.f1 { border-color: var(--gold); box-shadow: 0 0 0 2px #C9901E, 0 3px 10px rgba(10,35,50,.3); }
.avatar.f2 { border-color: var(--teal); box-shadow: 0 0 0 2px #17707E, 0 3px 10px rgba(10,35,50,.3); }
.avatar.f3 { border-color: #7CC0D8; box-shadow: 0 0 0 2px #2F6E86, 0 0 0 5px rgba(124,192,216,.4), 0 3px 10px rgba(10,35,50,.3); }

/* ══════════ جلوه‌ها و مودال ══════════ */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }

.coin-fly {
  position: fixed; width: 22px; height: 22px;
  z-index: 61; pointer-events: none;
  will-change: transform, opacity;
}

.toast {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 62px);
  transform: translateX(-50%);
  z-index: 70;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(16, 44, 60, .94);
  color: #fff; font-size: 13.5px; font-weight: 900;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
  animation: toast-in .26s cubic-bezier(.3, 1.5, .5, 1);
  max-width: calc(var(--col) - 40px); text-align: center;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } }
.toast.out { animation: toast-out .22s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(-50%) translateY(-10px); } }

.modal-back {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 26, 38, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  padding: 18px;
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } }

.modal {
  width: 100%; max-width: 360px;
  max-height: calc(100dvh - 90px);
  display: flex; flex-direction: column;
  background: var(--cream);
  border-radius: var(--r-xl);
  border: 2px solid #fff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
  padding: 18px 16px 16px;
  animation: modal-in .3s cubic-bezier(.3, 1.4, .5, 1);
  text-align: center;
}
@keyframes modal-in { from { opacity: 0; transform: scale(.86) translateY(18px); } }
.modal h2 { margin: 0 0 4px; font-size: 21px; font-weight: 900; }
.modal p { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.6; }
.modal .modal-body { overflow-y: auto; scrollbar-width: none; }
.modal .modal-body::-webkit-scrollbar { display: none; }
.modal .modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* ستاره‌های صفحهٔ برد */
.win-stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0 10px; }
.win-stars .ic { width: 46px; height: 46px; }
.win-stars .s { opacity: .22; filter: grayscale(1); transform: scale(.85); }
.win-stars .on { animation: star-pop .45s cubic-bezier(.3, 1.7, .5, 1) both; }
.win-stars .on:nth-child(2) { animation-delay: .13s; }
.win-stars .on:nth-child(3) { animation-delay: .26s; }
@keyframes star-pop { from { opacity: 0; transform: scale(0) rotate(-40deg); } }

/* ══════════ ریز‌ابزارها ══════════ */
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.tiny { font-size: 11px; font-weight: 700; }
.sm { font-size: 12.5px; }
.big { font-size: 17px; font-weight: 900; }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.grow { flex: 1 1 auto; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* روی صفحهٔ کوتاه، هوا کم می‌شود تا همه‌چیز بدون اسکرول جا بماند */
@media (max-height: 700px) {
  :root { --topbar-h: 48px; --tabbar-h: 56px; }
  .screen { gap: 7px; padding: 7px 11px calc(7px + var(--safe-b)); }
  .btn { padding: 10px 14px; }
  .btn .btn-title { font-size: 16px; }
  .btn .btn-ic { width: 44px; height: 44px; }
  .btn .btn-ic .ic { width: 32px; height: 32px; }
  .board { gap: 6px; }
}
@media (max-height: 600px) {
  .btn .btn-sub { display: none; }
  .btn .btn-ic { width: 38px; height: 38px; }
  .btn .btn-ic .ic { width: 28px; height: 28px; }
}

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

/* ── ساعتِ مرحله ──
   زیر سی ثانیه قرمز می‌شود و نبض می‌گیرد: عددِ کوچکِ گوشهٔ صفحه به‌تنهایی دیده
   نمی‌شد و بازیکن یک‌باره با «وقت تمام شد» روبه‌رو می‌شد. */
.chip.timer {
  background: rgba(12, 38, 54, .55);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .22);
}

.chip.timer.warn {
  background: #E0483F;
  border-color: rgba(255, 255, 255, .7);
  animation: timer-pulse .9s ease-in-out infinite;
}

@keyframes timer-pulse {
  50% { transform: scale(1.08); }
}

/* کدام ستاره از کجا آمد */
.star-parts {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0;
  display: grid;
  gap: 3px;
  font-size: 13px;
  text-align: center;
}

.star-parts li { opacity: .4; }
.star-parts li.on { opacity: 1; font-weight: 800; }

/* هدیهٔ روز هفتمِ نوار رشته */
.day-gift .ic { width: 30px; height: 30px; }