/* ═══════════════════════════════════════════════════════════════════════
   حسن صباح: دژ الموت — پالتِ «شب و سنگ و مشعل»
   یکتا در کل کارگاه: هیچ بازی دیگری پس‌زمینه‌ی قهوه‌ایِ سنگی + نارنجیِ مشعل ندارد.
   موبایل‌فرست (§۶): همه‌چیز با rem/vmin، حاشیه‌ی امن، بدون طرح دسکتاپ.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{ font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
            font-weight:400; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
            font-weight:700; font-display:swap; }

:root{
  --bg:#141009; --bg2:#1e1811; --panel:#241b14; --panel2:#2d2219;
  --line:#4a3b2e; --ink:#f0e4d4; --muted:#a08f7d;
  --floor:#2a221a; --floor2:#332920; --wall:#0b0805; --shade:#161c25;
  --gold:#e8b93b; --gold2:#a8802014; --ember:#ff8a3d; --ember2:#ffb45e;
  --danger:#7d2a1e; --danger2:#c0392b; --ok:#4e8f7a;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family:'Vazirmatn',system-ui,sans-serif; background:var(--bg); color:var(--ink);
  overflow:hidden; overscroll-behavior:none; user-select:none; -webkit-user-select:none;
  font-size:clamp(14px,3.9vw,17px);
}

/* ---------- صفحه‌ها ---------- */
.screen{ position:fixed; inset:0; display:none; flex-direction:column;
  padding:calc(8px + var(--safe-t)) 10px calc(8px + var(--safe-b)); }
.screen.active{ display:flex; }

/* ---------- اسپلش ---------- */
#scr-splash{ align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%,#2a2015 0%,#141009 62%,#080604 100%); }
.splash-inner{ text-align:center; animation:sIn .7s ease both; }
.logo-svg{ width:min(46vw,190px); height:auto; filter:drop-shadow(0 8px 22px rgba(255,138,61,.28)); }
.lg-glow{ animation:emberPulse 2.4s ease-in-out infinite; }
.splash-title{ font-size:1.5rem; margin:.5rem 0 .1rem; letter-spacing:.4px; }
.splash-sub{ color:var(--ember2); margin:0 0 1rem; font-size:.95rem; }
.splash-bar{ width:150px; height:5px; background:#33281c; border-radius:4px; margin:0 auto; overflow:hidden; }
.splash-bar i{ display:block; height:100%; width:40%; border-radius:4px;
  background:linear-gradient(90deg,var(--ember),var(--gold)); animation:sBar 1.4s ease-in-out infinite; }
.splash-by{ display:block; margin-top:1rem; color:var(--muted); font-size:.75rem; }
#scr-splash.fade{ opacity:0; transition:opacity .45s ease; }
@keyframes sIn{ from{opacity:0; transform:scale(.9) translateY(10px);} to{opacity:1;} }
@keyframes sBar{ 0%{transform:translateX(-110%)} 100%{transform:translateX(270%)} }
@keyframes emberPulse{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* ---------- منو ---------- */
#scr-menu{ align-items:center; justify-content:center; position:relative; overflow-y:auto; }
/* §۱۷.۲.۱ — نقاشیِ دستیِ کارفرما از خودِ دژ الموت (`pro-art-v1`) پس‌زمینه‌ی منو شد.
   دو لایه‌ی گرادیانِ تیره رویش می‌نشیند تا متنِ طلایی خوانا بماند، و **همان گرادیانِ قبلی
   لایه‌ی آخر است**: اگر فایل نیامد (آفلاینِ اول، یا کارفرما فایل را برداشت) منو دقیقاً
   مثل قبل دیده می‌شود — همان الگوی fallbackِ §۱۷.۲، اینجا بدون نیاز به `onerror`. */
.menu-bg{ position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(12,9,6,.62) 0%, rgba(12,9,6,.80) 45%, rgba(12,9,6,.96) 100%),
    url('../assets/pro-art-v1/derived-v1/backgrounds/main-environment.png') center 22%/cover no-repeat,
    radial-gradient(ellipse at 50% 12%,#3a2c1c 0%,#1c1610 48%,#0c0906 100%); }
.menu-inner{ width:100%; max-width:420px; text-align:center; padding:6px 0 12px; position:relative; z-index:1; }
.menu-fedai{position:absolute;z-index:-1;height:min(68vh,610px);width:auto;inset-inline-start:50%;top:50%;transform:translate(-50%,-48%);opacity:.34;filter:drop-shadow(0 18px 26px #000);pointer-events:none;mask-image:linear-gradient(#000 54%,transparent 96%)}
.menu-inner::before{content:'';position:absolute;z-index:-1;inset:-12px -10px;background:radial-gradient(ellipse at center,rgba(20,16,9,.44),rgba(20,16,9,.88) 74%);border-radius:24px;backdrop-filter:blur(1px)}
.logo-dome{ font-size:2.6rem; color:var(--gold); line-height:1; margin-bottom:.2rem;
  filter:drop-shadow(0 4px 14px rgba(255,138,61,.35)); }
#menu-title{ font-size:1.35rem; margin:.2rem 0 .1rem; }
.menu-sub{ color:var(--ember2); margin:0 0 .9rem; font-size:.88rem; }
.menu-row{ display:flex; gap:7px; justify-content:center; margin-top:7px; flex-wrap:wrap; }
.menu-extra{ margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.offer-badge{ position:absolute; top:calc(6px + var(--safe-t)); inset-inline-end:10px; z-index:5;
  background:linear-gradient(160deg,#c0392b,#7d2a1e); color:#fff; border:1px solid #e0705c;
  border-radius:14px; padding:7px 10px; font-family:inherit; font-size:.95rem; cursor:pointer;
  animation:pulse 1.6s infinite; display:none; }
.offer-badge i{ display:block; font-size:.62rem; font-style:normal; }

/* ---------- دکمه‌ها ---------- */
.btn{ font-family:inherit; font-size:.95rem; color:var(--ink); cursor:pointer;
  background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:13px; padding:11px 15px; display:inline-flex; align-items:center; gap:7px;
  justify-content:center; transition:transform .08s, filter .12s; }
.btn:active{ transform:translateY(2px); filter:brightness(1.12); }
.btn.big{ width:100%; font-size:1.12rem; font-weight:700; padding:15px; margin-top:6px; }
.btn.small{ font-size:.85rem; padding:9px 12px; }
/* §۶ — هیچ چیزِ لمس‌پذیری زیر ۴۴px نمی‌ماند (مرجع ۳۷۵×۸۱۲) */
.btn, .pill, .care-opt, .boost-card{ min-height:44px; }
.btn, .pill{ min-width:44px; }
.btn.gold{ background:linear-gradient(180deg,#f4cf63,var(--gold)); color:#2b1a05;
  border-color:#8a6a12; font-weight:700; box-shadow:0 4px 0 #8a6a12; }
.btn.gold:active{ box-shadow:0 1px 0 #8a6a12; }
.btn.ghost{ background:transparent; color:var(--muted); }
.btn.icon{ padding:9px 11px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.pulse{ animation:pulse 1.5s infinite; }
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }

/* ---------- نوار بالا و کیف پول ---------- */
.topbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.wallet{ display:flex; gap:8px; margin-inline-start:auto; }
.wallet span{ background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:5px 9px; font-size:.82rem; display:inline-flex; align-items:center; gap:4px; }
.goal-chip,.lives-chip{ background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:5px 9px; font-size:.82rem; display:inline-flex; align-items:center; gap:4px; }
.lives-chip{ color:#f0857a; }
.goal-chip.warn{ color:var(--ember2); border-color:var(--ember); }
.page-title{ font-size:1.1rem; margin:.2rem 0 .5rem; text-align:center; color:var(--gold); }

/* ---------- نقشه‌ی مراحل ---------- */
.map-path{ flex:1; overflow-y:auto; padding:4px 2px 20px; }
.ch-band{ margin:12px 0 6px; text-align:center; color:var(--ember2); font-size:.86rem;
  border-top:1px dashed var(--line); padding-top:8px; }
.map-row{ display:flex; justify-content:center; margin:5px 0; }
.node{ width:56px; height:56px; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel)); color:var(--ink);
  font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center; flex-direction:column; }
.node.done{ border-color:var(--gold); box-shadow:0 0 12px rgba(232,185,59,.2); }
.node.cur{ border-color:var(--ember); box-shadow:0 0 16px rgba(255,138,61,.45); animation:pulse 1.8s infinite; }
.node.lock{ opacity:.42; }
.node.care{ border-radius:50%; color:var(--ok); }
.node.boss{ background:linear-gradient(180deg,#4a2118,#2a1310); border-color:#c0392b; }
.node .st{ position:absolute; bottom:-8px; font-size:.6rem; color:var(--gold); letter-spacing:-1px; }
.node .ic{ opacity:.85; }

/* ---------- §۸.۹-ه تمِ فصل: پس‌زمینه + پالتِ لهجه‌ای عوض می‌شود ----------
   پالتِ پایه‌ی بازی («شب و سنگ و مشعل») ثابت می‌ماند؛ فقط رنگِ تأکید و گرادیانِ
   پس‌زمینه‌ی هر فصل فرق می‌کند — هزینه‌اش چند خط CSS، سودش حسِ «دارم جلو می‌روم». */
[data-ch]{ --accent:var(--gold); --accent2:var(--ember2); }
[data-ch="0"]{ --accent:#e8b93b; --accent2:#ffb45e;    /* دهلیزِ سنگی — کهربا و مشعل */
  --ch-bg:radial-gradient(ellipse at 50% 0%,#2c2116 0%,#171109 58%,#090704 100%); }
[data-ch="1"]{ --accent:#93c46b; --accent2:#d9eaa9;    /* باغِ مشعل — سبزِ شبانه */
  --ch-bg:radial-gradient(ellipse at 50% 0%,#1f2c17 0%,#12190e 58%,#060a05 100%); }
[data-ch="2"]{ --accent:#d76a86; --accent2:#ffa8bd;    /* بارگاهِ سالار — ارغوانِ خون */
  --ch-bg:radial-gradient(ellipse at 50% 0%,#301722 0%,#1b0d13 58%,#0a0508 100%); }
.game-screen[data-ch]{ background:var(--ch-bg); }
.game-screen[data-ch] .board{ border-color:color-mix(in srgb,var(--accent) 45%,#3a2e22); }
.game-screen[data-ch] .cell.goal{ box-shadow:inset 0 0 0 2px var(--accent); }
.game-screen[data-ch] .goal-chip.warn{ color:var(--accent2); border-color:var(--accent); }
.ch-band[data-ch]{ color:var(--accent2); border-top-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
.node.cur[data-ch]{ border-color:var(--accent); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 45%,transparent); }
.node.done[data-ch]{ border-color:var(--accent); }

/* ---------- گیم‌پلی ---------- */
.game-screen{ padding-bottom:calc(4px + var(--safe-b)); }
.board-wrap{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.board{ display:grid; grid-template-columns:repeat(var(--cols,9),var(--cell,30px));
  gap:2px; padding:6px; border-radius:12px;
  background:linear-gradient(180deg,#191309,#0e0a06); border:1px solid #3a2e22;
  box-shadow:inset 0 0 34px rgba(0,0,0,.75); }
.cell{ width:var(--cell,30px); height:var(--cell,30px); border-radius:4px; position:relative; touch-action:manipulation;
  background:var(--floor); display:flex; align-items:center; justify-content:center; }
.cell:nth-child(2n){ background:var(--floor2); }
.cell.wall{ background:var(--wall); border-radius:3px;
  box-shadow:inset 0 2px 0 #241b12, inset 0 -2px 0 #050403; }
.cell.shade{ background:var(--shade); box-shadow:inset 0 0 8px #000; }
.cell.torch{ background:#3a2a16; }
.cell.torch.off{ background:#241c12; }
.cell.door{ background:#43301c; }
.cell.door.open{ background:#2f2a1a; opacity:.75; }
.cell.trap{ background:#2b1d1a; }
.cell.trap.armed{ background:#5a201a; }
.cell.goal{ box-shadow:inset 0 0 0 2px var(--gold); }
.cell.seen{ background:linear-gradient(135deg,var(--danger) 0 25%,#6a2419 0 50%) 0/8px 8px; }
.cell.seen.hard{ background:linear-gradient(135deg,#8e2f22 0 25%,#5c1c14 0 50%) 0/6px 6px; }
.cell.litshade{ background:var(--shade); box-shadow:inset 0 0 0 2px var(--ok); }
.cell.hint{ outline:2px solid var(--gold); outline-offset:-2px; animation:pulse 1s infinite; }
.cell.can-move{outline:1px solid rgba(232,185,59,.55);outline-offset:-2px;cursor:pointer}.cell.can-move::after{content:'';position:absolute;inset:20%;border-radius:50%;background:rgba(232,185,59,.16);animation:pulse 1.5s infinite}
.cell.nope{ animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
.cell .mark{ width:62%; height:62%; opacity:.9; color:var(--gold); }
.cell.trap .mark{ color:#e0705c; }
.ent{ position:absolute; inset:8%; display:flex; align-items:center; justify-content:center; }
.ent svg{ width:100%; height:100%; }
.ent.p path{ fill:#dfe8f5; } .ent.p path.d{ fill:#1b2431; }
.ent.g path{ fill:#c9a06a; } .ent.g rect.s,.ent.g circle.s{ fill:#8d6a3c; }
.ent.g.rot path{ fill:#d8869a; }
.ent.d path{ fill:#b58b5e; } .ent.d circle.e{ fill:#2b1a05; }
.ent.t .f{ fill:var(--ember); animation:emberPulse 1.3s infinite; }
.ent.t .f2{ fill:#ffe9b0; } .ent.t .h{ fill:#6b5335; }
.ent.t.off .f{ fill:#4b4038; animation:none; }
.fdir{ position:absolute; inset:0; transform:rotate(var(--r,0deg)); }
.fdir::before{ content:''; position:absolute; top:-14%; left:50%; margin-left:-4px;
  border:4px solid transparent; border-bottom-color:var(--danger2); }

.tools{ display:flex; gap:6px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
.btn.tool{ padding:11px 13px; position:relative; }
.btn.tool b{ font-size:.7rem; color:var(--gold); }
.legend{ display:flex; gap:10px; justify-content:center; margin-top:6px; flex-wrap:wrap;
  font-size:.68rem; color:var(--muted); }
.legend i{ width:11px; height:11px; border-radius:3px; display:inline-block;
  vertical-align:-1px; margin-inline-end:3px; }

/* ---------- رفیقانِ راه ---------- */
.care-stage{ text-align:center; padding:8px 0; position:relative; }
.care-house{ font-size:2.2rem; color:var(--muted); }
.care-char{ font-size:2.6rem; color:var(--ember2); margin-top:4px; }
.care-char.shiver{ animation:shake 1.4s infinite; }
.care-bubble{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:9px 13px; margin:8px auto 0; max-width:330px; font-size:.88rem; }
.care-question{ text-align:center; margin:10px 0 6px; color:var(--gold); font-size:.95rem; }
.care-options{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding-bottom:14px; }
.care-opt{ font-family:inherit; font-size:.88rem; color:var(--ink); cursor:pointer; text-align:start;
  background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:13px; padding:11px 13px; display:flex; align-items:center; gap:9px; }
.care-opt .price{ margin-inline-start:auto; color:var(--gold); font-size:.82rem; }
.care-opt.wrong{ animation:shake .5s; border-color:var(--danger2); }
.choice-no{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:9px;background:rgba(232,185,59,.12);border:1px solid rgba(232,185,59,.35);color:var(--gold);font-weight:700}.care-opt:focus-visible{outline:3px solid var(--ember2);outline-offset:2px}

@media(max-width:380px), (max-height:680px){.menu-fedai{height:58vh;opacity:.25}.menu-inner{padding-inline:4px}.board-wrap{overflow:auto;justify-content:flex-start}.care-options{gap:6px}.care-opt{padding:9px 10px}}

/* ---------- کارت‌ها (فروشگاه/ردا/قهرمان) ---------- */
.cards{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:9px; padding-bottom:18px; }
.card{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:15px; padding:12px; display:flex; align-items:center; gap:11px; }
.card.hot{ border-color:var(--gold); box-shadow:0 0 16px rgba(232,185,59,.18); }
.card .ci{ font-size:1.6rem; color:var(--gold); flex:0 0 auto; }
.card .cb{ flex:1; min-width:0; }
.card .cn{ font-weight:700; font-size:.95rem; }
.card .cd{ color:var(--muted); font-size:.76rem; margin-top:2px; }
.card .cp{ flex:0 0 auto; }
.pill{ background:var(--gold); color:#2b1a05; border:0; border-radius:11px; padding:9px 13px;
  font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; white-space:nowrap; }
.pill.off{ background:var(--panel); color:var(--muted); border:1px solid var(--line); }
.strike{ text-decoration:line-through; color:var(--muted); font-size:.72rem; }

/* ---------- طومار (گذرنامه) ---------- */
.pass-progress{ text-align:center; color:var(--gold); margin-bottom:6px; font-size:.9rem; }
.pass-items{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:7px;
  margin-top:9px; padding-bottom:18px; }
.pass-row{ display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:8px 10px; }
.pass-row .n{ width:26px; text-align:center; color:var(--muted); font-size:.8rem; }
.pass-cell{ flex:1; text-align:center; font-size:.82rem; padding:6px; border-radius:9px;
  background:var(--panel2); border:1px dashed var(--line);
  min-height:44px; display:flex; align-items:center; justify-content:center; }
.pass-cell.gold{ border-color:var(--gold); color:var(--gold); }
.pass-cell.got{ opacity:.4; }
.pass-cell.can{ background:linear-gradient(180deg,#f4cf63,var(--gold)); color:#2b1a05; border-style:solid; cursor:pointer; }

/* ---------- §۶.۹ چیدمانِ شبکه‌ایِ عناصرِ هم‌نوع ----------
   عناصر برای جا شدن **کوچک نمی‌شوند**؛ در چند ردیفِ متوازن پخش می‌شوند و
   ردیفِ ناقص وسط‌چین می‌ماند. `--per-row` را JS از تعداد می‌گذارد:
   تا ۵ یک ردیف · ۶=۳+۳ · ۷=۴+۳ · ۸=۴+۴ · ۹–۱۰=۵+۵ یا ۵+۴ · ۱۱+ دو ردیفِ متوازن. */
.grid-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.grid-row > *{ flex:0 0 auto;
  width:calc((100% - (var(--per-row,4) - 1) * 7px) / var(--per-row,4));
  min-width:44px; min-height:44px; }

/* ---------- چرخِ سپهر ---------- */
.wheel-top{ text-align:center; color:var(--gold); margin-bottom:6px; }
.wheel-grid{ margin-bottom:12px; }
.wheel-cell{ background:var(--panel); border:1px solid var(--line); border-radius:13px;
  padding:12px 4px; text-align:center; font-size:.8rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.wheel-cell.on{ background:linear-gradient(180deg,#f4cf63,var(--gold)); color:#2b1a05; border-color:var(--gold); }
.wheel-cell .ic{ font-size:1.15rem; display:block; margin:0 auto 3px; }

/* ---------- حجره‌ی تمرین ---------- */
.hero-stage{ text-align:center; margin-bottom:10px; }
.hero-avatar{ font-size:2.4rem; color:var(--ember2); }
.hero-level{ color:var(--gold); font-size:.9rem; margin-top:3px; }
.bar{ height:6px; background:#100c08; border-radius:4px; overflow:hidden; margin-top:5px; }
.bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--ember),var(--gold)); }

/* ---------- اورلی‌ها ----------
   هشدار: باگِ رفع‌شده: همه‌ی اورلی‌ها z-index:60 داشتند و `#overlay` اولینِ DOM بود، پس
   پیامِ «لعل کم داری» پشتِ اورلیِ جلویی پنهان می‌ماند و بعداً ناگهان بالا می‌آمد.
   حالا لایه‌بندی صریح است: هرچه دیرتر باز می‌شود، بالاتر می‌نشیند. */
.overlay{ position:fixed; inset:0; z-index:60; background:rgba(6,4,2,.78);
  display:flex; align-items:center; justify-content:center; padding:16px;
  backdrop-filter:blur(2px); }
#story, #prep, #login{ z-index:62; }
#setov{ z-index:64; }
#nolives{ z-index:66; }
#cont{ z-index:68; }
#overlay{ z-index:70; }          /* نتیجه و پیشنهادها — روی هر اورلیِ زیرین */
#ad{ z-index:78; }               /* تبلیغ از هر جای بازی صدا زده می‌شود */
.overlay.hidden{ display:none; }

/* toastِ واقعی (§۱۲): محو می‌شود، دکمه ندارد، بازی را متوقف نمی‌کند، بالای همه است */
.toast{ position:fixed; z-index:95; inset-inline:0; margin:0 auto;
  bottom:calc(24px + var(--safe-b)); width:max-content; max-width:min(90vw,340px);
  background:rgba(18,13,8,.96); color:var(--ink); border:1px solid var(--gold);
  border-radius:14px; padding:11px 16px; font-size:.9rem; text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.65); opacity:0; pointer-events:none;
  transform:translateY(16px); transition:opacity .22s ease, transform .22s ease; }
.toast.on{ opacity:1; transform:translateY(0); }
.overlay-card,.story-card{ position:relative; width:100%; max-width:360px; text-align:center;
  background:linear-gradient(180deg,var(--panel2),#1a1310); border:1px solid var(--line);
  border-radius:20px; padding:18px 16px; max-height:88vh; overflow-y:auto;
  animation:ovIn .28s ease both; }
/* §۵.۷ راهِ برگشتِ دیدنیِ اورلی: در **گوشه**، ≥۴۴px، در RTL سمت راست و در LTR سمت چپ
   (inset-inline-start خودش جهت را می‌فهمد — نیازی به قاعده‌ی جدا برای dir نیست). */
.ov-x{ position:absolute; top:8px; inset-inline-start:8px; z-index:2;
  background:transparent; border-color:transparent; color:var(--muted); padding:10px; }
.ov-x:active{ color:var(--ink); }
/* اورلی‌هایی که X گوشه دارند، جا برای آن باز کنند تا روی آیکونِ بالای کارت نیفتد */
.has-x > .ov-icon{ margin-top:26px; }
@keyframes ovIn{ from{opacity:0; transform:translateY(18px) scale(.96);} to{opacity:1;} }
.ov-icon{ font-size:2rem; color:var(--gold); margin-bottom:6px; }
.overlay-card h2{ margin:.2rem 0; font-size:1.15rem; }
.overlay-card p{ color:var(--muted); font-size:.88rem; margin:.3rem 0 .7rem; line-height:1.7; }
.ov-reward{ color:var(--gold); font-size:1rem; margin:.4rem 0 .7rem; }
.cont-card{ border-color:#c0392b; box-shadow:0 0 26px rgba(192,57,43,.28); }
.story-card p{ color:var(--ink); font-size:.93rem; line-height:2; text-align:justify; }
.prep-list{ display:flex; flex-direction:column; gap:7px; margin:8px 0; }
.boost-card{ display:flex; align-items:center; gap:9px; font-family:inherit; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:10px;
  color:var(--ink); font-size:.86rem; }
.boost-card.sel{ border-color:var(--gold); background:#3a2c14; }
.boost-card .price{ margin-inline-start:auto; color:var(--gold); }
.login-days{ margin:8px 0; }
.day{ background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:9px 3px;
  font-size:.72rem; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.day.today{ border-color:var(--gold); box-shadow:0 0 12px rgba(232,185,59,.35); }
.day.past{ opacity:.38; }
.set-body{ text-align:start; display:flex; flex-direction:column; gap:9px; margin:8px 0; }
.set-row{ display:flex; align-items:center; gap:8px; font-size:.86rem; }
.set-row .pill{ margin-inline-start:auto; }
.set-body input,.set-body textarea{ width:100%; background:#100c08; color:var(--ink);
  border:1px solid var(--line); border-radius:11px; padding:9px; font-family:inherit; font-size:.9rem; }
.consent{ color:var(--muted); font-size:.7rem; line-height:1.7; }
#ad-banner{ position:fixed; bottom:0; inset-inline:0; height:50px; background:#0d0a06;
  border-top:1px solid var(--line); color:var(--muted); font-size:.72rem;
  display:flex; align-items:center; justify-content:center; z-index:40; }

/* ---------- بی‌حرکتیِ درخواستی ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
/* ---------- صفحه‌های خیلی کوتاه ---------- */
/* هشدار: `display:none` روی `.legend` غلط بود: روی ۳۲۰×۵۶۸ راهنمای رنگ‌ها کاملاً ناپدید می‌شد
   و بازیکن نمی‌فهمید سرخ یعنی دیدرس. حالا فقط **فشرده** می‌شود، نه حذف. */
@media (max-height:620px){
  .logo-dome{ font-size:2rem; } .btn.big{ padding:12px; font-size:1rem; }
  .legend{ font-size:.62rem; gap:8px; padding:2px 4px; margin-top:2px; line-height:1.2; }
  .legend i{ width:8px; height:8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   راهنمای گام‌به‌گام (کپی از _kit/tutor.css — §۷.۶: کپی، نه لینک)
   ═══════════════════════════════════════════════════════════════════════ */
.tut { position:fixed; inset:0; z-index:80; display:none; pointer-events:none; }
/* pointer-events:none روی ریشه حیاتی است: وگرنه «سوراخ» ماسک لمس‌ناپذیر می‌شود. */
.tut.on { display:block; }
.tut-mask  { position:fixed; background:rgba(0,0,0,.74); pointer-events:auto; }
.tut-ring  { position:fixed; border:3px solid var(--gold); border-radius:14px; pointer-events:none;
             box-shadow:0 0 18px rgba(232,185,59,.85); animation:tutPulse 1.1s infinite; }
.tut-ring.dim { border-color:rgba(232,185,59,.5); box-shadow:none; animation:none; }
@keyframes tutPulse { 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.06); opacity:.75} }
.tut-arrow { position:fixed; width:28px; height:28px; pointer-events:none; color:var(--gold);
             font-size:28px; line-height:28px; text-align:center; animation:tutBob .9s infinite; }
.tut-arrow::before { content:'▼'; }
@keyframes tutBob { 0%,100%{ margin-top:0 } 50%{ margin-top:8px } }
.tut-hand { position:fixed; width:30px; height:30px; pointer-events:none; color:var(--gold);
            filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.tut-hand .ic{ width:30px; height:30px; }
.tut-hand.tap  { animation:tutTap 1.2s infinite; }
.tut-hand.drag { animation:tutDrag 1.8s infinite; }
@keyframes tutTap  { 0%,100%{ transform:scale(1) } 45%{ transform:scale(.78) } }
@keyframes tutDrag { 0%{ transform:translate(0,0) scale(1) }
                     15%{ transform:translate(0,0) scale(.8) }
                     70%{ transform:translate(var(--dx),var(--dy)) scale(.8) }
                     85%,100%{ transform:translate(var(--dx),var(--dy)) scale(1); opacity:0 } }
.tut-bubble { position:fixed; width:240px; background:#f6ecdb; color:#241b14; border-radius:14px;
              padding:10px 14px; font-size:15px; font-weight:bold; text-align:center;
              pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.tut-skip { position:fixed; bottom:14px; inset-inline-end:14px; background:rgba(255,255,255,.14);
            color:#fff; border:none; border-radius:12px; padding:7px 14px; font-size:13px;
            font-family:inherit; cursor:pointer; pointer-events:auto; }

/* ═════ هنرِ کارفرما — پس‌زمینه‌ی صحنه‌ها (ALL-GAMES §۱۷.۲) — ساختِ _kit/art-all.py ═════
   متغیرِ --art-bg را js/art.js فقط وقتی ست می‌کند که فایل واقعاً لود شده باشد.
   نبودِ فایل ⇒ متغیر خالی ⇒ همان پس‌زمینه‌ی قبلی (بازی نمی‌شکند). */
.screen::before, [id^="scr-"]::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--art-bg, none); background-size:cover; background-position:center;
  opacity:.38;
}
.screen > *, [id^="scr-"] > * { position:relative; z-index:1; }