/* تکسو — سیستم طراحی «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: 'Vazirmatn', sans-serif;
  --font-display: 'Farhang2', 'Vazirmatn', 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;
  gap:2.5px;
}
.glyph span{ border-radius:3px; }
.glyph .c1{ background: var(--green); }
.glyph .c2{ background: var(--gold); grid-column: 2 / 4; }
.glyph .c3{ background: var(--ink); }
.glyph .c4{ background: var(--orange); grid-column: 1 / 3; }
.glyph .c5{ background: var(--cream-deep); }

.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 .c4{ animation-delay:.44s; }
.glyph.celebrate .c5{ animation-delay:.57s; }
/* شیت‌های پیروزی/جشنِ نشان طبقِ مکاپِ خودشان 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; }

/* ── 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; }