/**
 * PlayRox Game Room sign-in gate.
 *
 * A standalone full-screen screen shown at the domain root before the Game
 * Room opens. Self-contained: the theme's header and stylesheet are not
 * loaded behind it, so nothing here can be overridden by newsroom CSS.
 */

.playrox-gate-body {
	margin: 0;
	background: #070714;
}

.pxgate {
	--pxgate-bg: #070714;
	--pxgate-card: rgba( 18, 17, 44, .82 );
	--pxgate-line: rgba( 200, 205, 255, .11 );
	--pxgate-violet: #8B5CF6;
	--pxgate-violet2: #A78BFA;
	--pxgate-ink: #EEF0FF;
	--pxgate-mut: #8B90B8;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 28px 18px calc( 28px + env( safe-area-inset-bottom ) );
	background: var( --pxgate-bg );
	color: var( --pxgate-ink );
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
	box-sizing: border-box;
}

.pxgate *,
.pxgate *::before,
.pxgate *::after {
	box-sizing: border-box;
}

/* ===== Ambient glow ===== */

.pxgate__aura {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.pxgate__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur( 70px );
	opacity: .5;
}

.pxgate__orb--a {
	top: -110px;
	left: -70px;
	width: 300px;
	height: 300px;
	background: rgba( 139, 92, 246, .5 );
}

.pxgate__orb--b {
	bottom: -140px;
	right: -80px;
	width: 320px;
	height: 320px;
	background: rgba( 59, 130, 246, .38 );
}

.pxgate__orb--c {
	top: 42%;
	right: -60px;
	width: 200px;
	height: 200px;
	background: rgba( 236, 72, 153, .22 );
}

/* ===== Sheet ===== */

.pxgate__sheet {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 400px;
	padding: 30px 24px 26px;
	border-radius: 26px;
	background: var( --pxgate-card );
	border: 1px solid var( --pxgate-line );
	backdrop-filter: blur( 20px );
	-webkit-backdrop-filter: blur( 20px );
	box-shadow: 0 24px 70px rgba( 0, 0, 0, .55 );
	text-align: center;
	animation: pxgate-in .4s cubic-bezier( .2, .8, .3, 1 );
}

@keyframes pxgate-in {
	from {
		opacity: 0;
		transform: translateY( 16px ) scale( .98 );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ===== Brand ===== */

.pxgate__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-bottom: 20px;
}

.pxgate__logo {
	max-height: 40px;
	width: auto;
	display: block;
}

.pxgate__mark {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: linear-gradient( 100deg, #8B5CF6, #3B82F6 );
	color: #fff;
	box-shadow: 0 6px 20px rgba( 139, 92, 246, .4 );
}

.pxgate__name {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.2px;
}

/* ===== Copy ===== */

.pxgate__title {
	margin: 0 0 8px;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.5px;
	color: #fff;
}

.pxgate__lede {
	margin: 0 0 22px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var( --pxgate-mut );
}

.pxgate__err {
	margin: 0 0 16px;
	padding: 10px 13px;
	border-radius: 12px;
	background: rgba( 244, 63, 94, .1 );
	border: 1px solid rgba( 244, 63, 94, .32 );
	font-size: 12.5px;
	line-height: 1.5;
	color: #FDA4AF;
}

/* ===== Perks ===== */

.pxgate__perks {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	text-align: left;
}

.pxgate__perks li {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 0;
	font-size: 13px;
	font-weight: 600;
	color: #D5D8F3;
}

.pxgate__perk-ic {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
}

.pxgate__perk-ic--violet {
	color: var( --pxgate-violet2 );
	background: rgba( 139, 92, 246, .14 );
}

.pxgate__perk-ic--gold {
	color: #FACC15;
	background: rgba( 250, 204, 21, .12 );
}

.pxgate__perk-ic--green {
	color: #34D399;
	background: rgba( 52, 211, 153, .12 );
}

/* ===== Buttons ===== */

.pxgate__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pxgate__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 18px;
	border-radius: 15px;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.pxgate__btn:active {
	transform: scale( .975 );
}

.pxgate__btn-ic {
	flex: 0 0 auto;
}

.pxgate__btn--google {
	background: #fff;
	color: #1A1A2E;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, .3 );
}

.pxgate__btn--google:hover {
	background: #F4F5FB;
}

.pxgate__btn--apple {
	background: #0A0A16;
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, .18 );
}

.pxgate__btn--apple:hover {
	background: #14142A;
}

.pxgate__btn--ghost {
	background: rgba( 200, 205, 255, .05 );
	border: 1px solid var( --pxgate-line );
	color: #C9CDF2;
}

.pxgate__btn--ghost:hover {
	background: rgba( 139, 92, 246, .12 );
	border-color: rgba( 139, 92, 246, .4 );
	color: var( --pxgate-violet2 );
}

/* ===== Divider ===== */

.pxgate__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0;
	color: var( --pxgate-mut );
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.pxgate__or::before,
.pxgate__or::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var( --pxgate-line );
}

/* ===== Footnotes ===== */

.pxgate__note {
	margin: 2px 0 0;
	font-size: 11.5px;
	color: var( --pxgate-mut );
}

.pxgate__legal {
	margin: 20px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: var( --pxgate-mut );
}

.pxgate__legal a {
	color: var( --pxgate-violet2 );
	text-decoration: none;
}

.pxgate__news {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 16px;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid var( --pxgate-line );
	font-size: 12px;
	font-weight: 600;
	color: var( --pxgate-mut );
	text-decoration: none;
	transition: color .14s ease, border-color .14s ease;
}

.pxgate__news:hover {
	color: var( --pxgate-violet2 );
	border-color: rgba( 139, 92, 246, .4 );
}

/* Short screens: trim the vertical rhythm so the buttons stay above the
   fold rather than forcing a scroll on the very first screen. */
@media ( max-height: 720px ) {

	.pxgate__sheet {
		padding: 24px 22px 22px;
	}

	.pxgate__title {
		font-size: 22px;
	}

	.pxgate__perks {
		margin-bottom: 16px;
	}

	.pxgate__perks li {
		padding: 5px 0;
	}
}