/*--------------------------------------------------------------
# Mobile-first everywhere (temporary)
#
# The wide layout is switched off for now: its breakpoint is pushed
# past any real screen, and the phone rules are opened up to every
# width. The desktop CSS is untouched underneath — putting 981px and
# 980px back in these twomedia queries restores it in one step.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# PlayRox Game Room — V5 "Green Room"
#
# Light green-and-white design in the ZamZam Games reference
# style. One DOM serves both breakpoints: mobile is an app shell
# with a bottom nav; from 981px the top bar, hero stat strip and
# section sidebars take over.
#
# Everything is scoped to .pxz / body.playrox-gameroom-v5-page,
# so no other dashboard or the newsroom is affected.
--------------------------------------------------------------*/

.pxz {
	--pxz-green: #16A34A;
	--pxz-green-2: #22C55E;
	--pxz-green-dark: #006B3C;
	--pxz-green-soft: #E7F6EC;
	--pxz-ink: #0F172A;
	--pxz-mut: #64748B;
	--pxz-faint: #94A3B8;
	--pxz-bg: #F4F6F8;
	--pxz-card: #FFFFFF;
	--pxz-line: #E8ECF0;
	--pxz-gold: #F5B301;
	--pxz-gold-soft: #FEF3C7;
	--pxz-blue: #3B82F6;
	--pxz-dark: #006B3C;
	--pxz-radius: 18px;
	--pxz-shadow: 0 6px 22px rgba( 15, 23, 42, .06 );
	--pxz-grad: linear-gradient( 100deg, #22C55E, #006B3C );

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var( --pxz-ink );
	background: var( --pxz-bg );
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}

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

/* :where() keeps these resets at zero specificity, so every component
   rule below wins over them regardless of its own weight. */
.pxz :where( button, [type="button"], [type="submit"] ) {
	font-family: inherit;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	padding: 0;
}

.pxz :where( a ) {
	text-decoration: none;
	color: inherit;
}

.pxz :where( img ) {
	max-width: 100%;
	display: block;
}

.pxz .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Page chrome: the room is a full app surface. */
body.playrox-gameroom-v5-page .footer-outer,
body.playrox-gameroom-v5-page .colophon-outer {
	display: none;
}

body.playrox-gameroom-v5-page {
	background: #F4F6F8;
	overflow-x: hidden;
}

body.playrox-gameroom-v5-page .playrox-page-canvas {
	max-width: none;
	padding: 0;
	margin: 0;
}

/*--------------------------------------------------------------
# Theme isolation
#
# The room renders inside a news theme whose stylesheet styles bare
# element selectors — button, a, h2, article. Those beat a zero-
# specificity :where() reset, which is how the "See All" link picked
# up the old dark-green button skin. Everything below re-neutralises
# the theme at one class of specificity, so the room's own component
# rules (also one class, but later in the file) still win.
--------------------------------------------------------------*/

.pxz :where( button, [type="button"], [type="submit"] ) {
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.3;
	min-height: 0;
	width: auto;
	transition: none;
}

.pxz :where( h1, h2, h3, h4, h5, h6 ) {
	margin: 0;
	padding: 0;
	font-family: inherit;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

.pxz :where( h1, h2, h3, h4, h5, h6 )::before,
.pxz :where( h1, h2, h3, h4, h5, h6 )::after {
	content: none;
}

.pxz :where( p, ul, ol, li, figure ) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pxz :where( article, section, header, nav, aside, main ) {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

.pxz :where( input, select, textarea ) {
	box-shadow: none;
	line-height: 1.3;
	min-height: 0;
}

.pxz :where( a ):link,
.pxz :where( a ):visited,
.pxz :where( a ):hover,
.pxz :where( a ):active {
	color: inherit;
	text-decoration: none;
}

/* Generated cover art fills its tile whatever the theme says about svg. */
.pxz .pxg-card__art {
	width: 100%;
	height: 100%;
	display: block;
}

.pxz .pxz-game__cover img,
.pxz .pxz-game__cover svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*--------------------------------------------------------------
# Shell
--------------------------------------------------------------*/

.pxz-main {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding: 14px 16px calc( 86px + env( safe-area-inset-bottom, 0px ) );
	flex: 1;
}

.pxz-pane {
	display: none;
	animation: pxz-in .28s ease both;
}

.pxz-pane.is-on {
	display: block;
}

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

.pxz-empty {
	margin: 26px 4px;
	color: var( --pxz-mut );
	font-size: 14px;
	text-align: center;
}

/*--------------------------------------------------------------
# Mobile pane headers
--------------------------------------------------------------*/

.pxz-mhead {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 2px 0 12px;
	position: relative;
}

.pxz-mhead--brand {
	justify-content: space-between;
}

.pxz-mhead--end {
	justify-content: flex-end;
}

.pxz-mhead__title {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.2px;
}

.pxz-mhead__bell {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	color: var( --pxz-ink );
	box-shadow: var( --pxz-shadow );
}

.pxz-mhead__signin {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: var( --pxz-green );
	border-radius: 99px;
	padding: 9px 16px;
}

/* Brand wordmark: first word ink, last word green — as the
   reference logo does. */
.pxz-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.pxz-brand__img {
	max-height: 40px;
	width: auto;
}

.pxz-brand__txt {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	font-weight: 900;
	letter-spacing: -.4px;
	text-transform: uppercase;
	font-size: 19px;
}

.pxz-brand__txt b {
	color: var( --pxz-ink );
	font-weight: 900;
}

.pxz-brand__txt i {
	font-style: normal;
	color: var( --pxz-green );
}

/*--------------------------------------------------------------
# Desktop top bar (hidden on mobile)
--------------------------------------------------------------*/

.pxz-topbar {
	display: none;
}

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

.pxz-hero {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: var( --pxz-dark );
	background-size: cover;
	background-position: center top;
	box-shadow: 0 16px 40px rgba( 5, 46, 22, .22 );
}

.pxz-hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient( 180deg, rgba( 4, 15, 8, .18 ) 0%, rgba( 4, 15, 8, .05 ) 38%, rgba( 4, 15, 8, .82 ) 86% );
}

.pxz-hero__brush {
	position: absolute;
	top: -50px;
	left: -60px;
	width: 240px;
	height: 240px;
	background: radial-gradient( circle at 30% 30%, rgba( 34, 197, 94, .5 ), transparent 65% );
	transform: rotate( -18deg );
	pointer-events: none;
}

.pxz-hero__copy {
	position: relative;
	padding: 0 22px 20px;
	text-align: center;
}

.pxz-hero__script {
	display: block;
	font-style: italic;
	font-weight: 600;
	color: #E8FBEE;
	font-size: 15px;
	margin-bottom: 6px;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, .5 );
}

.pxz-hero__name {
	margin: 0;
	color: #fff;
	font-size: 34px;
	line-height: .98;
	font-weight: 900;
	letter-spacing: -.5px;
	text-transform: uppercase;
	text-shadow: 0 3px 16px rgba( 0, 0, 0, .55 );
}

.pxz-hero__name span {
	display: block;
}

.pxz-hero__name b {
	display: block;
	color: var( --pxz-green-2 );
}

.pxz-hero__motto {
	margin: 10px 0 0;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 4px;
}

/* Stat strip: desktop only. */
.pxz-hero__strip {
	display: none;
}

/*--------------------------------------------------------------
# Coin / crystal stat cards
--------------------------------------------------------------*/

.pxz-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 14px;
}

.pxz-stat {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: var( --pxz-radius );
	padding: 13px 14px;
	box-shadow: var( --pxz-shadow );
}

.pxz-stat__ic {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex: none;
}

.pxz-stat__ic--coin {
	background: var( --pxz-gold-soft );
}

.pxz-stat__ic--gem {
	background: #DBEAFE;
}

.pxz-stat__txt {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

.pxz-stat__txt b {
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxz-stat__txt em {
	font-style: normal;
	font-size: 11.5px;
	color: var( --pxz-mut );
	font-weight: 600;
}

.pxz-stat__add {
	margin-left: auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var( --pxz-green );
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	display: grid;
	place-items: center;
	flex: none;
	transition: transform .15s ease;
}

.pxz-stat__add:active {
	transform: scale( .92 );
}

/*--------------------------------------------------------------
# Play & Earn CTA
--------------------------------------------------------------*/

.pxz-earn {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	margin-top: 12px;
	background: var( --pxz-grad );
	border-radius: var( --pxz-radius );
	padding: 16px;
	color: #fff;
	text-align: left;
	box-shadow: 0 12px 26px rgba( 22, 163, 74, .32 );
	transition: transform .15s ease;
}

.pxz-earn:active {
	transform: scale( .985 );
}

.pxz-earn__ic {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba( 4, 32, 15, .35 );
	flex: none;
}

.pxz-earn__txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pxz-earn__txt b {
	font-size: 16px;
	font-weight: 900;
	letter-spacing: .6px;
}

.pxz-earn__txt em {
	font-style: normal;
	font-size: 12.5px;
	opacity: .92;
	font-weight: 500;
}

.pxz-earn__go {
	margin-left: auto;
	opacity: .95;
	flex: none;
}

/*--------------------------------------------------------------
# Free coins card
--------------------------------------------------------------*/

.pxz-free {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: var( --pxz-radius );
	padding: 13px 14px;
	box-shadow: var( --pxz-shadow );
}

.pxz-free__ic {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var( --pxz-green-soft );
	color: var( --pxz-green );
	flex: none;
}

.pxz-free__txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pxz-free__txt b {
	font-size: 14.5px;
	font-weight: 800;
}

.pxz-free__txt em {
	font-style: normal;
	font-size: 12px;
	color: var( --pxz-mut );
}

.pxz-free__btn {
	margin-left: auto;
	flex: none;
	background: var( --pxz-gold );
	color: #3B2A00;
	font-size: 13px;
	font-weight: 800;
	border-radius: 99px;
	padding: 9px 18px;
	box-shadow: 0 6px 14px rgba( 245, 179, 1, .35 );
	transition: transform .15s ease;
}

.pxz-free__btn:active {
	transform: scale( .94 );
}

.pxz-free.is-claimed .pxz-free__btn {
	background: var( --pxz-line );
	color: var( --pxz-mut );
	box-shadow: none;
	cursor: default;
}

/*--------------------------------------------------------------
# Section headings + trending rail
--------------------------------------------------------------*/

.pxz-sec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20px 2px 10px;
}

.pxz-sec__title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: -.2px;
}

.pxz-sec__more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var( --pxz-green );
	font-size: 13px;
	font-weight: 700;
}

.pxz-trend {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 10px;
}

/*--------------------------------------------------------------
# Game cards
--------------------------------------------------------------*/

.pxz-game {
	position: relative;
	min-width: 0;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: 16px;
	padding: 8px;
	box-shadow: var( --pxz-shadow );
	transition: transform .16s ease, box-shadow .16s ease;
}

.pxz-game:hover {
	transform: translateY( -3px );
	box-shadow: 0 12px 28px rgba( 15, 23, 42, .1 );
}

.pxz-game__launch {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.pxz-game__cover {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var( --pxz-green-soft );
}

.pxz-game__cover img,
.pxz-game__cover svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pxz-game__lock,
.pxz-game__flag {
	position: absolute;
	top: 7px;
	left: 7px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 800;
	color: #fff;
	background: rgba( 7, 19, 11, .75 );
	border-radius: 99px;
	padding: 4px 8px;
}

.pxz-game__flag {
	background: var( --pxz-green );
}

.pxz-game__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 8px 4px 4px;
}

.pxz-game__title {
	font-size: 13.5px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxz-game__cat {
	font-style: normal;
	font-size: 11.5px;
	color: var( --pxz-mut );
	font-weight: 500;
}

.pxz-game--mini {
	padding: 6px;
}

.pxz-game--mini .pxz-game__cover {
	border-radius: 11px;
}

.pxz-game--mini .pxz-game__title {
	font-size: 11.5px;
	/* Left, in line with the category under it — a centred title over a
	   left-aligned category read as a mistake. */
	text-align: left;
	padding-top: 2px;
}

.pxz-game--mini .pxz-game__body {
	padding: 4px 1px 1px;
}

/*--------------------------------------------------------------
# Games pane: search, chips, grid
--------------------------------------------------------------*/

.pxz-search {
	display: flex;
	align-items: center;
	gap: 9px;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: 99px;
	padding: 11px 16px;
	color: var( --pxz-faint );
	box-shadow: var( --pxz-shadow );
	margin-bottom: 12px;
}

.pxz-search input {
	border: 0;
	outline: none;
	background: none;
	width: 100%;
	font: inherit;
	font-size: 14px;
	color: var( --pxz-ink );
}

.pxz-search input::placeholder {
	color: var( --pxz-faint );
}

.pxz-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 10px;
	margin: 0 -2px 4px;
	scrollbar-width: none;
}

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

.pxz-chip {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	color: var( --pxz-ink );
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: 99px;
	padding: 8px 16px;
	transition: background .15s ease, color .15s ease;
}

.pxz-chip.is-on {
	background: var( --pxz-green );
	border-color: var( --pxz-green );
	color: #fff;
	box-shadow: 0 6px 14px rgba( 22, 163, 74, .3 );
}

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

.pxz-game.is-hidden {
	display: none;
}

/* Desktop-only bits, off on mobile. */
.pxz-side,
.pxz-deskhead {
	display: none;
}

/*--------------------------------------------------------------
# Rewards pane
--------------------------------------------------------------*/

.pxz-promo {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	min-height: 175px;
	display: flex;
	align-items: center;
	background-color: var( --pxz-dark );
	background-size: cover;
	background-position: center;
	margin-bottom: 14px;
	box-shadow: 0 14px 32px rgba( 5, 46, 22, .2 );
}

.pxz-promo__shade {
	position: absolute;
	inset: 0;
	/* Tinted with the brand green rather than near-black, so the banner
	   reads as dark green when no artwork is set behind it, and artwork
	   that is set keeps a green cast instead of a grey one. */
	background: linear-gradient( 92deg, rgba( 0, 63, 35, .82 ) 26%, rgba( 0, 107, 60, .22 ) 78% );
}

.pxz-promo__copy {
	position: relative;
	padding: 18px 20px;
	color: #fff;
}

.pxz-promo__copy b {
	display: block;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -.3px;
	line-height: 1.12;
	text-transform: uppercase;
}

.pxz-promo__green {
	color: var( --pxz-green-2 );
}

.pxz-promo__copy em {
	display: block;
	margin-top: 7px;
	font-style: italic;
	font-size: 12.5px;
	opacity: .92;
}

.pxz-prizes {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.pxz-prize {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: var( --pxz-radius );
	padding: 11px 12px;
	box-shadow: var( --pxz-shadow );
}

.pxz-prize.is-hidden {
	display: none;
}

.pxz-prize__thumb {
	width: 62px;
	height: 62px;
	border-radius: 13px;
	overflow: hidden;
	background: #F1F5F9;
	flex: none;
	display: grid;
	place-items: center;
}

.pxz-prize__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pxz-prize__blank {
	color: var( --pxz-faint );
}

.pxz-prize__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pxz-prize__title {
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxz-prize__stock {
	font-style: normal;
	font-size: 11.5px;
	color: var( --pxz-mut );
}

.pxz-prize__cost {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
}

.pxz-prize__cost b {
	font-size: 14px;
	font-weight: 800;
	color: var( --pxz-blue );
}

.pxz-prize__go {
	margin-left: auto;
	flex: none;
	background: var( --pxz-green );
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	border-radius: 99px;
	padding: 9px 17px;
	box-shadow: 0 6px 14px rgba( 22, 163, 74, .3 );
	transition: transform .15s ease, background .15s ease;
}

.pxz-prize__go:active {
	transform: scale( .94 );
}

.pxz-prize__go:disabled,
.pxz-prize.is-out .pxz-prize__go {
	background: var( --pxz-line );
	color: var( --pxz-mut );
	box-shadow: none;
	cursor: default;
}

/*--------------------------------------------------------------
# Profile pane
--------------------------------------------------------------*/

.pxz-profile {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.pxz-id {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: var( --pxz-radius );
	padding: 16px;
	box-shadow: var( --pxz-shadow );
}

.pxz-id__ring {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	padding: 3px;
	background: var( --pxz-grad );
	flex: none;
	color: #fff;
}

.pxz-id__ring img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid #fff;
	object-fit: cover;
}

.pxz-id__who {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pxz-id__who b {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxz-id__who em {
	font-style: normal;
	font-size: 13px;
	color: var( --pxz-mut );
}

.pxz-id__edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var( --pxz-ink );
	border: 1px solid var( --pxz-line );
	border-radius: 99px;
	padding: 7px 13px;
	background: var( --pxz-card );
}

.pxz-editbox {
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: var( --pxz-radius );
	padding: 14px;
	box-shadow: var( --pxz-shadow );
}

.pxz-editbox label {
	font-size: 12px;
	font-weight: 700;
	color: var( --pxz-mut );
	display: block;
	margin-bottom: 7px;
}

.pxz-editbox__row {
	display: flex;
	gap: 8px;
}

.pxz-editbox__row input {
	flex: 1;
	min-width: 0;
	border: 1px solid var( --pxz-line );
	border-radius: 12px;
	padding: 10px 13px;
	font: inherit;
	font-size: 14px;
	outline: none;
}

.pxz-editbox__row input:focus {
	border-color: var( --pxz-green );
}

.pxz-editbox__save {
	background: var( --pxz-green );
	color: #fff;
	font-size: 13.5px;
	font-weight: 800;
	border-radius: 12px;
	padding: 10px 18px;
}

.pxz-pstats {
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: var( --pxz-radius );
	padding: 15px;
	box-shadow: var( --pxz-shadow );
}

.pxz-pstats__row {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
	text-align: center;
}

.pxz-pstats__cell {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 2px;
}

.pxz-pstats__cell b {
	font-size: 15.5px;
	font-weight: 800;
}

.pxz-pstats__cell em {
	font-style: normal;
	font-size: 11.5px;
	color: var( --pxz-mut );
	font-weight: 600;
}

.pxz-pstats__star {
	color: var( --pxz-gold );
}

.pxz-pstats__xp {
	border-top: 1px solid var( --pxz-line );
	margin-top: 12px;
	padding-top: 12px;
}

.pxz-pstats__xphead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.pxz-pstats__xphead b {
	font-size: 13px;
	font-weight: 800;
}

.pxz-pstats__xphead em {
	font-style: normal;
	font-size: 12px;
	color: var( --pxz-mut );
	font-weight: 600;
}

.pxz-pstats__bar {
	display: block;
	height: 8px;
	border-radius: 99px;
	background: var( --pxz-line );
	overflow: hidden;
}

.pxz-pstats__bar i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var( --pxz-grad );
	transition: width .5s ease;
}

/*--------------------------------------------------------------
# Profile menu
--------------------------------------------------------------*/

.pxz-menu {
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: var( --pxz-radius );
	box-shadow: var( --pxz-shadow );
	overflow: hidden;
}

.pxz-menu__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 15px;
	text-align: left;
	border-bottom: 1px solid var( --pxz-line );
	transition: background .15s ease;
}

.pxz-menu__row:last-child {
	border-bottom: 0;
}

.pxz-menu__row:hover {
	background: #FAFBFC;
}

.pxz-menu__ic {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var( --pxz-green-soft );
	color: var( --pxz-green );
	flex: none;
}

.pxz-menu__txt {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.pxz-menu__txt b {
	font-size: 14px;
	font-weight: 700;
}

.pxz-menu__txt em {
	font-style: normal;
	font-size: 11.5px;
	color: var( --pxz-mut );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pxz-menu__chev {
	margin-left: auto;
	color: var( --pxz-faint );
	flex: none;
}

.pxz-fold {
	background: #FAFBFC;
	border-bottom: 1px solid var( --pxz-line );
	padding: 6px 15px 10px;
}

.pxz-fold__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px dashed var( --pxz-line );
}

.pxz-fold__row:last-child {
	border-bottom: 0;
}

.pxz-fold__row b {
	font-size: 13px;
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pxz-fold__row em {
	font-style: normal;
	font-size: 12px;
	color: var( --pxz-mut );
	flex: none;
}

.pxz-fold__none {
	margin: 8px 0;
	font-size: 12.5px;
	color: var( --pxz-mut );
}

.pxz-logout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #EEF1F4;
	color: #DC2626;
	font-size: 14.5px;
	font-weight: 800;
	border-radius: var( --pxz-radius );
	padding: 14px;
	margin-bottom: 6px;
}

.pxz-logout--in {
	background: var( --pxz-green );
	color: #fff;
}

/*--------------------------------------------------------------
# Bottom nav (mobile)
--------------------------------------------------------------*/

.pxz-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	justify-content: space-around;
	background: var( --pxz-card );
	border-top: 1px solid var( --pxz-line );
	padding: 8px 6px calc( 8px + env( safe-area-inset-bottom, 0px ) );
	box-shadow: 0 -8px 24px rgba( 15, 23, 42, .06 );
}

.pxz-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex: 1;
	color: var( --pxz-faint );
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px 0 2px;
	position: relative;
	transition: color .15s ease;
}

.pxz-nav__item.is-on {
	color: var( --pxz-green );
}

.pxz-nav__item.is-on::after {
	content: '';
	position: absolute;
	bottom: -3px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var( --pxz-green );
}

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

.pxz-toast {
	position: fixed;
	left: 50%;
	bottom: calc( 92px + env( safe-area-inset-bottom, 0px ) );
	transform: translateX( -50% );
	z-index: 999;
	background: var( --pxz-ink );
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 99px;
	padding: 11px 20px;
	max-width: min( 92vw, 420px );
	text-align: center;
	box-shadow: 0 14px 32px rgba( 15, 23, 42, .3 );
	animation: pxz-in .25s ease both;
}

/* Shared currency glyphs: gold coins, blue crystals — everywhere in
   the room, whatever text colour surrounds them. */
.pxz .pxg-i--coin {
	color: var( --pxz-gold );
}

.pxz .pxg-i--gem {
	color: var( --pxz-blue );
}

/* Games without artwork fall back to the platform's generated cover. */
.pxz .pxg-card__art {
	width: 100%;
	height: 100%;
	display: block;
}

/*--------------------------------------------------------------
# Account information (desktop only)
#
# The reference shows this open beside the profile menu on desktop.
# On mobile the same fields live behind the Settings row, so the
# card stays hidden there rather than lengthening the pane.
--------------------------------------------------------------*/
.pxz-account {
	display: none;
}

/* Notifications bell (shared component, reskinned). */
.pxz .playrox-notify {
	position: relative;
}

.pxz .playrox-notify__bell {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	color: var( --pxz-ink );
	position: relative;
}

.pxz .playrox-notify__badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 17px;
	height: 17px;
	border-radius: 99px;
	background: #DC2626;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	display: grid;
	place-items: center;
	padding: 0 4px;
}

.pxz .playrox-notify__badge[hidden] {
	display: none;
}

.pxz .playrox-notify__panel {
	position: absolute;
	top: calc( 100% + 10px );
	right: 0;
	width: min( 330px, 88vw );
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba( 15, 23, 42, .16 );
	z-index: 950;
	overflow: hidden;
}

.pxz .playrox-notify__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var( --pxz-line );
	font-size: 14px;
}

.pxz .playrox-notify__readall {
	color: var( --pxz-green );
	font-size: 12px;
	font-weight: 700;
}

.pxz .playrox-notify__list {
	max-height: 320px;
	overflow: auto;
	padding: 6px 14px;
	font-size: 13px;
}

/*--------------------------------------------------------------
# Desktop ≥ 981px
--------------------------------------------------------------*/

@media ( min-width: 99999px ) {

	.pxz-main {
		max-width: 1400px;
		padding: 24px 28px 40px;
	}

	/* Bottom nav goes, top bar comes. */
	.pxz-nav {
		display: none;
	}

	.pxz-mhead {
		display: none;
	}

	.pxz-topbar {
		position: sticky;
		top: 0;
		z-index: 920;
		display: flex;
		align-items: center;
		gap: 26px;
		background: var( --pxz-card );
		border-bottom: 1px solid var( --pxz-line );
		padding: 12px 28px;
	}

	.pxz-topbar__nav {
		display: flex;
		gap: 6px;
	}

	.pxz-topbar__link {
		font-size: 14px;
		font-weight: 700;
		color: var( --pxz-mut );
		padding: 9px 14px;
		border-radius: 99px;
		transition: color .15s ease, background .15s ease;
	}

	.pxz-topbar__link:hover {
		color: var( --pxz-ink );
	}

	.pxz-topbar__link.is-on {
		color: var( --pxz-green );
		background: var( --pxz-green-soft );
	}

	.pxz-topbar__tools {
		margin-left: auto;
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.pxz-topsearch {
		display: flex;
		align-items: center;
		gap: 8px;
		background: var( --pxz-bg );
		border: 1px solid var( --pxz-line );
		border-radius: 99px;
		padding: 8px 14px;
		color: var( --pxz-faint );
		width: 230px;
	}

	.pxz-topsearch input {
		border: 0;
		outline: none;
		background: none;
		width: 100%;
		font: inherit;
		font-size: 13px;
		color: var( --pxz-ink );
	}

	.pxz-topbar__me img {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 2px solid var( --pxz-green );
	}

	.pxz-topbar__signin {
		background: var( --pxz-green );
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		border-radius: 99px;
		padding: 9px 18px;
	}

	/* Hero: wide banner, copy left, stat strip along the bottom. */
	.pxz-hero {
		min-height: 330px;
		border-radius: 24px;
		background-position: center;
	}

	.pxz-hero__shade {
		background: linear-gradient( 94deg, rgba( 4, 15, 8, .78 ) 18%, rgba( 4, 15, 8, .12 ) 62%, rgba( 4, 15, 8, .45 ) 100% );
	}

	.pxz-hero__copy {
		position: absolute;
		left: 40px;
		top: 50%;
		transform: translateY( -62% );
		text-align: left;
		padding: 0;
		max-width: 460px;
	}

	.pxz-hero__name {
		font-size: 46px;
	}

	.pxz-hero__strip {
		position: relative;
		display: flex;
		align-items: center;
		gap: 26px;
		margin-top: auto;
		background: rgba( 255, 255, 255, .96 );
		border-radius: 0 0 24px 24px;
		padding: 14px 26px;
	}

	.pxz-hero__stat {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.pxz-hero__stat b {
		font-size: 15px;
		font-weight: 800;
	}

	.pxz-hero__stat em {
		font-style: normal;
		font-size: 12px;
		color: var( --pxz-mut );
		font-weight: 600;
	}

	.pxz-hero__staric {
		color: var( --pxz-gold );
		display: grid;
		place-items: center;
	}

	.pxz-hero__play {
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: var( --pxz-green );
		color: #fff;
		font-size: 14px;
		font-weight: 800;
		border-radius: 99px;
		padding: 11px 22px;
		box-shadow: 0 8px 18px rgba( 22, 163, 74, .32 );
	}

	/* Home extras sit in a comfortable column under the hero. */
	.pxz-stats {
		max-width: 560px;
		margin-top: 18px;
	}

	.pxz-earn,
	.pxz-free {
		max-width: 560px;
	}

	.pxz-trend {
		grid-template-columns: repeat( 8, 1fr );
	}

	/* Split panes: sidebar + content. */
	.pxz-split {
		display: grid;
		grid-template-columns: 210px 1fr;
		gap: 24px;
		align-items: start;
	}

	.pxz-side {
		display: flex;
		flex-direction: column;
		gap: 4px;
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: var( --pxz-radius );
		padding: 10px;
		box-shadow: var( --pxz-shadow );
		position: sticky;
		top: 84px;
	}

	.pxz-side__item {
		display: flex;
		align-items: center;
		gap: 9px;
		font-size: 13.5px;
		font-weight: 700;
		color: var( --pxz-mut );
		border-radius: 12px;
		padding: 11px 12px;
		text-align: left;
		transition: background .15s ease, color .15s ease;
	}

	.pxz-side__item:hover {
		background: #FAFBFC;
		color: var( --pxz-ink );
	}

	.pxz-side__item.is-on {
		background: var( --pxz-green );
		color: #fff;
	}

	.pxz-deskhead {
		display: block;
		margin: 2px 0 14px;
	}

	.pxz-deskhead h2 {
		margin: 0 0 4px;
		font-size: 23px;
		font-weight: 800;
		letter-spacing: -.3px;
	}

	.pxz-deskhead p {
		margin: 0;
		font-size: 13.5px;
		color: var( --pxz-mut );
	}

	/* Chips are the mobile control; the sidebar owns desktop. */
	.pxz-chips {
		display: none;
	}

	.pxz-pane [data-pxz-pane] .pxz-search,
	.pxz-split__main .pxz-search {
		max-width: 380px;
	}

	.pxz-grid {
		grid-template-columns: repeat( 4, 1fr );
		gap: 16px;
	}

	/* Rewards: catalogue becomes a card grid. */
	.pxz-prizes {
		display: grid;
		grid-template-columns: repeat( 4, 1fr );
		gap: 16px;
	}

	.pxz-prize {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
		padding: 12px;
		gap: 10px;
	}

	.pxz-prize__thumb {
		width: 100%;
		height: auto;
		/* 1950 x 1000 artwork — the same frame on every breakpoint, so a
		   prize photo is never cropped two different ways. */
		aspect-ratio: 39 / 20;
		border-radius: 12px;
	}

	.pxz-prize__go {
		margin-left: 0;
		width: 100%;
		padding: 10px;
	}

	.pxz-promo {
		min-height: 190px;
	}

	.pxz-promo__copy b {
		font-size: 26px;
	}

	/* Profile: menu becomes the left rail, identity + stats right. */
	.pxz-profile {
		display: grid;
		grid-template-columns: 250px 1fr;
		grid-template-areas:
			'menu id'
			'menu edit'
			'menu stats'
			'menu account'
			'menu logout';
		gap: 20px 24px;
		align-items: start;
	}

	.pxz-menu {
		grid-area: menu;
		position: sticky;
		top: 84px;
	}

	.pxz-id {
		grid-area: id;
		position: relative;
		overflow: hidden;
		padding: 26px 24px;
		background-color: var( --pxz-dark );
		border: 0;
		color: #fff;
		isolation: isolate;
	}

	.pxz-id::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: var( --pxz-id-img );
		background-size: cover;
		background-position: center;
		z-index: -2;
	}

	.pxz-id::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient( 94deg, rgba( 4, 15, 8, .88 ) 24%, rgba( 4, 15, 8, .3 ) 90% );
		z-index: -1;
	}

	.pxz-id__who em {
		color: rgba( 255, 255, 255, .75 );
	}

	.pxz-id__edit {
		background: rgba( 255, 255, 255, .14 );
		border-color: rgba( 255, 255, 255, .3 );
		color: #fff;
	}

	.pxz-editbox {
		grid-area: edit;
	}

	.pxz-pstats {
		grid-area: stats;
	}

	.pxz-logout {
		grid-area: logout;
		justify-self: start;
		padding: 13px 34px;
	}

	/* Account information: a card of its own under the stats, matching
	   the reference's labelled rows. */
	.pxz-account {
		display: block;
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: 18px;
		padding: 20px 22px 8px;
		box-shadow: var( --pxz-shadow );
		grid-area: account;
	}

	.pxz-account__h {
		margin: 0 0 4px;
		font-size: 15px;
		font-weight: 800;
		color: var( --pxz-ink );
	}

	.pxz-account__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 13px 0;
		border-bottom: 1px solid var( --pxz-line );
	}

	.pxz-account__row:last-child {
		border-bottom: 0;
	}

	.pxz-account__row b {
		font-size: 13px;
		font-weight: 600;
		color: var( --pxz-muted );
	}

	.pxz-account__row em {
		font-size: 13.5px;
		font-style: normal;
		font-weight: 600;
		color: var( --pxz-ink );
		text-align: right;
		word-break: break-word;
	}

	/* Rewards header carries the Sort by control on the right. */
	.pxz-deskhead--split {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 20px;
	}

	.pxz-sort {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		font-size: 13px;
		font-weight: 600;
		color: var( --pxz-muted );
		white-space: nowrap;
	}

	.pxz-sort select {
		font: inherit;
		font-weight: 600;
		color: var( --pxz-ink );
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: 10px;
		padding: 8px 12px;
		cursor: pointer;
	}

	.pxz-sort select:focus-visible {
		outline: 2px solid var( --pxz-green );
		outline-offset: 1px;
	}

	/* ---------- Top bar: icon nav, auth buttons ---------- */

	.pxz-topbar__link {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 22px 4px 20px;
		border-radius: 0;
		border-bottom: 3px solid transparent;
		background: none;
		color: var( --pxz-mut );
		font-size: 14.5px;
		font-weight: 600;
	}

	.pxz-topbar__link svg,
	.pxz-topbar__link .pxz-i {
		width: 18px;
		height: 18px;
		flex: 0 0 auto;
	}

	.pxz-topbar__link:hover { color: var( --pxz-ink ); }

	.pxz-topbar__link.is-on {
		color: var( --pxz-green );
		border-bottom-color: var( --pxz-green );
		background: none;
	}

	.pxz-topbar__nav { gap: 26px; }

	.pxz-auth {
		display: inline-flex;
		align-items: center;
		gap: 10px;
	}

	.pxz-auth__in,
	.pxz-auth__up {
		padding: 11px 24px;
		font-size: 14px;
		font-weight: 700;
		border-radius: 10px;
	}

	.pxz-auth__in { background: var( --pxz-green ); color: #fff; }
	.pxz-auth__up { background: var( --pxz-gold ); color: #3B2A02; }

	.pxz-topbar__me--guest {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		color: var( --pxz-mut );
	}

	/* ---------- Hero: art left, wallet + CTA right ---------- */

	.pxz-pane[data-pxz-pane="home"] { position: relative; }

	.pxz-hero {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		align-items: start;
		gap: 0;
		min-height: 420px;
		padding: 0;
		border-radius: 20px;
		overflow: visible;
		background-position: left center;
		background-size: cover;
	}

	.pxz-hero__copy {
		grid-column: 1;
		align-self: end;
		padding: 0 0 34px 38px;
	}

	/* One white bar over the art: coins, top-up, crystals, free coins. */
	.pxz-hero__strip {
		grid-column: 2;
		position: static;
		display: flex;
		align-items: center;
		gap: 0;
		width: auto;
		max-width: 100%;
		margin: 26px 26px 0 0;
		padding: 14px 18px;
		background: var( --pxz-card );
		border: 0;
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba( 4, 20, 10, .18 );
	}

	.pxz-hero__stat {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		padding: 0 16px;
		color: var( --pxz-ink );
		font-size: 15px;
	}

	.pxz-hero__stat:first-child { padding-left: 4px; }

	.pxz-hero__stat b {
		font-size: 19px;
		font-weight: 800;
		line-height: 1;
	}

	.pxz-hero__stat em {
		display: block;
		font-size: 11.5px;
		font-style: normal;
		color: var( --pxz-mut );
	}

	.pxz-hero__stat svg,
	.pxz-hero__stat .pxz-i { width: 26px; height: 26px; }

	/* Play Now becomes the round top-up control from the reference. */
	.pxz-hero__play {
		order: 1;
		width: 38px;
		height: 38px;
		min-width: 0;
		padding: 0;
		margin: 0 4px;
		font-size: 0;
		border-radius: 50%;
		background: var( --pxz-green );
		color: #fff;
		display: grid;
		place-items: center;
	}

	.pxz-hero__play svg { width: 18px; height: 18px; }

	.pxz-hero__stat:first-child { order: 0; }
	.pxz-hero__stat:nth-child( 2 ) { order: 2; }
	.pxz-hero__free { order: 3; }

	/* Level duplicates the XP bar on Profile. */
	.pxz-hero__stat:nth-child( 3 ) { display: none; }

	.pxz-hero__free {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding-left: 16px;
		margin-left: 6px;
		border-left: 1px solid var( --pxz-line );
	}

	.pxz-hero__freeic {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border-radius: 10px;
		background: var( --pxz-gold-soft );
		color: var( --pxz-gold );
	}

	.pxz-hero__freetxt b {
		display: block;
		font-size: 13.5px;
		font-weight: 800;
		color: var( --pxz-ink );
		white-space: nowrap;
	}

	.pxz-hero__freetxt em {
		display: block;
		font-size: 11.5px;
		font-style: normal;
		color: var( --pxz-mut );
		white-space: nowrap;
	}

	.pxz-hero__claim {
		padding: 9px 18px;
		font-size: 13.5px;
		font-weight: 800;
		color: #3B2A02;
		background: var( --pxz-gold );
		border-radius: 10px;
	}

	.pxz-hero__claim:disabled {
		background: var( --pxz-line );
		color: var( --pxz-faint );
	}

	/* Play & Earn overlays the banner: absolute, so Trending Games is not
	   dragged up into the art the way a negative margin would. */
	.pxz-earn {
		position: absolute;
		top: 168px;
		right: 26px;
		z-index: 3;
		width: min( 630px, 44% );
		margin: 0;
		padding: 30px 28px;
		border-radius: 18px;
		gap: 20px;
		box-shadow: 0 16px 40px rgba( 12, 74, 36, .3 );
	}

	.pxz-earn__ic {
		width: auto;
		height: auto;
		background: none;
	}

	.pxz-earn__ic svg,
	.pxz-earn__ic .pxz-i { width: 42px; height: 42px; }

	.pxz-earn__txt b {
		font-size: 30px;
		letter-spacing: .01em;
		color: var( --pxz-gold );
	}

	.pxz-earn__txt em {
		font-size: 16px;
		color: rgba( 255, 255, 255, .92 );
	}

	/* The phone cards repeat the strip, so the wide layout drops them. */
	.pxz-stats,
	.pxz-free { display: none; }

	/* ---------- Trending: one dense row ---------- */

	.pxz-trend {
		grid-template-columns: repeat( 11, minmax( 0, 1fr ) );
		gap: 12px;
		overflow: visible;
	}

	.pxz-trend .pxz-game__cover { aspect-ratio: 4 / 5; }
	.pxz-trend .pxz-game__title { font-size: 13px; }

	/* ---------- Prize spotlight + quick links ---------- */

	.pxz-below {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) 380px;
		gap: 18px;
		margin: 22px 0 0;
	}

	.pxz-spot {
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		gap: 18px;
		min-height: 190px;
		padding: 26px 30px;
		overflow: hidden;
		border-radius: 18px;
		background: linear-gradient( 100deg, #FFF9E6 0%, #FEF3C7 46%, #FFFDF7 100% );
		border: 1px solid #F6E6B4;
	}

	.pxz-spot__crown {
		position: absolute;
		top: 22px;
		left: 30px;
		color: var( --pxz-gold );
	}

	.pxz-spot__copy { padding-left: 40px; min-width: 0; }

	.pxz-spot__kicker {
		display: block;
		font-size: 20px;
		font-weight: 600;
		color: #3F3A28;
	}

	.pxz-spot h3 {
		margin: 2px 0 4px;
		font-size: 34px;
		font-weight: 900;
		letter-spacing: -.01em;
		color: #14261A;
	}

	.pxz-spot em {
		display: block;
		font-size: 15px;
		font-style: normal;
		color: #6B7280;
	}

	.pxz-spot__cost {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		margin-top: 8px;
		font-size: 30px;
		font-weight: 800;
		color: var( --pxz-green-dark );
	}

	.pxz-spot__art img {
		max-height: 168px;
		width: auto;
		border-radius: 12px;
	}

	.pxz-spot__script {
		max-width: 130px;
		font-size: 26px;
		font-weight: 600;
		font-style: italic;
		line-height: 1.05;
		color: #14261A;
		font-family: Georgia, 'Times New Roman', serif;
	}

	.pxz-spot__hit {
		position: absolute;
		inset: 0;
		background: none;
	}

	.pxz-quick {
		display: grid;
		gap: 14px;
		align-content: start;
	}

	.pxz-quick__row {
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		padding: 20px;
		text-align: left;
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: 16px;
		box-shadow: var( --pxz-shadow );
		transition: border-color .15s ease;
	}

	.pxz-quick__row:hover { border-color: var( --pxz-green ); }

	.pxz-quick__ic {
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		flex: 0 0 auto;
		border-radius: 12px;
		background: var( --pxz-green-soft );
		color: var( --pxz-green );
	}

	.pxz-quick__txt { flex: 1 1 auto; min-width: 0; }

	.pxz-quick__txt b {
		display: block;
		font-size: 16px;
		font-weight: 800;
		color: var( --pxz-ink );
	}

	.pxz-quick__txt em {
		display: block;
		margin-top: 2px;
		font-size: 13px;
		font-style: normal;
		color: var( --pxz-mut );
	}

	.pxz-quick__go { color: var( --pxz-faint ); }

	/* ---------- Feature strip ---------- */

	.pxz-feats {
		display: grid;
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		gap: 16px;
		margin: 18px 0 30px;
	}

	.pxz-feat {
		display: flex;
		align-items: center;
		gap: 14px;
		min-width: 0;
		padding: 20px;
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: 16px;
		box-shadow: var( --pxz-shadow );
	}

	.pxz-feat__ic {
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		flex: 0 0 auto;
		border-radius: 50%;
	}

	.pxz-feat__ic--green {
		background: var( --pxz-green-soft );
		color: var( --pxz-green );
	}

	.pxz-feat__ic--blue {
		background: #E3EEFE;
		color: var( --pxz-blue );
	}

	.pxz-feat__txt b {
		display: block;
		font-size: 16px;
		font-weight: 800;
		white-space: nowrap;
		color: var( --pxz-ink );
	}

	.pxz-feat__txt em {
		display: block;
		margin-top: 1px;
		font-size: 13.5px;
		font-style: normal;
		color: var( --pxz-mut );
	}

	/* Narrower desktops: the spotlight stacks and trending eases off. */
	@media ( max-width: 1240px ) {

		.pxz-below { grid-template-columns: 1fr; }
		.pxz-trend { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
		.pxz-feats { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	}
}

@media ( min-width: 99999px ) and ( max-width: 1180px ) {

	.pxz-grid,
	.pxz-prizes {
		grid-template-columns: repeat( 3, 1fr );
	}

	.pxz-trend {
		grid-template-columns: repeat( 6, 1fr );
	}
}

/* Motion-sensitive visitors: keep the layout, drop the movement. */
@media ( prefers-reduced-motion: reduce ) {

	.pxz-pane,
	.pxz-toast {
		animation: none;
	}

	.pxz-game,
	.pxz-earn,
	.pxz-free__btn,
	.pxz-prize__go,
	.pxz-stat__add {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Desktop-only home blocks
#
# The spotlight, quick links and feature strip belong to the wide
# layout in the reference. On phones the Rewards tab already covers
# the same ground, so they stay out of the way.
--------------------------------------------------------------*/

@media ( max-width: 99998px ) {

	.pxz-below,
	.pxz-feats,
	.pxz-hero__free,
	.pxz-topbar__me--guest {
		display: none;
	}
}

/* Uploaded Icon Lobby artwork, wherever a glyph would have gone. */
.pxz-i {
	display: block;
	object-fit: contain;
}


/* These links set their own colour, so they need to outscore the
   visited-link reset in the isolation block. */
.pxz a.pxz-auth__in,
.pxz a.pxz-auth__up,
.pxz a.pxz-logout,
.pxz a.pxz-topbar__signin {
	color: inherit;
}

.pxz a.pxz-auth__in { color: #fff; }
.pxz a.pxz-auth__up { color: #3B2A02; }

/*--------------------------------------------------------------
# Footer
#
# One centred line rather than a column grid: the room is an app
# surface, and a full newsroom footer under it reads as a different
# website starting.
--------------------------------------------------------------*/

.pxz-foot {
	margin: 26px 0 0;
	padding: 22px 16px calc( 26px + env( safe-area-inset-bottom ) );
	text-align: center;
	border-top: 1px solid var( --pxz-line );
}

.pxz-foot__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var( --pxz-mut );
}

.pxz-foot__line a {
	color: var( --pxz-mut );
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.pxz-foot__line a:hover {
	color: var( --pxz-green );
	border-bottom-color: var( --pxz-green );
}

.pxz-foot__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
}

.pxz-foot__social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var( --pxz-mut );
	background: var( --pxz-bg );
	border: 1px solid var( --pxz-line );
	transition: color .15s ease, background .15s ease, transform .15s ease;
}

.pxz-foot__social a:hover {
	color: #fff;
	background: var( --pxz-green );
	border-color: var( --pxz-green );
	transform: translateY( -2px );
}

/* Mobile keeps clear of the fixed bottom nav. */
@media ( max-width: 99998px ) {

	.pxz-foot {
		padding-bottom: calc( 92px + env( safe-area-inset-bottom ) );
	}
}

/*--------------------------------------------------------------
# Interaction polish
--------------------------------------------------------------*/

.pxz-game,
.pxz-quick__row,
.pxz-feat,
.pxz-prize {
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.pxz-game:hover,
.pxz-quick__row:hover,
.pxz-feat:hover {
	transform: translateY( -3px );
	box-shadow: 0 12px 28px rgba( 15, 23, 42, .12 );
}

.pxz-earn,
.pxz-hero__claim,
.pxz-sheet__topup,
.pxz-auth__in,
.pxz-auth__up,
.pxz-prize__btn {
	transition: filter .15s ease, transform .15s ease;
}

.pxz-earn:hover,
.pxz-hero__claim:hover:not( :disabled ),
.pxz-auth__in:hover,
.pxz-auth__up:hover,
.pxz-prize__btn:hover {
	filter: brightness( 1.06 );
}

.pxz-topsearch:focus-within,
.pxz-search:focus-within {
	border-color: var( --pxz-green );
	box-shadow: 0 0 0 3px rgba( 34, 197, 94, .16 );
}

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

	.pxz-game,
	.pxz-quick__row,
	.pxz-feat,
	.pxz-foot__social a {
		transition: none;
	}

	.pxz-game:hover,
	.pxz-quick__row:hover,
	.pxz-feat:hover,
	.pxz-foot__social a:hover {
		transform: none;
	}
}

/*--------------------------------------------------------------
# Fixes for the theme's own chrome inside the room
--------------------------------------------------------------*/

/*
 * The floating avatar-and-coins dock is the theme's shortcut back into
 * the game portal. Inside the room it is a shortcut to where you already
 * are, and its Font Awesome glyphs are not loaded here, so it renders as
 * a broken image in the corner. Hide it on room pages only.
 */
body.playrox-gameroom-v5-page .playrox-dock,
body.playrox-gameroom-page .playrox-dock {
	display: none !important;
}

/*
 * The theme puts a hard border and an outline on button hover/focus,
 * which draws a black box around the nav items. Neutralised here, with
 * the room's own hover defined underneath.
 */
.pxz :where( button, a, input, select, textarea ):hover,
.pxz :where( button, a, input, select, textarea ):focus {
	outline: none;
	border-color: transparent;
	box-shadow: none;
}

.pxz :where( button, a ):focus-visible {
	outline: 2px solid var( --pxz-green );
	outline-offset: 2px;
}

@media ( min-width: 99999px ) {

	/* Nav hover: the label and its icon warm to green, and a soft rail
	   grows under it — the same gesture as the active tab, at half
	   strength, instead of a box. */
	.pxz-topbar__link {
		position: relative;
		border-bottom-color: transparent;
	}

	.pxz-topbar__link::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -3px;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: var( --pxz-green );
		transform: scaleX( 0 );
		transform-origin: center;
		transition: transform .18s ease;
	}

	.pxz-topbar__link:hover::after {
		transform: scaleX( .55 );
		opacity: .45;
	}

	.pxz-topbar__link.is-on::after {
		transform: scaleX( 1 );
		opacity: 1;
	}

	.pxz-topbar__link:hover {
		color: var( --pxz-green );
		background: none;
	}

	/* ---- Wallet strip: clickable, and above the banner art ---- */

	.pxz-hero__strip {
		position: relative;
		z-index: 4;
		pointer-events: auto;
	}

	.pxz-hero__stat--act {
		border-radius: 12px;
		padding: 6px 14px;
		cursor: pointer;
		transition: background .15s ease;
	}

	.pxz-hero__stat--act:hover {
		background: var( --pxz-green-soft );
	}

	/* The decorative shade must never sit over the controls. */
	.pxz-hero__shade,
	.pxz-hero__brush {
		z-index: 1;
		pointer-events: none;
	}

	.pxz-hero__copy {
		position: relative;
		z-index: 2;
	}

	/* ---- Trending rides up over the banner, as in the reference ---- */

	.pxz-sec {
		position: relative;
		z-index: 5;
		margin-top: -54px;
		padding: 18px 22px 0;
		background: var( --pxz-card );
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 26px rgba( 12, 30, 18, .10 );
	}

	.pxz-trend {
		position: relative;
		z-index: 5;
		grid-template-columns: repeat( 8, minmax( 0, 1fr ) );
		gap: 14px;
		margin: 0;
		padding: 0 22px 22px;
		background: var( --pxz-card );
		border-radius: 0 0 20px 20px;
		box-shadow: 0 14px 30px rgba( 12, 30, 18, .10 );
	}

	/* The banner keeps clear room underneath: the trending panel rides up
	   into that space, so the motto is not covered by it. */
	.pxz-hero {
		min-height: 480px;
		padding-bottom: 96px;
	}

	.pxz-hero__copy {
		padding-bottom: 86px;
	}

	/* Action cards stand on their own when no prize is set. */
	.pxz-below--noprize {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 99999px ) {

	/* The banner is artwork in its own right — the dark scrim over it was
	   there to protect text that now sits in its own corner. Gone. */
	.pxz-hero__shade {
		display: none;
	}

	/* Trending is one continuous white panel: the header and the card row
	   were separate boxes with a gap, so the banner showed through as a
	   green band and the covers looked sliced. */
	.pxz-sec {
		margin: -54px 0 0;
		padding: 18px 22px 14px;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 26px rgba( 12, 30, 18, .10 );
	}

	.pxz-trend {
		margin: 0;
		padding: 0 22px 22px;
		border-radius: 0 0 20px 20px;
		box-shadow: 0 14px 30px rgba( 12, 30, 18, .10 );
	}

	/* Covers keep their whole artwork: contain rather than crop, on the
	   card's own dark tile so portrait and square art both sit right. */
	.pxz-trend .pxz-game__cover {
		aspect-ratio: 4 / 5;
		background: var( --pxz-bg );
	}

	.pxz-trend .pxz-game__cover img {
		object-fit: cover;
		object-position: center;
	}

	/* Header avatar */
	.pxz-avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid var( --pxz-green );
		background: var( --pxz-green-soft );
	}

	.pxz-topbar__me--guest {
		width: auto;
		height: auto;
		border: 0;
	}
}

.pxz-avatar {
	border-radius: 50%;
	object-fit: cover;
}

/*--------------------------------------------------------------
# Hero copy vs. banner artwork
#
# Uploaded banners already carry the brand lockup and the motto, so
# repeating them in HTML stacked the same words twice. When custom
# art is set, the overlay text steps aside and the picture speaks.
--------------------------------------------------------------*/

.pxz-hero__copy--art {
	display: none;
}

/*--------------------------------------------------------------
# Prize strip as a pure banner
#
# With no prize configured but a banner uploaded, the strip is just
# the artwork — no title, cost or stock invented around it.
--------------------------------------------------------------*/

.pxz-spot--banner {
	display: block;
	padding: 0;
	overflow: hidden;
	background: none;
	border: 0;
}

.pxz-spot--banner .pxz-spot__copy,
.pxz-spot--banner .pxz-spot__crown,
.pxz-spot--banner .pxz-spot__script {
	display: none;
}

.pxz-spot--banner .pxz-spot__art {
	display: block;
	width: 100%;
}

.pxz-spot--banner .pxz-spot__art img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	border-radius: 18px;
}

/*--------------------------------------------------------------
# Mobile home: full-bleed hero
#
# The reference has the artwork running edge to edge and up behind
# the header, with the wallet card riding up over its lower edge.
# Everything here is phone-only; the desktop layout is untouched.
--------------------------------------------------------------*/

@media ( max-width: 99998px ) {

	/* Only the home header floats on the artwork. Applying this to every
	   pane put the Games and Rewards titles on top of their search bars. */
	.pxz-pane[data-pxz-pane="home"] .pxz-mhead {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 6;
		min-height: 56px;
		margin: 0;
		padding: 10px 16px 0;
	}

	.pxz-pane[data-pxz-pane="home"] .pxz-mhead__brand,
	.pxz-pane[data-pxz-pane="home"] .pxz-brand {
		position: absolute;
		left: 50%;
		transform: translateX( -50% );
		margin: 0;
	}

	/* On the artwork the wordmark needs to read light. */
	.pxz-mhead .pxz-brand__txt b,
	.pxz-mhead .pxz-brand__txt {
		color: #fff;
		text-shadow: 0 1px 8px rgba( 0, 0, 0, .35 );
	}

	.pxz-pane[data-pxz-pane="home"] .pxz-mhead__bell {
		margin-left: auto;
		background: rgba( 255, 255, 255, .16 );
		color: #fff;
		backdrop-filter: blur( 6px );
	}

	/* Home is the only pane with a banner, so only it goes full-bleed. */
	.pxz-pane[data-pxz-pane="home"] {
		position: relative;
	}

	.pxz-pane[data-pxz-pane="home"] .pxz-hero {
		margin: -14px -16px 0;
		border-radius: 0;
		box-shadow: none;
		min-height: 60vh;
		max-height: 560px;
		padding-top: 66px;
		background-position: center top;
	}

	/* The artwork carries the lockup; the HTML copy stays out of it. */
	.pxz-hero__copy--art {
		display: none;
	}

	/* Coins · + · Crystals as one card riding over the hero's edge. */
	.pxz-stats {
		position: relative;
		z-index: 3;
		display: flex;
		align-items: center;
		gap: 0;
		margin: -34px 0 12px;
		padding: 6px 4px;
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: 18px;
		box-shadow: 0 10px 26px rgba( 8, 32, 18, .16 );
	}

	.pxz-stat {
		flex: 1 1 0;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 10px 12px;
	}

	/* Crystals read right-aligned against the coins on the left. */
	.pxz-stats .pxz-stat:last-child {
		justify-content: flex-end;
	}

	.pxz-stat__add {
		position: relative;
		z-index: 2;
	}

	/* Play & Earn, then the claim strip, then Trending — as listed. */
	.pxz-earn {
		margin-bottom: 12px;
	}

	.pxz-free {
		margin-bottom: 6px;
	}

	.pxz-sec {
		margin-top: 16px;
	}
}

/*--------------------------------------------------------------
# Play & Earn card
#
# Supplied design, mapped onto the room's markup: .pxz-earn is the
# card, __ic the controller, __txt the copy, __go the arrow. The
# fixed 180px height and 39px title are the desktop figures; the
# phone keeps the same treatment at a size that fits its column.
--------------------------------------------------------------*/

.pxz-earn {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background: linear-gradient(
		135deg,
		#24cf3d 0%,
		#12ad43 48%,
		#006B3C 100%
	);
	border: 2px solid rgba( 255, 255, 255, .75 );
	border-radius: 22px;
	box-shadow:
		0 8px 22px rgba( 0, 80, 45, .18 ),
		inset 0 1px 0 rgba( 255, 255, 255, .25 );
}

/* Subtle glow bedded into the lower right. */
.pxz-earn::after {
	content: "";
	position: absolute;
	width: 180px;
	height: 180px;
	right: 25px;
	bottom: -100px;
	background: rgba( 0, 80, 50, .18 );
	border-radius: 50%;
	filter: blur( 25px );
	pointer-events: none;
}

.pxz-earn__ic,
.pxz-earn__txt,
.pxz-earn__go {
	position: relative;
	z-index: 2;
}

.pxz-earn__txt {
	flex: 1;
}

.pxz-earn__txt b {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 800;
	color: #FFE23B;
	letter-spacing: -1px;
	line-height: 1;
}

.pxz-earn__txt em {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #fff;
}

.pxz-earn__go {
	margin-left: auto;
	margin-right: 2px;
	color: #fff;
}

/* Phone: same card, sized for a 390px column. */
@media ( max-width: 99998px ) {

	.pxz-earn {
		height: 118px;
		padding: 18px 20px;
		gap: 18px;
	}

	.pxz-earn__ic {
		width: 62px;
		min-width: 62px;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		color: #fff;
	}

	.pxz-earn__ic svg,
	.pxz-earn__ic .pxz-i {
		width: 44px;
		height: 44px;
	}

	.pxz-earn__txt b {
		font-size: 24px;
		margin-bottom: 6px;
		display: block;
	}

	.pxz-earn__txt em {
		font-size: 14px;
		line-height: 1.35;
	}

	.pxz-earn__go svg,
	.pxz-earn__go .pxz-i {
		width: 28px;
		height: 28px;
	}
}

@media ( min-width: 99999px ) {

	.pxz-earn {
		/* The card overlays the banner; the base rule above sets
		   position: relative for its glow, so restate the placement. */
		position: absolute;
		top: 168px;
		right: 26px;
		z-index: 3;
		width: min( 630px, 44% );
		max-width: 630px;
		height: 180px;
		margin: 0;
		padding: 28px 30px;
		gap: 32px;
		display: flex;
		align-items: center;
	}

	.pxz-earn__ic {
		width: 105px;
		min-width: 105px;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		color: #fff;
		line-height: 1;
	}

	.pxz-earn__ic svg,
	.pxz-earn__ic .pxz-i {
		width: 84px;
		height: 62px;
	}

	.pxz-earn__txt b {
		display: block;
		font-size: 39px;
		line-height: 1;
		margin-bottom: 12px;
	}

	.pxz-earn__txt em {
		display: block;
		font-size: 23px;
		line-height: 1.35;
	}

	.pxz-earn__go svg,
	.pxz-earn__go .pxz-i {
		width: 44px;
		height: 44px;
		stroke-width: 1.4;
	}
}

/*--------------------------------------------------------------
# Hero art per breakpoint
#
# A 5:2 desktop banner cropped into a tall phone hero loses its
# subject entirely, so each breakpoint loads its own file. The
# desktop image stays on the element; the phone one arrives as a
# custom property and only takes over below 981px.
--------------------------------------------------------------*/

@media ( max-width: 99998px ) {

	.pxz-hero--split {
		background-image: var( --pxz-hero-mobile ) !important;
	}
}

/*--------------------------------------------------------------
# Mobile wallet bar
#
# Coins, the top-up button, crystals and the daily claim in one
# white strip riding over the hero — the same content the desktop
# hero strip carries, laid out for a phone.
--------------------------------------------------------------*/

@media ( max-width: 99998px ) {

	.pxz-wallet {
		position: relative;
		z-index: 3;
		display: flex;
		align-items: stretch;
		gap: 0;
		/* Sits just below the hero's edge, clipping it by a couple of
		   percent rather than sitting on top of it. The overlap is a
		   percentage so it stays proportional from a 360px phone to a
		   520px one, instead of looking deeper on the small screens. */
		margin: -2.5% -8px 12px;
		padding: 4px 2px;
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: 18px;
		box-shadow: 0 10px 26px rgba( 8, 32, 18, .16 );
		overflow: hidden;
	}

	/* Both halves lose their own card styling inside the bar. */
	.pxz-wallet .pxz-stats,
	.pxz-wallet .pxz-free {
		margin: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.pxz-wallet .pxz-stats {
		flex: 0 0 auto;
		padding: 0;
	}

	.pxz-wallet .pxz-stat {
		padding: 8px 5px;
		gap: 6px;
	}

	.pxz-wallet .pxz-stat__ic {
		width: 23px;
		height: 23px;
	}

	.pxz-wallet .pxz-stat b {
		font-size: 14px;
	}

	.pxz-wallet .pxz-stat em {
		font-size: 9px;
	}

	.pxz-wallet .pxz-stat__add {
		width: 24px;
		height: 24px;
		font-size: 16px;
	}

	/* Divider, then the claim half fills the rest of the bar. */
	.pxz-wallet .pxz-free {
		flex: 1 1 auto;
		min-width: 0;
		gap: 6px;
		padding: 8px 5px 8px 8px;
		border-left: 1px solid var( --pxz-line );
	}

	.pxz-wallet .pxz-free__ic {
		width: 23px;
		height: 23px;
		flex: 0 0 auto;
	}

	.pxz-wallet .pxz-free__ic svg,
	.pxz-wallet .pxz-free__ic .pxz-i {
		width: 17px;
		height: 17px;
	}

	.pxz-wallet .pxz-free__txt {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
	}

	/*
	 * The title wraps rather than truncating: "Free Coins Ready!" cut to
	 * "Free C…" tells a player nothing, and two short lines fit the bar's
	 * height without making it taller.
	 */
	.pxz-wallet .pxz-free__txt b {
		display: block;
		font-size: 10.5px;
		line-height: 1.15;
		white-space: normal;
		overflow-wrap: break-word;
	}

	/* Under ~430px the second line has to go, or the bar grows. */
	@media ( max-width: 430px ) {

		.pxz-wallet .pxz-free__txt em {
			display: none;
		}

		.pxz-wallet .pxz-free__txt b {
			font-size: 11px;
		}
	}

	.pxz-wallet .pxz-free__txt em {
		font-size: 8.5px;
		line-height: 1.25;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Claim: the reference's squared gold pill with its own border. */
	.pxz-wallet .pxz-free__btn {
		flex: 0 0 auto;
		margin-left: auto;
		padding: 6px 11px;
		font-size: 11.5px;
		font-weight: 800;
		color: #3B2A02;
		background: var( --pxz-gold );
		border: 1px solid rgba( 0, 0, 0, .07 );
		border-radius: 10px;
		box-shadow: 0 2px 6px rgba( 245, 179, 1, .32 );
	}

	.pxz-wallet .pxz-free__btn:disabled {
		background: var( --pxz-line );
		border-color: transparent;
		color: var( --pxz-faint );
		box-shadow: none;
	}

	/* The standalone stats card spacing no longer applies. */
	.pxz-stats {
		margin: 0;
		padding: 0;
	}
}

/* Desktop uses the hero strip instead, so the bar stays out of it. */
@media ( min-width: 99999px ) {

	.pxz-wallet {
		display: none;
	}
}

@media ( max-width: 99998px ) {

	/* Balances never truncate — "9.." is not a balance. The claim copy
	   is the flexible half of the bar, so it gives way instead. */
	.pxz-wallet .pxz-stats,
	.pxz-wallet .pxz-stat {
		flex: 0 0 auto;
		min-width: 0;
	}

	.pxz-wallet .pxz-stat b,
	.pxz-wallet .pxz-stat em {
		white-space: nowrap;
		overflow: visible;
		text-overflow: clip;
	}

	.pxz-wallet .pxz-free {
		flex: 1 1 0;
		min-width: 0;
	}
}

/*--------------------------------------------------------------
# Mobile header: one control, no wordmark
#
# The banner already carries the brand, so repeating it in text
# above the artwork said the same thing twice. What is left is the
# single round control on the right.
--------------------------------------------------------------*/

.pxz-mhead--bare {
	justify-content: flex-end;
}

.pxz-mhead--bare .pxz-mhead__bell {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: #fff;
	background: rgba( 255, 255, 255, .16 );
	border: 1px solid rgba( 255, 255, 255, .34 );
	backdrop-filter: blur( 6px );
	transition: background .15s ease;
}

.pxz-mhead--bare .pxz-mhead__bell:hover,
.pxz-mhead--bare .pxz-mhead__bell:active {
	background: rgba( 255, 255, 255, .28 );
}

/* The plus is artwork now, so it can be swapped in the Icon Lobby. */
.pxz-stat__add svg,
.pxz-stat__add .pxz-i {
	width: 16px;
	height: 16px;
}

.pxz-wallet .pxz-stat__add svg,
.pxz-wallet .pxz-stat__add .pxz-i {
	width: 14px;
	height: 14px;
}

/*--------------------------------------------------------------
# Hero: show the uploaded art at its own proportions
#
# The banner used to be sized by min-height and viewport height, so
# a 1600x640 or 1080x1350 upload was cropped by cover() to whatever
# shape the box happened to be — the "stretched, not the same size"
# problem. The box now takes the same aspect ratio the Icon Lobby
# asks for, so the file renders exactly as it was made.
#
# The decorative scrim over it is gone at both sizes: it dulled the
# artwork it was meant to sit behind.
--------------------------------------------------------------*/

.pxz-hero__shade {
	display: none;
}

@media ( max-width: 99998px ) {

	.pxz-pane[data-pxz-pane="home"] .pxz-hero {
		/*
		 * Artwork is still made at 1080 x 1350 (4:5), but a true 4:5 box
		 * is 488px tall on a 390px phone — most of the first screen, with
		 * the wallet and Play & Earn pushed under the fold. The box keeps
		 * the ratio until it would exceed 46vh, then holds there and the
		 * lower part of the picture crops. Anchored to the top so faces
		 * and the lockup stay visible.
		 */
		/* Height, not ratio: with aspect-ratio the max-height clamp made
		   the box give up width to keep its shape, so the banner stopped
		   reaching the right edge. A straight height keeps it full-bleed
		   and cover() handles the crop. */
		/*
		 * contain, not cover: cover fills the box by cropping, and on a
		 * tall phone (iPhone 15 and up) that crop ate the bottom of the
		 * artwork — where the lockup usually sits. The whole image is
		 * shown now, and the box follows the viewport with a ratio close
		 * to the recommended upload so there is little or no letterbox.
		 */
		/*
		 * Back to cover: contain showed the whole picture but left the
		 * page colour banded under it. Cover fills the frame, and the
		 * crop is centred rather than top-anchored so a tall upload
		 * loses a little sky and a little floor instead of its lockup.
		 * A 1080 x 1180 file matches this box and is not cropped at all.
		 */
		aspect-ratio: auto;
		height: min( 52vh, 92vw );
		min-height: 260px;
		max-height: 520px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
}

@media ( min-width: 99999px ) {

	.pxz-hero {
		/* 1600 x 640 */
		aspect-ratio: 5 / 2;
		min-height: 0;
		height: auto;
		background-size: cover;
		background-position: center;
	}
}

/*--------------------------------------------------------------
# Mobile: the two action cards under Trending
#
# Exclusive and Buy Coins sit side by side after the game row. The
# prize banner stays out on phones — the Rewards tab already leads
# with it, and at this width it would be a third full-width block
# before the player reaches anything else.
--------------------------------------------------------------*/

@media ( max-width: 99998px ) {

	.pxz-below {
		display: block;
		margin: 16px 0 0;
	}

	.pxz-below .pxz-spot {
		display: none;
	}

	.pxz-quick {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 10px;
	}

	/* Stacked at this width: an icon row plus two lines reads better
	   than a cramped horizontal card. */
	.pxz-quick__row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 9px;
		min-width: 0;
		padding: 14px 13px;
		text-align: left;
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: var( --pxz-radius );
		box-shadow: var( --pxz-shadow );
	}

	.pxz-quick__ic {
		display: grid;
		place-items: center;
		width: 38px;
		height: 38px;
		flex: 0 0 auto;
		border-radius: 11px;
		background: var( --pxz-green-soft );
		color: var( --pxz-green );
	}

	.pxz-quick__ic svg,
	.pxz-quick__ic .pxz-i {
		width: 20px;
		height: 20px;
	}

	.pxz-quick__txt {
		min-width: 0;
	}

	.pxz-quick__txt b {
		display: block;
		font-size: 13.5px;
		font-weight: 800;
		line-height: 1.2;
		color: var( --pxz-ink );
	}

	.pxz-quick__txt em {
		display: block;
		margin-top: 3px;
		font-size: 11px;
		font-style: normal;
		line-height: 1.3;
		color: var( --pxz-mut );
	}

	/* The chevron belongs to the wide layout's list rows. */
	.pxz-quick__go {
		display: none;
	}
}

/* Buy Coins while top-ups are switched off. */
.pxz-quick__row.is-soon {
	opacity: .72;
}

.pxz-quick__soon {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 4px 10px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #7A5B00;
	background: var( --pxz-gold-soft );
	border: 1px solid rgba( 245, 179, 1, .45 );
	border-radius: 99px;
	white-space: nowrap;
}

@media ( max-width: 99998px ) {

	.pxz-quick__soon {
		margin-left: 0;
	}
}

/*--------------------------------------------------------------
# Play & Win card — matched to the supplied reference
#
# Gradient stops, proportions and the crown were sampled from the
# artwork: bright #33B94A at the left shoulder falling to #003524
# on the right, with a slight lift at the far edge. The card is
# 4.6:1, so the type scale holds at any width.
--------------------------------------------------------------*/

.pxz-earn {
	background: linear-gradient(
		96deg,
		#33B94A 0%,
		#12A344 13%,
		#046C3B 30%,
		#004C30 52%,
		#003725 80%,
		#053F2D 100%
	);
	border: 1px solid rgba( 255, 255, 255, .38 );
	box-shadow:
		0 8px 22px rgba( 0, 60, 34, .22 ),
		inset 0 1px 0 rgba( 255, 255, 255, .18 );
}

/* Crown, bedded into the right side behind the arrow. */
.pxz-earn::after {
	content: "";
	position: absolute;
	right: 5%;
	bottom: -14%;
	width: 19%;
	max-width: 118px;
	aspect-ratio: 100 / 60;
	background: rgba( 255, 255, 255, .11 );
	border-radius: 0;
	filter: none;
	pointer-events: none;
	-webkit-mask: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M6 26l18 15L50 6l26 35 18-15-9 52H15z'/%3E%3Ccircle cx='6' cy='22' r='6'/%3E%3Ccircle cx='50' cy='4' r='6'/%3E%3Ccircle cx='94' cy='22' r='6'/%3E%3C/svg%3E" ) no-repeat center / contain;
	mask: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M6 26l18 15L50 6l26 35 18-15-9 52H15z'/%3E%3Ccircle cx='6' cy='22' r='6'/%3E%3Ccircle cx='50' cy='4' r='6'/%3E%3Ccircle cx='94' cy='22' r='6'/%3E%3C/svg%3E" ) no-repeat center / contain;
}

.pxz-earn__txt b {
	color: #F8DC54;
}

.pxz-earn__go {
	position: relative;
	z-index: 2;
}

@media ( min-width: 99999px ) {

	/* 4.6:1, as measured from the reference. */
	.pxz-earn {
		height: auto;
		aspect-ratio: 4.6 / 1;
		padding: 0 26px 0 30px;
		gap: 26px;
		border-radius: 16px;
	}

	.pxz-earn__ic {
		width: 92px;
		min-width: 92px;
		height: auto;
	}

	.pxz-earn__ic svg,
	.pxz-earn__ic .pxz-i {
		width: 74px;
		height: 56px;
	}

	.pxz-earn__txt b {
		font-size: 34px;
		margin-bottom: 8px;
	}

	.pxz-earn__txt em {
		font-size: 20px;
		line-height: 1.3;
	}

	.pxz-earn__go svg,
	.pxz-earn__go .pxz-i {
		width: 38px;
		height: 38px;
		stroke-width: 1.6;
	}
}

@media ( max-width: 99998px ) {

	.pxz-earn {
		height: auto;
		aspect-ratio: 4.6 / 1;
		min-height: 96px;
		padding: 0 14px 0 16px;
		gap: 12px;
		border-radius: 14px;
	}

	.pxz-earn__ic {
		width: 52px;
		min-width: 52px;
		height: auto;
	}

	.pxz-earn__ic svg,
	.pxz-earn__ic .pxz-i {
		width: 40px;
		height: 32px;
	}

	.pxz-earn__txt b {
		font-size: 21px;
		margin-bottom: 4px;
	}

	.pxz-earn__txt em {
		font-size: 12.5px;
		line-height: 1.25;
	}

	.pxz-earn__go svg,
	.pxz-earn__go .pxz-i {
		width: 24px;
		height: 24px;
	}
}

/*--------------------------------------------------------------
# Primary colour + crown placement
--------------------------------------------------------------*/

:root {
	--color-primary: #033B29;
}

.pxz {
	--pxz-primary: #033B29;
	--pxz-dark: #033B29;
	--pxz-green-dark: #033B29;
}

/* Crown in the bottom-right corner, its base cut by the card edge —
   smaller and lower than before, so it reads as sitting in the corner
   rather than floating beside the text. */
.pxz-earn::after {
	right: 3.5%;
	bottom: -9%;
	width: 17%;
	max-width: 104px;
}

/* An uploaded crown replaces the drawn one. */
.pxz-earn--crown::after {
	-webkit-mask: none;
	mask: none;
	background: var( --pxz-crown ) no-repeat center bottom / contain;
	opacity: .85;
}

/*--------------------------------------------------------------
# Card text alignment + icon scale
--------------------------------------------------------------*/

.pxz-game__body,
.pxz-game__title,
.pxz-game__cat {
	text-align: left;
}

/*
 * Icon size slider. Scaling with a transform keeps every layout box
 * exactly where it was — the icons grow inside their tiles instead of
 * pushing the nav, wallet and cards around.
 */
.pxz {
	--pxz-iscale: 1;
}

/*
 * Every icon the room draws, in one selector. The first version listed
 * containers by hand and missed most of them — chevrons, menu rows, the
 * bottom nav — so the slider only appeared to move a few icons.
 */
.pxz svg,
.pxz .pxz-i {
	/* --pxz-is is set inline on icons whose own slider differs from the
	   all-icons baseline; everything else follows --pxz-iscale. */
	transform: scale( var( --pxz-is, var( --pxz-iscale ) ) );
	transform-origin: center;
}

/*
 * Decorative artwork is sized by its own rules, not the icon slider.
 * Note this cannot exclude .pxz-hero wholesale — the wallet strip and
 * its coin, crystal, gift and plus icons live inside the banner.
 */
.pxz .pxz-spot__art svg,
.pxz .pxz-game__cover svg,
.pxz .pxz-prize__thumb svg,
.pxz .pxz-foot__social svg {
	transform: none;
}

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

	.pxz .pxz-i {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Trending: one row, always
#
# A grid wrapped onto a second row as soon as the catalogue grew.
# The row now scrolls sideways instead, so the section keeps its
# height whatever is published: eight across on desktop, three on
# a phone with the next one peeking to invite the swipe.
--------------------------------------------------------------*/

.pxz-trend {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pxz-trend::-webkit-scrollbar {
	display: none;
}

.pxz-trend .pxz-game {
	flex: 0 0 calc( ( 100% - 2 * 10px ) / 3.25 );
	scroll-snap-align: start;
}

@media ( min-width: 99999px ) {

	.pxz-trend {
		overflow-x: visible;
	}

	.pxz-trend .pxz-game {
		flex: 0 0 calc( ( 100% - 7 * 14px ) / 8 );
	}
}

/*--------------------------------------------------------------
# Mobile: prize banner under Trending, then the two action cards
--------------------------------------------------------------*/

@media ( max-width: 99998px ) {

	.pxz-below {
		display: grid;
		gap: 12px;
		margin: 16px 0 0;
	}

	/* The banner is no longer desktop-only. */
	.pxz-below .pxz-spot {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		align-items: center;
		gap: 10px;
		position: relative;
		overflow: hidden;
		padding: 16px 16px 16px 18px;
		border-radius: var( --pxz-radius );
		background: linear-gradient( 100deg, #FFF9E6 0%, #FEF3C7 46%, #FFFDF7 100% );
		border: 1px solid #F6E6B4;
	}

	.pxz-spot__crown {
		position: absolute;
		top: 12px;
		left: 16px;
		color: var( --pxz-gold );
	}

	.pxz-spot__crown svg {
		width: 18px;
		height: 18px;
	}

	.pxz-spot__copy {
		padding-left: 26px;
		min-width: 0;
	}

	.pxz-spot__kicker {
		display: block;
		font-size: 13px;
		font-weight: 600;
		color: #3F3A28;
	}

	.pxz-spot h3 {
		margin: 1px 0 2px;
		font-size: 21px;
		font-weight: 900;
		line-height: 1.1;
		color: #14261A;
	}

	.pxz-spot em {
		display: block;
		font-size: 12px;
		font-style: normal;
		color: #6B7280;
	}

	.pxz-spot__cost {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 5px;
		font-size: 19px;
		font-weight: 800;
		color: var( --pxz-green-dark );
	}

	.pxz-spot__art img {
		max-height: 96px;
		width: auto;
		border-radius: 10px;
	}

	/* The handwritten line needs room it does not have here. */
	.pxz-spot__script {
		display: none;
	}

	.pxz-spot__hit {
		position: absolute;
		inset: 0;
		background: none;
	}

	/* Banner-only mode fills the card edge to edge. */
	.pxz-spot--banner {
		display: block;
		padding: 0;
		border: 0;
		background: none;
	}

	.pxz-spot--banner .pxz-spot__art img {
		width: 100%;
		max-height: none;
		border-radius: var( --pxz-radius );
	}
}

/*--------------------------------------------------------------
# Spacing and affordance corrections
--------------------------------------------------------------*/

@media ( max-width: 99998px ) {

	/* The action cards keep their arrow: without it they read as panels
	   rather than something you tap. Pinned top-right so it clears the
	   stacked icon and copy. */
	.pxz-quick__row {
		position: relative;
		padding-right: 30px;
	}

	.pxz-quick__go {
		display: block;
		position: absolute;
		top: 14px;
		right: 12px;
		color: var( --pxz-faint );
		line-height: 0;
	}

	.pxz-quick__go svg,
	.pxz-quick__go .pxz-i {
		width: 16px;
		height: 16px;
	}

	/* Room between the controller and the copy. */
	.pxz-earn {
		gap: 16px;
	}

	/* Air on both sides of the wallet divider, so Crystals and the claim
	   strip are not pressed against the rule between them. */
	.pxz-wallet .pxz-stats {
		padding-right: 6px;
	}

	.pxz-wallet .pxz-free {
		margin-left: 6px;
		padding-left: 12px;
	}
}

@media ( min-width: 99999px ) {

	.pxz-earn {
		gap: 30px;
	}

	/* Same breathing room in the desktop hero strip. */
	.pxz-hero__free {
		padding-left: 20px;
		margin-left: 12px;
	}
}

/* CTA arrows: solid enough to read as an affordance, and centred on the
   card rather than tucked into the corner. */
.pxz-quick__go {
	color: var( --pxz-ink );
}

@media ( max-width: 99998px ) {

	.pxz-quick__go {
		top: 50%;
		right: 12px;
		transform: translateY( -50% );
		color: var( --pxz-ink );
	}

	.pxz-quick__go svg,
	.pxz-quick__go .pxz-i {
		width: 18px;
		height: 18px;
		stroke-width: 2.4;
	}
}

@media ( min-width: 99999px ) {

	.pxz-quick__go svg,
	.pxz-quick__go .pxz-i {
		stroke-width: 2.4;
	}
}

/*--------------------------------------------------------------
# Play & Win — typography and crown placement
--------------------------------------------------------------*/

/* Inter rather than Arial: the card is the loudest thing on the page and
   the system stack was reading as a placeholder. */
.pxz-earn__txt b {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 900;
	letter-spacing: -.5px;
}

.pxz-earn__txt em {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 500;
	letter-spacing: -.1px;
}

@media ( max-width: 99998px ) {

	/* More air between the controller and the copy. */
	.pxz-earn {
		gap: 22px;
		padding-left: 18px;
	}

	/*
	 * Crown moves off the corner and sits between the copy and the
	 * arrow — the position marked on the reference — so the arrow reads
	 * on its own and the crown is not half cut by the card edge.
	 */
	.pxz-earn::after {
		right: 13%;
		top: 50%;
		bottom: auto;
		transform: translateY( -50% );
		width: 21%;
		max-width: 86px;
	}
}

@media ( max-width: 99998px ) {

	/*
	 * No footer on phones. The bottom nav is the end of the screen, and
	 * the footer was also reserving its own clearance for that nav on top
	 * of the shell's — which is where the empty band under the cards came
	 * from. The legal links stay on desktop.
	 */
	.pxz-foot {
		display: none;
	}
}

/*--------------------------------------------------------------
# Rewards store (phones)
--------------------------------------------------------------*/

.pxz-store {
	display: none;
}

@media ( max-width: 99998px ) {

	/* The plain "Rewards" bar is replaced by the store header. */
	.pxz-mhead--store {
		display: none;
	}

	.pxz-store {
		display: block;
		margin: 0 0 14px;
	}

	.pxz-store__wallet {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 8px;
		margin-bottom: 16px;
	}

	.pxz-store__bal,
	.pxz-store__daily {
		display: flex;
		align-items: center;
		gap: 9px;
		min-width: 0;
		padding: 11px 12px;
		text-align: left;
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: 14px;
		box-shadow: var( --pxz-shadow );
	}

	.pxz-store__daily {
		grid-column: 1 / -1;
	}

	.pxz-store__bal span,
	.pxz-store__daily span {
		min-width: 0;
		flex: 1 1 auto;
	}

	.pxz-store__bal b,
	.pxz-store__daily b {
		display: block;
		font-size: 15px;
		font-weight: 800;
		line-height: 1.15;
		color: var( --pxz-ink );
		white-space: nowrap;
	}

	.pxz-store__bal em,
	.pxz-store__daily em {
		display: block;
		font-size: 11px;
		font-style: normal;
		color: var( --pxz-mut );
	}

	.pxz-store__daily b {
		font-size: 13.5px;
	}

	.pxz-store__daily > svg:last-child,
	.pxz-store__daily > .pxz-i:last-child {
		flex: 0 0 auto;
		color: var( --pxz-faint );
	}

	.pxz-store__title {
		margin: 0;
		font-size: 30px;
		font-weight: 900;
		letter-spacing: -.6px;
		color: var( --pxz-ink );
	}

	.pxz-store__title i {
		font-style: normal;
		color: var( --pxz-green );
	}

	.pxz-store__lede {
		margin: 4px 0 0;
		font-size: 13px;
		color: var( --pxz-mut );
	}

	/* Promo banner belongs to the wide layout. */
	.pxz-pane[data-pxz-pane="rewards"] .pxz-promo {
		display: none;
	}

	/* Prizes become a two-up card grid, as in the reference. */
	.pxz-prizes {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 10px;
	}

	.pxz-prize {
		display: flex;
		flex-direction: column;
		gap: 0;
		min-width: 0;
		padding: 0;
		overflow: hidden;
		background: var( --pxz-card );
		border: 1px solid var( --pxz-line );
		border-radius: 16px;
		box-shadow: var( --pxz-shadow );
	}

	.pxz-prize__thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 0;
		flex: 0 0 auto;
	}

	.pxz-prize__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.pxz-prize__info {
		padding: 10px 11px 12px;
		min-width: 0;
	}

	.pxz-prize__title {
		display: block;
		font-size: 13.5px;
		font-weight: 800;
		line-height: 1.25;
		color: var( --pxz-ink );
	}

	.pxz-prize__desc {
		display: block;
		margin-top: 2px;
		font-size: 11.5px;
		font-style: normal;
		line-height: 1.3;
		color: var( --pxz-mut );
	}

	/* Cost on the left, stock as a pill on the right. */
	.pxz-prize__cost {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		margin-top: 8px;
		font-size: 15px;
		font-weight: 800;
		color: var( --pxz-blue );
	}

	.pxz-prize__stock {
		display: inline-block;
		margin-top: 8px;
		margin-left: 8px;
		padding: 3px 9px;
		font-size: 10.5px;
		font-style: normal;
		font-weight: 700;
		color: var( --pxz-mut );
		background: var( --pxz-bg );
		border-radius: 99px;
		white-space: nowrap;
		vertical-align: 2px;
	}

	.pxz-prize__go {
		margin: 0 11px 12px;
	}
}

@media ( max-width: 99998px ) {

	/* The card is a column, so its children must stretch — inherited
	   align-items:center was shrinking the artwork to its own width. */
	.pxz-prize {
		align-items: stretch;
	}

	.pxz-prize__thumb {
		width: 100%;
		max-width: none;
		min-width: 0;
		aspect-ratio: 39 / 20;
		height: auto;
	}

	/* Cost and stock share one line, cost first, as in the reference. */
	.pxz-prize__info {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 8px;
	}

	.pxz-prize__title,
	.pxz-prize__desc {
		flex: 0 0 100%;
		min-width: 0;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.pxz-prize__cost {
		order: 1;
		margin-top: 9px;
	}

	.pxz-prize__stock {
		order: 2;
		margin: 9px 0 0;
		vertical-align: baseline;
	}

	.pxz-prize__go {
		order: 3;
		flex: 1 1 100%;
		width: 100%;
		margin: 10px 0 0;
		padding: 9px 0;
		text-align: center;
	}
}

@media ( max-width: 99998px ) {

	/* Plain block flow inside the card: title on its own lines, then the
	   cost and the stock pill sharing one line as inline items. Simpler
	   than flex ordering and it cannot push content past the card edge. */
	.pxz-prize__info {
		display: block;
		padding: 10px 11px 0;
	}

	.pxz-prize__title,
	.pxz-prize__desc {
		display: block;
		width: 100%;
	}

	.pxz-prize__cost,
	.pxz-prize__stock {
		display: inline-flex;
		vertical-align: middle;
		margin-top: 8px;
	}

	.pxz-prize__stock {
		margin-left: 6px;
	}

	.pxz-prize__go {
		display: block;
		width: calc( 100% - 22px );
		margin: 10px 11px 12px;
		padding: 9px 0;
		text-align: center;
	}
}

/*--------------------------------------------------------------
# Rewards store — reference match
--------------------------------------------------------------*/

@media ( max-width: 99998px ) {

	/* Three currency cards in one scrollable row. */
	.pxz-store__wallet {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.pxz-store__wallet::-webkit-scrollbar {
		display: none;
	}

	.pxz-store__bal {
		flex: 0 0 auto;
		gap: 8px;
		padding: 10px 10px 10px 12px;
		border-radius: 16px;
	}

	.pxz-store__daily {
		flex: 1 0 auto;
		grid-column: auto;
		border-radius: 16px;
		white-space: nowrap;
	}

	/* The round + on each balance card. */
	.pxz-store__plus {
		display: grid;
		place-items: center;
		width: 26px;
		height: 26px;
		flex: 0 0 auto;
		border-radius: 50%;
		background: var( --pxz-green );
		color: #fff;
	}

	/* Chips carry an icon in front of the label. */
	.pxz-chips--icon .pxz-chip {
		display: inline-flex;
		align-items: center;
		gap: 7px;
	}

	.pxz-chips--icon .pxz-chip svg,
	.pxz-chips--icon .pxz-chip .pxz-i {
		flex: 0 0 auto;
	}

	/* Three across, as in the reference. */
	.pxz-prizes {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 8px;
	}

	.pxz-prize__info {
		padding: 8px 8px 0;
	}

	.pxz-prize__title {
		font-size: 12px;
		line-height: 1.2;
	}

	.pxz-prize__desc {
		font-size: 10px;
		line-height: 1.25;
	}

	/* Price left, stock badge right, on one line. */
	.pxz-prize__cost {
		float: left;
		margin: 8px 0 8px;
		font-size: 13px;
		gap: 4px;
	}

	.pxz-prize__stock {
		float: right;
		margin: 8px 0 8px;
		padding: 3px 7px;
		font-size: 9.5px;
		color: #3F6AA8;
		background: #EAF2FE;
	}

	.pxz-prize__info::after {
		content: '';
		display: block;
		clear: both;
	}

	/* The whole card redeems; the button would not fit this width. */
	.pxz-prize__go {
		display: none;
	}

	.pxz-prize {
		cursor: pointer;
	}

	/* Two across on the narrowest phones, where three would crush the
	   titles into three words a line. */
	@media ( max-width: 359px ) {

		.pxz-prizes {
			grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		}
	}
}

/* Stock badge has two lengths; only one shows at a time. */
.pxz-stock-min {
	display: none;
}

@media ( max-width: 99998px ) {

	.pxz-stock-full {
		display: none;
	}

	.pxz-stock-min {
		display: inline;
	}

	/* With the short badge, price and stock fit one line even at 3-up. */
	.pxz-prize__cost {
		float: left;
		margin: 8px 0 10px;
		font-size: 12.5px;
	}

	.pxz-prize__stock {
		float: right;
		margin: 8px 0 10px;
		padding: 3px 8px;
		font-size: 10px;
	}
}

@media ( max-width: 359px ) {

	.pxz-stock-full {
		display: inline;
	}

	.pxz-stock-min {
		display: none;
	}
}

@media ( max-width: 99998px ) {

	/*
	 * Grid rather than floats for the card body: title and subtitle span
	 * the full width, then the price and stock badge sit in one row,
	 * price left and badge right, baseline-aligned.
	 */
	.pxz-prize__info {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 0 6px;
		padding: 8px 8px 10px;
	}

	.pxz-prize__title,
	.pxz-prize__desc {
		grid-column: 1 / -1;
	}

	.pxz-prize__cost {
		float: none;
		grid-column: 1;
		margin: 8px 0 0;
		justify-self: start;
	}

	.pxz-prize__stock {
		float: none;
		grid-column: 2;
		margin: 8px 0 0;
		justify-self: end;
	}
}

@media ( max-width: 99998px ) {

	/*
	 * Three across needs about 130px a card for the price and badge to
	 * share a line without clipping. Below ~420px the phone cannot give
	 * that, so it drops to two — the graceful fallback the brief asks
	 * for, rather than three columns of cut-off text.
	 */
	.pxz-prizes {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* Grid children default to min-width:auto, which is what pushed the
	   titles and badges past the card edge. */
	.pxz-prize__title,
	.pxz-prize__desc,
	.pxz-prize__cost,
	.pxz-prize__stock {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.pxz-prize__stock {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Two across at every phone width: three columns squeezed the title
   and the price onto too narrow a card. */
@media ( max-width: 99998px ) {

	.pxz-prizes {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 420px ) and ( max-width: 99998px ) {

	.pxz-stock-full {
		display: none;
	}

	.pxz-stock-min {
		display: inline;
	}
}

@media ( max-width: 419px ) {

	.pxz-stock-full {
		display: inline;
	}

	.pxz-stock-min {
		display: none;
	}
}

@media ( max-width: 99998px ) {

	/* The price must never break — "550,00 / 0" is not a number. It holds
	   its line and the badge is the part that gives way. */
	.pxz-prize__cost {
		white-space: nowrap;
		overflow-wrap: normal;
	}

	/* Short badge at every phone width; the full phrase only fits when
	   the card is wide, which on phones it never is. */
	.pxz-stock-full {
		display: none;
	}

	.pxz-stock-min {
		display: inline;
	}
}

/*--------------------------------------------------------------
# Rewards tab: hero + coin strip, matching Home
--------------------------------------------------------------*/

.pxz-rhero,
.pxz-store__head {
	display: none;
}

@media ( max-width: 99998px ) {

	/* Same banner treatment as the home tab: full bleed, behind nothing,
	   with the coin strip riding on its lower edge. */
	.pxz-rhero {
		display: block;
		margin: -14px -16px 0;
		/* A short band, not a screen-filling banner: the store grid is the
		   point of this tab, so the hero caps at 138px. */
		height: 118px;
		min-height: 0;
		max-height: 118px;
		background-size: cover;
		background-position: center center;
		background-color: var( --pxz-dark );
	}

	.pxz-wallet--rewards {
		margin: 12px -8px 16px;
	}

	/* 60/40 split: the heading and its line take the left column, the
	   script art the right, with a small gap between them. */
	.pxz-store__head {
		display: grid;
		grid-template-columns: 60% 1fr;
		align-items: center;
		gap: 0 10px;
		margin-bottom: 4px;
	}

	.pxz-store__art {
		width: 100%;
		height: auto;
		max-height: 72px;
		object-fit: contain;
		object-position: right center;
		justify-self: end;
	}

	/* The old three-card balance row is replaced by the coin strip. */
	.pxz-store__wallet {
		display: none;
	}

	/* Price: crystal first, then the figure. */
	.pxz-prize__cost {
		flex-direction: row;
	}

	.pxz-prize__cost svg,
	.pxz-prize__cost .pxz-i {
		flex: 0 0 auto;
	}
}

@media ( max-width: 99998px ) {

	/* The art sits beside the heading and its tagline together, centred
	   against both lines — not just the heading. */
	.pxz-store__head {
		align-items: center;
		margin-bottom: 14px;
	}

	.pxz-store__copy {
		min-width: 0;
	}

	.pxz-store__lede {
		margin: 3px 0 0;
	}

	.pxz-store__art {
		max-height: 78px;
		align-self: center;
	}
}

@media ( max-width: 99998px ) {

	/* The store heading scales with the viewport instead of sitting at a
	   fixed 30px, which crowded the art on a 360px phone and looked
	   undersized on a wide one. */
	.pxz-store__title {
		font-size: clamp( 21px, 6.4vw, 28px );
		line-height: 1.1;
		letter-spacing: -.4px;
	}

	.pxz-store__lede {
		font-size: clamp( 11.5px, 3.2vw, 13.5px );
		line-height: 1.3;
	}

	.pxz-store__art {
		max-height: 66px;
	}
}

/*--------------------------------------------------------------
# Profile popups
#
# The account panels were inline folds that pushed the menu down
# the page. They open as centred dialogs now, in the room's own
# card style rather than a browser default.
--------------------------------------------------------------*/

.pxz-scrim {
	position: fixed;
	inset: 0;
	z-index: 99997;
	background: rgba( 4, 20, 12, .55 );
}

.pxz-scrim[hidden] {
	display: none;
}

.pxz-fold[role="dialog"] {
	position: fixed;
	z-index: 100000;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: min( 520px, calc( 100vw - 32px ) );
	max-height: min( 78vh, 620px );
	overflow: auto;
	margin: 0;
	padding: 0 18px 18px;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba( 4, 20, 12, .35 );
	animation: pxz-pop .18s ease;
}

@keyframes pxz-pop {
	from { transform: translate( -50%, -46% ); opacity: 0; }
	to   { transform: translate( -50%, -50% ); opacity: 1; }
}

.pxz-fold__head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 -18px 12px;
	padding: 16px 18px 12px;
	background: var( --pxz-card );
	border-bottom: 1px solid var( --pxz-line );
	border-radius: 20px 20px 0 0;
}

.pxz-fold__head b {
	font-size: 16px;
	font-weight: 800;
	color: var( --pxz-ink );
}

.pxz-fold__x {
	font-size: 26px;
	line-height: 1;
	padding: 0 4px;
	color: var( --pxz-faint );
}

/* FAQ list inside the help dialog. */
.pxz-faq {
	padding: 12px 0;
	border-bottom: 1px solid var( --pxz-line );
}

.pxz-faq:last-of-type {
	border-bottom: 0;
}

.pxz-faq b {
	display: block;
	font-size: 14px;
	font-weight: 800;
	color: var( --pxz-ink );
}

.pxz-faq p {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var( --pxz-mut );
}

.pxz-help__mail {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 14px;
	padding: 13px 14px;
	background: var( --pxz-green-soft );
	border-radius: 14px;
	color: var( --pxz-green );
}

.pxz-help__mail em {
	display: block;
	font-size: 11.5px;
	font-style: normal;
	color: var( --pxz-mut );
}

.pxz-help__mail b {
	display: block;
	font-size: 14px;
	font-weight: 800;
	color: var( --pxz-green-dark );
	overflow-wrap: anywhere;
}

/* Locked menu row. */
.pxz-menu__row.is-soon {
	opacity: .72;
	cursor: default;
}

.pxz-menu__soon {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 4px 10px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #7A5B00;
	background: var( --pxz-gold-soft );
	border: 1px solid rgba( 245, 179, 1, .45 );
	border-radius: 99px;
	white-space: nowrap;
}

/* Log out: solid red, white text. */
.pxz-logout:not( .pxz-logout--in ) {
	background: #DC2626;
	color: #fff;
	border-color: #DC2626;
}

.pxz-logout:not( .pxz-logout--in ) svg,
.pxz-logout:not( .pxz-logout--in ) .pxz-i {
	color: #fff;
}

.pxz-logout:not( .pxz-logout--in ):hover {
	background: #B91C1C;
	border-color: #B91C1C;
}

/* The visited-link reset carries `.pxz a.pxz-logout`, which outranked the
   red button rule — hence dark text on red. Matched weight here. */
.pxz a.pxz-logout:not( .pxz-logout--in ),
.pxz a.pxz-logout:not( .pxz-logout--in ):visited,
.pxz a.pxz-logout:not( .pxz-logout--in ):hover {
	color: #fff;
}

/*--------------------------------------------------------------
# Ledger amounts + avatar picker
--------------------------------------------------------------*/

/* Money in is green, money out is red — the sign alone was easy to miss
   at this size. */
.pxz-amt {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pxz-amt.is-in {
	color: var( --pxz-green );
}

.pxz-amt.is-out {
	color: #DC2626;
}

.pxz-when {
	margin-left: 8px;
	color: var( --pxz-mut );
}

.pxz-editbox__label {
	margin: 16px 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var( --pxz-ink );
}

.pxz-avpick {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 8px;
}

.pxz-avpick__item {
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border: 2px solid transparent;
	background: var( --pxz-bg );
	transition: border-color .15s ease, transform .15s ease;
}

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

.pxz-avpick__item:hover {
	transform: translateY( -2px );
}

.pxz-avpick__item.is-on {
	border-color: var( --pxz-green );
	box-shadow: 0 0 0 3px rgba( 34, 197, 94, .22 );
}

@media ( max-width: 420px ) {

	.pxz-avpick {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/* The identity avatar fills its ring. */
.pxz-id__ring .pxz-avatar,
.pxz-id__ring img {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* Edit Profile shares the dialog chrome — but only when it is open.
   Without the :not([hidden]) this rule outranked the hidden attribute and
   the popup showed on page load. */
.pxz-editbox[role="dialog"]:not( [hidden] ) {
	display: block;
}

.pxz-fold[hidden],
.pxz-editbox[hidden] {
	display: none;
}

/* Category chips carry a glyph in front of the label. */
.pxz-chips .pxz-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.pxz-chips .pxz-chip svg,
.pxz-chips .pxz-chip .pxz-i {
	flex: 0 0 auto;
}

/*
 * Once the day's coins are in the wallet the Claim button has nothing
 * left to do, so it goes rather than sitting there greyed out. The strip
 * carries the state on its own: "Next claim soon!" plus the countdown.
 */
.pxz-free.is-claimed .pxz-free__btn,
.pxz-hero__free.is-claimed .pxz-hero__claim {
	display: none;
}

.pxz-free.is-claimed .pxz-free__txt,
.pxz-hero__free.is-claimed .pxz-hero__freetxt {
	flex: 1 1 auto;
	min-width: 0;
}

.pxz-free.is-claimed [data-pxz-free-sub],
.pxz-hero__free.is-claimed [data-pxz-free-sub] {
	color: var( --pxz-green );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*--------------------------------------------------------------
# Play & Win: arcade sheen
#
# A light sweep crosses the card every few seconds, the way a glossy
# arcade cabinet catches the light. Deliberately cheap: one absolutely
# positioned pseudo-element animating transform and opacity only, so it
# runs on the compositor and never triggers layout or repaint. No JS, no
# timers, no shadows or filters in the loop.
--------------------------------------------------------------*/

.pxz-earn::before {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -35%;
	width: 26%;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0 ) 0%,
		rgba( 255, 255, 255, .22 ) 45%,
		rgba( 255, 255, 255, .38 ) 50%,
		rgba( 255, 255, 255, .22 ) 55%,
		rgba( 255, 255, 255, 0 ) 100%
	);
	transform: translate3d( 0, 0, 0 ) rotate( 18deg );
	opacity: 0;
	will-change: transform, opacity;
	animation: pxz-sheen 5.5s ease-in-out infinite;
}

@keyframes pxz-sheen {

	0%, 62% {
		transform: translate3d( 0, 0, 0 ) rotate( 18deg );
		opacity: 0;
	}

	66% {
		opacity: 1;
	}

	92%, 100% {
		transform: translate3d( 560%, 0, 0 ) rotate( 18deg );
		opacity: 0;
	}
}

/* The arrow leans in on press, so the card answers the tap. */
.pxz-earn .pxz-earn__go {
	transition: transform .18s ease;
}

.pxz-earn:hover .pxz-earn__go {
	transform: translateX( 3px );
}

.pxz-earn:active {
	transform: scale( .995 );
}

/* Anyone who has asked for less motion gets a still card. */
@media ( prefers-reduced-motion: reduce ) {

	.pxz-earn::before {
		animation: none;
		opacity: 0;
	}

	.pxz-earn .pxz-earn__go {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Redeem consent + confirmation, and reward tracking
--------------------------------------------------------------*/

.pxz-fold--ask {
	width: min( 420px, calc( 100vw - 32px ) );
}

.pxz-ask {
	padding: 6px 2px 4px;
	text-align: center;
}

.pxz-ask__ic {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 4px auto 12px;
	border-radius: 50%;
	background: #E3EEFE;
	color: var( --pxz-blue );
}

.pxz-ask__ic--ok {
	background: var( --pxz-green-soft );
	color: var( --pxz-green );
}

.pxz-ask b {
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: var( --pxz-ink );
}

.pxz-ask p {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var( --pxz-mut );
}

.pxz-ask__bal {
	font-weight: 600;
}

.pxz-ask__code {
	margin-top: 10px;
	padding: 9px 12px;
	font-weight: 800;
	color: var( --pxz-green-dark );
	background: var( --pxz-green-soft );
	border-radius: 12px;
	letter-spacing: .04em;
}

.pxz-ask__row {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.pxz-ask__no,
.pxz-ask__yes {
	flex: 1 1 0;
	padding: 12px 0;
	font-size: 14px;
	font-weight: 800;
	border-radius: 12px;
}

.pxz-ask__no {
	background: var( --pxz-bg );
	color: var( --pxz-ink );
	border: 1px solid var( --pxz-line );
}

.pxz-ask__yes {
	background: var( --pxz-green );
	color: #fff;
}

.pxz-ask__yes:disabled {
	background: var( --pxz-line );
	color: var( --pxz-faint );
}

/* Tracking list inside Settings. */
.pxz-fold__sub {
	margin: 20px 0 8px;
	font-size: 14px;
	font-weight: 800;
	color: var( --pxz-ink );
}

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

.pxz-track:last-child {
	border-bottom: 0;
}

.pxz-track__txt {
	flex: 1 1 auto;
	min-width: 0;
}

.pxz-track__txt b {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var( --pxz-ink );
}

.pxz-track__txt em {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-style: normal;
	color: var( --pxz-mut );
}

.pxz-track__pill {
	flex: 0 0 auto;
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 800;
	border-radius: 99px;
	white-space: nowrap;
}

.pxz-track__pill.is-req {
	color: #7A5B00;
	background: var( --pxz-gold-soft );
}

.pxz-track__pill.is-proc {
	color: #3F6AA8;
	background: #EAF2FE;
}

.pxz-track__pill.is-done {
	color: var( --pxz-green-dark );
	background: var( --pxz-green-soft );
}

.pxz-fold__empty {
	margin: 6px 0 0;
	font-size: 13px;
	color: var( --pxz-mut );
}

/* First heading in a dialog needs no top gap. */
.pxz-fold__sub--first {
	margin-top: 4px;
}

@media ( max-width: 99998px ) {

	/* The Games tab opens on the same 118px band as Rewards, with its own
	   artwork slot; the title and search sit under it. */
	.pxz-rhero--games {
		margin-bottom: 12px;
	}
}

@media ( max-width: 99998px ) {

	/* Games tab opens straight on the banner, then the categories — the
	   title repeated the bottom-nav label, and the search bar moves out
	   with it. */
	.pxz-pane[data-pxz-pane="games"] .pxz-mhead,
	.pxz-pane[data-pxz-pane="games"] .pxz-search {
		display: none;
	}

	.pxz-pane[data-pxz-pane="games"] .pxz-chips {
		margin-top: 0;
	}
}

/* Chips: more air between the glyph and its label. */
.pxz-chips .pxz-chip,
.pxz-chips--icon .pxz-chip {
	gap: 10px;
	padding-left: 16px;
}

.pxz-side__item {
	gap: 10px;
}

/* With the phone shell running at every width, the fixed bottom nav
   should sit under the 520px column rather than stretching across a
   desktop monitor. */
.pxz-nav {
	left: 50%;
	right: auto;
	transform: translateX( -50% );
	width: 100%;
	max-width: 520px;
	border-radius: 20px 20px 0 0;
}

/* Trending flag on exclusive rewards. */
.pxz-prize {
	position: relative;
}

.pxz-prize__hot {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px 4px 7px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient( 100deg, #F97316, #EF4444 );
	border-radius: 99px;
	box-shadow: 0 3px 10px rgba( 239, 68, 68, .35 );
	white-space: nowrap;
}

.pxz-prize__hot svg {
	flex: 0 0 auto;
}

/* Trending flag is the flame alone; the word stays for screen readers. */
.pxz-prize__hot {
	gap: 0;
	width: 26px;
	height: 26px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
}

.pxz-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.pxz-ask__ic--phone {
	background: var( --pxz-green-soft );
	color: var( --pxz-green );
}

.pxz-ask__ic--coin {
	background: var( --pxz-gold-soft );
	color: var( --pxz-gold );
}

/*--------------------------------------------------------------
# Prize banner: one frame, several prizes
--------------------------------------------------------------*/

.pxz-spot__slide {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
}

.pxz-spot__slide.is-on {
	opacity: 1;
	visibility: visible;
}

/* Slides stack in the same box so the banner keeps one height. */
.pxz-spot {
	display: grid;
}

.pxz-spot__slide {
	grid-area: 1 / 1;
}

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

	.pxz-spot__slide {
		transition: none;
	}
}

/*--------------------------------------------------------------
# "Start Playing" dialog
#
# Row icons are drawn here; an upload in the Icon Lobby overrides
# them with a rule printed in the head (see popup_icon_css).
#
# Rendered by playrox-economy.js on document.body, outside .pxz, so
# these rules are scoped to its own class and repeat the tokens they
# need rather than inheriting them.
--------------------------------------------------------------*/

.plxe-modal .plxe-start {
	--s-ink: #0F172A;
	--s-mut: #64748B;
	--s-green: #16A34A;
	--s-blue: #3B82F6;
	--s-gold: #F5B301;
	--s-line: #E8ECF0;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var( --s-ink );
	text-align: left;
}

.plxe-modal .plxe-start__title {
	margin: 0;
	font-size: clamp( 26px, 7vw, 34px );
	font-weight: 900;
	letter-spacing: -.6px;
	line-height: 1.1;
	color: var( --s-ink );
}

.plxe-modal .plxe-start__title i {
	font-style: normal;
	color: var( --s-green );
}

.plxe-modal .plxe-start__lede {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var( --s-mut );
	max-width: 22ch;
}

/* The four figures, on their own panel. */
.plxe-modal .plxe-start__facts {
	margin: 18px 0 0;
	padding: 4px 14px;
	background: #F7F9FA;
	border-radius: 18px;
}

.plxe-modal .plxe-fact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var( --s-line );
}

.plxe-modal .plxe-fact:last-child {
	border-bottom: 0;
}

.plxe-modal .plxe-fact__ic {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #FFF6DA no-repeat center / 17px 17px;
}

.plxe-modal .plxe-fact__ic--coin {
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5B301'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5' fill='%23FFE9A8'/%3E%3C/svg%3E" );
}

.plxe-modal .plxe-fact__ic--clock {
	background-color: #E3EEFE;
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.4V12l3.2 2' stroke-linecap='round'/%3E%3C/svg%3E" );
}

.plxe-modal .plxe-fact__ic--gem {
	background-color: #E3EEFE;
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233B82F6'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3C/svg%3E" );
}

.plxe-modal .plxe-fact__ic--wallet {
	background-color: #FDECD8;
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B26A0A' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='13' rx='3'/%3E%3Cpath d='M16 12.5h3' stroke-linecap='round'/%3E%3C/svg%3E" );
}

.plxe-modal .plxe-fact__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	color: var( --s-mut );
}

.plxe-modal .plxe-fact__val {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 800;
	white-space: nowrap;
}

.plxe-modal .plxe-fact__val--green { color: var( --s-green ); }
.plxe-modal .plxe-fact__val--blue  { color: var( --s-blue ); }
.plxe-modal .plxe-fact__val--gold  { color: #C8880B; }

.plxe-modal .plxe-start__warn {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #DC2626;
}

.plxe-modal .plxe-start__actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.plxe-modal .plxe-start__no,
.plxe-modal .plxe-start__go {
	flex: 1 1 0;
	padding: 15px 8px;
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	border: 0;
	border-radius: 99px;
	cursor: pointer;
}

.plxe-modal .plxe-start__no {
	background: #F1F4F6;
	color: var( --s-ink );
}

.plxe-modal .plxe-start__go {
	flex: 1.4 1 0;
	background: linear-gradient( 100deg, #22C55E, #16A34A );
	color: #fff;
	box-shadow: 0 10px 24px rgba( 22, 163, 74, .34 );
}

.plxe-modal .plxe-start__go:active {
	transform: scale( .985 );
}

/* The shell the script builds, dressed to match. */
.plxe-modal .plxe-modal__box {
	background: #fff;
	border-radius: 26px;
	padding: 26px 22px 22px;
}

/* Heading artwork: hidden until one is uploaded in the Icon Lobby, then
   revealed by the rule printed in the head. */
.plxe-modal .plxe-start__head {
	position: relative;
	padding-right: 0;
}

.plxe-modal .plxe-start__art {
	display: none;
	position: absolute;
	top: -14px;
	right: -6px;
	width: 44%;
	max-width: 190px;
	aspect-ratio: 13 / 9;
	background-repeat: no-repeat;
	background-position: right top;
	pointer-events: none;
}


/*--------------------------------------------------------------
# Start Playing: close control, tinted corners, play mark
--------------------------------------------------------------*/

/* The close button sits above the card's corner, so the box cannot clip. */
.plxe-modal .plxe-modal__box {
	overflow: visible;
}

.plxe-modal .plxe-start__x {
	position: absolute;
	top: -22px;
	right: -10px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #334155;
	box-shadow: 0 8px 22px rgba( 8, 25, 16, .22 );
	cursor: pointer;
	transition: transform .15s ease;
}

.plxe-modal .plxe-start__x:hover {
	transform: scale( 1.06 );
}

/*
 * The wash is painted on the card itself rather than by an inset child:
 * the box has overflow:visible so the close button can sit outside it,
 * and a child with negative insets bled the tint out past the corners.
 * As a background it is clipped by the card's own radius.
 */
.plxe-modal .plxe-start__wash {
	display: none;
}

.plxe-modal .plxe-modal__box {
	background-color: #fff;
	background-image:
		radial-gradient( 150px 120px at 0% 0%, rgba( 34, 197, 94, .22 ), transparent 72% ),
		radial-gradient( 190px 150px at 100% 0%, rgba( 59, 130, 246, .18 ), transparent 74% ),
		linear-gradient( 180deg, rgba( 236, 253, 243, .75 ), rgba( 255, 255, 255, 0 ) 46% );
	background-repeat: no-repeat;
}

.plxe-modal .plxe-start__head,
.plxe-modal .plxe-start__facts,
.plxe-modal .plxe-start__actions {
	position: relative;
	z-index: 1;
}

/* Play mark before the label. */
.plxe-modal .plxe-start__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.plxe-modal .plxe-start__go svg {
	flex: 0 0 auto;
}

/*--------------------------------------------------------------
# "Top up Coins" sheet
#
# Same shell as Start Playing, in a sky palette: heading with the
# second word in gold, a balance pill, then the bundles as a grid
# of cards with a price pill each.
--------------------------------------------------------------*/

.plxe-modal .plxe-top {
	--t-ink: #0F2A4A;
	--t-mut: #5B7291;
	--t-green: #16A34A;
	--t-gold: #F5B301;

	position: relative;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var( --t-ink );
	text-align: left;
}

/* Sky wash, clipped by the card's own radius. */
.plxe-modal:has( .plxe-top ) .plxe-modal__box {
	background-color: #fff;
	background-image:
		radial-gradient( 260px 190px at 100% 0%, rgba( 125, 200, 255, .34 ), transparent 72% ),
		radial-gradient( 200px 150px at 0% 0%, rgba( 186, 226, 255, .40 ), transparent 74% ),
		linear-gradient( 180deg, rgba( 226, 243, 255, .92 ), rgba( 255, 255, 255, 0 ) 52% );
	background-repeat: no-repeat;
}

.plxe-modal .plxe-top__title {
	margin: 0;
	font-size: clamp( 26px, 7.4vw, 36px );
	font-weight: 900;
	letter-spacing: -.8px;
	line-height: 1.05;
}

.plxe-modal .plxe-top__title i {
	font-style: normal;
	color: var( --t-gold );
}

.plxe-modal .plxe-top__lede {
	margin: 7px 0 0;
	font-size: 14px;
	color: var( --t-mut );
}

/* Balance, on its own white pill. */
.plxe-modal .plxe-top__bal {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 14px 0 0;
	padding: 10px 16px 10px 11px;
	font-size: 14px;
	color: var( --t-mut );
	background: #fff;
	border-radius: 99px;
	box-shadow: 0 6px 16px rgba( 15, 42, 74, .10 );
}

.plxe-modal .plxe-top__bal b {
	color: var( --t-green );
	font-weight: 800;
}

.plxe-modal .plxe-top__balic {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #FFF6DA url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5B301'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5' fill='%23FFE9A8'/%3E%3C/svg%3E" ) no-repeat center / 16px 16px;
}

/* Wallet artwork; hidden until one is uploaded. */
.plxe-modal .plxe-top__art {
	display: none;
	position: absolute;
	top: -10px;
	right: -8px;
	width: 46%;
	max-width: 210px;
	aspect-ratio: 1 / 1;
	background: no-repeat right top / contain;
	pointer-events: none;
}


.plxe-modal .plxe-top__label {
	margin: 20px 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --t-mut );
}

/* ---- Bundles ---- */

.plxe-modal .plxe-packs {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 10px;
}

.plxe-modal .plxe-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 8px 10px;
	background: #fff;
	border: 2px solid transparent;
	border-radius: 18px;
	box-shadow: 0 8px 18px rgba( 15, 42, 74, .09 );
	cursor: pointer;
}

.plxe-modal .plxe-pack.is-on,
.plxe-modal .plxe-pack.is-active {
	border-color: #37C25A;
	background: linear-gradient( 180deg, #F2FCF4, #fff );
}

.plxe-modal .plxe-pack__tick {
	display: none;
	position: absolute;
	top: -9px;
	right: -9px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #16A34A url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.5L19 7.5'/%3E%3C/svg%3E" ) no-repeat center / 15px 15px;
}

.plxe-modal .plxe-pack.is-on .plxe-pack__tick,
.plxe-modal .plxe-pack.is-active .plxe-pack__tick {
	display: block;
}

/* Bundle artwork: drawn coins by default, replaceable per tier. */
.plxe-modal .plxe-pack__art {
	width: 58px;
	height: 46px;
	background: no-repeat center / contain;
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 48'%3E%3Cellipse cx='30' cy='34' rx='19' ry='8' fill='%23E8A80B'/%3E%3Cellipse cx='30' cy='29' rx='19' ry='8' fill='%23F5B301'/%3E%3Cellipse cx='30' cy='26' rx='13' ry='5.4' fill='%23FFDF8A'/%3E%3C/svg%3E" );
}

.plxe-modal .plxe-pack__coins {
	font-size: 20px;
	font-weight: 900;
	color: var( --t-ink );
}

.plxe-modal .plxe-pack__unit {
	font-size: 12px;
	color: var( --t-mut );
}

.plxe-modal .plxe-pack__price {
	display: block;
	width: 100%;
	margin-top: 9px;
	padding: 9px 4px;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	text-align: center;
	background: linear-gradient( 100deg, #2ECC61, #16A34A );
	border-radius: 99px;
}

.plxe-modal .plxe-pack__tag {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 2;
	padding: 4px 10px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	background: linear-gradient( 100deg, #FB7185, #E11D48 );
	border-radius: 99px;
}

/* ---- Pay ---- */

.plxe-modal .plxe-top__pay {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	margin-top: 18px;
	padding: 17px 10px;
	font: inherit;
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient( 100deg, #2ECC61, #16A34A );
	border: 0;
	border-radius: 99px;
	box-shadow: 0 12px 26px rgba( 22, 163, 74, .34 );
	cursor: pointer;
}

.plxe-modal .plxe-top__payic {
	width: 26px;
	height: 19px;
	border-radius: 4px;
	background: #fff no-repeat center;
	background-image: linear-gradient( #16A34A, #16A34A );
	background-size: 100% 5px;
	background-position: 0 5px;
}

.plxe-modal .plxe-top__note {
	margin: 10px 0 0;
	font-size: 11.5px;
	text-align: center;
	color: var( --t-mut );
}

.plxe-modal .plxe-topsum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	padding-top: 14px;
	font-size: 14px;
	color: var( --t-mut );
	border-top: 1px solid #E6EEF6;
}

.plxe-modal .plxe-topsum b {
	font-size: 17px;
	font-weight: 900;
	color: var( --t-ink );
}



/*--------------------------------------------------------------
# Top up: corner coins, no running total
#
# The total line duplicated the price already printed on the chosen
# bundle, so it goes; the coins that frame the foot of the sheet in
# the reference are drawn here and can be replaced from the lobby.
--------------------------------------------------------------*/

.plxe-modal .plxe-top .plxe-topsum {
	display: none;
}

.plxe-modal .plxe-top__coinl,
.plxe-modal .plxe-top__coinr {
	position: absolute;
	bottom: -14px;
	z-index: 0;
	width: 86px;
	height: 86px;
	background: no-repeat center / contain;
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cellipse cx='40' cy='46' rx='27' ry='11' fill='%23E09612'/%3E%3Cellipse cx='40' cy='40' rx='27' ry='11' fill='%23F5B301'/%3E%3Cellipse cx='40' cy='37' rx='18' ry='7' fill='%23FFDF8A'/%3E%3Cpath d='M40 31l2.6 5.4 5.9.8-4.3 4.1 1 5.9L40 44.4l-5.2 2.8 1-5.9-4.3-4.1 5.9-.8z' fill='%23E5A50A'/%3E%3C/svg%3E" );
	pointer-events: none;
}

.plxe-modal .plxe-top__coinl {
	left: -34px;
	transform: rotate( -14deg );
}

.plxe-modal .plxe-top__coinr {
	right: -32px;
	transform: rotate( 12deg );
}

/*
 * The coins overhang the sheet's lower corners rather than sitting
 * under the button, which is where they were being swallowed. They
 * paint above it and take no clicks.
 */
/*
 * Behind the button, not in front: the coins tuck under its ends and
 * show at the card's corners. That needs the button inset from the
 * sides, otherwise a full-width pill hides them completely.
 */
.plxe-modal .plxe-top__coinl,
.plxe-modal .plxe-top__coinr {
	z-index: 0;
	bottom: 26px;
}

.plxe-modal .plxe-top__pay {
	width: calc( 100% - 30px );
	margin-left: auto;
	margin-right: auto;
}

.plxe-modal .plxe-top__pay,
.plxe-modal .plxe-top__note {
	position: relative;
	z-index: 1;
}

@media ( max-width: 380px ) {

	.plxe-modal .plxe-top__coinl,
	.plxe-modal .plxe-top__coinr {
		width: 64px;
		height: 64px;
	}
}

/*--------------------------------------------------------------
# Top up on phones
#
# Three bundles a row at every phone width — dropping to two made
# the cards huge and pushed the pay button off the screen. Padding
# and type shrink instead.
--------------------------------------------------------------*/

@media ( max-width: 560px ) {

	.plxe-modal:has( .plxe-top ) .plxe-modal__box,
	.plxe-modal .plxe-top {
		max-width: none;
	}

	.plxe-modal:has( .plxe-top ) .plxe-modal__box {
		width: min( 100%, 440px );
		padding: 22px 14px 18px;
		border-radius: 22px;
	}

	.plxe-modal .plxe-packs {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 7px;
	}

	.plxe-modal .plxe-pack {
		padding: 11px 5px 8px;
		border-radius: 14px;
	}

	.plxe-modal .plxe-pack__art {
		width: 42px;
		height: 32px;
	}

	.plxe-modal .plxe-pack__coins {
		font-size: 15px;
	}

	.plxe-modal .plxe-pack__unit {
		font-size: 10px;
	}

	.plxe-modal .plxe-pack__price {
		margin-top: 7px;
		padding: 7px 2px;
		font-size: 11px;
	}

	.plxe-modal .plxe-pack__tag {
		top: -9px;
		padding: 3px 7px;
		font-size: 8px;
	}

	.plxe-modal .plxe-pack__tick {
		top: -7px;
		right: -7px;
		width: 21px;
		height: 21px;
		background-size: 12px 12px;
	}

	.plxe-modal .plxe-top__title {
		font-size: clamp( 23px, 7.4vw, 30px );
	}

	.plxe-modal .plxe-top__lede {
		font-size: 13px;
	}

	.plxe-modal .plxe-top__bal {
		margin-top: 11px;
		padding: 8px 13px 8px 9px;
		font-size: 12.5px;
	}

	.plxe-modal .plxe-top__label {
		margin: 15px 0 8px;
		font-size: 11px;
	}

	.plxe-modal .plxe-top__pay {
		margin-top: 15px;
		padding: 14px 8px;
		font-size: 15.5px;
	}

	/* Keep the sheet inside the viewport on short screens. */
	.plxe-modal:has( .plxe-top ) .plxe-modal__box {
		max-height: calc( 100dvh - 28px );
		overflow-y: auto;
	}
}

/* Very narrow phones: two across is genuinely better than three. */
@media ( max-width: 330px ) {

	.plxe-modal .plxe-packs {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* The copy only makes room for artwork that is actually set; the width
   limit is applied by the rule printed alongside the upload. A sibling
   rule here would squeeze the text even with no art present. */
.plxe-modal .plxe-top__bal {
	white-space: nowrap;
}

/*--------------------------------------------------------------
# Top up: contained sheet, no overhang
#
# The corner coins hung past the sheet's edges, and on a phone that
# is wider than the viewport — which is what produced the sideways
# scroll and the edge-to-edge look. They are off for now, along with
# the checkout note, and the sheet keeps a margin on every side.
--------------------------------------------------------------*/

.plxe-modal .plxe-top__coinl,
.plxe-modal .plxe-top__coinr,
.plxe-modal .plxe-top__note {
	display: none;
}

.plxe-modal:has( .plxe-top ) {
	overflow-x: hidden;
}

/* The box is content-box, so a width of 100% - 28px still measured the
   full viewport once its padding was added. Border-box plus padding on
   the overlay gives a real gutter on both sides. */
.plxe-modal:has( .plxe-top ) {
	padding: 16px;
}

.plxe-modal:has( .plxe-top ) .plxe-modal__box {
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	overflow: visible;
}

/* The pay button spans the sheet again now nothing tucks behind it. */
.plxe-modal .plxe-top__pay {
	width: 100%;
}

@media ( max-width: 560px ) {

	.plxe-modal:has( .plxe-top ) {
		padding: 12px;
	}

	.plxe-modal:has( .plxe-top ) .plxe-modal__box {
		padding: 20px 13px 16px;
	}
}

/*--------------------------------------------------------------
# Start Playing on phones
#
# Same containment as the top-up sheet — border-box with a gutter
# from the overlay — and buttons that scale instead of overflowing
# their row at narrow widths.
--------------------------------------------------------------*/

.plxe-modal:has( .plxe-start ) {
	padding: 16px;
}

.plxe-modal:has( .plxe-start ) .plxe-modal__box {
	box-sizing: border-box;
	width: 100%;
	max-width: 430px;
	margin: 0 auto;
}

@media ( max-width: 560px ) {

	.plxe-modal:has( .plxe-start ) {
		padding: 12px;
	}

	.plxe-modal:has( .plxe-start ) .plxe-modal__box {
		padding: 22px 15px 18px;
		border-radius: 22px;
	}

	.plxe-modal .plxe-start__actions {
		gap: 8px;
		margin-top: 16px;
	}

	.plxe-modal .plxe-start__no,
	.plxe-modal .plxe-start__go {
		min-width: 0;
		padding: 14px 6px;
		font-size: 14px;
	}

	.plxe-modal .plxe-start__go {
		flex: 1.5 1 0;
		gap: 8px;
	}

	.plxe-modal .plxe-start__go svg {
		width: 16px;
		height: 16px;
	}

	.plxe-modal .plxe-fact {
		gap: 10px;
		padding: 11px 0;
	}

	.plxe-modal .plxe-fact__label {
		font-size: 13px;
	}

	.plxe-modal .plxe-fact__val {
		font-size: 13.5px;
	}

	.plxe-modal .plxe-start__facts {
		padding: 2px 12px;
	}
}

/* Narrow phones: the labels get their own lines rather than shrinking
   into something unreadable. */
@media ( max-width: 340px ) {

	.plxe-modal .plxe-start__actions {
		flex-direction: column-reverse;
	}

	.plxe-modal .plxe-start__no,
	.plxe-modal .plxe-start__go {
		flex: 0 0 auto;
		width: 100%;
	}
}

/*
 * Both sheets hang the close button off the card's corner. The top-up
 * wrapper was position:relative, so its button anchored inside the card
 * padding instead — static here puts them in the same place.
 */
.plxe-modal .plxe-top {
	position: static;
}

.plxe-modal .plxe-modal__box {
	position: relative;
}

/*--------------------------------------------------------------
# "Time's Up" sheet
#
# Shares the Start Playing shell: same wash, same fact rows, same
# buttons. What differs is the alarm artwork and the green prompt
# to buy another session.
--------------------------------------------------------------*/

.plxe-modal .plxe-up__art {
	display: none;
	position: absolute;
	top: -6px;
	right: -4px;
	width: 44%;
	max-width: 200px;
	aspect-ratio: 1 / 1;
	background: no-repeat right top / contain;
	pointer-events: none;
}

.plxe-modal .plxe-up__again {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding: 14px;
	background: #EEFBF1;
	border-radius: 18px;
}

.plxe-modal .plxe-up__againart {
	flex: 0 0 auto;
	width: 62px;
	height: 52px;
	background: no-repeat center / contain;
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52'%3E%3Crect x='8' y='16' width='48' height='26' rx='13' fill='%23fff' stroke='%23BBD9C4' stroke-width='2.4'/%3E%3Crect x='17' y='26' width='11' height='3.4' rx='1.7' fill='%230F172A'/%3E%3Crect x='21' y='22' width='3.4' height='11' rx='1.7' fill='%230F172A'/%3E%3Ccircle cx='42' cy='26' r='3' fill='%2316A34A'/%3E%3Ccircle cx='48' cy='32' r='3' fill='%23F5B301'/%3E%3C/svg%3E" );
}

.plxe-modal .plxe-up__againtxt b {
	display: block;
	font-size: 14.5px;
	font-weight: 800;
	color: #16A34A;
}

.plxe-modal .plxe-up__againtxt em {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.4;
	color: #64748B;
}

@media ( max-width: 560px ) {

	.plxe-modal .plxe-up__again {
		gap: 10px;
		padding: 12px;
	}

	.plxe-modal .plxe-up__againart {
		width: 50px;
		height: 42px;
	}

	.plxe-modal .plxe-up__againtxt b {
		font-size: 13.5px;
	}

	.plxe-modal .plxe-up__againtxt em {
		font-size: 12px;
	}
}

/*--------------------------------------------------------------
# Time's Up + hub link
#
# On a phone the clock artwork was taking nearly half the width,
# squeezing the heading into four lines and stretching the sheet
# down the screen. The art shrinks, the copy gets its width back
# and the sheet stays close to the other two in height.
--------------------------------------------------------------*/

.pxz-mhead--both {
	justify-content: space-between;
}

.pxz-mhead__news {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 13px 7px 9px;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	background: rgba( 255, 255, 255, .16 );
	border: 1px solid rgba( 255, 255, 255, .34 );
	border-radius: 99px;
	backdrop-filter: blur( 6px );
}

.pxz-mhead__news svg {
	transform: rotate( 180deg );
}

@media ( max-width: 560px ) {

	/* The injected art rule caps this at 58%; on a phone the heading
	   needs more than that, so it is reclaimed here. */
	.plxe-modal .plxe-up .plxe-start__head {
		max-width: 68% !important;
	}

	.plxe-modal .plxe-up__art {
		top: -2px;
		right: -2px;
		width: 32%;
		max-width: 128px;
	}

	.plxe-modal .plxe-up .plxe-start__title {
		font-size: clamp( 22px, 6.8vw, 28px );
	}

	.plxe-modal .plxe-up .plxe-start__lede {
		font-size: 13px;
		line-height: 1.35;
	}

	/* Keep the whole sheet on screen without scrolling it. */
	.plxe-modal:has( .plxe-up ) .plxe-modal__box {
		max-height: calc( 100dvh - 24px );
		overflow-y: auto;
	}

	.plxe-modal .plxe-up .plxe-fact {
		padding: 10px 0;
	}

	.plxe-modal .plxe-up .plxe-start__actions {
		margin-top: 14px;
	}

	/* "Play again (20 coins)" is long: let it hold one line by shrinking
	   rather than wrapping into a two-line pill. */
	.plxe-modal .plxe-up .plxe-start__go {
		flex: 1.7 1 0;
		font-size: 13.5px;
		white-space: nowrap;
	}

	.plxe-modal .plxe-up .plxe-start__no {
		font-size: 13.5px;
	}
}

@media ( max-width: 400px ) {

	.plxe-modal .plxe-up .plxe-start__go {
		font-size: 12.5px;
	}
}

/* Guest trial prompt: same shell as the other sheets. */
.plxe-modal .plxe-guest__warn {
	margin: 14px 0 0;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.45;
	color: #8A5B00;
	background: #FFF7E3;
	border-radius: 14px;
}

/* Username field, its message and the suggestions. */
.pxz-editbox__hint {
	margin: 7px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var( --pxz-mut );
}

.pxz-editbox__hint.is-ok {
	color: var( --pxz-green );
	font-weight: 600;
}

.pxz-editbox__hint.is-bad {
	color: #DC2626;
	font-weight: 600;
}

.pxz-ideas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: 9px;
}

.pxz-ideas__label {
	font-size: 12px;
	color: var( --pxz-mut );
}

.pxz-ideas__pick {
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 700;
	color: var( --pxz-green-dark );
	background: var( --pxz-green-soft );
	border: 1px solid rgba( 34, 197, 94, .32 );
	border-radius: 99px;
}

.pxz-ideas__pick:hover {
	background: var( --pxz-green );
	color: #fff;
}

/* "Upload your own" tile under the avatar grid. */
.pxz-avpick__own {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 10px 16px 10px 10px;
	font-size: 13px;
	font-weight: 700;
	color: var( --pxz-ink );
	background: var( --pxz-bg );
	border: 1px dashed var( --pxz-line );
	border-radius: 99px;
	cursor: pointer;
}

.pxz-avpick__own:hover {
	border-color: var( --pxz-green );
	color: var( --pxz-green-dark );
}

.pxz-avpick__ownic {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var( --pxz-green );
	border-radius: 50%;
}

/*--------------------------------------------------------------
# Leaderboard
#
# Dark board in the V4 style, sitting inside the room's own light
# dialog: the ranking reads better against dark, and it marks the
# board out as the reward it is.
--------------------------------------------------------------*/

/* .pxz-fold[role="dialog"] carries an attribute as well as a class, so a
   single class could never repaint it — matched weight here. */
.pxz-fold--board[role="dialog"] {
	background: #0B1A12;
	border-color: #17301F;
}

.pxz-fold--board .pxz-fold__head {
	background: #0B1A12;
	border-bottom-color: #17301F;
}

.pxz-fold--board .pxz-fold__head b,
.pxz-fold--board .pxz-fold__x {
	color: #EAF7EE;
}

.pxz-board {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rank;
}

.pxz-board__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 4px;
	border-bottom: 1px solid #162C1E;
}

.pxz-board__row:last-child {
	border-bottom: 0;
}

.pxz-board__row.is-me {
	margin: 0 -10px;
	padding: 11px 10px;
	background: rgba( 34, 197, 94, .12 );
	border-radius: 12px;
	border-bottom-color: transparent;
}

.pxz-board__rank {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	font-size: 12.5px;
	font-weight: 800;
	color: #9FB8A8;
	background: #13291C;
	border-radius: 9px;
}

/* Podium colours for the first three. */
.pxz-board__rank--1 { color: #3A2A00; background: linear-gradient( 140deg, #FFD466, #F5B301 ); }
.pxz-board__rank--2 { color: #23303A; background: linear-gradient( 140deg, #E6EDF2, #B7C4CE ); }
.pxz-board__rank--3 { color: #3A2417; background: linear-gradient( 140deg, #E8A867, #C9762F ); }

.pxz-board__who {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.pxz-board__who img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #1E3B29;
	object-fit: cover;
}

.pxz-board__who b {
	font-size: 13.5px;
	font-weight: 700;
	color: #EAF7EE;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pxz-board__score {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 800;
	color: #4ADE80;
	font-variant-numeric: tabular-nums;
}

.pxz-board__you {
	margin: 12px 0 0;
	font-size: 12.5px;
	text-align: center;
	color: #9FB8A8;
}

/* Locked state */
.pxz-board__lock {
	padding: 16px 4px 8px;
	text-align: center;
}

.pxz-board__lockic {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 12px;
	border-radius: 50%;
	color: #4ADE80;
	background: rgba( 34, 197, 94, .14 );
}

.pxz-board__lock b {
	display: block;
	font-size: 16px;
	font-weight: 800;
	color: #EAF7EE;
}

.pxz-board__lock p {
	margin: 8px auto 0;
	max-width: 34ch;
	font-size: 13px;
	line-height: 1.5;
	color: #9FB8A8;
}

/* Locked menu row */
.pxz-menu__row.is-locked .pxz-menu__ic {
	opacity: .6;
}

.pxz-menu__row.is-locked .pxz-menu__chev {
	color: var( --pxz-gold );
}

/* "Upload your own" sits with the preset picker. */
.pxz-avup {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 10px 16px 10px 13px;
	font-size: 13px;
	font-weight: 700;
	color: var( --pxz-green-dark );
	background: var( --pxz-green-soft );
	border: 1px dashed rgba( 34, 197, 94, .5 );
	border-radius: 99px;
	cursor: pointer;
}

.pxz-avup:hover {
	background: var( --pxz-green );
	color: #fff;
	border-style: solid;
}

/*--------------------------------------------------------------
# Ranks tab
#
# The board in the room's own light style — podium for the top
# three, a plain list beneath, and a locked state that shows how
# far along the streak is.
--------------------------------------------------------------*/

.pxz-nav__item.is-locked {
	position: relative;
	opacity: .75;
}

.pxz-nav__lock {
	position: absolute;
	top: 4px;
	right: 50%;
	margin-right: -22px;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	color: #7A5B00;
	background: var( --pxz-gold-soft );
}

.pxz-mhead--plain {
	position: static;
	justify-content: center;
	padding: 6px 0 2px;
	background: none;
}

/* ---- Podium ---- */

.pxz-podium {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	align-items: end;
	gap: 8px;
	margin: 10px 0 18px;
}

.pxz-podium__spot {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
}

.pxz-podium__av {
	position: relative;
	display: block;
	margin-bottom: 8px;
}

.pxz-podium__av img {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var( --pxz-line );
	background: var( --pxz-bg );
}

.pxz-podium__av i {
	position: absolute;
	right: -4px;
	bottom: -4px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-size: 12px;
	font-style: normal;
	font-weight: 900;
	border-radius: 50%;
	color: #fff;
	background: var( --pxz-mut );
	box-shadow: 0 2px 8px rgba( 15, 23, 42, .2 );
}

.pxz-podium__spot b {
	display: block;
	max-width: 100%;
	font-size: 13px;
	font-weight: 800;
	color: var( --pxz-ink );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pxz-podium__spot em {
	font-size: 11.5px;
	font-style: normal;
	color: var( --pxz-mut );
}

/* The steps: first tallest, in the middle. */
.pxz-podium__step {
	width: 100%;
	margin-top: 8px;
	border-radius: 12px 12px 0 0;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-bottom: 0;
}

.pxz-podium__spot--1 .pxz-podium__step { height: 74px; background: linear-gradient( 180deg, #FFF4D2, #FFFDF6 ); border-color: #F3DFA6; }
.pxz-podium__spot--2 .pxz-podium__step { height: 54px; background: linear-gradient( 180deg, #EEF3F7, #FFF ); }
.pxz-podium__spot--3 .pxz-podium__step { height: 42px; background: linear-gradient( 180deg, #FBEDE2, #FFF ); border-color: #EAD3BF; }

.pxz-podium__spot--1 .pxz-podium__av img { border-color: var( --pxz-gold ); width: 72px; height: 72px; }
.pxz-podium__spot--1 .pxz-podium__av i { background: var( --pxz-gold ); color: #3A2A00; }
.pxz-podium__spot--2 .pxz-podium__av i { background: #9AA9B6; }
.pxz-podium__spot--3 .pxz-podium__av i { background: #C9762F; }

/* ---- Rest of the table ---- */

.pxz-ranks {
	margin: 0;
	padding: 0 4px;
	list-style: none;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: var( --pxz-radius );
	box-shadow: var( --pxz-shadow );
}

.pxz-ranks__row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 8px;
	border-bottom: 1px solid var( --pxz-line );
}

.pxz-ranks__row:last-child {
	border-bottom: 0;
}

.pxz-ranks__row.is-me {
	background: var( --pxz-green-soft );
	border-radius: 12px;
	border-bottom-color: transparent;
}

.pxz-ranks__no {
	flex: 0 0 auto;
	width: 24px;
	font-size: 12.5px;
	font-weight: 800;
	color: var( --pxz-faint );
	text-align: center;
}

.pxz-ranks__who {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.pxz-ranks__who img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
}

.pxz-ranks__who b {
	font-size: 13.5px;
	font-weight: 700;
	color: var( --pxz-ink );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pxz-ranks__score {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 800;
	color: var( --pxz-green );
	font-variant-numeric: tabular-nums;
}

/* ---- Locked ---- */

.pxz-lock {
	margin-top: 10px;
	padding: 26px 20px 22px;
	text-align: center;
	background: var( --pxz-card );
	border: 1px solid var( --pxz-line );
	border-radius: var( --pxz-radius );
	box-shadow: var( --pxz-shadow );
}

.pxz-lock__ic {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 14px;
	border-radius: 50%;
	color: var( --pxz-green );
	background: var( --pxz-green-soft );
}

.pxz-lock b {
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: var( --pxz-ink );
}

.pxz-lock p {
	margin: 8px auto 0;
	max-width: 32ch;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --pxz-mut );
}

.pxz-lock__bar {
	height: 8px;
	margin: 16px auto 8px;
	max-width: 240px;
	background: var( --pxz-bg );
	border-radius: 99px;
	overflow: hidden;
}

.pxz-lock__bar span {
	display: block;
	height: 100%;
	background: var( --pxz-grad );
	border-radius: 99px;
}

.pxz-lock em {
	font-size: 12px;
	font-style: normal;
	color: var( --pxz-mut );
}

.pxz-lock__go {
	margin-top: 16px;
	padding: 13px 22px;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	background: var( --pxz-grad );
	border-radius: 99px;
	box-shadow: 0 10px 22px rgba( 22, 163, 74, .3 );
}

/*--------------------------------------------------------------
# Podium, properly built
#
# The first pass drew three pale blocks that read as empty cards
# floating over the list. The steps are now solid, green, joined
# at a shared baseline, and carry the rank themselves.
--------------------------------------------------------------*/

.pxz-podium {
	align-items: end;
	gap: 6px;
	margin: 14px 0 22px;
	padding: 0 2px;
}

.pxz-podium__spot {
	position: relative;
	justify-content: flex-end;
}

.pxz-podium__spot b {
	margin-top: 2px;
	font-size: 12.5px;
}

.pxz-podium__spot em {
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var( --pxz-green );
}

/* Solid steps with the rank on them, sitting on one baseline. */
.pxz-podium__step {
	position: relative;
	width: 100%;
	margin-top: 0;
	border: 0;
	border-radius: 14px 14px 0 0;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .35 );
}

.pxz-podium__step::after {
	content: attr( data-rank );
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 20px;
	font-weight: 900;
	color: rgba( 255, 255, 255, .9 );
}

.pxz-podium__spot--1 .pxz-podium__step {
	height: 92px;
	background: linear-gradient( 180deg, #22C55E, #12833F );
}

.pxz-podium__spot--2 .pxz-podium__step {
	height: 66px;
	background: linear-gradient( 180deg, #4ADE80, #1FA352 );
}

.pxz-podium__spot--3 .pxz-podium__step {
	height: 50px;
	background: linear-gradient( 180deg, #86EFAC, #33B268 );
}

/* Avatars sit above their step, ringed to match. */
.pxz-podium__av img {
	border-width: 3px;
	border-color: #fff;
	box-shadow: 0 6px 16px rgba( 8, 40, 22, .18 );
}

.pxz-podium__spot--1 .pxz-podium__av img {
	width: 76px;
	height: 76px;
	border-color: var( --pxz-gold );
}

.pxz-podium__av i {
	right: -2px;
	bottom: -2px;
	width: 22px;
	height: 22px;
	font-size: 11px;
	border: 2px solid #fff;
}

/* The base line the three steps stand on. */
.pxz-podium::after {
	content: '';
	grid-column: 1 / -1;
	height: 4px;
	margin-top: -1px;
	border-radius: 99px;
	background: linear-gradient( 90deg, rgba( 34, 197, 94, .25 ), rgba( 34, 197, 94, .6 ), rgba( 34, 197, 94, .25 ) );
}

/* The locked message inside a dialog needs no card of its own. */
.pxz-lock--flat {
	margin: 0;
	padding: 10px 4px 6px;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Inside the dialog the caption and the button need their own rows. */
.pxz-lock--flat em,
.pxz-lock--flat .pxz-lock__go {
	display: block;
}

.pxz-lock--flat .pxz-lock__go {
	width: 100%;
	margin-top: 14px;
}

/* The Profile tab wears the player's own avatar. */
.pxz-nav__item--me .pxz-avatar {
	width: 24px;
	height: 24px;
	border-width: 2px;
	border-color: transparent;
}

.pxz-nav__item--me.is-on .pxz-avatar {
	border-color: var( --pxz-green );
}

/*--------------------------------------------------------------
# Leaderboard Locked
#
# Green header, shield illustration, an eleven-day tracker and a
# daily-rewards prompt. Sized so it fits a 320px phone without
# clipping the close button or pushing the CTA off screen.
--------------------------------------------------------------*/

.pxz-rlock[role="dialog"] {
	width: min( 430px, calc( 100vw - 24px ) );
	max-height: min( 92dvh, 760px );
	padding: 0 0 16px;
	overflow: hidden auto;
	background: #fff;
	border-radius: 24px;
	text-align: center;
}

/* Header */
.pxz-rlock__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 18px 42px;
	text-align: left;
	background:
		radial-gradient( 120% 90% at 80% 0%, rgba( 255, 255, 255, .16 ), transparent 60% ),
		linear-gradient( 160deg, #1B8A48, #0A4A26 );
	border-radius: 24px 24px 0 0;
}

.pxz-rlock__titles b {
	display: block;
	font-size: clamp( 20px, 5.6vw, 25px );
	font-weight: 900;
	letter-spacing: -.4px;
	color: #fff;
}

.pxz-rlock__titles em {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-style: normal;
	color: rgba( 255, 255, 255, .84 );
}

.pxz-rlock__x {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #fff;
	background: rgba( 0, 0, 0, .28 );
	border: 1px solid rgba( 255, 255, 255, .3 );
	border-radius: 50%;
}

/* Shield, overlapping the header */
.pxz-rlock__art {
	margin: -36px 0 2px;
	line-height: 0;
}

.pxz-rlock__art img,
.pxz-rlock__art svg {
	width: min( 190px, 52vw );
	height: auto;
	animation: pxz-lockglow 3.4s ease-in-out infinite;
}

@keyframes pxz-lockglow {
	0%, 100% { transform: translateY( 0 ) scale( 1 ); }
	50%      { transform: translateY( -4px ) scale( 1.02 ); }
}

.pxz-rlock__coins {
	animation: pxz-lockfloat 4.2s ease-in-out infinite;
	transform-origin: center;
}

@keyframes pxz-lockfloat {
	0%, 100% { transform: translateY( 0 ); opacity: .95; }
	50%      { transform: translateY( -5px ); opacity: 1; }
}

/* Message */
.pxz-rlock__head {
	margin: 6px 18px 0;
	font-size: clamp( 21px, 6.2vw, 27px );
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -.6px;
	color: var( --pxz-ink );
}

.pxz-rlock__head i {
	font-style: normal;
	color: #147A3C;
}

.pxz-rlock__sub {
	margin: 8px 22px 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var( --pxz-mut );
}

/* Eleven-day tracker */
.pxz-track {
	margin: 16px 14px 0;
	padding: 12px 10px 10px;
	background: #F4F7F9;
	border-radius: 18px;
}

.pxz-track__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	position: relative;
}

.pxz-track__row::before {
	content: '';
	position: absolute;
	left: 6%;
	right: 6%;
	top: 50%;
	height: 2px;
	background: #DCE4EA;
}

.pxz-track__day {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp( 20px, 6.4vw, 28px );
	height: clamp( 20px, 6.4vw, 28px );
	font-size: clamp( 10px, 3vw, 12.5px );
	font-weight: 800;
	color: #7C8B99;
	background: #E4EAEF;
	border: 2px solid #F4F7F9;
	border-radius: 50%;
}

.pxz-track__day.is-done {
	color: #fff;
	background: linear-gradient( 160deg, #2ECC61, #15803D );
	box-shadow: 0 4px 10px rgba( 21, 128, 61, .35 );
}

.pxz-track em {
	display: block;
	margin-top: 9px;
	font-size: 12.5px;
	font-style: normal;
	color: var( --pxz-mut );
}

/* Daily rewards strip */
.pxz-daily {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 14px 0;
	padding: 13px 14px;
	text-align: left;
	background: #EDFAF1;
	border-radius: 18px;
}

.pxz-daily__ic {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #FFF4D4;
}

.pxz-daily__txt b {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: #12683A;
}

.pxz-daily__txt em {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.4;
	color: var( --pxz-mut );
}

/* Call to action */
.pxz-rlock__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: calc( 100% - 28px );
	margin: 16px 14px 0;
	padding: 16px 18px;
	font-size: clamp( 15px, 4.4vw, 17px );
	font-weight: 900;
	color: #fff;
	background: linear-gradient( 160deg, #34D06A, #128A41 );
	border-radius: 99px;
	box-shadow: 0 12px 26px rgba( 18, 138, 65, .34 );
	transition: transform .14s ease, filter .14s ease;
}

.pxz-rlock__go:active {
	transform: scale( .975 );
	filter: brightness( 1.06 );
}

.pxz-rlock__foot {
	margin: 12px 20px 0;
	font-size: 12px;
	color: var( --pxz-faint );
}

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

	.pxz-rlock__art img,
	.pxz-rlock__art svg,
	.pxz-rlock__coins {
		animation: none;
	}
}

/* The tracker is a block: its caption belongs under the row, not beside
   it as a flex sibling. */
.pxz-rlock .pxz-track {
	display: block;
}

.pxz-rlock .pxz-track__row {
	width: 100%;
	flex-wrap: nowrap;
}

.pxz-rlock .pxz-track em {
	width: 100%;
	text-align: center;
}

/*--------------------------------------------------------------
# Leaderboard Locked — measured to the target
#
# Palette and sizes taken from the brief: 150–165px header, 23–25px
# title, 40–44px close, 110–140px shield overlapping into the white
# body, 25–27px heading, 78–88px tracker, 52–56px CTA.
--------------------------------------------------------------*/

.pxz-rlock[role="dialog"] {
	--l-emerald: #0B7A3B;
	--l-deep: #08783A;
	--l-bright: #20C968;
	--l-bright2: #16B95B;
	--l-mint: #EAF8EF;
	--l-navy: #101B35;
	--l-muted: #66758D;
	--l-gold: #F7B928;
	--l-track: #DDE5EA;

	width: min( 92vw, 430px );
	box-shadow: 0 28px 70px rgba( 6, 30, 16, .38 );
	animation: pxz-lockin .22s ease;
}

@keyframes pxz-lockin {
	from { transform: translate( -50%, -50% ) scale( .96 ); opacity: 0; }
	to   { transform: translate( -50%, -50% ) scale( 1 ); opacity: 1; }
}

/* Header */
.pxz-rlock__top {
	min-height: 158px;
	padding: 20px 18px 0;
	align-items: flex-start;
	background-color: var( --l-deep );
	background-image:
		radial-gradient( 120% 100% at 85% 0%, rgba( 255, 255, 255, .14 ), transparent 62% ),
		linear-gradient( 155deg, #17A054 0%, #0B7A3B 45%, #05602D 100% );
}

.pxz-rlock__titles b {
	font-size: clamp( 21px, 6.2vw, 25px );
	line-height: 1.15;
}

.pxz-rlock__titles em {
	font-size: 13.5px;
	color: #CFF0DC;
}

.pxz-rlock__x {
	width: 42px;
	height: 42px;
	margin: -2px -2px 0 0;
	background: rgba( 4, 44, 22, .45 );
	border-color: rgba( 255, 255, 255, .28 );
}

/* Shield: large, bridging header and body */
.pxz-rlock__art {
	margin: -104px 0 0;
	position: relative;
	z-index: 1;
}

.pxz-rlock__art img,
.pxz-rlock__art svg {
	width: min( 300px, 84vw );
	max-width: 100%;
}

/* Copy */
.pxz-rlock__head {
	margin-top: -6px;
	font-size: clamp( 22px, 6.6vw, 27px );
	color: var( --l-navy );
}

.pxz-rlock__head i {
	color: var( --l-emerald );
}

.pxz-rlock__sub {
	margin: 10px 24px 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var( --l-muted );
}

/* Tracker */
.pxz-rlock .pxz-track {
	margin: 18px 14px 0;
	padding: 16px 12px 12px;
	min-height: 82px;
	background: #F2F6F9;
	border-radius: 18px;
}

.pxz-rlock .pxz-track__row::before {
	background: var( --l-track );
}

.pxz-rlock .pxz-track__day {
	width: clamp( 21px, 6.6vw, 29px );
	height: clamp( 21px, 6.6vw, 29px );
	font-size: clamp( 10.5px, 3.1vw, 13px );
	color: #7C8B99;
	background: var( --l-track );
	border-color: #F2F6F9;
}

.pxz-rlock .pxz-track__day.is-done {
	background: linear-gradient( 160deg, var( --l-bright ), var( --l-emerald ) );
	box-shadow: 0 4px 12px rgba( 11, 122, 59, .4 );
}

.pxz-rlock .pxz-track em {
	margin-top: 11px;
	font-size: 13px;
	color: var( --l-muted );
}

/* Rewards card */
.pxz-daily {
	margin: 14px 14px 0;
	padding: 14px;
	gap: 14px;
	background: var( --l-mint );
	border-radius: 16px;
}

.pxz-daily__ic {
	width: auto;
	height: auto;
	background: none;
}

.pxz-daily__txt b {
	font-size: 15.5px;
	color: #0B5F30;
}

.pxz-daily__txt em {
	font-size: 13px;
	color: var( --l-muted );
}

/* CTA */
.pxz-rlock__go {
	min-height: 54px;
	margin-top: 18px;
	font-size: clamp( 15.5px, 4.4vw, 17px );
	background: linear-gradient( 160deg, var( --l-bright ), var( --l-bright2 ) );
	box-shadow: 0 14px 28px rgba( 22, 185, 91, .36 );
}

.pxz-rlock__go svg,
.pxz-rlock__go .pxz-i {
	margin-left: 2px;
}

.pxz-rlock__foot {
	margin-top: 14px;
	font-size: 11.5px;
	color: #8A97A8;
}

/*--------------------------------------------------------------
# Locked popup on small phones
#
# At 320–360px the eleven circles overflowed their row and the CTA
# fell past the fold. The circles now share the width evenly and the
# illustration and gaps give ground first, as the brief asks —
# rather than shrinking the type.
--------------------------------------------------------------*/

.pxz-rlock .pxz-track__day {
	flex: 1 1 0;
	min-width: 0;
	max-width: 29px;
	aspect-ratio: 1 / 1;
	height: auto;
	width: auto;
}

@media ( max-width: 374px ) {

	.pxz-rlock[role="dialog"] {
		width: calc( 100vw - 24px );
	}

	.pxz-rlock__top {
		min-height: 138px;
		padding: 16px 14px 0;
	}

	.pxz-rlock__art {
		margin-top: -92px;
	}

	.pxz-rlock__art img,
	.pxz-rlock__art svg {
		width: min( 244px, 76vw );
	}

	.pxz-rlock .pxz-track {
		margin: 14px 10px 0;
		padding: 13px 8px 10px;
	}

	.pxz-rlock .pxz-track__day {
		max-width: 24px;
		font-size: 10.5px;
		border-width: 1.5px;
	}

	.pxz-daily {
		margin: 12px 10px 0;
		padding: 12px;
		gap: 10px;
	}

	.pxz-daily__ic svg {
		width: 46px;
		height: 38px;
	}

	.pxz-rlock__go {
		width: calc( 100% - 20px );
		margin: 14px 10px 0;
	}
}

/* Short screens: trim the vertical rhythm so the CTA stays in view. */
@media ( max-height: 700px ) {

	.pxz-rlock__top {
		min-height: 124px;
	}

	.pxz-rlock__art {
		margin-top: -86px;
	}

	.pxz-rlock__art img,
	.pxz-rlock__art svg {
		width: min( 220px, 68vw );
	}

	.pxz-rlock__sub {
		margin-top: 6px;
		font-size: 13.5px;
	}

	.pxz-rlock .pxz-track {
		margin-top: 12px;
		padding-top: 12px;
		min-height: 0;
	}

	.pxz-daily {
		margin-top: 10px;
		padding: 11px 12px;
	}

	.pxz-daily__txt em {
		font-size: 12px;
	}

	.pxz-rlock__go {
		margin-top: 12px;
		min-height: 50px;
	}

	.pxz-rlock__foot {
		margin-top: 10px;
	}
}

/*--------------------------------------------------------------
# DUED Games skin
#
# The room in blue. Every colour in the room comes from the token
# block at the top of this file, so a skin is a variable swap
# rather than a second stylesheet — the layout, spacing and
# components stay identical and only the palette moves.
--------------------------------------------------------------*/

.pxz--dued {
	--pxz-green: #1D6FF2;
	--pxz-green-2: #3B8DFF;
	--pxz-green-dark: #0B3FA8;
	--pxz-green-soft: #E8F1FF;
	--pxz-dark: #0B2A6B;
	--pxz-blue: #1D6FF2;
	--pxz-grad: linear-gradient( 100deg, #3B8DFF, #0B3FA8 );
}

/* Pieces that name a green directly rather than using a token. */
.pxz--dued .pxz-earn {
	background: linear-gradient( 96deg, #2F7BF6, #1D6FF2 34%, #0E49BE 62%, #0A3A9C 82%, #082F80 );
}

.pxz--dued .pxz-store__title i,
.pxz--dued .pxz-rlock__head i {
	color: #1D6FF2;
}

.pxz--dued .pxz-prize__hot {
	background: linear-gradient( 100deg, #38BDF8, #1D6FF2 );
	box-shadow: 0 3px 10px rgba( 29, 111, 242, .35 );
}

.pxz--dued .pxz-podium__spot--1 .pxz-podium__step { background: linear-gradient( 180deg, #3B8DFF, #0B3FA8 ); }
.pxz--dued .pxz-podium__spot--2 .pxz-podium__step { background: linear-gradient( 180deg, #6FB0FF, #1D6FF2 ); }
.pxz--dued .pxz-podium__spot--3 .pxz-podium__step { background: linear-gradient( 180deg, #A9CEFF, #4C90F5 ); }

.pxz--dued .pxz-board__score,
.pxz--dued .pxz-ranks__score {
	color: #1D6FF2;
}

/* Locked popup, in blue. */
.pxz--dued .pxz-rlock[role="dialog"] {
	--l-emerald: #0B3FA8;
	--l-deep: #0B3FA8;
	--l-bright: #3B8DFF;
	--l-bright2: #1D6FF2;
	--l-mint: #E8F1FF;
}

.pxz--dued .pxz-rlock__top {
	background-image:
		radial-gradient( 120% 100% at 85% 0%, rgba( 255, 255, 255, .16 ), transparent 62% ),
		linear-gradient( 155deg, #3B8DFF 0%, #1D6FF2 45%, #0B3FA8 100% );
}

.pxz--dued .pxz-rlock .pxz-track__day.is-done {
	background: linear-gradient( 160deg, #3B8DFF, #0B3FA8 );
	box-shadow: 0 4px 12px rgba( 11, 63, 168, .4 );
}

.pxz--dued .pxz-daily__txt b {
	color: #0B3FA8;
}

/* The drawn shield follows the skin. */
.pxz--dued .pxz-rlock__art svg [fill="url(#pxzShield)"] {
	fill: #1D6FF2;
}

/* DUED Games frames reward artwork square (1254 × 1254) rather than the
   wide 39:20 the Green Room uses. */
.pxz--dued .pxz-prize__thumb {
	aspect-ratio: 1 / 1;
}

/* No decorative brush in the DUED skin — the artwork carries the hero on
   its own and the tint sat over the logo. */
.pxz--dued .pxz-hero__brush {
	display: none;
}

/*--------------------------------------------------------------
# Loading screen
#
# Covers the room while it paints. The artwork is uploaded in the
# Icon Lobby; the bar, percentage and lines are drawn here so they
# stay sharp and can carry real progress.
--------------------------------------------------------------*/

.pxz-splash {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 22px clamp( 46px, 12vh, 120px );
	background: linear-gradient( 180deg, #DCEBFF, #F4F9FF ) center / cover no-repeat;
	transition: opacity .4s ease, visibility .4s ease;
}

.pxz-splash.is-done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pxz-splash__inner {
	width: min( 440px, 100% );
	text-align: center;
}

.pxz-splash__title {
	margin: 0 0 14px;
	font-size: clamp( 19px, 5.4vw, 26px );
	font-weight: 900;
	letter-spacing: -.4px;
	color: #0B1B3A;
}

.pxz-splash__title i {
	font-style: normal;
	color: #1D6FF2;
}

/* Segmented bar, as in the reference. */
.pxz-splash__bar {
	position: relative;
	height: clamp( 26px, 7vw, 34px );
	padding: 4px;
	background: rgba( 255, 255, 255, .72 );
	border: 2px solid rgba( 255, 255, 255, .9 );
	border-radius: 99px;
	box-shadow: 0 8px 22px rgba( 11, 63, 168, .18 ), inset 0 1px 4px rgba( 11, 63, 168, .12 );
	overflow: hidden;
}

.pxz-splash__bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 99px;
	background:
		repeating-linear-gradient( 115deg, rgba( 255, 255, 255, .28 ) 0 4px, transparent 4px 20px ),
		linear-gradient( 90deg, #3B8DFF, #0B57E0 );
	box-shadow: 0 0 18px rgba( 29, 111, 242, .6 );
	transition: width .25s ease;
}

.pxz-splash__pct {
	display: block;
	margin: 14px 0 2px;
	font-size: clamp( 26px, 8vw, 40px );
	font-weight: 900;
	font-style: italic;
	letter-spacing: -1px;
	color: #0B2A6B;
	font-variant-numeric: tabular-nums;
}

.pxz-splash__sub {
	display: block;
	font-size: clamp( 12.5px, 3.6vw, 15px );
	font-style: normal;
	letter-spacing: .04em;
	color: #44557A;
}

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

	.pxz-splash,
	.pxz-splash__bar span {
		transition: none;
	}
}

/* What's New: a short change log, in the room's dialog style. */
.pxz-new__lede {
	margin: 2px 2px 12px;
	font-size: 13px;
	color: var( --pxz-mut );
}

.pxz-new__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pxz-new__list li {
	position: relative;
	padding: 9px 0 9px 26px;
	font-size: 14px;
	line-height: 1.4;
	color: var( --pxz-ink );
	border-bottom: 1px solid var( --pxz-line );
}

.pxz-new__list li:last-child {
	border-bottom: 0;
}

.pxz-new__list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 15px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var( --pxz-grad );
}

.pxz-new__go {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 14px 0;
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	background: var( --pxz-grad );
	border-radius: 99px;
	box-shadow: 0 10px 24px rgba( 22, 163, 74, .26 );
}

.pxz--dued .pxz-new__go {
	box-shadow: 0 10px 24px rgba( 29, 111, 242, .3 );
}

/*--------------------------------------------------------------
# Loading screen: the phone column only
#
# The room runs as a 520px column, so the splash matches it rather
# than covering the whole monitor. Outside that column the page
# background shows, exactly as it does around the room itself.
--------------------------------------------------------------*/

.pxz-splash {
	left: 50%;
	right: auto;
	transform: translateX( -50% );
	width: 100%;
	max-width: 520px;
	box-shadow: 0 0 40px rgba( 8, 30, 60, .16 );
}

@media ( min-width: 560px ) {

	.pxz-splash {
		top: 0;
		bottom: 0;
	}
}

/*--------------------------------------------------------------
# What's New version line + claim animation
--------------------------------------------------------------*/

.pxz-new__ver {
	/* Sits beside the heading, not under it. */
	display: inline-block;
	margin: 0 0 0 8px;
	vertical-align: 2px;
	padding: 3px 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var( --pxz-green-dark );
	background: var( --pxz-green-soft );
	border-radius: 99px;
}

.pxz--dued .pxz-new__ver {
	color: #0B3FA8;
	background: #E8F1FF;
}

/* The sheet drops away as the coins leave it. */
.pxz-fold.is-claimed-out {
	animation: pxz-claimout .5s ease forwards;
	pointer-events: none;
}

@keyframes pxz-claimout {
	to {
		transform: translate( -50%, -46% ) scale( .92 );
		opacity: 0;
	}
}

/* Coins arcing to the wallet. */
.pxz-coinfly {
	position: fixed;
	z-index: 100002;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background:
		radial-gradient( circle at 34% 30%, #FFE9A3, #F7B928 58%, #C98708 );
	box-shadow: 0 4px 12px rgba( 201, 135, 8, .45 ), inset 0 -2px 4px rgba( 0, 0, 0, .18 );
	pointer-events: none;
	animation: pxz-coinfly .85s cubic-bezier( .5, -0.3, .4, 1 ) forwards;
}

@keyframes pxz-coinfly {

	0% {
		transform: translate( 0, 0 ) scale( .6 );
		opacity: 0;
	}

	18% {
		transform: translate( calc( var( --dx ) * .12 ), calc( var( --dy ) * .12 - 34px ) ) scale( 1.1 );
		opacity: 1;
	}

	100% {
		transform: translate( var( --dx ), var( --dy ) ) scale( .45 );
		opacity: 0;
	}
}

/* The balance reacts as they land. */
[data-playrox-coin-balance].is-bumping {
	animation: pxz-bump .4s ease infinite;
	color: var( --pxz-gold );
}

@keyframes pxz-bump {
	0%, 100% { transform: scale( 1 ); }
	50%      { transform: scale( 1.14 ); }
}

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

	.pxz-coinfly,
	.pxz-fold.is-claimed-out,
	[data-playrox-coin-balance].is-bumping {
		animation: none;
	}

	.pxz-fold.is-claimed-out {
		opacity: 0;
	}
}

.pxz-fold__head b .pxz-new__ver {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
}

/*--------------------------------------------------------------
# Leaderboard Locked — tracker with day labels
#
# Each step carries its own "Day N" caption and the run ends on a
# gold crown, as the reference shows. Captions drop away on narrow
# phones rather than crushing the circles.
--------------------------------------------------------------*/

.pxz-rlock .pxz-track__row {
	align-items: flex-start;
	gap: 0;
}

.pxz-track__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: 1 1 0;
	min-width: 0;
}

.pxz-rlock .pxz-track__day {
	display: grid;
	place-items: center;
	width: clamp( 20px, 6vw, 30px );
	height: clamp( 20px, 6vw, 30px );
	font-size: clamp( 10px, 3vw, 13px );
	font-style: normal;
	font-weight: 800;
	color: #7C8B99;
	background: #DDE5EA;
	border: 2px solid #F2F6F9;
	border-radius: 50%;
	flex: 0 0 auto;
	max-width: none;
	aspect-ratio: auto;
}

.pxz-rlock .pxz-track__day.is-done {
	color: #fff;
	background: linear-gradient( 160deg, #20C968, #0B7A3B );
	box-shadow: 0 4px 12px rgba( 11, 122, 59, .4 );
}

.pxz-rlock .pxz-track__day.is-now {
	box-shadow: 0 0 0 4px rgba( 32, 201, 104, .22 ), 0 4px 12px rgba( 11, 122, 59, .4 );
}

.pxz-track__step b {
	font-size: clamp( 7.5px, 2.2vw, 10px );
	font-weight: 700;
	line-height: 1;
	color: #8A97A8;
	white-space: nowrap;
}

.pxz-track__step:first-child b {
	color: #0B7A3B;
}

/* Gold crown closing the run. */
.pxz-track__prize {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp( 24px, 7vw, 34px );
	height: clamp( 24px, 7vw, 34px );
	margin-left: 2px;
	color: #7A5B00;
	background: linear-gradient( 160deg, #FFD766, #F0A500 );
	border: 2px solid #FFF3CF;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba( 240, 165, 0, .45 );
}

/* The joining line sits behind the circles, not the captions. */
.pxz-rlock .pxz-track__row::before {
	top: clamp( 10px, 3vw, 15px );
	left: 4%;
	right: 8%;
}

/* Caption with rules either side. */
.pxz-rlock .pxz-track em {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-weight: 700;
	color: #44557A;
}

.pxz-rlock .pxz-track em::before,
.pxz-rlock .pxz-track em::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: #DDE5EA;
}

/* Coin on the button. */
.pxz-rlock__coin {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-right: 2px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .22 );
}

@media ( max-width: 380px ) {

	.pxz-track__step b {
		display: none;
	}
}

/* "Locked" in gold, as the reference has it. */
.pxz-rlock__titles b i {
	font-style: normal;
	color: #FFD766;
}

/* Day captions need about 34px each; below that they collide, so the
   circles carry the count on their own. */
@media ( max-width: 440px ) {

	.pxz-track__step b {
		display: none;
	}
}

/*--------------------------------------------------------------
# Locked popup: still shield, progress connector, claim state
--------------------------------------------------------------*/

/* The shield holds still — uploaded artwork should sit where it is
   drawn, not drift. */
.pxz-rlock__art img,
.pxz-rlock__art svg,
.pxz-rlock__coins {
	animation: none !important;
	transform: none;
}

/* Connector: grey rail with a green run up to the current day. */
.pxz-rlock .pxz-track__row::after {
	content: '';
	position: absolute;
	top: clamp( 10px, 3vw, 15px );
	left: 4%;
	width: calc( ( 100% - 12% ) * var( --pxz-track-done, 0% ) / 100% );
	max-width: 88%;
	height: 3px;
	border-radius: 99px;
	background: linear-gradient( 90deg, #20C968, #0B7A3B );
	box-shadow: 0 0 8px rgba( 32, 201, 104, .45 );
}

.pxz-rlock .pxz-track__row::before {
	height: 3px;
	border-radius: 99px;
}

/* Claimed: the button says so and stops taking taps. */
.pxz-rlock__go.is-taken,
.pxz-rlock__go:disabled {
	background: #E8EDF2;
	color: #7C8B99;
	box-shadow: none;
	cursor: default;
}

.pxz-rlock__go.is-taken .pxz-rlock__coin,
.pxz-rlock__go:disabled .pxz-rlock__coin {
	background: rgba( 124, 139, 153, .16 );
	filter: grayscale( 1 );
	opacity: .7;
}

.pxz-rlock__go.is-taken svg:last-child,
.pxz-rlock__go:disabled svg:last-child {
	display: none;
}

/*--------------------------------------------------------------
# Loading screen — Green Room
#
# Dark green artwork with the copy in white, a rounded green bar
# and the tagline under a pair of rules.
--------------------------------------------------------------*/

.pxz-splash--green {
	background: linear-gradient( 180deg, #0B4A28, #073A1F 60%, #052C18 );
	color: #fff;
}

.pxz-splash--green .pxz-splash__title {
	font-size: clamp( 17px, 4.6vw, 21px );
	font-weight: 800;
	letter-spacing: -.2px;
	color: #fff;
}

.pxz-splash--green .pxz-splash__title i {
	color: #fff;
}

.pxz-splash--green .pxz-splash__bar {
	height: clamp( 14px, 3.6vw, 18px );
	padding: 3px;
	background: rgba( 255, 255, 255, .16 );
	border: 0;
	box-shadow: inset 0 1px 3px rgba( 0, 0, 0, .3 );
}

.pxz-splash--green .pxz-splash__bar span {
	background: linear-gradient( 90deg, #5BE08A, #22C55E 60%, #16A34A );
	box-shadow: 0 0 14px rgba( 34, 197, 94, .7 );
}

.pxz-splash--green .pxz-splash__pct {
	margin: 12px 0 0;
	font-size: clamp( 17px, 4.8vw, 22px );
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0;
	color: #fff;
}

/* "Real Games. Real Rewards." between two rules. */
.pxz-splash__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
	font-size: clamp( 14px, 4vw, 17px );
	font-style: normal;
	font-weight: 800;
	color: #fff;
}

.pxz-splash__tag i {
	font-style: normal;
	color: #4ADE80;
}

.pxz-splash__tag::before,
.pxz-splash__tag::after {
	content: '';
	flex: 0 0 auto;
	width: clamp( 18px, 7vw, 40px );
	height: 2px;
	border-radius: 99px;
	background: rgba( 74, 222, 128, .55 );
}

/*--------------------------------------------------------------
# Locked popup: header legibility, single tracker caption
--------------------------------------------------------------*/

/* A scrim over the header artwork so the heading holds up against
   whatever is uploaded behind it. */
.pxz-rlock__top {
	position: relative;
	isolation: isolate;
}

.pxz-rlock__top::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient( 100deg, rgba( 4, 40, 20, .72 ) 0%, rgba( 4, 40, 20, .42 ) 52%, rgba( 4, 40, 20, .18 ) 100% ),
		linear-gradient( 180deg, rgba( 4, 40, 20, .34 ), rgba( 4, 40, 20, 0 ) 70% );
	border-radius: 24px 24px 0 0;
	pointer-events: none;
}

.pxz-rlock__titles b,
.pxz-rlock__titles em {
	text-shadow: 0 2px 8px rgba( 3, 28, 14, .55 );
}

/* One caption under the run, not eleven. */
.pxz-track__step b {
	display: none;
}

/* No drawn shield any more: the header artwork carries the top of the
   popup on its own, so the copy starts straight under it. */
.pxz-rlock__art {
	display: none;
}

.pxz-rlock__top {
	min-height: clamp( 128px, 26vh, 190px );
	padding-bottom: 18px;
}

.pxz-rlock__head {
	margin-top: 18px;
}

/*--------------------------------------------------------------
# Locked popup: shorter header, darker scrim
--------------------------------------------------------------*/

.pxz-rlock__top {
	min-height: clamp( 100px, 13vh, 132px );
	padding-bottom: 14px;
}

/* Heavier wash so the heading reads over any artwork. */
.pxz-rlock__top::before {
	background:
		linear-gradient( 100deg, rgba( 2, 22, 11, .86 ) 0%, rgba( 2, 22, 11, .66 ) 55%, rgba( 2, 22, 11, .42 ) 100% ),
		linear-gradient( 180deg, rgba( 2, 22, 11, .55 ), rgba( 2, 22, 11, .18 ) 75% );
}

.pxz-rlock__head {
	margin-top: 14px;
}

/*--------------------------------------------------------------
# Flocka Games skin
#
# Dark room with orange accents. As with DUED this is a token swap
# — the difference here is that the surfaces go dark too, so the
# ink and line tokens move with them.
--------------------------------------------------------------*/

.pxz--flocka {
	--pxz-green: #FF6A1A;
	--pxz-green-2: #FF8A3D;
	--pxz-green-dark: #C2410C;
	--pxz-green-soft: rgba( 255, 106, 26, .13 );
	--pxz-ink: #FFFFFF;
	--pxz-mut: #9AA2B1;
	--pxz-faint: #6B7280;
	--pxz-bg: #08090B;
	--pxz-card: #141518;
	--pxz-line: #24262C;
	--pxz-dark: #08090B;
	--pxz-blue: #FF8A3D;
	--pxz-shadow: 0 6px 22px rgba( 0, 0, 0, .5 );
	--pxz-grad: linear-gradient( 100deg, #FF8A3D, #D2470A );

	color: #fff;
}

/* Surfaces that named a light colour rather than a token. */
.pxz--flocka .pxz-fold[role="dialog"],
.pxz--flocka .pxz-wallet,
.pxz--flocka .pxz-card,
.pxz--flocka .pxz-prize,
.pxz--flocka .pxz-game,
.pxz--flocka .pxz-menu__row,
.pxz--flocka .pxz-chip,
.pxz--flocka .pxz-ranks,
.pxz--flocka .pxz-nav {
	background: var( --pxz-card );
	border-color: var( --pxz-line );
	color: var( --pxz-ink );
}

.pxz--flocka .pxz-chip.is-on {
	background: var( --pxz-grad );
	border-color: transparent;
	color: #fff;
}

.pxz--flocka .pxz-earn {
	background:
		linear-gradient( 96deg, rgba( 255, 106, 26, .18 ), rgba( 0, 0, 0, 0 ) 58% ),
		linear-gradient( 180deg, #17181C, #0C0D0F );
	border: 1px solid rgba( 255, 138, 61, .45 );
}

.pxz--flocka .pxz-earn b,
.pxz--flocka .pxz-store__title i,
.pxz--flocka .pxz-spot__kicker {
	color: #FF8A3D;
}

.pxz--flocka .pxz-spot {
	background: linear-gradient( 180deg, #17181C, #0C0D0F );
	border: 1px solid rgba( 255, 138, 61, .35 );
}

.pxz--flocka .pxz-prize__hot {
	background: linear-gradient( 100deg, #FFB020, #E2530C );
}

.pxz--flocka .pxz-podium__spot--1 .pxz-podium__step { background: linear-gradient( 180deg, #FF8A3D, #C2410C ); }
.pxz--flocka .pxz-podium__spot--2 .pxz-podium__step { background: linear-gradient( 180deg, #FFB37A, #FF6A1A ); }
.pxz--flocka .pxz-podium__spot--3 .pxz-podium__step { background: linear-gradient( 180deg, #FFD0AE, #FF8A3D ); }

.pxz--flocka .pxz-ranks__score,
.pxz--flocka .pxz-board__score {
	color: #FF8A3D;
}

/* Locked popup and loading screen follow the same palette. */
.pxz--flocka .pxz-rlock[role="dialog"] {
	--l-emerald: #C2410C;
	--l-deep: #16171B;
	--l-bright: #FF8A3D;
	--l-bright2: #E2530C;
	--l-mint: rgba( 255, 106, 26, .12 );
	--l-navy: #FFFFFF;
	--l-muted: #9AA2B1;

	background: #141518;
}

.pxz--flocka .pxz-rlock__top {
	background-image:
		radial-gradient( 120% 100% at 85% 0%, rgba( 255, 138, 61, .22 ), transparent 62% ),
		linear-gradient( 155deg, #2A1408 0%, #16171B 70% );
}

.pxz--flocka .pxz-track,
.pxz--flocka .pxz-daily {
	background: #1B1D21;
}

.pxz--flocka .pxz-track__day {
	color: #9AA2B1;
	background: #2A2D33;
	border-color: #1B1D21;
}

.pxz-splash--flocka {
	background: linear-gradient( 180deg, #17110C, #0B0B0D 62%, #08090B );
	color: #fff;
}

.pxz-splash--flocka .pxz-splash__title,
.pxz-splash--flocka .pxz-splash__pct {
	color: #fff;
}

.pxz-splash--flocka .pxz-splash__title i {
	color: #FF8A3D;
}

.pxz-splash--flocka .pxz-splash__bar {
	background: rgba( 255, 255, 255, .14 );
	border: 0;
}

.pxz-splash--flocka .pxz-splash__bar span {
	background: linear-gradient( 90deg, #FFB020, #E2530C );
	box-shadow: 0 0 14px rgba( 226, 83, 12, .7 );
}

.pxz-splash--flocka .pxz-splash__tag i {
	color: #FF8A3D;
}

.pxz-splash--flocka .pxz-splash__tag::before,
.pxz-splash--flocka .pxz-splash__tag::after {
	background: rgba( 255, 138, 61, .55 );
}

/* Hero bands: 170px on both the Games and Rewards tabs. */
.pxz--dued .pxz-rhero,
.pxz--dued .pxz-rhero--games,
.pxz--flocka .pxz-rhero,
.pxz--flocka .pxz-rhero--games {
	height: 170px;
	min-height: 170px;
	max-height: 170px;
}

/*--------------------------------------------------------------
# Flocka: hero brush off, white wallet strip
--------------------------------------------------------------*/

/* The decorative glow sat over the logo; the artwork carries the top
   of the screen on its own. */
.pxz--flocka .pxz-hero__brush {
	display: none;
}

/* The wallet stays white against the dark room — it reads as the one
   bright surface, the way the reference has it. */
.pxz--flocka .pxz-wallet,
.pxz--flocka .pxz-wallet--rewards {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: #0F172A;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, .45 );
}

.pxz--flocka .pxz-wallet b,
.pxz--flocka .pxz-wallet strong,
.pxz--flocka .pxz-wallet .pxz-hero__num,
.pxz--flocka .pxz-free__title {
	color: #0F172A;
}

.pxz--flocka .pxz-wallet em,
.pxz--flocka .pxz-wallet small,
.pxz--flocka .pxz-hero__lbl,
.pxz--flocka .pxz-free__sub {
	color: #64748B;
}

.pxz--flocka .pxz-wallet .pxz-sep,
.pxz--flocka .pxz-wallet hr {
	background: #E8ECF0;
	border-color: #E8ECF0;
}

/*--------------------------------------------------------------
# Loading screen — Flocka
#
# The bar sits about two thirds down rather than at the foot, so
# the artwork's skyline and strapline stay clear beneath it.
--------------------------------------------------------------*/

.pxz-splash--flocka {
	align-items: flex-start;
	padding: 0 26px;
}

.pxz-splash--flocka .pxz-splash__inner {
	margin-top: 64vh;
	width: min( 460px, 100% );
}

.pxz-splash--flocka .pxz-splash__title {
	margin-bottom: 12px;
	font-size: clamp( 16px, 4.6vw, 21px );
	font-weight: 600;
	letter-spacing: -.1px;
	color: #fff;
}

.pxz-splash--flocka .pxz-splash__title i {
	color: #fff;
}

/* Capsule with a light rim and an orange fill, as in the artwork. */
.pxz-splash--flocka .pxz-splash__bar {
	height: clamp( 20px, 5.4vw, 26px );
	padding: 3px;
	background: rgba( 12, 12, 14, .72 );
	border: 2px solid rgba( 255, 255, 255, .9 );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .55 );
}

.pxz-splash--flocka .pxz-splash__bar span {
	background: linear-gradient( 90deg, #FF6A1A, #FFB020 85% );
	box-shadow: 0 0 16px rgba( 255, 138, 61, .75 );
}

.pxz-splash--flocka .pxz-splash__pct {
	margin-top: 12px;
	font-size: clamp( 19px, 5.6vw, 26px );
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0;
	color: #fff;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, .6 );
}

/* Short screens: sit a little higher so the bar is never off-screen. */
@media ( max-height: 720px ) {

	.pxz-splash--flocka .pxz-splash__inner {
		margin-top: 58vh;
	}
}

/* The prize banner heading is hardcoded dark green in the base rules,
   which reads as dull against the Flocka card — white here, with the
   supporting lines lifted to match. */
.pxz--flocka .pxz-spot h3 {
	color: #FFFFFF;
}

.pxz--flocka .pxz-spot em,
.pxz--flocka .pxz-spot__kicker {
	color: #C7CCD6;
}

.pxz--flocka .pxz-spot__kicker {
	color: #FF8A3D;
}

.pxz--flocka .pxz-spot__cost {
	color: #FFB020;
}

.pxz--flocka .pxz-spot__script {
	color: rgba( 255, 255, 255, .5 );
}