/* ═══ آبادیِ سه‌بعدیِ افقی ═══ */

.v3{
  position:fixed; inset:0; overflow:hidden;
  background:#0B0A16;
  transform-origin:center center;
  z-index:30;
}
/* حالتِ چرخیده: ابعاد جابه‌جا و ۹۰ درجه چرخیده (برای iOS که قفلِ جهت ندارد).
   نکته: سند RTL است؛ اگر right:0 باز بماند، مرورگر لبهٔ راست را لنگر
   می‌گیرد و لایهٔ عریض به بیرونِ صفحه می‌رود. پس صریحاً چپ را لنگر می‌کنیم. */
.v3.is-rotated{
  position:fixed;
  inset:0 auto auto 0;          /* top:0  right:auto  bottom:auto  left:0 */
  transform-origin:center center;
}

.v3__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; touch-action:none; cursor:grab;
}
.v3__canvas:active{ cursor:grabbing }

/* ── دکمهٔ بازگشت به نقشه — گوشهٔ بالا (هم‌تراز با HUD) ── */
.v3__exit{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top, 0px));
  inset-inline-end:12px;
  z-index:7;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px 8px 10px;
  border-radius:999px;
  background:rgba(11,10,22,.84); border:1px solid var(--line); color:var(--gold-2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-family:inherit; font-size:12.5px; font-weight:800; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  cursor:pointer;
  transition:transform .18s var(--ease-back), background .2s;
}
.v3__exit:active{ transform:scale(.94); background:rgba(26,21,48,.92) }
.v3__exitIcon{ display:grid; place-items:center; flex:0 0 auto }
.v3__exitIcon svg{ width:17px; height:17px; transform:scaleX(-1) }
.v3__exitT{ line-height:1 }

/* ── نوارِ بالا: رتبه + آمار ── */
.v3__top{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top, 0px));
  left:12px; right:12px; z-index:5;
  padding-inline-end:min(42vw, 168px);
  display:flex; gap:8px; align-items:stretch; pointer-events:none; flex-wrap:wrap;
}
.v3__tier{
  flex:1 1 250px; min-width:0;
  display:flex; gap:10px; align-items:center; padding:8px 11px;
  border-radius:14px;
  background:linear-gradient(150deg,rgba(22,18,40,.88),rgba(11,10,22,.80));
  border:1px solid color-mix(in srgb, var(--tc) 48%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.v3__tierBadge{
  flex:0 0 auto; padding:5px 12px; border-radius:99px;
  background:color-mix(in srgb, var(--tc) 30%, transparent);
  border:1px solid color-mix(in srgb, var(--tc) 62%, transparent);
  font-size:13px; font-weight:900; color:#FFF4E4; white-space:nowrap;
}
.v3__tierT{ font-size:12px; font-weight:800; color:var(--gold-2); margin-bottom:4px }
.v3__tierBar{ display:flex; flex-direction:column; gap:3px }
.v3__tierN{ font-size:10px; color:var(--muted) }

.v3__wallet{
  flex:0 0 auto; display:flex; gap:6px; align-items:stretch;
}
.v3__st{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:58px; padding:7px 9px; border-radius:12px;
  background:rgba(11,10,22,.80); border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.v3__stV{ font-size:14px; font-weight:900; line-height:1.1 }
.v3__stL{ font-size:9.5px; color:var(--faint); font-weight:600; margin-top:2px }
.v3__st--par  .v3__stV{ color:var(--flame-2) }
.v3__st--bazr .v3__stV{ color:var(--gold-2) }
.v3__st--pop  .v3__stV{ color:#7BD8A6 }
.v3__st--rate .v3__stV{ color:#6FD3E4 }
.v3__st--plot .v3__stV{ color:var(--cream); font-size:12px }

/* ── راهنما ── */
.v3__hint{
  position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:5;
  padding:6px 14px; border-radius:99px; white-space:nowrap;
  background:rgba(9,8,20,.80); border:1px solid var(--line);
  font-size:11px; color:var(--muted); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.v3__hint.is-out{ opacity:0; transform:translateX(-50%) translateY(-8px) }

/* ── دکمهٔ جمع‌آوریِ درآمد ── */
.v3__idle{
  position:absolute; left:12px; bottom:auto; top:50%; transform:translateY(-50%);
  z-index:6; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:16px; cursor:pointer;
  background:linear-gradient(140deg, rgba(242,102,13,.94), rgba(233,178,74,.90));
  border:1px solid rgba(255,217,138,.6); color:#1A0E05;
  box-shadow:0 8px 30px rgba(242,102,13,.42);
  font-family:inherit; text-align:right;
  animation:idlePulse 2.2s var(--ease) infinite;
}
@keyframes idlePulse{
  0%,100%{ transform:translateY(-50%) scale(1) }
  50%{ transform:translateY(-50%) scale(1.045) }
}
.v3__idleIcon{ display:grid; place-items:center }
.v3__idleV{ font-size:14px; font-weight:900 }
.v3__idleL{ font-size:10px; opacity:.8; font-weight:700 }

/* ── پنلِ پایین ── */
.v3__panel{
  position:absolute; left:12px; right:12px; bottom:10px; z-index:6;
  max-height:56%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:12px; border-radius:18px;
  background:linear-gradient(160deg,rgba(22,18,42,.94),rgba(11,10,22,.90));
  border:1px solid var(--line);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 -6px 40px rgba(0,0,0,.55);
  transition:transform .3s var(--ease-back);
}
.v3__panel:not(.is-open){ padding:8px 12px; text-align:center }
.v3__panel.is-open{ animation:v3up .34s var(--ease-back) }
@keyframes v3up{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }
.v3__idleMsg{ font-size:11.5px; color:var(--faint) }

.v3__close{
  position:absolute; top:9px; left:9px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; z-index:3;
  background:var(--glass); border:1px solid var(--line); color:var(--muted);
  font-size:13px; cursor:pointer; line-height:1;
}

.v3__card{ display:flex; gap:11px; align-items:flex-start; padding-left:32px }
.v3__icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:rgba(233,178,74,.12); border:1px solid var(--line); color:var(--gold);
}
.v3__icon--land{ background:rgba(30,107,69,.18); border-color:rgba(30,107,69,.5); color:#7BD8A6 }
.v3__icon--her{ background:rgba(242,102,13,.14); border-color:rgba(242,102,13,.45); color:var(--flame-2) }
.v3__icon svg{ width:27px; height:27px }
.v3__name{ font-size:14.5px; font-weight:800; flex:1 1 auto; min-width:0 }
.v3__desc{ font-size:11.5px; color:var(--muted); line-height:1.7; margin-top:3px }
.v3__eff{ font-size:11px; color:var(--gold-2); font-weight:700; margin-top:5px }
.v3__lore{
  margin-top:8px; padding:8px 10px; border-radius:10px;
  background:rgba(233,178,74,.08); border:1px solid rgba(233,178,74,.22);
  font-size:11px; line-height:1.55; color:var(--cream);
}
.v3__loreT{ display:block; font-size:10px; font-weight:800; color:var(--gold-2); margin-bottom:3px }
.v3__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);
}
.v3__warn{
  margin-top:9px; padding:8px 11px; border-radius:11px; font-size:11.5px; line-height:1.6;
  background:rgba(228,84,63,.12); border:1px solid rgba(228,84,63,.32); color:#FFB3A6;
}
.v3__warn.is-ok{
  background:rgba(75,193,126,.12); border-color:rgba(75,193,126,.32); color:#A6F0C6;
}

/* ── جدولِ اثرات ── */
.v3__rows{ display:flex; flex-direction:column; gap:4px; margin-top:7px }
.v3__r{ display:flex; align-items:center; gap:7px; font-size:11.5px }
.v3__rL{ flex:0 0 46px; color:var(--faint) }
.v3__rN{ font-weight:800; color:var(--cream) }
.v3__rArrow{ color:var(--faint); font-size:10px }
.v3__rNext{ font-weight:800; color:#7BD8A6 }

/* ── فروشگاهِ ساخت ── */
.v3__buildHead{
  display:flex; align-items:baseline; gap:9px; padding-left:32px; margin-bottom:9px;
}
.v3__cats{
  display:flex; gap:5px; overflow-x:auto; padding-bottom:8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.v3__cats::-webkit-scrollbar{ display:none }
.v3__cat{
  flex:0 0 auto; padding:6px 13px; border-radius:99px; cursor:pointer; font-family:inherit;
  background:var(--glass); border:1px solid var(--line); color:var(--muted);
  font-size:11.5px; font-weight:700; white-space:nowrap;
}
.v3__cat.is-on{
  background:rgba(233,178,74,.20); border-color:var(--line-2); color:var(--ink);
}

.v3__shop{ display:flex; flex-direction:column; gap:6px }
.v3__item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:right;
  padding:9px 11px; border-radius:13px; cursor:pointer; font-family:inherit;
  background:linear-gradient(150deg,rgba(28,23,52,.88),rgba(14,12,28,.82));
  border:1px solid var(--line); color:var(--ink);
  transition:transform .14s var(--ease-back), border-color .2s;
}
.v3__item:active{ transform:scale(.985) }
.v3__item.is-poor{ opacity:.52 }
.v3__itemIcon{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(233,178,74,.10); border:1px solid var(--line); color:var(--gold);
}
.v3__itemIcon svg{ width:22px; height:22px }
.v3__itemN{ font-size:13px; font-weight:800 }
.v3__itemD{ font-size:10.5px; color:var(--muted); line-height:1.55; margin-top:1px }
.v3__itemStats{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px }
.v3__chip{
  padding:2px 7px; border-radius:99px; font-size:9.5px; font-weight:800;
  background:rgba(255,244,228,.07); border:1px solid rgba(233,178,74,.16);
}
.v3__chip.is-par{ color:var(--flame-2) }
.v3__chip.is-bazr{ color:var(--gold-2) }
.v3__chip.is-pop{ color:#7BD8A6 }
.v3__chip.is-joy{ color:#6FD3E4 }
.v3__itemCost{
  flex:0 0 auto; font-size:13px; font-weight:900; color:var(--flame-2);
  padding-right:4px;
}

/* ── هشدارِ کمبودِ نیروی کار ── */
.v3__st--pop.is-short{ border-color:rgba(228,84,63,.55) }
.v3__st--pop.is-short .v3__stV{ color:#FF9A8B }
.v3__st--pop.is-short .v3__stL{ color:#FF9A8B }
.v3__st--ash .v3__stV{ color:var(--flame-2) }

/* ── دکمهٔ بازآفرینی ── */
.v3__rebirth{
  position:absolute; z-index:7; left:12px; top:12px;
  display:flex; align-items:center; gap:9px;
  padding:9px 14px; border-radius:16px; cursor:pointer; font-family:inherit; text-align:right;
  background:linear-gradient(140deg, rgba(242,102,13,.96), rgba(200,40,20,.92));
  border:1px solid rgba(255,217,138,.65); color:#FFF4E4;
  box-shadow:0 8px 34px rgba(242,102,13,.5);
  animation:rebirthGlow 2.4s var(--ease) infinite;
}
@keyframes rebirthGlow{
  0%,100%{ box-shadow:0 8px 34px rgba(242,102,13,.45) }
  50%{ box-shadow:0 8px 46px rgba(242,102,13,.85) }
}
.v3__rebirthI{ display:grid; place-items:center; color:#FFE7B8 }
.v3__rebirthT{ font-size:13.5px; font-weight:900 }
.v3__rebirthS{ font-size:10.5px; opacity:.9; font-weight:700 }
.v3.is-wide .v3__rebirth{ left:auto; right:12px; top:auto; bottom:14px; animation:none }

/* ── ارتقای رتبه ── */
.v3__tierUp{
  font-size:34px; font-weight:900; letter-spacing:-.02em; margin:6px 0 12px;
  filter:drop-shadow(0 4px 22px currentColor);
}

/* ── چیدمانِ عریض ──
   `is-wide` را جاوااسکریپت بر پایهٔ نسبتِ خودِ لایه می‌گذارد، نه ویوپورت:
   در حالتِ چرخیده، ویوپورت عمودی است ولی لایه عریض — و media query
   نسبتِ ویوپورت را می‌سنجد، پس اینجا به کار نمی‌آید. */
.v3.is-wide .v3__panel{
  left:auto; right:12px; bottom:12px;
  width:clamp(280px, 34%, 400px);
}
/* باز: تا بالا کشیده می‌شود · بسته: فقط به‌اندازهٔ متنش */
.v3.is-wide .v3__panel.is-open{ top:60px; max-height:none }
.v3.is-wide .v3__panel:not(.is-open){ top:auto; max-height:none }
.v3.is-wide .v3__top{ left:12px; right:calc(clamp(280px, 34%, 400px) + 24px) }
.v3.is-wide .v3__idle{
  left:12px; top:auto; bottom:14px; transform:none; animation:none;
}
.v3.is-wide .v3__idle:active{ transform:scale(.97) }
.v3.is-wide .v3__hint{
  top:auto; bottom:16px; left:50%;
  transform:translateX(-50%);
}
.v3.is-wide .v3__hint.is-out{ opacity:0; transform:translateX(-50%) translateY(6px) }

/* در چیدمانِ عریض، کارتِ ساختمان دو ستونی نمی‌شود — فضای عمودی هست */
.v3.is-wide .v3__shop{ gap:5px }
.v3.is-wide .v3__wallet{ flex-wrap:wrap; justify-content:flex-end }