/* ================================================================
   «لشکرکشی» — پوستهٔ کامل. تیره، ایرانی: لاجوردی/فیروزه‌ای/آجری/طلایی
   • دو جهت (rtl/ltr) با ویژگی‌های منطقی
   • safe-area آیفون · بدون اسکرول در صفحهٔ بازی
   • رنگِ تأکیدِ هر قسمت با متغیرِ --ep روی <html> عوض می‌شود (§۸.۹.ه)
   ================================================================ */

@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}
@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-Black.woff2)   format('woff2');font-weight:900;font-display:swap}

:root{
  --ink:#14192B; --ink2:#1B2136; --ink3:#232A44;
  --line:#333B58; --txt:#FFF6E5; --dim:#A9B0C9;
  --blue:#2EA69A; --blueHi:#6FE0D2; --brick:#B4643A; --brickHi:#D98A55;
  --gold:#E3A722; --red:#D24A5C; --violet:#8A5BC7;
  --ep:#2EA69A;                        /* رنگِ تأکیدِ قسمتِ جاری */
  --r:16px; --pad:16px;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:Vazirmatn,Tahoma,system-ui,sans-serif;
  background:radial-gradient(120% 90% at 50% 0%,#222A4A 0%,var(--ink) 62%,#0D111F 100%);
  color:var(--txt); overflow:hidden; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
}

/* ---------------- صفحه‌ها ---------------- */
.screen{
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
  padding:calc(var(--sat) + 10px) calc(var(--sar) + 12px) calc(var(--sab) + 10px) calc(var(--sal) + 12px);
}
.hidden{display:none !important}

#splash{gap:14px; text-align:center; transition:opacity .45s ease}
#splash.out{opacity:0}
#splash h1{margin:0;font-size:30px;font-weight:900;letter-spacing:.5px}
#splash p{margin:0;color:var(--dim);font-size:14px}
.sp-logo{filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}

.panel{width:100%;max-width:520px;max-height:100%;overflow-y:auto;overflow-x:hidden;
       display:flex;flex-direction:column;gap:12px;padding-block:6px}
.panel::-webkit-scrollbar{width:6px}
.panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.brand{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.battle-preview{width:100%;height:155px;border-radius:20px;position:relative;overflow:hidden;margin-bottom:8px;border:1px solid rgba(227,167,34,.38);background:linear-gradient(180deg,transparent,#11172bd9),var(--art-bg),linear-gradient(135deg,#344978,#202944);background-size:cover;background-position:center;box-shadow:0 16px 34px #0008}.battle-preview .fort{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:48px;filter:drop-shadow(0 7px 5px #0008)}.battle-preview .army{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:7px}.battle-preview .army i{width:15px;height:15px;border-radius:50%;background:var(--blueHi);box-shadow:0 5px 0 var(--blueDark);animation:march 1.2s ease-in-out infinite alternate}.battle-preview .army i:nth-child(2n){animation-delay:-.5s}.battle-preview .gate{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);padding:3px 16px;border-radius:8px;background:var(--gold);color:#181a28;font-weight:900;font-size:19px;box-shadow:0 0 18px #e3a72288}@keyframes march{to{transform:translateY(-8px) scale(1.08)}}
.brand h2{margin:4px 0 0;font-size:27px;font-weight:900}
.brand .tag{margin:0;color:var(--dim);font-size:13px;line-height:1.7}

.card{
  background:linear-gradient(180deg,rgba(35,42,68,.94),rgba(27,33,54,.94));
  border:1px solid var(--line); border-radius:var(--r);
  padding:var(--pad); box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.menu-list{display:flex;flex-direction:column;gap:9px}

h2.pg{margin:0;font-size:20px;font-weight:900;text-align:center}
.back-row{position:absolute;inset-block-start:calc(var(--sat) + 10px);inset-inline-start:calc(var(--sal) + 12px);z-index:3}

/* ---------------- دکمه‌ها ---------------- */
button{font-family:inherit;font-size:15px;font-weight:700;color:var(--txt);
       border:0;border-radius:12px;padding:13px 16px;cursor:pointer;
       transition:transform .08s ease,filter .12s ease;touch-action:manipulation}
button:active{transform:scale(.965);filter:brightness(1.12)}
.primary{background:linear-gradient(180deg,var(--ep),color-mix(in srgb,var(--ep) 62%,#000));
         box-shadow:0 5px 0 color-mix(in srgb,var(--ep) 45%,#000),0 10px 20px rgba(0,0,0,.34);font-weight:900}
.primary:active{box-shadow:0 2px 0 color-mix(in srgb,var(--ep) 45%,#000)}
.ghost{background:rgba(255,255,255,.06);border:1px solid var(--line)}
.icon-btn{background:rgba(255,255,255,.08);border:1px solid var(--line);
          width:42px;height:42px;padding:0;border-radius:12px;font-size:17px;line-height:1}

/* ---------------- نقشهٔ قسمت‌ها ---------------- */
.ch-head{text-align:center;margin-bottom:2px}
.ch-head .ch-name{font-size:17px;font-weight:900;color:var(--gold)}
.ch-head .ch-sub{font-size:12px;color:var(--dim);margin-top:3px;line-height:1.7}
.lv-grid{display:flex;flex-direction:column;gap:9px}
.lv{
  display:flex;align-items:center;gap:11px;width:100%;text-align:start;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:13px;
  padding:11px 12px;position:relative;overflow:hidden;
}
.lv::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--c,var(--blue))}
.lv .n{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;
       font-weight:900;font-size:15px;background:var(--c,var(--blue));color:#0E1220}
.lv .meta{flex:1;min-width:0}
.lv .ttl{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv .sub{font-size:11px;color:var(--dim);margin-top:2px}
.lv .st{font-size:13px;letter-spacing:1px;color:var(--gold);white-space:nowrap}
.lv.locked{opacity:.42}
.lv.boss .n{background:var(--red);color:#fff}
.lv .tag-boss{font-size:10px;font-weight:900;background:var(--red);color:#fff;
              border-radius:6px;padding:1px 5px;margin-inline-start:6px;vertical-align:middle}

/* ---------------- تنظیمات ---------------- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
         padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.set-row:last-child{border-bottom:0}
.lbl{font-size:14px}
.seg{display:flex;background:rgba(0,0,0,.28);border-radius:10px;padding:3px;gap:3px}
.seg button{padding:7px 11px;font-size:12.5px;border-radius:8px;background:transparent;color:var(--dim)}
.seg button.on{background:var(--ep);color:#0E1220;font-weight:900}
.note{font-size:11.5px;color:var(--dim);margin:8px 0 0;line-height:1.8}
input{font-family:inherit;font-size:14px;color:var(--txt);background:rgba(0,0,0,.3);
      border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:150px;text-align:center}

/* ---------------- راهنما و درباره ---------------- */
.rules-list{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:9px}
.rules-list li{font-size:13px;line-height:1.95;color:#E7E2D4}
.g-mul{color:var(--blueHi);font-weight:900}
.g-plus{color:var(--gold);font-weight:900}
.g-div{color:#C6A6F0;font-weight:900}
.g-trap{color:#FF8A93;font-weight:900}
.about-text{font-size:13px;line-height:2;margin:0 0 10px;color:#E7E2D4}
.about-rows{display:flex;flex-direction:column;gap:7px}
.about-rows .r{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.about-rows .k{color:var(--dim)}

/* ---------------- لیدربورد ---------------- */
.lb-list{display:flex;flex-direction:column;gap:7px}
.lb-row{display:flex;align-items:center;gap:10px;font-size:13px;
        background:rgba(255,255,255,.04);border-radius:10px;padding:9px 11px}
.lb-row .rk{flex:0 0 24px;font-weight:900;color:var(--gold);text-align:center}
.lb-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .sc{font-weight:900}
.lb-row .dt{font-size:10.5px;color:var(--dim);flex:0 0 auto}
.lb-empty{font-size:13px;color:var(--dim);text-align:center;padding:16px 0;line-height:1.9}

/* ---------------- صفحهٔ بازی ---------------- */
#game{padding:0}
.g-wrap{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.top{display:flex;align-items:center;gap:9px;
     padding:calc(var(--sat) + 8px) calc(var(--sar) + 10px) 8px calc(var(--sal) + 10px)}
.hud{flex:1;display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.hud-item{font-size:11.5px;color:var(--dim);white-space:nowrap}
.hud-item b{font-size:13.5px;color:var(--txt);font-weight:900}
#hudLevel{color:var(--ep)}
.timer{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
.timer.warn{color:#FF8A93;animation:pulse .8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}

#stage{flex:1;min-height:0;position:relative;touch-action:none;overflow:hidden}
#cv{display:block;width:100%;height:100%}

.bars{display:flex;gap:8px;padding:8px calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px)}
.bar{flex:1;position:relative;height:22px;border-radius:11px;overflow:hidden;
     background:rgba(0,0,0,.42);border:1px solid var(--line)}
.bar i{position:absolute;inset-block:0;inset-inline-start:0;width:0;display:block;transition:width .1s linear}
#powerFill{background:linear-gradient(90deg,var(--blue),var(--blueHi))}
#cityFill{background:linear-gradient(90deg,var(--brick),var(--gold))}
.bar-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;
         font-size:11px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.7)}

/* راهنمای درون‌بازی */
.tut{position:absolute;inset-inline:12px;inset-block-end:12px;pointer-events:none;z-index:4;
     background:rgba(10,14,26,.9);border:1px solid var(--ep);border-radius:12px;
     padding:10px 13px;font-size:13px;line-height:1.85;text-align:center;
     box-shadow:0 8px 20px rgba(0,0,0,.45)}
.tut b{color:var(--blueHi)}

/* ---------------- اورلی‌ها ---------------- */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
         background:rgba(8,11,20,.76);backdrop-filter:blur(3px);
         padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px)}
.overlay .card{width:100%;max-width:400px;max-height:100%;overflow-y:auto;text-align:center;animation:pop .22s ease-out}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.overlay h3{margin:0 0 10px;font-size:21px;font-weight:900}
.ov-actions{display:flex;flex-direction:column;gap:9px;margin-top:13px}
.big-stars{font-size:32px;letter-spacing:5px;color:var(--gold);margin:4px 0 8px;min-height:38px}
.big-stars .off{color:rgba(255,255,255,.16)}
.score-line{margin:0;font-size:19px;font-weight:900;color:var(--gold)}
.sub{margin:8px 0 0;font-size:13px;line-height:1.9;color:#E2DDCE}
/* یادداشتِ قاعده‌ی سقفِ ستاره در اورلیِ برد/باخت (§۸.۹.ج.۲) */
.note{margin:9px 0 0;padding:7px 10px;font-size:13px;line-height:1.8;
      color:var(--gold);background:rgba(227,167,34,.10);
      border-inline-start:3px solid var(--gold);border-radius:8px}
.stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:11px;
       font-size:12px;color:var(--dim)}
.stats b{display:block;font-size:15px;color:var(--txt);font-weight:900}

/* ---------------- اورلیِ سناریو (§۸.۷.۱) ---------------- */
#ov-story .card{max-width:430px;text-align:start}
.st-kicker{font-size:11.5px;font-weight:900;letter-spacing:1px;color:var(--gold);text-transform:uppercase}
.st-title{margin:6px 0 0;font-size:22px;font-weight:900;color:var(--txt)}
.st-rule{height:2px;width:46px;background:var(--ep);border-radius:2px;margin:11px 0}
.st-text{margin:0;font-size:15px;line-height:2.15;color:#EFE9DA}
.st-new{margin:12px 0 0;font-size:12.5px;line-height:1.9;color:var(--gold);
        background:rgba(227,167,34,.10);border:1px solid rgba(227,167,34,.32);
        border-radius:10px;padding:9px 11px}
.st-actions{display:flex;gap:9px;margin-top:15px}
.st-actions button{flex:1}
.st-dots{display:flex;gap:5px;justify-content:center;margin-top:13px}
.st-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.st-dots i.on{background:var(--ep);width:16px;border-radius:3px}

/* ---------------- ریسپانسیو ---------------- */
@media (max-height:560px){
  .brand h2{font-size:22px} .brand .tag{display:none}
  button{padding:10px 14px;font-size:14px}
  .card{padding:12px} .st-text{font-size:14px;line-height:1.95}
}
@media (min-width:820px){
  .panel{max-width:560px}
  .rules-list li{font-size:14px}
}
@media (max-width:340px){
  .hud-item{font-size:10.5px} .timer{font-size:15px;min-width:44px}
  .lv .ttl{font-size:13px}
}