/* ===========================================================================
   ایستگاهِ فضاییِ دمسا · styles.css (قالب ۳ — کیهان)
   تمِ تاریکِ کیهانی، استیجِ سه‌بعدی با perspective، هولوکارت‌های شیشه‌ای،
   سیاره‌های چرخان و سفرِ عمقیِ اسکرول. توکن‌های رنگ از theme-engine می‌آیند
   و هر سیاره رنگِ نئونِ خودش را روی محدودهٔ خودش می‌نشاند.
   =========================================================================== */

:root{
  --font:"Vazirmatn","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px,4vw,54px);
  --void:#06060f;            /* سیاهیِ خلأ */
  --void-2:#0b0b1c;
  --star:#e8ecff;
  --maxw:1200px;
  /* لایه‌های z */
  --z-bg:-1; --z-hud:40; --z-modal:80;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--font);background:var(--void);color:var(--text,#EDEBFF);
  line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100%;
}
a{color:inherit;text-decoration:none}
.ic{width:1.15em;height:1.15em;display:inline-block;fill:none;stroke:currentColor;vertical-align:middle}
.ic use{pointer-events:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent,#7C5CFF);outline-offset:3px;border-radius:6px}

/* ===================== لودرِ پرتاب ===================== */
.launch{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:radial-gradient(120% 120% at 50% 40%,#10102a,#06060f 70%);
  transition:opacity .7s var(--ease),visibility .7s}
.launch.is-done{opacity:0;visibility:hidden;pointer-events:none}
.launch__core{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-family:var(--font);font-weight:800;font-size:1.9rem;
  color:#fff;background:radial-gradient(circle at 35% 30%,#9b86ff,#5a3df0 60%,#2a1d7a);box-shadow:0 0 50px #6a4dff88,inset 0 0 18px #ffffff55;animation:pulse 1.6s var(--ease) infinite}
.launch__ring{position:absolute;width:160px;height:160px;border-radius:50%;border:2px solid transparent;border-top-color:#7C5CFF;border-right-color:#28E0C8;animation:spin 1.1s linear infinite}
.launch__txt{position:absolute;bottom:24%;color:#b9b6e6;font-size:.9rem;letter-spacing:.04em}
@keyframes pulse{50%{transform:scale(1.08);filter:brightness(1.15)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===================== پس‌زمینهٔ کیهانی (ثابت) ===================== */
.cosmos{position:fixed;inset:0;z-index:var(--z-bg);overflow:hidden;background:
  radial-gradient(140% 120% at 80% -10%,#171636 0%,transparent 55%),
  radial-gradient(120% 120% at 10% 110%,#0e1f33 0%,transparent 55%),
  linear-gradient(180deg,#06060f,#080814 60%,#05050d)}
.cosmos__stars{position:absolute;inset:0;width:100%;height:100%;display:block}
.cosmos__neb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen;will-change:transform;transition:opacity .6s}
.cosmos__neb--a{width:46vw;height:46vw;top:-8vw;right:-6vw;background:radial-gradient(circle,#6a4dff,transparent 65%)}
.cosmos__neb--b{width:40vw;height:40vw;bottom:-10vw;left:-8vw;background:radial-gradient(circle,#14b8a6,transparent 65%)}
.cosmos__neb--c{width:34vw;height:34vw;top:42%;left:48%;background:radial-gradient(circle,#ff5c7a,transparent 65%);opacity:.32}
.cosmos__grid{position:absolute;inset:-2px;background-image:
  linear-gradient(rgba(160,170,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(160,170,255,.05) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(120% 90% at 50% 50%,#000 30%,transparent 80%);will-change:transform}

/* ===================== HUD بالا ===================== */
.hud{position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-hud);display:flex;align-items:center;gap:18px;
  padding:14px clamp(14px,3.5vw,40px);transition:background .4s,backdrop-filter .4s}
.hud.is-stuck{background:linear-gradient(180deg,rgba(8,8,20,.82),rgba(8,8,20,.35));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hud__brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.12rem;letter-spacing:.01em}
.hud__mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;
  background:linear-gradient(135deg,var(--accent,#7C5CFF),var(--accent-2,#28E0C8));box-shadow:0 6px 18px -6px var(--accent,#7C5CFF)}
.hud__nav{display:flex;gap:4px;margin-inline-start:auto;background:rgba(255,255,255,.04);border:1px solid var(--line-soft,rgba(255,255,255,.08));
  border-radius:999px;padding:5px;overflow:auto;max-width:min(56vw,640px);scrollbar-width:none}
.hud__nav::-webkit-scrollbar{display:none}
.hud__nav a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:999px;font-size:.86rem;white-space:nowrap;
  color:var(--text-dim,#b9b6e6);transition:color .2s,background .2s;cursor:pointer}
.hud__nav a .ic{width:1rem;height:1rem}
.hud__nav a:hover{color:var(--text,#fff)}
.hud__nav a.is-on{color:#fff;background:color-mix(in srgb,var(--dot,#7C5CFF) 30%,transparent)}
.hud__cta{margin-inline-start:6px;padding:.6rem 1.1rem;border-radius:999px;font-weight:700;font-size:.88rem;white-space:nowrap;color:#06060f;
  background:linear-gradient(135deg,var(--accent,#7C5CFF),var(--accent-2,#28E0C8));box-shadow:0 8px 24px -10px var(--accent,#7C5CFF);transition:transform .2s,filter .2s}
.hud__cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
/* دکمهٔ منوی موبایل (فقط در عرضِ کم دیده می‌شود) */
.hud__menu{display:none;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--line-soft,rgba(255,255,255,.12));background:rgba(255,255,255,.05);color:var(--text,#EDEBFF);transition:all .25s var(--ease)}
.hud__menu:hover{border-color:var(--accent-2,#28E0C8)}
.hud__menu .ic{width:1.3rem;height:1.3rem}
.hud__menu .ic--close{display:none}
.hud.is-navopen .hud__menu{background:color-mix(in srgb,var(--accent,#7C5CFF) 26%,transparent);border-color:var(--accent,#7C5CFF)}
.hud.is-navopen .hud__menu .ic--menu{display:none}
.hud.is-navopen .hud__menu .ic--close{display:block}

/* نوارِ پیشرفتِ پرواز */
.warp{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:calc(var(--z-hud) + 1);background:rgba(255,255,255,.06)}
.warp__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-2,#28E0C8),var(--accent,#7C5CFF));box-shadow:0 0 14px var(--accent,#7C5CFF);transition:width .15s linear}

/* نقطه‌های مدار (کناری) */
.dots{position:fixed;inset-inline-start:clamp(8px,1.6vw,20px);inset-block-start:50%;transform:translateY(-50%);z-index:var(--z-hud);
  display:flex;flex-direction:column;gap:13px}
.dots button{appearance:none;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:0}
.dots .dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);transition:all .3s var(--ease);flex:0 0 auto}
.dots button:hover .dot{transform:scale(1.25)}
.dots button.is-on .dot{background:var(--dot,#7C5CFF);box-shadow:0 0 12px var(--dot,#7C5CFF);transform:scale(1.35)}
.dots .dot-label{font-size:.72rem;color:var(--text-dim,#b9b6e6);opacity:0;transform:translateX(6px);transition:all .3s var(--ease);white-space:nowrap;pointer-events:none}
.dots button:hover .dot-label,.dots button.is-on .dot-label{opacity:1;transform:none}

/* ===================== ساختارِ صحنه‌ها ===================== */
.bay{position:relative;padding-inline:var(--pad)}
#app,#systems,.bay{overflow-x:clip}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);border-radius:22px;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 30px 70px -40px #000,inset 0 1px 0 rgba(255,255,255,.12)}

/* دکمه‌ها */
.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;min-height:46px;padding:.7rem 1.4rem;border-radius:999px;
  font-weight:700;font-size:.98rem;cursor:pointer;border:1px solid transparent;transition:transform .2s var(--ease),filter .2s,background .3s,border-color .3s}
.btn .ic{width:1.1rem;height:1.1rem}
.btn--solid{color:#06060f;background:linear-gradient(135deg,var(--accent,#7C5CFF),var(--accent-2,#28E0C8));box-shadow:0 16px 40px -18px var(--accent,#7C5CFF)}
.btn--solid:hover{transform:translateY(-3px);filter:brightness(1.08)}
.btn--ghost{color:var(--text,#EDEBFF);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.btn--ghost:hover{border-color:var(--accent-2,#28E0C8);transform:translateY(-3px)}

/* ===================== صحنهٔ پرتاب (Hero) ===================== */
.bay--launch{min-height:100svh;display:grid;place-items:center;text-align:center;padding-block:14vh 8vh}
.hero{max-width:760px;position:relative;z-index:1}
.hero__eyebrow{display:inline-block;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2,#28E0C8);
  border:1px solid color-mix(in srgb,var(--accent-2,#28E0C8) 40%,transparent);border-radius:999px;padding:.4rem 1rem;margin-bottom:1.3rem;
  background:color-mix(in srgb,var(--accent-2,#28E0C8) 10%,transparent)}
.hero__title{font-size:clamp(2.6rem,8vw,5.4rem);line-height:1.05;margin:0 0 1.1rem;font-weight:800;letter-spacing:-.01em}
.hero__title em{font-style:normal;background:linear-gradient(120deg,var(--accent,#7C5CFF),var(--accent-2,#28E0C8) 60%,#ff8a5b);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{color:var(--text-dim,#b9b6e6);font-size:clamp(1rem,2.4vw,1.18rem);max-width:56ch;margin:0 auto 2rem}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem}
.hero__stats{display:flex;gap:clamp(20px,5vw,56px);justify-content:center;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.hero__stats li{display:flex;flex-direction:column;gap:.2rem}
.hero__stats b{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;
  background:linear-gradient(120deg,var(--accent-2,#28E0C8),var(--accent,#7C5CFF));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__stats span{font-size:.84rem;color:var(--text-dim,#b9b6e6)}
.scroll-cue{position:absolute;inset-block-end:3vh;inset-inline:0;margin:auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  color:var(--text-dim,#b9b6e6);font-size:.8rem}
.scroll-cue .ic{width:1.3rem;height:1.3rem;animation:bob 1.8s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(7px);opacity:.6}}

/* ===================== سیستمِ سیاره (صحنهٔ ۳بعدی) ===================== */
.bay--system{min-height:200vh}                 /* ۲۰۰vh: ~۴۰vh زوم‌ورود + ~۸۰vh توقف (فقط سیاره می‌چرخد) + ~۸۰vh زوم‌خروج */
.system{position:sticky;inset-block-start:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.system__view{position:relative;width:100%;height:100%;perspective:1100px;perspective-origin:50% 45%}
.system__scene{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  /* --cz: دالیِ عمقیِ دوربین ، --mx/--my: پارالاکسِ اشاره‌گر */
  transform:translateZ(var(--cz,0px)) rotateX(calc(var(--my,0) * -5deg)) rotateY(calc(var(--mx,0) * 6deg))}

/* --- سیاره (کرهٔ سه‌بعدیِ سبک با سطحِ چرخان) --- */
.planet{position:absolute;inset-block-start:50%;inset-inline-end:clamp(6%,12vw,18%);
  width:clamp(220px,34vw,440px);aspect-ratio:1;transform-style:preserve-3d;
  /* --pz: عمقِ پرواز ، --rotY/--rotX: چرخشِ محوری ، --pscale: مقیاس ، --pvis: نمایانی */
  transform:translateY(-50%) translateZ(var(--pz,0px)) rotateY(var(--rotY,0deg)) rotateX(var(--rotX,0deg)) scale(var(--pscale,1));
  opacity:var(--pvis,1);will-change:transform,opacity}
/* پایهٔ کره: سایه‌پردازیِ کروی */
.planet__body{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 30% 26%,color-mix(in srgb,var(--accent2,#FFD98A) 62%,#fff) 0%,var(--surf1,#7A4A12) 34%,var(--surf2,#23130A) 88%);
  box-shadow:0 0 90px -10px color-mix(in srgb,var(--accent,#F4A93C) 55%,transparent)}
/* سطحِ چرخان: با اسکرول جابه‌جا می‌شود (--spin) → حسِ چرخشِ کره */
.planet__body::before{content:"";position:absolute;inset:-6%;border-radius:inherit;
  background-image:
    repeating-linear-gradient(96deg,transparent 0 5%,color-mix(in srgb,var(--surf2,#000) 65%,transparent) 5% 8.5%,transparent 8.5%,transparent 14%),
    radial-gradient(42% 26% at 26% 40%,color-mix(in srgb,var(--accent,#F4A93C) 55%,transparent),transparent 72%),
    radial-gradient(34% 22% at 70% 66%,color-mix(in srgb,var(--surf2,#000) 75%,transparent),transparent 72%),
    radial-gradient(26% 18% at 52% 22%,color-mix(in srgb,var(--accent2,#fff) 32%,transparent),transparent 72%);
  background-size:200% 100%;background-repeat:repeat-x;
  background-position:calc(var(--spin,0) * 1px) center;
  mix-blend-mode:soft-light;opacity:.9}
/* نورپردازیِ ثابت: های‌لایتِ براق + مرزِ تاریکی (حجمِ کره) */
.planet__body::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(circle at 27% 23%,rgba(255,255,255,.6),rgba(255,255,255,.12) 18%,transparent 44%),
    radial-gradient(circle at 76% 80%,rgba(0,0,0,.7),transparent 58%);
  box-shadow:
    inset -18px -16px 48px rgba(0,0,0,.58),
    inset 12px 12px 34px -12px color-mix(in srgb,var(--accent2,#fff) 45%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--accent,#F4A93C) 28%,transparent)}
.planet__halo{position:absolute;inset:-16%;border-radius:50%;
  background:radial-gradient(circle,transparent 50%,color-mix(in srgb,var(--accent,#F4A93C) 32%,transparent) 57%,color-mix(in srgb,var(--accent2,#fff) 12%,transparent) 63%,transparent 75%);
  filter:blur(3px)}
.planet__ring{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:160%;height:42%;
  transform:translate(-50%,-50%) rotateX(74deg) rotateZ(-18deg);border-radius:50%;
  border:clamp(6px,1.4vw,12px) solid color-mix(in srgb,var(--accent2,#FFD98A) 55%,transparent);
  border-bottom-color:transparent;box-shadow:0 0 30px -6px color-mix(in srgb,var(--accent,#F4A93C) 60%,transparent);
  background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--accent,#F4A93C) 20%,transparent),transparent 60%)}
.planet__moon{position:absolute;width:13%;aspect-ratio:1;border-radius:50%;inset-block-start:6%;inset-inline-start:2%;
  background:radial-gradient(circle at 35% 30%,#fff,#9aa 60%,#445);box-shadow:0 0 18px -4px #fff8;animation:moon 14s linear infinite}
@keyframes moon{from{transform:rotate(0) translateX(140px) rotate(0)}to{transform:rotate(360deg) translateX(140px) rotate(-360deg)}}

/* --- سیاره با مدلِ سه‌بعدیِ واقعی (sprite-sheet افقیِ N فریم) ---
   نورپردازی و حجم در خودِ تصویر pre-render شده‌اند، پس لایه‌های شبیه‌سازِ CSS
   خاموش می‌شوند و فقط فریمِ درست نمایش داده می‌شود (--frame از app.js). */
.planet--sprite .planet__body{
  background-repeat:no-repeat;
  background-size:calc(var(--frames,48) * 100%) 100%;
  background-position:calc(var(--frame,0) / (var(--frames,48) - 1) * 100%) center;
  box-shadow:0 0 90px -10px color-mix(in srgb,var(--accent,#F4A93C) 55%,transparent)}
.planet--sprite .planet__body::before,
.planet--sprite .planet__body::after{display:none}

/* --- کارتِ HUD سیاره --- */
.hudcard{position:absolute;inset-block-start:50%;inset-inline-start:clamp(4%,5vw,8%);transform:translateY(-50%);max-width:min(34vw,380px);z-index:5;pointer-events:none;
  opacity:var(--hud,1);translate:0 calc((1 - var(--hud,1)) * 22px);transition:opacity .25s linear}
.hudcard__code{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;letter-spacing:.22em;color:var(--accent2,#FFD98A);
  border:1px solid color-mix(in srgb,var(--accent,#F4A93C) 45%,transparent);border-radius:999px;padding:.32rem .8rem;margin-bottom:1rem}
.hudcard__code::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent,#F4A93C);box-shadow:0 0 10px var(--accent,#F4A93C)}
.hudcard__name{font-size:clamp(2rem,5.2vw,3.4rem);font-weight:800;line-height:1.08;margin:.2rem 0 .6rem}
.hudcard__tag{color:var(--text-dim,#c7c4ec);font-size:clamp(.96rem,2vw,1.12rem);margin:0 0 1rem}
.hudcard__count{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--accent2,#FFD98A)}
.hudcard__count::before{content:"";width:18px;height:1px;background:var(--accent,#F4A93C)}

/* --- مدارها و هولوکارت‌ها --- */
.orbits{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;z-index:3;opacity:var(--orb,1)}
.holo{position:absolute;inset-block-start:50%;inset-inline-end:clamp(6%,12vw,18%);width:min(70vw,266px);
  transform-style:preserve-3d;pointer-events:auto;cursor:pointer;
  background:linear-gradient(160deg,rgba(20,20,46,.66),rgba(12,12,28,.5));
  border:1px solid color-mix(in srgb,var(--accent,#F4A93C) 38%,rgba(255,255,255,.12));
  border-radius:18px;padding:16px 16px 14px;backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 24px 50px -28px #000,0 0 0 1px rgba(255,255,255,.04) inset,0 0 26px -12px color-mix(in srgb,var(--accent,#F4A93C) 70%,transparent);
  /* JS مختصاتِ مدار (left/top) و عمق (--z) را می‌نشاند؛ --in ورود، --pop/--rx/--ry تعامل */
  --in:0;
  transform:translateZ(calc(var(--z,0px) * var(--in) + var(--pop,0px))) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(calc(.84 + var(--in) * .16));
  opacity:var(--in);
  transition:transform .55s var(--ease-out),opacity .6s ease,box-shadow .35s var(--ease),border-color .35s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms),calc(var(--i,0) * 80ms),0s,0s}
.holo__glow{position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--accent,#F4A93C) 30%,transparent),transparent 60%)}
.holo:hover{border-color:var(--accent,#F4A93C);box-shadow:0 40px 70px -30px #000,0 0 40px -8px color-mix(in srgb,var(--accent,#F4A93C) 85%,transparent)}
.holo:hover .holo__glow{opacity:1}
.holo__icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:.6rem;color:var(--accent2,#FFD98A);
  background:color-mix(in srgb,var(--accent,#F4A93C) 18%,rgba(255,255,255,.04));border:1px solid color-mix(in srgb,var(--accent,#F4A93C) 30%,transparent)}
.holo__icon .ic{width:1.4rem;height:1.4rem}
/* عکسِ محصول در کارت (جای آیکن، وقتی dish.img باشد) — نسبتِ ثابت، بدونِ پرشِ چیدمان */
.holo__media{position:relative;width:100%;aspect-ratio:16/10;border-radius:13px;overflow:hidden;margin-bottom:.7rem;
  border:1px solid color-mix(in srgb,var(--accent,#F4A93C) 28%,rgba(255,255,255,.08));background:rgba(255,255,255,.03)}
.holo__media img{width:100%;height:100%;object-fit:cover;display:block}
.holo__name{font-size:1.06rem;font-weight:700;margin:0 0 .25rem;line-height:1.4}
.holo__en{font-size:.74rem;letter-spacing:.06em;color:var(--text-dim,#9d9ac9);margin:0 0 .5rem;text-transform:uppercase}
.holo__desc{font-size:.86rem;color:var(--text-dim,#c2bfe6);line-height:1.6;margin:0 0 .7rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.holo__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem;min-height:0}
.holo__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid rgba(255,255,255,.1);padding-top:.6rem}
.holo__kcal{font-size:.74rem;color:var(--text-dim,#9d9ac9)}
.holo__price{font-weight:800;font-size:1rem;color:var(--accent2,#FFD98A)}
.holo__price small{font-size:.66rem;font-weight:500;color:var(--text-dim,#9d9ac9);margin-inline-start:.2rem}

/* نشان‌های آیتم */
.dtag{font-size:.68rem;font-weight:700;padding:.22rem .55rem;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.dtag--gold{color:#FFD98A;background:rgba(244,169,60,.14);border-color:rgba(244,169,60,.4)}
.dtag--violet{color:#E6CBFF;background:rgba(176,124,255,.16);border-color:rgba(176,124,255,.45)}
.dtag--red{color:#FFB3C2;background:rgba(255,92,122,.15);border-color:rgba(255,92,122,.45)}
.dtag--green{color:#B6F7DC;background:rgba(63,224,168,.14);border-color:rgba(63,224,168,.42)}
.dtag--cyan{color:#B8F4FF;background:rgba(40,224,200,.14);border-color:rgba(40,224,200,.42)}

/* حالتِ ورودِ کارت‌ها (با IntersectionObserver کلاسِ is-in اضافه می‌شود) */
.orbits.is-in .holo{--in:1}
.holo:hover{--pop:96px}

/* ===================== صحنهٔ بازگشت (Dock) ===================== */
.bay--dock{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:22px;padding-block:14vh 8vh;max-width:var(--maxw);margin-inline:auto}
.dock__panel{padding:clamp(24px,4vw,42px)}
.dock__kicker{display:inline-block;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2,#28E0C8);margin-bottom:.6rem}
.dock__title{font-size:clamp(1.9rem,5vw,3rem);font-weight:800;margin:0 0 .7rem;line-height:1.1}
.dock__lead{color:var(--text-dim,#b9b6e6);max-width:60ch;margin:0 0 1.6rem}
.dock__info{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.dock__info li{display:flex;gap:.7rem;align-items:flex-start}
.dock__info .ic{width:1.4rem;height:1.4rem;color:var(--accent-2,#28E0C8);flex:0 0 auto;margin-top:.1rem}
.dock__info b{display:block;font-size:.86rem}
.dock__info span{color:var(--text-dim,#b9b6e6);font-size:.92rem}
.dock__social{display:flex;gap:12px}
.orb{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--text,#EDEBFF);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);transition:all .25s var(--ease)}
.orb:hover{color:var(--accent-2,#28E0C8);border-color:var(--accent-2,#28E0C8);transform:translateY(-3px)}

/* نظرات */
.testi{padding:clamp(20px,3vw,32px);overflow:hidden}
.testi__track{display:flex;transition:transform .6s var(--ease)}
.tcard{flex:0 0 100%;min-width:0;max-width:100%;box-sizing:border-box;padding-inline:clamp(2px,1vw,12px)}
.tcard__stars{display:flex;gap:3px;color:var(--accent2,#FFD98A);margin-bottom:.6rem}
.tcard__stars .ic{width:1rem;height:1rem;fill:currentColor;stroke:none}
.tcard__text{font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.7;margin:0 0 .9rem}
.tcard__who b{font-weight:700}
.tcard__who span{color:var(--text-dim,#b9b6e6);font-size:.85rem;margin-inline-start:.4rem}
.testi__dots{display:flex;gap:8px;justify-content:center;margin-top:1rem}
.testi__dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.2);cursor:pointer;transition:all .3s}
.testi__dots button.is-on{background:var(--accent-2,#28E0C8);box-shadow:0 0 10px var(--accent-2,#28E0C8);width:22px;border-radius:5px}

.dock__foot{text-align:center;color:var(--text-dim,#7c7aa0);font-size:.82rem;padding-top:8px}

/* ===================== مودالِ آیتم ===================== */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__scrim{position:absolute;inset:0;background:rgba(4,4,12,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal__panel{position:relative;z-index:1;width:min(480px,94vw);padding:clamp(24px,4vw,38px);text-align:center;
  transform:translateY(26px) scale(.96);opacity:0;transition:transform .45s var(--ease-out),opacity .45s}
.modal.is-open .modal__panel{transform:none;opacity:1}
.modal__close{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);color:var(--text,#fff);display:grid;place-items:center;cursor:pointer;transition:all .2s}
.modal__close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.modal__badge{width:64px;height:64px;border-radius:18px;margin:0 auto 1rem;display:grid;place-items:center;color:var(--accent2,#FFD98A);
  background:color-mix(in srgb,var(--accent,#F4A93C) 18%,rgba(255,255,255,.05));border:1px solid color-mix(in srgb,var(--accent,#F4A93C) 35%,transparent);
  box-shadow:0 0 30px -8px color-mix(in srgb,var(--accent,#F4A93C) 80%,transparent)}
.modal__badge .ic{width:2rem;height:2rem}
/* عکسِ بزرگِ محصول در مودال (جای نشانِ آیکنی، وقتی dish.img باشد) */
.modal__media{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin:0 auto 1.1rem;
  border:1px solid color-mix(in srgb,var(--accent,#7C5CFF) 30%,rgba(255,255,255,.1));
  box-shadow:0 18px 44px -22px #000,0 0 30px -14px color-mix(in srgb,var(--accent,#7C5CFF) 70%,transparent)}
.modal__media img{width:100%;height:100%;object-fit:cover;display:block}
.modal__code{font-size:.74rem;letter-spacing:.22em;color:var(--accent2,#FFD98A)}
.modal__name{font-size:clamp(1.4rem,4vw,2rem);font-weight:800;margin:.4rem 0 .2rem}
.modal__en{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim,#9d9ac9);margin:0 0 1rem}
.modal__desc{color:var(--text-dim,#c2bfe6);line-height:1.8;margin:0 0 1.2rem}
.modal__tags{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:1.3rem}
.modal__row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.12);padding-top:1rem}
.modal__kcal{font-size:.84rem;color:var(--text-dim,#9d9ac9)}
.modal__price{font-size:1.4rem;font-weight:800;color:var(--accent2,#FFD98A)}
.modal__price small{font-size:.72rem;font-weight:500;color:var(--text-dim,#9d9ac9);margin-inline-start:.3rem}

/* نشانِ تعدادِ یادداشت روی دکمهٔ HUD */
.hud__cta{display:inline-flex;align-items:center;gap:.45rem;border:0;cursor:pointer;font-family:inherit}
.hud__cta .ic{width:1.05rem;height:1.05rem}
.hud__badge{min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;font-size:.74rem;font-weight:800;
  background:rgba(6,6,15,.35);color:#06060f}
.modal__add{width:100%;margin-top:1.2rem}
.btn--sm{min-height:38px;padding:.5rem .9rem;font-size:.86rem}

/* ===================== یادداشتِ سفر (Drawer) ===================== */
.drawer{position:fixed;inset:0;z-index:85;visibility:hidden;pointer-events:none}
.drawer[aria-hidden="false"]{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(4,4,12,.66);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .4s var(--ease)}
.drawer[aria-hidden="false"] .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(420px,92vw);border-radius:0 24px 24px 0;
  display:flex;flex-direction:column;padding:22px;transform:translateX(-104%);transition:transform .5s var(--ease-out)}
[dir="rtl"] .drawer__panel{inset-inline-start:auto;inset-inline-end:0;border-radius:24px 0 0 24px;transform:translateX(104%)}
.drawer[aria-hidden="false"] .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.drawer__head h3{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:800;margin:0}
.drawer__head .ic{width:1.3rem;height:1.3rem;color:var(--accent-2,#28E0C8)}
.drawer__x{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:inherit;cursor:pointer;display:grid;place-items:center;transition:all .2s}
.drawer__x:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.drawer__hint{font-size:.8rem;color:var(--text-dim,#9d9ac9);line-height:1.7;margin:0 0 1rem;border-block-end:1px solid rgba(255,255,255,.1);padding-block-end:.9rem}
.drawer__body{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;margin-inline:-4px;padding-inline:4px}
.drawer__empty{text-align:center;color:var(--text-dim,#9d9ac9);padding:3rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.drawer__empty .ic{width:3rem;height:3rem;opacity:.5}
.litem{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px}
.litem__thumb{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.litem__thumb .ic{width:1.4rem;height:1.4rem}
.litem__main{flex:1;min-width:0}
.litem__name{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.litem__price{font-size:.78rem;color:var(--text-dim,#9d9ac9)}
.litem__qty{display:flex;align-items:center;gap:10px;margin-top:.3rem}
.litem__qty button{width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:inherit;cursor:pointer;display:grid;place-items:center;transition:all .2s}
.litem__qty button:hover{border-color:var(--accent-2,#28E0C8);color:var(--accent-2,#28E0C8)}
.litem__qty .ic{width:.9rem;height:.9rem}
.litem__qty b{min-width:1.5rem;text-align:center;font-weight:800}
.litem__rm{width:32px;height:32px;border-radius:9px;border:0;background:transparent;color:var(--text-dim,#9d9ac9);cursor:pointer;display:grid;place-items:center;flex:0 0 auto;transition:color .2s}
.litem__rm:hover{color:#FF7A8A}
.litem__rm .ic{width:1rem;height:1rem}
.drawer__foot{border-block-start:1px solid rgba(255,255,255,.12);padding-block-start:1rem;margin-block-start:.6rem}
.drawer__total{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;font-size:.92rem}
.drawer__total b{font-size:1.2rem;font-weight:800;color:var(--accent-2,#28E0C8)}
.drawer__actions{display:flex;gap:10px}
.drawer__actions .btn{flex:1}

/* دکمهٔ افزودنِ سریع روی هولوکارت (گوشهٔ بالا) */
.holo__add{position:absolute;inset-block-start:14px;inset-inline-start:14px;width:34px;height:34px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--accent,#F4A93C) 45%,transparent);background:color-mix(in srgb,var(--accent,#F4A93C) 16%,rgba(8,8,20,.5));
  color:var(--accent2,#FFD98A);cursor:pointer;display:grid;place-items:center;transition:all .2s;opacity:0;z-index:2}
.holo:hover .holo__add,.holo:focus-within .holo__add{opacity:1}
.holo__add:hover{background:var(--accent,#F4A93C);color:#06060f;transform:scale(1.08)}
.holo__add .ic{width:1.1rem;height:1.1rem}
@media (max-width:900px){.holo__add{opacity:1}}

/* دکمه‌های پیمایشِ عرضیِ آیتم‌ها (فقط موبایل) */
.orbnav{display:none}
.orbnav__btn{position:absolute;width:42px;height:42px;border-radius:50%;z-index:7;
  display:grid;place-items:center;cursor:pointer;color:var(--accent2,#FFD98A);
  border:1px solid color-mix(in srgb,var(--accent,#7C5CFF) 50%,rgba(255,255,255,.16));
  background:linear-gradient(160deg,rgba(20,20,46,.82),rgba(10,10,26,.7));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -14px #000,0 0 22px -10px color-mix(in srgb,var(--accent,#7C5CFF) 80%,transparent);transition:transform .2s,border-color .2s,background .2s}
.orbnav__btn:hover,.orbnav__btn:active{border-color:var(--accent,#7C5CFF);transform:scale(1.06)}
.orbnav__btn .ic{width:1.3rem;height:1.3rem}
.orbnav__btn--prev{inset-inline-end:8px}
.orbnav__btn--prev .ic{transform:scaleX(-1)}   /* RTL: «قبلی» به سمتِ راست */
.orbnav__btn--next{inset-inline-start:8px}

/* ===== چیدمانِ یکسانِ آیتم‌ها در همهٔ عرض‌ها: سیاره وسط، آیتم‌ها اسلایدرِ افقیِ
   چپ/راست در پایینِ صحنه، و فلش‌ها هم‌راهِ آیتم‌ها محو/پدیدار می‌شوند (--orb).
   (دسکتاپ هم مثلِ موبایل؛ سایزها در مدیا-کوئریِ موبایل کوچک‌تر می‌شوند) ===== */
.planet{inset-inline-end:auto;left:0;right:0;margin-inline:auto;inset-block-start:30%;width:clamp(190px,24vw,300px)}
.hudcard{inset-block-start:47%;inset-inline-start:clamp(16px,6vw,48px);inset-inline-end:clamp(16px,6vw,48px);max-width:none;text-align:center;z-index:6}
.hudcard__count{justify-content:center}
.orbits{inset:auto 0 0 0;display:flex;gap:14px;overflow-x:auto;overflow-y:visible;
  padding:16px max(64px,var(--pad)) calc(20px + env(safe-area-inset-bottom));scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;transform-style:flat}
.orbits::-webkit-scrollbar{display:none}
.holo{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;
  flex:0 0 clamp(280px,30vw,330px);max-width:340px;scroll-snap-align:center;transform:none!important;--in:1;padding:16px}
.orbnav{display:block;opacity:var(--orb,1);transition:opacity .3s}
.orbnav__btn{inset-block-end:calc(env(safe-area-inset-bottom) + 18px + 128px)}

/* ===================== توست ===================== */
.toast-wrap{position:fixed;inset-block-end:22px;inset-inline:0;z-index:95;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:rgba(20,20,40,.92);border:1px solid rgba(255,255,255,.15);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font-size:.9rem;
  backdrop-filter:blur(8px);animation:toastIn .3s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}}

/* ===================== واکنش‌گرایی ===================== */
/* موبایل/تبلت: همان سفرِ عمقیِ چسبانِ دسکتاپ — سیاره و نام پین می‌شوند و در عمق
   پرواز می‌کنند؛ آیتم‌ها نوارِ افقیِ قابلِ سوایپ در پایینِ صحنه‌اند (خوانا). */
@media (max-width:900px){
  .system__view{perspective:780px}
  /* --- HUD موبایل: منوی کشویی تا همهٔ کتگوری‌ها در دسترس باشند --- */
  .hud__menu{display:flex}
  .hud__cta{margin-inline-start:auto;order:2}
  .hud__menu{order:3}
  .hud__nav{order:4;position:absolute;inset-block-start:calc(100% - 4px);inset-inline:10px;margin:0;
    flex-direction:column;align-items:stretch;gap:4px;max-width:none;
    background:linear-gradient(180deg,rgba(10,10,24,.96),rgba(10,10,24,.9));
    border:1px solid var(--line-soft,rgba(255,255,255,.12));border-radius:18px;
    box-shadow:0 30px 60px -30px #000;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    max-height:0;padding:0 8px;opacity:0;overflow:hidden;pointer-events:none;
    transition:max-height .38s var(--ease),opacity .3s,padding .38s var(--ease)}
  .hud.is-navopen .hud__nav{max-height:min(72vh,560px);overflow:auto;opacity:1;pointer-events:auto;padding:8px}
  .hud__nav a{justify-content:flex-start;padding:.78rem .95rem;font-size:.98rem;border-radius:12px}
  .hud__nav a .ic{width:1.15rem;height:1.15rem}
  /* سیاره وسط-بالا */
  .planet{inset-inline-end:auto;left:0;right:0;margin-inline:auto;inset-block-start:28%;width:clamp(150px,44vw,210px)}
  /* نامِ سیاره زیرِ آن، وسط‌چین */
  .hudcard{inset-block-start:47%;inset-inline-start:14px;inset-inline-end:14px;max-width:none;text-align:center;z-index:6}
  .hudcard__name{font-size:clamp(1.5rem,6.6vw,2.1rem);margin:.1rem 0 .3rem}
  .hudcard__tag{font-size:.9rem;margin-bottom:.2rem}
  .hudcard__count{justify-content:center}
  /* نوارِ افقیِ آیتم‌ها در پایین */
  .orbits{inset:auto 0 0 0;display:flex;gap:12px;overflow-x:auto;overflow-y:visible;
    padding:14px max(58px,var(--pad)) calc(14px + env(safe-area-inset-bottom));scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;transform-style:flat}
  .orbits::-webkit-scrollbar{display:none}
  .holo{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;
    flex:0 0 76vw;max-width:300px;scroll-snap-align:center;transform:none!important;--in:1;padding:15px}
  .holo__desc{-webkit-line-clamp:2}
  /* دکمه‌های پیمایشِ آیتم‌ها — کنارِ نوار، هم‌ترازِ مرکزِ کارت‌ها */
  .orbnav{display:block}
  .orbnav__btn{inset-block-end:calc(env(safe-area-inset-bottom) + 14px + 104px)}
  .dots{display:none}
}
@media (max-width:560px){
  .hero__stats{gap:18px}
}

/* حرکتِ کاهش‌یافته: همه‌چیز ساکن و خوانا */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  /* چیدمانِ ساکن و خوانا: سیاره بالا، کارت‌ها در شبکهٔ عمودی */
  .bay--system{min-height:auto;padding-block:9vh 6vh}
  .system{position:relative;height:auto;display:block}
  .system__view{perspective:none}
  .system__scene{position:relative;transform:none!important}
  .planet{position:relative!important;inset:auto!important;left:auto;right:auto;margin:0 auto 1.4rem!important;transform:none!important;opacity:1!important;width:min(52vw,240px)}
  .hudcard{position:relative;inset:auto;transform:none;max-width:none;text-align:center;margin-bottom:1.4rem;opacity:1!important;translate:none!important}
  .orbits{position:relative;inset:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:14px;opacity:1!important;pointer-events:auto}
  .holo{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:auto!important;--in:1;transform:none!important;transition:none}
  .orbnav{display:none!important}
  .warp__fill{transition:none}
}

/* حالتِ روشن (در صورتِ سوییچِ تم) — کیهان همچنان تیره می‌ماند تا حسِ فضا حفظ شود،
   اما شیشه‌ها و متن‌ها سازگار می‌شوند */
[data-theme="light"] body{color:#0f1024}
[data-theme="light"] .glass{background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.7));border-color:rgba(20,20,50,.12);color:#0f1024}
[data-theme="light"] .dock__title,[data-theme="light"] .tcard__text{color:#0f1024}