/* ===== فونت وزیرمتن — خودمیزبان، پس آفلاین و داخل APK هم کار می‌کنه ===== */
@font-face {
  font-family:'Vazirmatn';
  src:local('Vazirmatn'), url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Vazirmatn';
  src:local('Vazirmatn Bold'), url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; }
html,body { width:100%; height:100%; overflow:hidden; background:#0d1830;
  font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif; color:#f5e9d0; }

.screen { position:absolute; inset:0; display:none; flex-direction:column; }
.screen.active { display:flex; }

/* ===== دکمه‌ها ===== */
.btn { border:none; border-radius:14px; padding:12px 26px; margin:6px auto; font-size:18px; font-weight:bold;
  background:#1a7a6a; color:#fff; cursor:pointer; box-shadow:0 4px 0 #0e4a40; display:block; font-family:inherit; }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 #0e4a40; }
.btn.gold { background:linear-gradient(#e8b93b,#c98f1c); color:#3a2503; box-shadow:0 4px 0 #8a5f0e; }
.btn.big { font-size:24px; padding:16px 46px; }
.btn.small { font-size:14px; padding:8px 18px; }
.btn.tiny { font-size:12px; padding:4px 12px; margin:4px 0 0; }
.btn.icon { width:46px; height:46px; padding:0; font-size:22px; margin:0; border-radius:12px; }
.btn.ghost { background:rgba(255,255,255,.12); box-shadow:0 4px 0 rgba(0,0,0,.3); }
.btn:disabled { filter:grayscale(.6); opacity:.7; }
.btn.pulse { animation:pulse 1.1s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

/* ===== منو ===== */
#scr-menu { align-items:center; justify-content:center; isolation:isolate; }
.menu-bg { position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(5,8,20,.22) 0%, rgba(8,12,28,.06) 34%, rgba(8,10,20,.58) 76%, rgba(8,10,20,.88) 100%),
  radial-gradient(circle at 50% 33%, rgba(255,217,122,.22), transparent 42%),
  url('../assets/menu-bg.png') center / cover no-repeat; z-index:0; pointer-events:none; }
.menu-bg::after { content:''; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(8,12,28,.32), transparent 24%, transparent 72%, rgba(8,12,28,.28)),
  linear-gradient(180deg, rgba(8,12,28,.08), transparent 54%, rgba(0,0,0,.3)); }
.menu-inner { text-align:center; padding:20px; position:relative; z-index:1; width:min(92vw, 380px); isolation:isolate; }
.menu-rostam{position:absolute;z-index:-1;height:min(74vh,660px);width:auto;inset-inline-start:50%;top:48%;transform:translate(-50%,-50%);opacity:.34;pointer-events:none;filter:drop-shadow(0 20px 30px #000);mask-image:linear-gradient(#000 52%,transparent 96%)}
.menu-inner::before{content:'';position:absolute;inset:0 -8px;z-index:-1;background:radial-gradient(ellipse,rgba(13,24,48,.35),rgba(5,9,20,.9) 74%);border-radius:26px}
.guide-btn{width:100%;border:1px solid rgba(255,217,122,.6);background:rgba(13,24,48,.68);color:#ffe08a;box-shadow:0 4px 0 rgba(0,0,0,.4)}
.logo-dome { width:94px; height:94px; margin:0 auto 4px; display:grid; place-items:center; font-size:60px;
  border:1px solid rgba(255,217,122,.55); border-radius:50%; background:rgba(10,18,38,.5);
  box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 0 30px rgba(255,217,122,.14);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
h1 { font-size:36px; text-shadow:0 3px 8px rgba(0,0,0,.82), 0 0 24px rgba(255,217,122,.22); margin:8px 0 2px; }
.menu-sub { color:#ffe08a; margin-bottom:22px; font-size:18px; text-shadow:0 2px 7px rgba(0,0,0,.8); }
.menu-row { display:flex; gap:8px; justify-content:center; }
.menu-row .btn { margin:5px 0; flex:1; }
.offer-badge { position:absolute; top:-10px; inset-inline-end:-4px; font-size:30px; background:linear-gradient(#e8b93b,#c98f1c);
  border:none; border-radius:50%; width:58px; height:58px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.5);
  animation:pulse 1.1s infinite; display:none; }

.wallet { display:flex; gap:12px; justify-content:center; margin-top:14px; font-size:17px; font-weight:bold; }
.wallet span { background:rgba(0,0,0,.35); border-radius:20px; padding:5px 14px; }
.lives-chip { background:rgba(0,0,0,.35); border-radius:20px; padding:5px 14px; font-size:16px; font-weight:bold;
  display:inline-block; margin-top:10px; }
.lives-chip small { color:#ffd97a; font-size:12px; }

/* ===== نوار بالا ===== */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; gap:8px; z-index:5; flex-wrap:wrap; }
.topbar .lives-chip { margin-top:0; }
.topbar .wallet { margin-top:0; }
.goal-chip { background:rgba(0,0,0,.4); border-radius:20px; padding:7px 16px; font-size:16px; font-weight:bold; }

/* ===== نقشه ===== */
#scr-map { background:linear-gradient(#141b3d, #0d1830); overflow:hidden; }
.map-title { text-align:center; font-size:22px; color:#ffd97a; margin:4px 0 10px; }
.map-path { flex:1; overflow-y:auto; padding:10px 0 40px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.khan-label { background:rgba(232,185,59,.15); border:1px solid #c98f1c; color:#ffd97a; border-radius:20px;
  padding:5px 20px; font-size:15px; font-weight:bold; margin-top:6px; }
.map-node { width:76px; height:76px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:30px; background:#1a7a6a; box-shadow:0 5px 0 #0e4a40; cursor:pointer; position:relative; }
.map-node .lvl-num { font-size:13px; font-weight:bold; color:#ffd97a; }
.map-node.locked { background:#3a4155; filter:grayscale(.8); box-shadow:0 5px 0 #222; }
.map-node.done { background:linear-gradient(#e8b93b,#c98f1c); box-shadow:0 5px 0 #8a5f0e; }
.map-node.done .lvl-num { color:#3a2503; }
.map-node .stars { font-size:12px; letter-spacing:-2px; }
.map-node:nth-child(odd) { transform:translateX(-60px); }
.map-node:nth-child(even) { transform:translateX(60px); }
.khan-label:nth-child(odd), .khan-label:nth-child(even) { transform:none; }

/* ===== بوم بازی‌ها ===== */
.game-screen { background:linear-gradient(#111a34, #080f20); }
canvas { display:block; margin:0 auto; touch-action:none; border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.34), 0 0 0 1px rgba(255,217,122,.12); }

/* ===== نوار نیروهای نبرد ===== */
.unit-bar { display:flex; justify-content:center; gap:10px; padding:10px; }
.unit-btn { width:74px; height:74px; border-radius:16px; border:none; font-size:26px;
  background:linear-gradient(180deg, #219a82, #125a50); border:1px solid rgba(255,217,122,.22);
  box-shadow:0 4px 0 #0e4a40, 0 10px 16px rgba(0,0,0,.22); color:#fff; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:inherit; }
.unit-btn small { font-size:12px; font-weight:bold; color:#ffd97a; }
.unit-btn:disabled { filter:grayscale(.7); opacity:.6; }
.unit-btn:active { transform:translateY(3px); }

/* ===== صحنه‌ی کمک ===== */
#scr-care { background:linear-gradient(#203862 0%, #171b39 58%, #6b4a1c 100%); }
.care-stage { flex:1; position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.care-stage::before { content:''; position:absolute; inset:10% -20% 0; background:
  radial-gradient(circle at 50% 20%, rgba(255,217,122,.2), transparent 34%),
  linear-gradient(180deg, transparent 45%, rgba(0,0,0,.28)); }
.care-stage::after { content:''; position:absolute; left:-10%; right:-10%; bottom:-10px; height:90px;
  background:radial-gradient(ellipse at center, rgba(255,217,122,.18), rgba(69,39,22,.72) 65%, rgba(28,20,18,.92)); }
.care-house { width:210px; height:178px; display:grid; place-items:end center; margin-bottom:4px;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.5)); z-index:1; }
.care-char { position:absolute; bottom:18px; inset-inline-start:13%; width:126px; height:128px; transition:transform .3s; z-index:2; }
.care-char.shiver { animation:shiver .15s infinite; }
.care-char.happy { animation:hop .5s 3; }
@keyframes shiver { 0%{transform:translateX(-2px)} 50%{transform:translateX(2px)} 100%{transform:translateX(-2px)} }
@keyframes hop { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-24px)} }
.care-bubble { position:absolute; top:12%; inset-inline-start:12%; background:#fff; color:#333; border-radius:16px;
  padding:10px 16px; font-size:17px; font-weight:bold; max-width:70%; box-shadow:0 4px 10px rgba(0,0,0,.4); }
.care-bubble:empty { display:none; }
.care-question { text-align:center; font-size:19px; font-weight:bold; color:#ffd97a; padding:8px 16px; }
.care-options { display:flex; justify-content:center; gap:12px; padding:0 12px 22px; }
.care-opt { flex:1; max-width:130px; background:#f5e9d0; color:#3a2503; border:none; border-radius:16px; padding:12px 6px;
  font-size:15px; font-weight:bold; cursor:pointer; box-shadow:0 5px 0 #b09a70; font-family:inherit; }
.care-opt .em { font-size:36px; display:block; }
.care-opt .price { display:block; color:#8a5f0e; margin-top:4px; }
.care-opt:active { transform:translateY(3px); }
.care-opt.wrong { animation:shiver .12s 4; background:#e88; }

.care-place { position:relative; display:block; width:190px; height:150px; }
.care-place span { position:absolute; display:block; }
.care-place-camp span:first-child { left:24px; bottom:0; width:92px; height:104px; clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(#d9b16a,#7f4b2a); border:2px solid rgba(255,217,122,.6); }
.care-place-camp span:nth-child(2) { right:22px; bottom:0; width:88px; height:88px; clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(#cda060,#6f3f25); }
.care-place-camp span:nth-child(3) { left:86px; bottom:20px; width:22px; height:36px; border-radius:50% 50% 30% 30%;
  background:linear-gradient(#fff3a0,#e85a3a 55%,#6a1e22); }
.care-place-oasis span:first-child { left:20px; bottom:18px; width:150px; height:52px; border-radius:50%;
  background:linear-gradient(#7fe8d0,#1c7ea0); box-shadow:0 0 20px rgba(127,232,208,.42); }
.care-place-oasis span:nth-child(2) { left:40px; bottom:62px; width:18px; height:78px; border-radius:9px; background:#7a512f; transform:rotate(12deg); }
.care-place-oasis span:nth-child(3) { left:26px; bottom:118px; width:92px; height:42px; border-radius:80% 10%;
  background:#2ca36e; transform:rotate(-18deg); }
.care-place-tent span:first-child { left:36px; bottom:0; width:120px; height:122px; clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(#65467a,#251b3f); border:2px solid rgba(255,217,122,.5); }
.care-place-tent span:nth-child(2) { left:83px; bottom:0; width:30px; height:56px; clip-path:polygon(50% 0,100% 100%,0 100%); background:#0d101d; }
.care-place-tent span:nth-child(3) { left:94px; bottom:118px; width:52px; height:22px; clip-path:polygon(0 0,100% 50%,0 100%); background:#1aa387; }
.care-place-castle span:first-child,
.care-place-throne span:first-child { left:28px; bottom:0; width:134px; height:96px; background:linear-gradient(#9f8a72,#50464e); border:2px solid rgba(255,217,122,.45); }
.care-place-castle span:nth-child(2),
.care-place-throne span:nth-child(2) { left:70px; bottom:72px; width:52px; height:74px; background:linear-gradient(#aa9478,#5a4a55); border:2px solid rgba(255,217,122,.45); }
.care-place-castle span:nth-child(3),
.care-place-throne span:nth-child(3) { left:82px; bottom:0; width:26px; height:48px; border-radius:14px 14px 0 0; background:#161b2a; }
.care-place-throne span:first-child { background:linear-gradient(#c79b3e,#71431f); }
.care-place-throne span:nth-child(2) { background:linear-gradient(#e0b94f,#8a5f0e); }

.care-figure { position:relative; display:block; width:126px; height:128px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.care-figure span { position:absolute; display:block; }
.cf-body { left:34px; bottom:10px; width:58px; height:72px; border-radius:28px 28px 18px 18px; background:linear-gradient(#d8a33f,#68351f); }
.cf-head { left:46px; top:18px; width:34px; height:34px; border-radius:50%; background:#d7a06c; }
.cf-detail { left:35px; top:7px; width:56px; height:26px; background:#d8a33f; clip-path:polygon(0 70%,50% 0,100% 70%,78% 100%,22% 100%); }
.care-rakhsh .cf-body { left:18px; bottom:32px; width:78px; height:42px; border-radius:50%; background:linear-gradient(#f4f0dc,#c7b78f); }
.care-rakhsh .cf-head { left:82px; top:38px; width:34px; height:28px; border-radius:45% 55% 45% 45%; background:#f4f0dc; }
.care-rakhsh .cf-detail { left:24px; top:70px; width:76px; height:42px; background:transparent; border-inline-start:6px solid #8a5f0e; border-inline-end:6px solid #8a5f0e; }
.care-rakhsh .cf-head::before { content:''; position:absolute; right:2px; top:-14px; width:12px; height:18px; background:#f4f0dc; clip-path:polygon(50% 0,100% 100%,0 100%); }
.care-rostam .cf-body { background:linear-gradient(#d8a33f,#6b2d22); }
.care-rostam .cf-body::before { content:''; position:absolute; inset:18px 8px auto; height:10px; background:#3a2016; border-radius:6px; }
.care-rostam .cf-head::after { content:''; position:absolute; left:7px; top:19px; width:20px; height:6px; border-radius:50%; background:#21160f; }
.care-sorceress .cf-body { background:linear-gradient(#7a4ab8,#251642); }
.care-sorceress .cf-head { background:#c99b75; }
.care-sorceress .cf-detail { background:#2b173f; clip-path:polygon(50% 0,100% 100%,0 100%); height:42px; top:0; }
.care-kavus .cf-body { background:linear-gradient(#2f65a8,#19274a); }
.care-kavus .cf-detail { background:#e3bc54; }
.care-kavus .cf-head::after { content:''; position:absolute; left:6px; top:15px; width:22px; height:7px; border-radius:8px; background:rgba(255,255,255,.72); }

/* ===== فروشگاه ===== */
.shop-items { flex:1; overflow-y:auto; padding:10px 18px 30px; display:flex; flex-direction:column; gap:12px; }
.shop-card { background:rgba(255,255,255,.08); border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:14px; }
.shop-card .em { font-size:38px; }
.shop-card .info { flex:1; }
.shop-card .info b { font-size:17px; }
.shop-card .info small { display:block; color:#cbbfa4; }
.shop-card.starter { border:2px solid #e8b93b; background:rgba(232,185,59,.14); animation:glow 1.4s infinite; }
.shop-card.piggy { border:1px solid #7a5cc9; background:rgba(122,92,201,.15); }
.shop-card .timer { color:#ffd97a; font-weight:bold; }
@keyframes glow { 0%,100%{box-shadow:0 0 4px rgba(232,185,59,.4)} 50%{box-shadow:0 0 18px rgba(232,185,59,.8)} }

/* ===== طومار پهلوانی ===== */
.pass-progress { text-align:center; font-size:17px; font-weight:bold; color:#ffd97a; margin:2px 0 6px; }
#pass-gold-btn { margin:0 auto 8px; }
.pass-items { flex:1; overflow-y:auto; padding:4px 14px 30px; display:flex; flex-direction:column; gap:8px; }
.pass-row { display:flex; gap:8px; align-items:stretch; }
.pass-row.locked { opacity:.45; }
.pass-tier { width:64px; background:rgba(255,255,255,.1); border-radius:12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-size:18px; }
.pass-tier small { font-size:10px; color:#cbbfa4; }
.pass-cell { flex:1; border-radius:12px; padding:8px; text-align:center; font-size:15px; font-weight:bold;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.pass-cell.free { background:rgba(26,122,106,.35); }
.pass-cell.gold { background:rgba(232,185,59,.2); border:1px solid #c98f1c; }
.pass-cell.claimed { opacity:.55; }
.pass-cell b { color:#7fe8a0; }

/* ===== گردونه ===== */
#scr-wheel { align-items:center; }
.wheel-bird { font-size:56px; margin-top:6px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.wheel-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:14px auto; width:100%; max-width:366px; }
.wheel-cell { width:100%; aspect-ratio:1; min-width:0; background:rgba(255,255,255,.08); border-radius:16px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; font-weight:bold; border:2px solid transparent; }
.wheel-cell .em { font-size:30px; }
.wheel-cell small { color:#ffd97a; }
.wheel-cell.hot { border-color:#ffd97a; background:rgba(232,185,59,.3); transform:scale(1.08); }

/* ===== ورود روزانه ===== */
.login-days { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin:10px 0 14px; }
.login-day { background:rgba(255,255,255,.08); border-radius:12px; padding:8px 4px; text-align:center; font-size:14px;
  font-weight:bold; border:2px solid transparent; min-width:0; overflow:hidden; }
.login-day small { display:block; color:#cbbfa4; font-size:11px; }
.login-day.today { border-color:#ffd97a; background:rgba(232,185,59,.25); animation:pulse 1.1s infinite; }
.login-day.past { opacity:.4; }

/* ===== بوسترها ===== */
.prep-list { display:flex; flex-direction:column; gap:8px; margin:10px 0 14px; }
.boost-card { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border:2px solid transparent;
  border-radius:14px; padding:10px 14px; color:#f5e9d0; font-family:inherit; font-size:15px; font-weight:bold; cursor:pointer; }
.boost-card .em { font-size:26px; }
.boost-card .bn { flex:1; text-align:start; }
.boost-card .price { color:#ffd97a; }
.boost-card.sel { border-color:#ffd97a; background:rgba(232,185,59,.22); }

/* ===== اورلی‌ها ===== */
.overlay { position:absolute; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:50; }
.overlay.hidden { display:none; }
.overlay-card, .story-card { position:relative; background:linear-gradient(#232b58,#141b3d); border:2px solid #c98f1c; border-radius:22px;
  padding:26px 22px; text-align:center; max-width:calc(100vw - 32px); width:360px; min-width:0;
  box-shadow:0 12px 40px rgba(0,0,0,.6); overflow:hidden; }
/* راهِ برگشتِ اورلی (§۵.۷ راه ۱) — لمس‌پذیر ۴۴px، در RTL چپ و در LTR راست (گوشه‌ی دورِ متن) */
.ov-close { position:absolute; top:6px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,217,122,.45); border-radius:12px; color:#ffd97a; cursor:pointer; z-index:2; }
.ov-close:active { background:rgba(255,217,122,.24); }
[dir="rtl"] .ov-close { left:6px; }
[dir="ltr"] .ov-close { right:6px; }
.ov-close .ic { width:20px; height:20px; }
.ov-emoji { font-size:58px; }
.overlay-card h2 { color:#ffd97a; margin:6px 0; }
.overlay-card p, .story-card p { font-size:17px; line-height:1.7; margin:8px 0 14px; }
.ov-reward { font-size:20px; font-weight:bold; margin-bottom:12px; }
.ov-reward:empty { display:none; }
#ov-btn2:empty { display:none; }
.cont-card { border-color:#e85a3a; }
.ad-card { border-color:#7a5cc9; }

/* ===== حاشیه‌ی امنِ دستگاه (ناچ بالا / نوار خانه‌ی پایین) — موبایل‌فرست ===== */
.topbar       { padding-top:    calc(10px + env(safe-area-inset-top, 0px)); }
.menu-inner   { padding-top:    calc(20px + env(safe-area-inset-top, 0px));
                padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.map-path     { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.shop-items,
.pass-items   { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
.care-options { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.unit-bar     { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.sj-tools     { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
/* ===== راهنمای گام‌به‌گام (فلش‌دار) — پیست شه داخل css/style.css هر بازی ===== */
/* توجه: همه‌ی انیمیشن‌ها CSS خالصه (نه RAF) — تو پنل مخفی هم کار می‌کنه. GAME-DESIGN §۷ */
.tut { position:fixed; inset:0; z-index:80; display:none; pointer-events:none; }
.tut.on { display:block; }
.tut-mask  { position:fixed; background:rgba(0,0,0,.72); pointer-events:auto; }
.tut-ring  { position:fixed; border:3px solid #ffd97a; border-radius:16px; pointer-events:none;
             box-shadow:0 0 18px rgba(255,217,122,.9); animation:tutPulse 1.1s infinite; }
.tut-ring.dim { border-color:rgba(255,217,122,.55); 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:#ffd97a;
             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; font-size:34px; pointer-events:none;
            filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.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:#fff; color:#222; border-radius:14px;
              padding:10px 14px; font-size:16px; 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,.16);
            color:#fff; border:none; border-radius:12px; padding:7px 14px; font-size:13px;
            font-family:inherit; cursor:pointer; pointer-events:auto; }

/* ===== بنر تبلیغ (رزرو — با provider واقعی Ads.banner(true) نشونش می‌ده) ===== */
#ad-banner { position:fixed; left:0; right:0; bottom:0; height:50px; background:#0a0f20;
  border-top:1px solid #2a3a5a; z-index:45; }
#ad-banner[hidden] { display:none; }
/* وقتی بنر نمایانه، صفحه‌ها و اورلی‌ها جا باز می‌کنن */
body:has(#ad-banner:not([hidden])) .screen,
body:has(#ad-banner:not([hidden])) .overlay { bottom:50px; }

/* ===== فصل‌ها روی نقشه (§۸.۹.ه) و مرحله‌ی باس ===== */
.khan-label.ch-label { background:linear-gradient(90deg,rgba(232,185,59,.28),rgba(120,90,200,.22));
  border-color:#ffd97a; color:#fff2c4; font-size:17px; padding:9px 20px; margin-top:10px; }
.map-node.boss { box-shadow:0 5px 0 #6a1f1f, 0 0 0 3px #e0705a inset; }
.map-node.boss .lvl-num { color:#ffd0c4; }
.map-node.done.boss .lvl-num { color:#3a2503; }

/* ═════ هنرِ کارفرما — پس‌زمینه‌ی صحنه‌ها (ALL-GAMES §۱۷.۲) ═════
   متغیرهای --art-* را js/art.js فقط وقتی ست می‌کند که فایل واقعاً لود شده باشد.
   نبودِ فایل ⇒ متغیر خالی ⇒ همان گرادیانِ زیرین دیده می‌شود (بازی نمی‌شکند). */
#scr-pin, #scr-m3, #scr-battle, #scr-care { position:relative; }
#scr-menu .menu-bg { position:absolute; inset:0; }
#scr-pin::before, #scr-m3::before, #scr-battle::before,
#scr-care::before, #scr-menu .menu-bg::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; opacity:.55;
}
#scr-pin::before          { background-image:var(--art-pin, none); }
#scr-m3::before           { background-image:var(--art-m3, none); }
#scr-battle::before       { background-image:var(--art-battle, none); }
#scr-care::before         { background-image:var(--art-care, none); }
#scr-menu .menu-bg::before{ background-image:var(--art-menu, none); opacity:.42; }
/* محتوای صحنه باید بالای پس‌زمینه بماند */
#scr-pin > *, #scr-m3 > *, #scr-battle > *, #scr-care > * { position:relative; z-index:1; }

/* ═════ هنرِ کارفرما — پس‌زمینه‌ی صحنه‌ها (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; }

/* شکست‌های واقعی موبایل: منو و کنترل‌ها در 320px و گوشی‌های کوتاه بدون بریدگی می‌مانند. */
@media(max-width:430px){
  .menu-inner{width:100%;padding-inline:10px}.btn.big{width:100%;font-size:20px;padding:13px 28px}.menu-row{gap:6px}.menu-row .btn{min-width:0;padding:9px 7px;font-size:12px}.topbar{padding-inline:7px;gap:5px}.topbar .wallet span,.goal-chip,.lives-chip{padding:5px 8px;font-size:12px}.unit-bar{gap:6px;padding-inline:6px}.unit-btn{width:64px;height:64px}.care-options{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory}.care-opt{flex:0 0 42%;scroll-snap-align:center}.story-card,.overlay-card{padding:22px 16px}.tut-bubble{width:min(230px,calc(100vw - 28px));font-size:14px}
}
@media(max-height:700px){
  .menu-inner{padding-block:8px}.menu-rostam{height:62vh;opacity:.24}.logo-dome{width:66px;height:66px;font-size:42px}h1{font-size:28px;margin:2px}.menu-sub{margin-bottom:8px}.btn{margin-block:3px}.wallet{margin-top:7px}.lives-chip{margin-top:5px}
}
@media(orientation:landscape) and (max-height:520px){
  .menu-inner{width:min(94vw,680px);display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;align-items:center}.logo-dome,.menu-inner h1,.menu-sub,.menu-wallet,.lives-chip{grid-column:1}.menu-inner>.btn,.menu-row{grid-column:2}.menu-rostam{height:94vh;inset-inline-start:22%;opacity:.42}.care-stage{min-height:120px}.care-options{padding-bottom:6px}.overlay-card,.story-card{max-height:94vh;overflow:auto}
}