/* ============================================================
   جنگ جهانی | عصر خاکستر — v20 صحنه‌های سینمایی
   پالت: Dark Cinematic Strategy
   ============================================================ */

:root {
  --v20-bg-0: #0a0d12;
  --v20-bg-1: #11161f;
  --v20-bg-2: #1a212e;
  --v20-panel: rgba(18, 24, 34, 0.92);
  --v20-panel-solid: #121826;
  --v20-line: rgba(120, 144, 176, 0.18);
  --v20-line-strong: rgba(120, 144, 176, 0.4);
  --v20-ink: #e6ecf5;
  --v20-ink-dim: #9aa7bd;
  --v20-ink-faint: #5d6b82;
  --v20-amber: #f0a831;
  --v20-amber-soft: #f5c873;
  --v20-steel: #6f8aac;
  --v20-red: #d6483b;
  --v20-red-soft: #ef7a6c;
  --v20-green: #4fae6b;
  --v20-cyan: #3fa9c4;
  --v20-violet: #8a6fd0;
  --v20-glow-amber: 0 0 18px rgba(240, 168, 49, 0.55);
  --v20-glow-red: 0 0 18px rgba(214, 72, 59, 0.55);
  --v20-glow-cyan: 0 0 16px rgba(63, 169, 196, 0.5);
  --v20-shadow-deep: 0 24px 60px rgba(0, 0, 0, 0.6);
  --v20-radius: 16px;
  --v20-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Overlay shell ---------- */
.v20-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(240, 168, 49, 0.06), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(63, 169, 196, 0.05), transparent 60%),
    linear-gradient(180deg, var(--v20-bg-0), var(--v20-bg-1) 40%, var(--v20-bg-0));
  color: var(--v20-ink);
  font-family: inherit;
  direction: rtl;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: v20-fade-in 0.35s var(--v20-ease);
}
.v20-overlay * { box-sizing: border-box; }
.v20-overlay > #v20-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
@keyframes v20-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v20-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v20-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes v20-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes v20-spin { to { transform: rotate(360deg); } }
@keyframes v20-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Top bar ---------- */
.v20-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(10, 13, 18, 0.96), rgba(10, 13, 18, 0.7));
  border-bottom: 1px solid var(--v20-line);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  z-index: 5;
}
.v20-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--v20-line);
  color: var(--v20-ink); font-size: 14px; cursor: pointer;
  transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease);
}
.v20-back:hover { background: rgba(214, 72, 59, 0.12); border-color: var(--v20-red-soft); }
.v20-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.v20-title { font-size: 19px; font-weight: 700; letter-spacing: 0.3px; }
.v20-subtitle { font-size: 12px; color: var(--v20-ink-dim); }
.v20-spacer { flex: 1; }
.v20-hud { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v20-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--v20-line);
  font-size: 13px; white-space: nowrap;
}
.v20-chip b { color: var(--v20-amber-soft); font-weight: 600; }
.v20-chip .v20-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v20-green); box-shadow: var(--v20-glow-amber); }
.v20-icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--v20-line);
  color: var(--v20-ink); cursor: pointer; font-size: 16px;
  transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease);
}
.v20-icon-btn:hover { background: rgba(240, 168, 49, 0.12); border-color: var(--v20-amber); color: var(--v20-amber-soft); }
.v20-icon-btn:disabled { opacity: 0.4; cursor: default; }

/* ---------- Tabs ---------- */
.v20-tabs {
  display: flex; gap: 4px; padding: 0 14px;
  background: rgba(10, 13, 18, 0.6); border-bottom: 1px solid var(--v20-line);
  overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
}
.v20-tabs::-webkit-scrollbar { display: none; }
.v20-tab {
  padding: 12px 16px; font-size: 14px; color: var(--v20-ink-dim);
  background: none; border: none; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease);
}
.v20-tab:hover { color: var(--v20-ink); }
.v20-tab.active { color: var(--v20-amber-soft); border-bottom-color: var(--v20-amber); }

/* ---------- Body / panels ---------- */
.v20-body { flex: 1 1 auto; min-height: 0; min-width: 0; position: relative; display: flex; flex-direction: column; }
.v20-scroll { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; padding: 18px; -webkit-overflow-scrolling: touch; }
.v20-scroll::-webkit-scrollbar { width: 8px; }
.v20-scroll::-webkit-scrollbar-thumb { background: var(--v20-line-strong); border-radius: 8px; }

.v20-card {
  background: var(--v20-panel); border: 1px solid var(--v20-line);
  border-radius: var(--v20-radius); padding: 16px;
  box-shadow: var(--v20-shadow-deep);
}
.v20-card-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.v20-grid { display: grid; gap: 12px; }
.v20-row { display: flex; align-items: center; gap: 10px; }
.v20-row.between { justify-content: space-between; }
.v20-muted { color: var(--v20-ink-dim); }
.v20-faint { color: var(--v20-ink-faint); }
.v20-label { font-size: 12px; color: var(--v20-ink-dim); }
.v20-val { font-size: 14px; font-weight: 600; }
.v20-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--v20-line);
}
.v20-pill.ok { color: var(--v20-green); border-color: rgba(79, 174, 107, 0.4); background: rgba(79, 174, 107, 0.1); }
.v20-pill.warn { color: var(--v20-amber-soft); border-color: rgba(240, 168, 49, 0.4); background: rgba(240, 168, 49, 0.1); }
.v20-pill.bad { color: var(--v20-red-soft); border-color: rgba(214, 72, 59, 0.4); background: rgba(214, 72, 59, 0.1); }
.v20-pill.lock { color: var(--v20-ink-faint); }

/* progress bar */
.v20-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.v20-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--v20-amber), var(--v20-amber-soft)); box-shadow: var(--v20-glow-amber); transition: width 0.5s var(--v20-ease); }
.v20-bar.cyan > i { background: linear-gradient(90deg, var(--v20-cyan), #7fd3e8); box-shadow: var(--v20-glow-cyan); }
.v20-bar.red > i { background: linear-gradient(90deg, var(--v20-red), var(--v20-red-soft)); box-shadow: var(--v20-glow-red); }

/* buttons */
.v20-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 11px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--v20-line); background: rgba(255,255,255,0.04); color: var(--v20-ink);
  cursor: pointer; transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease); width: 100%;
}
.v20-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--v20-line-strong); }
.v20-btn.primary { background: linear-gradient(135deg, var(--v20-amber), #d88a1e); border-color: transparent; color: #1a1206; }
.v20-btn.primary:hover { filter: brightness(1.1); box-shadow: var(--v20-glow-amber); }
.v20-btn.danger { background: linear-gradient(135deg, var(--v20-red), #a8332a); border-color: transparent; color: #fff; }
.v20-btn.danger:hover { filter: brightness(1.1); box-shadow: var(--v20-glow-red); }
.v20-btn.ghost { background: transparent; }
.v20-btn:disabled { opacity: 0.45; cursor: default; filter: none; box-shadow: none; }
.v20-btn.sm { padding: 7px 12px; font-size: 12px; width: auto; border-radius: 9px; }

/* spinner */
.v20-spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--v20-amber); border-radius: 50%; animation: v20-spin 0.7s linear infinite; }

/* empty / loading */
.v20-empty { text-align: center; padding: 50px 20px; color: var(--v20-ink-faint); }
.v20-empty .v20-emoji { font-size: 42px; opacity: 0.5; margin-bottom: 10px; }
.v20-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--v20-ink-dim); }

/* toast */
.v20-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--v20-panel-solid); border: 1px solid var(--v20-line-strong);
  padding: 12px 20px; border-radius: 12px; font-size: 14px; z-index: 9500;
  box-shadow: var(--v20-shadow-deep); animation: v20-rise 0.3s var(--v20-ease);
  max-width: 90vw; text-align: center;
}
.v20-toast.ok { border-color: rgba(79,174,107,0.5); }
.v20-toast.bad { border-color: rgba(214,72,59,0.5); }

/* ============================================================
   شهر صنعتی — Industrial City
   ============================================================ */
.ic-stage { flex: 1; position: relative; overflow: hidden; touch-action: none; }
.ic-viewport { position: absolute; inset: 0; cursor: grab; }
.ic-viewport.dragging { cursor: grabbing; }
.ic-world {
  position: absolute; left: 50%; top: 50%;
  transform-origin: center center;
  will-change: transform;
}
.ic-ground {
  position: relative;
  width: 1400px; height: 1000px;
  background:
    radial-gradient(800px 500px at 50% 40%, rgba(240,168,49,0.05), transparent 70%),
    linear-gradient(135deg, #0d1219, #141b27);
  border-radius: 24px;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.6), 0 0 0 1px var(--v20-line);
}
/* isometric grid */
.ic-grid {
  position: absolute; inset: 0; border-radius: 24px; opacity: 0.25;
  background-image:
    linear-gradient(rgba(120,144,176,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,144,176,0.12) 1px, transparent 1px);
  background-size: 70px 70px;
}
.ic-roads {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
}
.ic-zone-label {
  position: absolute; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--v20-ink-faint); text-transform: uppercase; pointer-events: none;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* building tile (isometric-ish block) */
.ic-bldg {
  position: absolute;
  width: 96px; height: 96px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.25s var(--v20-ease), filter 0.25s var(--v20-ease);
  z-index: 2;
}
.ic-bldg-body {
  position: relative; width: 100%; height: 100%;
  border-radius: 14px;
  background: linear-gradient(160deg, #1e2737, #131a26);
  border: 1px solid var(--v20-line-strong);
  box-shadow: 0 8px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform 0.25s var(--v20-ease), background-color 0.25s var(--v20-ease), border-color 0.25s var(--v20-ease), color 0.25s var(--v20-ease), box-shadow 0.25s var(--v20-ease), opacity 0.25s var(--v20-ease), filter 0.25s var(--v20-ease);
}
.ic-bldg-art {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:13px; opacity:.94; filter:saturate(.92) contrast(1.04);
}
.ic-bldg-art + .ic-bldg-name { position:relative; z-index:2; }
.ic-bldg-body:has(.ic-bldg-art) { justify-content:flex-end; }
.ic-bldg-body:has(.ic-bldg-art)::after {
  z-index:1; background:linear-gradient(180deg,rgba(4,10,16,.02) 28%,rgba(4,10,16,.22) 48%,rgba(4,10,16,.94) 100%);
}
.ic-bldg-body:has(.ic-bldg-art) .ic-bldg-name {
  width:100%; max-width:none; margin:0; padding:20px 5px 7px; color:#f0f4f6;
  text-shadow:0 1px 4px #000; font-size:9px; line-height:1.25;
}
.ic-panel-art-wrap { width:58px;height:58px;flex:0 0 58px;overflow:hidden;border-radius:14px;border:1px solid var(--v20-line-strong);background:#101a26;box-shadow:0 5px 16px rgba(0,0,0,.35); }
.ic-panel-art { width:100%;height:100%;display:block;object-fit:cover; }
.ic-list-item-art { width:42px;height:42px;flex:0 0 42px;object-fit:cover;border-radius:10px;border:1px solid var(--v20-line-strong);background:#101a26; }
.ic-bldg-body::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.35));
  pointer-events: none;
}
.ic-bldg-emoji { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); position: relative; z-index: 1; }
.ic-bldg-name { font-size: 9px; color: var(--v20-ink-dim); margin-top: 4px; text-align: center; padding: 0 4px; position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
.ic-bldg-lvl {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: rgba(10,13,18,0.85); border: 1px solid var(--v20-amber);
  color: var(--v20-amber-soft); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ic-bldg-status {
  position: absolute; bottom: 5px; left: 5px; z-index: 2;
  width: 10px; height: 10px; border-radius: 50%;
}
.ic-bldg.locked .ic-bldg-body { filter: grayscale(0.9) brightness(0.5); }
.ic-bldg.locked .ic-bldg-emoji { opacity: 0.4; }
.ic-bldg.locked::before {
  content: "🔒"; position: absolute; top: -8px; left: -8px; z-index: 3; font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
}
.ic-bldg.maxed .ic-bldg-lvl { border-color: var(--v20-green); color: var(--v20-green); }
.ic-bldg.pending .ic-bldg-body { animation: v20-pulse 1.4s ease-in-out infinite; border-color: var(--v20-amber); }
.ic-bldg.pending .ic-bldg-status { background: var(--v20-amber); box-shadow: var(--v20-glow-amber); animation: v20-pulse 1s infinite; }
.ic-bldg.active .ic-bldg-status { background: var(--v20-green); box-shadow: 0 0 8px rgba(79,174,107,0.7); }
.ic-bldg.inactive .ic-bldg-status { background: var(--v20-ink-faint); }
.ic-bldg:hover .ic-bldg-body { transform: translateY(-4px); border-color: var(--v20-amber); box-shadow: 0 14px 28px rgba(0,0,0,0.6), var(--v20-glow-amber); }
.ic-bldg.selected .ic-bldg-body {
  border-color: var(--v20-amber); box-shadow: 0 0 0 2px var(--v20-amber), 0 16px 30px rgba(0,0,0,0.6), var(--v20-glow-amber);
}
.ic-bldg.selected::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 10px solid var(--v20-amber); opacity: 0.7;
  animation: v20-pulse 1.2s infinite;
}
/* smoke for active factories */
.ic-smoke { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.ic-smoke i {
  position: absolute; bottom: 0; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(160,180,200,0.35); filter: blur(2px);
  animation: ic-rise 2.6s linear infinite;
}
.ic-smoke i:nth-child(2) { animation-delay: 0.8s; left: -6px; }
.ic-smoke i:nth-child(3) { animation-delay: 1.6s; left: 6px; }
@keyframes ic-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-40px) scale(1.6); }
}

/* zoom controls */
.ic-zoom {
  position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 4;
}
.ic-hint {
  position: absolute; right: 16px; bottom: 16px; z-index: 4;
  font-size: 11px; color: var(--v20-ink-faint); background: rgba(10,13,18,0.7);
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--v20-line);
}

/* side panel (desktop) / bottom sheet (mobile) */
.ic-panel {
  width: 380px; flex-shrink: 0; border-left: 1px solid var(--v20-line);
  background: var(--v20-panel-solid); display: flex; flex-direction: column;
  overflow: hidden;
}
.ic-panel-head { padding: 16px; border-bottom: 1px solid var(--v20-line); display: flex; align-items: center; gap: 12px; }
.ic-panel-emoji { width: 52px; height: 52px; border-radius: 13px; background: linear-gradient(160deg,#1e2737,#131a26); border: 1px solid var(--v20-line-strong); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.ic-panel-body { flex: 1; overflow-y: auto; padding: 16px; }
.ic-panel-body::-webkit-scrollbar { width: 6px; }
.ic-panel-body::-webkit-scrollbar-thumb { background: var(--v20-line-strong); border-radius: 6px; }
.ic-section { margin-bottom: 16px; }
.ic-section-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--v20-ink-faint); text-transform: uppercase; margin-bottom: 8px; }
.ic-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.ic-flow-item { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--v20-line); font-size: 12px; }
.ic-flow-item.in { border-color: rgba(79,174,107,0.35); }
.ic-flow-item.out { border-color: rgba(214,72,59,0.35); }
.ic-flow-item b { font-weight: 700; }

/* building list (tab) */
.ic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ic-list-item { background: var(--v20-panel); border: 1px solid var(--v20-line); border-radius: 12px; padding: 12px; cursor: pointer; transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease); }
.ic-list-item:hover { border-color: var(--v20-amber); transform: translateY(-2px); }
.ic-list-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ic-list-item-emoji { font-size: 22px; }
.ic-list-item-name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-cat-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ic-cat-chip { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--v20-line); font-size: 13px; cursor: pointer; transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease); }
.ic-cat-chip.active { background: rgba(240,168,49,0.15); border-color: var(--v20-amber); color: var(--v20-amber-soft); }

/* research tab */
.ic-tech { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--v20-line); border-radius: 12px; background: var(--v20-panel); margin-bottom: 10px; align-items: flex-start; }
.ic-tech-emoji { font-size: 26px; flex-shrink: 0; }
.ic-tech-info { flex: 1; min-width: 0; }
.ic-tech-name { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.ic-tech-desc { font-size: 12px; color: var(--v20-ink-dim); line-height: 1.5; margin-bottom: 8px; }
.ic-tech-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }

/* production tab */
.ic-prod-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--v20-line); border-radius: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.02); }
.ic-prod-emoji { font-size: 20px; }
.ic-prod-name { flex: 1; font-size: 13px; }
.ic-prod-bar { width: 120px; }

/* ============================================================
   مرکز عملیات — Attack Scene
   ============================================================ */
.atk-stage { flex: 1; position: relative; overflow: hidden; background: linear-gradient(180deg, #0a0d12, #0d1219); }
.atk-sky { position: absolute; inset: 0; transition: background 1.2s var(--v20-ease); }
.atk-sky.idle { background: linear-gradient(180deg, #0a0e16 0%, #131c2b 60%, #1a2638 100%); }
.atk-sky.prep { background: linear-gradient(180deg, #0a0e16 0%, #131c2b 60%, #1a2638 100%); }
.atk-sky.exec { background: linear-gradient(180deg, #1a0d0a 0%, #2a1410 50%, #3a1c14 100%); }
.atk-sky.done { background: linear-gradient(180deg, #0a0d12 0%, #1a1410 60%, #2a1c14 100%); }
.atk-stars { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.3), transparent), radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.45), transparent); opacity: 0.6; }
.atk-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 38%; background: linear-gradient(180deg, transparent, #0a0d12 60%); }
.atk-horizon { position: absolute; bottom: 38%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--v20-line-strong), transparent); }

/* target city silhouette */
.atk-city { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 6px; opacity: 0.85; }
.atk-city i { display: block; width: 26px; background: linear-gradient(180deg, #1a2330, #0a0d12); border-top: 1px solid rgba(120,144,176,0.3); border-radius: 2px 2px 0 0; }
.atk-city-label { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--v20-ink); text-shadow: 0 0 10px rgba(0,0,0,0.9); white-space: nowrap; }
.atk-defense { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); display: flex; gap: 30px; }
.atk-defense i { width: 4px; height: 26px; background: linear-gradient(180deg, var(--v20-cyan), transparent); border-radius: 2px; opacity: 0.5; }

/* attacker origin */
.atk-origin { position: absolute; bottom: 14%; right: 8%; width: 50px; height: 36px; background: linear-gradient(160deg, #243044, #141c2a); border: 1px solid var(--v20-line-strong); border-radius: 8px 8px 4px 4px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 6px 14px rgba(0,0,0,0.5); }
.atk-origin-label { position: absolute; bottom: 9%; right: 8%; font-size: 11px; color: var(--v20-ink-dim); }

/* projectile */
.atk-proj { position: absolute; width: 18px; height: 18px; font-size: 18px; z-index: 6; filter: drop-shadow(0 0 6px rgba(240,168,49,0.7)); will-change: transform, left, top; }
.atk-trail { position: absolute; height: 2px; transform-origin: left center; z-index: 5; background: linear-gradient(90deg, transparent, var(--v20-amber)); opacity: 0.7; }
.atk-explosion { position: absolute; width: 80px; height: 80px; transform: translate(-50%, -50%); z-index: 7; pointer-events: none; }
.atk-explosion i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,180,80,0.9), rgba(214,72,59,0.6) 40%, transparent 70%); animation: atk-boom 0.9s ease-out forwards; }
.atk-explosion i:nth-child(2) { animation-delay: 0.15s; background: radial-gradient(circle, rgba(255,240,200,0.8), transparent 60%); }
@keyframes atk-boom { 0% { transform: scale(0.2); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.atk-smoke-puff { position: absolute; width: 50px; height: 50px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(120,120,120,0.5), transparent 70%); z-index: 7; animation: atk-smoke 2.4s ease-out forwards; pointer-events: none; }
@keyframes atk-smoke { 0% { transform: translate(-50%,-50%) scale(0.4); opacity: 0.7; } 100% { transform: translate(-50%,-120%) scale(2); opacity: 0; } }
.atk-shake { animation: atk-shake-kf 0.5s ease-in-out; }
@keyframes atk-shake-kf { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 5px); } 80% { transform: translate(4px, -2px); } }

/* phase banner */
.atk-phase { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; background: rgba(10,13,18,0.85); border: 1px solid var(--v20-line-strong); font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); }
.atk-phase .v20-spin { width: 14px; height: 14px; }

/* control deck */
.atk-deck { position: absolute; inset: auto 0 0 0; padding: 16px; background: linear-gradient(180deg, transparent, rgba(10,13,18,0.92) 30%); z-index: 9; }
.atk-deck-inner { max-width: 760px; margin: 0 auto; }
.atk-ops { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.atk-ops::-webkit-scrollbar { display: none; }
.atk-op { flex-shrink: 0; padding: 10px 14px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid var(--v20-line); cursor: pointer; transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease); text-align: center; min-width: 86px; }
.atk-op:hover { border-color: var(--v20-line-strong); }
.atk-op.active { background: rgba(240,168,49,0.12); border-color: var(--v20-amber); }
.atk-op-emoji { font-size: 22px; }
.atk-op-name { font-size: 11px; margin-top: 4px; color: var(--v20-ink-dim); }
.atk-op.active .atk-op-name { color: var(--v20-amber-soft); }
.atk-equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.atk-equip-card { padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--v20-line); cursor: pointer; transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease); }
.atk-equip-card:hover { border-color: var(--v20-line-strong); }
.atk-equip-card.active { border-color: var(--v20-red); background: rgba(214,72,59,0.1); }
.atk-equip-card.disabled { opacity: 0.4; cursor: not-allowed; }
.atk-equip-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.atk-equip-emoji { font-size: 18px; }
.atk-equip-name { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atk-equip-meta { font-size: 11px; color: var(--v20-ink-dim); display: flex; justify-content: space-between; }

/* result panel */
.atk-result { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,7,10,0.78); backdrop-filter: blur(4px); animation: v20-fade-in 0.3s; }
.atk-result-card { width: 100%; max-width: 420px; }
.atk-result-head { text-align: center; margin-bottom: 14px; }
.atk-result-head .v20-emoji { font-size: 46px; }
.atk-result-stat { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--v20-line); font-size: 14px; }
.atk-result-stat:last-child { border-bottom: none; }

/* ============================================================
   بازار بازیکنان — Market
   ============================================================ */
.mkt-body { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
.mkt-hud { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mkt-search { flex: 1; min-width: 180px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--v20-line); color: var(--v20-ink); font-size: 14px; }
.mkt-search:focus { outline: none; border-color: var(--v20-amber); }
.mkt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mkt-card { background: var(--v20-panel); border: 1px solid var(--v20-line); border-radius: 14px; padding: 14px; transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease); display: flex; flex-direction: column; gap: 10px; }
.mkt-card:hover { border-color: var(--v20-line-strong); transform: translateY(-2px); box-shadow: var(--v20-shadow-deep); }
.mkt-card.own { border-color: rgba(240,168,49,0.3); }
.mkt-card-top { display: flex; align-items: center; gap: 10px; }
.mkt-card-emoji { width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(160deg,#1e2737,#131a26); border: 1px solid var(--v20-line-strong); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.mkt-card-info { flex: 1; min-width: 0; }
.mkt-card-res { font-size: 14px; font-weight: 600; }
.mkt-card-seller { font-size: 11px; color: var(--v20-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-card-amount { font-size: 20px; font-weight: 700; color: var(--v20-amber-soft); }
.mkt-card-price { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--v20-ink-dim); }
.mkt-card-price b { color: var(--v20-ink); font-size: 14px; }
.mkt-card-actions { display: flex; gap: 8px; }

/* sell form */
.mkt-sell { max-width: 520px; margin: 0 auto; }
.mkt-field { margin-bottom: 14px; }
.mkt-field label { display: block; font-size: 13px; color: var(--v20-ink-dim); margin-bottom: 6px; }
.mkt-input, .mkt-select { width: 100%; padding: 11px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--v20-line); color: var(--v20-ink); font-size: 14px; }
.mkt-input:focus, .mkt-select:focus { outline: none; border-color: var(--v20-amber); }
.mkt-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; max-height: 220px; overflow-y: auto; padding: 2px; }
.mkt-res-pick { padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--v20-line); cursor: pointer; text-align: center; transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease); }
.mkt-res-pick:hover { border-color: var(--v20-line-strong); }
.mkt-res-pick.active { border-color: var(--v20-amber); background: rgba(240,168,49,0.1); }
.mkt-res-pick.disabled { opacity: 0.4; cursor: not-allowed; }
.mkt-res-pick-emoji { font-size: 20px; }
.mkt-res-pick-name { font-size: 11px; margin-top: 3px; color: var(--v20-ink-dim); }
.mkt-res-pick-amt { font-size: 11px; color: var(--v20-amber-soft); font-weight: 600; }

/* history */
.mkt-hist-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--v20-line); border-radius: 10px; margin-bottom: 8px; font-size: 13px; }
.mkt-hist-row .v20-emoji { font-size: 18px; }

/* ============================================================
   v20 ارتقاها — شهر صنعتی
   ============================================================ */
/* category-colored building tiles */
.ic-bldg.cat-mine .ic-bldg-body { border-top: 2px solid var(--cat-accent); }
.ic-bldg.cat-mine .ic-bldg-lvl { border-color: var(--cat-accent); color: var(--cat-accent); }
.ic-bldg.cat-factory .ic-bldg-body { border-top: 2px solid var(--cat-accent); }
.ic-bldg.cat-factory .ic-bldg-lvl { border-color: var(--cat-accent); color: var(--cat-accent); }
.ic-bldg.cat-storage .ic-bldg-body { border-top: 2px solid var(--cat-accent); }
.ic-bldg.cat-storage .ic-bldg-lvl { border-color: var(--cat-accent); color: var(--cat-accent); }
.ic-bldg.cat-lab .ic-bldg-body { border-top: 2px solid var(--cat-accent); }
.ic-bldg.cat-lab .ic-bldg-lvl { border-color: var(--cat-accent); color: var(--cat-accent); }
.ic-bldg.cat-civil .ic-bldg-body { border-top: 2px solid var(--cat-accent); }
.ic-bldg.cat-civil .ic-bldg-lvl { border-color: var(--cat-accent); color: var(--cat-accent); }
.ic-bldg:hover .ic-bldg-body { box-shadow: 0 14px 28px rgba(0,0,0,0.6), 0 0 16px var(--cat-glow); }
.ic-bldg.selected .ic-bldg-body { box-shadow: 0 0 0 2px var(--cat-accent), 0 16px 30px rgba(0,0,0,0.6), 0 0 20px var(--cat-glow); }

/* construction timer badge on tile */
.ic-bldg-timer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 4;
  padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap;
  background: rgba(240,168,49,0.95); color: #1a1206; box-shadow: var(--v20-glow-amber);
}

/* timer box in panel */
.ic-timer-box { background: rgba(240,168,49,0.08); border: 1px solid rgba(240,168,49,0.3); border-radius: 12px; padding: 14px; }
.ic-timer-icon { font-size: 28px; }
.ic-timer-label { font-size: 11px; color: var(--v20-ink-dim); }
.ic-timer-val { font-size: 20px; font-weight: 700; color: var(--v20-amber-soft); font-variant-numeric: tabular-nums; }

/* overview stats */
.ic-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.ic-overview-stat { text-align: center; padding: 14px 8px; border-radius: 12px; background: var(--v20-panel); border: 1px solid var(--v20-line); }
.ic-overview-num { font-size: 24px; font-weight: 700; color: var(--v20-ink); }
.ic-overview-stat.ok .ic-overview-num { color: var(--v20-green); }
.ic-overview-stat.warn .ic-overview-num { color: var(--v20-amber-soft); }
.ic-overview-stat.maxed .ic-overview-num { color: var(--v20-cyan); }
.ic-overview-label { font-size: 11px; color: var(--v20-ink-dim); margin-top: 4px; }

/* quick upgrade in list */
.ic-quick-up { margin-top: 10px; width: 100%; }
.ic-list-timer { font-size: 11px; color: var(--v20-amber-soft); margin-top: 6px; font-weight: 600; }
.ic-list-item.cat-mine { border-right: 3px solid var(--cat-accent); }
.ic-list-item.cat-factory { border-right: 3px solid var(--cat-accent); }
.ic-list-item.cat-storage { border-right: 3px solid var(--cat-accent); }
.ic-list-item.cat-lab { border-right: 3px solid var(--cat-accent); }
.ic-list-item.cat-civil { border-right: 3px solid var(--cat-accent); }

/* research balance */
.ic-rp-balance { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ic-rp-icon { font-size: 32px; }
.ic-rp-label { font-size: 12px; color: var(--v20-ink-dim); }
.ic-rp-val { font-size: 26px; font-weight: 700; color: var(--v20-violet); }
.ic-rp-rate { margin-right: auto; font-size: 13px; color: var(--v20-green); font-weight: 600; }
.ic-tech-group { margin-bottom: 18px; }
.ic-tech-group-title { font-size: 13px; font-weight: 700; color: var(--v20-amber-soft); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--v20-line); }
.ic-tech.maxed { opacity: 0.7; }
.ic-tech-buy { width: auto; }

/* production rates */
.ic-prod-rate { font-size: 11px; font-weight: 600; margin-right: auto; padding: 2px 7px; border-radius: 6px; }
.ic-prod-rate.pos { color: var(--v20-green); background: rgba(79,174,107,0.1); }
.ic-prod-rate.neg { color: var(--v20-red-soft); background: rgba(214,72,59,0.1); }
.ic-prod-rate.zero { color: var(--v20-ink-faint); }

/* stat grid */
.ic-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ic-stat-cell { padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--v20-line); }
.ic-stat-label { font-size: 11px; color: var(--v20-ink-dim); margin-bottom: 4px; }
.ic-stat-val { font-size: 18px; font-weight: 700; }
.ic-stat-val.amber { color: var(--v20-amber-soft); }
.ic-stat-val.red { color: var(--v20-red-soft); }
.ic-stat-val.cyan { color: var(--v20-cyan); }

/* ============================================================
   v20 ارتقاها — مرکز عملیات
   ============================================================ */
.atk-stage { transition: background 0.6s var(--v20-ease); }
.atk-stage.idle { background: linear-gradient(180deg, #0a0e16 0%, #131c2b 60%, #1a2638 100%); }
.atk-stage.prep { background: linear-gradient(180deg, #0c0e1a 0%, #182030 60%, #243045 100%); }
.atk-stage.exec { background: linear-gradient(180deg, #1a0d0a 0%, #2a1410 50%, #3a1c14 100%); }

/* radar sweep */
.atk-radar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; pointer-events: none; opacity: 0.4; }
.atk-radar-grid { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(63,169,196,0.2); background: radial-gradient(circle, transparent 30%, rgba(63,169,196,0.04) 70%, transparent); }
.atk-radar-grid::before, .atk-radar-grid::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(63,169,196,0.15); }
.atk-radar-grid::before { inset: 25%; }
.atk-radar-grid::after { inset: 50%; }
.atk-radar-sweep { position: absolute; top: 50%; left: 50%; width: 50%; height: 2px; transform-origin: left center; background: linear-gradient(90deg, rgba(63,169,196,0.6), transparent); animation: atk-radar-rot 3s linear infinite; }
@keyframes atk-radar-rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* threat level */
.atk-threat { position: absolute; top: 18px; right: 16px; z-index: 8; display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); background: rgba(10,13,18,0.8); border: 1px solid var(--v20-line-strong); }
.atk-threat-dot { width: 8px; height: 8px; border-radius: 50%; }
.atk-threat.low .atk-threat-dot { background: var(--v20-green); box-shadow: 0 0 8px rgba(79,174,107,0.7); }
.atk-threat.low { border-color: rgba(79,174,107,0.4); }
.atk-threat.med .atk-threat-dot { background: var(--v20-amber); box-shadow: var(--v20-glow-amber); }
.atk-threat.med { border-color: rgba(240,168,49,0.4); }
.atk-threat.high .atk-threat-dot { background: var(--v20-red); box-shadow: var(--v20-glow-red); animation: v20-pulse 1s infinite; }
.atk-threat.high { border-color: rgba(214,72,59,0.4); }

/* power chip */
.atk-power-chip { position: absolute; top: 18px; left: 16px; z-index: 8; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); background: rgba(10,13,18,0.8); border: 1px solid var(--v20-line-strong); color: var(--v20-amber-soft); }

/* target intel */
.atk-intel { display: flex; align-items: center; gap: 10px; }
.atk-intel-side { flex: 0 0 auto; text-align: center; min-width: 80px; }
.atk-intel-name { font-size: 12px; color: var(--v20-ink-dim); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; }
.atk-intel-pow { font-size: 18px; font-weight: 700; }
.atk-intel-bar { flex: 1; height: 10px; border-radius: 999px; overflow: hidden; display: flex; background: rgba(255,255,255,0.06); }
.atk-intel-bar-fill { height: 100%; }
.atk-intel-bar-fill.me { background: linear-gradient(90deg, var(--v20-green), #6dd089); }
.atk-intel-bar-fill.them { background: linear-gradient(90deg, #d6483b, #ef7a6c); }
.atk-intel-adv { margin-top: 8px; text-align: center; padding: 6px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.atk-intel-adv.ok { color: var(--v20-green); background: rgba(79,174,107,0.1); }
.atk-intel-adv.bad { color: var(--v20-red-soft); background: rgba(214,72,59,0.1); }

/* operation summary */
.atk-summary { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(214,72,59,0.06); border: 1px solid rgba(214,72,59,0.25); }
.atk-sum-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.atk-sum-row span { color: var(--v20-ink-dim); }
.atk-sum-row b { font-weight: 600; }

/* fire button */
.atk-fire { margin-top: 14px; font-size: 15px; }

/* recent ops */
.atk-recent { display: flex; flex-direction: column; gap: 6px; }
.atk-recent-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--v20-line); font-size: 12px; background: rgba(255,255,255,0.02); }
.atk-recent-row.ok { border-color: rgba(79,174,107,0.3); }
.atk-recent-row.bad { border-color: rgba(214,72,59,0.3); }

/* ============================================================
   v20 ارتقاها — بازار
   ============================================================ */
.mkt-spark { width: 100%; height: 50px; display: block; margin-top: 8px; }
.mkt-oil-chart { width: 100%; height: 80px; display: block; margin-top: 12px; }
.mkt-oil-card { text-align: center; }
.mkt-oil-current { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-bottom: 4px; }
.mkt-oil-price { font-size: 36px; font-weight: 700; color: var(--v20-amber-soft); }
.mkt-oil-price span { font-size: 16px; }
.mkt-oil-change { font-size: 14px; font-weight: 600; }

.mkt-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mkt-mini-stat { text-align: center; padding: 12px 8px; border-radius: 12px; background: var(--v20-panel); border: 1px solid var(--v20-line); }
.mkt-mini-num { font-size: 20px; font-weight: 700; color: var(--v20-amber-soft); }
.mkt-mini-label { font-size: 11px; color: var(--v20-ink-dim); margin-top: 3px; }

.mkt-suggest { padding: 12px; border-radius: 12px; background: rgba(63,169,196,0.08); border: 1px solid rgba(63,169,196,0.3); margin-bottom: 14px; }
.mkt-suggest-label { font-size: 12px; color: var(--v20-cyan); margin-bottom: 4px; }
.mkt-suggest-val { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.mkt-sell-preview { margin-bottom: 14px; }

.mkt-range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); outline: none; }
.mkt-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--v20-amber); cursor: pointer; box-shadow: var(--v20-glow-amber); }
.mkt-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--v20-amber); cursor: pointer; border: none; box-shadow: var(--v20-glow-amber); }

.atk-target-list .atk-equip-card { padding: 8px 10px; }

/* ============================================================
   v20 عکس‌های منابع و کارت‌های تصویری
   ============================================================ */
/* resource images in production tab */
.ic-prod-img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--v20-line); }
.ic-flow-img { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }

/* market card with image */
.mkt-card-img-wrap { position: relative; width: 100%; height: 120px; border-radius: 12px; overflow: hidden; margin-bottom: 4px; background: var(--v20-bg-2); }
.mkt-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--v20-ease); }
.mkt-card:hover .mkt-card-img { transform: scale(1.06); }
.mkt-card-amount-badge {
  position: absolute; bottom: 8px; left: 8px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(10,13,18,0.85); border: 1px solid var(--v20-line-strong);
  font-size: 13px; font-weight: 700; color: var(--v20-amber-soft);
  backdrop-filter: blur(4px);
}
.mkt-card-img-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,13,18,0.7));
  pointer-events: none;
}

/* resource picker image in sell tab */
.mkt-res-pick-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; margin: 0 auto 4px; display: block; }
.mkt-res-pick.active .mkt-res-pick-img { box-shadow: 0 0 0 2px var(--v20-amber), var(--v20-glow-amber); }

/* ============================================================
   v20 انیمیشن سینمایی حمله
   ============================================================ */
/* launch flash at origin */
.atk-launch-flash {
  position: absolute; width: 60px; height: 60px; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: 7; pointer-events: none;
  background: radial-gradient(circle, rgba(255,200,100,0.9), rgba(240,168,49,0.5) 40%, transparent 70%);
  animation: atk-launch-flash 0.6s ease-out forwards;
}
@keyframes atk-launch-flash {
  0% { transform: translate(-50%,-50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}

/* shockwave */
.atk-shockwave {
  position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: 7; pointer-events: none;
  border: 3px solid rgba(255,200,100,0.8);
  animation: atk-shockwave 1s ease-out forwards;
}
@keyframes atk-shockwave {
  0% { transform: translate(-50%,-50%) scale(0.2); opacity: 1; border-width: 4px; }
  100% { transform: translate(-50%,-50%) scale(6); opacity: 0; border-width: 1px; }
}

/* nuclear projectile */
.atk-proj.nuke { font-size: 28px; filter: drop-shadow(0 0 12px rgba(214,72,59,0.9)); }
.atk-proj { transition: none; }
.atk-trail { transition: none; }

/* bigger explosion for nuclear */
.atk-proj.nuke ~ .atk-explosion i { background: radial-gradient(circle, rgba(255,80,40,0.95), rgba(214,72,59,0.7) 40%, transparent 70%); }

/* city flicker */
.atk-city { transition: opacity 0.3s var(--v20-ease); }

/* ============================================================
   v20 ارتقای بصری — محیط بازی واقعی
   ============================================================ */

/* ---------- شهر صنعتی: زمین و محیط ---------- */
.ic-ground {
  background:
    /* zone ambient glows */
    radial-gradient(ellipse 320px 220px at 12% 18%, rgba(240,168,49,0.10), transparent 70%),
    radial-gradient(ellipse 420px 260px at 48% 18%, rgba(111,138,172,0.08), transparent 70%),
    radial-gradient(ellipse 260px 220px at 82% 18%, rgba(138,111,208,0.08), transparent 70%),
    radial-gradient(ellipse 300px 220px at 16% 68%, rgba(63,169,196,0.08), transparent 70%),
    radial-gradient(ellipse 360px 220px at 62% 68%, rgba(79,174,107,0.08), transparent 70%),
    /* texture noise */
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 3px),
    /* base terrain */
    linear-gradient(160deg, #0c1118 0%, #131a26 50%, #0e1419 100%);
}
.ic-ground::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none;
  background: linear-gradient(180deg, rgba(240,168,49,0.04) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.2) 100%);
  animation: ic-ambient 6s ease-in-out infinite;
}
@keyframes ic-ambient { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* roads connecting zones */
.ic-roads {
  background-image:
    linear-gradient(90deg, transparent 8%, rgba(90,100,115,0.12) 8%, rgba(90,100,115,0.12) 92%, transparent 92%),
    linear-gradient(0deg, transparent 35%, rgba(90,100,115,0.08) 35%, rgba(90,100,115,0.08) 65%, transparent 65%);
  background-size: 100% 6px, 6px 100%;
  background-position: 0 45%, 45% 0;
  background-repeat: no-repeat;
}
.ic-roads::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(240,168,49,0.15) 20px, rgba(240,168,49,0.15) 24px);
  background-size: 100% 6px;
  background-position: 0 45%;
  background-repeat: no-repeat;
  opacity: 0.5;
}

/* floating particles */
.ic-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 24px; }
.ic-particle {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(240,168,49,0.5); box-shadow: 0 0 4px rgba(240,168,49,0.4);
  animation: ic-float 7s ease-in-out infinite;
}
@keyframes ic-float {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.4; }
  100% { transform: translateY(-120px) translateX(20px); opacity: 0; }
}

/* construction crane for pending buildings */
.ic-bldg.pending .ic-bldg-body::before {
  content: ""; position: absolute; top: -24px; left: 50%; width: 2px; height: 34px;
  background: linear-gradient(180deg, var(--v20-amber), transparent);
  transform-origin: bottom center; animation: ic-crane 3s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(240,168,49,0.5);
}
.ic-bldg.pending .ic-bldg-body::after {
  content: ""; position: absolute; top: -26px; left: 30%; width: 40%; height: 2px;
  background: var(--v20-amber); opacity: 0.6;
}
@keyframes ic-crane { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* 3D building depth */
.ic-bldg-body {
  box-shadow: 0 10px 22px rgba(0,0,0,0.55), 0 3px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -3px 6px rgba(0,0,0,0.3);
}
.ic-bldg:hover .ic-bldg-body {
  box-shadow: 0 16px 32px rgba(0,0,0,0.65), 0 3px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 20px var(--cat-glow);
}

/* building hover tooltip */
.ic-bldg-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: rgba(10,13,18,0.95); border: 1px solid var(--v20-line-strong); border-radius: 8px;
  padding: 6px 10px; font-size: 11px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.2s; z-index: 10; backdrop-filter: blur(6px);
}
.ic-bldg:hover .ic-bldg-tooltip { opacity: 1; }

/* zone platform */
.ic-zone-platform {
  position: absolute; border-radius: 16px; pointer-events: none;
  background: radial-gradient(ellipse, var(--cat-glow), transparent 70%);
  opacity: 0.3;
}

/* ---------- مرکز عملیات: محیط میدان نبرد ---------- */
.atk-moon {
  position: absolute; top: 8%; right: 14%; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e6ecf5, #7a8aa3 70%, #4a5668);
  box-shadow: 0 0 50px rgba(230,236,245,0.25), inset -8px -8px 16px rgba(0,0,0,0.3);
}
.atk-moon::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(0,0,0,0.1); top: 20%; left: 50%;
}
.atk-stars { animation: atk-twinkle 5s ease-in-out infinite; }
@keyframes atk-twinkle { 0%,100% { opacity: 0.4; } 50% { opacity: 0.75; } }

.atk-mountains {
  position: absolute; bottom: 36%; left: 0; right: 0; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, #131c2b, #0a0d12);
  clip-path: polygon(0 100%, 8% 55%, 16% 75%, 24% 35%, 32% 65%, 40% 25%, 48% 60%, 56% 40%, 64% 70%, 72% 30%, 80% 65%, 88% 45%, 96% 70%, 100% 50%, 100% 100%);
  opacity: 0.7;
}
.atk-mountains-back {
  position: absolute; bottom: 38%; left: 0; right: 0; height: 70px; pointer-events: none;
  background: linear-gradient(180deg, #1a2638, #0d1219);
  clip-path: polygon(0 100%, 12% 60%, 22% 80%, 35% 45%, 45% 70%, 58% 35%, 68% 65%, 80% 50%, 92% 75%, 100% 55%, 100% 100%);
  opacity: 0.4;
}

.atk-clouds {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.atk-cloud {
  position: absolute; border-radius: 50%; filter: blur(8px);
  background: rgba(255,255,255,0.04);
  animation: atk-cloud-drift linear infinite;
}
@keyframes atk-cloud-drift { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 200px)); } }

/* alert flash on exec */
.atk-stage.exec::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(214,72,59,0.12));
  animation: atk-alert-pulse 1.2s ease-in-out infinite;
}
@keyframes atk-alert-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.8; } }

/* defense system animation */
.atk-defense i { animation: atk-defense-pulse 2s ease-in-out infinite; }
@keyframes atk-defense-pulse { 0%,100% { opacity: 0.3; height: 26px; } 50% { opacity: 0.7; height: 32px; } }

/* debris particles on impact */
.atk-debris {
  position: absolute; width: 4px; height: 4px; border-radius: 1px;
  background: var(--v20-amber); z-index: 7; pointer-events: none;
  animation: atk-debris-fly 1s ease-out forwards;
}
@keyframes atk-debris-fly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* damage number popup */
.atk-dmg-popup {
  position: absolute; z-index: 8; font-size: 22px; font-weight: 800;
  color: var(--v20-red-soft); text-shadow: 0 0 10px rgba(214,72,59,0.6), 0 2px 4px rgba(0,0,0,0.8);
  pointer-events: none; animation: atk-dmg-rise 1.5s ease-out forwards;
}
@keyframes atk-dmg-rise {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { transform: translateY(-10px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-60px) scale(1); opacity: 0; }
}

/* ---------- بازار: کف تجارت ---------- */
.mkt-body {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(240,168,49,0.05), transparent 70%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(120,144,176,0.025) 39px, rgba(120,144,176,0.025) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(120,144,176,0.025) 39px, rgba(120,144,176,0.025) 40px);
}

/* price ticker */
.mkt-ticker-wrap {
  overflow: hidden; border-radius: 10px; background: rgba(10,13,18,0.6);
  border: 1px solid var(--v20-line); margin-bottom: 14px; position: relative;
}
.mkt-ticker-wrap::before, .mkt-ticker-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30px; z-index: 2; pointer-events: none;
}
.mkt-ticker-wrap::before { right: 0; background: linear-gradient(270deg, rgba(10,13,18,0.9), transparent); }
.mkt-ticker-wrap::after { left: 0; background: linear-gradient(90deg, rgba(10,13,18,0.9), transparent); }
.mkt-ticker {
  display: flex; gap: 24px; padding: 10px 0; white-space: nowrap;
  animation: mkt-ticker-scroll 25s linear infinite;
}
.mkt-ticker:hover { animation-play-state: paused; }
@keyframes mkt-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mkt-ticker-item {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
}
.mkt-ticker-item b { font-weight: 700; }
.mkt-ticker-item .up { color: var(--v20-green); }
.mkt-ticker-item .down { color: var(--v20-red-soft); }

/* glass card */
.mkt-card {
  backdrop-filter: blur(6px);
  background: rgba(18,24,34,0.72);
}
.mkt-card:hover {
  box-shadow: var(--v20-shadow-deep), 0 0 16px rgba(240,168,49,0.15);
}

/* coin animation on transaction */
.mkt-coin {
  position: fixed; width: 22px; height: 22px; border-radius: 50%; z-index: 9600;
  background: radial-gradient(circle at 35% 35%, var(--v20-amber-soft), var(--v20-amber));
  box-shadow: 0 0 10px rgba(240,168,49,0.6); pointer-events: none;
  animation: mkt-coin-fly 0.9s ease-out forwards;
}
@keyframes mkt-coin-fly {
  0% { transform: translate(0,0) scale(0.5) rotate(0); opacity: 1; }
  50% { transform: translate(var(--cx), var(--cy)) scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.3) rotate(360deg); opacity: 0; }
}

/* transaction flash */
.mkt-flash-ok { animation: mkt-flash-green 0.6s ease-out; }
.mkt-flash-bad { animation: mkt-flash-red 0.6s ease-out; }
@keyframes mkt-flash-green { 0% { box-shadow: 0 0 0 0 rgba(79,174,107,0.5); } 100% { box-shadow: 0 0 0 20px transparent; } }
@keyframes mkt-flash-red { 0% { box-shadow: 0 0 0 0 rgba(214,72,59,0.5); } 100% { box-shadow: 0 0 0 20px transparent; } }

/* live price update flash */
.mkt-price-up { animation: mkt-pulse-green 0.8s ease-out; }
.mkt-price-down { animation: mkt-pulse-red 0.8s ease-out; }
@keyframes mkt-pulse-green { 0% { background: rgba(79,174,107,0.2); } 100% { background: transparent; } }
@keyframes mkt-pulse-red { 0% { background: rgba(214,72,59,0.2); } 100% { background: transparent; } }

/* ---------- عمومی: انیمیشن ورود ---------- */
.v20-card { animation: v20-card-in 0.4s var(--v20-ease) both; }
@keyframes v20-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.mkt-card { animation: v20-card-in 0.3s var(--v20-ease) both; }
.ic-list-item { animation: v20-card-in 0.25s var(--v20-ease) both; }

/* responsive */
@media (max-width: 860px) {
  .ic-panel { width: 100%; border-left: none; border-top: 1px solid var(--v20-line); max-height: 52vh; animation: v20-slide-up 0.3s var(--v20-ease); }
  .v20-body { flex-direction: column; }
  .ic-stage { flex: 1; min-height: 48vh; }
  .v20-title { font-size: 17px; }
  .v20-hud { display: none; }
}
@media (max-width: 560px) {
  .v20-topbar { padding: 10px 12px; gap: 8px; }
  .v20-tabs { padding: 0 8px; }
  .v20-tab { padding: 10px 12px; font-size: 13px; }
  .mkt-list { grid-template-columns: 1fr; }
  .atk-equip { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   لانچر شناور v20
   ============================================================ */
#v20-launcher { position: fixed; left: 16px; bottom: 16px; z-index: 8000; }
.v20-launcher-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--v20-amber), #d88a1e); color: #1a1206;
  border: none; font-size: 14px; font-weight: 700; box-shadow: var(--v20-glow-amber), var(--v20-shadow-deep);
  transition: transform 0.2s var(--v20-ease);
}
.v20-launcher-toggle:hover { transform: scale(1.05); }
.v20-launcher-toggle span { font-size: 12px; letter-spacing: 0.5px; }
.v20-launcher-menu {
  position: absolute; bottom: 54px; left: 0; display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none;
  transition: transform 0.22s var(--v20-ease), background-color 0.22s var(--v20-ease), border-color 0.22s var(--v20-ease), color 0.22s var(--v20-ease), box-shadow 0.22s var(--v20-ease), opacity 0.22s var(--v20-ease), filter 0.22s var(--v20-ease); transform-origin: bottom left;
}
.v20-launcher-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.v20-launcher-item {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px;
  background: var(--v20-panel-solid); border: 1px solid var(--v20-line-strong); color: var(--v20-ink);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; direction: rtl;
  box-shadow: var(--v20-shadow-deep); transition: transform 0.2s var(--v20-ease), background-color 0.2s var(--v20-ease), border-color 0.2s var(--v20-ease), color 0.2s var(--v20-ease), box-shadow 0.2s var(--v20-ease), opacity 0.2s var(--v20-ease), filter 0.2s var(--v20-ease);
}
.v20-launcher-item:hover { border-color: var(--v20-amber); background: rgba(240,168,49,0.12); transform: translateX(4px); }
.v20-launcher-emoji { font-size: 18px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v20-overlay, .v20-overlay * { animation: none !important; transition: none !important; }
  .ic-smoke, .atk-proj, .atk-explosion, .atk-smoke-puff { display: none !important; }
  .v20-launcher-menu { transition: none; }
}

/* ============================================================
   v20-perf — روانی اجرا (روی دستگاه قوی ظاهر تغییر نمی‌کند)
   ============================================================ */
/* حرکت روی لایهٔ گرافیکی، نه بازچینش صفحه */
.ic-world, .ic-bldg, .mkt-card, .atk-proj { backface-visibility: hidden; }
.ic-world { will-change: transform; }

/* لمس فوری: بدون تأخیر ضربه و هایلایت پیش‌فرض */
.v20-btn, .v20-tab, .v20-back, .v20-icon-btn, .ic-cat-chip, .ic-list-item,
.mkt-card, .mkt-res-pick, .atk-op, .atk-equip-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* اسکرول نرم و محدود: صفحهٔ زیرین کشیده نمی‌شود */
.v20-scroll, .ic-panel-body, .mkt-body, .mkt-res-grid {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  contain: layout paint;
}

/* دستگاه ضعیف یا افت نرخ فریم (کلاس با JangScene/V20Guard روی body می‌آید) */
body.v20-perf-low .v20-topbar,
body.v20-perf-low .atk-phase,
body.v20-perf-low .atk-result,
body.v20-perf-low .atk-threat,
body.v20-perf-low .atk-power-chip,
body.v20-perf-low .ic-bldg-tooltip,
body.v20-perf-low .mkt-card,
body.v20-perf-low .mkt-card-amount-badge { backdrop-filter: none; }
body.v20-perf-low .ic-particle { display: none; }
body.v20-perf-low .ic-ground::before,
body.v20-perf-low .ic-smoke i,
body.v20-perf-low .atk-stars,
body.v20-perf-low .atk-cloud,
body.v20-perf-low .atk-stage.exec::after,
body.v20-perf-low .atk-defense i,
body.v20-perf-low .atk-radar-sweep { animation: none; }

/* کاهش حرکت (سیستم کاربر): انیمیشن‌های ورودی هم حذف می‌شوند */
body.v20-reduce-motion .v20-overlay,
body.v20-reduce-motion .v20-card,
body.v20-reduce-motion .v20-modal { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .v20-overlay, .v20-card, .v20-modal { animation: none; }
}