/**
 * PlayRox — economy popups (Start Playing, Top up, Time's Up).
 *
 * Built on document.body by playrox-economy.js, so they are styled here
 * and loaded wherever that script runs — a game started from a news page
 * gets the same sheets as one started in the room. Media queries are kept
 * intact: flattening them made mobile-only rules apply at every width.
 */



/*--------------------------------------------------------------
# "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;
}
/* 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 );
}
/*
 * 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;
}
/* 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;
	}
/* 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%;
}
/*--------------------------------------------------------------
# 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;
}
/*
 * 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;
}
/* 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: 100% !important;
	}
/*
 * Keep the sheet on screen without clipping the close badge. overflow-y
 * on the box establishes a clip on both axes, which cut the button in
 * half — the scroll lives on an inner wrapper instead, and the badge
 * keeps its place outside the card.
 */
.plxe-modal:has( .plxe-up ) .plxe-modal__box {
	max-height: calc( 100dvh - 24px );
	overflow: visible;
}

/*
 * The sheet scrolls, and a scroll container clips at its padding box on
 * both axes — which shaved the left edge off the "T" in Time's Up. A few
 * pixels of padding, pulled back with a matching negative margin, moves
 * that edge clear of the glyphs without shifting the layout.
 */
.plxe-modal .plxe-up {
	max-height: calc( 100dvh - 24px );
	overflow-y: auto;
	overflow-x: hidden;
	padding-left: 6px;
	margin-left: -6px;
	border-radius: inherit;
}

.plxe-modal .plxe-up > * {
	margin-left: 0;
}

/*
 * The badge sits inside the card on this sheet. Hanging it outside the
 * corner needed the box to clip nothing, which fought with the scroll —
 * and on a narrow screen it ran off the right edge.
 */
.plxe-modal:has( .plxe-up ) .plxe-start__x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	background: rgba( 255, 255, 255, .92 );
	box-shadow: 0 4px 14px rgba( 8, 25, 16, .18 );
}

/* The heading keeps clear of it. */
/*
 * The head spans the card now, so it needs its own clearance: the close
 * badge at the top right, and the uploaded artwork below it. Without
 * this the title ran under the art and lost its first words.
 */
/*
 * One gutter, not two. The head reserved 54px for the close badge and
 * the title reserved another third for the artwork on top of it, which
 * squeezed the copy into a narrow column down the left. A single
 * clearance now covers whichever of the two reaches furthest in, and
 * the text keeps at least 58% of the card whatever the screen.
 */
.plxe-modal .plxe-up .plxe-start__head {
	position: relative;
	z-index: 2;
	max-width: 100%;
	padding-right: 0;
}

.plxe-modal .plxe-up .plxe-start__title,
.plxe-modal .plxe-up .plxe-start__lede {
	padding-right: 58px;
	max-width: 100%;
}

.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__title,
.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__lede {
	padding-right: clamp( 58px, 30%, 124px );
}

.plxe-modal .plxe-up__art {
	z-index: 1;
}
/* "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;
	}
/* 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;
}
/*
 * Phone-width tuning. These rules were written inside media queries in
 * the room stylesheet; the first extraction pass dropped the wrappers,
 * which made mobile-only sizing apply on every screen.
 */
@media ( max-width: 560px ) {



	.plxe-modal .plxe-top__coinl,
	.plxe-modal .plxe-top__coinr {
		width: 64px;
		height: 64px;
	}


	.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;
	}


	.plxe-modal .plxe-packs {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}


	.plxe-modal:has( .plxe-top ) {
		padding: 12px;
	}


	.plxe-modal:has( .plxe-top ) .plxe-modal__box {
		padding: 20px 13px 16px;
	}


	.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;
	}




	.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;
	}


	.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;
	}


	.plxe-modal .plxe-up .plxe-fact {
		padding: 10px 0;
	}


	.plxe-modal .plxe-up .plxe-start__actions {
		margin-top: 14px;
	}


	.plxe-modal .plxe-up .plxe-start__no {
		font-size: 13.5px;
	}


	.plxe-modal .plxe-up .plxe-start__go {
		font-size: 12.5px;
	}
}

/* Only the narrowest phones stack the two buttons; anywhere else they sit
   side by side, as they do in the room. */
@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%;
	}
}

/* At 320px the heading block still reaches under the badge — it keeps a
   little more room there. */
@media ( max-width: 340px ) {

	.plxe-modal .plxe-up .plxe-start__head {
		padding-right: 48px;
		max-width: 100% !important;
	}

	.plxe-modal .plxe-up .plxe-start__title {
		font-size: 22px;
		line-height: 1.12;
	}
}

/*--------------------------------------------------------------
# Top up: waiting for the bundles
#
# Shown from the tap until the packs arrive, so the button never
# sits dead while the request is in flight.
--------------------------------------------------------------*/

.plxe-topwait {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	background: rgba( 8, 20, 14, .42 );
	backdrop-filter: blur( 2px );
}

.plxe-topwait__box {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba( 8, 25, 16, .28 );
	font-size: 14px;
	font-weight: 700;
	color: #0F172A;
}

.plxe-topwait__ring {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid rgba( 15, 23, 42, .14 );
	border-top-color: #16A34A;
	animation: plxe-spin 1s linear infinite;
}

body.playrox-skin-dued .plxe-topwait__ring { border-top-color: #1D6FF2; }
body.playrox-skin-flocka .plxe-topwait__ring { border-top-color: #FF6A1A; }

body.playrox-skin-flocka .plxe-topwait__box {
	background: #141518;
	color: #fff;
}

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

	.plxe-topwait__ring {
		animation: none;
	}
}


/* The clock art is decoration: it gives way before the words do. */
.plxe-modal .plxe-up__art {
	width: 30%;
	max-width: 132px;
}

@media ( max-width: 380px ) {

	.plxe-modal .plxe-up__art {
		width: 27%;
		max-width: 104px;
	}

	.plxe-modal .plxe-up .plxe-start__title,
	.plxe-modal .plxe-up .plxe-start__lede {
		padding-right: clamp( 54px, 27%, 104px );
	}
}

/*--------------------------------------------------------------
# Time's Up: close badge in the corner
#
# The badge sat on top of the clock art. It now takes the card's
# own corner and the art steps inward, so the two sit side by
# side instead of overlapping.
--------------------------------------------------------------*/

.plxe-modal:has( .plxe-up ) .plxe-start__x {
	top: 8px;
	right: 8px;
	z-index: 4;
	width: 34px;
	height: 34px;
	background: rgba( 255, 255, 255, .94 );
	box-shadow: 0 3px 10px rgba( 8, 25, 16, .16 );
}

.plxe-modal .plxe-up__art {
	top: 4px;
	right: 46px;
	z-index: 1;
}

/* The copy's gutter follows the art's new position. */
.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__title,
.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__lede {
	padding-right: calc( clamp( 58px, 30%, 124px ) + 30px );
}

@media ( max-width: 380px ) {

	.plxe-modal .plxe-up__art {
		right: 42px;
	}

	.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__title,
	.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__lede {
		padding-right: calc( clamp( 54px, 27%, 104px ) + 24px );
	}
}

/*--------------------------------------------------------------
# Time's Up: close badge outside the card
#
# Same treatment as Start Playing — the badge hangs off the top
# corner. That needs the card to stop clipping, so the scroll
# moves out to the modal itself; a tall sheet on a short screen
# scrolls as a whole instead of scrolling inside its own box.
--------------------------------------------------------------*/

.plxe-modal:has( .plxe-up ) {
	align-items: flex-start;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 34px 16px 24px;
}

.plxe-modal:has( .plxe-up ) .plxe-modal__box {
	max-height: none;
	overflow: visible;
}

.plxe-modal .plxe-up {
	max-height: none;
	overflow: visible;
	padding-left: 0;
	margin-left: 0;
}

.plxe-modal:has( .plxe-up ) .plxe-start__x {
	top: -22px;
	right: -10px;
	width: 46px;
	height: 46px;
	background: #fff;
	box-shadow: 0 8px 22px rgba( 8, 25, 16, .22 );
}

/* With the badge outside, the art can take the corner back. */
.plxe-modal .plxe-up__art {
	top: 0;
	right: 0;
}

.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__title,
.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__lede {
	padding-right: clamp( 84px, 32%, 140px );
}

@media ( max-width: 380px ) {

	.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__title,
	.plxe-modal .plxe-up:has( .plxe-up__art ) .plxe-start__lede {
		padding-right: clamp( 78px, 29%, 112px );
	}
}

/*--------------------------------------------------------------
# Buttons in PlayRox sheets: no theme outline
#
# The theme puts a 5px outline on every button:hover, which rings
# these pills in the primary colour and reads as a stray border.
# The sheets answer a hover with the button itself instead: a
# small lift, a warmer gradient and a deeper shadow.
--------------------------------------------------------------*/

.plxe-modal button:hover,
.plxe-modal button:focus,
.plxe-gameload button:hover,
.plxe-topwait button:hover,
.plxr-lib button:hover {
	outline: 0;
	outline-width: 0;
}

/* Keyboard users still get a ring, in the room's green. */
.plxe-modal button:focus-visible,
.plxr-lib button:focus-visible {
	outline: 3px solid rgba( 34, 197, 94, .55 );
	outline-offset: 2px;
}

.plxe-modal .plxe-top__pay {
	transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
}

.plxe-modal .plxe-top__pay:hover {
	background: linear-gradient( 100deg, #34D96C, #15B152 );
	box-shadow: 0 16px 32px rgba( 22, 163, 74, .42 );
	transform: translateY( -1px );
}

.plxe-modal .plxe-top__pay:active {
	transform: translateY( 0 ) scale( .99 );
	box-shadow: 0 8px 18px rgba( 22, 163, 74, .32 );
}

/* The same treatment for the other primary pills in these sheets. */
.plxe-modal .plxe-start__go,
.plxe-modal .plxe-btn--play,
.plxe-modal .plxe-btn--primary {
	transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

.plxe-modal .plxe-start__go:hover,
.plxe-modal .plxe-btn--play:hover,
.plxe-modal .plxe-btn--primary:hover {
	filter: saturate( 1.06 ) brightness( 1.03 );
	transform: translateY( -1px );
}

.plxe-modal .plxe-start__go:active,
.plxe-modal .plxe-btn--play:active,
.plxe-modal .plxe-btn--primary:active {
	transform: translateY( 0 ) scale( .99 );
}

/* Secondary pills lift without gaining a ring either. */
.plxe-modal .plxe-start__no:hover,
.plxe-modal .plxe-btn--ghost:hover {
	background: #EDF2F7;
}

body.playrox-skin-flocka .plxe-modal button:focus-visible {
	outline-color: rgba( 255, 138, 61, .6 );
}

body.playrox-skin-dued .plxe-modal button:focus-visible {
	outline-color: rgba( 59, 141, 255, .55 );
}

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

	.plxe-modal .plxe-top__pay,
	.plxe-modal .plxe-start__go,
	.plxe-modal .plxe-btn--play,
	.plxe-modal .plxe-btn--primary {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Top up: full-sheet artwork
#
# With a background uploaded the sheet drops its own sky wash so
# the image is not competing with a gradient, and the bundles and
# the balance pill gain a little opacity so they stay readable
# over whatever the artwork does behind them.
--------------------------------------------------------------*/

.plxe-modal:has( .plxe-top ) .plxe-modal__box {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.plxe-modal:has( .plxe-top ) .plxe-modal__box[style*="background-image"],
.plxe-modal:has( .plxe-top.has-art ) .plxe-modal__box {
	background-color: #0B1F14;
}

.plxe-top.has-art ~ * ,
.plxe-top.has-art {
	position: relative;
	z-index: 1;
}

.plxe-top.has-art .plxe-pack {
	background: rgba( 255, 255, 255, .94 );
	backdrop-filter: blur( 2px );
}

.plxe-top.has-art .plxe-top__bal {
	background: rgba( 255, 255, 255, .92 );
}

.plxe-top.has-art .plxe-top__title,
.plxe-top.has-art .plxe-top__lede,
.plxe-top.has-art .plxe-top__pick {
	color: #fff;
	text-shadow: 0 1px 12px rgba( 4, 12, 8, .55 );
}

/*--------------------------------------------------------------
# Sparkle
#
# A quiet twinkle across the sheets. Deliberately cheap: no DOM,
# no JavaScript, no timers. Two pseudo-elements carry a static
# star field painted with radial-gradients, and only opacity is
# animated — a compositor-only property, so nothing re-lays-out
# or repaints per frame. Both layers are promoted once and left
# alone, which is what keeps this off the main thread.
--------------------------------------------------------------*/

.plxe-modal__box {
	position: relative;
	isolation: isolate;
}

.plxe-modal__box::before,
.plxe-modal__box::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	will-change: opacity;
	background-repeat: no-repeat;
}

/* Layer one: the brighter, sparser stars. */
.plxe-modal__box::before {
	background-image:
		radial-gradient( 1.6px 1.6px at 14% 18%, rgba( 255, 255, 255, .95 ), transparent 100% ),
		radial-gradient( 1.2px 1.2px at 78% 12%, rgba( 255, 255, 255, .85 ), transparent 100% ),
		radial-gradient( 1.8px 1.8px at 62% 34%, rgba( 255, 236, 170, .9 ), transparent 100% ),
		radial-gradient( 1.2px 1.2px at 30% 52%, rgba( 255, 255, 255, .8 ), transparent 100% );
	opacity: .85;
	animation: plxe-twinkle-a 3.6s ease-in-out infinite alternate;
}

/* Layer two: fainter, offset, and on a different beat so the two
   never pulse together. */
.plxe-modal__box::after {
	background-image:
		radial-gradient( 1.1px 1.1px at 46% 9%, rgba( 255, 255, 255, .8 ), transparent 100% ),
		radial-gradient( 1.4px 1.4px at 88% 44%, rgba( 255, 236, 170, .75 ), transparent 100% ),
		radial-gradient( 1px 1px at 8% 40%, rgba( 255, 255, 255, .7 ), transparent 100% ),
		radial-gradient( 1.3px 1.3px at 70% 66%, rgba( 255, 255, 255, .7 ), transparent 100% );
	opacity: .35;
	animation: plxe-twinkle-b 5.2s ease-in-out infinite alternate;
}

@keyframes plxe-twinkle-a {
	from { opacity: .85; }
	to   { opacity: .3; }
}

@keyframes plxe-twinkle-b {
	from { opacity: .3; }
	to   { opacity: .8; }
}

/* The sheet's own contents stay above the stars. */
.plxe-modal__box > * {
	position: relative;
	z-index: 1;
}

/* On a light sheet white stars vanish, so those get a warmer set with a
   little more presence. Applies to the play sheets and the top-up sheet
   alike; a sheet carrying its own artwork keeps the white stars, which
   read well over a photograph. */
.plxe-modal:has( .plxe-start ) .plxe-modal__box::before,
.plxe-modal:has( .plxe-top:not( .has-art ) ) .plxe-modal__box::before {
	background-image:
		radial-gradient( 2.4px 2.4px at 14% 14%, rgba( 245, 158, 11, .85 ), transparent 100% ),
		radial-gradient( 2px 2px at 82% 10%, rgba( 22, 163, 74, .7 ), transparent 100% ),
		radial-gradient( 2.6px 2.6px at 66% 22%, rgba( 245, 158, 11, .7 ), transparent 100% ),
		radial-gradient( 1.8px 1.8px at 34% 26%, rgba( 22, 163, 74, .6 ), transparent 100% );
}

.plxe-modal:has( .plxe-start ) .plxe-modal__box::after,
.plxe-modal:has( .plxe-top:not( .has-art ) ) .plxe-modal__box::after {
	background-image:
		radial-gradient( 2px 2px at 48% 7%, rgba( 22, 163, 74, .6 ), transparent 100% ),
		radial-gradient( 2.2px 2.2px at 92% 20%, rgba( 245, 158, 11, .6 ), transparent 100% ),
		radial-gradient( 1.8px 1.8px at 7% 24%, rgba( 245, 158, 11, .5 ), transparent 100% ),
		radial-gradient( 2px 2px at 74% 32%, rgba( 22, 163, 74, .5 ), transparent 100% );
}

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

	.plxe-modal__box::before,
	.plxe-modal__box::after {
		animation: none;
		opacity: .4;
	}
}

/*--------------------------------------------------------------
# Time's Up: the clock rings
#
# Two quick shakes, a pause, then again — an alarm going off
# rather than a permanent wobble, which would be exhausting on a
# sheet someone is reading. Only transform animates, so this
# stays on the compositor.
--------------------------------------------------------------*/

.plxe-modal .plxe-up__art {
	transform-origin: 50% 20%;
	animation: plxe-ring 3.4s ease-in-out infinite;
	will-change: transform;
}

@keyframes plxe-ring {
	0%,
	62%,
	100% { transform: rotate( 0deg ) scale( 1 ); }

	66%  { transform: rotate( -9deg ) scale( 1.04 ); }
	70%  { transform: rotate( 8deg ) scale( 1.04 ); }
	74%  { transform: rotate( -7deg ) scale( 1.03 ); }
	78%  { transform: rotate( 6deg ) scale( 1.03 ); }
	82%  { transform: rotate( -4deg ) scale( 1.02 ); }
	86%  { transform: rotate( 3deg ) scale( 1.01 ); }
	90%  { transform: rotate( -1.5deg ) scale( 1 ); }
}

/* The heading gives one nudge as the sheet lands, then stops. */
.plxe-modal .plxe-up .plxe-start__title {
	animation: plxe-alert 620ms cubic-bezier( .36, .07, .19, .97 ) both;
}

@keyframes plxe-alert {
	0%   { transform: translateX( 0 ); }
	18%  { transform: translateX( -5px ); }
	34%  { transform: translateX( 4px ); }
	50%  { transform: translateX( -3px ); }
	66%  { transform: translateX( 2px ); }
	82%  { transform: translateX( -1px ); }
	100% { transform: translateX( 0 ); }
}

/*--------------------------------------------------------------
# Time's Up: full-sheet artwork
--------------------------------------------------------------*/

.plxe-modal:has( .plxe-up ) .plxe-modal__box {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.plxe-modal:has( .plxe-up.has-art ) .plxe-modal__box {
	background-color: #0B1F14;
}

.plxe-up.has-art .plxe-start__title,
.plxe-up.has-art .plxe-start__lede {
	color: #fff;
	text-shadow: 0 1px 12px rgba( 4, 12, 8, .55 );
}

.plxe-up.has-art .plxe-start__facts,
.plxe-up.has-art .plxe-up__again {
	background: rgba( 255, 255, 255, .93 );
	backdrop-filter: blur( 2px );
}

.plxe-up.has-art .plxe-start__no {
	background: rgba( 255, 255, 255, .92 );
}

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

	.plxe-modal .plxe-up__art,
	.plxe-modal .plxe-up .plxe-start__title {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Time's Up: the play button asks for the tap
#
# A slow breathe with a light sweep across it, so the eye lands
# there rather than on "Maybe later". transform and opacity only,
# and the sweep is one promoted layer — nothing repaints.
--------------------------------------------------------------*/

.plxe-modal .plxe-up .plxe-start__go {
	position: relative;
	overflow: hidden;
	animation: plxe-breathe 2.6s ease-in-out infinite;
	will-change: transform;
}

@keyframes plxe-breathe {
	0%,
	100% {
		transform: scale( 1 );
		box-shadow: 0 10px 24px rgba( 22, 163, 74, .34 );
	}
	50% {
		transform: scale( 1.028 );
		box-shadow: 0 14px 30px rgba( 22, 163, 74, .46 );
	}
}

/* The sweep: one element, moved across and back on its own beat. */
.plxe-modal .plxe-up .plxe-start__go::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, .42 ), transparent );
	transform: translateX( 0 );
	animation: plxe-sweep 2.6s ease-in-out infinite;
	pointer-events: none;
	will-change: transform;
}

@keyframes plxe-sweep {
	0%,
	38%  { transform: translateX( 0 ); }
	78%,
	100% { transform: translateX( 360% ); }
}

/* "Maybe later" stays available but stops competing for the eye. */
.plxe-modal .plxe-up .plxe-start__no {
	opacity: .82;
	font-weight: 700;
	transition: opacity .15s ease, background .15s ease;
}

.plxe-modal .plxe-up .plxe-start__no:hover,
.plxe-modal .plxe-up .plxe-start__no:focus-visible {
	opacity: 1;
}

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

	.plxe-modal .plxe-up .plxe-start__go,
	.plxe-modal .plxe-up .plxe-start__go::after {
		animation: none;
	}

	.plxe-modal .plxe-up .plxe-start__go::after {
		display: none;
	}
}

/* The guest sheet's header artwork, top left beside the wording. */
.plxe-modal .plxe-guest__art {
	display: none;
	float: left;
	width: clamp( 56px, 17vw, 76px );
	aspect-ratio: 1 / 1;
	margin: 0 14px 6px 0;
	background: no-repeat center / contain;
}

.plxe-modal .plxe-guest .plxe-start__head {
	overflow: hidden;
}