/* تکسو — سیستم طراحی «Calm Light» (توکن‌ها + کامپوننت‌های مشترک)
   یک‌بار ساخته می‌شه، همه‌جا لود می‌شه — طبق docs/design/texo-design-handoff.md بخش ۴.
   هر صفحه این فایل رو با <link rel="stylesheet" href="/theme.css"> لود می‌کنه و روش
   CSS مخصوص خودش رو اضافه می‌کنه. */

@font-face{
  font-family: 'Farhang2';
  src: url('/fonts/Farhang2VF.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root{
  --cream:        #F2EDE1;
  --cream-deep:   #E7DFCC;
  --cream-deeper: #DCD2B8;
  --ink:          #12100F;
  --graphite:     #2F2C28;
  --green:        #3F8F4F;
  --green-soft:   #E4EEE3;
  --gold:         #D99A2B;
  --gold-soft:    #F7ECD8;
  --orange:       #E5561D;
  --line:         rgba(18,16,15,0.12);

  --shadow-tile: 0 2px 0 rgba(18,16,15,0.08), 0 12px 22px rgba(47,44,40,0.10);
  --shadow-card: 0 2px 0 rgba(18,16,15,0.06), 0 16px 30px rgba(47,44,40,0.09);
  --shadow-sheet: 0 2px 0 rgba(18,16,15,0.06), 0 18px 32px rgba(47,44,40,0.10);

  --font-ui: 'Farhang2', sans-serif;
  --font-display: 'Farhang2', sans-serif;
}

*{ box-sizing:border-box; }

/* ── ساختار پایه صفحه ───────────────────── */
.screen{ width:100%; max-width:420px; margin:0 auto; }

.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.topbar.with-back{ justify-content:flex-start; gap:12px; }

.icon-btn, .back-btn{
  width:34px; height:34px; border-radius:10px;
  background:#fff; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--graphite); cursor:pointer; flex-shrink:0;
}
.icon-btn svg, .back-btn svg{ width:16px; height:16px; }

/* آیکون‌های خطی (Tabler، sprite با <use>) — همه‌جا استروک، بدون پرشدگی */
.svgic{ stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.page-title{ font-size:19px; font-weight:900; }

.section-label{
  font-size:13px; font-weight:700; color: rgba(18,16,15,0.45);
  margin: 6px 4px 12px;
}

/* ── گلیف برند چندکاره (شبکه نامتقارن ۳×۳) ─────────────────────
   سه حالت: استاتیک (پیش‌فرض)، جشن (celebrate)، ساکت/باخت (quiet) */
.glyph{
  display:grid;
  grid-template-columns: 1.3fr 0.7fr 1fr;
  grid-template-rows: 1fr 0.8fr 1.2fr;
  /* گپ و شعاع گردی خونه‌ها به‌جای px به درصد تبدیل شدن (نسبت به سایز خود .glyph)
     تا وقتی همین گلیف تو سایزهای خیلی متفاوت (۲۰px نوار پایین تا ۹۶px+ شیت جشن)
     استفاده می‌شه، تناسبش با فایل‌های مرجع (texo-logo/texo-game-icons، طراحی‌شده
     رو بوم ۵۱۲px) عوض نشه — قبلا با مقدار ثابت پیکسلی، هرچی گلیف کوچیک‌تر
     می‌شد، انحنا/فاصله نسبت به بقیه بزرگ‌تر به‌نظر می‌رسید. مقدار گپ از خود
     texo-logo (۸ واحد از ۳۰۰) گرفته شده: 8/300 ≈ 2.667%. */
  gap: 2.667%;
  /* برندمارک است، نه متن — نباید مثل محتوای صفحه با dir=rtl آینه بشه. بدون این،
     CSS Grid با جهت صفحه ستون‌ها رو از راست شروع می‌کنه و کل گلیف (و مخصوصا
     نشانه اختصاصی هر بازی تو c6) برعکس فایل‌های مرجع (texo-logo/texo-game-icons)
     دیده می‌شه. */
  direction: ltr;
}
/* پیش‌فرض عمومی برای spanهای بدون کلاس c1..c6 (مثل آیکون خاکستری «بازی بعدی»
   تو hub/me که هنوز طراحی نشدن) — خونه‌های واقعی زیر با شعاع دقیق‌تر خودشون
   override‌ش می‌کنن. */
.glyph span{ border-radius: 10%; }
/* شعاع هر خونه = ۱۶٪ از کوچیک‌ترین بعدش (طبق texo-logo/README.md) — چون هر
   خونه نسبت عرض‌به‌ارتفاع متفاوتی داره (بر اساس grid-template-columns/rows بالا)،
   برای هرکدوم یه جفت درصد افقی/عمودی جبران‌شده لازمه تا شعاع واقعا دایره‌ای
   (نه بیضی) بمونه — سینتکس «border-radius: افقی% / عمودی%». */
.glyph .c1{ background: var(--green); border-radius: 12.3% / 16%; }
.glyph .c2{ background: var(--gold); grid-column: 2 / 4; border-radius: 9.4% / 16%; }
.glyph .c3{ background: var(--ink); border-radius: 9.9% / 16%; }
.glyph .c6{ background: var(--cream-deep); grid-column: 2 / 4; grid-row: 2; border-radius: 7.5% / 16%; }
.glyph .c4{ background: var(--orange); grid-column: 1 / 3; border-radius: 9.6% / 16%; }
.glyph .c5{ background: var(--cream-deep); border-radius: 16% / 13.3%; }

.glyph.celebrate span{
  opacity:0; transform: scale(.4);
  animation: glyphCellIn .4s cubic-bezier(.2,.7,.3,1.3) forwards;
}
.glyph.celebrate .c1{ animation-delay:.05s; }
.glyph.celebrate .c2{ animation-delay:.18s; }
.glyph.celebrate .c3{ animation-delay:.31s; }
.glyph.celebrate .c6{ animation-delay:.44s; }
.glyph.celebrate .c4{ animation-delay:.57s; }
.glyph.celebrate .c5{ animation-delay:.70s; }
/* شیت‌های پیروزی/جشن نشان طبق مکاپ خودشان c5 را طلایی می‌خواهند؛ بقیه جاها cream-deep می‌ماند */
.sheet .glyph.celebrate .c5{ background: var(--gold); }
@keyframes glyphCellIn{ to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  .glyph.celebrate span{ animation:none; opacity:1; transform:none; }
}

.glyph.quiet{ opacity:0.55; }
.glyph.quiet span{ background: var(--graphite) !important; }

/* نشانه اختصاصی هر بازی — خونه c6 به‌جای بلوک خنثی، یه علامت ماسک‌شده نشون
   می‌ده (میله برای واژه‌چی، مساوی برای حساب‌چی). عمدا به‌شکل فایل SVG جدا
   (نه هندسه inline تو CSS) تا بعدا فقط با جایگزین‌کردن همون فایل (وقتی حرف
   واقعی به‌جای میله موقت آماده شد) بدون دست‌زدن به این CSS آپدیت بشه.
   (مسیرچی: مسیر پله‌ای از نقطه پر به نقطه توخالی.) */
.glyph.game-vajehchi .c6,
.glyph.game-hesabchi .c6,
.glyph.game-masirchi .c6{ background: transparent; position: relative; }
.glyph.game-vajehchi .c6::after,
.glyph.game-hesabchi .c6::after,
.glyph.game-masirchi .c6::after{
  content: ""; position: absolute; inset: 0;
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.glyph.game-vajehchi .c6::after{
  -webkit-mask-image: url(/icons/marks/vajehchi-mark.svg?v=1);
  mask-image: url(/icons/marks/vajehchi-mark.svg?v=1);
}
.glyph.game-hesabchi .c6::after{
  -webkit-mask-image: url(/icons/marks/hesabchi-mark.svg?v=1);
  mask-image: url(/icons/marks/hesabchi-mark.svg?v=1);
}
.glyph.game-masirchi .c6::after{
  -webkit-mask-image: url(/icons/marks/masirchi-mark.svg?v=1);
  mask-image: url(/icons/marks/masirchi-mark.svg?v=1);
}

/* ── Tile خونه بازی — اندازه از --tile-w/--tile-h رو خود صفحه ست می‌شه ───────────────────── */
.tile{
  width: var(--tile-w, 58px); height: var(--tile-h, 58px);
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-size: var(--tile-font, 26px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background:#fff;
  border: 2px solid var(--line);
  color: var(--ink);
  transition: transform .5s cubic-bezier(.4,.2,.2,1), background .5s, border-color .5s, color .5s;
}
.tile.correct{ background: var(--green); border-color: var(--green); color:#fff; box-shadow: var(--shadow-tile); }
.tile.present{ background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: var(--shadow-tile); }
.tile.absent{ background: var(--cream-deep); border-color: var(--cream-deep); color: rgba(18,16,15,0.5); }
.tile.active{ border-color: var(--ink); box-shadow: var(--shadow-tile); }
.tile.flip{ animation: tileFlip .5s ease forwards; }
@keyframes tileFlip{ 0%{transform:rotateX(0)} 50%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }
@media (prefers-reduced-motion: reduce){ .tile.flip{ animation:none; } }

/* ── Badge (نشان) — کاملا تایپوگرافیک، بدون آیکون مدال ───────────────────── */
.badge-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.badge{
  aspect-ratio:1; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; position:relative;
}
.badge.earned{ background: var(--ink); box-shadow: var(--shadow-card); }
.badge.locked{ background:#fff; border:1.5px dashed var(--line); }
.badge-num{ font-family: var(--font-display); font-weight:900; font-size:20px; font-variant-numeric: tabular-nums; }
.badge.earned .badge-num{ color: var(--cream); }
.badge.locked .badge-num{ color: rgba(18,16,15,0.25); }
.badge-label{ font-size:10.5px; font-weight:700; text-align:center; line-height:1.3; padding:0 4px; }
.badge.earned .badge-label{ color: rgba(242,237,225,0.7); }
.badge.locked .badge-label{ color: rgba(18,16,15,0.35); }
.badge.earned.accent-gold{ background: var(--gold); }
.badge.earned.accent-gold .badge-num{ color: var(--ink); }
.badge.earned.accent-gold .badge-label{ color: rgba(18,16,15,0.55); }
.badge .lock-icon{ position:absolute; top:8px; inset-inline-start:8px; width:14px; height:14px; color: rgba(18,16,15,0.3); }

/* ── سوییچ سفارشی ───────────────────── */
/* اپ همیشه RTL است — عمدا از right فیزیکی استفاده می‌شود، نه inset-inline-end،
   چون با transform جهت‌دار ترکیب می‌شود و منطق on/off را ساده نگه می‌دارد. */
.switch{ width:44px; height:26px; border-radius:20px; background: var(--cream-deep); position:relative; cursor:pointer; flex-shrink:0; transition: background .2s; }
.switch.on{ background: var(--ink); }
.switch-knob{ position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.switch.on .switch-knob{ transform: translateX(-18px); }

/* ── چیپ زنجیره (streak) ───────────────────── */
.streak-chip{
  display:flex; align-items:center; gap:7px;
  background: var(--gold-soft); border:1px solid var(--line);
  padding:6px 13px; border-radius:20px;
  font-weight:700; font-size:14px; font-variant-numeric: tabular-nums;
  color: var(--graphite);
}
.streak-chip svg{ width:15px; height:15px; }

/* ── دکمه‌های مشترک ───────────────────── */
.btn-primary{
  width:100%; height:50px; border-radius:14px;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-ui); font-size:15px; font-weight:700;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-secondary{
  width:100%; height:50px; border-radius:14px;
  background: var(--cream); color: var(--graphite);
  font-family: var(--font-ui); font-size:14px; font-weight:700;
  border:none; cursor:pointer;
}

/* ── نوار ناوبری پایین (بازی/دوستان/من) — شناور، با فاصله از لبه‌ها.
   فقط رو صفحات سطح‌بالا، نه رو خود بازی‌ها یا صفحات پوش‌شده مثل تنظیمات/اعتبارات ───────────────────── */
.tabbar-space{ height: 96px; } /* جای خالی معادل، تا محتوا زیر نوار شناور گم نشه */
.tabbar{
  position:fixed; bottom: calc(16px + env(safe-area-inset-bottom,0px));
  left:16px; right:16px; max-width:448px; margin:0 auto;
  display:flex; justify-content:space-around; align-items:center;
  background:#fff; border-radius:24px; border:1px solid var(--line);
  padding: 10px 6px;
  box-shadow: var(--shadow-sheet);
  z-index:30;
}
.tab-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 18px; border-radius:16px;
  color: rgba(18,16,15,0.4); font-size:11px; font-weight:700;
  cursor:pointer; text-decoration:none; flex:1; max-width:120px;
}
.tab-item svg{ width:22px; height:22px; }
.tab-item .glyph{ width:20px; height:20px; }
.tab-item.active{ color: var(--ink); background: var(--cream); }

/* ── گروه ردیفی (تنظیمات و مشابه) — عمدا list-row نامیده شده، نه row،
   چون board واژه‌چی/حساب‌چی هم از کلاس row برای ردیف حدس استفاده می‌کنه و
   یه‌بار این باعث افتادن خط‌جداکننده ناخواسته رو ردیف‌های تخته شد ───────────────────── */
.group{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.list-row{ display:flex; align-items:center; justify-content:space-between; padding:15px 16px; }
.list-row + .list-row{ border-top:1px solid var(--line); }
.list-row-text{ flex:1; padding-inline-start:12px; }
.list-row-title{ font-size:14.5px; font-weight:700; }
.list-row-sub{ font-size:12px; color: rgba(18,16,15,0.5); margin-top:2px; }
.list-row-value{ font-size:13.5px; color: rgba(18,16,15,0.45); }
.list-row-chevron{ color: rgba(18,16,15,0.3); display:flex; }
.list-row-chevron svg{ width:14px; height:14px; }
.list-row.clickable{ cursor:pointer; }
.soon-tag{ font-size:11px; font-weight:700; color: rgba(18,16,15,0.4); background: var(--cream-deep); padding:4px 10px; border-radius:20px; }