/* ==========================================================================
   گره — پایه
   رنگ: سیاه خالص · قرمز برای ورود و یادگیری · نارنجی برای عضویت
   تایپ: Aref Ruqaa (عنوان‌ها، فارسی و لاتین) · Vazirmatn متغیر (متن)
   ========================================================================== */

/* ---------- فونت‌ها (همه محلی؛ هر زبان فقط زیرمجموعه‌ی خودش را دانلود می‌کند) ---------- */
@font-face{ font-family:"Vazirmatn"; src:url("../fonts/vazirmatn-arabic.woff2") format("woff2"); font-weight:100 900; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF,U+2010-2011; }
@font-face{ font-family:"Vazirmatn"; src:url("../fonts/vazirmatn-latin.woff2") format("woff2"); font-weight:100 900; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Ruqaa"; src:url("../fonts/aref-ruqaa-arabic-700.woff2") format("woff2"); font-weight:700; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC; }
@font-face{ font-family:"Ruqaa"; src:url("../fonts/aref-ruqaa-latin-700.woff2") format("woff2"); font-weight:700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2212; }

/* ---------- توکن‌ها ---------- */
:root{
  --void:#000;
  --ox-9:#0a0203; --ox-8:#140407; --ox-7:#3b0610; --ox-6:#5c0a17;
  --cardinal:#e3122c; --cardinal-hi:#ff3b4e; --ember:#ff5a1f; --flare:#ffa35c;
  --bone:#f3e9e4; --ash:#a8958f; --smoke:#7a6a66;
  --line:rgba(227,18,44,.22); --line-2:rgba(243,233,228,.1);
  --rope:repeating-linear-gradient(115deg,#4d0510 0 3px,#a50d24 3px 6px,#e3122c 6px 7.5px,#7a0918 7.5px 10px);
  --f-text:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;
  --f-display:"Ruqaa","Vazirmatn",Georgia,serif;
  --fs:1.0625rem; --lh:1.95;
  --gut:clamp(18px,4.2vw,56px); --maxw:1240px; --top:136px;
  --r-s:10px; --r-m:18px; --r-l:28px;
  --ease:cubic-bezier(.22,.8,.24,1); --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
:root[lang="en"]{ --fs:1.03rem; --lh:1.7; }

/* ---------- پایه ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--void); -webkit-text-size-adjust:100%; text-size-adjust:100%; scrollbar-color:var(--ox-7) var(--void); overflow-x:clip; }
html.has-gate,html.dial-open{ overflow:hidden; }
body{ margin:0; min-height:100vh; background:var(--void); color:var(--bone); font:400 var(--fs)/var(--lh) var(--f-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; overflow-x:clip; }
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,p{ margin:0; }
::selection{ background:rgba(227,18,44,.6); color:#fff; }
:focus-visible{ outline:2px solid var(--flare); outline-offset:3px; border-radius:6px; }
.main{ display:block; outline:none; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ width:1.25em; height:1.25em; flex:none; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:fixed; inset-inline-start:16px; top:-60px; z-index:300; padding:10px 18px; border-radius:var(--r-s); background:var(--bone); color:#000; font-weight:700; transition:top .2s; }
.skip:focus{ top:16px; }

/* ---------- تایپ ---------- */
.display{ font-family:var(--f-display); font-weight:700; line-height:1.3; letter-spacing:0; }
:root[lang="en"] .display{ line-height:1.08; }
.h2{ font-size:clamp(2.1rem,4.4vw,3.6rem); max-width:20ch; margin-block-end:clamp(32px,4.5vw,60px); }
.lead{ font-size:clamp(1.06rem,1.35vw,1.22rem); color:var(--ash); max-width:52ch; }

/* ---------- دکمه‌های معمولی ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:var(--r-s);
  border:1px solid transparent; font-weight:700; cursor:pointer; transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--spring); }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--cardinal); color:#fff; box-shadow:0 10px 30px -12px rgba(227,18,44,.8); }
.btn-primary:hover{ background:var(--cardinal-hi); }
.btn-ghost{ border-color:var(--line-2); color:var(--bone); background:transparent; }
.btn-ghost:hover{ border-color:rgba(255,90,31,.55); }

/* ==========================================================================
   هدر دسکتاپ: گره در وسط و طناب‌هایی که از آن به هر گزینه آویزان است
   ========================================================================== */
.head{ --hh:96px; position:fixed; inset:0 0 auto; z-index:60; height:var(--hh);
  transition:height .45s var(--ease),background-color .45s,box-shadow .45s; }
.head.is-scrolled{ --hh:70px; background:rgba(0,0,0,.84); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(227,18,44,.18); }
.rope-nav{ position:relative; height:100%; max-width:1000px; margin-inline:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.rope-side{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:clamp(22px,2.8vw,48px); }
.side-a{ justify-self:end; padding-inline-end:clamp(30px,3.6vw,60px); }
.side-b{ justify-self:start; padding-inline-start:clamp(30px,3.6vw,60px); }
.rope-link{ display:block; padding:8px 2px 12px; color:var(--ash); font-weight:600; white-space:nowrap; transition:color .25s; }
:root[lang="en"] .rope-link{ font-size:.96rem; }
.rope-link:hover,.rope-link:focus-visible,.rope-link.is-hot,.rope-link[aria-current="page"]{ color:var(--bone); }
.rope-knot{ position:relative; z-index:2; display:grid; justify-items:center; padding:4px 8px; color:var(--bone); }
.knot-svg{ width:54px; height:54px; filter:drop-shadow(0 0 16px rgba(227,18,44,.38));
  transition:transform .8s var(--spring),width .45s var(--ease),height .45s var(--ease); }
.knot-name{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; line-height:1.1; max-height:1.4em; overflow:hidden; transition:opacity .3s,max-height .45s var(--ease); }
.head.is-scrolled .knot-svg{ width:42px; height:42px; }
.head.is-scrolled .knot-name{ opacity:0; max-height:0; }
.ropes{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.rope{ fill:none; stroke-linecap:round; }
.rope-base{ stroke:#260408; stroke-width:4.4; }
.rope-twist{ stroke:#7d0a1b; stroke-width:2.8; stroke-dasharray:2.4 2.1; transition:stroke .3s; }
.rope-hl{ stroke:rgba(255,190,150,.2); stroke-width:.9; transition:stroke .3s; }
.rope-spark{ stroke:var(--flare); stroke-width:3; stroke-dasharray:16 6000; opacity:0; }
.rope-g{ transition:filter .3s; }
.rope-g.is-tight .rope-twist{ stroke:var(--cardinal); }
.rope-g.is-tight .rope-hl{ stroke:rgba(255,205,170,.55); }
.rope-g.is-tight{ filter:drop-shadow(0 0 6px rgba(227,18,44,.6)); }

.head-tools{ position:absolute; inset-inline-end:var(--gut); top:50%; transform:translateY(-50%); z-index:3; display:flex; align-items:center; gap:16px; }
.lang-btn{ display:grid; place-items:center; min-width:42px; height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--line-2);
  color:var(--ash); font:700 .82rem/1 var(--f-text); transition:color .2s,border-color .2s; }
.lang-btn:hover{ color:var(--bone); border-color:rgba(255,90,31,.55); }
.tool-link{ color:var(--ash); font-weight:600; transition:color .2s; }
.tool-link:hover,.tool-link[aria-current]{ color:var(--bone); }
.tool-pill{ padding:7px 18px; border-radius:999px; background:var(--ember); color:#1c0400; font-weight:800; box-shadow:0 8px 26px -10px rgba(255,90,31,.85); transition:background-color .2s; }
.tool-pill:hover{ background:var(--flare); }
.tool-ico{ display:none; }
.acct{ position:relative; }
.acct summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:3px; border-radius:999px; cursor:pointer; }
.acct summary::-webkit-details-marker{ display:none; }
.acct-av{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#fff; font-weight:800;
  background:radial-gradient(circle at 35% 30%,#ff6b3d,#b30f27 58%,#3d040d); box-shadow:0 0 0 2px #000,0 0 0 3px rgba(227,18,44,.5); }
.acct-name{ max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.acct-menu{ position:absolute; inset-inline-end:0; top:calc(100% + 12px); min-width:240px; padding:16px; border-radius:var(--r-m);
  background:#0b0204; border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.75); }
.acct-hi{ font-weight:700; }
.acct-soon{ margin:2px 0 14px; color:var(--smoke); font-size:.85rem; }
.acct-out{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:var(--r-s); border:1px solid var(--line-2);
  background:none; cursor:pointer; transition:border-color .2s; }
.acct-out:hover{ border-color:var(--cardinal); }
.mbrand{ display:none; }

/* ---------- پیام‌ها ---------- */
.toasts{ position:fixed; z-index:150; top:calc(14px + env(safe-area-inset-top,0px)); inset-inline:0; display:grid; justify-items:center; gap:8px; pointer-events:none; padding-inline:16px; }
.toast{ pointer-events:auto; display:flex; align-items:center; gap:12px; max-width:min(560px,100%); padding:12px 14px; border-radius:var(--r-m);
  background:#0d0305; border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.7); animation:toast-in .5s var(--spring); }
.toast-ok .ico{ color:var(--flare); }
.toast.is-out{ animation:toast-out .35s var(--ease) forwards; }
.toast-x{ display:grid; place-items:center; width:30px; height:30px; margin-inline-start:6px; border:0; border-radius:50%; background:none; color:var(--ash); cursor:pointer; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-14px) scale(.96); } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(-10px); } }

/* ==========================================================================
   دکمه‌ی سیمبیوت (از صفحه‌ی ورود GameForge، با رنگ‌های گره)
   ========================================================================== */
.stick{ --size:150px; --c1:var(--cardinal); --c2:#ff6b3d; --cx:0px; --cy:0px; --tx:0px; --ty:0px;
  position:relative; flex:none; display:inline-block; width:var(--size); height:var(--size); padding:0; border:0; border-radius:50%;
  background:none; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transform:translate(var(--tx),var(--ty)); transition:transform .35s var(--spring); }
.stick[data-symbiote="ember"]{ --c1:var(--ember); --c2:var(--flare); }
.stick .ring{ position:absolute; border-radius:50%; pointer-events:none; transition:opacity .6s; }
.ring-glow,.ring-arc,.ring-dash{ will-change:transform; }
.ring-glow{ inset:-8px; opacity:.42; animation:spin 9s linear infinite;
  background:conic-gradient(from 0deg,transparent 0 6%,var(--c1) 22%,var(--c2) 36%,transparent 52% 56%,var(--c1) 72%,var(--c2) 86%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 74%,#000 86%,transparent 100%); mask:radial-gradient(farthest-side,transparent 58%,#000 74%,#000 86%,transparent 100%); }
.ring-arc{ inset:4px; opacity:.55; animation:spin 9s linear infinite;
  background:conic-gradient(from 0deg,transparent 0 6%,var(--c1) 22%,#fff 30%,var(--c2) 36%,transparent 52% 56%,var(--c1) 72%,#fff 80%,var(--c2) 86%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); }
.ring-track{ inset:4px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c1) 30%,transparent); }
.ring-dash{ inset:calc(var(--size) * .077); opacity:.45; border:1.5px dashed color-mix(in srgb,var(--c2) 60%,transparent); animation:spin 15s linear infinite reverse; }
.stick[data-symbiote="ember"] .ring-glow,.stick[data-symbiote="ember"] .ring-arc{ animation-direction:reverse; }
.stick[data-symbiote="ember"] .ring-dash{ animation-direction:normal; }
.stick::before{ content:""; position:absolute; inset:calc(var(--size) * .131); border-radius:50%;
  transform:translate(calc(var(--cx) * .5),calc(8px + var(--cy) * .5)) scale(1.06);
  background:radial-gradient(circle at 50% 62%,rgba(0,0,0,.8),rgba(0,0,0,.4) 50%,transparent 72%); transition:transform .35s var(--spring); }
.cap{ position:absolute; inset:calc(var(--size) * .131); border-radius:50%; display:grid; place-items:center;
  transform:translate(var(--cx),var(--cy)); transition:transform .35s var(--spring);
  background:radial-gradient(circle at 50% 26%,#3b1a1d 0%,#170709 46%,#050102 100%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.22),inset 0 -12px 20px rgba(0,0,0,.8),0 10px 18px rgba(0,0,0,.7),0 3px 6px rgba(0,0,0,.6),0 0 0 3px rgba(0,0,0,.55); }
.cap::before{ content:""; position:absolute; inset:calc(var(--size) * .054); border-radius:50%; box-shadow:inset 0 6px 12px rgba(0,0,0,.6);
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.035) 0 1.5px,transparent 1.5px 5px); }
.cap::after{ content:""; position:absolute; inset:2px; border-radius:50%; opacity:.6; transition:opacity .6s;
  box-shadow:inset 0 0 0 2.5px color-mix(in srgb,var(--c1) 85%,#fff),0 0 12px var(--c1),0 0 28px color-mix(in srgb,var(--c1) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--c1) 40%,transparent); }
.cap-txt{ position:relative; z-index:1; padding:0 6px; font:900 calc(var(--size) * .128)/1.2 var(--f-text); text-align:center; color:#fff; opacity:.78;
  text-shadow:0 0 8px var(--c1),0 0 20px var(--c1); transition:opacity .6s,text-shadow .6s; }
.stick.is-active .ring-arc,.stick.is-active .ring-glow,.stick.is-active .cap::after,.stick.is-active .cap-txt{ opacity:1; }
.stick.is-active .ring-dash{ opacity:.9; }
.stick.is-active .cap-txt{ text-shadow:0 0 6px var(--c2),0 0 16px var(--c1),0 0 34px var(--c1); }
.stick:hover .cap-txt{ opacity:1; }
.stick:active .cap{ transform:translate(var(--cx),var(--cy)) scale(.95); }
.stick:focus-visible{ outline:2px solid var(--flare); outline-offset:8px; border-radius:50%; }
.stick.is-busy .cap-txt{ opacity:.35; }
.stick-pair{ display:flex; align-items:center; justify-content:center; gap:clamp(26px,4.5vw,60px); }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* بوم‌های مایع (با جاوااسکریپت ساخته می‌شوند) */
.sym-cv{ position:fixed; left:0; top:0; pointer-events:none; contain:strict; }
.sym-cv.is-off{ display:none; }

/* ==========================================================================
   منوی چرخشی موبایل: لوگوی شناور پایین صفحه → دایره‌ی گزینه‌ها
   ========================================================================== */
.dial{ display:none; --hub:66px; --hub-b:calc(16px + env(safe-area-inset-bottom,0px)); --lift:136px; --r:118px; }
.dial-veil{ position:fixed; inset:0; z-index:90; background:radial-gradient(circle at 50% calc(100% - var(--hub-b) - var(--lift) - 33px),rgba(170,12,32,.5) 0,rgba(70,4,14,.78) 150px,rgba(0,0,0,.93) 320px);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); opacity:0; pointer-events:none; touch-action:none; transition:opacity .35s var(--ease); }
.dial-ring{ position:fixed; z-index:92; left:50%; bottom:calc(var(--hub-b) + var(--hub) / 2 + var(--lift)); width:0; height:0; pointer-events:none; }
.dial-wedge{ position:absolute; left:0; top:0; width:calc(var(--r) * 2 + 96px); height:calc(var(--r) * 2 + 96px); border-radius:50%;
  transform:translate(-50%,-50%) rotate(var(--wa,0deg)); opacity:0; transition:opacity .2s,transform .28s var(--ease);
  background:conic-gradient(from -36deg,rgba(227,18,44,.42),rgba(255,90,31,.16) 72deg,transparent 72deg);
  -webkit-mask:radial-gradient(circle,transparent 40px,#000 42px,#000 69%,transparent 71%); mask:radial-gradient(circle,transparent 40px,#000 42px,#000 69%,transparent 71%); }
.dial.has-sel .dial-wedge{ opacity:1; }
.dial-hint{ position:absolute; left:0; top:calc(var(--r) * -1 - 92px); transform:translateX(-50%); width:max-content; max-width:80vw;
  color:var(--ash); font-size:.82rem; text-align:center; opacity:0; transition:opacity .3s .2s; }
.dial-item{ position:absolute; left:0; top:0; width:58px; height:58px; display:block; opacity:0;
  transform:translate(-50%,-50%) rotate(var(--a)) translate(0) rotate(calc(var(--a) * -1)) scale(.35);
  transition:transform .5s var(--spring),opacity .25s; transition-delay:calc(var(--i) * 28ms); }
.dial-ico{ display:grid; place-items:center; width:100%; height:100%; border-radius:50%; color:var(--bone);
  background:radial-gradient(circle at 50% 30%,#2a0c10,#0c0204 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(227,18,44,.35),0 10px 24px rgba(0,0,0,.7);
  transition:transform .25s var(--spring),box-shadow .25s,color .25s; }
.dial-ico .ico{ width:24px; height:24px; }
.dial-label{ position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%); white-space:nowrap; font-size:.8rem; font-weight:700; color:var(--ash); transition:color .2s; }
.dial-item[aria-current="page"] .dial-ico{ box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 2px var(--ember),0 10px 24px rgba(0,0,0,.7); }
.dial-item.is-hot .dial-ico,.dial-item:focus-visible .dial-ico{ transform:scale(1.18); color:#fff;
  box-shadow:0 0 0 2px var(--cardinal),0 0 26px rgba(227,18,44,.75),inset 0 0 18px rgba(255,90,31,.35); }
.dial-item.is-hot .dial-label{ color:var(--bone); }
.dial-item.is-go .dial-ico{ animation:dial-go .3s var(--ease); }
.dial-item:focus-visible{ outline:none; }
@keyframes dial-go{ 50%{ transform:scale(1.32); box-shadow:0 0 0 3px var(--flare),0 0 44px var(--ember); } }
.dial-hubwrap{ position:fixed; z-index:95; left:50%; bottom:var(--hub-b); width:var(--hub); height:var(--hub);
  transform:translate(-50%,0); transition:transform .5s var(--spring),opacity .3s; }
.dial-hub.stick{ --size:var(--hub); touch-action:none; }
.dial-hub .ring-glow{ inset:-6px; }
.dial-hub .cap{ inset:6px; }
.dial-knot{ width:70%; height:70%; position:relative; z-index:1; transition:transform .6s var(--spring); }
.dial-open .dial-veil{ opacity:1; pointer-events:auto; }
.dial-open .dial-ring{ pointer-events:auto; }
.dial-open .dial-hint{ opacity:1; }
.dial-open .dial-item{ opacity:1; transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)) scale(1); }
.dial-open .dial-hubwrap{ transform:translate(-50%,calc(var(--lift) * -1)); }
.dial-open .dial-knot{ transform:rotate(var(--kr,60deg)); }
html.typing .dial-hubwrap{ opacity:0; pointer-events:none; transform:translate(-50%,140%); }
.nofall{ display:none; }

/* ---------- فوتر ---------- */
.foot{ border-top:1px solid var(--line-2); padding:44px var(--gut) calc(44px + env(safe-area-inset-bottom,0px)); }
.foot-in{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:auto 1fr; gap:18px 40px; align-items:center; }
.foot-brand{ display:flex; align-items:center; gap:12px; }
.foot-brand svg{ width:44px; height:44px; }
.foot-brand b{ display:block; font-family:var(--f-display); font-size:1.35rem; line-height:1.2; }
.foot-brand small{ display:block; color:var(--smoke); font-size:.82rem; }
.foot-nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 26px; color:var(--ash); font-weight:600; }
.foot-nav a:hover,.foot-nav a[aria-current]{ color:var(--bone); }
.foot-note{ grid-column:1 / -1; display:flex; align-items:center; gap:12px; color:var(--smoke); font-size:.88rem; }
.foot-18{ flex:none; display:grid; place-items:center; height:28px; padding:0 9px; border-radius:7px; border:1px solid rgba(227,18,44,.5); color:var(--cardinal-hi); font-weight:800; font-size:.78rem; }
.foot-copy{ grid-column:1 / -1; color:var(--smoke); font-size:.8rem; }

/* ---------- تأیید سن ---------- */
.agegate{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:opacity .45s var(--ease); }
.agegate.is-leaving{ opacity:0; pointer-events:none; }
.ag-card{ width:min(470px,100%); text-align:center; display:grid; justify-items:center; gap:14px; padding:36px 28px; border-radius:var(--r-l);
  background:radial-gradient(120% 80% at 50% 0%,rgba(227,18,44,.16),transparent 60%),#070102; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.8); }
.ag-knot{ width:72px; height:72px; filter:drop-shadow(0 0 24px rgba(227,18,44,.5)); }
.ag-title{ font-size:2.2rem; }
.ag-text{ color:var(--ash); }
.ag-actions{ display:grid; gap:10px; width:100%; margin-top:8px; }

/* ==========================================================================
   موبایل و تبلت (زیر ۱۰۰۰ پیکسل): منوی چرخشی به جای طناب‌ها
   ========================================================================== */
@media (max-width:999.98px){
  :root{ --top:96px; }
  .head{ --hh:68px; position:absolute; }
  .head.is-scrolled{ --hh:68px; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .rope-nav{ display:none; }
  .mbrand{ display:flex; align-items:center; gap:8px; position:absolute; inset-inline-start:var(--gut); top:50%; transform:translateY(-50%);
    font-family:var(--f-display); font-weight:700; font-size:1.4rem; line-height:1; }
  .mbrand svg{ width:38px; height:38px; }
  .tool-link,.tool-pill,.acct-name{ display:none; }
  .tool-ico{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); }
  .head-tools{ gap:10px; }
  .dial{ display:block; }
  .foot{ padding-bottom:calc(126px + env(safe-area-inset-bottom,0px)); }
  .foot-in{ grid-template-columns:1fr; }
  .foot-nav{ justify-content:flex-start; }
}
@media (max-width:360px){ .dial{ --r:106px; --lift:126px; } }

/* بدون جاوااسکریپت: نوار ساده‌ی پایین صفحه */
.nofall{ position:fixed; inset:auto 0 0; z-index:80; justify-content:space-around; padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)); background:#070102; border-top:1px solid var(--line); }
.nofall a{ display:grid; justify-items:center; gap:2px; font-size:.75rem; color:var(--ash); }

/* ---------- حرکت کمتر ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}