* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; background:#120d08; touch-action:manipulation;
  font-family:"Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", sans-serif; color:#f0e6d2;
  user-select:none; -webkit-user-select:none; }

.screen { position:fixed; inset:0; }
.hidden { display:none !important; }
button { font-family:inherit; }

/* ================= Menu ================= */
#menu { overflow-y:auto; background:
  radial-gradient(ellipse at 50% -20%, #3d2f14 0%, transparent 60%),
  linear-gradient(180deg, #1c1508 0%, #120d08 55%, #0b1f16 100%); }
.wallet { position:absolute; top:max(10px, env(safe-area-inset-top)); inset-inline-end:12px;
  display:flex; gap:8px; z-index:2; }
.wchip { background:#00000066; border:1px solid #d9a44144; border-radius:999px;
  padding:5px 13px; font-size:14px; color:#ffd97a; white-space:nowrap; }
.wchip.gem { color:#7fd8ff; border-color:#7fd8ff44; }
.wchip.life { color:#ff9d9d; border-color:#ff9d9d44; cursor:pointer; }
.menu-inner { max-width:540px; margin:0 auto; padding:max(52px, env(safe-area-inset-top)) 20px 32px; text-align:center;
  display:flex; flex-direction:column; gap:13px; min-height:100%; justify-content:center; }
.crest { font-size:42px; color:#d9a441; text-shadow:0 0 24px rgba(217,164,65,.55); line-height:1; }
h1 { font-size:clamp(28px, 6vw, 40px); color:#d9a441; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.subtitle { color:#bfae8e; font-size:15px; line-height:1.7; }
#levels { display:flex; flex-direction:column; gap:8px; margin:6px 0; }
.lvlbtn { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid #4a3a1c;
  border-radius:12px; background:linear-gradient(180deg,#2a2010,#1c1609); color:#f0e6d2;
  font-size:15.5px; cursor:pointer; transition:transform .08s; }
.lvlbtn:active { transform:scale(.97); }
.lvlbtn .num { width:33px; height:33px; border-radius:50%; background:#0e5a3a; color:#ffd97a;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
  border:1px solid #d9a44166; }
.lvlbtn .lname { flex:1; text-align:start; }
.lvlbtn .star { color:#d9a441; font-size:13px; }
.lvlbtn.locked { opacity:.42; filter:grayscale(.7); }
.lvlbtn.locked .num { background:#333; color:#999; }
.menu-row { display:flex; gap:10px; justify-content:center; }
.bigchip { flex:1; max-width:200px; padding:13px 10px; border-radius:12px; font-size:16px;
  border:1px solid #d9a44166; background:linear-gradient(180deg,#33260f,#221a0a); color:#ffd97a; cursor:pointer; }
.bigchip.gem { border-color:#7fd8ff55; color:#aee6ff; background:linear-gradient(180deg,#0f2733,#0a1a22); }
.bigchip:active { transform:scale(.96); }
.howto { font-size:13px; color:#8f8268; line-height:1.8; }
.menu-foot { display:flex; gap:10px; justify-content:center; }
.chip { padding:9px 18px; border-radius:999px; border:1px solid #d9a44155; background:#1c160966;
  color:#d9a441; font-size:14px; cursor:pointer; }
.chip:active { transform:scale(.95); }
.credit { font-size:11px; color:#5c5240; }

/* ================= Story ================= */
#story { background:#000; }
#scv { position:absolute; inset:0; width:100%; height:100%; display:block; }
.skip { position:absolute; top:max(10px, env(safe-area-inset-top)); inset-inline-start:12px; z-index:3; }
#dlgbox { position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px max(18px, env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, rgba(8,6,3,.96) 60%, rgba(8,6,3,0));
  min-height:34%; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; }
#dlgname { color:#d9a441; font-weight:700; font-size:16px; min-height:16px; }
#dlgtext { color:#f0e6d2; font-size:clamp(15px, 2.6vh, 19px); line-height:1.9; max-width:820px; }
#dlgtap { color:#8f8268; font-size:11.5px; margin-top:4px; animation:blink 1.6s infinite; }
@keyframes blink { 50% { opacity:.25; } }

/* ================= Battle ================= */
#battle { background:#000; }
#cv { position:absolute; inset:0; width:100%; height:100%; display:block; }

#hud-top { position:absolute; top:0; left:0; right:0; direction:ltr;
  display:flex; align-items:center; gap:8px;
  padding:calc(6px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-left)) 6px max(10px, env(safe-area-inset-right));
  background:linear-gradient(180deg, rgba(10,8,4,.82), rgba(10,8,4,0)); }
.basebar { flex:1; max-width:220px; }
.basebar .bblabel { font-size:11px; color:#cbbb97; display:block; margin-bottom:2px; white-space:nowrap; }
.basebar.player { text-align:right; }
.bar { height:10px; border-radius:6px; background:#00000088; border:1px solid #ffffff2a; overflow:hidden; }
.fill { height:100%; border-radius:6px; transition:width .25s; }
.efill { background:linear-gradient(90deg,#8f1d1d,#d33); width:100%; }
.pfill { background:linear-gradient(90deg,#0e8a4f,#39d98a); width:100%; float:right; }
#goldBox { margin-left:auto; display:flex; align-items:center; gap:5px; font-size:18px; font-weight:700;
  color:#ffd97a; background:#00000066; padding:4px 13px; border-radius:999px; border:1px solid #d9a44144; }
#gemBox { margin-right:auto; display:flex; align-items:center; gap:5px; font-size:14px; font-weight:700;
  color:#aee6ff; background:#00000066; padding:4px 11px; border-radius:999px; border:1px solid #7fd8ff33; }
#pauseBtn { width:37px; height:37px; border-radius:10px; border:1px solid #ffffff33; background:#00000066;
  color:#f0e6d2; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

#toast { position:absolute; top:56px; left:50%; transform:translateX(-50%); z-index:5;
  background:#100c06ee; border:1px solid #d9a44166; border-radius:12px; padding:9px 18px;
  max-width:min(640px, 92vw); text-align:center; font-size:14.5px; line-height:1.7;
  box-shadow:0 8px 30px #000a; direction:rtl; }
html[dir="ltr"] #toast { direction:ltr; }
#toast b { color:#d9a441; margin-inline-end:8px; }

/* §۶.۹ — دکمه‌های یگان هم‌نوع‌اند: وقتی جا کم می‌آید **کوچک نمی‌شوند**، به ردیفِ
   دوم می‌روند. ردیفِ ناقص وسط‌چین است (justify-content:center) و max-width را
   layoutUnitBar() از روی عرضِ واقعی می‌گذارد تا ردیف‌ها متوازن شوند (۷ ⇒ ۴+۳). */
#hud-bottom { position:absolute; bottom:0; left:0; right:0; direction:ltr;
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center; align-items:flex-end;
  margin-inline:auto;
  padding:8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
  background:linear-gradient(0deg, rgba(10,8,4,.85), rgba(10,8,4,0)); }
.ubtn { position:relative; flex:0 0 auto; width:var(--ubtn-w, 68px); min-width:44px; border-radius:13px; border:1px solid #d9a44155;
  background:linear-gradient(180deg,#2a2010,#171106); color:#f0e6d2; cursor:pointer;
  padding:6px 3px 5px; display:flex; flex-direction:column; align-items:center; gap:1px; overflow:hidden; }
.ubtn:active { transform:scale(.94); }
.ubtn.selected{border-color:#ffe47b;background:linear-gradient(180deg,#5a4218,#241706);box-shadow:0 0 0 3px #ffe47b33,0 0 18px #f5c84d55;transform:translateY(-5px)}
.ubtn .uic { font-size:22px; line-height:1.2; display:flex; align-items:center; justify-content:center; }
.ubtn .nm { font-size:10px; color:#cbbb97; white-space:nowrap; }
.ubtn .co { font-size:11.5px; color:#ffd97a; font-weight:700; }
.ubtn.ability { border-color:#d3333388; }
.ubtn.gem { border-color:#7fd8ff66; }
.ubtn.gem .co { color:#aee6ff; }
.ubtn.poor .co { color:#e05b5b; }
.ubtn .cool { position:absolute; left:0; bottom:0; right:0; height:0; background:#000000aa; pointer-events:none; }
.deploy-tip{position:absolute;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;background:#fff7cf;color:#3b2a10;border:2px solid #e4b94d;border-radius:99px;padding:7px 13px;font-size:12px;font-weight:900;pointer-events:none;white-space:nowrap}
#squadPick{z-index:35;background:linear-gradient(145deg,#102f29ee,#21150dee);display:flex;align-items:center;justify-content:center;padding:18px}
#squadPick.hidden{display:none}.squad-panel{width:min(540px,96vw);max-height:90vh;overflow:auto;background:#f8edcf;color:#2b2113;border:3px solid #d6a83b;border-radius:24px;padding:18px;text-align:center;box-shadow:0 24px 70px #000b}.squad-panel h2{color:#805c12;margin:0 0 4px}.squad-panel p{font-size:13px;margin:0 0 12px}.squad-panel .btn{width:100%;margin-top:12px}
#squadCards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.squad-card{border:2px solid #d8c89e;border-radius:17px;background:#fffaf0;color:#2c2418;padding:10px;display:flex;align-items:center;gap:9px;text-align:start}.squad-card .uic{font-size:30px}.squad-card span{display:flex;flex-direction:column}.squad-card small{font-size:10px;opacity:.72}.squad-card.on{border-color:#179b7c;background:#e7fff5;box-shadow:0 0 0 3px #179b7c22}.squad-card.on::after{content:'✓';margin-inline-start:auto;color:#08785e;font-size:22px;font-weight:900}

#rotateHint { position:absolute; inset:0; display:none; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; background:#120d08f2; z-index:30;
  font-size:18px; color:#d9a441; text-align:center; padding:20px; }
.rot-icon { font-size:52px; display:flex; gap:10px; align-items:center; }
@media (orientation:portrait) { body.playing #rotateHint { display:flex; } }

/* ================= Camp & Store pages ================= */
#camp, #storeScr { overflow-y:auto; background:
  radial-gradient(ellipse at 50% -20%, #2c2210 0%, transparent 60%), #14100a; }
.page { max-width:640px; margin:0 auto; padding:max(14px, env(safe-area-inset-top)) 16px 30px; }
.pagehead { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pagehead h2 { flex:1; font-size:19px; color:#d9a441; }
.sub { color:#d9a441; font-size:16px; margin:22px 0 10px; }
#campList, #packList, #convList { display:flex; flex-direction:column; gap:10px; }
.card { display:flex; align-items:center; gap:13px; background:linear-gradient(180deg,#241c0e,#181208);
  border:1px solid #4a3a1c; border-radius:14px; padding:12px 14px; }
.card .cic { font-size:30px; width:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; color:#d9a441; }
.card .info { flex:1; min-width:0; }
.card .info h4 { font-size:15.5px; color:#f0e6d2; }
.card .info p { font-size:12px; color:#9e9077; line-height:1.6; margin-top:2px; }
.card .info .stats { font-size:11.5px; color:#cbbb97; margin-top:3px; }
.card .lvl { font-size:11px; color:#d9a441; }
.buy { flex-shrink:0; padding:10px 14px; border-radius:11px; border:none; font-size:14px; font-weight:700;
  background:linear-gradient(180deg,#d9a441,#a87724); color:#241b0c; cursor:pointer; min-width:86px; }
.buy.gem { background:linear-gradient(180deg,#57b8e6,#2b7fa8); color:#04202e; }
.buy.done { background:#2a3a2a; color:#8fd8a0; }
.buy:disabled { filter:grayscale(.6); opacity:.55; }
.buy:active { transform:scale(.95); }
.card.best { border-color:#d9a441; box-shadow:0 0 18px #d9a44133; }
.badge { position:absolute; font-size:10px; background:#d9a441; color:#241b0c; border-radius:999px;
  padding:2px 9px; font-weight:700; transform:translateY(-22px); }
.storenote { margin-top:18px; font-size:12px; color:#8f8268; text-align:center; line-height:1.8; }

/* ================= Overlay ================= */
#overlay { background:#000000b8; display:flex; align-items:center; justify-content:center; z-index:40; }
.panel { width:min(460px, 90vw); max-height:88vh; overflow-y:auto; background:linear-gradient(180deg,#241b0c,#171106);
  border:1px solid #d9a44166; border-radius:18px; padding:24px 22px; text-align:center;
  box-shadow:0 14px 60px #000c; }
.panel h2 { color:#d9a441; font-size:25px; margin-bottom:10px; }
.panel p { color:#cbbb97; font-size:14.5px; line-height:1.9; margin-bottom:18px; }
#ovRewards { display:flex; gap:10px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
#ovRewards .rw { background:#00000055; border:1px solid #d9a44144; border-radius:12px;
  padding:10px 18px; font-size:16px; color:#ffd97a; }
#ovRewards .rw.gem { color:#aee6ff; border-color:#7fd8ff44; }
.ovbtns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn { padding:12px 26px; border-radius:12px; border:1px solid #ffffff2e; background:#00000055;
  color:#f0e6d2; font-size:16px; cursor:pointer; }
.btn.gold { background:linear-gradient(180deg,#d9a441,#a87724); color:#241b0c; font-weight:700; border:none; }
/* §۸.۹.ح — «از نو» دکمه‌ی اصلی و بزرگ است، نه یک لینکِ کوچک کنارِ نقشه */
#ovMain { font-size:17px; padding:14px 30px; }
/* §۸.۹.ح — «↻ از نو» در اورلیِ باخت باید **بزرگ** باشد، نه هم‌قدِ دکمه‌ی کناری:
   تمامِ عرضِ پنل را می‌گیرد و اول در ستون می‌نشیند تا انگشت اولین‌بار روی آن بیفتد. */
.ovbtns:has(#ovMain.big) { flex-direction:column; align-items:stretch; }
#ovMain.big { font-size:20px; padding:18px 30px; width:100%; order:-1; }
#ovMain .ic { width:1em; height:1em; vertical-align:-.14em; margin-inline-end:5px; }
#ovMenu .ic { width:.95em; height:.95em; vertical-align:-.12em; margin-inline-end:4px; }
.parline { display:inline-block; margin-top:8px; font-size:13px; color:#9c8f74; line-height:1.8; }
.btn:active { transform:scale(.96); }

/* ===== آیکون‌های فونت‌اوسام (§۱۷.۸) — تنظیم اندازه در جاهای خاص ===== */
.lvlbtn .star .ic { width:.9em; height:.9em; margin-inline-start:1px; }
.buy .ic, .ubtn .co .ic, .wchip .ic, #goldBox .ic, #gemBox .ic { vertical-align:-.12em; }
.card .info h4 .ic { vertical-align:-.12em; }
#ovTitle .ic { width:.95em; height:.95em; }
.crest .ic, .crest svg { display:block; margin:0 auto; }

/* ================= خريطة الحملة / Campaign map ================= */
#map { overflow-y:auto; background:
  radial-gradient(ellipse at 50% -20%, #2c2210 0%, transparent 60%), #14100a; }
.bigplay { width:100%; max-width:420px; margin:2px auto 0; padding:15px 12px; border-radius:14px;
  font-size:19px; font-weight:700; border:1px solid #d9a441; cursor:pointer;
  background:linear-gradient(180deg,#d9a441,#a87724); color:#241b0c;
  display:flex; align-items:center; justify-content:center; gap:9px; }
.bigplay:active { transform:scale(.97); }
.bigplay .ic { width:1.1em; height:1.1em; }
.progline { font-size:13px; color:#cbbb97; }
.progline .ic { width:.95em; height:.95em; vertical-align:-.12em; color:#d9a441; }
.chsec { margin-bottom:18px; }
.chsec.dim { opacity:.55; }
.chhead { display:flex; align-items:center; gap:9px; margin:0 2px 8px;
  border-bottom:1px solid #4a3a1c; padding-bottom:6px; }
.chhead .chic { color:#d9a441; display:flex; }
.chhead .chic .ic { width:1.15em; height:1.15em; }
.chhead .chname { flex:1; font-size:14.5px; color:#e8d9b5; }
.chhead .chstars { font-size:12.5px; color:#d9a441; white-space:nowrap; }
.chhead .chstars .ic { width:.9em; height:.9em; vertical-align:-.1em; }
.nodes { display:grid; grid-template-columns:repeat(5, 1fr); gap:7px; }
.node { position:relative; aspect-ratio:1/1; min-height:56px; border-radius:13px; cursor:pointer;
  border:1px solid #6a5528; background:linear-gradient(180deg,#2a2010,#1c1609); color:#f0e6d2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.node:active { transform:scale(.94); }
.node .nnum { font-size:17px; font-weight:700; color:#ffd97a; }
.node .nst { display:flex; gap:1px; height:11px; }
.node .nst .ic { width:9px; height:9px; color:#d9a441; }
.node .nlock .ic { width:14px; height:14px; color:#8a8070; }
.node .ntag { position:absolute; top:3px; inset-inline-end:3px; }
.node .ntag .ic { width:12px; height:12px; color:#e0a33a; }
.node.locked { opacity:.45; filter:grayscale(.65); border-color:#3a3020; cursor:default; }
.node.cur { border-color:#ffd97a; box-shadow:0 0 14px #d9a44166; }

/* ================= دکمه‌های نوار نبرد ================= */
.hudbtn { width:40px; height:40px; min-width:40px; min-height:40px; flex:0 0 40px;
  border-radius:11px; border:1px solid #ffffff33; background:#00000077;
  color:#f0e6d2; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hudbtn:active { transform:scale(.93); }
.hudbtn .ic { width:19px; height:19px; }
#hud-top .backBtn { order:-1; }
html[dir="rtl"] #hud-top .backBtn { order:99; }
html[dir="rtl"] #pauseBtn { order:-1; }
#wellBox { display:flex; align-items:center; gap:5px; color:#7fd8ff; font-size:13px;
  background:#00000066; padding:4px 9px; border-radius:999px; border:1px solid #7fd8ff33; }
#wellBox .ic { width:14px; height:14px; }

/* ===== شمارشِ معکوسِ حصار (§۸.۹.د) — همیشه دیده می‌شود ===== */
#siegeBox { display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:700;
  color:#cbbb97; background:#00000066; padding:4px 10px; border-radius:999px;
  border:1px solid #ffffff26; direction:ltr; font-variant-numeric:tabular-nums; }
#siegeBox .ic { width:14px; height:14px; opacity:.55; }
#siegeBox.warn { color:#ffcf7a; border-color:#e0a33a88; }
#siegeBox.warn .ic { opacity:1; color:#e0a33a; }
#siegeBox.on { color:#ff9d9d; border-color:#e0555588; background:#33101099;
  animation:siegepulse 1s ease-in-out infinite; }
#siegeBox.on .ic { opacity:1; color:#ff6b6b; }
@keyframes siegepulse { 50% { box-shadow:0 0 0 5px #e0555522; } }
/* قلعه‌ی زیرِ آتش — نوار سبز نباید بی‌صدا کم شود */
.basebar.player.under .bblabel { color:#ff9d9d; }
.basebar.player.under .bar { border-color:#e0555588; }
.bar.mini { width:52px; height:7px; }
.wfill { background:linear-gradient(90deg,#2b7fa8,#7fd8ff); width:100%; }
.story-back { position:absolute; top:max(10px, env(safe-area-inset-top)); inset-inline-end:12px; z-index:3; }
.backBtn { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.backBtn .ic { width:18px; height:18px; }

/* ================= ضربدرِ اورلی (§۵.۷) ================= */
.panel { position:relative; }
.ovclose { position:absolute; top:6px; inset-inline-end:6px; width:44px; height:44px;
  border:none; background:transparent; color:#cbbb97; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.ovclose .ic { width:17px; height:17px; }
.ovclose:active { transform:scale(.9); }

/* ================= راهنمای فلش‌دار (§۷) ================= */
#tut { position:fixed; inset:0; z-index:60; pointer-events:none; }
#tutRing { position:absolute; border:2px solid #ffd97a; border-radius:14px;
  box-shadow:0 0 0 4000px rgba(0,0,0,.34), 0 0 20px rgba(255,217,122,.6);
  animation:tpulse 1.25s ease-in-out infinite; }
@keyframes tpulse { 50% { box-shadow:0 0 0 4000px rgba(0,0,0,.34), 0 0 34px rgba(255,217,122,.95); } }
#tutArrow { position:absolute; width:0; height:0; border-inline-start:9px solid transparent;
  border-inline-end:9px solid transparent; animation:tbob .9s ease-in-out infinite alternate; }
#tutArrow.up   { border-bottom:14px solid #ffd97a; }
#tutArrow.down { border-top:14px solid #ffd97a; }
@keyframes tbob { to { transform:translateY(5px); } }
#tutBox { position:absolute; background:#100c06f2; border:1px solid #d9a44188; border-radius:12px;
  padding:10px 12px; font-size:13.5px; line-height:1.6; color:#f0e6d2; text-align:center;
  box-shadow:0 10px 30px #000a; pointer-events:auto; }
#tutSkip { margin-top:7px; display:block; width:100%; padding:7px; border-radius:9px;
  border:1px solid #ffffff26; background:#00000055; color:#cbbb97; font-size:12px; cursor:pointer; }

@media (max-width:340px) { .nodes { gap:5px; } .node { min-height:48px; } .node .nnum { font-size:15px; } }

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