/* ============================================================
   game_graphics.css — ارتقای گرافیکی بازی جنگ جهانی
   تبدیل رابط دکمه‌ای/ساده به یک تجربهٔ بصری غنی و گرافیکی:
   پشت‌زمینهٔ اتمسفری متحرک، کارت‌های شیشه‌ای با عمق،
   دکمه‌های نورانی، خطوط هاله، بافت نقشه و حرکت محیطی.
   فقط ظاهر؛ منطق بازی دست‌نخورده می‌ماند.
   ============================================================ */

:root {
  --gg-gold: #f1c15f;
  --gg-gold-deep: #c99135;
  --gg-turq: #55c6d1;
  --gg-turq-deep: #2a8a96;
  --gg-glow-gold: 0 0 22px #f1c15f55;
  --gg-glow-turq: 0 0 22px #55c6d155;
}

/* ===== اتمسفر پشت‌زمینهٔ بازی ===== */
body {
  background:
    radial-gradient(circle at 12% -8%, #1a485c66, transparent 32rem),
    radial-gradient(circle at 92% 4%, #5d3b1522, transparent 30rem),
    radial-gradient(circle at 50% 120%, #2a8a9622, transparent 34rem),
    linear-gradient(160deg, #060a10 0%, #0a1220 46%, #060a10 100%) !important;
  background-attachment: fixed !important;
}
@media (max-width: 768px) {
  body { background-attachment: scroll !important; }
}
body::before {
  background-image:
    linear-gradient(#55c6d10a 1px, transparent 1px),
    linear-gradient(90deg, #55c6d10a 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  opacity: .22 !important;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%) !important;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 0% 0%, #f1c15f14, transparent 22rem),
    radial-gradient(circle at 100% 100%, #55c6d114, transparent 22rem);
  animation: ggDrift 18s ease-in-out infinite alternate;
}
@keyframes ggDrift {
  0%   { transform: translate3d(-2%, -1%, 0); opacity: .55; }
  100% { transform: translate3d(2%, 2%, 0); opacity: 1; }
}

/* ===== پوستهٔ اصلی ===== */
.app-shell {
  background:
    linear-gradient(180deg, #0d1723f2, #09111bf2),
    radial-gradient(circle at 50% -10%, #1e536533, transparent 26rem) !important;
  border-inline: 1px solid #55c6d12e !important;
  box-shadow: 0 0 0 1px #00000040, 0 30px 80px #00000080 !important;
  position: relative;
}
.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #55c6d108, transparent 6rem);
  border-radius: inherit;
}

/* ===== نوار بالا ===== */
.topbar {
  background: linear-gradient(180deg, #0c1622e8, #08111ae0) !important;
  border-bottom: 1px solid #f1c15f33 !important;
  box-shadow: 0 6px 20px #00000055, inset 0 -1px #55c6d118 !important;
  backdrop-filter: blur(18px) !important;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gg-gold), transparent);
  opacity: .6;
}

/* ===== نوار پایین ===== */
.bottom-nav {
  background: linear-gradient(180deg, #07111de6, #050a13f2) !important;
  border-top: 1px solid #f1c15f2e !important;
  box-shadow: 0 -10px 40px #00000060, inset 0 1px #55c6d114 !important;
}
.bottom-nav button {
  transition: transform .14s, color .14s !important;
  position: relative;
}
.bottom-nav button.active {
  color: var(--gg-gold) !important;
}
.bottom-nav button.active::after {
  content: "";
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gg-gold-deep), var(--gg-gold));
  box-shadow: var(--gg-glow-gold);
}
.bottom-nav button:active { transform: scale(.92); }

/* ===== کارت‌ها — عمق و شیشه ===== */
.action-card,
.vitals-card,
.production-card,
.product-card,
.fleet-card,
.operation-card,
.alliance-card,
.ops-card,
.land-status,
.nuclear-status,
.economy-hero,
.command-hero,
.alliance-hero {
  position: relative !important;
  border: 1px solid #2c4658 !important;
  background: linear-gradient(160deg, #122133, #0c1825) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px #ffffff10,
    inset 0 0 0 1px #55c6d10a,
    0 10px 26px #00000055 !important;
  overflow: hidden;
  transition: transform .16s, box-shadow .16s, border-color .16s !important;
}
.action-card::before,
.vitals-card::before,
.production-card::before,
.operation-card::before,
.fleet-card::before,
.economy-hero::before,
.command-hero::before,
.alliance-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 100% 0%, #f1c15f10, transparent 55%);
}
.action-card:hover,
.production-card:hover,
.operation-card:hover,
.fleet-card:hover,
.product-card:hover {
  transform: translateY(-2px);
  border-color: #55c6d166 !important;
  box-shadow:
    inset 0 1px #ffffff14,
    0 14px 34px #00000066,
    0 0 0 1px #55c6d122 !important;
}
.operation-card--gold  { border-color: #f1c15f55 !important; box-shadow: inset 0 1px #ffffff10, 0 10px 26px #00000055, 0 0 18px #f1c15f18 !important; }
.operation-card--blue  { border-color: #55c6d155 !important; box-shadow: inset 0 1px #ffffff10, 0 10px 26px #00000055, 0 0 18px #55c6d118 !important; }
.operation-card--red   { border-color: #ef777055 !important; box-shadow: inset 0 1px #ffffff10, 0 10px 26px #00000055, 0 0 18px #ef777018 !important; }
.operation-card--violet{ border-color: #a774ff55 !important; box-shadow: inset 0 1px #ffffff10, 0 10px 26px #00000055, 0 0 18px #a774ff18 !important; }
.operation-card--black { border-color: #6b778555 !important; }

.economy-hero,
.command-hero,
.alliance-hero {
  background: linear-gradient(135deg, #1a2d40, #0e1a28 70%, #0b1622) !important;
  border: 1px solid #f1c15f33 !important;
  box-shadow: inset 0 1px #ffffff14, 0 16px 40px #00000077, 0 0 30px #f1c15f0e !important;
}

/* ===== دکمه‌ها — نورانی و با عمق ===== */
.primary-button,
.alliance-action-line .primary-button,
.action-card .primary-button {
  background: linear-gradient(135deg, #f5d488, #c99135) !important;
  color: #132127 !important;
  border: 1px solid #e0ad42 !important;
  box-shadow: 0 8px 22px #d3a64044, inset 0 1px #ffffff66 !important;
  text-shadow: 0 1px 0 #ffffff33 !important;
  transition: transform .12s, box-shadow .16s, filter .16s !important;
}
.primary-button:hover { filter: brightness(1.08); box-shadow: 0 10px 28px #d3a64055, inset 0 1px #ffffff66, 0 0 18px #f1c15f44 !important; }
.primary-button:active { transform: translateY(1px) scale(.98); }

.outline-button,
.text-button,
.icon-button,
.alliance-directory-row button {
  background: linear-gradient(160deg, #163142, #112736) !important;
  color: #cde1e9 !important;
  border: 1px solid #2c4658 !important;
  box-shadow: inset 0 1px #ffffff10 !important;
  transition: transform .12s, border-color .14s !important;
}
.outline-button:hover,
.icon-button:hover { border-color: #55c6d177 !important; box-shadow: inset 0 1px #ffffff14, 0 0 16px #55c6d122 !important; }
.outline-button:active,
.icon-button:active { transform: scale(.97); }

.danger-button {
  background: linear-gradient(135deg, #f08a84, #c0392f) !important;
  border: 1px solid #d8453c !important;
  box-shadow: 0 8px 22px #c0392f33, inset 0 1px #ffffff33 !important;
}

/* ===== نقشهٔ جهان — بافت راهبردی ===== */
.world-map,
.map-container,
.map,
[class*="world"] {
  background:
    radial-gradient(circle at 30% 40%, #1a485c22, transparent 40%),
    radial-gradient(circle at 70% 60%, #5d3b1522, transparent 40%),
    linear-gradient(160deg, #0a1422, #060a10) !important;
  border: 1px solid #2c4658 !important;
  box-shadow: inset 0 0 40px #00000088, 0 0 24px #55c6d10e !important;
}

/* ===== وضعیت خالی ===== */
.empty-state {
  border: 1px dashed #2c4658 !important;
  background: linear-gradient(160deg, #0e1a26, #091420) !important;
  border-radius: 14px !important;
  color: #6b8290 !important;
}

/* ===== اسکرول‌بار ===== */
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2c4658, #1a3242); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #3a5d70; }
*::-webkit-scrollbar-track { background: transparent; }

/* ===== انیمیشن ورود کارت‌ها ===== */
.action-card,
.vitals-card,
.production-card,
.operation-card,
.fleet-card {
  animation: ggCardIn .34s cubic-bezier(.23,1,.32,1) both;
}
@keyframes ggCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== پالس طلایی برای موارد مهم ===== */
.operation-card--gold,
.alliance-hero {
  animation: ggPulse 3.2s ease-in-out infinite;
}
@keyframes ggPulse {
  0%,100% { box-shadow: inset 0 1px #ffffff14, 0 16px 40px #00000077, 0 0 20px #f1c15f0e; }
  50%     { box-shadow: inset 0 1px #ffffff14, 0 16px 40px #00000077, 0 0 34px #f1c15f22; }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .operation-card--gold,
  .alliance-hero {
    animation: none !important;
  }
}

/* لایهٔ نقاط نورانی متحرک (بوم) */
#gg-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
}

/* کارت‌های فرماندهی: تصویر اختصاصی هر بخش، بدون حذف خوانایی متن */
.action-card { isolation: isolate; }
.action-card > .jw-card-art {
  position: absolute; inset: 0 0 auto; width: auto; height: 92px; margin: 0; border-radius: 0; box-shadow: none; z-index: 0;
  display: block; pointer-events: none;
  background-image: linear-gradient(180deg, rgba(6,12,18,.08), rgba(9,17,27,.96)), var(--jw-art);
  background-size: cover; background-position: center;
  opacity: .9; filter: saturate(.9) contrast(1.04);
  transition: opacity .2s ease, transform .35s ease;
}
.action-card > *:not(.jw-card-art):not(.gs-card__art):not(.gs-card__veil):not(.gs-card__medal) { position: relative; z-index: 2; }
.action-card:hover > .jw-card-art { opacity: 1; transform: scale(1.04); }