/* ============================================================================
   game_shell.css — لایهٔ «حس بازی» برای مینی‌اپ جنگ جهانی
   ----------------------------------------------------------------------------
   ظاهر لیست/دکمه‌ای مینی‌اپ را به یک رابط بازی‌گونه تبدیل می‌کند: نوار وضعیت
   زنده، کارت‌های تصویری بخش‌ها، بنر صحنه، بازخورد لمس و گذار سینمایی.
   هیچ منطق بازی، قیمت یا قاعده‌ای اینجا تغییر نمی‌کند.
   ============================================================================ */

:root {
  --gs-gold: #e5bd67;
  --gs-cyan: #63b6c8;
  --gs-red: #de6d69;
  --gs-green: #70c393;
  --gs-panel: rgba(18, 29, 41, 0.88);
  --gs-line: rgba(183, 205, 220, 0.16);
  --gs-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
}

/* ---------------------------------------------------------------- نوار وضعیت */
#gs-hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0 6px;
  padding: 9px;
  border: 1px solid var(--gs-line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(23, 37, 52, 0.85), rgba(11, 18, 27, 0.9)),
    radial-gradient(circle at 12% 0%, rgba(99, 182, 200, 0.16), transparent 60%);
  box-shadow: var(--gs-shadow);
}
.gs-chip { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gs-chip__k { font-size: 9px; color: var(--muted); }
.gs-chip__v { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-chip__v small { font-size: 9px; font-weight: 500; color: var(--muted); margin-inline-start: 2px; }
.gs-chip--gold .gs-chip__v { color: var(--gs-gold); }
.gs-chip--cyan .gs-chip__v { color: var(--gs-cyan); }
.gs-chip--green .gs-chip__v { color: var(--gs-green); }
.gs-chip--red .gs-chip__v { color: var(--gs-red); }
.gs-chip__bar { height: 3px; border-radius: 3px; background: rgba(183, 205, 220, 0.14); overflow: hidden; }
.gs-chip__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gs-cyan), var(--gs-gold)); transition: width .6s ease; }

/* ------------------------------------------------------- کارت‌های تصویری بخش‌ها */
.action-card.gs-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: gs-rise .52s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--gs-i, 0) * 70ms);
}
.gs-card__art {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none;
  background-image: var(--gs-art);
  background-size: cover; background-position: center;
  opacity: .46; transform: scale(1.06);
  filter: saturate(.85) contrast(1.05);
  transition: transform .5s ease, opacity .3s ease;
}
.gs-card__veil {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(158deg, rgba(11, 18, 27, .18) 8%, rgba(11, 18, 27, .76) 76%);
}
.action-card.gs-card > *:not(.gs-card__art):not(.gs-card__veil):not(.gs-card__medal) { position: relative; z-index: 2; }
.gs-card__medal {
  position: absolute; z-index: 3;
  inset-inline-end: 11px; top: 11px;
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 16px; color: var(--gs-gold);
  background: linear-gradient(150deg, rgba(229, 189, 103, .24), rgba(99, 182, 200, .12));
  border: 1px solid var(--gs-line);
}
.gs-card__medal::after {
  content: ''; position: absolute; inset: -5px; border-radius: 15px;
  border: 1px solid rgba(229, 189, 103, .28);
  animation: gs-sonar 2.8s ease-out infinite;
}
/* CSS کامپایل‌شدهٔ قدیمی‌تر `.action-card > span` را با گرادیان رنگی پر می‌کرد.
   این selector مشخص‌تر است تا عکس، veil و نشانِ افزوده‌شده واقعاً استایل خود را بگیرند. */
.action-grid .action-card.gs-card > .gs-card__art { display: block; width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none; background-image: var(--gs-art); }
.action-grid .action-card.gs-card > .gs-card__veil {
  display: block; width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(158deg, rgba(11, 18, 27, .18) 8%, rgba(11, 18, 27, .76) 76%);
}
.action-grid .action-card.gs-card > .gs-card__medal {
  background: linear-gradient(150deg, rgba(229, 189, 103, .24), rgba(99, 182, 200, .12));
}
.action-card.gs-card:active .gs-card__art { transform: scale(1.12); opacity: .34; }
.action-card.gs-card:active { transform: scale(.975); }

@keyframes gs-sonar { 0% { transform: scale(.72); opacity: .75 } 100% { transform: scale(1.4); opacity: 0 } }
@keyframes gs-rise { from { opacity: 0; transform: translateY(16px) scale(.97) } to { opacity: 1; transform: none } }

/* ------------------------------------------------------------------- بنر صحنه */
.gs-banner {
  position: relative; overflow: hidden;
  height: 116px; margin: 2px 0 14px;
  border-radius: 16px; border: 1px solid var(--gs-line);
  display: flex; align-items: flex-end; padding: 12px 14px;
  animation: gs-rise .5s cubic-bezier(.2, .8, .2, 1) both;
}
.gs-banner__art { position: absolute; inset: 0; background-image: var(--gs-art); background-size: cover; background-position: center; transform: scale(1.04); }
.gs-banner__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 18, 27, .1) 20%, rgba(11, 18, 27, .93)); }
.gs-banner__body { position: relative; z-index: 2; }
.gs-banner__eyebrow { font-size: 9px; letter-spacing: .16em; color: var(--gs-gold); text-transform: uppercase; }
.gs-banner__title { margin: 3px 0 0; font-size: 16px; color: var(--text); }
.gs-banner__sub { margin: 2px 0 0; font-size: 10px; color: var(--muted); }
.gs-banner__mark {
  position: absolute; z-index: 2; inset-inline-end: 14px; top: 14px;
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  font-size: 18px; color: var(--gs-gold);
  background: rgba(11, 18, 27, .5); border: 1px solid var(--gs-line);
}

/* ------------------------------------------------------------ بازخورد لمس */
.gs-press { position: relative; overflow: hidden; }
.gs-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 4;
  background: radial-gradient(circle, rgba(229, 189, 103, .38), transparent 68%);
  animation: gs-ripple .55s ease-out forwards;
}
@keyframes gs-ripple { from { transform: scale(0); opacity: 1 } to { transform: scale(1); opacity: 0 } }

/* ----------------------------------------------------------- گذار سینمایی */
#gs-transition {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 44%, #16283a, #070d13 72%);
  animation: gs-fade .18s ease-out;
}
#gs-transition .gs-t-art { position: absolute; inset: 0; background-image: var(--gs-art); background-size: cover; background-position: center; opacity: .22; animation: gs-zoom .9s ease-out both; }
#gs-transition .gs-t-veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 8%, #070d13 78%); }
#gs-transition .gs-t-body { position: relative; z-index: 2; text-align: center; animation: gs-rise .4s ease-out both; }
#gs-transition .gs-t-mark {
  width: 66px; height: 66px; margin: 0 auto 12px; border-radius: 20px;
  display: grid; place-items: center; font-size: 28px; color: var(--gs-gold);
  background: linear-gradient(150deg, rgba(229, 189, 103, .22), rgba(99, 182, 200, .1));
  border: 1px solid var(--gs-line);
}
#gs-transition .gs-t-title { font-size: 17px; color: var(--text); }
#gs-transition .gs-t-sub { margin-top: 4px; font-size: 10px; color: var(--muted); }
#gs-transition .gs-t-bar { width: 150px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: rgba(183, 205, 220, .16); overflow: hidden; }
#gs-transition .gs-t-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--gs-cyan), var(--gs-gold)); animation: gs-load 1.1s ease-in-out infinite; }
@keyframes gs-load { 0% { transform: translateX(-110%) } 100% { transform: translateX(280%) } }
@keyframes gs-zoom { from { transform: scale(1.16) } to { transform: scale(1) } }
@keyframes gs-fade { from { opacity: 0 } to { opacity: 1 } }

/* ------------------------------------------------------------- نوار پایین */
.bottom-nav.gs-dock { border-top: 1px solid var(--gs-line); }
.bottom-nav.gs-dock button { transition: transform .18s ease, color .18s ease; }
.bottom-nav.gs-dock button:active { transform: translateY(-2px) scale(.96); }
.bottom-nav.gs-dock button.active { text-shadow: 0 0 14px rgba(229, 189, 103, .55); }

/* ------------------------------------------------------- احترام به کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  .action-card.gs-card, .gs-banner, #gs-transition, #gs-transition .gs-t-body,
  .gs-card__medal::after, .gs-ripple, #gs-transition .gs-t-bar i { animation: none !important; }
  .gs-card__art { transition: none; }
}

@media (max-width: 380px) {
  #gs-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}