/* ═══════════════════════════════════════════════════════════════
   هفت‌خان ققنوس — نظامِ بصری
   پالت و تایپوگرافی برگرفته از سند طراحی بازی (GDD).
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── پالتِ برند ── */
  --flame:#F2660D;      /* شعلهٔ ققنوس */
  --gold:#E9B24A;       /* طلایی شالیزار */
  --hirkan:#1E6B45;     /* سبز هیرکانی */
  --khazar:#0E7A8C;     /* آبی خزر */
  --citrus:#F07A1A;     /* نارنجی مرکبات */
  --night:#171326;      /* شب البرز */
  --void:#0B0A16;

  /* ── مشتق‌ها ── */
  --flame-2:#FF8A3D;
  --gold-2:#FFD98A;
  --gold-dim:#8A6A2E;
  --cream:#F6E9D8;
  --ink:#FFF4E4;
  --muted:#B4A793;
  --faint:#7A7186;

  /* سطوحِ رابط تیره‌اند، نه شیشه‌ایِ روشن: متنِ فارسی روی هر صحنه‌ای
     باید خوانا بماند — این تصمیم پایهٔ کلِ خوانایی است. */
  --glass:rgba(14,12,28,.62);
  --glass-2:rgba(20,17,38,.80);
  --line:rgba(233,178,74,.24);
  --line-2:rgba(233,178,74,.46);

  --ok:#4BC17E;
  --bad:#E4543F;

  /* ── فاصله و شعاع ── */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --pad:clamp(14px, 4vw, 22px);
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --hud-h:64px;
  --dock-h:66px;

  --shadow-1:0 2px 10px rgba(0,0,0,.4);
  --shadow-2:0 12px 40px rgba(0,0,0,.55);
  --shadow-gold:0 0 0 1px rgba(233,178,74,.25), 0 10px 34px rgba(242,102,13,.18);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--void);
  overscroll-behavior:none;
}

body{
  font-family:'Vazirmatn', 'Vazirmatn FD', Tahoma, 'Segoe UI', system-ui, sans-serif;
  font-weight:400;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','ss02';
  overflow:hidden;
  position:fixed; inset:0;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}

/* اعداد فارسی همیشه با شکلِ درست */
.num{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* ═══════════════ لایهٔ ۱ — بومِ WebGL ═══════════════ */
#world{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0;
  background:var(--void);
}

/* ═══════════════ لایهٔ ۲ — جوّ ═══════════════ */
#atmosphere{ position:fixed; inset:0; z-index:1; pointer-events:none; }

#atmosphere .vignette{
  position:absolute; inset:0;
  background:radial-gradient(130% 95% at 50% 42%, transparent 30%, rgba(6,5,12,.62) 78%, rgba(6,5,12,.90) 100%);
}
/* پردهٔ یکنواخت — تضمینِ کنتراست متن روی هر اقلیمی */
#atmosphere .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,8,20,.30) 0%, rgba(9,8,20,.16) 26%, rgba(9,8,20,.42) 72%, rgba(9,8,20,.62) 100%);
}
#atmosphere .grain{
  position:absolute; inset:-50%;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }      16%{ transform:translate(-4%,-3%) }
  33%{ transform:translate(3%,-4%) }        50%{ transform:translate(-3%,3%) }
  66%{ transform:translate(4%,2%) }         83%{ transform:translate(-2%,-2%) }
}

.godray{
  position:absolute; top:-30%; width:34vw; height:150%;
  background:linear-gradient(180deg, rgba(233,178,74,.10), transparent 72%);
  filter:blur(28px); transform-origin:top center; mix-blend-mode:screen;
  animation:sway 14s var(--ease) infinite alternate;
}
.godray:nth-child(1){ right:6%;  transform:rotate(9deg);   animation-delay:-2s }
.godray:nth-child(2){ right:42%; transform:rotate(-5deg);  opacity:.7; animation-delay:-7s }
.godray:nth-child(3){ right:74%; transform:rotate(14deg);  opacity:.5; animation-delay:-11s }
@keyframes sway{ from{ opacity:.35 } to{ opacity:.9 } }

/* ═══════════════ لایهٔ ۳ — رابط ═══════════════ */
.app{
  position:fixed; inset:0; z-index:2;
  display:flex; flex-direction:column;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
}

/* ── سربرگ / HUD ── */
.hud{
  flex:0 0 auto; height:var(--hud-h);
  display:flex; align-items:center; gap:10px;
  padding:0 var(--pad);
  background:linear-gradient(180deg, rgba(11,10,22,.82), rgba(11,10,22,.28) 70%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.hud[hidden]{ display:none }

.hud__back{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--line);
  color:var(--gold-2); cursor:pointer;
  transition:transform .18s var(--ease-back), background .2s;
}
.hud__back svg{ width:21px; height:21px; transform:scaleX(-1) }
.hud__back:active{ transform:scale(.9); background:var(--glass-2) }
.hud__back[hidden]{ visibility:hidden }

.landing-exit{
  position:fixed; z-index:45;
  top:calc(var(--safe-t, 0px) + 10px);
  inset-inline-end:var(--pad);
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px 8px 10px;
  border-radius:999px;
  background:rgba(11,10,22,.78);
  border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--gold-2); font-size:12.5px; font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .18s var(--ease-back), background .2s, opacity .2s;
}
.landing-exit svg{ width:17px; height:17px; flex:0 0 auto }
.landing-exit:active{ transform:scale(.94); background:rgba(26,21,48,.92) }
.landing-exit[hidden]{ display:none }
.landing-exit.is-below-hud{
  top:calc(var(--safe-t, 0px) + var(--hud-h) + 8px);
}

.hud__title{
  flex:1 1 auto; min-width:0;
  font-weight:800; font-size:clamp(14px,4vw,17px);
  letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(100deg, var(--gold-2), var(--gold) 45%, var(--flame-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hud__wallet{ flex:0 0 auto; display:flex; gap:7px }

.coin{
  display:flex; align-items:center; gap:5px;
  padding:6px 11px 6px 8px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line);
  font-size:13px; font-weight:700;
  transition:transform .3s var(--ease-back);
}
.coin__icon{ width:16px; height:16px; display:grid; place-items:center }
.coin__icon svg{ width:100%; height:100% }
.coin--par   .coin__icon svg{ fill:var(--flame-2) }
.coin--bazr  .coin__icon svg{ fill:var(--gold) }
.coin--par   .coin__val{ color:var(--flame-2) }
.coin--bazr  .coin__val{ color:var(--gold-2) }
.coin.is-bump{ animation:coinBump .5s var(--ease-back) }
@keyframes coinBump{
  0%{ transform:scale(1) } 40%{ transform:scale(1.22) } 100%{ transform:scale(1) }
}

/* ── ناحیهٔ صفحه ── */
.screen{
  flex:1 1 auto; min-height:0;
  /* لنگرِ صفحه‌های تمام‌قد: بدونِ این، هرچه inset:0 دارد به کلِ برنامه
     می‌چسبد و زیرِ سربرگ و داک می‌رود. */
  position:relative;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  padding:0 var(--pad) 18px;
}
.screen::-webkit-scrollbar{ width:5px }
.screen::-webkit-scrollbar-thumb{ background:var(--line); border-radius:9px }
.screen.is-full{ padding:0; overflow:hidden }

/* ── داک پایین ── */
.dock{
  flex:0 0 auto; height:var(--dock-h);
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  padding:6px calc(var(--pad) - 6px) 4px;
  background:linear-gradient(0deg, rgba(11,10,22,.94), rgba(11,10,22,.55) 65%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(233,178,74,.10);
}
.dock[hidden]{ display:none }
.dock__b{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:0; padding:4px 2px; border-radius:var(--r-sm);
  color:var(--faint); font-family:inherit; font-size:10.5px; font-weight:600;
  cursor:pointer; transition:color .2s, transform .2s var(--ease-back);
  position:relative;
}
.dock__b svg{ width:23px; height:23px }
.dock__b:active{ transform:scale(.92) }
.dock__b.is-on{ color:var(--gold-2) }
.dock__b.is-on::after{
  content:''; position:absolute; top:1px; left:50%; transform:translateX(-50%);
  width:22px; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--flame), transparent);
  box-shadow:0 0 10px var(--flame);
}

/* ═══════════════ اجزای مشترک ═══════════════ */

/* ── دکمه ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--r-md);
  font-family:inherit; font-size:15px; font-weight:700; line-height:1.2;
  border:1px solid var(--line); background:var(--glass); color:var(--ink);
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .16s var(--ease-back), box-shadow .25s, border-color .25s, opacity .2s;
}
.btn:active{ transform:scale(.965) }
.btn:disabled{ opacity:.42; pointer-events:none }
.btn svg{ width:18px; height:18px; flex:0 0 auto }

.btn--primary{
  background:linear-gradient(140deg, var(--flame) 0%, var(--citrus) 45%, var(--gold) 100%);
  border-color:rgba(255,217,138,.5); color:#1A0E05;
  box-shadow:0 8px 28px rgba(242,102,13,.30), inset 0 1px 0 rgba(255,255,255,.35);
  font-weight:800;
}
.btn--primary::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform:translateX(-120%);
  animation:sheen 4.5s var(--ease) infinite;
}
@keyframes sheen{ 0%,72%{ transform:translateX(-120%) } 88%,100%{ transform:translateX(120%) } }

.btn--ghost{ background:transparent; color:var(--muted) }
.btn--gold{ border-color:var(--line-2); color:var(--gold-2); background:rgba(233,178,74,.09) }
.btn--danger{ border-color:rgba(228,84,63,.4); color:#FF9A8B; background:rgba(228,84,63,.10) }
.btn--wide{ width:100%; }
.btn--lg{ padding:16px 30px; font-size:17px; border-radius:var(--r-lg) }
.btn--sm{ padding:9px 15px; font-size:13px; border-radius:var(--r-sm) }

/* ── قاب / کارتِ رابط ── */
.panel{
  background:linear-gradient(160deg, rgba(24,20,44,.72), rgba(12,10,24,.62));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-1);
  position:relative;
}
.panel--glow{ box-shadow:var(--shadow-gold) }

/* گوشه‌های تزئینیِ ایرانی */
.panel--ornate::before,
.panel--ornate::after{
  content:''; position:absolute; width:20px; height:20px;
  border:1.5px solid var(--line-2); pointer-events:none;
}
.panel--ornate::before{ top:8px; right:8px; border-left:0; border-bottom:0; border-radius:0 8px 0 0 }
.panel--ornate::after{ bottom:8px; left:8px; border-right:0; border-top:0; border-radius:0 0 0 8px }

/* ── تیتر بخش ── */
.sect{ margin:22px 0 12px; display:flex; align-items:center; gap:11px }
.sect__t{
  font-size:15px; font-weight:800; color:var(--gold-2);
  white-space:nowrap; letter-spacing:-.01em;
}
.sect__line{
  flex:1; height:1px;
  background:linear-gradient(90deg, var(--line-2), transparent);
}
.sect__n{ font-size:12px; color:var(--faint); font-weight:600 }

/* ── نوارِ پیشرفت ── */
.bar{
  height:7px; border-radius:9px; overflow:hidden;
  background:rgba(6,5,14,.55); box-shadow:inset 0 0 0 1px rgba(233,178,74,.14);
  position:relative;
}
.bar__fill{
  height:100%; border-radius:9px;
  background:linear-gradient(90deg, var(--flame), var(--gold));
  box-shadow:0 0 12px rgba(242,102,13,.55);
  transition:width .7s var(--ease);
  position:relative;
}
.bar__fill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:barShine 2.6s linear infinite;
}
@keyframes barShine{ from{ transform:translateX(-100%) } to{ transform:translateX(100%) } }

/* ── ستاره‌های مرحله ── */
.stars{ display:inline-flex; gap:2px }
.stars svg{ width:14px; height:14px; fill:rgba(255,244,228,.18) }
.stars svg.on{ fill:var(--gold); filter:drop-shadow(0 0 5px rgba(233,178,74,.75)) }

/* ── برچسب ── */
.tag{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700;
  background:var(--glass); border:1px solid var(--line); color:var(--muted);
}
.tag--hirkan{ color:#7BD8A6; border-color:rgba(30,107,69,.5); background:rgba(30,107,69,.16) }
.tag--khazar{ color:#6FD3E4; border-color:rgba(14,122,140,.5); background:rgba(14,122,140,.16) }
.tag--flame { color:#FFB07A; border-color:rgba(242,102,13,.45); background:rgba(242,102,13,.14) }
.tag--gold  { color:var(--gold-2); border-color:var(--line-2); background:rgba(233,178,74,.13) }

/* ═══════════════ لایهٔ ۴ — پنجره‌ها ═══════════════ */
.overlay{
  position:fixed; inset:0; z-index:40;
  display:none; align-items:center; justify-content:center;
  padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  background:rgba(6,5,12,.72);
  backdrop-filter:blur(18px) saturate(.9);
  -webkit-backdrop-filter:blur(18px) saturate(.9);
}
.overlay.is-open{ display:flex; animation:fadeIn .28s var(--ease) }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

.modal{
  width:min(440px, 100%); max-height:100%;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(165deg, #1B1630, #100D1E 60%, #0C0A18);
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  padding:24px 20px 20px;
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(233,178,74,.12), inset 0 1px 0 rgba(255,217,138,.14);
  animation:modalIn .42s var(--ease-back);
  position:relative;
}
@keyframes modalIn{
  from{ opacity:0; transform:translateY(26px) scale(.94) }
  to{ opacity:1; transform:none }
}
.modal__t{
  margin:0 0 6px; font-size:20px; font-weight:900; text-align:center;
  background:linear-gradient(100deg,var(--gold-2),var(--flame-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.modal__s{ margin:0 0 18px; font-size:13.5px; color:var(--muted); text-align:center; line-height:1.75 }
.modal__x{
  position:absolute; top:12px; left:12px; width:32px; height:32px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--line); color:var(--muted);
  font-size:17px; cursor:pointer; line-height:1;
}
.modal__acts{ display:flex; gap:9px; margin-top:18px }
.modal__acts .btn{ flex:1 }

/* ── نان‌تست ── */
.toasts{
  position:fixed; z-index:60; left:0; right:0;
  top:calc(var(--safe-t) + var(--hud-h) + 6px);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:999px;
  background:rgba(20,16,36,.94); border:1px solid var(--line-2);
  box-shadow:var(--shadow-2);
  font-size:13.5px; font-weight:700; color:var(--ink);
  animation:toastIn .4s var(--ease-back);
  max-width:calc(100vw - 32px);
}
.toast.is-out{ animation:toastOut .35s var(--ease) forwards }
.toast--ok{ border-color:rgba(75,193,126,.45); color:#A6F0C6 }
.toast--bad{ border-color:rgba(228,84,63,.45); color:#FFB3A6 }
.toast--gold{ border-color:var(--line-2); color:var(--gold-2) }
.toast__i{ width:18px; height:18px; flex:0 0 auto }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-14px) scale(.9) } to{ opacity:1; transform:none } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-10px) scale(.94) } }

/* ── پردهٔ انتقال ── */
.curtain{
  position:fixed; inset:0; z-index:70; pointer-events:none;
  background:var(--void); opacity:0;
  transition:opacity .34s var(--ease);
}
.curtain.is-on{ opacity:1; pointer-events:all }
.curtain__flame{
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(52% 42% at 50% 52%, rgba(242,102,13,.55), transparent 68%);
  transition:opacity .34s var(--ease);
}
.curtain.is-on .curtain__flame{ opacity:1; animation:flamePulse 1.1s var(--ease) infinite alternate }
@keyframes flamePulse{ from{ transform:scale(.94) } to{ transform:scale(1.06) } }

/* ═══════════════ کمکی ═══════════════ */
.row{ display:flex; align-items:center; gap:10px }
.row--between{ justify-content:space-between }
.col{ display:flex; flex-direction:column; gap:10px }
.grow{ flex:1 1 auto; min-width:0 }
.center{ text-align:center }
.mt{ margin-top:14px } .mt-lg{ margin-top:24px }
.dim{ color:var(--muted) } .faint{ color:var(--faint) }
.small{ font-size:12.5px } .tiny{ font-size:11px }
.bold{ font-weight:800 }
.gold{ color:var(--gold-2) } .flame{ color:var(--flame-2) }
.lead{ line-height:1.9; font-size:14px; color:var(--cream) }
.hidden{ display:none !important }

.fade-up{ animation:fadeUp .5s var(--ease) both }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.stagger > *{ animation:fadeUp .5s var(--ease) both }
.stagger > *:nth-child(1){ animation-delay:.03s }
.stagger > *:nth-child(2){ animation-delay:.07s }
.stagger > *:nth-child(3){ animation-delay:.11s }
.stagger > *:nth-child(4){ animation-delay:.15s }
.stagger > *:nth-child(5){ animation-delay:.19s }
.stagger > *:nth-child(6){ animation-delay:.23s }
.stagger > *:nth-child(7){ animation-delay:.27s }
.stagger > *:nth-child(8){ animation-delay:.31s }
.stagger > *:nth-child(n+9){ animation-delay:.35s }

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