/* =====================================================================
   Live Activity effect for game cards (.gzf-card)
   -----------------------------------------------------------------------
   - A small pill-shaped notification ("Someone just viewed this game" /
     "Someone liked this game") that appears over the TOP of a card,
     fades/slides in, sits for ~2.5s, then fades/slides out and is
     removed — driven by assets/js/live-activity.js.
   - A small like (heart) button pinned to the card's top-right corner,
     used to trigger the "liked" popup.
   - Everything here is absolutely positioned inside the existing
     .gzf-card (which the parent framework/child.css already sets to
     position: relative), so none of it shifts, resizes, or otherwise
     disturbs the card's own layout — image, title, badges, etc. all stay
     exactly where they are.
   ===================================================================== */

.gzfc-live-pop {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	max-width: calc(100% - 20px);
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	background: var(--gzf-color-card-bg, #1a1a1a);
	border: 1px solid var(--gzf-color-border, rgba(255, 255, 255, .1));
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 77, 28, .08);
	color: var(--gzf-color-heading, #fff);
	font-family: var(--gzf-font-body, inherit);
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-10px) scale(.96);
	transition: opacity .35s ease, transform .35s ease;
}
.gzfc-live-pop.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.gzfc-live-pop.is-leaving {
	opacity: 0;
	transform: translateY(-6px) scale(.98);
}
.gzfc-live-pop-icon {
	flex: none;
	width: 15px;
	height: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--gzf-color-primary, #ff4d1c);
}
.gzfc-live-pop-icon svg { width: 100%; height: 100%; display: block; }
.gzfc-live-pop--like .gzfc-live-pop-icon { color: #ff4d6d; }
.gzfc-live-pop-text { overflow: hidden; text-overflow: ellipsis; }

/* Like button — small heart badge in the card's top-right corner. Only
   injected by JS when the card doesn't already have its own like/favorite
   control (see live-activity.js). */
.gzfc-like-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 6;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(10, 10, 10, .55);
	color: #fff;
	cursor: pointer;
	transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.gzfc-like-btn svg { width: 16px; height: 16px; display: block; }
.gzfc-like-btn:hover,
.gzfc-like-btn:focus-visible { transform: scale(1.08); background: rgba(10, 10, 10, .75); outline: none; }
.gzfc-like-btn.is-liked { color: #ff4d6d; }
.gzfc-like-btn.is-liked svg { fill: currentColor; }
.gzfc-like-btn.is-bump { animation: gzfc-like-bump .4s ease; }

@keyframes gzfc-like-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	60%  { transform: scale(.92); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.gzfc-live-pop {
		transition: opacity .2s linear;
		transform: none !important;
	}
	.gzfc-like-btn { transition: none; }
	.gzfc-like-btn.is-bump { animation: none; }
}

@media (max-width: 480px) {
	.gzfc-live-pop { font-size: .68rem; padding: 5px 10px 5px 7px; }
	.gzfc-like-btn { width: 28px; height: 28px; }
	.gzfc-like-btn svg { width: 14px; height: 14px; }
}