/* ============================================================================
   Store tier environment — atmosphere that changes with rank so upgrading is a
   felt "leap", not just a padlock removed.
     Scout     : flat (baseline, no effects)
     Commander : subtle premium ambient glow
     Warlord   : dramatic — crimson/gold ambiance, rising embers, ornamental frame
   Driven by data-tier on #inv-store-root. The .inv-env overlay sits behind the
   store content (pointer-events:none).
   ============================================================================ */

#inv-store-root { position: relative; }
#inv-store-root > *:not(.inv-env) { position: relative; z-index: 1; }

.inv-env,
.inv-env > span {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: none;
}
.inv-env { z-index: 0; overflow: hidden; }

/* ── Commander: subtle premium glow ─────────────────────────────────────── */
#inv-store-root[data-tier="commander"] .inv-env { display: block; }
#inv-store-root[data-tier="commander"] .inv-env__glow {
	display: block;
	background: radial-gradient(120% 60% at 50% -8%, rgba(217,119,6,.10), transparent 60%);
}

/* ── Warlord: dramatic environment ──────────────────────────────────────── */
#inv-store-root[data-tier="warlord"] .inv-env { display: block; }

/* Ambient crimson wash + top glow + vignette */
#inv-store-root[data-tier="warlord"] .inv-env {
	background:
		radial-gradient(130% 70% at 50% -6%, rgba(190,30,30,.28), transparent 58%),
		radial-gradient(90% 50% at 50% 108%, rgba(120,20,20,.22), transparent 60%),
		linear-gradient(180deg, rgba(35,6,6,.45), transparent 22%, transparent 78%, rgba(22,4,4,.5));
}

/* Pulsing gold glow */
#inv-store-root[data-tier="warlord"] .inv-env__glow {
	display: block;
	background: radial-gradient(80% 45% at 50% 0%, rgba(245,180,70,.16), transparent 60%);
	animation: invEnvPulse 6s ease-in-out infinite;
}
@keyframes invEnvPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* Rising embers — two tiled layers for depth; seamless via bg-position loop */
#inv-store-root[data-tier="warlord"] .inv-env__embers { display: block; }
#inv-store-root[data-tier="warlord"] .inv-env__embers::before,
#inv-store-root[data-tier="warlord"] .inv-env__embers::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: repeat;
}
#inv-store-root[data-tier="warlord"] .inv-env__embers::before {
	background-image:
		radial-gradient(1.6px 1.6px at 30px 60px,  rgba(255,190,90,.85), transparent),
		radial-gradient(2px 2px     at 150px 200px, rgba(255,150,55,.75), transparent),
		radial-gradient(1.4px 1.4px at 90px 300px,  rgba(255,215,120,.85), transparent),
		radial-gradient(1.8px 1.8px at 210px 120px, rgba(255,170,70,.7),  transparent);
	background-size: 260px 360px;
	animation: invEmberRise 13s linear infinite;
}
#inv-store-root[data-tier="warlord"] .inv-env__embers::after {
	background-image:
		radial-gradient(1.2px 1.2px at 70px 120px,  rgba(255,205,110,.7), transparent),
		radial-gradient(1.6px 1.6px at 180px 320px, rgba(255,140,50,.6),  transparent),
		radial-gradient(1.3px 1.3px at 250px 220px, rgba(255,225,150,.7), transparent);
	background-size: 320px 300px;
	opacity: .7;
	animation: invEmberRise 8s linear infinite;
}
@keyframes invEmberRise {
	from { background-position: 0 0; }
	to   { background-position: 14px -360px; }
}

/* Ornamental gold frame + corner flourishes */
#inv-store-root[data-tier="warlord"] .inv-env__frame {
	display: block;
	inset: 10px;
	border-radius: 16px;
	border: 1px solid rgba(212,165,72,.28);
	box-shadow: inset 0 0 60px rgba(150,70,15,.14), inset 0 0 0 1px rgba(212,165,72,.08);
}
#inv-store-root[data-tier="warlord"] .inv-env__frame::before,
#inv-store-root[data-tier="warlord"] .inv-env__frame::after {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	border: 2px solid rgba(224,178,86,.65);
}
#inv-store-root[data-tier="warlord"] .inv-env__frame::before {
	top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 16px;
}
#inv-store-root[data-tier="warlord"] .inv-env__frame::after {
	bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
	#inv-store-root .inv-env__glow,
	#inv-store-root .inv-env__embers::before,
	#inv-store-root .inv-env__embers::after { animation: none; }
}