/* ═══ صفحه‌ها ═══ */

/* ─────────────────  آغاز  ───────────────── */
.title{
  min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(12px,3vh,22px);
  padding:clamp(20px,5vh,48px) var(--pad);
  position:relative; text-align:center;
}
.title__glowring{
  position:absolute; top:clamp(4vh,7vh,10vh); left:50%;
  width:min(78vw,330px); aspect-ratio:1;
  transform-origin:center; margin-left:calc(min(78vw,330px) / -2);
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent, rgba(242,102,13,.30), transparent 42%, rgba(233,178,74,.22), transparent 72%);
  filter:blur(24px); pointer-events:none;
}
.title__bird{
  width:min(56vw,220px); aspect-ratio:1; position:relative;
  filter:drop-shadow(0 12px 44px rgba(242,102,13,.5));
  will-change:transform;
}
.title__bird svg{ width:100%; height:100% }
.ph__wl{ transform-origin:96px 90px; animation:flapL 4.2s var(--ease) infinite alternate }
.ph__wr{ transform-origin:104px 90px; animation:flapR 4.2s var(--ease) infinite alternate }
.ph__tail{ transform-origin:100px 100px; animation:tail 5.4s var(--ease) infinite alternate }
@keyframes flapL{ from{ transform:rotate(2deg) } to{ transform:rotate(-7deg) } }
@keyframes flapR{ from{ transform:rotate(-2deg) } to{ transform:rotate(7deg) } }
@keyframes tail{ from{ transform:rotate(-2.5deg) } to{ transform:rotate(2.5deg) } }

.title__kicker{
  font-size:12.5px; font-weight:700; letter-spacing:.34em;
  color:var(--gold); opacity:.8; margin-bottom:6px;
}
.title__main{ margin:0; display:flex; flex-direction:column; align-items:center; line-height:1 }
.title__haft{ font-size:clamp(24px,7.5vw,34px); font-weight:700; color:var(--cream); opacity:.92 }
.title__gh{
  font-size:clamp(44px,15vw,70px); font-weight:900; letter-spacing:-.02em; margin-top:2px;
  background:linear-gradient(100deg,var(--gold-2) 0%,var(--gold) 32%,var(--flame) 72%,var(--flame-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 26px rgba(242,102,13,.45));
}
.title__rule{
  width:120px; height:1px; margin:14px auto 10px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent); position:relative;
}
.title__rule::after{
  content:''; position:absolute; top:-3px; left:50%; width:7px; height:7px; margin-left:-3.5px;
  background:var(--gold); transform:rotate(45deg);
}
.title__sub{ margin:0; font-size:13.5px; color:var(--muted); max-width:31ch; line-height:1.9 }

.title__acts{ width:min(340px,100%); display:flex; flex-direction:column; gap:10px }
.title__row{ display:flex; gap:8px; justify-content:center }

.title__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  width:min(400px,100%); margin-top:4px;
}
.title__stat{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:9px 4px; border-radius:var(--r-sm);
  background:var(--glass); border:1px solid rgba(233,178,74,.13);
}
.title__statN{ font-size:17px; font-weight:900; color:var(--gold-2) }
.title__statL{ font-size:10px; color:var(--faint); font-weight:600 }

.abt{ display:flex; flex-direction:column; gap:8px; margin:4px 0 12px }
.abt__r{
  display:flex; flex-direction:column; gap:3px;
  padding:10px 12px; border-radius:var(--r-sm);
  background:var(--glass); border:1px solid var(--line);
}
.abt__r b{ color:var(--gold-2); font-size:13.5px }
.abt__r span{ font-size:12.5px; color:var(--muted); line-height:1.7 }

.setrow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 13px; border-radius:var(--r-sm);
  background:var(--glass); border:1px solid var(--line); font-size:14px;
}
.sw{
  width:46px; height:27px; border-radius:99px; flex:0 0 auto; position:relative; cursor:pointer;
  background:rgba(255,244,228,.10); border:1px solid var(--line); transition:background .22s, border-color .22s;
}
.sw__k{
  position:absolute; top:2.5px; right:2.5px; width:20px; height:20px; border-radius:50%;
  background:var(--faint); transition:transform .24s var(--ease-back), background .22s;
}
.sw.is-on{ background:rgba(242,102,13,.28); border-color:var(--line-2) }
.sw.is-on .sw__k{ transform:translateX(-19px); background:linear-gradient(140deg,var(--gold-2),var(--flame)) }

/* ─────────────────  نقشهٔ سفر  ───────────────── */
.map{ padding-top:8px }
.map__hero{ margin-bottom:4px }
.map__heroT{ font-size:15px; font-weight:800; color:var(--gold-2); margin-bottom:3px }
.map__heroPct{ font-size:26px; font-weight:900; color:var(--flame-2) }

.map__path{ display:flex; flex-direction:column; gap:0 }

.knode{ position:relative; padding-bottom:4px }
.knode__link{
  position:absolute; top:-14px; right:44px; width:2px; height:20px;
  background:linear-gradient(180deg,transparent,var(--line-2));
}
.knode__link::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg,var(--gold) 0 3px,transparent 3px 7px);
  opacity:.5;
}
.knode__btn{
  width:100%; display:flex; align-items:center; gap:13px; text-align:right;
  padding:13px; border-radius:var(--r-lg); margin-bottom:12px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--kc) 26%, transparent), transparent 70%),
    linear-gradient(150deg, rgba(24,20,44,.80), rgba(11,10,22,.72));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--kc) 42%, transparent);
  color:var(--ink); font-family:inherit; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .18s var(--ease-back), border-color .25s, box-shadow .25s;
}
.knode__btn:active:not(:disabled){ transform:scale(.985) }
.knode__btn:not(:disabled):hover{ box-shadow:0 8px 30px color-mix(in srgb, var(--kc) 25%, transparent) }
.knode.is-locked .knode__btn{ opacity:.42; filter:grayscale(.65); cursor:not-allowed }
.knode.is-done .knode__btn{ border-color:color-mix(in srgb, var(--kc) 70%, transparent) }

.knode__med{ flex:0 0 auto; width:62px; height:62px }
.knode__med svg{ width:100%; height:100% }
.knode__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px }
.knode__n{
  font-size:11px; font-weight:900; color:var(--kc);
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--kc) 24%, transparent); flex:0 0 auto;
}
.knode__name{ font-size:15.5px; font-weight:800; letter-spacing:-.01em }
.knode__seal{ color:#7BD8A6; display:grid; place-items:center }
.knode__sub{ font-size:12px; color:var(--muted) }
.knode__meta{ display:flex; align-items:center; gap:7px; margin-top:2px }
.knode__bar{ margin-top:5px }
.knode__lock{
  position:absolute; top:12px; left:12px; color:var(--faint);
  display:grid; place-items:center;
}
.map__foot{ margin:18px 0 4px }

/* ── پاداش روزانه (فاز ۲) ── */
.daily{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:10px 0 12px; padding:10px 12px;
  border-radius:14px; border:1px solid rgba(233,178,74,.28);
  background:linear-gradient(135deg, rgba(242,102,13,.12), rgba(11,10,22,.55));
}
.daily--done{ opacity:.85; justify-content:flex-start; gap:8px }
.daily__tag{ font-size:12px; font-weight:800; color:var(--gold-2) }
.daily__hint{ font-size:11px; color:var(--muted) }
.daily__body{ display:flex; flex-direction:column; gap:2px; min-width:0 }

/* ── ماموریت مکان‌محور (فاز ۳) ── */
.mission{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 12px; padding:10px 12px;
  border-radius:14px; border:1px solid rgba(155,168,240,.28);
  background:linear-gradient(135deg, rgba(91,108,240,.14), rgba(11,10,22,.55));
}
.mission--done{ opacity:.85 }
.mission__tag{ font-size:12px; font-weight:800; color:#9BA8F0 }
.mission__hint{ font-size:11px; color:var(--muted) }
.mission__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 }
.mission__preview{ width:72px; height:72px; margin:8px auto; opacity:.9 }
.mission__preview svg{ width:100%; height:100% }

/* ── لیگ و دعوت (فاز ۴) ── */
.league, .invite{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 12px; padding:10px 12px; border-radius:14px;
}
.league{
  border:1px solid rgba(120,210,170,.28);
  background:linear-gradient(135deg, rgba(46,168,120,.14), rgba(11,10,22,.55));
}
.invite{
  border:1px solid rgba(240,180,120,.28);
  background:linear-gradient(135deg, rgba(200,120,60,.14), rgba(11,10,22,.55));
}
.league__tag, .invite__tag{ font-size:12px; font-weight:800 }
.league__tag{ color:#78D2AA }
.invite__tag{ color:#F0B478 }
.league__hint, .invite__hint{ font-size:11px; color:var(--muted) }
.league__body, .invite__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 }
.leaderboard__list{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto }
.leaderboard__row{
  display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center;
  padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.04);
}
.leaderboard__row.is-me{ border:1px solid rgba(233,178,74,.45); background:rgba(242,102,13,.12) }

/* ── اکوسیستم (فاز ۵) ── */
.passport, .school, .live, .nfc{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 12px; padding:10px 12px; border-radius:14px;
}
.passport{ border:1px solid rgba(120,170,240,.28); background:linear-gradient(135deg, rgba(80,120,220,.14), rgba(11,10,22,.55)) }
.school{ border:1px solid rgba(240,200,120,.28); background:linear-gradient(135deg, rgba(180,140,60,.14), rgba(11,10,22,.55)) }
.live{ border:1px solid rgba(220,120,200,.28); background:linear-gradient(135deg, rgba(180,80,160,.14), rgba(11,10,22,.55)) }
.nfc{ border:1px solid rgba(140,220,255,.28); background:linear-gradient(135deg, rgba(60,160,220,.14), rgba(11,10,22,.55)) }
.passport__tag{ color:#8CB4F0; font-size:12px; font-weight:800 }
.school__tag{ color:#F0D878; font-size:12px; font-weight:800 }
.live__tag{ color:#E0A0D8; font-size:12px; font-weight:800 }
.nfc__tag{ color:#8CE0FF; font-size:12px; font-weight:800 }
.passport__hint, .school__hint, .live__hint, .nfc__hint{ font-size:11px; color:var(--muted) }
.passport__body, .school__body, .live__body, .nfc__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 }

/* ─────────────────  صفحهٔ خان  ───────────────── */
.khan__hero{ display:flex; gap:14px; align-items:flex-start; margin-bottom:6px }
.khan__heroMed{ flex:0 0 auto; width:66px; height:66px; opacity:.9 }
.khan__heroMed svg{ width:100%; height:100% }
.khan__heroBody{ flex:1 1 auto; min-width:0 }
.khan__kicker{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--kc); opacity:.9 }
.khan__t{ margin:3px 0 2px; font-size:21px; font-weight:900; letter-spacing:-.015em }
.khan__sub{ margin:0 0 9px; font-size:12.5px; color:var(--muted) }
.khan__intro{ margin:0; font-size:13px; line-height:2; color:var(--cream); opacity:.9 }

.chap{ margin-top:6px }
.chap__brief{ margin:-4px 0 10px; font-size:12.5px; color:var(--faint) }
.chap__list{ display:flex; flex-direction:column; gap:8px }

.srow{
  width:100%; display:flex; gap:11px; align-items:stretch; text-align:right;
  padding:12px; border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(24,20,44,.78),rgba(12,10,24,.70));
  border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--ink); font-family:inherit; cursor:pointer; position:relative;
  transition:transform .16s var(--ease-back), border-color .22s, background .22s;
}
.srow:active:not(:disabled){ transform:scale(.985) }
.srow.is-done{ border-color:rgba(75,193,126,.30); background:rgba(75,193,126,.055) }
.srow.is-locked{ opacity:.4; cursor:not-allowed }
.srow__badge{ flex:0 0 auto; display:flex; align-items:flex-start }
.srow__n{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--kc,#E9B24A) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--kc,#E9B24A) 40%, transparent);
  font-size:13px; font-weight:800; color:var(--gold-2);
}
.srow__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px }
.srow__top{ display:flex; align-items:center; gap:8px }
.srow__name{ font-size:14.5px; font-weight:800; flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.srow__type{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; color:var(--muted);
  padding:2px 7px; border-radius:99px; background:rgba(255,244,228,.06);
}
.srow__type svg{ width:12px; height:12px }
.srow__goal{ font-size:12px; color:var(--muted); line-height:1.7 }
.srow__foot{ display:flex; align-items:center; gap:8px; margin-top:3px }
.srow__rw{ display:inline-flex; gap:6px }
.rw{ font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; gap:3px }
.rw::before{ content:''; width:9px; height:9px; border-radius:50%; display:inline-block }
.rw--par{ color:var(--flame-2) }   .rw--par::before{ background:var(--flame) }
.rw--bazr{ color:var(--gold-2) }   .rw--bazr::before{ background:var(--gold) }
.srow__card{ color:var(--rc,var(--gold)); display:grid; place-items:center; opacity:.85 }
.srow__lock{ position:absolute; top:13px; left:13px; color:var(--faint) }
/* قفل جای نشانِ نوعِ مرحله می‌نشیند — وگرنه رویش می‌افتد */
.srow.is-locked .srow__type{ visibility:hidden }

.khan__done{ margin-top:20px; text-align:center }
.khan__doneT{
  font-size:17px; font-weight:900; margin-bottom:8px;
  background:linear-gradient(100deg,var(--gold-2),var(--flame-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ─────────────────  کارتِ میراث  ───────────────── */
.ctile{
  display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden;
  border-radius:var(--r-md); border:1px solid color-mix(in srgb, var(--rc) 34%, transparent);
  background:#0E0C1A; cursor:pointer; font-family:inherit; color:var(--ink);
  transition:transform .2s var(--ease-back), box-shadow .25s, border-color .25s;
  position:relative;
}
.ctile:active{ transform:scale(.96) }
.ctile:not(.is-locked):hover{ box-shadow:0 8px 26px var(--rg); border-color:var(--rc) }
.ctile.is-locked{ opacity:.55; border-color:rgba(255,244,228,.09) }
.ctile__art{ width:100%; aspect-ratio:1; overflow:hidden; display:block }
.ctile__art svg{ width:100%; height:100%; display:block }
.ctile__foot{
  display:flex; align-items:center; gap:5px; padding:7px 8px;
  background:linear-gradient(0deg, rgba(0,0,0,.4), transparent);
  border-top:1px solid color-mix(in srgb, var(--rc) 20%, transparent);
}
.ctile__name{
  flex:1 1 auto; min-width:0; font-size:11.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
}
.ctile__x{ font-size:10px; font-weight:800; color:var(--rc) }
.ctile--legend::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:var(--r-md);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.20) 50%,transparent 62%);
  transform:translateX(-110%); animation:sheen 5s var(--ease) infinite;
}

.cdet{ display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center }
.cdet__art{
  width:min(240px,72vw); aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  box-shadow:0 14px 46px var(--rg);
}
.cdet__art svg{ width:100%; height:100%; display:block }
.cdet__name{ margin:0; font-size:21px; font-weight:900; color:var(--ink) }
.cdet__meta{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:4px; flex-wrap:wrap }
.cdet__rarity{ display:inline-flex; align-items:center; gap:3px; color:var(--rc); font-size:11.5px; font-weight:800 }
.cdet__rarity span{ margin-right:3px }
.cdet__daftar{ font-size:11.5px; color:var(--faint) }
.cdet__tags{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center }
.cdet__lore{ margin:2px 0 0; font-size:13.5px; line-height:2; color:var(--cream) }
.cdet__fact{
  display:flex; gap:8px; align-items:flex-start; text-align:right;
  padding:11px 13px; border-radius:var(--r-md);
  background:rgba(233,178,74,.07); border:1px solid var(--line);
  font-size:12.5px; line-height:1.9; color:var(--muted);
}
.cdet__factIcon{ flex:0 0 auto; color:var(--gold); margin-top:3px }
.cdet__foot{ display:flex; align-items:center; gap:9px; margin-top:2px }

/* ─────────────────  دفتر میراث  ───────────────── */
.codex__tabs{
  display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.codex__tabs::-webkit-scrollbar{ display:none }
.dtab{
  flex:0 0 auto; display:flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:99px; cursor:pointer; font-family:inherit;
  background:var(--glass); border:1px solid var(--line); color:var(--muted);
  font-size:12.5px; font-weight:700; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.dtab.is-on{
  background:color-mix(in srgb, var(--dc) 22%, transparent);
  border-color:color-mix(in srgb, var(--dc) 55%, transparent); color:var(--ink);
}
.dtab__n{ font-size:10px; opacity:.75 }
.codex__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:9px }
.codex__hd{ display:flex; gap:12px; align-items:center; margin-bottom:10px }
.codex__hdBadge{ flex:0 0 auto; width:56px; height:56px }
.codex__hdBadge svg{ width:100%; height:100% }
.codex__hdT{ font-size:16px; font-weight:800; color:var(--gold-2) }
.codex__hdD{ font-size:12px; color:var(--muted); line-height:1.75; margin-top:2px }

/* ─────────────────  دهکدهٔ سه‌بعدی  ───────────────── */
.vil3d{ position:absolute; inset:0; overflow:hidden }
.vil3d__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; touch-action:none; cursor:grab;
}
.vil3d__canvas:active{ cursor:grabbing }

.vil3d__top{ position:absolute; top:8px; left:var(--pad); right:var(--pad); pointer-events:none }
.vil3d__era{
  display:flex; align-items:center; gap:11px; padding:10px 13px;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(24,20,44,.82),rgba(11,10,22,.72));
  border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-1);
}
.vil3d__lvl{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle,rgba(242,102,13,.34),transparent 72%);
  border:1.5px solid var(--line-2); font-size:17px; font-weight:900; color:var(--gold-2);
}
.vil3d__eraN{ font-size:14px; font-weight:900; color:var(--gold-2) }
.vil3d__eraD{ font-size:11px; color:var(--muted); margin-top:1px }
.vil3d__arc{ flex:0 0 auto; display:flex; gap:3px; align-items:center }
.vil3d__arcSeg{
  width:22px; height:5px; border-radius:3px; overflow:hidden; position:relative;
  background:rgba(6,5,14,.6); box-shadow:inset 0 0 0 1px rgba(233,178,74,.16);
}
.vil3d__arcSeg::after{
  content:''; position:absolute; inset:0; width:var(--w,0%);
  background:linear-gradient(90deg,var(--flame),var(--gold));
  transition:width .6s var(--ease);
}

.vil3d__hint{
  position:absolute; top:74px; left:50%; transform:translateX(-50%);
  padding:7px 14px; border-radius:99px; white-space:nowrap;
  background:rgba(9,8,20,.78); border:1px solid var(--line);
  font-size:11.5px; color:var(--muted); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.vil3d__hint.is-out{ opacity:0; transform:translateX(-50%) translateY(-8px) }

.vil3d__panel{
  position:absolute; left:var(--pad); right:var(--pad); bottom:10px;
  padding:13px; border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(24,20,44,.90),rgba(11,10,22,.86));
  border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-2);
  transition:transform .34s var(--ease-back), opacity .3s;
}
.vil3d__panel:not(.is-open){ padding:9px 13px; text-align:center }
.vil3d__panel.is-open{ animation:panelUp .38s var(--ease-back) }
@keyframes panelUp{ from{ transform:translateY(20px); opacity:0 } to{ transform:none; opacity:1 } }
.vil3d__idle{ display:block }
.vil3d__close{
  position:absolute; top:9px; left:9px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; z-index:2;
  background:var(--glass); border:1px solid var(--line); color:var(--muted);
  font-size:13px; cursor:pointer; line-height:1;
}
/* حاشیهٔ چپ جای دکمهٔ بستن را باز می‌گذارد تا روی برچسبِ سطح نیفتد */
.vil3d__card{ display:flex; gap:12px; align-items:flex-start; padding-left:34px }
.vil3d__icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:rgba(233,178,74,.10); border:1px solid var(--line); color:var(--gold);
}
.vil3d__icon svg{ width:28px; height:28px }
.vil3d__name{ font-size:15px; font-weight:800; flex:1 1 auto; min-width:0 }
.vil3d__desc{ font-size:11.5px; color:var(--muted); line-height:1.75; margin-top:3px }
.vil3d__eff{ font-size:11px; color:var(--gold-2); font-weight:700; margin-top:5px }
.vil3d__next{
  display:flex; gap:6px; align-items:baseline; margin-top:6px; flex-wrap:wrap;
  padding-top:6px; border-top:1px dashed rgba(233,178,74,.20);
}

/* ─────────────────  دهکده (حالتِ پشتیبان)  ───────────────── */
.vil__era{
  display:flex; align-items:center; gap:10px; padding:13px;
  border-radius:var(--r-lg); margin-bottom:12px;
  background:linear-gradient(150deg,rgba(233,178,74,.12),rgba(242,102,13,.05));
  border:1px solid var(--line);
}
.vil__eraN{ font-size:15px; font-weight:900; color:var(--gold-2) }
.vil__eraD{ font-size:12px; color:var(--muted); line-height:1.7; margin-top:2px }
.vil__lvl{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle,rgba(242,102,13,.30),transparent 70%);
  border:1.5px solid var(--line-2); font-size:19px; font-weight:900; color:var(--gold-2);
}
.vil__grid{ display:flex; flex-direction:column; gap:9px }
.bcard{
  display:flex; gap:12px; align-items:center; padding:12px;
  border-radius:var(--r-md); background:var(--glass); border:1px solid var(--line);
}
.bcard.is-locked{ opacity:.45 }
.bcard__icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:rgba(233,178,74,.10); border:1px solid var(--line); color:var(--gold);
}
.bcard__icon svg{ width:26px; height:26px }
.bcard__b{ flex:1 1 auto; min-width:0 }
.bcard__n{ font-size:14px; font-weight:800 }
.bcard__d{ font-size:11.5px; color:var(--muted); line-height:1.7; margin-top:2px }
.bcard__e{ font-size:11px; color:var(--gold-2); margin-top:4px; font-weight:700 }
.bcard__act{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px }
.bcard__lv{ font-size:10px; color:var(--faint); font-weight:700 }

/* ─────────────────  بازارچه  ───────────────── */
.bz__note{
  padding:13px; border-radius:var(--r-md); margin-bottom:14px;
  background:rgba(14,122,140,.10); border:1px solid rgba(14,122,140,.30);
  font-size:12.5px; line-height:1.9; color:#9FE0EC;
}
.bz__grid{ display:flex; flex-direction:column; gap:9px }
.offer{
  display:flex; gap:12px; align-items:center; padding:12px;
  border-radius:var(--r-md); background:var(--glass); border:1px solid var(--line);
}
.offer__med{ flex:0 0 auto; width:52px; height:52px }
.offer__med svg{ width:100%; height:100% }
.offer__b{ flex:1 1 auto; min-width:0 }
.offer__n{ font-size:14px; font-weight:800 }
.offer__d{ font-size:11.5px; color:var(--muted); line-height:1.7; margin-top:2px }
.offer__p{ display:flex; gap:8px; margin-top:5px }

/* ─────────────────  عمومیِ مینی‌گیم  ───────────────── */
/* ناحیهٔ امنِ دستگاه را خودِ .app اعمال می‌کند؛ اینجا دوباره اضافه نمی‌شود */
.mg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:8px var(--pad) 12px;
}
.mg__bar{ flex:0 0 auto; display:flex; align-items:center; gap:10px; margin-bottom:10px }
.mg__quit{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--glass); border:1px solid var(--line); color:var(--muted); cursor:pointer;
}
.mg__info{ flex:1 1 auto; min-width:0 }
.mg__name{ font-size:13.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mg__goal{ font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mg__timer{
  flex:0 0 auto; min-width:56px; text-align:center;
  padding:6px 10px; border-radius:99px; font-size:14px; font-weight:900;
  background:var(--glass); border:1px solid var(--line); color:var(--gold-2);
  font-variant-numeric:tabular-nums;
}
.mg__timer.is-warn{ color:#FF9A8B; border-color:rgba(228,84,63,.5); animation:tick .6s steps(2) infinite }
@keyframes tick{ 50%{ opacity:.55 } }
.mg__prog{ flex:0 0 auto; margin-bottom:12px }
.mg__stage{ flex:1 1 auto; min-height:0; position:relative; display:flex; flex-direction:column }
.mg__foot{ flex:0 0 auto; margin-top:10px }

.mg__score{
  position:absolute; top:0; left:0; display:flex; gap:6px; z-index:3;
}
.chip{
  padding:4px 10px; border-radius:99px; font-size:11.5px; font-weight:800;
  background:rgba(11,10,22,.7); border:1px solid var(--line); color:var(--gold-2);
}
.chip--streak{ color:var(--flame-2); border-color:rgba(242,102,13,.45) }