/**
 * PlayRox Game Room (Dashboard V4)
 *
 * Mobile-first dark arcade UI. Everything is namespaced under .pxg so it can
 * sit inside the theme without touching Classic / V2 / V3 styles.
 */

.pxg {
	--pxg-bg: #070714;
	--pxg-bg2: #0B0B1E;
	--pxg-card: #10102A;
	--pxg-card2: #141433;
	--pxg-glass: rgba( 16, 16, 42, .78 );
	--pxg-line: rgba( 139, 92, 246, .22 );
	--pxg-line-soft: rgba( 200, 205, 255, .09 );
	--pxg-violet: #8B5CF6;
	--pxg-violet2: #A78BFA;
	--pxg-blue: #3B82F6;
	--pxg-cyan: #38BDF8;
	--pxg-crystal: #60A5FA;
	--pxg-gold: #FACC15;
	--pxg-pink: #EC4899;
	--pxg-green: #34D399;
	--pxg-ink: #EEF0FF;
	--pxg-mut: #8B90B8;
	--pxg-grad: linear-gradient( 100deg, #8B5CF6, #3B82F6 );
	--pxg-grad-hot: linear-gradient( 100deg, #EC4899, #8B5CF6 );
	--pxg-r-lg: 22px;
	--pxg-r-md: 16px;
	--pxg-nav: 76px;

	position: relative;
	background: var( --pxg-bg );
	color: var( --pxg-ink );
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	min-height: 100vh;
	overflow: hidden;
	padding-bottom: calc( var( --pxg-nav ) + env( safe-area-inset-bottom ) + 22px );
	-webkit-font-smoothing: antialiased;

	/* Escape whatever centred, padded container the page template puts us
	   in. Without this the room stops at the theme's content width and no
	   child can reach the viewport edge, however wide we make it. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}

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

.pxg button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
}

.pxg a {
	text-decoration: none;
	color: inherit;
}

/*--------------------------------------------------------------
# Ambient background
--------------------------------------------------------------*/

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

.pxg-aura::before,
.pxg-aura::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur( 100px );
	opacity: .22;
}

.pxg-aura::before {
	width: 460px;
	height: 460px;
	background: #7C3AED;
	top: -200px;
	left: -120px;
	animation: pxg-float 16s ease-in-out infinite alternate;
}

.pxg-aura::after {
	width: 400px;
	height: 400px;
	background: #1D4ED8;
	bottom: 12%;
	right: -140px;
	animation: pxg-float 20s ease-in-out infinite alternate-reverse;
}

@keyframes pxg-float {
	from { transform: translate( 0, 0 ); }
	to { transform: translate( 46px, 34px ); }
}

.pxg-stars {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient( 1.2px 1.2px at 22% 10%, rgba( 167, 139, 250, .8 ) 0, transparent 100% ),
		radial-gradient( 1px 1px at 68% 5%, rgba( 96, 165, 250, .7 ) 0, transparent 100% ),
		radial-gradient( 1.4px 1.4px at 86% 22%, rgba( 236, 72, 153, .5 ) 0, transparent 100% ),
		radial-gradient( 1px 1px at 42% 32%, rgba( 167, 139, 250, .5 ) 0, transparent 100% ),
		radial-gradient( 1.2px 1.2px at 12% 46%, rgba( 96, 165, 250, .45 ) 0, transparent 100% );
}

.pxg-wrap {
	position: relative;
	z-index: 1;
	max-width: 540px;
	margin: 0 auto;
	padding: 0 16px;
}

.pxg-i {
	flex: 0 0 auto;
	display: block;
}

/*--------------------------------------------------------------
# Top bar
--------------------------------------------------------------*/

.pxg-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 0 12px;
}

.pxg-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.pxg-brand__logo {
	max-height: 34px;
	width: auto;
}

.pxg-brand__mark {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: var( --pxg-grad );
	box-shadow: 0 6px 22px rgba( 139, 92, 246, .5 );
}

.pxg-brand__txt {
	min-width: 0;
}

.pxg-brand__txt b {
	display: block;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxg-brand__txt em {
	display: block;
	font-style: normal;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var( --pxg-mut );
}

.pxg-top__tools {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
}

.pxg-signin {
	padding: 11px 18px;
	border-radius: 13px;
	background: var( --pxg-grad );
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	box-shadow: 0 6px 20px rgba( 139, 92, 246, .45 );
}

.pxg-pfp {
	position: relative;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	padding: 2px;
	background: #181840;
	cursor: pointer;
	transition: transform .22s cubic-bezier( .34, 1.4, .64, 1 );
	animation: pxg-pfp-bloom 4.6s ease-in-out infinite;
}

/* The ring is its own layer so it can rotate without dragging the photo
   round with it. A conic gradient spun behind a circular mask reads as
   light travelling round the edge.

   The gradient runs to a hard transparent stop rather than all the way
   round, so what you see is a comet of light chasing the rim instead of a
   flat ring that merely turns. */
.pxg-pfp::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 0;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		rgba( 139, 92, 246, .25 ) 60deg,
		var( --pxg-violet ) 170deg,
		var( --pxg-cyan ) 250deg,
		#fff 285deg,
		var( --pxg-cyan ) 310deg,
		transparent 360deg
	);
	animation: pxg-ring-spin 3.4s linear infinite;
}

/* Bloom done with box-shadow rather than a negative-z pseudo: a pseudo
   behind the element depends on the ancestor stacking context and vanished
   under the header background on some layouts. */
@keyframes pxg-pfp-bloom {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba( 139, 92, 246, .34 ), 0 6px 18px -6px rgba( 56, 189, 248, .28 );
	}

	50% {
		box-shadow: 0 0 0 5px rgba( 139, 92, 246, .13 ), 0 8px 24px -4px rgba( 56, 189, 248, .45 );
	}
}

/* Lean in on interaction: the comet speeds up and the bloom tightens. */
.pxg-pfp:hover::before,
.pxg-pfp[aria-expanded="true"]::before {
	animation-duration: 1.3s;
}

.pxg-pfp:hover {
	animation-duration: 1.8s;
	transform: scale( 1.05 );
}

.pxg-pfp:active {
	transform: scale( .95 );
}

.pxg-pfp__in {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: #181840;
}

.pxg-pfp__in img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.pxg-pfp__lvl {
	position: absolute;
	z-index: 2;
	bottom: -6px;
	left: 50%;
	transform: translateX( -50% );
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .04em;
	color: #fff;
	background: var( --pxg-grad );
	border-radius: 6px;
	padding: 2px 6px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba( 59, 130, 246, .5 );
}

/*--------------------------------------------------------------
# Wallet
--------------------------------------------------------------*/

.pxg-wallet {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}

.pxg-pill {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 13px;
	border-radius: 15px;
	background: var( --pxg-glass );
	border: 1px solid var( --pxg-line-soft );
	text-align: left;
	transition: border-color .2s, transform .15s;
}

.pxg-pill:active {
	transform: scale( .97 );
}

.pxg-pill__ic {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 10px;
	display: grid;
	place-items: center;
}

.pxg-pill--coin .pxg-pill__ic {
	background: rgba( 250, 204, 21, .14 );
	color: var( --pxg-gold );
}

.pxg-pill--crystal .pxg-pill__ic {
	background: rgba( 96, 165, 250, .14 );
	color: var( --pxg-crystal );
}

.pxg-pill--time .pxg-pill__ic {
	background: rgba( 56, 189, 248, .14 );
	color: var( --pxg-cyan );
}

.pxg-pill--time .pxg-pill__txt b {
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

/* Nothing banked: dim the figure. The + button already says what to do. */
.pxg-pill--time [data-pxg-secs="0"] {
	color: var( --pxg-mut );
}

.pxg-pill__txt {
	min-width: 0;
}

.pxg-pill__txt b {
	display: block;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pxg-pill__txt small {
	display: block;
	margin-top: 3px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --pxg-mut );
}

.pxg-pill__add {
	margin-left: auto;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: rgba( 139, 92, 246, .18 );
	color: var( --pxg-violet2 );
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}

/*--------------------------------------------------------------
# Search
--------------------------------------------------------------*/

.pxg-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	margin-bottom: 18px;
	border-radius: 15px;
	background: var( --pxg-glass );
	border: 1px solid var( --pxg-line-soft );
	color: var( --pxg-mut );
	transition: border-color .2s, box-shadow .2s;
	z-index: 5;
}

.pxg-search:focus-within {
	border-color: var( --pxg-violet );
	box-shadow: 0 0 0 3px rgba( 139, 92, 246, .15 );
}

.pxg-search input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: 0;
	color: var( --pxg-ink );
	font: 600 14.5px inherit;
}

.pxg-search input::placeholder {
	color: var( --pxg-mut );
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/

.pxg-hero {
	position: relative;
	overflow: hidden;
	padding: 24px 20px 22px;
	margin-bottom: 14px;
	border-radius: var( --pxg-r-lg );
	border: 1px solid var( --pxg-line );
	background: linear-gradient( 135deg, #141238 0%, #1A1048 55%, #0E1C4A 100% );
	box-shadow: 0 24px 60px -20px rgba( 124, 58, 237, .45 );
}

.pxg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient( circle at 85% 15%, rgba( 236, 72, 153, .22 ), transparent 45% ),
		radial-gradient( circle at 90% 80%, rgba( 56, 189, 248, .18 ), transparent 40% );
}

.pxg-hero__art {
	position: absolute;
	top: -8px;
	right: -14px;
	width: 148px;
	opacity: .9;
	pointer-events: none;
}

.pxg-hero__title {
	position: relative;
	margin: 0 0 10px;
	max-width: 72%;
	font-style: italic;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.14;
	letter-spacing: .01em;
}

.pxg-hero__l1,
.pxg-hero__l2,
.pxg-hero__l3 {
	display: block;
}

.pxg-hero__l1 {
	color: #fff;
}

.pxg-hero__l2 {
	font-size: 1.16em;
	background: linear-gradient( 95deg, #C4B5FD, #8B5CF6 50%, #60A5FA );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pxg-hero__l3 {
	font-size: .86em;
	background: linear-gradient( 95deg, #60A5FA, #34D399 );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pxg-hero__sub {
	position: relative;
	margin: 0 0 16px;
	max-width: 34ch;
	font-size: 12.5px;
	line-height: 1.55;
	color: #B9BEE8;
}

.pxg-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: 13px;
	background: linear-gradient( 100deg, #8B5CF6, #38BDF8 );
	color: #fff;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	box-shadow: 0 8px 26px rgba( 56, 189, 248, .45 );
	transition: transform .15s;
}

.pxg-cta:active {
	transform: scale( .95 );
}

/*--------------------------------------------------------------
# Daily bonus
--------------------------------------------------------------*/

.pxg-bonus {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px 15px;
	margin-bottom: 20px;
	border-radius: var( --pxg-r-md );
	border: 1px solid rgba( 236, 72, 153, .3 );
	background: linear-gradient( 100deg, rgba( 236, 72, 153, .14 ), rgba( 139, 92, 246, .12 ) );
}

.pxg-bonus__ic {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: rgba( 236, 72, 153, .16 );
	border: 1px solid rgba( 236, 72, 153, .35 );
}

.pxg-bonus__txt {
	min-width: 0;
}

.pxg-bonus__txt b {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 2px;
}

.pxg-bonus__txt span {
	font-size: 11.5px;
	font-weight: 700;
	color: var( --pxg-pink );
	font-variant-numeric: tabular-nums;
}

.pxg-bonus__btn {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 10px 16px;
	border-radius: 11px;
	background: var( --pxg-grad-hot );
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	box-shadow: 0 5px 16px rgba( 236, 72, 153, .4 );
}

.pxg-bonus__btn[disabled] {
	background: rgba( 200, 205, 255, .1 );
	color: var( --pxg-mut );
	box-shadow: none;
	cursor: default;
}

/*--------------------------------------------------------------
# Section headers
--------------------------------------------------------------*/

.pxg-sec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 12px;
}

.pxg-sec h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --pxg-ink );
}

.pxg-sec__spark {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: var( --pxg-grad );
}

.pxg-sec__all {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var( --pxg-violet2 );
}

.pxg-timer {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 700;
	color: var( --pxg-cyan );
	font-variant-numeric: tabular-nums;
}

.pxg-empty {
	padding: 26px 16px;
	margin: 0 0 22px;
	border-radius: var( --pxg-r-md );
	border: 1px dashed var( --pxg-line-soft );
	text-align: center;
	font-size: 13px;
	color: var( --pxg-mut );
}

/*--------------------------------------------------------------
# Category chips
--------------------------------------------------------------*/

.pxg-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 16px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pxg-chips::-webkit-scrollbar {
	display: none;
}

.pxg-chip {
	flex: 0 0 auto;
	padding: 10px 17px;
	border-radius: 999px;
	background: var( --pxg-glass );
	border: 1px solid var( --pxg-line-soft );
	color: var( --pxg-mut );
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background .2s, color .2s, border-color .2s, transform .15s;
}

.pxg-chip.is-on {
	background: var( --pxg-grad );
	border-color: transparent;
	color: #fff;
	box-shadow: 0 5px 18px rgba( 139, 92, 246, .45 );
}

.pxg-chip:active {
	transform: scale( .94 );
}

/*--------------------------------------------------------------
# Rails and game cards
--------------------------------------------------------------*/

.pxg-rail {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 2px 2px 22px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pxg-rail::-webkit-scrollbar {
	display: none;
}

.pxg-card,
.pxg-cont {
	flex: 0 0 158px;
	border-radius: var( --pxg-r-md );
	overflow: hidden;
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line-soft );
	cursor: pointer;
	transition: transform .15s, border-color .2s, box-shadow .2s;
}

.pxg-card:active,
.pxg-cont:active {
	transform: scale( .95 );
}

.pxg-card:hover,
.pxg-cont:hover,
.pxg-card:focus-visible,
.pxg-cont:focus-visible {
	border-color: var( --pxg-line );
	box-shadow: 0 14px 34px -14px rgba( 139, 92, 246, .45 );
	outline: none;
}

.pxg-card:focus-visible,
.pxg-cont:focus-visible {
	outline: 2px solid var( --pxg-violet2 );
	outline-offset: 2px;
}

.pxg-card__cover,
.pxg-cont__cover {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var( --pxg-card2 );
	overflow: hidden;
}

.pxg-card__img,
.pxg-cont__cover img,
.pxg-card__art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.pxg-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 7px;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

/* Labels sit on top of cover art, so a solid colour fights the artwork.
   Translucent black with white text reads on any image. */
.pxg-badge--new,
.pxg-badge--hot {
	background: rgba( 0, 0, 0, .55 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	border: 1px solid rgba( 255, 255, 255, .16 );
	color: #fff;
	box-shadow: none;
}

.pxg-badge--lock {
	background: rgba( 7, 7, 20, .78 );
	border: 1px solid rgba( 250, 204, 21, .4 );
	color: var( --pxg-gold );
	letter-spacing: .04em;
}

.pxg-card__body,
.pxg-cont__body {
	padding: 10px 11px 12px;
}

.pxg-card__title,
.pxg-cont__body h4 {
	margin: 0 0 5px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxg-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin: 0 0 7px;
	font-size: 9.5px;
}

.pxg-card__cat {
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var( --pxg-mut );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxg-card__plays {
	flex: 0 0 auto;
	font-weight: 700;
	color: var( --pxg-gold );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pxg-card__star {
	flex: 0 0 auto;
	font-weight: 700;
	color: var( --pxg-gold );
	font-variant-numeric: tabular-nums;
}

.pxg-card__cta {
	/* Purely a label: the stretched launch button underneath takes the tap,
	   so the chip cannot become a dead spot in the middle of the card. */
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	padding: 7px 10px;
	border-radius: 9px;
	background: var( --pxg-grad );
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .04em;
	box-shadow: 0 4px 14px -4px rgba( 139, 92, 246, .9 );
}

/* Resuming is a different intent from starting, so it looks different. */
.pxg-card__cta--continue {
	background: rgba( 56, 189, 248, .14 );
	border: 1px solid rgba( 56, 189, 248, .4 );
	color: var( --pxg-cyan );
	box-shadow: none;
}

.pxg-card:hover .pxg-card__cta {
	filter: brightness( 1.1 );
}

.pxg-cont__body span {
	font-size: 10px;
	font-weight: 600;
	color: var( --pxg-mut );
}

/*--------------------------------------------------------------
# Buy play time
--------------------------------------------------------------*/

.pxg-time {
	padding: 16px;
	margin-bottom: 22px;
	border-radius: var( --pxg-r-lg );
	border: 1px solid var( --pxg-line );
	background: linear-gradient( 120deg, rgba( 139, 92, 246, .16 ), rgba( 59, 130, 246, .1 ) );
}

.pxg-time__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 13px;
}

.pxg-time__head h3 {
	margin: 0;
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pxg-time__head span {
	font-size: 11px;
	font-weight: 600;
	color: var( --pxg-mut );
}

.pxg-time__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 9px;
}

.pxg-time__opt {
	padding: 13px 8px;
	border-radius: 14px;
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line-soft );
	text-align: center;
	transition: transform .15s, background .2s, border-color .2s;
}

.pxg-time__opt b {
	display: block;
	margin-bottom: 5px;
	font-size: 15px;
	font-weight: 800;
}

.pxg-time__opt span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	color: var( --pxg-gold );
}

.pxg-time__opt.is-on {
	background: var( --pxg-grad );
	border-color: transparent;
	box-shadow: 0 8px 24px rgba( 139, 92, 246, .5 );
}

.pxg-time__opt.is-on span {
	color: #FDE68A;
}

.pxg-time__opt:active {
	transform: scale( .95 );
}

/*--------------------------------------------------------------
# Panels: missions and leaderboard
--------------------------------------------------------------*/

.pxg-panel {
	padding: 16px;
	margin-bottom: 22px;
	border-radius: var( --pxg-r-lg );
	background: var( --pxg-glass );
	border: 1px solid var( --pxg-line-soft );
}

.pxg-panel .pxg-sec {
	margin-bottom: 14px;
}

.pxg-mission {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var( --pxg-line-soft );
}

.pxg-mission:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pxg-mission__n {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var( --pxg-grad );
}

.pxg-mission__n.is-done {
	background: linear-gradient( 100deg, #34D399, #38BDF8 );
}

.pxg-mission__mid {
	flex: 1;
	min-width: 0;
}

.pxg-mission__mid b {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
}

.pxg-mission__mid b i {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 10.5px;
	font-weight: 700;
	color: var( --pxg-mut );
	font-variant-numeric: tabular-nums;
}

.pxg-mission__bar {
	display: block;
	height: 5px;
	border-radius: 99px;
	background: rgba( 200, 205, 255, .1 );
	overflow: hidden;
}

.pxg-mission__bar i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient( 90deg, var( --pxg-violet ), var( --pxg-cyan ) );
}

/* Missions pay coins now, so the reward reads gold rather than crystal. */
.pxg-mission__rw {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 700;
	color: var( --pxg-gold );
	font-variant-numeric: tabular-nums;
}

/* Already paid today: stepped back, with a tick. */
.pxg-mission__rw.is-paid {
	color: var( --pxg-green );
	opacity: .85;
}

/*--------------------------------------------------------------
# Redeem
--------------------------------------------------------------*/

.pxg-redeem {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
	margin-bottom: 22px;
}

.pxg-rd {
	padding: 15px 12px;
	border-radius: var( --pxg-r-md );
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line-soft );
	text-align: center;
	transition: transform .15s, border-color .2s;
}

.pxg-rd:active {
	transform: scale( .95 );
}

.pxg-rd:hover {
	border-color: var( --pxg-line );
}

.pxg-rd.is-out {
	opacity: .45;
	cursor: default;
}

.pxg-rd__logo {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 auto 9px;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.pxg-rd__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pxg-rd b {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 700;
}

.pxg-rd small {
	display: block;
	margin-bottom: 9px;
	font-size: 10.5px;
	font-weight: 600;
	color: var( --pxg-mut );
}

.pxg-rd__cost {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: 9px;
	background: rgba( 96, 165, 250, .1 );
	border: 1px solid rgba( 96, 165, 250, .28 );
	font-size: 11px;
	font-weight: 700;
	color: var( --pxg-crystal );
	font-variant-numeric: tabular-nums;
}

.pxg-rd__cost.is-afford {
	background: rgba( 52, 211, 153, .12 );
	border-color: rgba( 52, 211, 153, .35 );
	color: var( --pxg-green );
}

/*--------------------------------------------------------------
# Trust strip
--------------------------------------------------------------*/

.pxg-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 8px;
}

.pxg-tr {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border-radius: 14px;
	background: var( --pxg-glass );
	border: 1px solid var( --pxg-line-soft );
}

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

.pxg-tr b {
	display: block;
	font-size: 11.5px;
	font-weight: 800;
}

.pxg-tr em {
	font-style: normal;
	font-size: 9.5px;
	color: var( --pxg-mut );
}

/*--------------------------------------------------------------
# Bottom nav and XP bar
--------------------------------------------------------------*/

.pxg-nav {
	position: fixed;
	left: 50%;
	bottom: calc( env( safe-area-inset-bottom ) + 12px );
	transform: translateX( -50% );
	z-index: 60;
	width: min( 500px, calc( 100% - 24px ) );
	height: var( --pxg-nav );
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-radius: 26px;
	background: rgba( 11, 11, 30, .82 );
	-webkit-backdrop-filter: blur( 24px );
	backdrop-filter: blur( 24px );
	border: 1px solid var( --pxg-line-soft );
	box-shadow: 0 20px 50px rgba( 2, 2, 12, .7 ), inset 0 0 0 1px rgba( 139, 92, 246, .06 );
}

.pxg-nav__item {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
	color: var( --pxg-mut );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	transition: color .2s;
}

.pxg-nav__item svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.9;
	transition: filter .2s;
}

.pxg-nav__item.is-on {
	color: var( --pxg-violet2 );
}

.pxg-nav__item.is-on svg {
	filter: drop-shadow( 0 0 8px rgba( 139, 92, 246, .9 ) );
}

.pxg-nav__item.is-on::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX( -50% );
	width: 28px;
	height: 3px;
	border-radius: 0 0 4px 4px;
	background: var( --pxg-grad );
	box-shadow: 0 2px 14px rgba( 139, 92, 246, .9 );
}

/*--------------------------------------------------------------
# Sign-in sheet
--------------------------------------------------------------*/

.pxg-sheet {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}

.pxg-sheet.is-open {
	display: block;
}

.pxg-sheet__bg {
	position: absolute;
	inset: 0;
	background: rgba( 2, 2, 10, .72 );
	-webkit-backdrop-filter: blur( 5px );
	backdrop-filter: blur( 5px );
	opacity: 0;
	transition: opacity .25s;
}

.pxg-sheet.is-open .pxg-sheet__bg {
	opacity: 1;
}

.pxg-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: 540px;
	margin: 0 auto;
	padding: 14px 22px calc( 28px + env( safe-area-inset-bottom ) );
	border-radius: 28px 28px 0 0;
	border: 1px solid rgba( 139, 92, 246, .22 );
	border-bottom: 0;
	background: linear-gradient( 180deg, #171638, #0C0C22 );
	color: #EEF0FF;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	transform: translateY( 100% );
	transition: transform .32s cubic-bezier( .32, .72, .24, 1 );
}

.pxg-sheet.is-open .pxg-sheet__panel {
	transform: translateY( 0 );
}

.pxg-sheet__grab {
	width: 44px;
	height: 4px;
	margin: 0 auto 20px;
	border-radius: 99px;
	background: rgba( 200, 205, 255, .2 );
}

.pxg-sheet__panel h3 {
	margin: 0 0 6px;
	text-align: center;
	font-size: 21px;
	font-style: italic;
	font-weight: 800;
}

.pxg-sheet__panel h3 em {
	font-style: italic;
	background: linear-gradient( 100deg, #8B5CF6, #3B82F6 );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pxg-sheet__panel > p {
	margin: 0 0 22px;
	text-align: center;
	font-size: 13px;
	line-height: 1.55;
	color: #8B90B8;
}

.pxg-sso {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	width: 100%;
	padding: 15px;
	margin-bottom: 11px;
	border-radius: 15px;
	font-size: 15px;
	font-weight: 800;
	transition: transform .12s;
}

.pxg-sso:active {
	transform: scale( .97 );
}

.pxg-sso--google {
	background: #fff;
	color: #111;
}

.pxg-sso--apple {
	background: #000;
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, .2 );
}

.pxg-sso--guest {
	background: rgba( 200, 205, 255, .08 );
	color: #C7CBF0;
	border: 1px solid rgba( 200, 205, 255, .14 );
	font-size: 13.5px;
}

.pxg-sheet__fine {
	display: block;
	margin-top: 10px;
	text-align: center;
	font-size: 11px;
	line-height: 1.6;
	color: #8B90B8;
}

/*--------------------------------------------------------------
# Toast
--------------------------------------------------------------*/

.pxg-toast {
	position: fixed;
	left: 50%;
	bottom: calc( var( --pxg-nav, 76px ) + 40px );
	transform: translateX( -50% ) translateY( 18px );
	z-index: 100001;
	padding: 12px 18px;
	border-radius: 14px;
	background: #141433;
	border: 1px solid rgba( 139, 92, 246, .22 );
	color: #EEF0FF;
	font: 700 13px 'Inter', sans-serif;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 14px 34px rgba( 0, 0, 0, .55 );
	transition: opacity .3s, transform .3s;
}

.pxg-toast.is-show {
	opacity: 1;
	transform: translateX( -50% ) translateY( 0 );
}

/*--------------------------------------------------------------
# Wider screens
--------------------------------------------------------------*/

@media ( min-width: 560px ) {

	.pxg-card,
	.pxg-cont {
		flex-basis: 178px;
	}

	.pxg-hero__title {
		font-size: 28px;
	}

	.pxg-trust {
		grid-template-columns: repeat( 4, 1fr );
	}
}

@media ( min-width: 900px ) {

	.pxg-wrap {
		max-width: 720px;
	}

	.pxg-redeem {
		grid-template-columns: repeat( 4, 1fr );
	}
}

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

	.pxg *,
	.pxg *::before,
	.pxg *::after,
	.pxg-sheet__panel,
	.pxg-toast {
		animation: none !important;
		transition: none !important;
	}
}

/*--------------------------------------------------------------
# Player stats strip
--------------------------------------------------------------*/

.pxg-stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 10px;
	margin-bottom: 14px;
}

.pxg-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 13px 8px;
	border-radius: var( --pxg-r-md );
	background: var( --pxg-glass );
	border: 1px solid var( --pxg-line-soft );
	text-align: center;
}

.pxg-stat__ic {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-bottom: 3px;
	border-radius: 10px;
}

.pxg-stat__ic--streak {
	background: rgba( 236, 72, 153, .14 );
	color: var( --pxg-pink );
}

.pxg-stat__ic--rank {
	background: rgba( 250, 204, 21, .14 );
	color: var( --pxg-gold );
}

.pxg-stat__ic--xp {
	background: rgba( 139, 92, 246, .16 );
	color: var( --pxg-violet2 );
}

.pxg-stat b {
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pxg-stat em {
	font-style: normal;
	font-size: 9.5px;
	font-weight: 600;
	color: var( --pxg-mut );
}

/*--------------------------------------------------------------
# Daily spin
--------------------------------------------------------------*/

.pxg-spin {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px 15px;
	margin-bottom: 12px;
	border-radius: var( --pxg-r-md );
	border: 1px solid rgba( 250, 204, 21, .22 );
	background: linear-gradient( 100deg, rgba( 250, 204, 21, .1 ), rgba( 236, 72, 153, .08 ) );
}

.pxg-spin__wheel {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
}

.pxg-spin__wheel svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pxg-spin.is-ready .pxg-spin__wheel svg {
	animation: pxg-turn 9s linear infinite;
}

@keyframes pxg-turn {
	to { transform: rotate( 360deg ); }
}

.pxg-spin__txt {
	min-width: 0;
}

.pxg-spin__txt b {
	display: block;
	margin-bottom: 2px;
	font-size: 14px;
	font-weight: 700;
}

.pxg-spin__txt span {
	font-size: 11.5px;
	color: var( --pxg-mut );
}

.pxg-spin__btn {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 10px 18px;
	border-radius: 11px;
	background: linear-gradient( 100deg, #FACC15, #F59E0B );
	color: #3A1F02;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 5px 16px rgba( 250, 204, 21, .35 );
	transition: transform .15s;
}

.pxg-spin__btn:active {
	transform: scale( .95 );
}

.pxg-spin__btn[disabled] {
	background: rgba( 200, 205, 255, .1 );
	color: var( --pxg-mut );
	box-shadow: none;
	cursor: default;
}

/*--------------------------------------------------------------
# Favourite heart
--------------------------------------------------------------*/

.pxg-fav {
	position: absolute;
	top: 7px;
	right: 7px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba( 7, 7, 20, .58 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	border: 1px solid rgba( 232, 236, 255, .14 );
	color: rgba( 238, 240, 255, .75 );
	transition: transform .15s, color .2s, background .2s;
}

.pxg-fav {
	line-height: 0;
	font-size: 0;
	padding: 0;
}

.pxg-fav svg {
	display: block;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linejoin: round;
}

.pxg-fav:active {
	transform: scale( .85 );
}

.pxg-fav.is-on {
	color: #FF6B8B;
	background: rgba( 236, 72, 153, .2 );
	border-color: rgba( 236, 72, 153, .45 );
}

.pxg-fav.is-on svg {
	fill: currentColor;
}

/*--------------------------------------------------------------
# Button press feedback
--------------------------------------------------------------*/

.pxg [aria-busy="true"] {
	opacity: .6;
	pointer-events: none;
}

.pxg-bonus__btn:active,
.pxg-rd:active,
.pxg-pill:active {
	transform: scale( .96 );
}

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

	.pxg-spin.is-ready .pxg-spin__wheel svg {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Card launch control
#
# The launch button is stretched over the whole card so the card
# still feels tappable, while the favourite heart stays a sibling
# above it — a button inside a button broke keyboard and SR use.
--------------------------------------------------------------*/

.pxg-card,
.pxg-cont {
	position: relative;
}

.pxg-card__launch {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: inherit;
	background: none;
}

.pxg-card__launch:focus-visible {
	outline: 2px solid var( --pxg-violet2 );
	outline-offset: 2px;
}

.pxg-fav {
	z-index: 3;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/*--------------------------------------------------------------
# Empty search state
--------------------------------------------------------------*/

.pxg-noresults {
	padding: 30px 18px;
	margin: 0 0 22px;
	border-radius: var( --pxg-r-md );
	border: 1px dashed var( --pxg-line-soft );
	background: rgba( 16, 16, 42, .4 );
	text-align: center;
	font-size: 13.5px;
	color: var( --pxg-mut );
}

/*--------------------------------------------------------------
# Play-time packs are purchases, not a selection
--------------------------------------------------------------*/

.pxg-time__opt.is-best {
	border-color: rgba( 139, 92, 246, .55 );
	box-shadow: 0 6px 20px -8px rgba( 139, 92, 246, .5 );
}

.pxg-time__opt.is-best::after {
	content: "Best value";
	display: block;
	margin-top: 6px;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --pxg-violet2 );
}

.pxg-time__head [data-pxg-credit] {
	color: var( --pxg-cyan );
	font-weight: 700;
}

/*--------------------------------------------------------------
# Hidden rails and headings collapse cleanly
--------------------------------------------------------------*/

.pxg [hidden] {
	display: none !important;
}

/*--------------------------------------------------------------
# Tab panes
--------------------------------------------------------------*/

.pxg-pane {
	animation: pxg-pane-in .28s ease;
}

@keyframes pxg-pane-in {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/*--------------------------------------------------------------
# Profile card
--------------------------------------------------------------*/

.pxg-profcard {
	padding: 24px 18px 22px;
	margin-bottom: 14px;
	border-radius: var( --pxg-r-lg );
	border: 1px solid var( --pxg-line );
	background: linear-gradient( 135deg, rgba( 139, 92, 246, .16 ), rgba( 59, 130, 246, .05 ) ),
		var( --pxg-glass );
	text-align: center;
}

/* Row on phones and up: a stacked avatar wasted the width and pushed
   the level bar off the first screen. */
.pxg-profcard__row {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 460px;
	margin: 0 auto;
	text-align: left;
}

.pxg-profcard__avatar {
	position: relative;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	flex: 0 0 76px;
	border-radius: 50%;
	padding: 3px;
	background: conic-gradient( var( --pxg-violet ), var( --pxg-cyan ), var( --pxg-violet ) );
}

.pxg-profcard__avatar img,
.pxg-profcard__avatar > svg {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var( --pxg-card2 );
	display: block;
}

.pxg-profcard__lvl {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 999px;
	background: var( --pxg-grad );
	border: 2px solid var( --pxg-bg2 );
	font-style: normal;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
}

.pxg-profcard__who {
	flex: 1;
	min-width: 0;
}

.pxg-profcard h3 {
	margin: 0 0 3px;
	font-size: 19px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxg-profcard p {
	margin: 0 0 10px;
	font-size: 12px;
	color: var( --pxg-mut );
}

.pxg-profcard__bar {
	display: block;
	height: 7px;
	border-radius: 99px;
	background: rgba( 2, 2, 12, .45 );
	overflow: hidden;
}

.pxg-profcard__bar i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var( --pxg-grad );
	box-shadow: 0 0 10px rgba( 139, 92, 246, .8 );
}

@media ( max-width: 380px ) {

	.pxg-profcard__row {
		gap: 12px;
	}

	.pxg-profcard__avatar {
		width: 62px;
		height: 62px;
		flex-basis: 62px;
	}

	.pxg-profcard h3 {
		font-size: 17px;
	}
}

.pxg-profcard--guest p {
	max-width: 34ch;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.55;
}

.pxg-profcard--guest .pxg-cta {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Account rows
--------------------------------------------------------------*/

.pxg-account {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 22px;
}

.pxg-account__row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border-radius: var( --pxg-r-md );
	background: var( --pxg-glass );
	border: 1px solid var( --pxg-line-soft );
	transition: border-color .2s, transform .15s;
}

.pxg-account__row:active {
	transform: scale( .98 );
}

.pxg-account__row:hover {
	border-color: var( --pxg-line );
}

.pxg-account__row b {
	font-size: 14px;
	font-weight: 700;
}

.pxg-account__row em {
	font-style: normal;
	font-size: 11px;
	color: var( --pxg-mut );
}

.pxg-account__row--danger b {
	color: #F87171;
}

.pxg-account__row--danger:hover {
	border-color: rgba( 248, 113, 113, .4 );
}

/*--------------------------------------------------------------
# Full-bleed pane (Profile)
#
# Breaks out of the centred .pxg-wrap so the profile header spans
# the viewport; inner sections keep their own gutter.
--------------------------------------------------------------*/

.pxg-pane--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}

/* Wide screens: the banner stays edge to edge, but a 1600px-wide row of
   profile stats would strand the numbers at opposite ends of the display. */
@media ( min-width: 1200px ) {

	.pxg-pane--full > .pxg-profcard {
		padding-top: 44px;
		padding-bottom: 36px;
	}
}

.pxg-pane--full > * {
	padding-left: 16px;
	padding-right: 16px;
}

.pxg-pane--full > .pxg-profcard {
	width: 100%;
	padding: 34px 20px 28px;
	margin-bottom: 20px;
	border-width: 0 0 1px;
	border-radius: 0 0 28px 28px;
	background:
		radial-gradient( circle at 50% -10%, rgba( 139, 92, 246, .3 ), transparent 60% ),
		linear-gradient( 180deg, rgba( 139, 92, 246, .14 ), rgba( 59, 130, 246, .04 ) ),
		var( --pxg-glass );
}

.pxg-pane--full .pxg-profcard__avatar {
	width: 96px;
	height: 96px;
}

/* Beyond phone widths, re-centre the inner content so the profile
   does not stretch into an unreadable band on desktop. */
@media ( min-width: 560px ) {

	.pxg-pane--full > *:not( .pxg-profcard ) {
		max-width: 540px;
		margin-left: auto;
		margin-right: auto;
	}
}

/*--------------------------------------------------------------
# Account dropdown (top bar)
--------------------------------------------------------------*/

.pxg-menu-wrap {
	position: relative;
}

.pxg-pfp[aria-expanded="true"] {
	box-shadow: 0 0 0 3px rgba( 139, 92, 246, .3 ), 0 8px 24px rgba( 139, 92, 246, .35 );
}

.pxg-menu {
	position: absolute;
	top: calc( 100% + 14px );
	right: 0;
	z-index: 70;
	width: min( 300px, calc( 100vw - 32px ) );
	padding: 0;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid var( --pxg-line );
	background: var( --pxg-card );
	box-shadow: 0 28px 60px -12px rgba( 2, 2, 12, .8 ),
		inset 0 0 0 1px rgba( 139, 92, 246, .06 );
	transform-origin: top right;
	animation: pxg-menu-in .2s cubic-bezier( .32, .72, .24, 1 );
}

@keyframes pxg-menu-in {
	from {
		opacity: 0;
		transform: translateY( -10px ) scale( .96 );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.pxg-menu::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 18px;
	width: 13px;
	height: 13px;
	transform: rotate( 45deg );
	background: linear-gradient( 135deg, rgba( 139, 92, 246, .3 ), var( --pxg-card ) );
	border-left: 1px solid var( --pxg-line );
	border-top: 1px solid var( --pxg-line );
}

/* Header carries the same wash as the hero so the menu reads as part
   of the same surface family rather than a stock dropdown. */
.pxg-menu__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 18px 16px 16px;
	background:
		radial-gradient( circle at 88% -20%, rgba( 250, 204, 21, .16 ), transparent 55% ),
		linear-gradient( 135deg, rgba( 139, 92, 246, .22 ), rgba( 59, 130, 246, .06 ) );
	border-bottom: 1px solid var( --pxg-line-soft );
}

.pxg-menu__av {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	padding: 2px;
	overflow: hidden;
	background: conic-gradient( var( --pxg-violet ), var( --pxg-cyan ), var( --pxg-violet ) );
}

.pxg-menu__av img,
.pxg-menu__av svg {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var( --pxg-card2 );
	display: block;
}

.pxg-menu__id {
	flex: 1;
	min-width: 0;
}

.pxg-menu__id b {
	display: block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxg-menu__id em {
	display: block;
	margin: 3px 0 8px;
	font-style: normal;
	font-size: 10.5px;
	font-weight: 600;
	color: var( --pxg-mut );
}

.pxg-menu__bar {
	display: block;
	height: 5px;
	border-radius: 99px;
	background: rgba( 7, 7, 20, .5 );
	overflow: hidden;
}

.pxg-menu__bar i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var( --pxg-grad );
	box-shadow: 0 0 10px rgba( 139, 92, 246, .8 );
}

.pxg-menu__stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
	padding: 14px 16px;
	border-bottom: 1px solid var( --pxg-line-soft );
}

.pxg-menu__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 4px;
	border-radius: 13px;
	background: rgba( 200, 205, 255, .04 );
	border: 1px solid var( --pxg-line-soft );
	text-align: center;
}

.pxg-menu__stat:nth-child( 1 ) {
	color: var( --pxg-gold );
}

.pxg-menu__stat:nth-child( 2 ) {
	color: var( --pxg-crystal );
}

.pxg-menu__stat:nth-child( 3 ) {
	color: var( --pxg-violet2 );
}

.pxg-menu__stat b {
	font-size: 13.5px;
	font-weight: 800;
	color: var( --pxg-ink );
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.pxg-menu__stat em {
	font-style: normal;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --pxg-mut );
}

.pxg-menu__links {
	display: flex;
	flex-direction: column;
	padding: 8px;
}

.pxg-menu__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 12px;
	border-radius: 12px;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: var( --pxg-ink );
	transition: background .18s, color .18s, transform .12s;
}

/* Left accent bar grows on hover — the same neon cue the section
   headings and active nav item use. */
.pxg-menu__link::before {
	content: "";
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var( --pxg-grad );
	opacity: 0;
	transform: scaleY( .4 );
	transition: opacity .18s, transform .18s;
}

.pxg-menu__link:hover,
.pxg-menu__link:focus-visible {
	background: rgba( 139, 92, 246, .12 );
	color: #fff;
	outline: none;
}

.pxg-menu__link:hover::before,
.pxg-menu__link:focus-visible::before {
	opacity: 1;
	transform: scaleY( 1 );
}

.pxg-menu__link:active {
	transform: scale( .98 );
}

.pxg-menu__link--danger {
	margin-top: 4px;
	color: #F87171;
	border-top: 1px solid var( --pxg-line-soft );
	border-radius: 0 0 12px 12px;
	padding-top: 13px;
}

.pxg-menu__link--danger::before {
	background: linear-gradient( 180deg, #F87171, #EF4444 );
}

.pxg-menu__link--danger:hover {
	background: rgba( 248, 113, 113, .12 );
	color: #FCA5A5;
}

/*--------------------------------------------------------------
# One-shot cards retire once claimed
--------------------------------------------------------------*/

.pxg-spin.is-retiring,
.pxg-bonus.is-retiring {
	animation: pxg-retire .42s cubic-bezier( .4, 0, .2, 1 ) forwards;
}

@keyframes pxg-retire {
	0% {
		opacity: 1;
		transform: none;
	}
	35% {
		opacity: 1;
		transform: scale( 1.02 );
	}
	100% {
		opacity: 0;
		transform: scale( .96 );
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		margin-bottom: 0;
		border-width: 0;
	}
}

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

	.pxg-spin.is-retiring,
	.pxg-bonus.is-retiring {
		animation: none;
		display: none;
	}
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.pxg-foot {
	padding: 26px 0 8px;
	margin-top: 6px;
	border-top: 1px solid var( --pxg-line-soft );
	text-align: center;
}

.pxg-foot__copy {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 600;
	color: var( --pxg-mut );
}

.pxg-foot__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 11.5px;
	color: rgba( 127, 168, 145, .6 );
}

.pxg-foot__links a {
	color: var( --pxg-mut );
	font-weight: 600;
	transition: color .18s;
}

.pxg-foot__links a:hover {
	color: var( --pxg-violet2 );
}

/*--------------------------------------------------------------
# Platform notifications bell, skinned for the game room
--------------------------------------------------------------*/

/*
 * The theme pins this as a floating action button in two places:
 *
 *   playrox.css            .playrox-notify                 { position: fixed; right: 16px; bottom: 78px }
 *   playrox-dashboard.css  body.playrox-player .playrox-notify { bottom: 74px; z-index: 999991 }
 *
 * The reset used to be written as `.pxg .playrox-notify`, specificity
 * (0,2,0) — which loses to the dashboard rule's (0,2,1) no matter what
 * order the files load in. So `bottom: 74px` kept winning, and on a
 * relatively-positioned box that shifts it 74px UP: the bell rendered
 * correctly and then sat above the top bar, off screen.
 *
 * Scoping through the toolbar takes it to (0,3,0), which wins cleanly
 * without resorting to !important.
 */
.pxg .pxg-top__tools .playrox-notify {
	position: relative;
	right: auto;
	bottom: auto;
	left: auto;
	top: auto;
	z-index: auto;
	flex: 0 0 auto;
	display: block;
}

/* Belt and braces: the popup hides the floating bell with a sibling
   selector, which must not reach the one built into the header. */
#viral-slider-popup.active ~ .pxg .pxg-top__tools .playrox-notify {
	display: block;
}

.pxg .playrox-notify__bell {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	min-width: 0;
	flex: 0 0 40px;
	padding: 0;
	border-radius: 13px;
	background: var( --pxg-glass );
	border: 1px solid var( --pxg-line-soft );
	color: var( --pxg-mut );
	font-size: 16px;
	cursor: pointer;
	transition: color .2s, border-color .2s, box-shadow .2s;
}

.pxg .playrox-notify__bell:hover,
.pxg .playrox-notify__bell[aria-expanded="true"] {
	color: var( --pxg-violet2 );
	border-color: var( --pxg-line );
	box-shadow: 0 0 0 3px rgba( 139, 92, 246, .16 );
}

.pxg .playrox-notify__badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 99px;
	display: grid;
	place-items: center;
	background: var( --pxg-grad-hot );
	border: 2px solid var( --pxg-bg );
	color: #fff;
	font-size: 9.5px;
	font-weight: 800;
	line-height: 1;
}

.pxg .playrox-notify__panel {
	position: absolute;
	top: calc( 100% + 14px );
	right: 0;
	z-index: 70;
	width: min( 300px, calc( 100vw - 32px ) );
	max-height: 380px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 22px;
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line );
	box-shadow: 0 28px 60px -12px rgba( 2, 2, 12, .8 );
	animation: pxg-menu-in .2s cubic-bezier( .32, .72, .24, 1 );
}

.pxg .playrox-notify__head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	background: linear-gradient( 135deg, rgba( 139, 92, 246, .22 ), rgba( 59, 130, 246, .06 ) ),
		var( --pxg-card );
	border-bottom: 1px solid var( --pxg-line-soft );
}

.pxg .playrox-notify__head strong {
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --pxg-ink );
}

.pxg .playrox-notify__readall {
	padding: 0;
	background: none;
	border: 0;
	color: var( --pxg-violet2 );
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
}

.pxg .playrox-notify__list {
	padding: 8px;
}

.pxg .playrox-notify__item {
	display: block;
	padding: 11px 12px;
	border-radius: 12px;
	color: var( --pxg-ink );
	font-size: 12.5px;
	line-height: 1.45;
	transition: background .18s;
}

.pxg .playrox-notify__item:hover {
	background: rgba( 139, 92, 246, .1 );
}

.pxg .playrox-notify__item.is-unread {
	background: rgba( 139, 92, 246, .12 );
	border-left: 3px solid var( --pxg-violet );
}

.pxg .playrox-notify__item strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 2px;
}

.pxg .playrox-notify__item small,
.pxg .playrox-notify__item time {
	display: block;
	margin-top: 3px;
	font-size: 10.5px;
	color: var( --pxg-mut );
}

.pxg .playrox-empty {
	padding: 26px 16px;
	margin: 0;
	text-align: center;
	font-size: 12.5px;
	color: var( --pxg-mut );
}

/*--------------------------------------------------------------
# Bell glyph
#
# render_bell() emits a Font Awesome <i>. If that stylesheet is
# blocked, slow, or the kit changes, the button renders empty.
# Paint the icon from a mask instead so it is always there.
--------------------------------------------------------------*/

.pxg .playrox-notify__bell i,
.pxg .playrox-notify__bell .fa-bell {
	display: none;
}

/* The bell is inline SVG in the markup now, so it never depends on an icon
   font. Size it here and let the button's colour drive it. */
.pxg .playrox-notify__bell svg {
	width: 19px;
	height: 19px;
}

/*--------------------------------------------------------------
# Page chrome on the Game Room
#
# The room is a full-screen app surface with its own footer and
# bottom nav. The site's footer widget areas and colophon sit
# underneath it looking like a mistake, so they are hidden here
# rather than in the template — reversible, and no other page
# is affected.
--------------------------------------------------------------*/

body.playrox-gameroom-page .footer-outer,
body.playrox-gameroom-page .colophon-outer {
	display: none;
}

/* Nothing should sit between the room and the edges of the window. */
body.playrox-gameroom-page {
	overflow-x: hidden;
}

/*--------------------------------------------------------------
# Coin top-up modal, reskinned for the Game Room
#
# The modal is built by playrox-economy.js and appended to <body>,
# so it sits outside .pxg and cannot inherit the room's tokens.
# Everything here is scoped to the Game Room body class: other
# dashboards keep the original economy styling untouched.
--------------------------------------------------------------*/

body.playrox-gameroom-page .plxe-modal {
	--pxg-bg: #070714;
	--pxg-card: #10102A;
	--pxg-card2: #141433;
	--pxg-line: rgba( 139, 92, 246, .22 );
	--pxg-line-soft: rgba( 200, 205, 255, .09 );
	--pxg-ink: #EEF0FF;
	--pxg-mut: #8B90B8;
	--pxg-gold: #FACC15;
	--pxg-grad: linear-gradient( 100deg, #8B5CF6, #3B82F6 );

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.playrox-gameroom-page .plxe-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 2, 2, 12, .74 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	opacity: 0;
	transition: opacity .25s;
}

body.playrox-gameroom-page .plxe-modal.is-open .plxe-modal__backdrop {
	opacity: 1;
}

/* Bottom sheet on phones — the same gesture language as the sign-in
   sheet, rather than a centred desktop dialog dropped onto mobile. */
body.playrox-gameroom-page .plxe-modal__box {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 88vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px 20px calc( 24px + env( safe-area-inset-bottom ) );
	border: 1px solid var( --pxg-line );
	border-bottom: 0;
	border-radius: 28px 28px 0 0;
	background:
		radial-gradient( circle at 50% -8%, rgba( 250, 204, 21, .16 ), transparent 55% ),
		linear-gradient( 180deg, #171638, #0C0C22 );
	box-shadow: 0 -20px 60px rgba( 2, 2, 12, .7 );
	color: var( --pxg-ink );
	transform: translateY( 100% );
	transition: transform .32s cubic-bezier( .32, .72, .24, 1 );
}

body.playrox-gameroom-page .plxe-modal.is-open .plxe-modal__box {
	transform: translateY( 0 );
}

/* Grab handle, drawn rather than added to the markup. */
body.playrox-gameroom-page .plxe-modal__box::before {
	content: "";
	display: block;
	width: 44px;
	height: 4px;
	margin: -6px auto 18px;
	border-radius: 99px;
	background: rgba( 200, 205, 255, .2 );
}

body.playrox-gameroom-page .plxe-modal__head {
	margin-bottom: 6px;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}

body.playrox-gameroom-page .plxe-modal__head h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: .01em;
	color: var( --pxg-ink );
}

body.playrox-gameroom-page .plxe-modal__text {
	margin: 0 0 18px;
	text-align: center;
	font-size: 13px;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-coin {
	color: var( --pxg-gold );
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

body.playrox-gameroom-page .plxe-fieldlabel {
	display: block;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --pxg-mut );
}

/* Bundles */
body.playrox-gameroom-page .plxe-packs {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 9px;
	margin-bottom: 18px;
}

body.playrox-gameroom-page .plxe-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 16px 8px 13px;
	border-radius: 16px;
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line-soft );
	color: var( --pxg-ink );
	cursor: pointer;
	transition: border-color .2s, transform .15s, box-shadow .2s;
}

body.playrox-gameroom-page .plxe-pack:active {
	transform: scale( .96 );
}

body.playrox-gameroom-page .plxe-pack.is-active {
	border-color: transparent;
	background: var( --pxg-grad );
	box-shadow: 0 10px 26px -8px rgba( 139, 92, 246, .7 );
}

body.playrox-gameroom-page .plxe-pack__coins {
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

body.playrox-gameroom-page .plxe-pack__unit {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-pack.is-active .plxe-pack__unit {
	color: rgba( 255, 255, 255, .78 );
}

body.playrox-gameroom-page .plxe-pack__price {
	margin-top: 7px;
	font-size: 12px;
	font-weight: 700;
	color: var( --pxg-gold );
	font-variant-numeric: tabular-nums;
}

body.playrox-gameroom-page .plxe-pack.is-active .plxe-pack__price {
	color: #FDE68A;
}

body.playrox-gameroom-page .plxe-pack__tag {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX( -50% );
	padding: 3px 8px;
	border-radius: 7px;
	background: linear-gradient( 100deg, #FACC15, #F59E0B );
	color: #3A1F02;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Payment methods */
body.playrox-gameroom-page .plxe-methods {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 18px;
}

body.playrox-gameroom-page .plxe-method {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 13px 14px;
	border-radius: 14px;
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line-soft );
	color: var( --pxg-mut );
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: .2s;
}

body.playrox-gameroom-page .plxe-method.is-active {
	border-color: #8B5CF6;
	background: rgba( 139, 92, 246, .14 );
	color: var( --pxg-ink );
}

/* Total */
body.playrox-gameroom-page .plxe-topsum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba( 139, 92, 246, .1 );
	border: 1px solid var( --pxg-line );
	font-size: 13px;
	font-weight: 700;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-topsum b {
	font-size: 17px;
	font-weight: 800;
	color: var( --pxg-ink );
	font-variant-numeric: tabular-nums;
}

/* Actions */
body.playrox-gameroom-page .plxe-modal__actions {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

body.playrox-gameroom-page .plxe-btn {
	flex: 1;
	padding: 15px 18px;
	border-radius: 15px;
	border: 0;
	font-size: 14.5px;
	font-weight: 800;
	cursor: pointer;
	transition: transform .14s, background .2s;
}

body.playrox-gameroom-page .plxe-btn:active {
	transform: scale( .97 );
}

body.playrox-gameroom-page .plxe-btn--ghost {
	flex: 0 0 auto;
	min-width: 110px;
	background: rgba( 200, 205, 255, .07 );
	border: 1px solid var( --pxg-line-soft );
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-btn--play,
body.playrox-gameroom-page .plxe-btn--primary {
	background: var( --pxg-grad );
	color: #fff;
	box-shadow: 0 10px 28px -8px rgba( 139, 92, 246, .8 );
}

/* Coming soon / empty states */
body.playrox-gameroom-page .plxe-soon {
	padding: 30px 18px;
	margin-bottom: 16px;
	border-radius: 18px;
	background: var( --pxg-card );
	border: 1px dashed var( --pxg-line-soft );
	text-align: center;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-soon i {
	display: block;
	margin-bottom: 10px;
	font-size: 26px;
	color: var( --pxg-gold );
}

body.playrox-gameroom-page .plxe-soon b {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 800;
	color: var( --pxg-ink );
}

body.playrox-gameroom-page .plxe-soon p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
}

body.playrox-gameroom-page .plxe-warn {
	color: #FCA5A5;
	font-size: 12.5px;
}

body.playrox-gameroom-page .plxe-loading__spin {
	border-top-color: #8B5CF6;
}

@media ( min-width: 560px ) {

	body.playrox-gameroom-page .plxe-modal {
		align-items: center;
	}

	body.playrox-gameroom-page .plxe-modal__box {
		border-radius: 26px;
		border-bottom: 1px solid var( --pxg-line );
		transform: translateY( 16px ) scale( .98 );
	}

	body.playrox-gameroom-page .plxe-modal.is-open .plxe-modal__box {
		transform: none;
	}

	body.playrox-gameroom-page .plxe-modal__box::before {
		display: none;
	}
}

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

	body.playrox-gameroom-page .plxe-modal__box,
	body.playrox-gameroom-page .plxe-modal__backdrop {
		transition: none;
	}
}

/* Other panels that use the same modal shell — payment progress, the
   order list and the prize shop. Without these the sheet would be half
   reskinned and half legacy the moment a player opened one. */

body.playrox-gameroom-page .plxe-modal__title {
	margin: 0 0 6px;
	text-align: center;
	font-size: 20px;
	font-weight: 800;
	font-style: italic;
	color: var( --pxg-ink );
}

body.playrox-gameroom-page .plxe-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 34px 18px;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-loading__text {
	font-size: 13px;
	font-weight: 600;
}

body.playrox-gameroom-page .plxe-orders {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 16px;
}

body.playrox-gameroom-page .plxe-order {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border-radius: 15px;
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line-soft );
}

body.playrox-gameroom-page .plxe-order__ic {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: rgba( 139, 92, 246, .14 );
	color: #A78BFA;
}

body.playrox-gameroom-page .plxe-order__main {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
}

body.playrox-gameroom-page .plxe-order__price {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 800;
	color: var( --pxg-gold );
	font-variant-numeric: tabular-nums;
}

body.playrox-gameroom-page .plxe-orders__empty,
body.playrox-gameroom-page .plxe-shop__bal {
	padding: 24px 16px;
	text-align: center;
	font-size: 12.5px;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-shop__bal {
	padding: 0 0 16px;
	font-weight: 700;
}

body.playrox-gameroom-page .plxe-prizes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
	margin-bottom: 16px;
}

body.playrox-gameroom-page .plxe-prize {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line-soft );
	transition: border-color .2s, transform .15s;
}

body.playrox-gameroom-page .plxe-prize:active {
	transform: scale( .96 );
}

body.playrox-gameroom-page .plxe-prize__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	background: var( --pxg-card2 );
}

body.playrox-gameroom-page .plxe-prize__img--none {
	display: grid;
	place-items: center;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-prize__body {
	padding: 11px 12px;
	font-size: 13px;
	font-weight: 700;
}

body.playrox-gameroom-page .plxe-prize__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 12px 12px;
}

body.playrox-gameroom-page .plxe-prize__cost {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 9px;
	background: rgba( 96, 165, 250, .1 );
	border: 1px solid rgba( 96, 165, 250, .28 );
	color: #60A5FA;
	font-size: 11px;
	font-weight: 700;
}

body.playrox-gameroom-page .plxe-prize__stock,
body.playrox-gameroom-page .plxe-prize__oos {
	font-size: 10.5px;
	font-weight: 700;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-prize__oos {
	color: #FCA5A5;
}

/*
 * The container stacks; only each row is a two-column flex line. Styling
 * both with the same rule turned the four rows into four side-by-side
 * columns, which is what squashed the text on narrow screens.
 */
body.playrox-gameroom-page .plxe-spend {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 18px;
	border-radius: 16px;
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line-soft );
	overflow: hidden;
}

body.playrox-gameroom-page .plxe-spend__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 15px;
	border-bottom: 1px solid var( --pxg-line-soft );
	font-size: 13px;
	line-height: 1.35;
}

body.playrox-gameroom-page .plxe-spend__row:last-of-type {
	border-bottom: 0;
}

body.playrox-gameroom-page .plxe-spend__row span {
	flex: 1 1 auto;
	min-width: 0;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .plxe-spend__row b {
	flex: 0 0 auto;
	text-align: right;
	font-weight: 800;
	white-space: nowrap;
}

body.playrox-gameroom-page .plxe-spend__bal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 15px;
	background: rgba( 139, 92, 246, .12 );
	border-top: 1px solid var( --pxg-line );
	font-size: 13px;
	font-weight: 700;
	color: var( --pxg-mut );
	text-align: left;
}

/* Very narrow phones: let each row wrap rather than crush the value. */
@media ( max-width: 360px ) {

	body.playrox-gameroom-page .plxe-spend__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
	}

	body.playrox-gameroom-page .plxe-spend__row b {
		text-align: left;
	}
}

body.playrox-gameroom-page .plxe-spend__bal {
	font-weight: 800;
	color: #60A5FA;
	font-variant-numeric: tabular-nums;
}

body.playrox-gameroom-page .plxe-pcoin {
	color: #60A5FA;
	font-weight: 800;
}

body.playrox-gameroom-page .plxe-qtychips {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

/*--------------------------------------------------------------
# Top-up loading skeleton
#
# Mirrors the real sheet's layout so the swap to live content is
# a fill, not a jump.
--------------------------------------------------------------*/

body.playrox-gameroom-page .pxg-skel__line,
body.playrox-gameroom-page .pxg-skel__pack {
	display: block;
	border-radius: 10px;
	background:
		linear-gradient( 100deg,
			rgba( 200, 205, 255, .05 ) 30%,
			rgba( 139, 92, 246, .16 ) 50%,
			rgba( 200, 205, 255, .05 ) 70% );
	background-size: 220% 100%;
	animation: pxg-shimmer 1.4s ease-in-out infinite;
}

@keyframes pxg-shimmer {
	from { background-position: 140% 0; }
	to { background-position: -40% 0; }
}

body.playrox-gameroom-page .pxg-skel__line--mid {
	width: 62%;
	height: 13px;
	margin: 0 auto 22px;
}

body.playrox-gameroom-page .pxg-skel__line--wide {
	width: 100%;
	height: 46px;
	border-radius: 14px;
	margin-bottom: 12px;
}

body.playrox-gameroom-page .pxg-skel__line--bar {
	width: 100%;
	height: 54px;
	border-radius: 16px;
	margin-bottom: 16px;
}

body.playrox-gameroom-page .pxg-skel__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 9px;
	margin-bottom: 18px;
}

body.playrox-gameroom-page .pxg-skel__pack {
	height: 92px;
	border-radius: 16px;
}

/* Stagger the shimmer so it reads as loading rather than a flash. */
body.playrox-gameroom-page .pxg-skel__pack:nth-child( 2 ) {
	animation-delay: .12s;
}

body.playrox-gameroom-page .pxg-skel__pack:nth-child( 3 ) {
	animation-delay: .24s;
}

body.playrox-gameroom-page .pxg-skel__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	padding: 4px 0 2px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --pxg-mut );
}

body.playrox-gameroom-page .pxg-skel__note::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba( 200, 205, 255, .18 );
	border-top-color: #8B5CF6;
	animation: pxg-spin .7s linear infinite;
}

@keyframes pxg-spin {
	to { transform: rotate( 360deg ); }
}

/* Taking too long: stop the shimmer so the sheet does not look alive
   when nothing is actually arriving. */
body.playrox-gameroom-page .plxe-modal.is-stalled .pxg-skel__line,
body.playrox-gameroom-page .plxe-modal.is-stalled .pxg-skel__pack {
	animation: none;
	opacity: .5;
}

body.playrox-gameroom-page .plxe-modal.is-stalled .pxg-skel__note {
	color: #FCA5A5;
}

body.playrox-gameroom-page .plxe-modal.is-stalled .pxg-skel__note::before {
	display: none;
}

body.playrox-gameroom-page .pxg-skel__note .plxe-btn {
	flex: 0 0 auto;
	min-width: 0;
	padding: 8px 16px;
	font-size: 12.5px;
}

/* Pressed state on the coin pill itself, so the tap registers even
   before the sheet paints. */
body.playrox-gameroom-page .pxg-pill--coin:active {
	border-color: var( --pxg-line );
	background: rgba( 139, 92, 246, .12 );
}

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

	body.playrox-gameroom-page .pxg-skel__line,
	body.playrox-gameroom-page .pxg-skel__pack,
	body.playrox-gameroom-page .pxg-skel__note::before {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Tab-dependent chrome
--------------------------------------------------------------*/

.pxg-hero[hidden],
.pxg-search[hidden] {
	display: none !important;
}

/* With the hero gone the profile banner meets the top bar directly,
   so it needs its own breathing room above the avatar. */
.pxg[data-pxg-tab="profile"] .pxg-pane--full > .pxg-profcard {
	margin-top: 4px;
	padding-top: 30px;
}

/*--------------------------------------------------------------
# Seamless page surface
#
# The room is full-bleed, but the page it sits in still has its
# own background, wrapper padding and header/footer spacing. Any
# of those showing above or below reads as a stray coloured band
# rather than part of the design.
--------------------------------------------------------------*/

body.playrox-gameroom-page {
	background: #070714; /* matches --pxg-bg; body cannot read the room's scope */
	margin: 0;
}

/* Zero the theme's content wrappers around the room. Scoped to this
   page only, so ordinary posts keep their layout. */
body.playrox-gameroom-page .site-content,
body.playrox-gameroom-page .content-outer,
body.playrox-gameroom-page .content-inner,
body.playrox-gameroom-page .main-outer,
body.playrox-gameroom-page .main-inner,
body.playrox-gameroom-page .wrapper,
body.playrox-gameroom-page .page-content,
body.playrox-gameroom-page .entry-content,
body.playrox-gameroom-page article,
body.playrox-gameroom-page main {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

/* Page titles and post meta have no place on an app surface. */
body.playrox-gameroom-page .entry-header,
body.playrox-gameroom-page .page-header,
body.playrox-gameroom-page .breadcrumb,
body.playrox-gameroom-page .breadcrumbs {
	display: none;
}

/* Fill the window exactly: 100vh ignores mobile browser chrome and
   leaves a strip under the nav when the URL bar collapses. */
.pxg {
	min-height: 100vh;
	min-height: 100dvh;
}

/* The WordPress admin bar shifts everything down 32px (46px on
   mobile); without this the room's top edge sits under a grey band. */
body.admin-bar.playrox-gameroom-page .pxg {
	min-height: calc( 100dvh - 32px );
}

@media screen and ( max-width: 782px ) {

	body.admin-bar.playrox-gameroom-page .pxg {
		min-height: calc( 100dvh - 46px );
	}
}

/*--------------------------------------------------------------
# Page canvas
#
# PlayRox_Profile wraps the dashboard in .playrox-page-canvas,
# which carries `padding: 30px 16px 60px`, `min-height: 70vh` and
# a light gradient. V2 and V3 each override it; V4 never did, so
# that padding was the empty band above and below the room and
# the light strip behind it.
#
# PlayRox_Profile::hide_theme_chrome() also prints html/body
# background with !important, so matching it needs the same
# weight — otherwise the room sits on the profile page colour.
--------------------------------------------------------------*/

.playrox-page-canvas:has( .pxg ),
body.playrox-gameroom-page .playrox-page-canvas {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.playrox-gameroom-page,
html:has( body.playrox-gameroom-page ) {
	background: #070714 !important;
}

/* The room provides its own scroll surface; nothing above it should
   contribute height. */
body.playrox-gameroom-page .container-inner,
body.playrox-gameroom-page .content-outer,
body.playrox-gameroom-page .main-outer {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	min-height: 0 !important;
}

/*--------------------------------------------------------------
# Leaderboard
--------------------------------------------------------------*/

/* Period switcher */
.pxg-seg {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 4px;
	padding: 4px;
	margin: 4px 0 20px;
	border-radius: 16px;
	background: rgba( 200, 205, 255, .05 );
	border: 1px solid var( --pxg-line-soft );
}

.pxg-seg__btn {
	padding: 11px 6px;
	border-radius: 12px;
	color: var( --pxg-mut );
	font-size: 12.5px;
	font-weight: 700;
	transition: background .2s, color .2s;
}

.pxg-seg__btn.is-on {
	background: var( --pxg-grad );
	color: #fff;
	box-shadow: 0 6px 18px -6px rgba( 139, 92, 246, .9 );
}

/* Podium */
.pxg-podium {
	display: grid;
	grid-template-columns: 1fr 1.12fr 1fr;
	align-items: end;
	gap: 8px;
	margin-bottom: 18px;
}

.pxg-pod {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	text-align: center;
}

.pxg-pod__crown {
	color: var( --pxg-gold );
	filter: drop-shadow( 0 3px 8px rgba( 250, 204, 21, .6 ) );
	animation: pxg-bob 2.6s ease-in-out infinite;
}

@keyframes pxg-bob {
	0%, 100% { transform: translateY( 0 ); }
	50% { transform: translateY( -3px ); }
}

.pxg-pod__ring {
	position: relative;
	display: grid;
	place-items: center;
	padding: 3px;
	border-radius: 50%;
	background: rgba( 200, 205, 255, .16 );
}

.pxg-pod__av {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient( 120deg, #8B5CF6, #38BDF8 );
}

.pxg-pod__av[data-pxg-seed="1"] { background: linear-gradient( 120deg, #EC4899, #8B5CF6 ); }
.pxg-pod__av[data-pxg-seed="2"] { background: linear-gradient( 120deg, #F59E0B, #EF4444 ); }
.pxg-pod__av[data-pxg-seed="3"] { background: linear-gradient( 120deg, #10B981, #38BDF8 ); }
.pxg-pod__av[data-pxg-seed="4"] { background: linear-gradient( 120deg, #3B82F6, #60A5FA ); }
.pxg-pod__av[data-pxg-seed="5"] { background: linear-gradient( 120deg, #A78BFA, #EC4899 ); }

.pxg-pod__badge {
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX( -50% );
	padding: 2px 8px;
	border-radius: 8px;
	font-style: normal;
	font-size: 10px;
	font-weight: 800;
	color: #fff;
	background: #2A2A50;
	border: 1px solid var( --pxg-line-soft );
}

.pxg-pod--1 .pxg-pod__ring {
	background: linear-gradient( 135deg, #FACC15, #F59E0B );
	box-shadow: 0 0 24px rgba( 250, 204, 21, .45 );
}

.pxg-pod--1 .pxg-pod__av {
	width: 62px;
	height: 62px;
	font-size: 24px;
}

.pxg-pod--1 .pxg-pod__badge {
	background: linear-gradient( 100deg, #FACC15, #F59E0B );
	color: #3A1F02;
	border-color: transparent;
}

.pxg-pod--2 .pxg-pod__ring { background: linear-gradient( 135deg, #E5E7EB, #9CA3AF ); }
.pxg-pod--3 .pxg-pod__ring { background: linear-gradient( 135deg, #F9A8A0, #C2664F ); }

.pxg-pod__name {
	margin-top: 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxg-pod__score {
	font-size: 12px;
	font-weight: 800;
	color: var( --pxg-crystal );
	font-variant-numeric: tabular-nums;
}

.pxg-pod--1 .pxg-pod__score {
	color: var( --pxg-gold );
}

.pxg-pod__streak {
	font-style: normal;
	font-size: 9.5px;
	color: var( --pxg-mut );
}

/* The riser: height encodes the placing. */
.pxg-pod__block {
	width: 100%;
	margin-top: 8px;
	border-radius: 14px 14px 0 0;
	border: 1px solid var( --pxg-line-soft );
	border-bottom: 0;
}

.pxg-pod--1 .pxg-pod__block {
	height: 84px;
	background: linear-gradient( 180deg, rgba( 250, 204, 21, .35 ), rgba( 250, 204, 21, .05 ) );
	border-color: rgba( 250, 204, 21, .4 );
}

.pxg-pod--2 .pxg-pod__block {
	height: 60px;
	background: linear-gradient( 180deg, rgba( 200, 205, 255, .18 ), rgba( 200, 205, 255, .03 ) );
}

.pxg-pod--3 .pxg-pod__block {
	height: 46px;
	background: linear-gradient( 180deg, rgba( 194, 102, 79, .3 ), rgba( 194, 102, 79, .04 ) );
	border-color: rgba( 194, 102, 79, .35 );
}

.pxg-pod.is-me .pxg-pod__name {
	color: var( --pxg-violet2 );
}

/* Standings rows */
.pxg-ranks {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 16px;
}

.pxg-rank {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	border-radius: var( --pxg-r-md );
	background: var( --pxg-glass );
	border: 1px solid var( --pxg-line-soft );
}

.pxg-rank__pos {
	flex: 0 0 auto;
	min-width: 30px;
	font-size: 12.5px;
	font-weight: 800;
	color: var( --pxg-mut );
	font-variant-numeric: tabular-nums;
}

.pxg-rank__av {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient( 120deg, #8B5CF6, #38BDF8 );
}

.pxg-rank__av[data-pxg-seed="1"] { background: linear-gradient( 120deg, #EC4899, #8B5CF6 ); }
.pxg-rank__av[data-pxg-seed="2"] { background: linear-gradient( 120deg, #F59E0B, #EF4444 ); }
.pxg-rank__av[data-pxg-seed="3"] { background: linear-gradient( 120deg, #10B981, #38BDF8 ); }
.pxg-rank__av[data-pxg-seed="4"] { background: linear-gradient( 120deg, #3B82F6, #60A5FA ); }
.pxg-rank__av[data-pxg-seed="5"] { background: linear-gradient( 120deg, #A78BFA, #EC4899 ); }

.pxg-rank__id {
	flex: 1;
	min-width: 0;
}

.pxg-rank__id b {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxg-rank__you {
	flex: 0 0 auto;
	padding: 2px 7px;
	border-radius: 6px;
	font-style: normal;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: .08em;
	color: #fff;
	background: var( --pxg-grad );
}

.pxg-rank__streak {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 3px;
	font-style: normal;
	font-size: 10.5px;
	font-weight: 600;
	color: #FB923C;
}

.pxg-rank__score {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 800;
	color: var( --pxg-mut );
	font-variant-numeric: tabular-nums;
}

.pxg-rank.is-me {
	background: rgba( 139, 92, 246, .14 );
	border-color: var( --pxg-line );
}

.pxg-rank.is-me .pxg-rank__score,
.pxg-rank.is-me .pxg-rank__pos {
	color: var( --pxg-violet2 );
}

/* Sticky standing bar */
.pxg-standing {
	position: sticky;
	bottom: calc( var( --pxg-nav ) + env( safe-area-inset-bottom ) + 20px );
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	margin-bottom: 22px;
	border-radius: var( --pxg-r-lg );
	background: rgba( 23, 22, 56, .94 );
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
	border: 1px solid var( --pxg-line );
	box-shadow: 0 18px 40px rgba( 2, 2, 12, .6 );
}

.pxg-standing__pos {
	flex: 0 0 auto;
	min-width: 34px;
	font-size: 14px;
	font-weight: 800;
	color: var( --pxg-violet2 );
	font-variant-numeric: tabular-nums;
}

.pxg-standing__av {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	background: var( --pxg-grad );
}

.pxg-standing__id {
	flex: 1;
	min-width: 0;
}

.pxg-standing__id b {
	display: block;
	font-size: 13.5px;
	font-weight: 800;
}

.pxg-standing__id b span {
	color: var( --pxg-gold );
	font-variant-numeric: tabular-nums;
}

.pxg-standing__id em {
	font-style: normal;
	font-size: 10.5px;
	color: var( --pxg-mut );
}

.pxg-standing__when {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 600;
	color: var( --pxg-mut );
}

.pxg-standing.is-unranked .pxg-standing__pos {
	color: var( --pxg-mut );
}

.pxg-lbmore {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin-top: 12px;
	padding: 12px;
	border-radius: var( --pxg-r-md );
	background: rgba( 139, 92, 246, .1 );
	border: 1px solid var( --pxg-line-soft );
	color: var( --pxg-violet2 );
	font-size: 12.5px;
	font-weight: 700;
	transition: background .2s, border-color .2s;
}

.pxg-lbmore:hover {
	background: rgba( 139, 92, 246, .16 );
	border-color: var( --pxg-line );
}

.pxg-lbmore svg {
	transition: transform .22s ease;
}

.pxg-lbmore.is-open svg {
	transform: rotate( 180deg );
}

/*--------------------------------------------------------------
# Spin wheel popup
--------------------------------------------------------------*/

.pxg-wheel {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.pxg-wheel[hidden] {
	display: none;
}

.pxg-wheel__bg {
	position: absolute;
	inset: 0;
	background: rgba( 2, 2, 12, .82 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
}

/*
 * Everything fits on screen: the popup never scrolls. Each block sizes off
 * the viewport height so the wheel gives up space before the dialog runs
 * past the bottom edge — a spin wheel you have to scroll to reach is a spin
 * wheel nobody spins.
 */
.pxg-wheel__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min( 360px, 100% );
	max-height: calc( 100dvh - 32px );
	overflow: visible;
	padding: clamp( 14px, 3vh, 22px ) 20px clamp( 14px, 3vh, 22px );
	border-radius: 28px;
	text-align: center;
	background:
		radial-gradient( circle at 50% -5%, rgba( 139, 92, 246, .35 ), transparent 60% ),
		linear-gradient( 180deg, #2A1B63 0%, #1B1140 55%, #150E33 100% );
	border: 1px solid rgba( 167, 139, 250, .35 );
	box-shadow: 0 30px 70px rgba( 2, 2, 12, .8 );
	animation: pxg-menu-in .26s cubic-bezier( .32, .72, .24, 1 );
}

.pxg-wheel__x {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid rgba( 255, 255, 255, .22 );
	background: rgba( 139, 92, 246, .5 );
	color: #fff;
}

/* Chunky arcade title: a hard offset shadow does the 3D work without
   shipping a display font. */
.pxg-wheel__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 2px 0 clamp( 6px, 1.4vh, 12px );
	font-size: clamp( 22px, 5.6vh, 30px );
	font-weight: 800;
	font-style: italic;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	text-shadow:
		0 2px 0 #b9a7e8,
		0 4px 0 #7B5BC4,
		0 6px 0 #4B2E8E,
		0 9px 16px rgba( 2, 2, 12, .75 );
}

.pxg-wheel__star {
	font-size: 20px;
	color: #FACC15;
	text-shadow: 0 2px 6px rgba( 250, 204, 21, .6 );
}

/* Ribbon under the title, with folded ends. */
.pxg-wheel__ribbon {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 clamp( 10px, 2.2vh, 18px );
	padding: clamp( 5px, 1vh, 7px ) 20px;
	border-radius: 6px;
	background: linear-gradient( 180deg, #7C5BD8, #5B3CB0 );
	box-shadow: 0 4px 0 rgba( 47, 25, 100, .8 ), 0 8px 18px rgba( 2, 2, 12, .5 );
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.pxg-wheel__ribbon::before,
.pxg-wheel__ribbon::after {
	content: "";
	position: absolute;
	top: 5px;
	width: 16px;
	height: 24px;
	background: #43288A;
	z-index: -1;
}

.pxg-wheel__ribbon::before {
	left: -12px;
	clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 75%, 30% 38% );
}

.pxg-wheel__ribbon::after {
	right: -12px;
	clip-path: polygon( 0 0, 100% 0, 70% 38%, 100% 75%, 0 100% );
}

.pxg-wheel__ribbon span {
	color: #fff;
	font-size: 10px;
}

.pxg-wheel__stage {
	position: relative;

	/* The wheel is the flexible part: it shrinks to whatever is left after
	   the title, ribbon, button and footer have taken theirs. */
	width: min( 268px, 72vw, 42vh );
	aspect-ratio: 1;

	/* The rim and pointer overhang the disc by 14px and 26px, so the margin
	   has to clear those before it starts looking like padding. */
	margin: clamp( 26px, 5vh, 40px ) auto clamp( 22px, 4.4vh, 34px );
	flex: 0 0 auto;
}

/* Gold rim, drawn as a ring behind the disc. */
.pxg-wheel__stage::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	background: linear-gradient( 160deg, #FFE27A 0%, #E8B02E 30%, #A6741A 55%, #F3C64A 80%, #C9962A 100% );
	box-shadow:
		0 0 0 2px rgba( 90, 60, 10, .5 ),
		0 18px 44px rgba( 2, 2, 12, .7 ),
		inset 0 2px 6px rgba( 255, 255, 255, .5 );
}

.pxg-wheel__bulbs {
	position: absolute;
	inset: -14px;
	z-index: 2;
	pointer-events: none;
}

.pxg-wheel__bulbs i {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 7px;
	transform-origin: 0 50%;
}

.pxg-wheel__bulbs i::after {
	content: "";
	position: absolute;
	right: 3px;
	top: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #FFF6C9;
	box-shadow: 0 0 8px 2px rgba( 255, 238, 160, .9 );
	animation: pxg-bulb 1s ease-in-out infinite;
}

@keyframes pxg-bulb {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .32;
	}
}

.pxg-wheel__disc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid rgba( 60, 35, 5, .45 );
	background: #2C2A63;
	transform: rotate( 0deg );
}

/* Each wedge is a skewed quadrant rotated into place. */
.pxg-wheel__seg {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 50%;
	transform-origin: 0% 100%;
}

/*
 * The label is rotated to its wedge, then the text inside is rotated back by
 * the same amount. Without the counter-rotation every wedge past the
 * halfway point reads upside down — which is exactly how it looked.
 */
.pxg-wheel__label {
	position: absolute;
	inset: 0;
	transform: rotate( var( --pxg-a, 0deg ) );
	pointer-events: none;
}

.pxg-wheel__label i {
	position: absolute;
	top: 8%;
	left: 50%;
	display: block;
	width: 84px;
	margin-left: -42px;
	font-style: normal;
	line-height: 1.05;
	text-align: center;
	color: #fff;
	text-shadow: 0 2px 4px rgba( 20, 8, 50, .75 );
	transform: rotate( calc( var( --pxg-a, 0deg ) * -1 ) );
}

.pxg-wheel__label b {
	display: block;
	font-size: 21px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pxg-wheel__label em {
	display: block;
	margin-top: 1px;
	font-style: normal;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .92;
}

/* Small coin under each amount, matching the reference. */
.pxg-wheel__chip {
	display: block;
	width: 15px;
	height: 15px;
	margin: 5px auto 0;
	border-radius: 50%;
	background: radial-gradient( circle at 35% 30%, #FFE9A6, #E9AE2B 60%, #B67C12 100% );
	box-shadow: inset 0 -1px 2px rgba( 120, 80, 10, .6 );
}

.pxg-wheel__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	transform: translate( -50%, -50% );
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: linear-gradient( 160deg, #FFE27A, #E8B02E 55%, #C08A16 );
	border: 5px solid #14102E;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .6 ), inset 0 2px 5px rgba( 255, 255, 255, .55 );
}

.pxg-wheel__pin {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 4;
	width: 34px;
	height: 42px;
	background: linear-gradient( 180deg, #FFE27A, #E0A322 );
	clip-path: polygon( 50% 100%, 0 30%, 15% 0, 85% 0, 100% 30% );
	filter: drop-shadow( 0 4px 6px rgba( 0, 0, 0, .55 ) );
}

/* The gem set into the pointer. */
.pxg-wheel__pin::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	transform: translateX( -50% );
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: radial-gradient( circle at 35% 30%, #C4A7FF, #6D3BD8 );
	box-shadow: inset 0 -1px 2px rgba( 40, 10, 90, .8 );
}

.pxg-wheel__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: clamp( 8px, 1.6vh, 14px ) 0 0;
	font-size: 11.5px;
	font-weight: 600;
	color: #B9AEE4;
}

.pxg-wheel__result {
	min-height: 20px;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 800;
	color: var( --pxg-gold );
	opacity: 0;
	transition: opacity .3s;
}

.pxg-wheel__result.is-win {
	opacity: 1;
}

.pxg-wheel__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	width: 100%;
	padding: clamp( 11px, 2.2vh, 16px );
	border: 2px solid rgba( 255, 240, 180, .75 );
	border-radius: 999px;
	background: linear-gradient( 180deg, #FFD84D 0%, #F5A623 55%, #E08C10 100% );
	color: #fff;
	font-size: clamp( 17px, 3.4vh, 21px );
	font-weight: 800;
	font-style: italic;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-shadow: 0 2px 0 rgba( 160, 95, 5, .85 );
	box-shadow:
		0 6px 0 #B4700B,
		0 14px 34px -8px rgba( 250, 190, 40, .85 ),
		inset 0 2px 6px rgba( 255, 255, 255, .55 );
	transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}

.pxg-wheel__go-ic {
	color: rgba( 255, 255, 255, .95 );
	filter: drop-shadow( 0 1px 1px rgba( 150, 90, 5, .8 ) );
}

/* Press it into its own shadow rather than scaling — it reads as a physical
   arcade button that way. */
.pxg-wheel__go:active {
	transform: translateY( 4px );
	box-shadow:
		0 2px 0 #B4700B,
		0 8px 20px -8px rgba( 250, 190, 40, .7 ),
		inset 0 2px 6px rgba( 255, 255, 255, .45 );
}

.pxg-wheel__go[disabled] {
	opacity: .6;
	cursor: default;
}

.pxg-wheel__go.is-win {
	background: linear-gradient( 180deg, #6EE7A8 0%, #22C55E 55%, #16A34A 100% );
	border-color: rgba( 220, 255, 235, .7 );
	box-shadow:
		0 6px 0 #0F7A38,
		0 14px 34px -8px rgba( 34, 197, 94, .8 ),
		inset 0 2px 6px rgba( 255, 255, 255, .5 );
	text-shadow: 0 2px 0 rgba( 10, 90, 45, .8 );
}

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

	.pxg-wheel__disc {
		transition: none !important;
	}

	.pxg-wheel__bulbs i::after {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Daily spin: ready vs already spun
--------------------------------------------------------------*/

.pxg-spin__ready,
.pxg-spin__next {
	display: none;
	font-size: 11.5px;
	color: var( --pxg-mut );
}

.pxg-spin.is-ready .pxg-spin__ready,
.pxg-spin.is-used .pxg-spin__next {
	display: inline;
}

.pxg-spin__next i {
	font-style: normal;
	font-weight: 700;
	color: var( --pxg-cyan );
	font-variant-numeric: tabular-nums;
}

/* Spent for the day: keep the card, drop the urgency. */
.pxg-spin.is-used {
	border-color: var( --pxg-line-soft );
	background: var( --pxg-glass );
}

.pxg-spin.is-used .pxg-spin__wheel {
	opacity: .5;
	filter: saturate( .4 );
}

.pxg-spin.is-used .pxg-spin__btn {
	background: rgba( 200, 205, 255, .1 );
	color: var( --pxg-mut );
	box-shadow: none;
	cursor: default;
}

/*--------------------------------------------------------------
# Title Case across the room
#
# Applied to labels and headings only. Numbers, timers and
# player-supplied names are excluded — capitalising a display
# name or a score would corrupt real data on screen.
--------------------------------------------------------------*/

.pxg h2,
.pxg h3,
.pxg h4,
.pxg button,
.pxg .pxg-sec h3,
.pxg .pxg-chip,
.pxg .pxg-nav__item span,
.pxg .pxg-pill__txt small,
.pxg .pxg-stat em,
.pxg .pxg-card__cat,
.pxg .pxg-account__row b,
.pxg .pxg-account__row em,
.pxg .pxg-menu__link,
.pxg .pxg-tr b,
.pxg .pxg-tr em,
.pxg .pxg-seg__btn,
.pxg .pxg-rd b,
.pxg .pxg-rd small,
.pxg .pxg-mission__mid b,
.pxg .pxg-bonus__txt b,
.pxg .pxg-spin__txt b {
	text-transform: capitalize;
}

/* Names, numbers and units must stay exactly as stored. */
.pxg .pxg-card__title,
.pxg .pxg-rank__id b,
.pxg .pxg-pod__name,
.pxg .pxg-profcard h3,
.pxg .pxg-menu__id b,
.pxg .pxg-standing__id b,
.pxg [data-pxg-timer],
.pxg [data-pxg-playtime],
.pxg .pxg-card__plays,
.pxg .pxg-rank__score,
.pxg .pxg-pod__score {
	text-transform: none;
}

/*--------------------------------------------------------------
# Room modals: play time, confirmation
--------------------------------------------------------------*/

.pxg-modal {
	position: fixed;
	inset: 0;
	z-index: 100003;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.pxg-modal[hidden] {
	display: none;
}

.pxg-modal__bg {
	position: absolute;
	inset: 0;
	background: rgba( 2, 2, 12, .78 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
}

.pxg-modal__box {
	position: relative;
	width: 100%;
	max-width: 520px;
	padding: 14px 20px calc( 26px + env( safe-area-inset-bottom ) );
	border-radius: 28px 28px 0 0;
	border: 1px solid var( --pxg-line );
	border-bottom: 0;
	background:
		radial-gradient( circle at 50% -10%, rgba( 139, 92, 246, .22 ), transparent 55% ),
		linear-gradient( 180deg, #171638, #0C0C22 );
	box-shadow: 0 -20px 60px rgba( 2, 2, 12, .7 );
	text-align: center;
	animation: pxg-sheet-up .3s cubic-bezier( .32, .72, .24, 1 );
}

@keyframes pxg-sheet-up {
	from { transform: translateY( 100% ); }
	to { transform: none; }
}

.pxg-modal__grab {
	display: block;
	width: 44px;
	height: 4px;
	margin: 0 auto 18px;
	border-radius: 99px;
	background: rgba( 200, 205, 255, .2 );
}

.pxg-modal__box h3 {
	margin: 0 0 5px;
	font-size: 19px;
	font-weight: 800;
	font-style: italic;
}

.pxg-modal__box > p {
	margin: 0 0 18px;
	font-size: 12.5px;
	color: var( --pxg-mut );
}

.pxg-modal__note {
	margin: 16px 0 0;
	font-size: 12px;
	color: var( --pxg-mut );
}

.pxg-modal__note b {
	color: var( --pxg-gold );
	font-variant-numeric: tabular-nums;
}

/* Play-time packs */
.pxg-packs {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 10px;
}

.pxg-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 18px 8px 13px;
	border-radius: 16px;
	background: var( --pxg-card );
	border: 1px solid var( --pxg-line-soft );
	transition: border-color .2s, transform .15s, background .2s;
}

.pxg-pack:active {
	transform: scale( .96 );
}

.pxg-pack b {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pxg-pack em {
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --pxg-mut );
}

.pxg-pack span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 800;
	color: var( --pxg-gold );
	font-variant-numeric: tabular-nums;
}

.pxg-pack.is-best {
	border-color: rgba( 139, 92, 246, .55 );
	background: linear-gradient( 180deg, rgba( 139, 92, 246, .18 ), var( --pxg-card ) );
}

.pxg-pack__tag {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX( -50% );
	padding: 3px 9px;
	border-radius: 8px;
	background: var( --pxg-grad );
	font-style: normal;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

/* Confirmation */
.pxg-modal--confirm {
	align-items: center;
	padding: 20px;
}

.pxg-modal--confirm .pxg-modal__box {
	max-width: 340px;
	border-radius: 24px;
	border-bottom: 1px solid var( --pxg-line );
	padding: 26px 22px 22px;
	animation: pxg-menu-in .22s cubic-bezier( .32, .72, .24, 1 );
}

.pxg-confirm__ic:not( :empty ) {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: rgba( 139, 92, 246, .16 );
	color: var( --pxg-violet2 );
}

.pxg-confirm__row {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.pxg-btn {
	flex: 1;
	padding: 14px;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 800;
	transition: transform .14s;
}

.pxg-btn:active {
	transform: scale( .97 );
}

.pxg-btn--ghost {
	background: rgba( 200, 205, 255, .08 );
	border: 1px solid var( --pxg-line-soft );
	color: var( --pxg-mut );
}

.pxg-btn--go {
	background: var( --pxg-grad );
	color: #fff;
	box-shadow: 0 8px 22px -8px rgba( 139, 92, 246, .9 );
}

/*--------------------------------------------------------------
# Rewards tab: crystal balance and claimable set
--------------------------------------------------------------*/


.pxg-locked-note {
	margin: 0 0 22px;
	padding: 12px;
	border-radius: var( --pxg-r-md );
	border: 1px dashed var( --pxg-line-soft );
	text-align: center;
	font-size: 11.5px;
	color: var( --pxg-mut );
}

/*--------------------------------------------------------------
# Spin wheel polish
--------------------------------------------------------------*/

.pxg-wheel__glow {
	position: absolute;
	inset: -18px;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 250, 204, 21, .28 ), transparent 68% );
	animation: pxg-pulse 2.6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes pxg-pulse {
	0%, 100% { opacity: .55; transform: scale( 1 ); }
	50% { opacity: 1; transform: scale( 1.04 ); }
}

/* Two alternating wedges read far better than four at small sizes. The
   deep/bright pairing matches the reference art. */
.pxg-wheel__seg--0 { background: linear-gradient( 180deg, #3B2E86, #2C2360 ); }
.pxg-wheel__seg--1 { background: linear-gradient( 180deg, #7B4FE0, #6535C9 ); }

.pxg-wheel__prize {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 14px;
	margin-bottom: 14px;
	border-radius: 18px;
	background: linear-gradient( 180deg, rgba( 250, 204, 21, .18 ), rgba( 250, 204, 21, .04 ) );
	border: 1px solid rgba( 250, 204, 21, .4 );
	animation: pxg-menu-in .3s ease;
}

.pxg-wheel__prize[hidden] {
	display: none;
}

.pxg-wheel__prize-ic {
	color: var( --pxg-gold );
}

.pxg-wheel__prize b {
	font-size: 19px;
	font-weight: 800;
	color: var( --pxg-gold );
}

.pxg-wheel__prize em {
	font-style: normal;
	font-size: 11px;
	color: var( --pxg-mut );
}

/* Spin button */
.pxg-wheel__go {
	position: relative;
	overflow: hidden;
	border: 0;
}

.pxg-wheel__go::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, .45 ), transparent );
	animation: pxg-sheen 2.4s ease-in-out infinite;
}

@keyframes pxg-sheen {
	0% { left: -60%; }
	60%, 100% { left: 130%; }
}

.pxg-wheel__go.is-spinning::after,
.pxg-wheel__go.is-win::after {
	display: none;
}

.pxg-wheel__go.is-win {
	background: var( --pxg-grad );
	color: #fff;
	box-shadow: 0 10px 26px -8px rgba( 139, 92, 246, .9 );
}

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

	.pxg-wheel__glow,
	.pxg-wheel__go::after {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Profile tab — player card, menu and sub pages
--------------------------------------------------------------*/

.pxb-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
	padding: 22px 18px 18px;
	border-radius: var( --pxg-r-lg );
	border: 1px solid var( --pxg-line );
	background:
		linear-gradient( 135deg, rgba( 139, 92, 246, .18 ), rgba( 59, 130, 246, .06 ) ),
		var( --pxg-glass );
}

/* One soft aurora bloom, echoing the page background rather than
   competing with it. */
.pxb-hero__glow {
	position: absolute;
	top: -70px;
	right: -60px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 139, 92, 246, .55 ) 0%, rgba( 56, 189, 248, .16 ) 55%, transparent 72% );
	filter: blur( 12px );
	pointer-events: none;
}

.pxb-hero__row {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 16px;
}

.pxb-hero__ava {
	position: relative;
	flex: 0 0 82px;
	width: 82px;
	height: 82px;
	padding: 3px;
	border: 0;
	border-radius: 50%;
	background: var( --pxg-card2 );
	cursor: pointer;
	transition: transform .15s ease;
}

/* Same spinning ring as the header avatar, one size up, with a slow
   breathing glow so the player's own card has a little life in it. */
.pxb-hero__ava::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		rgba( 236, 72, 153, .25 ) 55deg,
		var( --pxg-pink ) 150deg,
		var( --pxg-violet ) 230deg,
		#fff 275deg,
		var( --pxg-cyan ) 305deg,
		transparent 360deg
	);
	animation: pxg-ring-spin 4.4s linear infinite;
}

.pxb-hero__ava::after {
	content: "";
	position: absolute;
	inset: -5px;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 139, 92, 246, .55 ), transparent 70% );
	animation: pxg-ring-glow 3.2s ease-in-out infinite;
	pointer-events: none;
}

.pxb-hero__ava:active {
	transform: scale( .95 );
}

.pxb-hero__ava img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var( --pxg-card2 );
}

.pxb-hero__lvl {
	position: absolute;
	z-index: 2;
	right: -4px;
	bottom: -2px;
	display: grid;
	place-items: center;
	min-width: 30px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	border: 2px solid var( --pxg-bg2 );
	background: var( --pxg-grad );
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	font-style: normal;
	letter-spacing: .04em;
}

.pxb-hero__who {
	flex: 1;
	min-width: 0;
}

.pxb-hero__who h3 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxb-hero__rank {
	margin: 0 0 11px;
}

.pxb-hero__pos {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	background: rgba( 250, 204, 21, .12 );
	color: var( --pxg-gold );
	font-size: 11.5px;
	font-weight: 700;
}

.pxb-hero__xp {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pxb-hero__track {
	flex: 1;
	height: 8px;
	border-radius: 99px;
	background: rgba( 2, 2, 12, .45 );
	overflow: hidden;
}

.pxb-hero__track i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var( --pxg-grad );
	box-shadow: 0 0 10px rgba( 139, 92, 246, .8 );
}

.pxb-hero__xp b {
	color: var( --pxg-violet2 );
	font-size: 12.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pxb-hero__sub {
	margin: 7px 0 0;
	font-size: 12px;
	color: var( --pxg-mut );
}

/* ---- stat cells ---- */

.pxb-cells {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 9px;
	margin-top: 18px;
}

.pxb-cell {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 6px;
	border-radius: var( --pxg-r-md );
	border: 1px solid var( --pxg-line-soft );
	background: rgba( 6, 6, 20, .5 );
	color: var( --pxg-ink );
	font-family: inherit;
	cursor: pointer;
	transition: border-color .2s ease, transform .15s ease;
}

.pxb-cell:hover {
	border-color: var( --pxg-line );
}

.pxb-cell:active {
	transform: scale( .96 );
}

.pxb-cell__ic {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-bottom: 4px;
	border-radius: 9px;
}

.pxb-cell__ic--violet {
	background: rgba( 139, 92, 246, .16 );
	color: var( --pxg-violet2 );
}

.pxb-cell__ic--green {
	background: rgba( 52, 211, 153, .14 );
	color: var( --pxg-green );
}

.pxb-cell__ic--cyan {
	background: rgba( 56, 189, 248, .14 );
	color: var( --pxg-cyan );
}

.pxb-cell b {
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pxb-cell i {
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	color: var( --pxg-mut );
}

/* ---- menu list ---- */

.pxb-menu {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 22px;
}

.pxb-menu__row {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 14px 16px;
	border-radius: var( --pxg-r-md );
	border: 1px solid var( --pxg-line-soft );
	background: var( --pxg-glass );
	color: var( --pxg-ink );
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, transform .15s ease;
}

.pxb-menu__row:hover {
	border-color: var( --pxg-line );
}

.pxb-menu__row:active {
	transform: scale( .98 );
}

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

.pxb-menu__ic--violet {
	background: rgba( 139, 92, 246, .16 );
	color: var( --pxg-violet2 );
}

.pxb-menu__ic--cyan {
	background: rgba( 56, 189, 248, .14 );
	color: var( --pxg-cyan );
}

.pxb-menu__ic--gold {
	background: rgba( 250, 204, 21, .14 );
	color: var( --pxg-gold );
}

.pxb-menu__ic--pink {
	background: rgba( 236, 72, 153, .14 );
	color: var( --pxg-pink );
}

.pxb-menu__ic--blue {
	background: rgba( 59, 130, 246, .16 );
	color: #93B6FF;
}

.pxb-menu__lb {
	flex: 1;
	min-width: 0;
}

.pxb-menu__count {
	padding: 3px 8px;
	border-radius: 999px;
	background: var( --pxg-pink );
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	font-style: normal;
	line-height: 1.4;
}

.pxb-menu__go {
	flex: 0 0 auto;
	color: var( --pxg-mut );
}

/* ---- sub pages ---- */

.pxb-page {
	animation: pxb-in .26s cubic-bezier( .22, .9, .3, 1 );
}

@keyframes pxb-in {

	from {
		opacity: 0;
		transform: translateX( 22px );
	}

	to {
		opacity: 1;
		transform: translateX( 0 );
	}
}

.pxb-page__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.pxb-page__head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pxb-page__act {
	margin-left: auto;
}

.pxb-back {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border: 1px solid var( --pxg-line );
	border-radius: 12px;
	background: var( --pxg-glass );
	color: var( --pxg-ink );
	cursor: pointer;
	transition: border-color .2s ease, transform .15s ease;
}

.pxb-back:hover {
	border-color: var( --pxg-violet );
}

.pxb-back:active {
	transform: scale( .93 );
}

/* ---- cards and controls ---- */

.pxb-card {
	margin-bottom: 14px;
	padding: 18px;
	border-radius: var( --pxg-r-lg );
	border: 1px solid var( --pxg-line-soft );
	background: var( --pxg-card );
}

.pxb-card h4 {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var( --pxg-ink );
}

.pxb-note {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.55;
	color: var( --pxg-mut );
}

.pxb-btn {
	display: block;
	width: 100%;
	padding: 13px;
	border: 0;
	border-radius: var( --pxg-r-md );
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, filter .2s ease;
}

.pxb-btn:active {
	transform: scale( .98 );
}

.pxb-btn--grad {
	background: var( --pxg-grad );
	color: #fff;
	box-shadow: 0 8px 20px rgba( 139, 92, 246, .28 );
}

.pxb-btn--ghost {
	border: 1px solid var( --pxg-line );
	background: rgba( 139, 92, 246, .1 );
	color: var( --pxg-ink );
}

.pxb-mini {
	padding: 8px 14px;
	border: 1px solid var( --pxg-line-soft );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .05 );
	color: var( --pxg-ink );
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .2s ease;
}

.pxb-mini:hover {
	border-color: var( --pxg-violet );
}

.pxb-input {
	width: 100%;
	margin-bottom: 12px;
	padding: 13px 14px;
	border: 1px solid var( --pxg-line-soft );
	border-radius: var( --pxg-r-md );
	background: var( --pxg-bg2 );
	color: var( --pxg-ink );
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	outline: 0;
	transition: border-color .2s ease;
}

.pxb-input:focus {
	border-color: var( --pxg-violet );
}

/* ---- referral ---- */

.pxb-refcode {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding: 13px 14px;
	border: 1px dashed rgba( 139, 92, 246, .5 );
	border-radius: var( --pxg-r-md );
	background: rgba( 139, 92, 246, .08 );
}

.pxb-refcode b {
	flex: 1;
	min-width: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .16em;
	color: var( --pxg-violet2 );
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxb-refstats {
	display: flex;
	gap: 9px;
	margin-bottom: 14px;
}

.pxb-refstats span {
	flex: 1;
	padding: 12px 6px;
	border-radius: var( --pxg-r-md );
	border: 1px solid var( --pxg-line-soft );
	background: var( --pxg-bg2 );
	text-align: center;
}

.pxb-refstats b {
	display: block;
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var( --pxg-ink );
}

.pxb-refstats i {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-size: 10.5px;
	font-weight: 600;
	color: var( --pxg-mut );
}

.pxb-steps {
	margin: 0;
	padding-left: 20px;
	color: #C3C8E8;
	font-size: 13px;
	line-height: 1.6;
}

.pxb-steps li {
	margin-bottom: 8px;
}

.pxb-steps li:last-child {
	margin-bottom: 0;
}

.pxb-steps li::marker {
	color: var( --pxg-violet2 );
	font-weight: 800;
}

/* ---- notifications ---- */

.pxb-card--list {
	padding-top: 4px;
	padding-bottom: 4px;
}

.pxb-notif {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var( --pxg-line-soft );
	cursor: pointer;
}

.pxb-notif:last-child {
	border-bottom: 0;
}

.pxb-notif__ic {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 12px;
	background: rgba( 139, 92, 246, .14 );
	color: var( --pxg-violet2 );
	font-size: 15px;
}

.pxb-notif__body {
	min-width: 0;
}

.pxb-notif__body b {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
}

.pxb-notif.is-unread .pxb-notif__body b::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-radius: 50%;
	background: var( --pxg-pink );
	vertical-align: middle;
}

.pxb-notif__body em {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.45;
	color: var( --pxg-mut );
}

.pxb-notif__body time {
	display: block;
	margin-top: 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #5E6690;
}

.pxb-empty {
	margin: 0;
	padding: 34px 16px;
	text-align: center;
	font-size: 13.5px;
	line-height: 1.55;
	color: var( --pxg-mut );
}

.pxb-empty span {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 10px;
	border-radius: 16px;
	background: rgba( 139, 92, 246, .12 );
	color: var( --pxg-violet2 );
}

/* ---- settings ---- */

.pxb-avas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pxb-ava {
	width: 56px;
	height: 56px;
	padding: 2px;
	border: 2px solid var( --pxg-line-soft );
	border-radius: 50%;
	background: var( --pxg-bg2 );
	cursor: pointer;
	transition: border-color .2s ease, transform .15s ease;
}

.pxb-ava:active {
	transform: scale( .93 );
}

.pxb-ava.is-on {
	border-color: var( --pxg-violet );
	box-shadow: 0 0 0 3px rgba( 139, 92, 246, .18 );
}

.pxb-ava img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.pxb-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
	padding: 15px 0;
	border-bottom: 1px solid var( --pxg-line-soft );
	color: var( --pxg-ink );
	text-decoration: none;
}

.pxb-link:last-child {
	border-bottom: 0;
}

.pxb-link b {
	margin-right: auto;
	font-size: 14px;
	font-weight: 700;
}

.pxb-link em {
	order: 3;
	flex-basis: 100%;
	margin-top: 2px;
	font-style: normal;
	font-size: 11.5px;
	color: var( --pxg-mut );
}

.pxb-link--danger b {
	color: #FF7A8A;
}

/* ---- faq ---- */

.pxb-faq {
	border-bottom: 1px solid var( --pxg-line-soft );
}

.pxb-faq:last-child {
	border-bottom: 0;
}

.pxb-faq summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
	font-size: 13.5px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.pxb-faq summary::-webkit-details-marker {
	display: none;
}

/* Drawn rather than typed, so it stays a crisp plus/cross at any size. */
.pxb-faq summary i {
	position: relative;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-left: auto;
	border-radius: 7px;
	background: rgba( 139, 92, 246, .16 );
	transition: transform .22s ease, background .22s ease;
}

.pxb-faq summary i::before,
.pxb-faq summary i::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 2px;
	border-radius: 2px;
	background: var( --pxg-violet2 );
	transform: translate( -50%, -50% );
}

.pxb-faq summary i::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
}

.pxb-faq[open] summary i {
	background: var( --pxg-grad );
	transform: rotate( 45deg );
}

.pxb-faq[open] summary i::before,
.pxb-faq[open] summary i::after {
	background: #fff;
}

.pxb-faq p {
	margin: 0;
	padding: 0 0 16px;
	font-size: 13px;
	line-height: 1.6;
	color: #C0C5E4;
}

/* ---- about ---- */

.pxb-about {
	padding-top: 26px;
	text-align: center;
}

.pxb-about__logo {
	display: block;
	max-width: 140px;
	max-height: 62px;
	margin: 0 auto 12px;
	object-fit: contain;
}

.pxb-about__mark {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin: 0 auto 12px;
	border-radius: 22px;
	background: var( --pxg-grad );
	box-shadow: 0 10px 26px rgba( 139, 92, 246, .32 );
}

.pxb-about h4 {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: none;
}

.pxb-about__ver {
	margin: 4px 0 12px;
	font-size: 12px;
	font-weight: 600;
	color: var( --pxg-mut );
}

.pxb-about .pxb-note {
	max-width: 38ch;
	margin: 0 auto;
}

.pxb-copy {
	margin: 2px 0 0;
	text-align: center;
	font-size: 11.5px;
	color: var( --pxg-mut );
}

@media ( max-width: 380px ) {

	.pxb-hero__ava {
		flex-basis: 68px;
		width: 68px;
		height: 68px;
	}

	.pxb-hero__who h3 {
		font-size: 17px;
	}

	.pxb-refstats b {
		font-size: 14px;
	}
}

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

	.pxb-page {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Rewards: locked prizes and the centred play-time dialog
--------------------------------------------------------------*/

/* Locked rewards are dimmed, not hidden — the shelf is the reason to
   keep earning, so it stays fully stocked at zero crystals. */
.pxg-rd.is-locked {
	opacity: .62;
}

.pxg-rd.is-locked .pxg-rd__logo {
	filter: grayscale( .55 );
}

.pxg-rd.is-locked small {
	color: var( --pxg-violet2 );
	font-weight: 600;
}

/* Centred dialog. The play-time picker is a short decision, not a long
   list, so a sheet climbing from the bottom edge read as a stray panel. */
.pxg-modal--center {
	align-items: center;
	padding: 20px;
}

.pxg-modal--center .pxg-modal__box {
	max-width: 400px;
	padding: 26px 22px 24px;
	border-radius: var( --pxg-r-lg );
	border-bottom: 1px solid var( --pxg-line );
	box-shadow: 0 24px 70px rgba( 2, 2, 12, .7 );
	animation: pxg-pop-in .24s cubic-bezier( .32, .72, .24, 1 );
}

@keyframes pxg-pop-in {

	from {
		opacity: 0;
		transform: translateY( 12px ) scale( .96 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.pxg-modal__x {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var( --pxg-line-soft );
	border-radius: 50%;
	background: rgba( 255, 255, 255, .05 );
	color: var( --pxg-mut );
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

.pxg-modal__x:hover {
	color: var( --pxg-ink );
	border-color: var( --pxg-line );
}

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

	.pxg-modal--center .pxg-modal__box {
		animation: none;
	}
}


/* Shared avatar ring animation, used by the header avatar and the player
   card on the Profile tab. */
@keyframes pxg-ring-spin {

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

@keyframes pxg-ring-glow {

	0%,
	100% {
		opacity: .35;
		transform: scale( 1 );
	}

	50% {
		opacity: .7;
		transform: scale( 1.06 );
	}
}

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

	.pxg-pfp::before,
	.pxb-hero__ava::before,
	.pxb-hero__ava::after {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Reward Shop — wallet band, shelf grid, history, confirm sheet
--------------------------------------------------------------*/

/* ---- wallet band ---- */

/* The band bleeds past the page gutter so the colour reaches the screen
   edges the way the header does, without restructuring the wrapper. */
.pxr-band {
	position: relative;
	margin: -4px -16px 16px;
	padding: 4px 16px 18px;
	border-radius: 0 0 26px 26px;
	background:
		radial-gradient( 120% 90% at 20% 0%, rgba( 139, 92, 246, .95 ), transparent 70% ),
		linear-gradient( 160deg, #4C1D95 0%, #2E1065 55%, #140E32 100% );
}

.pxr-band__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 2px 14px;
}

.pxr-band__top h2 {
	margin: 0;
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.pxr-info {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}

.pxr-info:hover {
	background: rgba( 255, 255, 255, .22 );
}

.pxr-wallet {
	padding: 16px;
	border-radius: 20px;
	border: 1px solid rgba( 255, 255, 255, .08 );
	background: rgba( 8, 8, 24, .78 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	box-shadow: 0 14px 34px rgba( 4, 2, 20, .5 );
}

.pxr-wallet__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pxr-wallet__coin {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	background: radial-gradient( circle at 35% 30%, rgba( 167, 139, 250, .95 ), rgba( 76, 29, 149, .9 ) );
	color: #fff;
	box-shadow: 0 6px 16px rgba( 139, 92, 246, .45 );
}

.pxr-wallet__bal {
	flex: 1;
	min-width: 0;
}

.pxr-wallet__bal em {
	display: block;
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	color: var( --pxg-mut );
}

.pxr-wallet__bal b {
	display: block;
	margin-top: 1px;
	font-size: 27px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.pxr-wallet__links {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	align-self: flex-start;
	padding-top: 4px;
}

.pxr-wallet__links i {
	width: 1px;
	height: 13px;
	background: var( --pxg-line );
}

.pxr-wallet__link {
	padding: 0;
	border: 0;
	background: none;
	color: var( --pxg-mut );
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: color .2s ease;
}

.pxr-wallet__link.is-on,
.pxr-wallet__link:hover {
	color: var( --pxg-violet2 );
}

.pxr-wallet__goal {
	margin: 14px 0 7px;
	font-size: 11.5px;
	color: var( --pxg-mut );
}

.pxr-wallet__bar {
	display: block;
	height: 6px;
	border-radius: 99px;
	background: rgba( 2, 2, 12, .55 );
	overflow: hidden;
}

.pxr-wallet__bar i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var( --pxg-grad );
	box-shadow: 0 0 10px rgba( 139, 92, 246, .8 );
	transition: width .9s cubic-bezier( .3, .8, .3, 1 );
}

.pxr-wallet__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var( --pxg-line-soft );
	font-size: 11.5px;
	color: var( --pxg-mut );
}

.pxr-wallet__foot span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pxr-wallet__foot b {
	color: var( --pxg-ink );
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* ---- search + sort ---- */

.pxr-find {
	display: flex;
	gap: 9px;
	margin-bottom: 14px;
}

.pxr-find__box {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid var( --pxg-line-soft );
	background: var( --pxg-glass );
	color: var( --pxg-mut );
	transition: border-color .2s ease;
}

.pxr-find__box:focus-within {
	border-color: var( --pxg-violet );
}

.pxr-find__box input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	color: var( --pxg-ink );
	font: 600 14px inherit;
}

.pxr-find__sort {
	display: grid;
	place-items: center;
	width: 46px;
	flex: 0 0 46px;
	border: 1px solid var( --pxg-line-soft );
	border-radius: 14px;
	background: var( --pxg-glass );
	color: var( --pxg-ink );
	cursor: pointer;
	transition: border-color .2s ease, transform .15s ease;
}

.pxr-find__sort:active {
	transform: scale( .94 );
}

/* ---- category chips ---- */

.pxr-cats {
	display: flex;
	gap: 14px;
	margin-bottom: 16px;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.pxr-cats::-webkit-scrollbar {
	display: none;
}

.pxr-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	width: 66px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --pxg-mut );
	font-family: inherit;
	cursor: pointer;
}

.pxr-cat__ic {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 2px solid transparent;
	background: var( --pxg-card );
	color: var( --pxg-violet2 );
	transition: border-color .2s ease, transform .15s ease;
}

.pxr-cat__ic--green {
	color: var( --pxg-green );
}

.pxr-cat__ic--gold {
	color: var( --pxg-gold );
}

.pxr-cat__ic--pink {
	color: var( --pxg-pink );
}

.pxr-cat:active .pxr-cat__ic {
	transform: scale( .93 );
}

.pxr-cat.is-on .pxr-cat__ic {
	border-color: var( --pxg-violet );
	box-shadow: 0 0 0 3px rgba( 139, 92, 246, .16 );
}

.pxr-cat em {
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.pxr-cat.is-on em {
	color: var( --pxg-violet2 );
	font-weight: 800;
}

/* ---- shelf grid ---- */

.pxr-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 12px;
	margin-bottom: 14px;
}

.pxr-item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 18px;
	border: 1px solid var( --pxg-line-soft );
	background: var( --pxg-card );
	transition: border-color .2s ease;
}

.pxr-item:hover {
	border-color: var( --pxg-line );
}

.pxr-item__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient( circle at 30% 20%, rgba( 139, 92, 246, .35 ), transparent 55% ),
		radial-gradient( circle at 75% 80%, rgba( 56, 189, 248, .22 ), transparent 60% ),
		var( --pxg-card2 );
}

.pxr-item__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pxr-item.is-locked .pxr-item__media img {
	filter: saturate( .6 ) brightness( .82 );
}

.pxr-item.is-out .pxr-item__media img {
	filter: grayscale( 1 ) brightness( .6 );
}

.pxr-item__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var( --pxg-violet2 );
}

/* Brand tile, overlapping the artwork like a logo chip. */
.pxr-item__mark {
	position: absolute;
	left: 8px;
	bottom: -14px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	border: 2px solid var( --pxg-card );
	background: var( --pxg-grad );
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

.pxr-flag {
	position: absolute;
	top: 7px;
	left: 7px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}

.pxr-flag--glass {
	background: rgba( 12, 12, 30, .4 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	border: 1px solid rgba( 255, 255, 255, .25 );
}

.pxr-flag--pink {
	background: var( --pxg-pink );
	box-shadow: 0 4px 14px rgba( 236, 72, 153, .45 );
}

.pxr-flag--right {
	left: auto;
	right: 7px;
}

.pxr-flag--lock {
	background: rgba( 12, 12, 30, .5 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	border: 1px solid rgba( 250, 204, 21, .4 );
	color: var( --pxg-gold );
}

.pxr-item__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 12px 12px;
}

.pxr-item__body h4 {
	margin: 0 0 3px;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.25;
}

.pxr-item__body p {
	margin: 0 0 10px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var( --pxg-mut );
}

.pxr-item__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.pxr-item__cost {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var( --pxg-violet2 );
}

.pxr-item__cost b {
	font-size: 13.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pxr-get {
	flex: 0 0 auto;
	padding: 7px 13px;
	border: 0;
	border-radius: 999px;
	background: var( --pxg-grad );
	color: #fff;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 5px 14px -4px rgba( 139, 92, 246, .9 );
	transition: transform .15s ease;
}

.pxr-get:active {
	transform: scale( .95 );
}

.pxr-get.is-need {
	background: rgba( 139, 92, 246, .12 );
	border: 1px solid var( --pxg-line-soft );
	color: var( --pxg-violet2 );
	box-shadow: none;
}

.pxr-none {
	margin: 0 0 14px;
	padding: 34px 16px;
	border-radius: var( --pxg-r-lg );
	border: 1px dashed var( --pxg-line );
	text-align: center;
	font-size: 13.5px;
	color: var( --pxg-mut );
}

@media ( min-width: 480px ) {

	.pxr-item__body h4 {
		font-size: 15px;
	}

	.pxr-item__body p {
		font-size: 12.5px;
	}
}

/* ---- history ---- */

.pxr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.pxr-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 13px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .2s ease, transform .15s ease;
}

.pxr-chip:active {
	transform: scale( .96 );
}

.pxr-chip b {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pxr-chip--green {
	background: rgba( 52, 211, 153, .12 );
	color: var( --pxg-green );
}

.pxr-chip--green.is-on {
	border-color: var( --pxg-green );
}

.pxr-chip--gold {
	background: rgba( 250, 204, 21, .12 );
	color: var( --pxg-gold );
}

.pxr-chip--gold.is-on {
	border-color: var( --pxg-gold );
}

.pxr-ords {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

.pxr-ord {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border-radius: var( --pxg-r-md );
	border: 1px solid var( --pxg-line-soft );
	background: var( --pxg-glass );
}

.pxr-ord__thumb {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	overflow: hidden;
	border-radius: 12px;
	background: rgba( 139, 92, 246, .14 );
	color: var( --pxg-violet2 );
}

.pxr-ord__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pxr-ord__mid {
	flex: 1;
	min-width: 0;
}

.pxr-ord__mid b {
	display: block;
	font-size: 13.5px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxr-ord__mid em {
	display: block;
	margin-top: 1px;
	font-style: normal;
	font-size: 11px;
	color: var( --pxg-mut );
}

.pxr-ord__mid time {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #5E6690;
}

.pxr-ord__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	flex: 0 0 auto;
}

.pxr-ost {
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 800;
	font-style: normal;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pxr-ost--fulfilled {
	background: rgba( 52, 211, 153, .14 );
	color: var( --pxg-green );
}

.pxr-ost--pending {
	background: rgba( 250, 204, 21, .13 );
	color: var( --pxg-gold );
}

.pxr-ord__side b {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var( --pxg-violet2 );
}

/* ---- confirm sheet ---- */

.pxr-sheet__head {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 4px 0 16px;
}

.pxr-sheet__img {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	overflow: hidden;
	border-radius: 14px;
	background: rgba( 139, 92, 246, .14 );
	color: var( --pxg-violet2 );
}

.pxr-sheet__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pxr-sheet__img.has-img svg {
	display: none;
}

.pxr-sheet__who {
	min-width: 0;
}

.pxr-sheet__who b {
	display: block;
	font-size: 16px;
	font-weight: 800;
}

.pxr-sheet__who em {
	display: block;
	margin-top: 1px;
	font-style: normal;
	font-size: 12px;
	color: var( --pxg-mut );
}

.pxr-sheet__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
	padding: 13px 14px;
	border-radius: var( --pxg-r-md );
	border: 1px solid var( --pxg-line-soft );
	background: var( --pxg-bg2 );
	font-size: 13px;
	font-weight: 600;
	color: var( --pxg-mut );
}

.pxr-sheet__val {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pxr-sheet__val i {
	font-style: normal;
}

.pxr-sheet__val.is-cost {
	color: var( --pxg-gold );
}

.pxr-sheet__val.is-after {
	color: var( --pxg-green );
}

.pxr-sheet__ok {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 14px;
	border: 0;
	border-radius: var( --pxg-r-md );
	background: linear-gradient( 100deg, var( --pxg-cyan ), var( --pxg-blue ) );
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba( 56, 189, 248, .3 );
	transition: transform .15s ease;
}

.pxr-sheet__ok:active {
	transform: scale( .98 );
}

.pxr-sheet__ok[disabled] {
	opacity: .6;
	cursor: wait;
}

.pxr-sheet__cancel {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px;
	border: 0;
	background: none;
	color: var( --pxg-mut );
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.pxr-sheet__cancel:hover {
	color: var( --pxg-ink );
}

/* Notification rows carry Font Awesome classes from the server. If the icon
   font is unavailable the glyph column collapses, so give it a visible
   fallback mark in both the header panel and the Profile list. */
.pxg .playrox-notify__item > i,
.pxb-notif__ic > i {
	display: grid;
	place-items: center;
	min-width: 16px;
	min-height: 16px;
}

.pxg .playrox-notify__item > i::before,
.pxb-notif__ic > i::before {
	font-family: inherit;
}

.pxg .playrox-notify__item > i:empty::after,
.pxb-notif__ic > i:empty::after {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: .85;
}

/*--------------------------------------------------------------
# Motion — entrances, micro-interactions, feedback
#
# Everything here animates transform/opacity only (compositor
# work, no layout), and prefers-reduced-motion switches the lot
# off at the bottom.
--------------------------------------------------------------*/

/* ---- staggered pane entrance ---- */

.pxg-stagger > * {
	animation: pxg-rise .5s cubic-bezier( .22, .9, .3, 1 ) both;
}

.pxg-stagger > *:nth-child(1)  { animation-delay: 0s; }
.pxg-stagger > *:nth-child(2)  { animation-delay: .05s; }
.pxg-stagger > *:nth-child(3)  { animation-delay: .1s; }
.pxg-stagger > *:nth-child(4)  { animation-delay: .15s; }
.pxg-stagger > *:nth-child(5)  { animation-delay: .2s; }
.pxg-stagger > *:nth-child(6)  { animation-delay: .25s; }
.pxg-stagger > *:nth-child(7)  { animation-delay: .3s; }
.pxg-stagger > *:nth-child(n+8) { animation-delay: .34s; }

@keyframes pxg-rise {

	from {
		opacity: 0;
		transform: translateY( 14px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---- progress bars ease to their width ---- */

.pxg-mission__bar i,
.pxb-hero__track i {
	transition: width .9s cubic-bezier( .3, .8, .3, 1 );
}

/* ---- balance pulse when a number rolls ---- */

.pxg-pulse {
	display: inline-block;
	animation: pxg-pulse .55s cubic-bezier( .32, .72, .24, 1 );
}

@keyframes pxg-pulse {

	0% {
		transform: scale( 1 );
	}

	35% {
		transform: scale( 1.16 );
	}

	100% {
		transform: scale( 1 );
	}
}

/* ---- card lift on hover (pointer devices only) ---- */

@media ( hover: hover ) and ( pointer: fine ) {

	.pxg-card,
	.pxr-item,
	.pxr-ord,
	.pxb-menu__row,
	.pxg-tr {
		transition: transform .22s cubic-bezier( .22, .9, .3, 1 ), border-color .2s ease, box-shadow .25s ease;
		will-change: transform;
	}

	.pxg-card:hover,
	.pxr-item:hover {
		transform: translateY( -3px );
		box-shadow: 0 16px 36px -12px rgba( 139, 92, 246, .5 );
	}

	.pxr-ord:hover,
	.pxb-menu__row:hover,
	.pxg-tr:hover {
		transform: translateY( -2px );
	}
}

/* ---- sheen sweep across primary CTAs ---- */

.pxr-cta:not( .is-need ),
.pxr-sheet__ok,
.pxb-btn--grad,
.pxg-cta {
	position: relative;
	overflow: hidden;
}

.pxr-cta:not( .is-need )::after,
.pxr-sheet__ok::after,
.pxb-btn--grad::after,
.pxg-cta::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -70%;
	width: 45%;
	background: linear-gradient( 105deg, transparent, rgba( 255, 255, 255, .28 ), transparent );
	transform: skewX( -18deg );
	animation: pxg-sheen 3.4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes pxg-sheen {

	0%,
	64% {
		left: -70%;
	}

	100% {
		left: 130%;
	}
}

/* ---- unread badge pop + gentle bell nudge ---- */

.pxg .playrox-notify__badge:not( [hidden] ) {
	animation: pxg-pop .35s cubic-bezier( .34, 1.56, .64, 1 ) both;
}

@keyframes pxg-pop {

	from {
		transform: scale( 0 );
	}

	to {
		transform: scale( 1 );
	}
}

.pxg .playrox-notify__bell:has( .playrox-notify__badge:not( [hidden] ) ) svg {
	transform-origin: top center;
	animation: pxg-ding 5s ease-in-out infinite;
}

@keyframes pxg-ding {

	0%,
	86%,
	100% {
		transform: rotate( 0 );
	}

	88% {
		transform: rotate( 12deg );
	}

	91% {
		transform: rotate( -10deg );
	}

	94% {
		transform: rotate( 6deg );
	}

	97% {
		transform: rotate( -3deg );
	}
}

/* ---- tab pill + chip presses ---- */

.pxr-wallet__link,
.pxr-chip,
.pxg-nav__item {
	transition: transform .15s ease, background .2s ease, color .2s ease;
}

.pxr-chip:active,
.pxg-nav__item:active {
	transform: scale( .94 );
}

/* ---- history rows slide in when the tab opens ---- */

.pxr-panel.is-on .pxr-ord {
	animation: pxg-rise .45s cubic-bezier( .22, .9, .3, 1 ) both;
}

.pxr-panel.is-on .pxr-ord:nth-child(1) { animation-delay: .02s; }
.pxr-panel.is-on .pxr-ord:nth-child(2) { animation-delay: .07s; }
.pxr-panel.is-on .pxr-ord:nth-child(3) { animation-delay: .12s; }
.pxr-panel.is-on .pxr-ord:nth-child(4) { animation-delay: .17s; }
.pxr-panel.is-on .pxr-ord:nth-child(n+5) { animation-delay: .2s; }

/* ---- FAQ answers ease open ---- */

.pxb-faq p {
	animation: pxg-rise .3s ease both;
}

/* ---- reduced motion: everything decorative off ---- */

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

	.pxg-stagger > *,
	.pxg-pulse,
	.pxr-cta::after,
	.pxr-sheet__ok::after,
	.pxb-btn--grad::after,
	.pxg-cta::after,
	.pxg .playrox-notify__badge:not( [hidden] ),
	.pxg .playrox-notify__bell svg,
	.pxr-panel.is-on .pxr-ord,
	.pxb-faq p {
		animation: none !important;
	}

	.pxg-mission__bar i,
	.pxb-hero__track i,
	.pxg-card,
	.pxr-item,
	.pxr-ord,
	.pxb-menu__row,
	.pxg-tr {
		transition: none !important;
	}
}

/* Crystal gem: a touch of lift so it separates from dark card fills. */
.pxg-i--gem {
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, .45 ) );
}

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

	.pxg-pfp {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Drifting star field
#
# Crescent-and-star motif behind the room. Sits under everything
# (.pxg-wrap is z-index 1), never takes pointer events, and only
# animates transform/opacity so it costs nothing on scroll.
--------------------------------------------------------------*/

.pxg-sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	color: var( --pxg-sky, #0FA958 );
}

.pxg-sky__star {
	position: absolute;
	display: block;
	animation-name: pxg-sky-drift, pxg-sky-twinkle;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite, infinite;
	will-change: transform, opacity;
}

.pxg-sky__star svg {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow( 0 0 6px currentColor );
}

/* Stars rise and drift slightly across, so the field reads as depth
   rather than a sheet sliding past. */
@keyframes pxg-sky-drift {

	from {
		transform: translate3d( 0, 18vh, 0 ) rotate( 0deg );
	}

	to {
		transform: translate3d( 6vw, -110vh, 0 ) rotate( 180deg );
	}
}

@keyframes pxg-sky-twinkle {

	0%,
	100% {
		opacity: .18;
	}

	50% {
		opacity: .55;
	}
}

/* The crescent is the anchor of the motif: large, very soft, and slow
   enough that you notice it only if you look for it. */
.pxg-sky__moon {
	position: absolute;
	top: 6%;
	right: -12%;
	width: 260px;
	height: 260px;
	opacity: .07;
	animation: pxg-sky-float 26s ease-in-out infinite;
}

.pxg-sky__moon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow( 0 0 40px currentColor );
}

@keyframes pxg-sky-float {

	0%,
	100% {
		transform: translate3d( 0, 0, 0 ) scale( 1 );
	}

	50% {
		transform: translate3d( -14px, 22px, 0 ) scale( 1.05 );
	}
}

@media ( max-width: 600px ) {

	.pxg-sky__moon {
		width: 180px;
		height: 180px;
		right: -18%;
		opacity: .06;
	}
}

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

	.pxg-sky__star,
	.pxg-sky__moon {
		animation: none;
	}

	.pxg-sky__star {
		opacity: .22 !important;
	}
}

/*--------------------------------------------------------------
# Search suggestions
#
# Shown on focus while the box is empty: trending titles and the
# player's own recent games. Picking one fills the field and runs
# the normal filter, so there is no second search path.
--------------------------------------------------------------*/

.pxg-search__clear {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .08 );
	color: var( --pxg-mut );
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
}

.pxg-search__clear:hover {
	background: rgba( 255, 255, 255, .14 );
	color: var( --pxg-ink );
}

.pxg-suggest {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 62vh;
	overflow-y: auto;
	padding: 8px;
	border-radius: var( --pxg-r-lg );
	border: 1px solid var( --pxg-line );
	background: var( --pxg-card );
	box-shadow: 0 22px 50px rgba( 2, 2, 12, .65 );
	animation: pxg-suggest-in .18s cubic-bezier( .22, .9, .3, 1 );
}

@keyframes pxg-suggest-in {

	from {
		opacity: 0;
		transform: translateY( -6px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.pxg-suggest__head {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 8px 0 6px;
	padding: 0 8px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var( --pxg-mut );
}

.pxg-suggest__head:first-child {
	margin-top: 4px;
}

.pxg-suggest__row {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 10px 8px;
	border: 0;
	border-radius: var( --pxg-r-md );
	background: none;
	color: var( --pxg-ink );
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease;
}

.pxg-suggest__row:hover,
.pxg-suggest__row:focus-visible {
	background: rgba( 139, 92, 246, .12 );
	outline: none;
}

.pxg-suggest__ic {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 9px;
}

.pxg-suggest__ic--hot {
	background: rgba( 236, 72, 153, .15 );
	color: var( --pxg-pink );
}

.pxg-suggest__ic--recent {
	background: rgba( 56, 189, 248, .14 );
	color: var( --pxg-cyan );
}

.pxg-suggest__t {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pxg-suggest__tag {
	flex: 0 0 auto;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba( 236, 72, 153, .16 );
	color: var( --pxg-pink );
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pxg-suggest__go {
	flex: 0 0 auto;
	color: #5E6690;
	opacity: 0;
	transition: opacity .15s ease;
}

.pxg-suggest__row:hover .pxg-suggest__go {
	opacity: 1;
}

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

	.pxg-suggest {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Win celebration, confetti and the daily rewards ladder
--------------------------------------------------------------*/

.pxg-win {
	position: relative;
	margin: 16px 0 4px;
	text-align: center;
	animation: pxg-win-in .45s cubic-bezier( .34, 1.4, .64, 1 ) both;
}

.pxg-win__burst {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 190px;
	height: 190px;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 250, 204, 21, .28 ), transparent 68% );
	animation: pxg-burst 1.6s ease-out infinite;
	pointer-events: none;
}

.pxg-win__hd {
	position: relative;
	display: block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var( --pxg-gold );
}

.pxg-win__amt {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 6px 0 2px;
	color: var( --pxg-ink );
	font-size: 34px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 4px 18px rgba( 250, 204, 21, .4 );
}

.pxg-win__amt svg {
	color: var( --pxg-gold );
}

.pxg-win__sub {
	position: relative;
	display: block;
	font-style: normal;
	font-size: 12.5px;
	color: var( --pxg-mut );
}

@keyframes pxg-win-in {

	from {
		opacity: 0;
		transform: scale( .82 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes pxg-burst {

	0% {
		opacity: .85;
		transform: translate( -50%, -50% ) scale( .5 );
	}

	100% {
		opacity: 0;
		transform: translate( -50%, -50% ) scale( 1.25 );
	}
}

/* ---- confetti ---- */

.pxg-confetti {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
}

.pxg-confetti.is-on {
	opacity: 1;
}

.pxg-confetti__bit {
	position: absolute;
	top: -14px;
	width: 8px;
	height: 13px;
	border-radius: 2px;
	animation-name: pxg-fall;
	animation-timing-function: cubic-bezier( .3, .6, .5, 1 );
	animation-fill-mode: both;
}

@keyframes pxg-fall {

	0% {
		opacity: 0;
		transform: translateY( 0 ) rotate( 0deg );
	}

	12% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateY( 340px ) rotate( 540deg );
	}
}

/* ---- coin readout flash ---- */

.pxg-flash {
	animation: pxg-flash 1.2s ease-out;
}

@keyframes pxg-flash {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba( 250, 204, 21, 0 );
	}

	25% {
		box-shadow: 0 0 0 4px rgba( 250, 204, 21, .35 );
	}
}

/* ---- 30-day ladder ---- */

/* Wide enough for six columns to breathe on a tablet or desktop, and
   capped by height so the grid never pushes the dialog off screen. */
.pxg-modal__box--wide {
	max-width: 520px;
	max-height: calc( 100dvh - 40px );
	overflow-y: auto;
}

.pxg-cal__hd {
	margin: 2px 0 4px;
	font-size: 18px;
	font-weight: 800;
	text-align: center;
}

.pxg-cal__sub {
	margin: 0 0 16px;
	text-align: center;
	font-size: 12.5px;
	color: var( --pxg-mut );
}

/*
 * All 30 days on screen at once, on any device. Six columns by five rows
 * fits the shortest phone: the tiles shrink with the viewport instead of
 * the grid scrolling, because a streak ladder you have to scroll stops
 * showing you the streak.
 *
 * The clamp floor is what a 5-row grid can afford inside a dialog on a
 * 640px-tall phone once the heading, subtitle and note are paid for.
 */
.pxg-cal {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: clamp( 3px, 1.1vw, 8px );
	padding: 2px;
}

.pxg-cal__day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	aspect-ratio: 1 / 1.06;
	padding: 2px;
	border: 1px solid var( --pxg-line-soft );
	border-radius: clamp( 8px, 2.4vw, 13px );
	background: var( --pxg-bg2 );
	color: var( --pxg-ink );
	font-family: inherit;
	transition: transform .15s ease, border-color .2s ease, background .2s ease;
}

.pxg-cal__day em {
	font-style: normal;
	font-size: clamp( 8px, 2.1vw, 10px );
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --pxg-mut );
	line-height: 1.1;
}

.pxg-cal__day b {
	font-size: clamp( 9px, 2.4vw, 12px );
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

/* The coin glyph is the first thing to go when space runs out — the day
   number and the amount carry the meaning. */
.pxg-cal__day svg {
	width: clamp( 9px, 2.6vw, 13px );
	height: clamp( 9px, 2.6vw, 13px );
	color: var( --pxg-gold );
}

.pxg-cal__tick {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	border-radius: inherit;
	background: rgba( 6, 20, 14, .74 );
	color: var( --pxg-green );
}

/* Claimed days step back so the eye lands on today's tile. */
.pxg-cal__day.is-done {
	border-color: rgba( 52, 211, 153, .3 );
	opacity: .85;
}

.pxg-cal__day.is-done .pxg-cal__tick {
	display: grid;
}

.pxg-cal__day.is-locked {
	opacity: .42;
}

/* Today: the only tile you can press, and it says so. */
.pxg-cal__day.is-now {
	border-color: var( --pxg-gold );
	background: linear-gradient( 160deg, rgba( 250, 204, 21, .2 ), rgba( 236, 72, 153, .1 ) );
	cursor: pointer;
	animation: pxg-cal-pulse 2s ease-in-out infinite;
}

.pxg-cal__day.is-now:active {
	transform: scale( .94 );
}

.pxg-cal__day.is-next {
	opacity: .8;
	border-color: var( --pxg-line );
}

.pxg-cal__day.is-big b {
	color: var( --pxg-gold );
}

.pxg-cal__day.is-big::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --pxg-pink );
}

@keyframes pxg-cal-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba( 250, 204, 21, .3 );
	}

	50% {
		box-shadow: 0 0 0 5px rgba( 250, 204, 21, .07 );
	}
}

.pxg-cal__note {
	margin: 14px 0 0;
	text-align: center;
	font-size: 11.5px;
	color: var( --pxg-mut );
}

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

	.pxg-win,
	.pxg-win__burst,
	.pxg-cal__day.is-now,
	.pxg-flash {
		animation: none;
	}
}

/* The ladder has to fit whole on the shortest phones, so the chrome around
   it gives up space first. */
@media ( max-height: 720px ) {

	.pxg-cal__hd {
		font-size: 16px;
	}

	.pxg-cal__sub {
		margin-bottom: 10px;
		font-size: 11.5px;
	}

	.pxg-cal__note {
		margin-top: 10px;
		font-size: 10.5px;
	}
}

@media ( max-height: 620px ) {

	.pxg-cal__note {
		display: none;
	}

	.pxg-modal--center .pxg-modal__box--wide {
		padding: 18px 14px 16px;
	}
}

/* Roomier screens can afford bigger, squarer tiles. */
@media ( min-width: 560px ) {

	.pxg-cal {
		gap: 9px;
	}

	.pxg-cal__day {
		aspect-ratio: 1 / 1;
		gap: 3px;
	}
}

/*--------------------------------------------------------------
# Daily bonus card: ready vs spent
#
# The card used to disappear once claimed, which hid the one thing
# a player wants next — when it comes back. It now stays put with
# the countdown, matching how the spin card behaves.
--------------------------------------------------------------*/

.pxg-bonus__ready,
.pxg-bonus__next {
	display: none;
	font-size: 11.5px;
	color: var( --pxg-mut );
}

.pxg-bonus.is-ready .pxg-bonus__ready,
.pxg-bonus.is-used .pxg-bonus__next {
	display: inline;
}

.pxg-bonus__next i {
	font-style: normal;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --pxg-violet2 );
}

/* Spent cards step back so the eye goes to whatever is still actionable. */
.pxg-bonus.is-used,
.pxg-spin.is-used {
	opacity: .72;
}

.pxg-bonus.is-used .pxg-bonus__ic,
.pxg-spin.is-used .pxg-spin__wheel {
	filter: grayscale( .5 );
}

.pxg-bonus__btn[disabled],
.pxg-spin__btn[disabled] {
	cursor: not-allowed;
}

.pxg-bonus,
.pxg-spin {
	transition: opacity .3s ease;
}

/* A card that flipped to Resume mid-session gets one quick pulse, so the
   change is noticed rather than just silently different on return. */
.pxg-card__cta--justplayed {
	animation: pxg-cta-flip .5s cubic-bezier( .34, 1.4, .64, 1 );
}

@keyframes pxg-cta-flip {

	0% {
		transform: scale( .9 );
		opacity: .5;
	}

	60% {
		transform: scale( 1.06 );
	}

	100% {
		transform: scale( 1 );
		opacity: 1;
	}
}

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

	.pxg-card__cta--justplayed {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Reward notice
#
# Shown when coins land: daily spin, daily reward, any payout.
# Deliberately louder than the toast — earning is the payoff of
# the whole loop and a status line at the bottom of the screen
# was easy to miss.
--------------------------------------------------------------*/

.pxg-reward {
	position: fixed;
	top: calc( 16px + env( safe-area-inset-top ) );
	left: 50%;
	z-index: 999995;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min( 90vw, 340px );
	padding: 12px 18px 12px 13px;
	border-radius: 999px;
	border: 1px solid rgba( 250, 204, 21, .35 );
	background:
		linear-gradient( 120deg, rgba( 250, 204, 21, .16 ), rgba( 236, 72, 153, .12 ) ),
		#12122C;
	box-shadow: 0 16px 40px rgba( 2, 2, 12, .6 ), 0 0 0 1px rgba( 255, 255, 255, .04 ) inset;
	color: #fff;
	opacity: 0;
	transform: translate( -50%, -18px ) scale( .95 );
	transition: opacity .3s ease, transform .35s cubic-bezier( .34, 1.4, .64, 1 );
	pointer-events: none;
}

.pxg-reward.is-in {
	opacity: 1;
	transform: translate( -50%, 0 ) scale( 1 );
}

.pxg-reward__ic {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: rgba( 250, 204, 21, .16 );
	color: #FACC15;
}

.pxg-reward__txt {
	min-width: 0;
}

.pxg-reward__txt b {
	display: block;
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: #FACC15;
}

.pxg-reward__txt em {
	display: block;
	margin-top: 1px;
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	color: #8B93B8;
}

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

	.pxg-reward {
		transition: opacity .2s ease;
		transform: translate( -50%, 0 );
	}

	.pxg-reward.is-in {
		transform: translate( -50%, 0 );
	}
}

/*--------------------------------------------------------------
# Spin motion and the win moment
--------------------------------------------------------------*/

/* The disc's own rotation is set inline by the script; the transition is
   what makes it a spin rather than a jump. Long, heavily eased-out, so it
   flies then coasts to a stop the way a real wheel does. */
.pxg-wheel__disc {
	transition: transform 4.2s cubic-bezier( .12, .78, .12, 1 );
}

/* While it turns: the rim lights race and the pointer ticks. */
.pxg-wheel.is-spinning .pxg-wheel__bulbs i::after {
	animation-duration: .28s;
}

.pxg-wheel.is-spinning .pxg-wheel__pin {
	animation: pxg-pin-tick .12s ease-in-out infinite;
}

@keyframes pxg-pin-tick {

	0%,
	100% {
		transform: translateX( -50% ) rotate( 0deg );
	}

	50% {
		transform: translateX( -50% ) rotate( -9deg );
	}
}

.pxg-wheel.is-spinning .pxg-wheel__glow {
	animation-duration: .9s;
}

/* Landed: a ring of light bursts out from the rim once. */
.pxg-wheel.is-won .pxg-wheel__stage::after {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	border: 3px solid rgba( 255, 236, 150, .9 );
	animation: pxg-wheel-burst .9s ease-out 2;
	pointer-events: none;
}

@keyframes pxg-wheel-burst {

	0% {
		opacity: .95;
		transform: scale( 1 );
	}

	100% {
		opacity: 0;
		transform: scale( 1.3 );
	}
}

.pxg-wheel.is-won .pxg-wheel__hub {
	animation: pxg-hub-pop .5s cubic-bezier( .34, 1.56, .64, 1 );
}

@keyframes pxg-hub-pop {

	0% {
		transform: translate( -50%, -50% ) scale( 1 );
	}

	45% {
		transform: translate( -50%, -50% ) scale( 1.22 );
	}

	100% {
		transform: translate( -50%, -50% ) scale( 1 );
	}
}

/* The winning wedge is lit so the amount on screen is visibly the one the
   pointer landed on, rather than a number that merely appeared. */
.pxg-wheel__seg.is-hit {
	filter: brightness( 1.5 ) saturate( 1.25 );
}

.pxg-wheel__label.is-hit i {
	animation: pxg-hit .6s ease-out;
}

@keyframes pxg-hit {

	0%,
	100% {
		transform: scale( 1 );
	}

	40% {
		transform: scale( 1.18 );
	}
}

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

	.pxg-wheel.is-spinning .pxg-wheel__pin,
	.pxg-wheel.is-won .pxg-wheel__stage::after,
	.pxg-wheel.is-won .pxg-wheel__hub,
	.pxg-wheel__label.is-hit i {
		animation: none;
	}
}

/* "+N coins" rising from the tile or button that paid it. Positioned in
   viewport coordinates and removed after it lands. */
.pxg-float {
	position: fixed;
	z-index: 999996;
	transform: translate( -50%, -50% );
	font-size: 17px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #FACC15;
	text-shadow: 0 2px 8px rgba( 2, 2, 12, .9 );
	white-space: nowrap;
	pointer-events: none;
	animation: pxg-float-up 1.4s cubic-bezier( .2, .7, .3, 1 ) forwards;
}

@keyframes pxg-float-up {

	0% {
		opacity: 0;
		transform: translate( -50%, -50% ) scale( .7 );
	}

	18% {
		opacity: 1;
		transform: translate( -50%, -60% ) scale( 1.12 );
	}

	100% {
		opacity: 0;
		transform: translate( -50%, -190% ) scale( 1 );
	}
}

/*--------------------------------------------------------------
# Profile settings rows
--------------------------------------------------------------*/

.pxb-rows {
	display: flex;
	flex-direction: column;
}

.pxb-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var( --pxg-line-soft );
	font-size: 13.5px;
}

.pxb-row:last-child {
	border-bottom: 0;
}

.pxb-row--tap {
	cursor: pointer;
}

.pxb-row__k {
	min-width: 0;
	color: var( --pxg-mut );
}

.pxb-row__k b {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var( --pxg-ink );
}

.pxb-row__k em {
	display: block;
	margin-top: 1px;
	font-style: normal;
	font-size: 11.5px;
	color: var( --pxg-mut );
}

.pxb-row__v {
	flex: 0 0 auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --pxg-ink );
	text-align: right;
}

/* Switch, built from the checkbox itself so the label stays tappable and
   the control keeps its keyboard behaviour. */
.pxb-switch {
	position: relative;
	flex: 0 0 46px;
	width: 46px;
	height: 27px;
	margin: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .12 );
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background .2s ease;
}

.pxb-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #fff;
	transition: transform .2s cubic-bezier( .34, 1.4, .64, 1 );
}

.pxb-switch:checked {
	background: var( --pxg-grad );
}

.pxb-switch:checked::after {
	transform: translateX( 19px );
}

.pxb-switch:focus-visible {
	outline: 2px solid var( --pxg-violet2 );
	outline-offset: 2px;
}

/* The player's own motion switch, honoured everywhere the system setting is. */
.pxg-no-motion .pxg-stagger > *,
.pxg-no-motion .pxg-reward,
.pxg-no-motion .pxg-float,
.pxg-no-motion .pxb-page,
.pxg-no-motion .pxg-confetti__bit,
.pxg-no-motion .pxg-wheel__bulbs i::after,
.pxg-no-motion .pxg-wheel__pin,
.pxg-no-motion .pxg-wheel__glow,
.pxg-no-motion .pxg-win,
.pxg-no-motion .pxg-win__burst,
.pxg-no-motion .pxg-cal__day.is-now,
.pxg-no-motion .pxb-hero__ava::before,
.pxg-no-motion .pxg-pfp::before,
.pxg-no-motion .pxg-sky__star,
.pxg-no-motion .pxg-sky__moon,
.pxg-no-motion .pxg-pfp {
	animation: none !important;
}

/* The wheel still has to turn — it is the mechanic, not decoration — but it
   goes straight there instead of coasting for four seconds. */
.pxg-no-motion .pxg-wheel__disc {
	transition-duration: .6s;
}

.pxg-no-motion .pxg-card,
.pxg-no-motion .pxr-item,
.pxg-no-motion .pxb-menu__row {
	transition: none !important;
}

/* Extra chip tone, for a fourth prize category. */
.pxr-cat__ic--violet {
	color: var( --pxg-violet2 );
}

.pxr-cat__ic--cyan {
	color: var( --pxg-cyan );
}

/*--------------------------------------------------------------
# Rewards Store (pxst) — reference redesign
--------------------------------------------------------------*/

/* ===== Header ===== */

.pxst-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0 16px;
}

.pxst-title {
	margin: 0;
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.4px;
	line-height: 1.15;
	color: #fff;
}

.pxst-title em {
	font-style: normal;
	background: linear-gradient( 100deg, #A78BFA, #8B5CF6 );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.pxst-sub {
	margin: 5px 0 0;
	font-size: 12.5px;
	color: var( --pxg-mut );
}

.pxst-bal {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 3px;
	padding: 9px 15px;
	border-radius: 999px;
	background: rgba( 139, 92, 246, .1 );
	border: 1px solid rgba( 139, 92, 246, .34 );
	color: var( --pxg-violet2 );
	box-shadow: 0 0 18px rgba( 139, 92, 246, .12 );
}

.pxst-bal > b {
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: .1px;
	color: var( --pxg-violet2 );
}

/* ===== Search row ===== */

.pxst-search {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 18px;
}

.pxst-search__box {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 9px;
	height: 46px;
	padding: 0 15px;
	border-radius: 999px;
	background: rgba( 20, 20, 46, .72 );
	border: 1px solid rgba( 200, 205, 255, .1 );
	color: var( --pxg-mut );
	transition: border-color .15s ease;
}

.pxst-search__box:focus-within {
	border-color: rgba( 139, 92, 246, .5 );
}

.pxst-search__box input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	background: none;
	outline: none;
	font: inherit;
	font-size: 13.5px;
	color: var( --pxg-ink );
}

.pxst-search__box input::placeholder {
	color: var( --pxg-mut );
}

.pxst-search__box input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.pxst-search__btn {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: rgba( 20, 20, 46, .72 );
	border: 1px solid rgba( 200, 205, 255, .1 );
	color: var( --pxg-mut );
	transition: color .15s ease, border-color .15s ease, transform .12s ease;
}

.pxst-search__btn:active {
	transform: scale( .92 );
	color: var( --pxg-violet2 );
	border-color: rgba( 139, 92, 246, .4 );
}

/* ===== Category circles ===== */

.pxst-cats {
	display: flex;
	gap: 4px;
	margin: 0 -16px 22px;
	padding: 4px 16px 6px;
	overflow-x: auto;
	scrollbar-width: none;
}

.pxst-cats::-webkit-scrollbar {
	display: none;
}

.pxst-cat {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 84px;
	padding: 0;
}

.pxst-cat__disc {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba( 22, 22, 48, .85 );
	border: 1px solid rgba( 200, 205, 255, .1 );
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pxst-cat:active .pxst-cat__disc {
	transform: scale( .92 );
}

.pxst-cat__disc--violet { color: var( --pxg-violet2 ); }
.pxst-cat__disc--pink   { color: #F472B6; }
.pxst-cat__disc--green  { color: var( --pxg-green ); }
.pxst-cat__disc--cyan   { color: var( --pxg-cyan ); }
.pxst-cat__disc--red    { color: #FB7185; }
.pxst-cat__disc--gold   { color: var( --pxg-gold ); }
.pxst-cat__disc--mute   { color: var( --pxg-mut ); }

.pxst-cat > em {
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	color: var( --pxg-mut );
	white-space: nowrap;
	transition: color .15s ease;
}

.pxst-cat.is-on .pxst-cat__disc {
	background: rgba( 139, 92, 246, .16 );
	border-color: var( --pxg-violet );
	box-shadow: 0 0 0 3px rgba( 139, 92, 246, .18 ), 0 0 22px rgba( 139, 92, 246, .3 );
	color: var( --pxg-violet2 );
}

.pxst-cat.is-on > em {
	color: var( --pxg-gold );
}

/* ===== Section headers ===== */

.pxst-sec {
	margin-bottom: 26px;
	scroll-margin-top: 14px;
}

.pxst-sec__hd {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 14px;
}

.pxst-sec__ic {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
}

.pxst-sec__ic--gem {
	color: var( --pxg-violet2 );
}

.pxst-sec__tt {
	flex: 1;
	min-width: 0;
}

.pxst-sec__tt h3 {
	margin: 0;
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: -.2px;
	color: #fff;
}

.pxst-viewall {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba( 22, 22, 48, .85 );
	border: 1px solid rgba( 200, 205, 255, .1 );
	font-size: 11.5px;
	font-weight: 700;
	color: #C9CDF2;
}

.pxst-viewall:active {
	border-color: rgba( 139, 92, 246, .45 );
	color: var( --pxg-violet2 );
}

/* ===== Shared card bits ===== */

.pxst-cost {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var( --pxg-violet2 );
}

.pxst-cost b {
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: .1px;
}

.pxst-cost--sm b {
	font-size: 12px;
}

.pxst-cost__lbl {
	display: block;
	font-style: normal;
	font-size: 10.5px;
	color: var( --pxg-mut );
	margin-top: 1px;
}

.pxst-stock {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2px;
	white-space: nowrap;
}

.pxst-stock--violet {
	color: var( --pxg-violet2 );
	background: rgba( 139, 92, 246, .1 );
	border: 1px solid rgba( 139, 92, 246, .38 );
}

.pxst-stock--cyan {
	color: #5EEAD4;
	background: rgba( 45, 212, 191, .08 );
	border: 1px solid rgba( 45, 212, 191, .34 );
}

.pxst-stock--out {
	color: #FDA4AF;
	background: rgba( 244, 63, 94, .1 );
	border: 1px solid rgba( 244, 63, 94, .34 );
}

/* Full-card tap target. JS rewrites its label, so the text is kept
   for assistive tech but never painted. */
.pxst-hit {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	font-size: 0;
	color: transparent;
	overflow: hidden;
}

.pxst-hit[disabled] {
	cursor: default;
}

.pxst-ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: rgba( 200, 205, 255, .28 );
}

.pxst-flag {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba( 139, 92, 246, .9 );
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: #fff;
}

.pxst-flag--pink {
	background: rgba( 236, 72, 153, .9 );
}

/* ===== Top Prizes rail ===== */

.pxst-rail {
	display: flex;
	gap: 13px;
	margin: 0 -16px;
	padding: 4px 16px 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.pxst-rail::-webkit-scrollbar {
	display: none;
}

.pxst-top {
	position: relative;
	flex: 0 0 196px;
	display: flex;
	flex-direction: column;
	padding: 9px 11px 13px;
	border-radius: 22px;
	background: linear-gradient( 180deg, rgba( 26, 24, 58, .9 ), rgba( 15, 14, 36, .94 ) );
	scroll-snap-align: start;
	transition: transform .15s ease;
}

.pxst-top:active {
	transform: scale( .98 );
}

.pxst-top--violet {
	border: 1px solid rgba( 139, 92, 246, .5 );
	box-shadow: 0 0 24px rgba( 139, 92, 246, .16 ), inset 0 0 30px rgba( 139, 92, 246, .05 );
}

.pxst-top--cyan {
	border: 1px solid rgba( 45, 212, 191, .42 );
	box-shadow: 0 0 24px rgba( 45, 212, 191, .12 ), inset 0 0 30px rgba( 45, 212, 191, .04 );
}

.pxst-top__media {
	aspect-ratio: 4 / 5;
	margin-bottom: 11px;
	border-radius: 15px;
	overflow: hidden;
	background: #0B0B22;
}

.pxst-top__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pxst-top__name {
	margin: 0 0 6px;
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: -.1px;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxst-top .pxst-stock {
	margin-top: 10px;
}

/* ===== Popular rail (two scrolling rows) ===== */

.pxst-mini-rail {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 1fr 1fr;
	grid-auto-columns: 106px;
	gap: 10px;
	margin: 0 -16px;
	padding: 2px 16px 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.pxst-mini-rail::-webkit-scrollbar {
	display: none;
}

.pxst-mini {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 7px 8px 10px;
	border-radius: 15px;
	background: rgba( 22, 21, 50, .85 );
	border: 1px solid rgba( 200, 205, 255, .09 );
	transition: transform .15s ease, border-color .15s ease;
}

.pxst-mini:active {
	transform: scale( .95 );
	border-color: rgba( 139, 92, 246, .4 );
}

.pxst-mini__media {
	aspect-ratio: 4 / 5;
	margin-bottom: 7px;
	border-radius: 10px;
	overflow: hidden;
	background: #0B0B22;
}

.pxst-mini__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pxst-mini__name {
	margin: 0 0 4px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.3;
	color: #E7E9FB;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 27px;
}

.pxst-mini .pxst-cost {
	margin-bottom: 6px;
}

.pxst-mini .pxst-stock {
	padding: 3px 8px;
	font-size: 8.5px;
}

/* ===== More Rewards: chips + grid ===== */

.pxst-chips {
	display: flex;
	gap: 8px;
	margin: 0 -16px 15px;
	padding: 2px 16px;
	overflow-x: auto;
	scrollbar-width: none;
}

.pxst-chips::-webkit-scrollbar {
	display: none;
}

.pxst-chip {
	flex: 0 0 auto;
	padding: 9px 15px;
	border-radius: 999px;
	background: rgba( 22, 22, 48, .85 );
	border: 1px solid rgba( 200, 205, 255, .1 );
	font-size: 12px;
	font-weight: 700;
	color: var( --pxg-mut );
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.pxst-chip.is-on {
	color: var( --pxg-violet2 );
	background: rgba( 139, 92, 246, .13 );
	border-color: var( --pxg-violet );
	box-shadow: 0 0 14px rgba( 139, 92, 246, .18 );
}

.pxst-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.pxst-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	overflow: hidden;
	background: rgba( 22, 21, 50, .85 );
	border: 1px solid rgba( 200, 205, 255, .09 );
	transition: transform .15s ease, border-color .15s ease;
}

.pxst-card:active {
	transform: scale( .97 );
	border-color: rgba( 139, 92, 246, .4 );
}

.pxst-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: #0B0B22;
}

.pxst-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pxst-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 11px 12px 13px;
}

.pxst-card__body h4 {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	color: #E7E9FB;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pxst-card__foot {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* ===== Sold-out / locked treatment ===== */

.pxst-top.is-out,
.pxst-mini.is-out,
.pxst-card.is-out {
	opacity: .55;
	filter: saturate( .55 );
}

/* ===== History header ===== */

.pxst-histhd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.pxst-histhd h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	color: #fff;
}

.pxst-back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 13px 8px 9px;
	border-radius: 999px;
	background: rgba( 22, 22, 48, .85 );
	border: 1px solid rgba( 200, 205, 255, .1 );
	font-size: 12px;
	font-weight: 700;
	color: #C9CDF2;
}

.pxst-back:active {
	color: var( --pxg-violet2 );
	border-color: rgba( 139, 92, 246, .45 );
}

/* Wider phones: a touch more air in the top rail. */
@media ( min-width: 430px ) {

	.pxst-top {
		flex-basis: 212px;
	}

	.pxst-mini-rail {
		grid-auto-columns: 112px;
	}
}