/* ==========================================================================
   هجوم بیگانگان — پوسته
   پالتِ پایه ثابت است؛ رنگِ تأکید (--acc) در هر قسمت عوض می‌شود (§۸.۹.ه).
   همه‌ی فاصله‌ها منطقی‌اند (inline-*) تا با تغییر زبان، جهت هم درست بچرخد.
   ========================================================================== */
@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{
  --bg:#0a0616; --bg2:#140b28; --ink:#f3ecff; --dim:#a89ec4;
  --acc:#f2b45c; --line:rgba(255,255,255,.12);
  --pad:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:Vazirmatn,system-ui,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); overflow:hidden;
  overscroll-behavior:none; touch-action:manipulation;
}

/* ---------------------------- اسپلش ---------------------------- */
#splash{position:fixed;inset:0;z-index:99;display:grid;place-content:center;gap:14px;
  justify-items:center;background:var(--bg);transition:opacity .35s}
#splash.gone{opacity:0;pointer-events:none}
.sp-logo{font-size:64px;animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.12);opacity:.75}}

/* ---------------------------- صفحه‌ها ---------------------------- */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.on{display:flex}

.menu-wrap{margin:auto;text-align:center;padding:24px 18px calc(24px + var(--pad));width:min(460px,92vw)}
.brand{font-size:clamp(30px,8vw,46px);font-weight:900;letter-spacing:-.5px;
  background:linear-gradient(180deg,#fff,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{color:var(--dim);margin:8px 0 26px;font-size:15px;line-height:1.7}
.menu-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu-btns .big,.menu-btns .hangar-btn{grid-column:1/-1}
.hangar-btn{display:flex;align-items:center;justify-content:center;gap:10px;border-color:color-mix(in srgb,var(--acc) 60%,transparent)!important;background:linear-gradient(120deg,rgba(255,255,255,.08),color-mix(in srgb,var(--acc) 18%,transparent))!important}
.hangar-btn b{color:var(--acc);font-size:13px}.btn-icon{font-size:20px;color:var(--acc)}

.btn{
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);
  font:inherit;font-weight:700;font-size:16px;padding:13px 18px;border-radius:14px;cursor:pointer;
  transition:transform .12s,background .18s;
}
.btn:active{transform:scale(.97)}
.btn.big{background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 70%,#000));
  color:#160c07;border-color:transparent;font-size:18px;padding:15px 18px}
.btn.ghost{background:transparent;color:var(--dim)}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--ink);
  font:inherit;font-weight:700;border-radius:12px;min-width:44px;height:44px;cursor:pointer}
.lang{position:absolute;inset-inline-end:14px;inset-block-start:calc(14px + var(--pad));z-index:5}

/* ---------------------------- نقشه ---------------------------- */
.bar{display:flex;align-items:center;gap:12px;padding:calc(12px + var(--pad)) 14px 12px;border-bottom:1px solid var(--line)}
.bar-mid h2{font-size:18px}
.bar-mid p{font-size:12px;color:var(--dim);margin-top:2px}
.map-list{flex:1;overflow-y:auto;display:grid;gap:10px;padding:14px;align-content:start}
.ep{display:flex;align-items:center;gap:12px;text-align:start;cursor:pointer;font:inherit;color:var(--ink);
  border:1px solid var(--line);border-radius:16px;padding:12px 14px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--e) 22%,transparent),rgba(255,255,255,.04))}
.ep.lock{opacity:.42;cursor:not-allowed;background:rgba(255,255,255,.03)}
.ep-n{font-size:24px;font-weight:900;color:var(--e);min-width:34px;text-align:center}
.ep-b{display:flex;flex-direction:column;gap:3px;flex:1}
.ep-b b{font-size:16px}
.ep-b i{font-style:normal;font-size:13px;color:var(--dim);letter-spacing:2px}
.ep-boss{font-size:11px;border:1px solid var(--e);color:var(--e);border-radius:999px;padding:3px 8px}
.map-foot{display:flex;justify-content:space-between;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);font-size:13px;color:var(--dim)}

/* ---------------------------- بازی ---------------------------- */
#stage{position:absolute;inset:0}
#cv{display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;inset-block-start:calc(8px + var(--pad));inset-inline:10px;pointer-events:none;
  display:grid;gap:6px;font-size:13px}
.hud-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hud-ep{background:rgba(10,6,22,.62);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:700}
#btn-pause{pointer-events:auto;height:38px;min-width:38px;border-radius:12px}
.hud-row{display:flex;align-items:center;gap:10px;background:rgba(10,6,22,.55);border-radius:12px;padding:5px 10px}
.hud-k{color:var(--dim);font-size:11px}
.hud-lives{color:#ff8fb1;letter-spacing:1px}
.hud-wave{margin-inline-start:auto;color:var(--dim);font-size:11px}
.city{display:flex;align-items:center;gap:8px;background:rgba(10,6,22,.55);border-radius:12px;padding:5px 10px}
.city-bar{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.city-bar i{display:block;height:100%;width:100%;background:var(--acc);transition:width .25s}

.special{position:absolute;inset-inline-end:16px;inset-block-end:calc(20px + env(safe-area-inset-bottom,0px));
  width:78px;height:78px;border-radius:50%;border:2px solid var(--acc);background:rgba(10,6,22,.6);
  color:var(--acc);font:inherit;font-weight:900;display:grid;place-content:center;gap:2px;cursor:pointer;z-index:4}
.special i{font-style:normal;font-size:11px;color:var(--dim);display:block}
.special.off{opacity:.32;border-color:var(--line)}
.special:active{transform:scale(.94)}

#banner{position:absolute;inset-inline:16px;inset-block-end:calc(112px + env(safe-area-inset-bottom,0px));
  background:rgba(10,6,22,.86);border:1px solid var(--acc);border-radius:14px;padding:11px 14px;
  font-size:14px;line-height:1.7;text-align:center;opacity:0;transform:translateY(8px);
  transition:opacity .25s,transform .25s;pointer-events:none}
#banner.show{opacity:1;transform:none}

/* ---------------------------- اورلی ---------------------------- */
.ov{position:fixed;inset:0;z-index:20;display:none;place-content:center;padding:18px;
  background:rgba(5,3,12,.78);backdrop-filter:blur(6px)}
.ov.show{display:grid}
.card{width:min(430px,94vw);max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,var(--bg2),var(--bg));
  border:1px solid var(--line);border-radius:22px;padding:22px 20px;text-align:center;display:grid;gap:12px}
.card h3{font-size:21px}
.card h4{text-align:start;color:var(--dim);font-size:13px;margin-top:2px}
.dim{color:var(--dim);font-size:14px;line-height:1.8}
.hint{color:var(--dim);font-size:12px}
.stars{font-size:34px;color:var(--acc);letter-spacing:6px}
.rows{display:grid;gap:8px;text-align:start}
.rows.tall{max-height:46vh;overflow-y:auto}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px;font-size:14px}
.row span{color:var(--dim)}
.rows p{background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.9;text-align:start}
.acts{display:grid;gap:8px}
.acts.col{grid-auto-flow:row}
.tg{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--dim);
  font:inherit;font-weight:700;border-radius:10px;padding:7px 14px;min-width:64px;cursor:pointer}
.tg.yes{color:#0d0720;background:var(--acc);border-color:transparent}
.tg.warn{color:#ff7b7b;min-width:44px}
#set-name{background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink);
  font:inherit;border-radius:10px;padding:8px 10px;width:52%}

/* ---------------------------- آشیانه ---------------------------- */
.hangar-card{gap:10px;background:radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 36%),linear-gradient(180deg,#19102f,#090512)}
.hangar-head{display:flex;align-items:center;justify-content:space-between;text-align:start;gap:12px}
.eyebrow{display:block;color:var(--acc);font-size:11px;margin-bottom:2px}
.credit-pill{white-space:nowrap;border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);background:rgba(0,0,0,.3);border-radius:999px;padding:7px 11px;color:var(--acc)}
#ship-preview{width:100%;height:138px;border-radius:18px;border:1px solid var(--line);background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.10),transparent 38%),linear-gradient(#120b27,#06040e)}
.ship-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.ship-choice{position:relative;min-height:76px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.045);color:var(--ink);font:inherit;padding:8px 3px;cursor:pointer;display:grid;place-items:center;gap:4px}
.ship-choice i{font-style:normal;font-size:26px;color:var(--ship)}.ship-choice span{font-size:10px}.ship-choice b{font-size:10px;color:var(--acc)}
.ship-choice.active{border-color:var(--acc);box-shadow:0 0 20px color-mix(in srgb,var(--acc) 28%,transparent);background:color-mix(in srgb,var(--acc) 13%,transparent)}
.upgrade-list{display:grid;gap:7px}.upgrade{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;text-align:start;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:9px}
.upgrade-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);font-size:20px}
.upgrade-info b{display:block;font-size:13px}.upgrade-info small{display:block;color:var(--dim);font-size:10px}.pips{display:flex;gap:3px;margin-top:5px}.pips i{width:15px;height:4px;border-radius:5px;background:rgba(255,255,255,.12)}.pips i.on{background:var(--acc)}
.upgrade-buy{font:inherit;font-size:11px;font-weight:700;color:#160c07;background:var(--acc);border:0;border-radius:10px;padding:8px;min-width:64px}.upgrade-buy:disabled{opacity:.35}

/* ---------------------------- داستان ---------------------------- */
.story .card{text-align:start;border-color:var(--acc)}
.story .step{color:var(--acc);font-size:12px;letter-spacing:2px}
.story h3{font-size:19px;color:var(--acc)}
.story-body{font-size:16px;line-height:2.1}
.story-body.fade{animation:sfade .5s ease}
@keyframes sfade{from{opacity:0;transform:translateY(6px)}}

#toast{position:fixed;inset-inline:20px;inset-block-end:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;
  background:#1c1233;border:1px solid var(--acc);border-radius:14px;padding:12px 14px;font-size:13.5px;
  line-height:1.8;text-align:center;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}
#toast.show{opacity:1;transform:none}

/* ------------------------- صفحه‌های کوچک ------------------------- */
@media (max-width:340px){
  .btn{font-size:15px;padding:11px 14px}
  .special{width:66px;height:66px}
  #hud{font-size:12px}
}
@media (max-height:720px){.menu-wrap{padding-top:60px}.tag{margin-bottom:12px}.menu-btns{gap:7px}.btn{padding:10px 12px}.brand{font-size:30px}}
@media (min-height:900px){ .menu-wrap{width:min(520px,90vw)} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }