/*
 * لایهٔ تکمیلی رابط بازی «عصر خاکستر»
 * فقط ظاهر و خوانایی را تغییر می‌دهد؛ هیچ handler، API، اقتصاد یا قاعدهٔ بازی را دست‌کاری نمی‌کند.
 */
:root {
  --game-ink: #edf3f5;
  --game-muted: #9fb1bc;
  --game-gold: #e5bd67;
  --game-cyan: #6cc4d1;
  --game-red: #e47b72;
  --game-line: rgba(176, 201, 215, .18);
  --game-panel: #101b26;
}

/* پوستهٔ یکپارچه و خوش‌خوان در موبایل و دسکتاپ */
.app-shell {
  max-width: 760px !important;
  padding-inline: clamp(12px, 4vw, 24px) !important;
  padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important;
  color: var(--game-ink);
}
.topbar {
  min-height: 68px !important;
  gap: 12px !important;
  border-bottom-color: var(--game-line) !important;
}
.brand__mark {
  flex: 0 0 40px;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(247, 218, 164, .7);
  box-shadow: 0 0 20px rgba(229, 189, 103, .16), inset 0 1px rgba(255,255,255,.35) !important;
}
.topbar__actions .icon-button {
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px !important;
}

/* HUD منابع: چهار خانهٔ هم‌وزن، خوانا و همیشه قابل‌اسکن */
#gs-hud {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 10px 0 14px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid rgba(229, 189, 103, .25);
  border-radius: 12px;
  background: rgba(8, 15, 23, .94);
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04);
}
.gs-chip {
  min-height: 52px;
  justify-content: center;
  padding: 8px 9px;
  background: linear-gradient(155deg, rgba(28, 43, 56, .96), rgba(13, 23, 33, .98));
}
.gs-chip__k { color: #aebdc6 !important; font-size: 9px !important; }
.gs-chip__v { color: #f1f5f3 !important; font-size: 12px !important; font-variant-numeric: tabular-nums; }
.gs-chip--gold .gs-chip__v { color: #f0cb7a !important; }
.gs-chip--cyan .gs-chip__v { color: #8bd8e2 !important; }
.gs-chip--green .gs-chip__v { color: #9cdaa9 !important; }
.gs-chip--red .gs-chip__v { color: #f09a8c !important; }
.gs-chip__bar { margin-top: 3px; }

/* کارت فرماندهی با تصویر اختصاصیِ سبک‌شده */
.command-hero {
  min-height: clamp(270px, 42vw, 350px) !important;
  padding: clamp(18px, 4vw, 26px) !important;
  border: 1px solid rgba(229, 189, 103, .38) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08) !important;
}
.command-hero::before {
  background:
    linear-gradient(90deg, rgba(5, 11, 18, .06) 15%, rgba(5, 11, 18, .25) 58%, rgba(5, 11, 18, .52)),
    linear-gradient(0deg, rgba(5, 11, 18, .98) 0%, rgba(5, 11, 18, .68) 34%, rgba(5, 11, 18, .04) 82%),
    url('/assets/img/age_of_ashes_command.webp') 55% 45% / cover no-repeat !important;
}
.command-hero::after { inset: 9px !important; border-color: rgba(229, 189, 103, .28) !important; }
.command-hero__content { max-width: 560px; }
.command-hero .eyebrow {
  border-color: rgba(229, 189, 103, .44) !important;
  background: rgba(7, 15, 23, .76) !important;
  letter-spacing: .04em !important;
}
.command-hero h1,
.command-hero h2 {
  max-width: 20ch;
  font-size: clamp(23px, 5.5vw, 34px) !important;
  line-height: 1.45 !important;
  text-wrap: balance;
}
.command-hero p { max-width: 54ch; font-size: 12px !important; line-height: 1.9 !important; }
.hero-meta { gap: 7px !important; }
.security-pill { border-radius: 999px !important; }

/* خلاصهٔ کشور و نوارهای آمادگی */
.stats-grid { gap: 8px !important; margin: 14px 0 !important; }
.stat {
  min-height: 76px;
  padding: 11px !important;
  border-color: rgba(176, 201, 215, .17) !important;
  border-radius: 10px !important;
  background: linear-gradient(150deg, rgba(29, 44, 57, .98), rgba(14, 24, 34, .98)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.16) !important;
}
.stat span { color: #aebdc6 !important; }
.stat strong { font-variant-numeric: tabular-nums; }
.vitals-card {
  gap: 14px !important;
  padding: 14px !important;
  border-color: var(--game-line) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(20, 33, 45, .98), rgba(11, 19, 28, .98)) !important;
}
.vital i { height: 6px !important; border-radius: 999px !important; }
.vital em { border-radius: 999px !important; }

/* ورودی‌های اصلی بازی به شکل کارت‌های مأموریت */
.section-title {
  margin: 24px 2px 12px !important;
  gap: 10px !important;
  font-size: 15px !important;
  font-weight: 800;
}
.section-title::before {
  content: '';
  flex: 0 0 3px;
  align-self: stretch;
  min-height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--game-gold), rgba(229,189,103,.18));
}
.action-grid { gap: 11px !important; }
.action-grid .action-card {
  min-height: 174px !important;
  border-radius: 12px !important;
  border-color: rgba(176, 201, 215, .26) !important;
  box-shadow: 0 5px 0 rgba(3, 8, 13, .9), inset 0 1px rgba(255,255,255,.12) !important;
}
.action-grid .action-card::after {
  background: linear-gradient(0deg, rgba(5, 12, 19, .98) 0%, rgba(5, 12, 19, .82) 30%, rgba(5, 12, 19, .12) 88%) !important;
}
.action-grid .action-card b,
.action-grid .gmc-body b { font-size: 15px !important; font-weight: 800 !important; }
.action-grid .action-card small,
.action-grid .gmc-body small { max-width: 30ch; line-height: 1.8 !important; }
.action-grid .action-card:focus-visible { outline-offset: 3px !important; }

/* نوار عملیات ثابت با رعایت فضای امن گوشی */
.bottom-nav {
  padding: 8px 10px max(9px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(229, 189, 103, .26) !important;
  background: rgba(7, 14, 22, .96) !important;
  box-shadow: 0 -12px 30px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(16px);
}
.bottom-nav button {
  min-height: 48px !important;
  gap: 5px !important;
  border-radius: 10px !important;
  font-weight: 700;
}
.bottom-nav button.active {
  color: #f0cc7d !important;
  background: linear-gradient(180deg, rgba(229,189,103,.1), rgba(229,189,103,.025)) !important;
  box-shadow: inset 0 2px rgba(229,189,103,.72) !important;
}

/* لایه‌های جزئیات و پنجره‌های بازی، هماهنگ با مرکز فرماندهی */
.gs-banner { border-radius: 12px !important; border-color: var(--game-line) !important; }
.primary-button { min-height: 44px; font-weight: 800; }
.outline-button,
.danger-button { min-height: 42px; font-weight: 700; }

@media (min-width: 600px) {
  .action-grid { gap: 13px !important; }
  .action-grid .action-card { min-height: 190px !important; }
  .command-hero { background-position: center; }
}
@media (max-width: 390px) {
  .topbar { min-height: 62px !important; }
  #gs-hud { margin: 8px 0 12px; }
  .gs-chip { min-height: 48px; padding: 7px 6px; }
  .gs-chip__k { font-size: 8px !important; }
  .gs-chip__v { font-size: 11px !important; }
  .command-hero { min-height: 255px !important; }
  .action-grid { gap: 9px !important; }
  .action-grid .action-card { min-height: 160px !important; padding: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .action-grid .action-card,
  .bottom-nav button,
  .gs-chip__bar i { transition: none !important; }
}