@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/**
 * PlayRox Reader — standalone article popup (Hero design).
 *
 * All sizes/colours are driven by CSS variables set from the Customizer
 * (Appearance → Customize → Viral Slider) via inline style on .plxr.
 */

.plxr {
	position: fixed;
	inset: 0;
	z-index: 2000000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.24s ease, visibility 0.24s ease;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Defaults (overridden by inline vars from settings). */
	--plx-base: #116329;
	--plx-accent: #5ee68a;
	--plx-title-color: #ffffff;
	--plx-cat-color: #5ee68a;
	--plx-body-color: #ffffff;
	--plx-title-size: 40px;
	--plx-cat-size: 14px;
	--plx-body-size: 17px;
	--plx-top-pad: 24px;
	--plx-logo-size: 28px;
	--plx-arrow-size: 46px;
	--plx-title-lh: 1.05;
	--plx-body-lh: 1.5;
	--plx-pad-top: 24px;
	--plx-pad-bottom: 24px;
	--plx-pad-x: 20px;
	--plx-overlay: 0.55;
	--plx-overlay-height: 60%;
	--plx-title-transform: uppercase;
	--plx-title-weight: 800;
	--plx-title-ls: -0.015em;
	--plx-title-pad-bottom: 20px;
	--plx-cat-transform: uppercase;
	--plx-cat-weight: 800;
	--plx-cat-radius: 8px;
	--plx-cat-pad-x: 15px;
	--plx-cat-pad-y: 7px;
	--plx-body-weight: 500;
	--plx-body-align: justify;
	--plx-body-pad-top: 24px;
	--plx-body-pad-bottom: 0px;
	--plx-body-pad-x: 20px;
	--plx-para-gap: 1.05em;
}

.plxr.is-open {
	opacity: 1;
	visibility: visible;
}

.plxr__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 20, 10, 0.9);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ---- Frame -------------------------------------------------------------- */

.plxr__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 460px;
	height: 100dvh;
	max-height: 100dvh;
	background: var(--plx-base);
	overflow: hidden;
	transform: translateY(14px) scale(0.99);
	transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.plxr.is-open .plxr__frame {
	transform: none;
}

@media (min-width: 600px) {
	.plxr__frame {
		height: min(94dvh, 900px);
		max-height: min(94dvh, 900px);
		border-radius: 20px;
		box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
	}
}

/* ---- Progress bar (sits in the top padding, clear of the image) -------- */

/* #2: Full-width progress bar pinned to the very top of the card. */
.plxr__progress {
	position: relative;
	z-index: 10;
	flex: 0 0 auto;
	display: flex;
	gap: 5px;
	padding: 10px 12px 0;
	background: var(--plx-base);
}

.plxr__seg {
	position: relative;
	flex: 1 1 0;
	height: 4px;
	border-radius: 3px;
	background: var(--plx-bar-track, rgba(255, 255, 255, 0.3));
	overflow: hidden;
}

/* Completed segments show fully filled. */
.plxr__seg.is-on::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--plx-bar-fill, #fff);
}

.plxr__seg.is-on {
	background: var(--plx-bar-fill, #fff);
}

/* Autoplay countdown fill. */
.plxr__seg.is-timing::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--plx-bar-fill, #fff);
	transform-origin: left center;
	transform: scaleX(0);
	animation: plxr-fill var(--plx-dur, 40s) linear forwards;
}

@keyframes plxr-fill {
	to { transform: scaleX(1); }
}

/* ---- Close ------------------------------------------------------------- */

.plxr__close {
	position: absolute;
	z-index: 11;
	top: 26px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.16s ease;
}

.plxr__close:hover {
	background: rgba(255, 92, 114, 0.9);
}

.plxr__close:hover {
	background: rgba(255, 92, 114, 0.9);
}

/* ---- Desktop nav arrows ------------------------------------------------ */

.plxr__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

.plxr__nav--prev { left: -60px; }
.plxr__nav--next { right: -60px; }

@media (min-width: 900px) {
	.plxr__nav { display: flex; }
}

/* ---- Stage / slide — no scroll ----------------------------------------- */

.plxr__stage {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.plxr__slide {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: #fff;
}

/* ---- Share + like actions ---------------------------------------------- */

.plxr__actions {
	position: absolute;
	top: 14px;
	right: 12px;
	z-index: 8;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.plxr__act {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.16s ease, transform 0.16s ease;
}

.plxr__act:hover {
	background: rgba(0, 0, 0, 0.6);
}

.plxr__act--like.is-on {
	color: #ff4d6d;
}

.plxr__act.is-pop {
	animation: plxr-pop 0.4s ease;
}

@keyframes plxr-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* ---- Hero: photo band -------------------------------------------------- */

.plxr__hero {
	position: relative;
}

.plxr__hero__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 1080 / 760;
	background: #0b3d1a;
	overflow: hidden;
}

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

/* Dark gradient over the photo so an overlaid title stays legible — only
   applied when the "Darken image" option is on. By default the article image
   is shown clean, with no overlay (the inside cover keeps its own scrim). */
.plxr[data-img-overlay="1"] .plxr__hero__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Only the bottom band is shaded, behind the title (like the reference). */
	height: var(--plx-overlay-height, 60%);
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, calc(var(--plx-overlay) + 0.2)) 0%,
		rgba(0, 0, 0, var(--plx-overlay)) 45%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.plxr__hero__media--plain::after {
	display: none;
}

.plxr__hero__media.is-broken { aspect-ratio: auto; height: 0; }
.plxr__hero__media.is-broken img { display: none; }

.plxr__hero__media--plain {
	aspect-ratio: 1080 / 700;
}

/* Category + title overlaid on the photo (no dark scrim, per request). */
.plxr__hero__head {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 0 var(--plx-pad-x) 7px;
}
/* When the darkening overlay is off, give the overlaid title a soft shadow so
   it stays readable over the clean image. */
.plxr[data-img-overlay="0"] .plxr__hero__head:not(.plxr__hero__head--flat) .plxr__hero__title {
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.plxr__hero__head--flat {
	position: static;
	padding: 4% var(--plx-pad-x) 5%;
}

.plxr__hero__cat {
	display: inline-block;
	/* Falls back to the title spacing, so desktop is unchanged unless a
	   responsive tier sets --plx-cat-gap explicitly. */
	margin: 0 0 var(--plx-cat-gap, var(--plx-title-pad-bottom));
	padding: var(--plx-cat-pad-y) var(--plx-cat-pad-x);
	border-radius: var(--plx-cat-radius);
	background: rgba(0, 0, 0, 0.4);
	color: var(--plx-cat-color);
	font-size: var(--plx-cat-size);
	font-weight: var(--plx-cat-weight);
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: var(--plx-cat-transform) !important;
}

.plxr__hero__head--flat .plxr__hero__cat {
	background: rgba(255, 255, 255, 0.16);
}

.plxr__hero__title {
	margin: 0 0 var(--plx-title-pad-bottom);
	font-size: var(--plx-title-size);
	font-weight: var(--plx-title-weight);
	line-height: var(--plx-title-lh);
	letter-spacing: var(--plx-title-ls);
	text-transform: var(--plx-title-transform);
	color: var(--plx-title-color);
	overflow-wrap: break-word;
	word-break: break-word;
}
/* Responsive: scale the title down on narrower devices, capped at the
   configured size on larger screens. */
@media (max-width: 680px) {
	.plxr__hero__title { font-size: clamp(18px, 5.6vw, var(--plx-title-size)); }
}
@media (max-width: 380px) {
	.plxr__hero__title { font-size: clamp(16px, 6vw, var(--plx-title-size)); }
}

/* ---- Body -------------------------------------------------------------- */

.plxr__hero__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--plx-body-pad-top) var(--plx-body-pad-x) var(--plx-body-pad-bottom);
	font-size: var(--plx-body-size);
	font-weight: var(--plx-body-weight);
	line-height: var(--plx-body-lh);
	text-align: var(--plx-body-align);
	color: var(--plx-body-color);
	/* Scroll long articles instead of clipping them (fixes text cut off on
	   shorter viewports like 1366×768). */
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.plxr__hero__body::-webkit-scrollbar { width: 0; height: 0; }

.plxr__hero__body p { margin: 0 0 var(--plx-para-gap); }
.plxr__hero__body p:last-child { margin-bottom: 0; }

.plxr__hero__body a {
	color: var(--plx-accent);
	text-decoration: underline;
	font-weight: 600;
}

.plxr__hero__body .highlight,
.plxr__hero__body strong {
	color: var(--plx-accent);
	font-weight: 700;
}

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

.plxr__foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--plx-pad-top) var(--plx-pad-x) var(--plx-pad-bottom);
	margin-top: auto;
}

.plxr__foot__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(15px, 4vw, 19px);
	font-weight: 800;
	font-style: italic;
	color: #fff;
}

.plxr__foot__brand img {
	height: var(--plx-logo-size);
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

.plxr__foot__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--plx-arrow-size);
	height: var(--plx-arrow-size);
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: calc(var(--plx-arrow-size) * 0.35);
	cursor: pointer;
	flex: 0 0 auto;
	transition: background 0.16s ease, color 0.16s ease;
}

.plxr__foot__arrow:hover {
	background: #fff;
	color: var(--plx-base);
}

/* ---- Share menu -------------------------------------------------------- */

.plxr__sharemenu {
	position: absolute;
	right: 14px;
	bottom: 80px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	min-width: 190px;
	padding: 8px;
	border-radius: 14px;
	background: #10131c;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.plxr__sharemenu__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.plxr__sharemenu__item:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.plxr__sharemenu__item i {
	width: 20px;
	text-align: center;
	color: var(--plx-accent);
}

/* ---- Plain image / video slides ---------------------------------------- */

.plxr__slide--media { background: #000; }

.plxr__fullimg {
	flex: 1 1 auto;
	background-size: cover;
	background-position: center;
}

.plxr__video {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.plxr__video iframe,
.plxr__video video {
	width: 100%;
	height: 100%;
	border: 0;
}

.plxr__slide--media .plxr__foot {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

/* ---- Loading ----------------------------------------------------------- */

.plxr.is-loading .plxr__stage::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: var(--plx-accent);
	border-radius: 50%;
	animation: plxr-spin 0.8s linear infinite;
}

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

@media (min-width: 1025px) {
	.plxr__hero__body {
		max-width: 660px;
		margin: 0 auto;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.plxr__seg.is-timing::after { animation: none; }
}

/* ---- Arrow style variants (customizer) --------------------------------- */

.plxr[data-arrow="solid"] .plxr__foot__arrow {
	border-color: transparent;
	background: #fff;
	color: var(--plx-base);
}

.plxr[data-arrow="plain"] .plxr__foot__arrow {
	border-color: transparent;
	background: transparent;
	width: auto;
	height: auto;
	font-size: calc(var(--plx-arrow-size) * 0.5);
}

/* ---- Image shape variants ---------------------------------------------- */

.plxr[data-ratio="landscape"] .plxr__hero__media { aspect-ratio: 1080 / 620; }
.plxr[data-ratio="square"] .plxr__hero__media { aspect-ratio: 1 / 1; }
.plxr,
.plxr__hero__title,
.plxr__hero__cat,
.plxr__hero__body,
.plxr__foot__brand {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ==========================================================================
   #1  Cover (image-only) slide — no footer, image fills the frame
   ========================================================================== */

.plxr__slide--cover .plxr__fullimg {
	flex: 1 1 auto;
	height: 100%;
}

/* ==========================================================================
   #6  Corner-bracket outline on the hero image
   ========================================================================== */

/* Space around the image so the outside brackets have room. */
.plxr[data-outline="brackets"] .plxr__hero,
.plxr[data-outline="frame"] .plxr__hero {
	padding: var(--plx-frame-gap, 14px) var(--plx-frame-gap, 14px) 0;
}

.plxr[data-outline="brackets"] .plxr__hero__media,
.plxr[data-outline="frame"] .plxr__hero__media {
	overflow: visible;
}

/*
 * Corner frame: L-shaped lines at each corner, extending along the top and
 * bottom edges, sitting just OUTSIDE the image. Controlled by:
 *   --plx-frame-color, --plx-frame-thick, --plx-frame-len, --plx-frame-inset.
 */
.plxr[data-outline="brackets"] .plxr__hero__media::before,
.plxr[data-outline="frame"] .plxr__hero__media::before {
	content: "";
	position: absolute;
	inset: calc(var(--plx-frame-inset, 10px) * -1);
	z-index: 4;
	pointer-events: none;
	background:
		linear-gradient(var(--plx-frame-color, #fff), var(--plx-frame-color, #fff)) left top,
		linear-gradient(var(--plx-frame-color, #fff), var(--plx-frame-color, #fff)) left top,
		linear-gradient(var(--plx-frame-color, #fff), var(--plx-frame-color, #fff)) right top,
		linear-gradient(var(--plx-frame-color, #fff), var(--plx-frame-color, #fff)) right top,
		linear-gradient(var(--plx-frame-color, #fff), var(--plx-frame-color, #fff)) left bottom,
		linear-gradient(var(--plx-frame-color, #fff), var(--plx-frame-color, #fff)) left bottom,
		linear-gradient(var(--plx-frame-color, #fff), var(--plx-frame-color, #fff)) right bottom,
		linear-gradient(var(--plx-frame-color, #fff), var(--plx-frame-color, #fff)) right bottom;
	background-repeat: no-repeat;
	background-size:
		var(--plx-frame-thick, 2px) var(--plx-frame-len, 42px),
		var(--plx-frame-len, 42px) var(--plx-frame-thick, 2px),
		var(--plx-frame-thick, 2px) var(--plx-frame-len, 42px),
		var(--plx-frame-len, 42px) var(--plx-frame-thick, 2px),
		var(--plx-frame-thick, 2px) var(--plx-frame-len, 42px),
		var(--plx-frame-len, 42px) var(--plx-frame-thick, 2px),
		var(--plx-frame-thick, 2px) var(--plx-frame-len, 42px),
		var(--plx-frame-len, 42px) var(--plx-frame-thick, 2px);
}

.plxr[data-outline="brackets"] .plxr__hero__media img,
.plxr[data-outline="frame"] .plxr__hero__media img {
	position: relative;
	z-index: 1;
}

/* Simple thin outline variant. */
.plxr[data-outline="line"] .plxr__hero__media::before {
	content: "";
	position: absolute;
	inset: 12px;
	z-index: 2;
	pointer-events: none;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 4px;
}

/* ==========================================================================
   #3  Cover (image-only) slide — true full-screen, no top bar
   ========================================================================== */

/* Hide the top bar entirely while a cover slide is showing. */
.plxr.is-cover .plxr__topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	padding: 12px 14px;
	pointer-events: none;
}

/* Keep the close button tappable and visible over the image. */
.plxr.is-cover .plxr__close {
	pointer-events: auto;
	background: rgba(0, 0, 0, 0.5);
	margin-left: auto;
}

.plxr.is-cover .plxr__progress {
	display: none !important;
}

/* Image fills the whole frame edge-to-edge. */
.plxr.is-cover .plxr__stage {
	position: absolute;
	inset: 0;
}

.plxr__slide--cover {
	height: 100%;
}

.plxr__slide--cover .plxr__fullimg {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
}

/* ==========================================================================
   #4  Engagement end slide
   ========================================================================== */

.plxr__end {
	height: 100%;
	position: relative;
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(46, 204, 113, 0.28), transparent 60%),
		var(--plx-end-bg, #0a2818);
	overflow-y: auto;
}
/* Gradient background: --plx-end-bg is a linear-gradient(); keep the glow on top. */
.plxr__end--bg-gradient {
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(46, 204, 113, 0.28), transparent 60%),
		var(--plx-end-bg, #0a2818);
}
/* Image background: solid base + image + dim layers sit behind the content. */
.plxr__end--bg-image { background: var(--plx-end-bg, #0a2818); }
.plxr__end__bgimg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
.plxr__end__bgdim { position: absolute; inset: 0; z-index: 1; }
.plxr__end--bg-image .plxr__end__inner,
.plxr__end--bg-image .plxr__end__countdown { position: relative; z-index: 2; }

.plxr__end__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 10% 6% 7%;
	text-align: center;
}

/* Gift hero with floating social icons + sparkles */
.plxr__end__hero {
	position: relative;
	width: 100%;
	height: 150px;
	margin: 6px auto 6px;
}
.plxr__end__gift {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 96px; height: 96px; border-radius: 22px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(150deg, #2fbf5e, #16843d);
	color: #ffd94a; font-size: 46px;
	box-shadow: 0 12px 40px rgba(46, 204, 113, 0.5), inset 0 0 0 2px rgba(255,217,74,0.35);
}
.plxr__end__social {
	position: absolute; width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 18px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	animation: plxr-float 3.4s ease-in-out infinite;
}
.plxr__end__social--like { background: #e8384f; left: 22%; top: 30%; animation-delay: 0s; }
.plxr__end__social--fb   { background: #1877f2; right: 22%; top: 22%; animation-delay: 0.5s; }
.plxr__end__social--wa   { background: #25d366; left: 20%; top: 62%; animation-delay: 1s; }
.plxr__end__social--x    { background: #14171a; right: 20%; top: 60%; animation-delay: 1.5s; }
@keyframes plxr-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.plxr__end__spark {
	position: absolute; width: 6px; height: 6px; border-radius: 50%;
	background: #ffd94a; opacity: 0.85;
	box-shadow: 0 0 8px 2px rgba(255, 217, 74, 0.6);
	animation: plxr-twinkle 2.2s ease-in-out infinite;
}
.plxr__end__spark--1 { left: 40%; top: 12%; animation-delay: 0.2s; }
.plxr__end__spark--2 { right: 34%; top: 46%; animation-delay: 0.9s; }
.plxr__end__spark--3 { left: 34%; top: 52%; animation-delay: 1.4s; }
@keyframes plxr-twinkle { 0%,100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.2); } }

.plxr__end__title {
	margin: 0 0 24px;
	font-size: clamp(22px, 6vw, 30px);
	font-weight: 800;
	line-height: 1.24;
	color: #fff;
	letter-spacing: -0.01em;
}
.plxr__end__title-accent { color: var(--plx-end-btn, #3ce675); }

.plxr__end__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-bottom: 20px;
}

.plxr__end__act {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 30px;
	border: 1.5px solid var(--plx-end-btn, #3ce675);
	border-radius: 999px;
	background: transparent;
	color: var(--plx-end-btn, #3ce675);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease;
}

.plxr__end__act:hover {
	background: rgba(60, 230, 117, 0.12);
}

.plxr__end__like.is-on {
	color: #ff4d6d;
	border-color: #ff4d6d;
	background: rgba(255, 77, 109, 0.12);
}

.plxr__end__games {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: 380px;
	margin: 0 auto 22px;
	padding: 8px 8px 8px 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(100deg, var(--plx-end-btn, #dd9933), color-mix(in srgb, var(--plx-end-btn, #dd9933) 78%, #000));
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 12px 30px color-mix(in srgb, var(--plx-end-btn, #dd9933) 42%, transparent);
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.plxr__end__games:hover { transform: translateY(-2px); box-shadow: 0 16px 38px color-mix(in srgb, var(--plx-end-btn, #dd9933) 55%, transparent); }
.plxr__end__games__ico { font-size: 22px; }
.plxr__end__games__label { flex: 1; text-align: center; }
.plxr__end__games__arrow {
	width: 46px; height: 46px; border-radius: 50%;
	background: #fff; color: var(--plx-end-btn, #dd9933);
	display: flex; align-items: center; justify-content: center; font-size: 16px;
	flex: 0 0 auto;
}

.plxr__end__custom {
	display: inline-block;
	margin: 0 auto 18px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	opacity: 0.9;
}

.plxr__end__posts__label {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	margin: 10px 0 14px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.plxr__end__posts__spark {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--plx-end-btn, #dd9933);
	box-shadow: 0 0 6px 1px color-mix(in srgb, var(--plx-end-btn, #dd9933) 60%, transparent);
}

.plxr__end__posts {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.plxr__end__post {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease;
}

.plxr__end__post:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: color-mix(in srgb, var(--plx-end-btn, #dd9933) 55%, transparent);
}

.plxr__end__post::after {
	content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
	margin-left: auto; color: var(--plx-end-btn, #3ce675); font-size: 13px;
}

.plxr__end__post__img {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	border-radius: 12px;
	background: #0b3d1a center/cover no-repeat;
}

.plxr__end__post__meta {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.plxr__end__post__cat {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--plx-end-btn, #3ce675);
}

.plxr__end__post__title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Coins footer bar */
.plxr__end__coinsbar {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	margin-top: 18px; padding: 16px 18px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
}
.plxr__end__coinsbar__left { display: flex; align-items: center; gap: 14px; text-align: left; }
.plxr__end__coinsbar__stack {
	width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 30% 30%, #ffe08a, #f6b93b); color: #6b4a00; font-size: 20px;
}
.plxr__end__coinsbar__text { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; }
.plxr__end__coinsbar__right { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.1); }
.plxr__end__coinsbar__coin {
	width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 30% 30%, #ffe08a, #f6b93b); color: #6b4a00; font-size: 17px;
}
.plxr__end__coinsbar__val { text-align: left; }
.plxr__end__coinsbar__val b { display: block; color: #fff; font-size: 20px; font-weight: 800; line-height: 1; }
.plxr__end__coinsbar__val em { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,0.6); }

/* ==========================================================================
   #4  Classic layout — header on top, image below, then body
   ========================================================================== */

/*
 * Classic slide is transparent so a panel background image set on the frame
 * shows through. The frame itself falls back to --plx-base when no image.
 */
.plxr__hero--classic {
	background: transparent;
}

.plxr__hero__head--top {
	position: static;
	padding: 4% var(--plx-pad-x) 5%;
}

.plxr__hero--classic .plxr__hero__media {
	aspect-ratio: 16 / 10;
}

.plxr__hero--classic .plxr__hero__media::after {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--plx-overlay-height, 60%);
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, calc(var(--plx-overlay) + 0.2)) 0%,
		rgba(0, 0, 0, var(--plx-overlay)) 45%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Plain media in classic shows the overlay; standalone plain (hero) does not. */
.plxr__hero--classic .plxr__hero__media--plain::after {
	display: block;
}

.plxr__hero--classic .plxr__hero__body {
	padding-top: var(--plx-body-pad-top);
}

/* In classic mode the header title has a normal (non-shadowed) look. */
.plxr[data-layout="classic"] .plxr__hero__title {
	text-shadow: none;
}

/* ==========================================================================
   #5  Category underline (length matches the text)
   ========================================================================== */

.plxr[data-cat-underline="1"] .plxr__hero__cat {
	position: relative;
}

.plxr[data-cat-underline="1"] .plxr__hero__cat::after {
	content: "";
	position: absolute;
	left: var(--plx-cat-pad-x);
	bottom: 3px;
	width: var(--plx-cat-underline-width, 100%);
	max-width: calc(100% - var(--plx-cat-pad-x) * 2);
	height: var(--plx-cat-underline-thick, 2px);
	background: var(--plx-cat-underline-color, #5ee68a);
	border-radius: 2px;
}

/* ==========================================================================
   #3  Image backing panel — thick coloured band above & below the image
   ========================================================================== */

.plxr[data-img-backing="1"] .plxr__hero__media {
	background: var(--plx-img-backing-color, #fff);
	padding: var(--plx-img-backing-size, 10px) 0;
	overflow: visible;
}

.plxr[data-img-backing="1"] .plxr__hero__media img {
	position: relative;
	z-index: 1;
}

/* Keep the scrim within the image area, not the backing band. */
.plxr[data-img-backing="1"] .plxr__hero__media::after {
	top: var(--plx-img-backing-size, 10px);
	bottom: var(--plx-img-backing-size, 10px);
}

/* #6: single countdown bar on the engagement end slide */
.plxr__end__countdown {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--plx-bar-track, rgba(255, 255, 255, 0.25));
	z-index: 5;
	overflow: hidden;
}

.plxr__end__countdown__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--plx-bar-fill, #fff);
	border-radius: 0 3px 3px 0;
}

/* ---- Inside Cover slide (first slide) ----------------------------------- */
.plxr__slide--insidecover { position: relative; height: 100%; overflow: hidden; }
.plxr__slide--insidecover .plxr__fullimg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
.plxr__cover__scrim {
	position: absolute; left: 0; right: 0; bottom: 0;
	/* Only the bottom band (where the category + title sit) is shaded — the
	   rest of the cover photo stays clean. */
	height: 62%;
	background: linear-gradient(to top, var(--plxr-cov-ov, rgba(0,0,0,0.6)) 0%, rgba(0,0,0,0.28) 55%, transparent 100%);
}
/* Position variants change where the overlay sits + the scrim direction. */
.plxr__cover--center .plxr__cover__scrim { inset: 0; height: auto; background: var(--plxr-cov-ov, rgba(0,0,0,0.55)); }
.plxr__cover--top .plxr__cover__scrim { top: 0; bottom: auto; height: 62%; background: linear-gradient(to bottom, var(--plxr-cov-ov, rgba(0,0,0,0.6)) 0%, rgba(0,0,0,0.28) 55%, transparent 100%); }

.plxr__cover__overlay {
	position: absolute; left: 0; right: 0;
	padding: 26px 24px 34px;
	display: flex; flex-direction: column; gap: 12px;
}
/* Bottom (default). Reserve space on the right so the title never runs under
   the next-arrow button in the foot. */
.plxr__slide--insidecover .plxr__cover__overlay,
.plxr__cover--bottom .plxr__cover__overlay { bottom: 0; top: auto; align-items: flex-start; text-align: left; padding-right: calc(var(--plx-arrow-size, 46px) + 34px); }
/* Top. */
.plxr__cover--top .plxr__cover__overlay { top: 0; bottom: auto; align-items: flex-start; text-align: left; }
/* Center. */
.plxr__cover--center .plxr__cover__overlay {
	top: 50%; bottom: auto; transform: translateY(-50%);
	align-items: center; text-align: center;
}

.plxr__cover__cat {
	align-self: flex-start;
	background: var(--plxr-cov-cat-bg, var(--plx-end-btn, #22c55e));
	color: var(--plxr-cov-cat-tx, #06331a);
	font-size: var(--plxr-cov-cat-size, 12px); font-weight: 800; letter-spacing: 0.05em;
	text-transform: var(--plxr-cov-cat-case, uppercase);
	padding: 6px 14px; border-radius: 999px;
}
.plxr__cover--center .plxr__cover__cat { align-self: center; }

.plxr__cover__title {
	margin: 0; color: var(--plxr-cov-title-color, #fff);
	font-size: var(--plxr-cov-title-size, 30px); font-weight: 800; line-height: 1.2;
	text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

/* =========================================================================
   Engagement (end) slide — mobile responsiveness
   Scales the hero, gift, social icons, headline, buttons and cards so nothing
   overlaps or overflows on small screens.
   ========================================================================= */
@media (max-width: 480px) {
	.plxr__end__inner { padding: 20px 18px 24px; }

	/* Hero: shorter, and the gift smaller so social icons don't cover text. */
	.plxr__end__hero { height: 116px; margin: 2px auto 4px; }
	.plxr__end__gift { width: 68px; height: 68px; border-radius: 16px; font-size: 32px; }
	.plxr__end__social { width: 34px; height: 34px; font-size: 14px; }
	.plxr__end__social--like { left: 16%; top: 24%; }
	.plxr__end__social--fb   { right: 16%; top: 18%; }
	.plxr__end__social--wa   { left: 14%; top: 60%; }
	.plxr__end__social--x    { right: 14%; top: 58%; }
	.plxr__end__spark { width: 4px; height: 4px; }

	/* Headline: smaller + tighter, with clear space below the hero. */
	.plxr__end__title { font-size: 19px; line-height: 1.28; margin: 6px 0 18px; }

	/* Like / Share pills: smaller. */
	.plxr__end__actions { gap: 10px; margin-bottom: 16px; }
	.plxr__end__act { padding: 10px 20px; font-size: 14px; }

	/* Play Instant Games button: compact. */
	.plxr__end__games { padding: 6px 6px 6px 18px; font-size: 15px; margin-bottom: 18px; }
	.plxr__end__games__ico { font-size: 18px; }
	.plxr__end__games__arrow { width: 38px; height: 38px; font-size: 14px; }

	/* Popular reads cards: smaller thumbs + text. */
	.plxr__end__posts__label { font-size: 12px; margin: 6px 0 10px; }
	.plxr__end__post { gap: 11px; padding: 10px; border-radius: 14px; }
	.plxr__end__post__img { width: 60px; height: 60px; border-radius: 10px; }
	.plxr__end__post__cat { font-size: 10px; }
	.plxr__end__post__title { font-size: 13px; }

	/* Coins bar: compact, stack-friendly. */
	.plxr__end__coinsbar { padding: 12px 14px; gap: 10px; border-radius: 14px; }
	.plxr__end__coinsbar__stack { width: 38px; height: 38px; font-size: 17px; }
	.plxr__end__coinsbar__text { font-size: 12.5px; }
	.plxr__end__coinsbar__right { padding-left: 10px; gap: 8px; }
	.plxr__end__coinsbar__coin { width: 34px; height: 34px; font-size: 15px; }
	.plxr__end__coinsbar__val b { font-size: 17px; }
	.plxr__end__coinsbar__val em { font-size: 10.5px; }
}

/* Extra-small phones (≤360px): trim further. */
@media (max-width: 360px) {
	.plxr__end__title { font-size: 17px; }
	.plxr__end__hero { height: 104px; }
	.plxr__end__gift { width: 60px; height: 60px; font-size: 28px; }
	.plxr__end__act { padding: 9px 16px; font-size: 13px; }
	.plxr__end__games { font-size: 14px; }
	.plxr__end__coinsbar { flex-wrap: wrap; }
	.plxr__end__coinsbar__right { border-left: 0; padding-left: 0; }
}

/* ---- Inside Cover forward arrow (with 5s ring timer) -------------------- */
.plxr__cover__next {
	position: absolute; right: 22px; bottom: 26px; z-index: 5;
	width: 58px; height: 58px; border-radius: 50%;
	border: 0; cursor: pointer;
	background: var(--plxr-cov-cat-bg, var(--plx-end-btn, #22c55e));
	color: #fff; font-size: 20px;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	transition: transform 0.15s ease;
}
.plxr__cover__next:hover { transform: scale(1.08); }
.plxr__cover--center .plxr__cover__next,
.plxr__cover--top .plxr__cover__next { bottom: 26px; }

/* Pulse effect. */
.plxr__cover__next--pulse { animation: plxr-cover-pulse 1.8s ease-in-out infinite; }
@keyframes plxr-cover-pulse {
	0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(255,255,255,0.35); }
	50% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 12px rgba(255,255,255,0); }
}
/* Static (no effect) — nothing extra needed. */
.plxr__cover__next-ring {
	position: absolute; inset: -4px; border-radius: 50%;
	pointer-events: none;
}
.plxr__cover__next-fill {
	position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(rgba(255,255,255,0.9) 0deg, rgba(255,255,255,0.9) 0deg, transparent 0deg);
}
.plxr__cover__next-fill.is-timing {
	animation: plxr-cover-ring var(--plx-cover-dur, 5s) linear forwards;
}
@keyframes plxr-cover-ring {
	from { background: conic-gradient(rgba(255,255,255,0.9) 0deg, transparent 0deg); }
	to   { background: conic-gradient(rgba(255,255,255,0.9) 360deg, transparent 360deg); }
}

/* ---- Divider above the paragraph (article slide) ------------------------ */
.plxr__hero__divider {
	margin: 0 auto 14px;
	flex: 0 0 auto;
}
/* Title divider (below title, above image) — reuses the divider styles but
   with its own colour. */
.plxr__title-divider { --plx-divider: var(--plx-title-divider, #22c55e); margin: 12px auto 0; }
/* Solid line — like a bottom border under the image block. */
.plxr__hero__divider--line {
	width: calc(100% - 48px);
	height: 2px;
	background: var(--plx-divider, #22c55e);
	opacity: 0.85;
}
/* Gradient fade — line that fades out at both ends. */
.plxr__hero__divider--gradient {
	width: calc(100% - 48px);
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--plx-divider, #22c55e), transparent);
}
/* Short accent bar — centered pill. */
.plxr__hero__divider--accent {
	width: 54px;
	height: 4px;
	border-radius: 999px;
	background: var(--plx-divider, #22c55e);
}
/* Dots — three centered dots. */
.plxr__hero__divider--dots {
	width: 100%;
	height: 8px;
	background-image: radial-gradient(circle, var(--plx-divider, #22c55e) 3px, transparent 3px);
	background-size: 18px 8px;
	background-repeat: repeat-x;
	background-position: center;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
	opacity: 0.85;
}

/* ==== Migrated from Customizer "Additional CSS" ======================= */
.plxr__hero__head--top {
	padding-bottom: 0px;
}
.plxr__hero--classic .plxr__hero__body {
	padding-top: 15px;
}
.plxr__foot {
	padding-top: 10px;
	padding-bottom: 10px;
}
.plxr__hero__body {
	font-weight: 600;
	letter-spacing: -0.6px;
}
.plxr[data-img-overlay="0"] .plxr__hero__head:not(.plxr__hero__head--flat) .plxr__hero__title,
.plxd__btn {
	text-shadow: none;
}