/*
Theme Name: Play 2 Win Sweeps Child
Theme URI: https://underdogsolutions.com/
Description: Elementor-first child theme of Hello Elementor for Play 2 Win Sweeps (Royal Vault brand). Holds the brand tokens and reusable CSS classes. Header, footer and templates are built in Elementor Pro Theme Builder; widgets live in the Custom Modules plugin.
Author: Underdog Solutions
Author URI: https://underdogsolutions.com/
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   HOW TO USE (Elementor first)
   1. Site Settings > Global Colors / Global Fonts: set the values in section 1.
      The 4 system colours and fonts feed these tokens automatically.
   2. Add classes from section 3 in any widget or container:
      Advanced > CSS Classes (space separated, no dots).
   3. Keep layout, spacing and content in Elementor controls. These classes
      only add the brand look (foil, glow, glass, shine) that controls can't.
   Owner rule: two neighbouring sections never share a background. Alternate
   the .p2w-bg-* classes (ink, navy, royal, ivory, black, gold).
   ========================================================================== */


/* 1. BRAND TOKENS ----------------------------------------------------------
   Elementor Global Colors (Site Settings > Global Colors):
     Primary   #FFC629  Gold
     Secondary #0A1238  Navy
     Text      #EEF0FA  Text on dark
     Accent    #E8730C  Amber
   Add as Custom Colors: Ink #04081F, Royal #0B1E6B, Black #020410,
     Ivory #F7EFDD, Gold Rich #F5A300, Gold Pale #FFF3C4, Electric #1E5BFF,
     Emerald #1FCB6B, Sapphire #2F7BFF, Amethyst #9B4DFF,
     Text Muted #A9B0D3, Text Dark #0A1238, Text Dark Muted #4A4F6E
   Elementor Global Fonts:
     Primary   Cinzel 700           (headings)
     Secondary Cormorant Garamond 600 italic (accent words)
     Text      Schibsted Grotesk 400 (body)
     Accent    Schibsted Grotesk 600 (buttons, labels, eyebrows)
   ------------------------------------------------------------------------ */
:root {
	--p2w-gold: var(--e-global-color-primary, #FFC629);
	--p2w-navy: var(--e-global-color-secondary, #0A1238);
	--p2w-text: var(--e-global-color-text, #EEF0FA);
	--p2w-amber: var(--e-global-color-accent, #E8730C);

	--p2w-ink: #04081F;
	--p2w-royal: #0B1E6B;
	--p2w-black: #020410;
	--p2w-ivory: #F7EFDD;
	--p2w-gold-rich: #F5A300;
	--p2w-gold-pale: #FFF3C4;
	--p2w-electric: #1E5BFF;
	--p2w-emerald: #1FCB6B;
	--p2w-sapphire: #2F7BFF;
	--p2w-amethyst: #9B4DFF;
	--p2w-text-muted: #A9B0D3;
	--p2w-text-dark: #0A1238;
	--p2w-text-dark-muted: #4A4F6E;
	--p2w-line: rgba(255, 198, 41, .22);
	--p2w-line-soft: rgba(255, 255, 255, .08);
	--p2w-foil: linear-gradient(100deg, #B8860B 0%, #FFE7A0 18%, #F5A300 34%, #FFF3C4 50%, #E8A417 66%, #FFE08A 82%, #B8860B 100%);
	--p2w-gold-btn: linear-gradient(180deg, #FFE08A 0%, #FFC629 45%, #F5A300 100%);

	--p2w-font-display: var(--e-global-typography-primary-font-family, 'Cinzel'), Georgia, serif;
	--p2w-font-accent: var(--e-global-typography-secondary-font-family, 'Cormorant Garamond'), Georgia, serif;
	--p2w-font-body: var(--e-global-typography-text-font-family, 'Schibsted Grotesk'), system-ui, -apple-system, 'Segoe UI', sans-serif;
	--p2w-font-ui: var(--e-global-typography-accent-font-family, 'Schibsted Grotesk'), system-ui, sans-serif;

	--p2w-radius-s: 8px;
	--p2w-radius-m: 16px;
	--p2w-radius-l: 28px;
	--p2w-radius-pill: 999px;
	--p2w-shadow: 0 24px 60px -24px rgba(2, 4, 16, .65);
	--p2w-shadow-gold: 0 18px 50px -18px rgba(245, 163, 0, .55);

	--p2w-ease: cubic-bezier(.22, 1, .36, 1);
	--p2w-dur-1: .45s;
	--p2w-dur-2: .6s;
	--p2w-tx: transform var(--p2w-dur-2) var(--p2w-ease), opacity var(--p2w-dur-2) var(--p2w-ease), box-shadow var(--p2w-dur-2) var(--p2w-ease), background-color var(--p2w-dur-1) var(--p2w-ease), border-color var(--p2w-dur-1) var(--p2w-ease), color var(--p2w-dur-1) var(--p2w-ease);

	--p2w-header-h: 76px;
}


/* 2. BASE ------------------------------------------------------------------ */
html { scroll-padding-top: calc(var(--p2w-header-h) + 16px); }
body {
	background-color: var(--p2w-ink);
	color: var(--p2w-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
::selection { background: var(--p2w-gold); color: var(--p2w-ink); }
:focus-visible { outline: 2px solid var(--p2w-gold); outline-offset: 3px; }
.elementor-heading-title { text-wrap: balance; }
img { max-width: 100%; height: auto; }


/* 3. REUSABLE CLASSES (Advanced > CSS Classes) ---------------------------- */

/* 3.1 Section backgrounds. One per container, alternate down the page. */
.p2w-bg-ink   { background-color: var(--p2w-ink); }
.p2w-bg-navy  { background-color: var(--p2w-navy); }
.p2w-bg-royal { background-color: var(--p2w-royal); }
.p2w-bg-black { background-color: var(--p2w-black); }
.p2w-bg-ivory { background-color: var(--p2w-ivory); color: var(--p2w-text-dark); }
.p2w-bg-gold  { background: linear-gradient(120deg, #FFD45C 0%, #FFC629 40%, #F5A300 75%, #E8730C 100%); color: var(--p2w-ink); }
/* soft gold glow layered on any dark section (pair with a .p2w-bg-* class) */
.p2w-bg-glow { position: relative; isolation: isolate; }
.p2w-bg-glow::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(60% 50% at 85% 0%, rgba(255, 198, 41, .14), transparent 70%),
		radial-gradient(50% 40% at 0% 100%, rgba(30, 91, 255, .16), transparent 70%);
}

/* 3.2 Light sections: put on an ivory container so every child widget flips to dark text. */
.p2w-on-light,
.p2w-bg-ivory { --p2w-text: var(--p2w-text-dark); --p2w-text-muted: var(--p2w-text-dark-muted); --p2w-line: rgba(10, 18, 56, .14); }
.p2w-on-light .elementor-heading-title,
.p2w-bg-ivory .elementor-heading-title { color: var(--p2w-text-dark); }
.p2w-on-light .elementor-widget-text-editor,
.p2w-bg-ivory .elementor-widget-text-editor { color: var(--p2w-text-dark-muted); }

/* 3.3 Typography */
/* Gold foil heading: on a Heading widget */
.p2w-foil .elementor-heading-title,
.p2w-foil.elementor-heading-title,
span.p2w-foil {
	background: var(--p2w-foil);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
/* Eyebrow: small tracked label above a heading. No decorative line. */
.p2w-eyebrow .elementor-heading-title,
.p2w-eyebrow.elementor-heading-title,
span.p2w-eyebrow {
	display: inline-flex; align-items: center; gap: .6em;
	font-family: var(--p2w-font-ui); font-size: 12px; font-weight: 600;
	letter-spacing: .22em; text-transform: uppercase; color: var(--p2w-gold);
}
.p2w-eyebrow .elementor-heading-title::before,
span.p2w-eyebrow::before {
	content: ""; width: 7px; height: 7px; flex: none;
	background: var(--p2w-gold); transform: rotate(45deg); border-radius: 1px;
	box-shadow: 0 0 10px rgba(255, 198, 41, .6);
}
.p2w-bg-ivory .p2w-eyebrow .elementor-heading-title,
.p2w-on-light .p2w-eyebrow .elementor-heading-title { color: #9A6200; }
/* Pill eyebrow variant */
.p2w-eyebrow-pill .elementor-heading-title {
	display: inline-flex; padding: 8px 14px; border: 1px solid var(--p2w-line); border-radius: var(--p2w-radius-pill);
	background: rgba(255, 198, 41, .06);
	font-family: var(--p2w-font-ui); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--p2w-gold);
}
/* Italic accent word inside a heading: wrap a word in <span class="p2w-italic"> */
.p2w-italic, .elementor-heading-title em {
	font-family: var(--p2w-font-accent); font-style: italic; font-weight: 600;
	text-transform: none; letter-spacing: 0;
}
.p2w-lead .elementor-widget-container, .p2w-lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
.p2w-muted, .p2w-muted .elementor-widget-container { color: var(--p2w-text-muted); }
.p2w-measure .elementor-widget-container, .p2w-measure { max-width: 65ch; }
.p2w-small-caps .elementor-heading-title { font-family: var(--p2w-font-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--p2w-text-muted); }

/* 3.4 Buttons: on a Button widget */
.p2w-btn-gold .elementor-button,
.p2w-btn-ghost .elementor-button,
.p2w-btn-dark .elementor-button {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: 48px; padding: 14px 28px; border-radius: var(--p2w-radius-pill);
	font-family: var(--p2w-font-ui); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
	transition: var(--p2w-tx);
}
.p2w-btn-gold .elementor-button {
	background: var(--p2w-gold-btn); color: var(--p2w-ink);
	box-shadow: 0 10px 30px -10px rgba(245, 163, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* shine sweep */
.p2w-btn-gold .elementor-button::after {
	content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; z-index: 1; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
	transform: skewX(-20deg); transition: left .9s var(--p2w-ease);
}
.p2w-btn-gold .elementor-button:hover::after { left: 120%; }
.p2w-btn-gold .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(245, 163, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .6); color: var(--p2w-ink); }
/* pointer-following glow (position set by script.js) */
.p2w-btn-gold .elementor-button::before,
.p2w-btn-ghost .elementor-button::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
	background: radial-gradient(140px circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, .45), transparent 70%);
	transition: opacity var(--p2w-dur-1) var(--p2w-ease);
}
.p2w-btn-gold .elementor-button:hover::before,
.p2w-btn-ghost .elementor-button:hover::before { opacity: 1; }
.p2w-btn-ghost .elementor-button {
	background: rgba(255, 255, 255, .02); color: var(--p2w-text);
	border: 1px solid rgba(255, 198, 41, .45);
}
.p2w-btn-ghost .elementor-button::before { background: radial-gradient(140px circle at var(--x, 50%) var(--y, 50%), rgba(255, 198, 41, .22), transparent 70%); }
.p2w-btn-ghost .elementor-button:hover { border-color: var(--p2w-gold); color: var(--p2w-gold); transform: translateY(-2px); }
.p2w-btn-dark .elementor-button { background: var(--p2w-ink); color: var(--p2w-gold-pale); box-shadow: 0 10px 30px -12px rgba(2, 4, 16, .7); }
.p2w-btn-dark .elementor-button:hover { background: var(--p2w-navy); color: var(--p2w-gold); transform: translateY(-2px); }
.p2w-bg-ivory .p2w-btn-ghost .elementor-button,
.p2w-on-light .p2w-btn-ghost .elementor-button,
.p2w-bg-gold .p2w-btn-ghost .elementor-button { color: var(--p2w-ink); border-color: rgba(4, 8, 31, .4); }
/* soft attention pulse for the one primary CTA on a page */
.p2w-btn-pulse .elementor-button { animation: p2w-pulse 2.8s var(--p2w-ease) infinite; }
@keyframes p2w-pulse {
	0%, 100% { box-shadow: 0 10px 30px -10px rgba(245, 163, 0, .7), 0 0 0 0 rgba(255, 198, 41, .45); }
	50% { box-shadow: 0 10px 30px -10px rgba(245, 163, 0, .7), 0 0 0 12px rgba(255, 198, 41, 0); }
}

/* 3.5 Cards and surfaces: on a Container */
.p2w-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
	border: 1px solid var(--p2w-line-soft); border-radius: var(--p2w-radius-m);
	box-shadow: var(--p2w-shadow); transition: var(--p2w-tx);
}
.p2w-card:hover { border-color: var(--p2w-line); transform: translateY(-4px); box-shadow: var(--p2w-shadow), 0 0 0 1px rgba(255, 198, 41, .08); }
.p2w-card-light {
	background: #FFFFFF; color: var(--p2w-text-dark);
	border: 1px solid rgba(10, 18, 56, .08); border-radius: var(--p2w-radius-m);
	box-shadow: 0 20px 50px -28px rgba(10, 18, 56, .35); transition: var(--p2w-tx);
}
.p2w-card-light:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -28px rgba(10, 18, 56, .45); }
.p2w-glass {
	background: rgba(10, 18, 56, .55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--p2w-radius-m);
}
.p2w-gold-border { border: 1px solid var(--p2w-line); border-radius: var(--p2w-radius-m); }
.p2w-gold-glow { box-shadow: var(--p2w-shadow-gold); }
.p2w-lift { transition: var(--p2w-tx); }
.p2w-lift:hover { transform: translateY(-4px); }
/* 3D tilt on hover (desktop mouse only, handled by script.js) */
.p2w-tilt { transform-style: preserve-3d; transition: transform var(--p2w-dur-2) var(--p2w-ease); will-change: transform; }

/* 3.6 Icons */
/* Icon or Icon Box widget: gold icon on a lit navy tile */
.p2w-icon-tile .elementor-icon {
	display: inline-grid; place-items: center; width: 56px; height: 56px; padding: 0;
	border-radius: 16px; color: var(--p2w-gold); font-size: 24px;
	background: radial-gradient(120% 120% at 30% 20%, #1A2A78 0%, #0A1238 60%, #04081F 100%);
	border: 1px solid rgba(255, 198, 41, .28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px -12px rgba(2, 4, 16, .8);
}
.p2w-icon-tile .elementor-icon svg { width: 24px; height: 24px; fill: currentColor; }
/* Icon List widget as gold checklist */
.p2w-checklist .elementor-icon-list-icon { color: var(--p2w-gold); }
.p2w-checklist .elementor-icon-list-icon svg { fill: var(--p2w-gold); }
.p2w-checklist .elementor-icon-list-item { padding-block: 6px; }
/* Icon List widget (inline layout) as pill chips */
.p2w-chips .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 8px; }
.p2w-chips .elementor-icon-list-item {
	margin: 0 !important; padding: 8px 14px; border-radius: var(--p2w-radius-pill);
	background: rgba(255, 255, 255, .04); border: 1px solid var(--p2w-line-soft);
	font-size: 13px; color: var(--p2w-text);
}
.p2w-chips .elementor-icon-list-item::after { display: none !important; }
.p2w-chips .elementor-icon-list-icon { color: var(--p2w-gold); }
.p2w-chips .elementor-icon-list-icon svg { fill: var(--p2w-gold); }

/* 3.7 Images */
.p2w-frame img { border-radius: var(--p2w-radius-m); border: 1px solid var(--p2w-line); box-shadow: var(--p2w-shadow); }
.p2w-frame-arch img {
	border-radius: 999px 999px var(--p2w-radius-m) var(--p2w-radius-m);
	border: 2px solid rgba(255, 198, 41, .55);
	box-shadow: 0 0 0 6px rgba(255, 198, 41, .08), 0 30px 80px -30px rgba(245, 163, 0, .45);
}
.p2w-img-zoom { overflow: hidden; border-radius: var(--p2w-radius-m); }
.p2w-img-zoom img { transition: transform 1.1s var(--p2w-ease); }
.p2w-img-zoom:hover img { transform: scale(1.05); }

/* 3.8 Header and navigation (Theme Builder header) */
/* on the header's outer container. Make it sticky with Elementor:
   Advanced > Motion Effects > Sticky: Top. script.js adds .is-scrolled after 24px. */
.p2w-header {
	z-index: 900;
	transition: background-color var(--p2w-dur-2) var(--p2w-ease), box-shadow var(--p2w-dur-2) var(--p2w-ease), -webkit-backdrop-filter var(--p2w-dur-2) var(--p2w-ease), backdrop-filter var(--p2w-dur-2) var(--p2w-ease);
}
.p2w-header.is-scrolled {
	background-color: rgba(4, 8, 31, .78);
	-webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 1px 0 rgba(255, 198, 41, .14), 0 12px 30px -20px rgba(0, 0, 0, .8);
}
/* on a Nav Menu widget: gold underline on hover and on the current page */
.p2w-nav .elementor-nav-menu--main .elementor-item {
	font-family: var(--p2w-font-ui); font-weight: 500; font-size: 14px; color: var(--p2w-text);
	transition: color var(--p2w-dur-1) var(--p2w-ease);
}
.p2w-nav .elementor-nav-menu--main .elementor-item::after {
	content: ""; position: absolute; left: 50%; right: 50%; bottom: 6px; height: 2px; border-radius: 2px;
	background: var(--p2w-gold); opacity: 1; transition: left var(--p2w-dur-1) var(--p2w-ease), right var(--p2w-dur-1) var(--p2w-ease);
}
.p2w-nav .elementor-nav-menu--main .elementor-item:hover,
.p2w-nav .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--p2w-gold); }
.p2w-nav .elementor-nav-menu--main .elementor-item:hover::after,
.p2w-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after { left: 18px; right: 18px; }
.p2w-nav .elementor-nav-menu--dropdown { background: var(--p2w-navy); border: 1px solid var(--p2w-line-soft); border-radius: var(--p2w-radius-m); }
.p2w-nav .elementor-nav-menu--dropdown .elementor-item { min-height: 44px; color: var(--p2w-text); }
.p2w-nav .elementor-nav-menu--dropdown .elementor-item:hover,
.p2w-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { background: rgba(255, 198, 41, .08); color: var(--p2w-gold); }
.p2w-nav .elementor-menu-toggle { color: var(--p2w-gold); background: transparent; }

/* 3.9 Footer (Theme Builder footer) */
.p2w-footer a { color: var(--p2w-text-muted); transition: color var(--p2w-dur-1) var(--p2w-ease); }
.p2w-footer a:hover { color: var(--p2w-gold); }
.p2w-footer .elementor-icon-list-item { min-height: 32px; }
.p2w-footer-title .elementor-heading-title { font-family: var(--p2w-font-ui); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--p2w-gold); }
.p2w-legal-line, .p2w-legal-line .elementor-widget-container { font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: var(--p2w-text-muted); }

/* 3.10 Accordion / Nested Accordion / Toggle as gold FAQ */
.p2w-faq .e-n-accordion-item,
.p2w-faq .elementor-accordion-item,
.p2w-faq .elementor-toggle-item {
	border: 0; border-bottom: 1px solid var(--p2w-line-soft);
}
.p2w-faq .e-n-accordion-item-title,
.p2w-faq .elementor-tab-title {
	padding: 22px 0; min-height: 44px;
	font-family: var(--p2w-font-display); font-size: clamp(16px, 1.3vw, 19px); color: var(--p2w-text);
	transition: color var(--p2w-dur-1) var(--p2w-ease);
}
.p2w-faq .e-n-accordion-item-title:hover,
.p2w-faq .e-n-accordion-item[open] .e-n-accordion-item-title,
.p2w-faq .elementor-tab-title:hover,
.p2w-faq .elementor-tab-title.elementor-active { color: var(--p2w-gold); }
.p2w-faq .e-n-accordion-item-title-icon,
.p2w-faq .elementor-accordion-icon { color: var(--p2w-gold); }
.p2w-faq .elementor-tab-content,
.p2w-faq .e-n-accordion-item > [role="region"] { padding: 0 0 22px; color: var(--p2w-text-muted); line-height: 1.7; }

/* 3.11 Form widget (dark fields, gold focus) */
.p2w-form .elementor-field-textual,
.p2w-form .elementor-select-wrapper select {
	min-height: 48px; padding: 12px 16px; border-radius: 12px;
	background: rgba(255, 255, 255, .04); color: var(--p2w-text);
	border: 1px solid rgba(255, 255, 255, .14);
	transition: border-color var(--p2w-dur-1) var(--p2w-ease), box-shadow var(--p2w-dur-1) var(--p2w-ease);
}
.p2w-form .elementor-field-textual::placeholder { color: rgba(169, 176, 211, .7); }
.p2w-form .elementor-field-textual:focus,
.p2w-form .elementor-select-wrapper select:focus { border-color: var(--p2w-gold); box-shadow: 0 0 0 3px rgba(255, 198, 41, .18); outline: none; }
.p2w-form .elementor-field-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--p2w-text-muted); }
.p2w-bg-ivory .p2w-form .elementor-field-textual,
.p2w-card-light .p2w-form .elementor-field-textual { background: #FFFFFF; color: var(--p2w-text-dark); border-color: rgba(10, 18, 56, .16); }

/* 3.12 Layout utilities */
/* horizontal scroll row on mobile (filter chips, tabs, cards) */
@media (max-width: 767px) {
	.p2w-x-scroll { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
	.p2w-x-scroll::-webkit-scrollbar { display: none; }
	.p2w-x-scroll > * { flex: 0 0 auto; scroll-snap-align: start; }
}
.p2w-hide-scrollbar { scrollbar-width: none; }
.p2w-hide-scrollbar::-webkit-scrollbar { display: none; }
/* sticky sidebar / table of contents under the header */
.p2w-sticky { position: sticky; top: calc(var(--p2w-header-h) + 24px); align-self: flex-start; }
.admin-bar .p2w-sticky { top: calc(var(--p2w-header-h) + 56px); }
@media (max-width: 1024px) { .p2w-sticky { position: static; } }
.p2w-rounded-l { border-radius: var(--p2w-radius-l); overflow: hidden; }
.p2w-clip { overflow: clip; }
/* gem sparkle dots for decorative containers */
.p2w-gems { position: relative; }
.p2w-gems::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background:
		radial-gradient(3px 3px at 12% 22%, var(--p2w-emerald), transparent 60%),
		radial-gradient(3px 3px at 82% 18%, var(--p2w-amethyst), transparent 60%),
		radial-gradient(2px 2px at 68% 76%, var(--p2w-sapphire), transparent 60%),
		radial-gradient(2px 2px at 24% 84%, var(--p2w-gold), transparent 60%);
	opacity: .8;
}
/* current year: add class p2w-year to an empty span in a Text Editor */


/* 4. REDUCED MOTION -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.p2w-btn-pulse .elementor-button { animation: none; }
}



/* 5. SITE ADDITIONS --------------------------------------------------------- */

/* 5.1 Eyebrow on a Heading widget: the global layer's .p2w-eyebrow::before also hits the
   widget wrapper, which printed a second diamond. Keep only the title's diamond. */
.elementor-widget.p2w-eyebrow::before { content: none !important; display: none !important; }

/* 5.2 Forminator forms (put .p2w-form-style on the Shortcode widget; form design "None").
   Dark glass fields, gold focus, gold pill submit, matching the Elementor .p2w-form look. */
.p2w-form-style .forminator-ui.forminator-custom-form { margin: 0; }
.p2w-form-style .forminator-row { margin-bottom: 18px; }
.p2w-form-style .forminator-label {
	display: block; margin-bottom: 8px; font-family: var(--p2w-font-ui); font-size: 12px; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--p2w-text-muted);
}
.p2w-form-style .forminator-input,
.p2w-form-style .forminator-textarea,
.p2w-form-style select.forminator-select,
.p2w-form-style select {
	width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 12px;
	background: rgba(255, 255, 255, .04); border: 1px solid var(--p2w-line); color: var(--p2w-text);
	font-family: var(--p2w-font-body); font-size: 16px; transition: var(--p2w-tx);
}
.p2w-form-style select option { background: var(--p2w-navy); color: var(--p2w-text); }
.p2w-form-style .forminator-textarea { min-height: 150px; resize: vertical; }
.p2w-form-style .forminator-input::placeholder,
.p2w-form-style .forminator-textarea::placeholder { color: rgba(169, 176, 211, .7); }
.p2w-form-style .forminator-input:focus,
.p2w-form-style .forminator-textarea:focus,
.p2w-form-style select:focus { border-color: var(--p2w-gold); box-shadow: 0 0 0 3px rgba(255, 198, 41, .18); outline: none; }
.p2w-form-style .forminator-button-submit {
	min-height: 52px; padding: 14px 32px; border: 0; border-radius: var(--p2w-radius-pill); cursor: pointer;
	background: var(--p2w-gold-btn); color: var(--p2w-ink); font-family: var(--p2w-font-ui); font-weight: 700;
	font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 10px 30px -10px rgba(245, 163, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .6); transition: var(--p2w-tx);
}
.p2w-form-style .forminator-button-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(245, 163, 0, .85); }
.p2w-form-style .forminator-error-message,
.p2w-form-style .forminator-error-message * { color: #FF8A8A; font-size: 13px; }
.p2w-form-style .forminator-response-message { border-radius: 12px; padding: 14px 18px; background: rgba(31, 203, 107, .1); border: 1px solid rgba(31, 203, 107, .4); color: var(--p2w-text); }
.p2w-form-style .forminator-response-message.forminator-error { background: rgba(255, 90, 90, .08); border-color: rgba(255, 90, 90, .4); }

/* 5.B Class collisions (Agent B, 2026-10-17). The Custom Modules global CSS also styles
   .p2w-icon-tile and .p2w-eyebrow for its own widgets. When these child-theme classes sit on an
   Elementor widget wrapper, keep the wrapper a normal block so only the inner icon / heading
   carries the look (otherwise Icon Box widgets shrink to a 56px tile and eyebrows get two gems). */
.elementor-widget.p2w-icon-tile {
	display: block; place-items: normal; flex: initial; width: auto; height: auto;
	border-radius: 0; background: none; box-shadow: none; color: inherit;
}
.elementor-widget.p2w-eyebrow { display: block; }
.elementor-widget.p2w-eyebrow::before { content: none !important; display: none !important; }

/* 5.3 Blog post body (Post Content widget with class p2w-prose, on an ivory section).
   The posts are plain HTML from the classic editor; these rules give headings, links,
   pull quotes, callouts, step lists, tables, diamond lists and the takeaways box the
   prototype look. Icons are CSS glyphs so the content stays clean HTML. */
.p2w-prose { font-size: 18px; line-height: 1.75; color: var(--p2w-text-dark-muted); }
.p2w-prose > .elementor-widget-container > *:first-child { margin-top: 0; }
.p2w-prose p { margin: 0 0 1.25em; }
.p2w-prose a { color: #8A5200; text-decoration: underline; text-decoration-color: rgba(232, 163, 23, .7); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.p2w-prose a:hover { color: var(--p2w-text-dark); text-decoration-color: var(--p2w-gold); }
.p2w-prose h2 { font-family: var(--p2w-font-display); font-weight: 700; color: var(--p2w-text-dark); font-size: clamp(25px, 2.5vw, 33px); line-height: 1.18; margin: 2.1em 0 .7em; scroll-margin-top: 110px; }
.p2w-prose h3 { font-family: var(--p2w-font-display); font-weight: 700; color: var(--p2w-text-dark); font-size: 20px; margin: 1.6em 0 .4em; }
.p2w-prose h3 + p { margin-top: 0; }
.p2w-prose strong { color: var(--p2w-text-dark); }
.p2w-prose .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p2w-lead-p { font-size: 1.15em; line-height: 1.65; color: var(--p2w-text-dark); }
.p2w-lead-p::first-letter { font-family: var(--p2w-font-display); font-weight: 800; float: left; font-size: 3.4em; line-height: .82; margin: .08em .12em 0 0; color: #B8780A; }
.p2w-pull { margin: 2.2em 0; padding: 30px 0 8px 30px; position: relative; border-left: 3px solid var(--p2w-gold-rich); }
.p2w-pull::before { content: "\201C"; position: absolute; left: 24px; top: -16px; font-family: var(--p2w-font-accent); font-size: 96px; line-height: 1; color: rgba(245, 163, 0, .3); pointer-events: none; }
.p2w-pull blockquote { margin: 0; padding: 0; border: 0; }
.p2w-pull blockquote p { margin: 0; font-family: var(--p2w-font-accent); font-style: italic; font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; color: var(--p2w-text-dark); }
.p2w-pull figcaption { margin-top: 12px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: #9A5B00; }
.p2w-callout { margin: 1.8em 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: var(--p2w-radius-m); background: #fff; box-shadow: 0 0 0 1px rgba(10, 18, 56, .08) inset, 0 24px 44px -34px rgba(10, 18, 56, .5); font-size: 16.5px; line-height: 1.65; }
.p2w-callout__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 20%, #1A2C7A 0%, #0C1650 60%, #070E36 100%); box-shadow: inset 0 0 0 1px rgba(255, 198, 41, .28); font-family: var(--p2w-font-display); font-weight: 700; font-size: 20px; color: #7FB0FF; }
.p2w-callout__icon::before { content: "i"; }
.p2w-callout--tip .p2w-callout__icon { color: #5FE39A; }
.p2w-callout--tip .p2w-callout__icon::before { content: "\2726"; font-size: 18px; }
.p2w-callout--warn .p2w-callout__icon { color: #FFB547; }
.p2w-callout--warn .p2w-callout__icon::before { content: "!"; }
.p2w-callout p { margin: 0; }
.p2w-callout__title { font-family: var(--p2w-font-display); font-weight: 700; font-size: 16px; letter-spacing: .06em; color: var(--p2w-text-dark); margin: 8px 0 4px !important; line-height: 1.3; }
.p2w-callout--help { background: linear-gradient(140deg, #0F1C55, #060B2A); color: var(--p2w-text); box-shadow: 0 0 0 1px rgba(31, 203, 107, .45) inset; }
.p2w-callout--help .p2w-callout__icon { background: linear-gradient(160deg, #FFE9A3, #FFC629 45%, #E39A00); color: #2A1A00; }
.p2w-callout--help .p2w-callout__icon::before { content: "\260E"; }
.p2w-callout--help .p2w-callout__title { color: #7FE3AA; }
.p2w-prose .p2w-callout--help a { color: var(--p2w-gold-pale); }
.p2w-prose .p2w-callout--help a strong { color: var(--p2w-gold); font-family: var(--p2w-font-display); }
.p2w-psteps { list-style: none; margin: 1.6em 0 2em; padding: 0; counter-reset: st; position: relative; }
.p2w-psteps::before { content: ""; position: absolute; left: 23px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(var(--p2w-gold-rich), rgba(245, 163, 0, .15)); }
.p2w-psteps li { counter-increment: st; display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 12px 0; position: relative; }
.p2w-psteps li::before { content: counter(st); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--p2w-font-display); font-weight: 800; font-size: 19px; color: #2A1700; background: radial-gradient(circle at 35% 30%, #FFF3C4 0%, #FFC629 38%, #E89A00 78%, #A35C00 100%); box-shadow: 0 0 0 3px var(--p2w-ivory), 0 0 0 4px rgba(154, 91, 0, .55); position: relative; z-index: 1; }
.p2w-psteps strong { display: block; font-family: var(--p2w-font-display); font-size: 18px; line-height: 1.3; margin: 10px 0 4px; color: var(--p2w-text-dark); }
.p2w-psteps p { margin: 0; font-size: 17px; line-height: 1.65; }
.p2w-list { margin: 0 0 1.4em; padding: 0; list-style: none; }
.p2w-list li { position: relative; padding-left: 30px; margin: 0 0 .65em; }
.p2w-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; transform: rotate(45deg); background: linear-gradient(135deg, var(--p2w-gold-pale), var(--p2w-gold-rich)); box-shadow: 0 0 0 1px rgba(154, 91, 0, .4); }
.p2w-table { margin: 1.6em 0 2em; border-radius: var(--p2w-radius-m); overflow-x: auto; background: #fff; box-shadow: 0 0 0 1px rgba(10, 18, 56, .1) inset, 0 24px 44px -34px rgba(10, 18, 56, .5); }
.p2w-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; min-width: 520px; margin: 0; border: 0; }
.p2w-table thead th { background: var(--p2w-text-dark); color: var(--p2w-gold); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; text-align: left; padding: 14px 16px; font-weight: 700; border: 0; }
.p2w-table tbody th, .p2w-table td { padding: 14px 16px; border: 0; border-top: 1px solid rgba(10, 18, 56, .08); text-align: left; vertical-align: top; background: transparent; }
.p2w-table tbody th { font-family: var(--p2w-font-display); font-weight: 700; color: var(--p2w-text-dark); white-space: nowrap; }
.p2w-table tbody th span { display: block; font-family: var(--p2w-font-body); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9A5B00; }
.p2w-table tbody tr:nth-child(even) { background: rgba(247, 239, 221, .55); }
.p2w-table td:last-child { font-weight: 700; color: var(--p2w-text-dark); }
.p2w-take { margin: 2.4em 0 1.6em; padding: 30px 30px 26px; border-radius: var(--p2w-radius-l); background: var(--p2w-text-dark); color: var(--p2w-text); box-shadow: 0 0 0 1px rgba(255, 198, 41, .4) inset, 0 40px 70px -44px rgba(4, 8, 31, .9); position: relative; overflow: hidden; }
.p2w-take__head { margin: 0 0 20px; }
.p2w-prose .p2w-take h2 { color: var(--p2w-gold); margin: 0; font-size: clamp(22px, 2.2vw, 28px); }
.p2w-take ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.p2w-take li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 16.5px; line-height: 1.6; }
.p2w-take__tick { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(31, 203, 107, .16); box-shadow: inset 0 0 0 1px rgba(31, 203, 107, .35); color: #7FE3AA; font-size: 14px; font-weight: 700; }
.p2w-take__tick::before { content: "\2713"; }
@media (max-width: 767px) {
	.p2w-prose { font-size: 17px; }
	.p2w-callout { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 16px; }
	.p2w-take { padding: 24px 20px 22px; }
	.p2w-pull { padding-left: 22px; }
}

/* 5.4 Inline CTA strip (blog post, blog sidebar): navy container on an ivory section. */
.p2w-icta { position: relative; overflow: hidden; border-radius: var(--p2w-radius-l); background: radial-gradient(90% 120% at 100% 0%, rgba(255, 198, 41, .16), transparent 60%), linear-gradient(140deg, #0F1C55, #060B2A); box-shadow: 0 0 0 1px rgba(255, 198, 41, .3) inset, 0 40px 70px -44px rgba(4, 8, 31, .9); }
.p2w-icta .elementor-heading-title { color: var(--p2w-text); }
.p2w-icta .elementor-widget-text-editor { color: var(--p2w-text-muted); }

/* 5.C Legal document body (Agent B, 2026-10-17). Text Editor widget with class "p2w-doc" on the
   legal pages: serif section headings, readable measure, anchor offset under the sticky header. */
.p2w-doc { max-width: 72ch; font-size: 17px; line-height: 1.75; }
.p2w-doc h2 {
	margin: 2.2em 0 .6em; font-family: var(--p2w-font-display); font-weight: 700;
	font-size: clamp(22px, 2vw, 28px); line-height: 1.25; color: var(--p2w-text);
	scroll-margin-top: calc(var(--p2w-header-h) + 32px);
}
.p2w-doc h2:first-child { margin-top: 0; }
.p2w-doc a { color: #9A6200; text-decoration: underline; text-underline-offset: 3px; }
.p2w-doc ul, .p2w-doc ol { padding-left: 1.3em; }
.p2w-doc li { margin-bottom: .4em; }

/* 5.5 Sticky sidebars (.p2w-sticky): the global .p2w-section hides overflow, which
   cancels position: sticky. Clip only the x axis on sections that hold a sticky column.
   Also hide the empty paragraphs the classic editor's autop adds inside callouts. */
.p2w-section:has(.p2w-sticky) { overflow: visible; overflow-x: clip; }
.p2w-prose p:empty { display: none; }

/* 5.6 Dark card inside an ivory section (.p2w-icta): restore the dark-surface tokens the
   ivory section switches off, so headings, text and Forminator fields stay light. Also
   style Forminator's select2 subject dropdown like the other fields. */
.p2w-icta { --p2w-text: #EEF0FA; --p2w-text-muted: #A9B0D3; --p2w-line: rgba(255, 198, 41, .22); color: var(--p2w-text); }
.p2w-bg-ivory .p2w-icta .elementor-heading-title { color: var(--p2w-text); }
.p2w-bg-ivory .p2w-icta .elementor-widget-text-editor { color: var(--p2w-text-muted); }
.p2w-bg-ivory .p2w-icta .p2w-eyebrow .elementor-heading-title { color: var(--p2w-gold); }
.p2w-bg-ivory .p2w-icta .elementor-icon-list-text { color: var(--p2w-text); }
.p2w-form-style .select2-container { width: 100% !important; }
.p2w-form-style .select2-container .select2-selection--single { height: auto; min-height: 50px; padding: 12px 40px 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--p2w-line); }
.p2w-form-style .select2-container .select2-selection__rendered { padding: 0; line-height: 1.5; color: var(--p2w-text); font-family: var(--p2w-font-body); font-size: 16px; }
.p2w-form-style .select2-container .select2-selection__placeholder { color: rgba(169, 176, 211, .7); }
.p2w-form-style .select2-container .select2-selection__arrow { height: 100%; right: 12px; }
.p2w-form-style .select2-container--open .select2-selection--single { border-color: var(--p2w-gold); box-shadow: 0 0 0 3px rgba(255, 198, 41, .18); }

/* 5.7 Forminator: hide the empty response box until the form has a message to show. */
.p2w-form-style .forminator-response-message[aria-hidden="true"],
.p2w-form-style .forminator-response-message:empty { display: none; }

/* 5.8 Button classes vs. Elementor's global button colour: on this host the Elementor kit
   CSS is concatenated after the theme, so its accent background-color beat .p2w-btn-ghost
   and .p2w-btn-dark. Raise specificity so the reusable classes always win. */
.elementor-widget.p2w-btn-ghost .elementor-button { background-color: rgba(255, 255, 255, .02); }
.elementor-widget.p2w-btn-dark .elementor-button { background-color: var(--p2w-ink); }
.elementor-widget.p2w-btn-dark .elementor-button:hover { background-color: var(--p2w-navy); }

/* 5.9 Blog posts: the template already has its own share buttons and related posts, so hide
   the Jetpack likes, sharing and related-posts blocks Jetpack appends to the post content. */
.p2w-prose .sharedaddy, .p2w-prose .sd-like, .p2w-prose #jp-relatedposts, .p2w-prose .jp-relatedposts { display: none !important; }

/* 5.10 Same load-order issue for button type and shape: keep the 3.4 button look when the
   kit's accent typography loads later (seen on archive pages). */
.elementor-widget.p2w-btn-gold .elementor-button,
.elementor-widget.p2w-btn-ghost .elementor-button,
.elementor-widget.p2w-btn-dark .elementor-button {
	padding: 14px 28px; border-radius: var(--p2w-radius-pill);
	font-family: var(--p2w-font-ui); font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 767px) {
	.p2w-header .elementor-widget.p2w-btn-gold .elementor-button { padding: 10px 16px; font-size: 12px; min-height: 40px; }
}

/* 5.11 SMOOTH SCROLL: Lenis handles smoothing, so native smooth scrolling must be off,
   otherwise the two fight and wheel scrolling feels laggy. */
html.lenis, html.lenis body { height: auto; }
html.lenis, html.lenis body { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* 6. MOBILE FIXES ------------------------------------------------------- */
/* 6.A: header, footer, home, games archive, single game, 404 (Agent A). 6.B: other pages (Agent B). */

/* 6.A1 Header (Agent A, mobile QA). Order, colours, compact DM pill and menu item spacing are
   Elementor settings on the P2W Header template; this only sizes the toggle to a 44px tap target
   and turns the dropdown into a full-height navy panel. */
@media (max-width: 1024px) {
	.p2w-header .p2w-nav .elementor-menu-toggle {
		width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
		border-style: solid; border-color: rgba(255, 198, 41, .45);
	}
	.p2w-header .p2w-nav .elementor-menu-toggle svg { width: 24px; height: 24px; fill: var(--p2w-gold); }
	.p2w-header .p2w-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
		height: calc(100vh - 62px); height: calc(100svh - 62px); max-height: calc(100svh - 62px);
		overflow-y: auto; overscroll-behavior: contain;
		background: radial-gradient(120% 60% at 50% 0%, rgba(255, 198, 41, .08), transparent 60%), var(--p2w-ink, #04081F);
		border: 0; border-top: 1px solid rgba(255, 198, 41, .18); border-radius: 0;
		padding: 12px 0 32px;
	}
	.p2w-header .p2w-nav .elementor-nav-menu--dropdown .elementor-item { min-height: 60px; justify-content: center; }
}

/* 6.A2 Mobile side gutter (Agent A): Custom Modules sections use 20px instead of 16px on phones.
   Nested Elementor containers get 2px side padding from Site Settings > Layout (mobile), so text
   in native sections also lands about 20px from the edge instead of 36 to 46px. */
@media (max-width: 767px) {
	html:root { --p2w-gutter: 20px; --p2w-gutter-l: 20px; --p2w-gutter-r: 20px; }
}

/* 6.A3 Single game (Agent A): Jetpack appends Related posts and sharing to the Post Content
   widget; the template already has its own More games section. */
.single-cm_game .jp-relatedposts, .single-cm_game #jp-relatedposts, .single-cm_game .sharedaddy, .single-cm_game .sd-like { display: none !important; }

/* 6.A4 Tap targets (Agent A): linked Icon List rows are at least 44px tall on phones. */
@media (max-width: 767px) {
	.elementor-widget-icon-list .elementor-icon-list-item > a { min-height: 44px; align-items: center; }
}