/* Noobz Game — site-wide rotating giveaway announcement.
 * Loads on EVERY front-end page (not just the store screen) so visitors
 * anywhere on the site notice an active giveaway. Fully self-contained —
 * does not depend on assets/frontend.css, so it works even on pages that
 * never load the main store app.
 */
#noobz-gw-toast {
	position: fixed;
	z-index: 2147483000;
	left: 16px;
	right: 16px;
	bottom: 16px;
	max-width: 380px;
	margin: 0 0 0 auto;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #f7f8fb;
	opacity: 0;
	transform: translateY(18px) scale(.98);
	pointer-events: none;
	transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.25,1);
}
#noobz-gw-toast.noobz-gw-in {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

#noobz-gw-toast .noobz-gw-card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: linear-gradient(155deg, #12162a 0%, #0c0e18 70%);
	border: 1px solid rgba(255,184,0,.28);
	box-shadow: 0 18px 45px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02);
	padding: 14px 40px 14px 16px;
	cursor: pointer;
}

/* soft glow sweep, purely decorative */
#noobz-gw-toast .noobz-gw-card::before {
	content: "";
	position: absolute;
	inset: -40% -20%;
	background: radial-gradient(circle at 20% 20%, rgba(255,184,0,.16), transparent 55%);
	animation: noobzGwGlow 5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes noobzGwGlow {
	0%, 100% { transform: translate(0,0) scale(1); opacity: .9; }
	50%      { transform: translate(4%, 3%) scale(1.08); opacity: 1; }
}

#noobz-gw-toast .noobz-gw-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

#noobz-gw-toast .noobz-gw-icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, #ffb800, #ffd35a);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	box-shadow: 0 4px 14px rgba(255,184,0,.35);
	animation: noobzGwPulse 2.4s ease-in-out infinite;
}
@keyframes noobzGwPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

#noobz-gw-toast .noobz-gw-body {
	min-width: 0;
	flex: 1;
}

#noobz-gw-toast .noobz-gw-eyebrow {
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 800;
	color: #ffb800;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}
#noobz-gw-toast .noobz-gw-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #35d39a;
	box-shadow: 0 0 0 0 rgba(53,211,154,.6);
	animation: noobzGwDot 1.8s ease-out infinite;
}
@keyframes noobzGwDot {
	0%   { box-shadow: 0 0 0 0 rgba(53,211,154,.55); }
	70%  { box-shadow: 0 0 0 6px rgba(53,211,154,0); }
	100% { box-shadow: 0 0 0 0 rgba(53,211,154,0); }
}

/* rotating message viewport */
#noobz-gw-toast .noobz-gw-msgs {
	position: relative;
	height: 34px;
	overflow: hidden;
}
#noobz-gw-toast .noobz-gw-msg {
	position: absolute;
	inset: 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: #dfe2ec;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .4s ease, transform .4s ease;
}
#noobz-gw-toast .noobz-gw-msg b {
	color: #fff;
}
#noobz-gw-toast .noobz-gw-msg.noobz-gw-active {
	opacity: 1;
	transform: translateY(0);
}

#noobz-gw-toast .noobz-gw-cta {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 800;
	color: #15120a;
	background: linear-gradient(135deg, #ffb800, #ffd35a);
	padding: 6px 11px;
	border-radius: 99px;
}
#noobz-gw-toast .noobz-gw-cta span {
	transition: transform .2s ease;
}
#noobz-gw-toast .noobz-gw-card:hover .noobz-gw-cta span {
	transform: translateX(3px);
}

#noobz-gw-toast .noobz-gw-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	color: #9aa1b4;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
#noobz-gw-toast .noobz-gw-close:hover {
	background: rgba(255,255,255,.14);
	color: #fff;
}

/* Mobile: full-width bar pinned to the bottom, safe-area aware. */
@media (max-width: 640px) {
	#noobz-gw-toast {
		left: 10px;
		right: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		max-width: none;
	}
	#noobz-gw-toast .noobz-gw-card {
		padding: 12px 36px 12px 12px;
	}
	#noobz-gw-toast .noobz-gw-icon {
		width: 30px;
		height: 30px;
		flex-basis: 30px;
		font-size: 15px;
	}
	#noobz-gw-toast .noobz-gw-msgs {
		height: 32px;
	}
	#noobz-gw-toast .noobz-gw-msg {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#noobz-gw-toast,
	#noobz-gw-toast .noobz-gw-card::before,
	#noobz-gw-toast .noobz-gw-icon,
	#noobz-gw-toast .noobz-gw-dot,
	#noobz-gw-toast .noobz-gw-msg {
		animation: none !important;
		transition: opacity .2s ease !important;
	}
}