/**
 * PlayRox game launcher popup.
 *
 * Only loads on themes that do not provide their own popup. Scoped tightly
 * so it cannot leak into a theme's own overlay styling.
 *
 * @package PlayRox_Platform
 */

#viral-slider-popup.pxl-popup {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: none;
	background: #070714;
}

#viral-slider-popup.pxl-popup.active {
	display: block;
	animation: pxl-in .22s ease;
}

@keyframes pxl-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

body.pxl-open {
	overflow: hidden;
}

.pxl-content {
	position: absolute;
	inset: 0;
}

.pxl-frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.pxl-close {
	position: absolute;
	top: calc( 12px + env( safe-area-inset-top ) );
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba( 255, 255, 255, .16 );
	border-radius: 50%;
	background: rgba( 10, 10, 26, .72 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease;
}

.pxl-close:hover {
	background: rgba( 30, 30, 60, .9 );
}

.pxl-close:active {
	transform: scale( .92 );
}

.pxl-loader {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 14px;
	color: #8B93B8;
	font: 600 13px/1 system-ui, sans-serif;
}

.pxl-loader em {
	font-style: normal;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pxl-spinner {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid rgba( 139, 92, 246, .25 );
	border-top-color: #8B5CF6;
	animation: pxl-spin .8s linear infinite;
}

@keyframes pxl-spin {

	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {

	#viral-slider-popup.pxl-popup.active {
		animation: none;
	}

	.pxl-spinner {
		animation-duration: 2.4s;
	}
}