/**
 * PLEY Affiliate blocks — defensive CSS layer.
 *
 * Stable hooks that must render correctly even if the Tailwind bundle
 * predates the blades (same rationale as csmoney-blocks.css). Loaded
 * together with `pley-ext-tailwind` on pages that contain affiliate
 * blocks. Keep rules minimal — Tailwind utilities carry the design;
 * this file covers scanner blind spots + non-utility behaviors.
 */

/* The theme renders ad-slot wrappers (`.block-ad.my-14`) above the
   content and above the footer even when no ad is configured — the
   x-ad component then outputs nothing, leaving a 112px black gap
   around the affiliate background. Collapse ONLY empty slots; a
   configured banner renders with its normal spacing. This stylesheet
   loads exclusively on pages with affiliate blocks, so other pages
   are untouched. */
.block-ad:not(:has(a, ins, iframe)) {
	display: none;
}

/* Page heading + intro follow PLEY's article typography exactly (Inter,
   from the Fontanello-inspected values). Scoped under .pley-aff-block
   so it wins over the theme's `.main :is(h1,h2){color:...}` rule. */
.pley-aff-block .pley-aff-h1,
.pley-aff-block .pley-aff-h2 {
	margin: 0;
	font-weight: 500;
	color: #ff9e2a;
	letter-spacing: normal;
	text-transform: none;
}
.pley-aff-block .pley-aff-h1 {
	font-size: 44px;
	line-height: 44px;
}
.pley-aff-block .pley-aff-h2 {
	font-size: 32px;
	line-height: 34px;
}
@media (max-width: 640px) {
	.pley-aff-block .pley-aff-h1 { font-size: 30px; line-height: 32px; }
	.pley-aff-block .pley-aff-h2 { font-size: 24px; line-height: 28px; }
}
.pley-aff-block .pley-aff-intro {
	font-weight: 400;
	font-size: 16px;
	line-height: 28px;
	color: oklch(0.872 0.01 258.338);
}

/* Advertising disclosure — compliant, unobtrusive, but legible. A
   labelled line with an info glyph reads as a deliberate editorial
   notice rather than buried fine print. */
.pley-aff-block .pley-aff-disclosure {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1rem 0 0.25rem;
}
.pley-aff-block .pley-aff-disclosure-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 2px;
	color: #7E7D77;
}
.pley-aff-block .pley-aff-disclosure p {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	color: #7E7D77;
}
.pley-aff-block .pley-aff-disclosure-label {
	font-weight: 600;
	color: #A2A19A;
}

/* Author byline + testing method — the E-E-A-T trust cluster under the
   intro. A named writer linking to their /author/ profile, the freshness
   date, and a one-line first-hand method statement. The author resolves
   from the page's post_author, so the same value drives Rank Math's
   Person schema. */
.pley-aff-block .pley-aff-byline {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: 1.5rem;
	padding: 0.875rem 1rem;
	background: #151514;
	border: 1px solid #2D2D2A;
	border-radius: 12px;
}
.pley-aff-block .pley-aff-byline-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 9999px;
	background: #1D1D1B;
	border: 1px solid #3F3F3B;
	color: #ff9e2a;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	object-fit: cover; /* applies if an <img> avatar replaces the initial */
}
.pley-aff-block .pley-aff-byline-text { min-width: 0; }
.pley-aff-block .pley-aff-byline-line {
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	color: #A2A19A;
}
.pley-aff-block .pley-aff-byline-author {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s;
}
.pley-aff-block .pley-aff-byline-author:hover { color: #F18805; }
.pley-aff-block .pley-aff-byline-sep { margin: 0 0.4rem; color: #52514C; }
/* gray-50, not gray-100: on the #151514 byline card the darker token
   lands at 4.42:1 and fails WCAG AA (Lighthouse contrast audit). */
.pley-aff-block .pley-aff-byline-updated { color: #A2A19A; }
.pley-aff-block .pley-aff-method {
	margin: 0.2rem 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #A2A19A;
	text-wrap: balance;
}

/* Bottom SEO prose — editor wysiwyg on the dark surface. Body text
   matches PLEY's paragraph; headings use the brand editorial colour.
   Scoped so it never touches the cards above. */
.pley-aff-block .pley-aff-prose {
	color: oklch(0.872 0.01 258.338);
	font-size: 16px;
	line-height: 28px;
}
.pley-aff-block .pley-aff-prose > :first-child { margin-top: 0; }
.pley-aff-block .pley-aff-prose h2,
.pley-aff-block .pley-aff-prose h3,
.pley-aff-block .pley-aff-prose h4 {
	color: #ff9e2a;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.2;
}
.pley-aff-block .pley-aff-prose h2 { font-size: 30px; margin: 2rem 0 0.75rem; }
.pley-aff-block .pley-aff-prose h3 { font-size: 22px; margin: 1.75rem 0 0.5rem; }
.pley-aff-block .pley-aff-prose h4 { font-size: 18px; margin: 1.5rem 0 0.5rem; }
.pley-aff-block .pley-aff-prose p { margin: 0 0 1rem; }
.pley-aff-block .pley-aff-prose a { color: #ff9e2a; text-decoration: underline; }
.pley-aff-block .pley-aff-prose ul,
.pley-aff-block .pley-aff-prose ol { margin: 0 0 1rem 1.25rem; padding: 0; }
.pley-aff-block .pley-aff-prose li { margin: 0 0 0.4rem; }
.pley-aff-block .pley-aff-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 1rem 0; }
.pley-aff-block .pley-aff-prose blockquote {
	margin: 1.25rem 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 3px solid #F18805;
	color: #D2D1CE;
}
.pley-aff-block .pley-aff-prose strong { color: #fff; }

/* Two-column layout — cards left, sticky sidebar right (desktop only).
   Below lg it's plain block flow: cards, then sidebar underneath. */
/* Sidebar sits beside the cards only when there's REAL room. The custom
   `container` caps at 1024px until the xl breakpoint (1280px), so between
   1120 and 1279 a 320px rail left the main column at ~630px - three tiny
   podium columns and four cramped tail cards with truncated names and a
   wrapped CTA. Gate the rail to >=1280px, where the container jumps to
   1280 and the main column keeps ~890px. Below that the sidebar stacks
   and the cards use the full container width. */
@media (min-width: 1280px) {
	.pley-aff-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 1.5rem;
		align-items: start;
	}
	/* Only the sponsor banner sticks; the link cards scroll away with the
	   content. Stretch the column to the full row height so the sticky
	   banner has room to travel down as you scroll. */
	.pley-aff-sidebar {
		align-self: stretch;
	}
	.pley-aff-side-sticky {
		position: sticky;
		/* Clears the sticky 80px header PLUS the game section sub-nav the
		   theme pins open on /cs2/, /valorant/, /apex-legends/ pages, which
		   extends the sticky stack to ~140px. */
		top: 150px;
	}

	/* The tail stays 4 per row even beside the sidebar; the narrower
	   column is absorbed by making the tail cards more COMPACT (smaller
	   padding, logo, type). Scoped to the tail in the sidebar layout, so
	   the podium and the full-width (no-sidebar) view are untouched. */
	.pley-aff-layout .pley-aff-tail > .pley-aff-card {
		padding: 14px;
		gap: 0.625rem;
	}
	.pley-aff-layout .pley-aff-tail > .pley-aff-card .pley-aff-logo-tile {
		width: 3rem;
		height: 3rem;
	}
	.pley-aff-layout .pley-aff-tail > .pley-aff-card .pley-aff-name {
		font-size: 0.875rem;
	}
	.pley-aff-layout .pley-aff-tail > .pley-aff-card .pley-aff-bonus {
		padding: 0.5rem 0.75rem;
	}
	.pley-aff-layout .pley-aff-tail > .pley-aff-card .pley-aff-code {
		padding: 0.5rem 0.625rem;
	}
	.pley-aff-layout .pley-aff-tail > .pley-aff-card .pley-aff-code > span:first-child {
		font-size: 0.875rem;
	}
	.pley-aff-layout .pley-aff-tail > .pley-aff-card .pley-aff-slot-usps li {
		font-size: 0.75rem;
	}
	.pley-aff-layout .pley-aff-tail > .pley-aff-card .pley-aff-cta {
		padding: 0.625rem 1rem;
		font-size: 0.8125rem;
	}
}

/* Stacked below the cards until the sidebar goes beside them at
   >=1280px. The top gap only applies BELOW that breakpoint (scoped to a
   max-width query, so it can't leak past the layout media query and
   push the sidebar down when it sits beside the H1). When stacked, cap
   the sponsor banner so a tall vertical creative (300x600-style) can't
   stretch to the full container width - keep it its natural size,
   centred. The link lists stay full width like a footer nav. */
@media (max-width: 1279px) {
	.pley-aff-sidebar {
		margin-top: 1.5rem;
	}
	.pley-aff-block .pley-aff-side-sticky {
		max-width: 336px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Sidebar nav rows — glass tile per category, arrow slides on hover.
   Driven in CSS so named-group Tailwind variants can't ghost-fail. */




/* Plain black surface — no ambient background design. */
.pley-aff-block {
	background-color: #111111;
}

/* GEO test-preview banner — only rendered when an admin forces a country
   via ?pley_geo=XX. A thin dashed brand strip so it reads as a tool, not
   part of the page. Never reaches real visitors (the override needs
   manage_options / WP_DEBUG). */
.pley-aff-block .pley-aff-geo-preview {
	margin-bottom: 1rem;
	padding: 0.625rem 0.875rem;
	border: 1px dashed rgba(241, 136, 5, 0.6);
	border-radius: 10px;
	background: rgba(241, 136, 5, 0.07);
	color: #D2D1CE;
	font-size: 13px;
	line-height: 1.4;
}
.pley-aff-block .pley-aff-geo-preview strong { color: #ff9e2a; }
.pley-aff-block .pley-aff-geo-preview code {
	padding: 1px 5px;
	border-radius: 4px;
	background: #1D1D1B;
	color: #A2A19A;
	font-size: 12px;
}

/* Disclosure line — always subtle, never a banner. */
.pley-aff-disclosure {
	font-size: 0.625rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

/* Loading skeleton for geo-gated (gambling) categories. The cached page
   carries no partners, so the JS fills them per country - this card-shaped
   shimmer mirrors the podium (logo / name / bonus / code / CTA) so it reads
   as cards loading and the fragment swap barely shifts the layout. */
@keyframes pley-aff-shim {
	0%   { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}
.pley-aff-shim {
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg, #1a1a18 25%, #262620 37%, #1a1a18 63%);
	background-size: 300% 100%;
	animation: pley-aff-shim 1.5s ease-in-out infinite;
}
.pley-aff-skel-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 300px;
	padding: 16px;
	background: #141413;
	border: 1px solid #2a2a28;
	border-radius: 16px;
}
.pley-aff-skel-id { display: flex; align-items: center; gap: 12px; }
.pley-aff-skel-logo { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; }
.pley-aff-skel-id-lines { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.pley-aff-skel-id-lines i { height: 12px; }
.pley-aff-skel-id-lines i:first-child { width: 62%; }
.pley-aff-skel-id-lines i:last-child { width: 40%; }
.pley-aff-skel-bonus { height: 64px; border-radius: 12px; }
.pley-aff-skel-code  { height: 44px; border-radius: 12px; }
.pley-aff-skel-cta   { height: 46px; border-radius: 9999px; margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
	.pley-aff-shim { animation: none; }
}

/* Card surface — soft vertical gradient with a glass top edge and a
   deep drop shadow lifting it off the slashed background. */
.pley-aff-card {
	/* Grid/flex item default min-width is `auto` (= max-content). When the geo
	   fragment swaps cards in via innerHTML, the browser re-resolves the track
	   sizing and lets that max-content widen the column, so the offer text stops
	   wrapping (it looks right on first paint, wrong ~1s later after the swap).
	   min-width:0 forces the card to honour its `minmax(0,1fr)` track and shrink,
	   so the text always soft-wraps. */
	min-width: 0;
	background-image: linear-gradient(180deg, #1A1A18 0%, #141413 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 12px 32px rgba(0, 0, 0, 0.38);
}

/* Partner name is an <h2>; keep it white (the theme's
   `.main :is(h1,h2){color:...}` rule would otherwise recolour it). */
.pley-aff-block .pley-aff-name {
	color: #fff;
}

/* Partner logo tile — glass-gradient square with an inner highlight,
   consistent with the team logo tiles used across the Major Hub. */
.pley-aff-logo-tile {
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pley-aff-logo-tile img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* CTA — the juicy gradient conversion button: glossy top highlight,
   warm glow, gentle lift on hover. Plain CSS so it can never fall out
   of the compiled bundle. */
.pley-aff-cta {
	background: linear-gradient(135deg, #FF9A2A 0%, #F18805 55%, #E0612A 100%);
	border-radius: 32px;
	color: #fff;
	font-weight: 800;
	/* Keep the label on one line - "Claim bonus" wrapping to two rows in a
	   narrow card reads as broken. The card clips overflow as a backstop. */
	white-space: nowrap;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		0 6px 18px rgba(241, 136, 5, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
/* EDITOR CANVAS: the theme's editor.css paints every bare link
   (`.editor-styles-wrapper a { color: var(--color-brand) }`, specificity
   0-1-1) and is the LAST sheet imported into the iframe, so it outweighs both
   the rule above and Tailwind's `text-white` on the element itself (0-1-0).
   Without this the CTA renders orange-on-orange in the block editor while
   being correct on the frontend. Covers the affiliate cards and the review
   Verdict button, which share this class. */
.pley-aff-cta,
.pley-aff-cta:link,
.pley-aff-cta:visited,
.pley-aff-cta:hover,
.pley-aff-cta:focus {
	color: #fff !important;
}

.pley-aff-cta:hover {
	filter: brightness(1.06);
	color: #fff;
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		0 9px 24px rgba(241, 136, 5, 0.38);
}

/* Desktop podium + tail. Below 1024px both grids use the Tailwind
   classes on the wrapper (1 col, sm:2 col): the top 3 render as normal
   gold/silver/bronze cards in flow — no stagger, no subgrid — so it
   stays clean on tablet and mobile.

   At >=1024px:
   - PODIUM: 3 equal columns with #2 left, #1 raised center, #3 lowest
     right (via `order` + margins). Tops staggered, bottoms free.
   - TAIL: 4 EQUAL columns, so every card is exactly the same width no
     matter how many are in the last row. Subgrid keeps the sections
     (bonus / code / USPs / CTA) aligned across each row. */
@media (min-width: 1024px) {
	/* Podium: all three sit on ONE ground line (bottoms flush). The steps
	   come from a real SIZE ladder (#1 biggest, #2 medium, #3 base — see
	   the --top / --r2 sizing below), so the taller cards are filled with
	   bigger content, NOT empty space. */
	.pley-aff-podium {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: end;
	}
	.pley-aff-podium > .pley-aff-card:nth-child(1) { order: 2; } /* #1 center */
	.pley-aff-podium > .pley-aff-card:nth-child(2) { order: 1; } /* #2 left   */
	.pley-aff-podium > .pley-aff-card:nth-child(3) { order: 3; } /* #3 right  */

	/* Reserve the code row across every podium card once one of them has a
	   code, so a coded lower rank can never grow taller than a codeless
	   winner and invert the staircase. Matches a real code button's height
	   (px-4 py-3 + one line). Only on the staggered desktop podium. */
	.pley-aff-podium--has-code .pley-aff-slot-code {
		min-height: 3.25rem;
	}

	/* Reserve the USP row to the podium's MAX USP count (set as
	   --pley-aff-podium-usps on the wrapper), for the same reason: a card
	   with more USPs must not grow taller than a higher rank with fewer.
	   Each USP line is text-sm (0.875rem) x leading-snug (1.375) = 1.203rem,
	   with a 0.375rem gap between lines: N lines = N*1.578rem - 0.375rem.
	   With code + USP rows both reserved, the size ladder is the ONLY step
	   left, so #1 > #2 > #3 always holds and the bonus rows line up. */
	.pley-aff-podium--reserve-usps .pley-aff-slot-usps {
		min-height: calc(var(--pley-aff-podium-usps, 0) * 1.578rem - 0.375rem);
	}

	.pley-aff-tail {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.pley-aff-tail > .pley-aff-skel {
		min-height: 280px;
	}

	/* Row alignment across the tail — cards span 5 shared subgrid rows
	   (identity / bonus / code / USPs / CTA) so a two-line bonus never
	   pushes a neighbour's sections out of line. Falls back to plain
	   flex-column where subgrid is absent. */
	@supports (grid-template-rows: subgrid) {
		.pley-aff-tail > .pley-aff-card {
			display: grid;
			/* Explicit single full-width column — without it the subgrid
			   card's implicit `auto` column sizes to content, so a card
			   with shorter text left uneven padding on one side. */
			grid-template-columns: minmax(0, 1fr);
			grid-row: span 5;
			grid-template-rows: subgrid;
		}
	}
}

/* Bonus panel — brand-tinted offer box. Fills its shared slot row so
   panels are equally tall across the row; content is top-anchored, so
   the BONUS eyebrow and the offer text start on the same lines in
   every card and line-count differences end as air at the bottom. */
/* min-width:0 down the chain so the box can shrink below the offer text's
   width - without it the flex/grid item keeps its content width and the text
   never soft-wraps (only a manual <br> breaks it). */
.pley-aff-slot-bonus {
	display: flex;
	min-width: 0;
}
.pley-aff-bonus {
	width: 100%;
	min-width: 0;
	/* THE reservation lives on the box, not the <p>. A fixed min-height so
	   every offer box is the SAME height on every card - a 1-line offer
	   ("Free case") and a 2-line one ("20% Deposit bonus") match, mobile and
	   desktop, tail and podium. 5.6rem clears the BONUS label + two lines at
	   the largest clamp size + padding; nothing shorter can collapse below
	   it. Content is centered as a column, so a 1-line offer sits dead-centre
	   instead of clinging to the top with a gap below. (Putting min-height on
	   the <p> was unreliable - as a flex item its min-height resolved against
	   its wrapped text, so it only reserved two lines on some cards.) */
	min-height: 5.6rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(180deg, #201A11 0%, #18140E 100%);
	border: 1px solid rgba(241, 136, 5, 0.30);
}
/* ONE responsive offer-text size for EVERY card - podium tiers and tail alike
   (the size ladder still scales the name/logo per tier, just not the offer).
   clamp scales it with the viewport so it stays readable on mobile.
   It always RESERVES two lines (2 * leading-snug 1.375 = 2.75em) so a 1-line
   and a 2-line offer produce the same box height and everything below stays
   aligned. It soft-wraps and is NEVER truncated. */
.pley-aff-bonus p {
	font-size: clamp(0.9375rem, 0.86rem + 0.42vw, 1.0625rem);
	min-width: 0;
	/* The box owns the reservation + vertical centering now; the offer text
	   just centers horizontally and soft-wraps. */
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Tail (rank 4+) cards are far narrower than the podium at >=1024px (four
   per row), so the shared ~17px offer text reads oversized and wraps hard.
   Scale it down for the tail there - still responsive, growing 13px -> 15px
   as the container widens toward 1280 - and trim the box reserve to match.
   The podium (2-3 wide cards) and the mobile/tablet stack (1-2 wide cards)
   keep the larger size. */
@media (min-width: 1024px) {
	.pley-aff-tail .pley-aff-bonus p {
		font-size: clamp(0.8125rem, 0.55rem + 0.42vw, 0.9375rem);
	}
	.pley-aff-tail .pley-aff-bonus {
		min-height: 5rem;
	}
}

/* The code — one obvious click-to-copy field. Dashed brand border +
   dark inset field so it reads as "this is the coupon code". */
.pley-aff-slot-code {
	display: flex;
}
.pley-aff-code {
	background-color: #1B1B19;
	border: 1.5px dashed rgba(241, 136, 5, 0.55);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pley-aff-code:hover {
	background-color: rgba(241, 136, 5, 0.10);
	border-color: rgba(241, 136, 5, 0.85);
}

/* Star rating — two identical layers of 5 stars: a muted empty row and
   a brand-orange fill row clipped to the exact decimal percentage
   (4.2/5 -> 84% width). Same font + spacing on both layers so the clip
   lines up perfectly. */
.pley-aff-stars {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 2px;
}
.pley-aff-stars-empty {
	color: #727169;
}
.pley-aff-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #F18805;
}

/* Review link under the CTA — plain text (no box), brand accent on
   hover (icon + text light up together). */
.pley-aff-review-link {
	transition: color 0.2s ease;
}
.pley-aff-review-link:hover {
	color: #F18805;
}

/* Podium (top 3) — sold placements in the universal podium language:
   GOLD / SILVER / BRONZE (all three drawn from the plugin's existing
   wear-color palette). Conversion elements (bonus, code, CTA) stay
   brand orange; only the placement identity carries the metal. */
.pley-aff-rank--1 {
	background: linear-gradient(135deg, #FFEFA8 0%, #E9C81E 45%, #B8940A 72%, #F4D65A 100%);
	color: #151514;
}
.pley-aff-rank--2 {
	background: linear-gradient(135deg, #FBFBF9 0%, #CFCEC9 48%, #97968F 74%, #E7E6E1 100%);
	color: #151514;
}
.pley-aff-rank--3 {
	background: linear-gradient(135deg, #F3C48A 0%, #CD7F32 46%, #8A5320 74%, #E0A566 100%);
	color: #fff;
}
/* Metal frames + surfaces. #1 GOLD: full gradient frame, golden ember
   surface and a soft halo — it must catch the eye instantly. #2
   SILVER and #3 BRONZE follow with calmer frames and washes. */
.pley-aff-card--top {
	border: 2px solid transparent;
	background:
		linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.055) 50%, transparent 62%) padding-box,
		radial-gradient(130% 78% at 50% -10%, rgba(240, 205, 40, 0.26) 0%, transparent 55%) padding-box,
		linear-gradient(160deg, rgba(233, 200, 30, 0.17) 0%, rgba(233, 200, 30, 0.05) 42%, transparent 72%) padding-box,
		linear-gradient(180deg, #2B2210 0%, #17150E 55%, #121210 100%) padding-box,
		linear-gradient(135deg, #FFF3B8 0%, #EECB22 44%, #A98D08 72%, #FBE072 100%) border-box;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.13),
		0 0 72px rgba(233, 200, 30, 0.30),
		0 18px 46px rgba(0, 0, 0, 0.52);
}
.pley-aff-card--r2 {
	border: 2px solid transparent;
	background:
		linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.055) 50%, transparent 62%) padding-box,
		radial-gradient(130% 78% at 50% -10%, rgba(230, 229, 225, 0.18) 0%, transparent 55%) padding-box,
		linear-gradient(160deg, rgba(224, 223, 219, 0.16) 0%, rgba(224, 223, 219, 0.05) 42%, transparent 72%) padding-box,
		linear-gradient(180deg, #232320 0%, #161615 58%, #121211 100%) padding-box,
		linear-gradient(135deg, #FFFFFE 0%, #CFCEC9 46%, #8E8D87 74%, #EFEEE9 100%) border-box;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.11),
		0 0 58px rgba(220, 219, 215, 0.15),
		0 16px 42px rgba(0, 0, 0, 0.48);
}
.pley-aff-card--r3 {
	border: 2px solid transparent;
	background:
		linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.05) 50%, transparent 62%) padding-box,
		radial-gradient(130% 78% at 50% -10%, rgba(214, 138, 60, 0.22) 0%, transparent 55%) padding-box,
		linear-gradient(160deg, rgba(205, 127, 50, 0.19) 0%, rgba(205, 127, 50, 0.065) 42%, transparent 72%) padding-box,
		linear-gradient(180deg, #2B1E10 0%, #18140E 58%, #121210 100%) padding-box,
		linear-gradient(135deg, #FAD09A 0%, #D98A3C 44%, #8A5320 72%, #EDB474 100%) border-box;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 58px rgba(205, 127, 50, 0.22),
		0 16px 42px rgba(0, 0, 0, 0.48);
}

/* #1 is also physically BIGGER — padding, logo, name, bonus and CTA
   all step up one size, so the winner reads as the winner even in a
   thumbnail. */
.pley-aff-card--top {
	padding: 26px 22px;
	gap: 1.25rem;
}
.pley-aff-card--top .pley-aff-logo-tile {
	width: 4.75rem;
	height: 4.75rem;
}
.pley-aff-card--top .pley-aff-name {
	font-size: 1.25rem;
}
.pley-aff-card--top .pley-aff-bonus {
	border-color: rgba(241, 136, 5, 0.50);
	background: linear-gradient(180deg, #29200F 0%, #1C160D 100%);
}
.pley-aff-card--top .pley-aff-cta {
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-size: 1rem;
}

/* #2 SILVER — a middle size between the base (#3) and #1, so with the
   flush-bottom podium its top sits above #3's but below #1's, filled
   with real content rather than empty space. */
.pley-aff-card--r2 {
	padding: 20px;
	gap: 1rem;
}
.pley-aff-card--r2 .pley-aff-logo-tile {
	width: 4rem;
	height: 4rem;
}
.pley-aff-card--r2 .pley-aff-name {
	font-size: 1.0625rem;
}

/* Uniform bottom padding across the podium — the size ladder controls
   the TOP/logo/type for the staircase, but the space under the review
   link stays identical on all three cards. */
.pley-aff-card--top,
.pley-aff-card--r2,
.pley-aff-card--r3 {
	padding-bottom: 16px;
}

.pley-aff-rank {
	z-index: 2;
}

/* Verified seal — a soft green halo makes the mark pop off the dark
   card without growing the layout. */
.pley-aff-verified {
	filter: drop-shadow(0 0 6px rgba(78, 186, 0, 0.45));
}

/* #2 — the award label now lives ONLY in the comparison table's
   "Best for" column, so the conversion cards stay clean. */

/* #3 — comparison table. Scannable, horizontally scrollable on narrow
   screens; complements the cards (fees / payout / payments, not bonus). */
.pley-aff-block .pley-aff-compare-title { margin-bottom: 1rem; }
.pley-aff-block .pley-aff-compare-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	border: 1px solid #2D2D2A;
	border-radius: 12px;
}
.pley-aff-block table.pley-aff-compare {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 14px;
}
.pley-aff-block .pley-aff-compare thead th {
	padding: 0.75rem 1rem;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #A2A19A;
	background: #1D1D1B;
	border-bottom: 1px solid #2D2D2A;
	white-space: nowrap;
}
.pley-aff-block .pley-aff-compare tbody th,
.pley-aff-block .pley-aff-compare tbody td {
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 400;
	color: #D2D1CE;
	vertical-align: top;
	border-bottom: 1px solid #222220;
}
.pley-aff-block .pley-aff-compare tbody tr:last-child th,
.pley-aff-block .pley-aff-compare tbody tr:last-child td { border-bottom: 0; }
.pley-aff-block .pley-aff-compare tbody tr:nth-child(even) th,
.pley-aff-block .pley-aff-compare tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }
.pley-aff-block th.pley-aff-compare-site {
	min-width: 170px;
}
.pley-aff-block .pley-aff-compare-site-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}
.pley-aff-block .pley-aff-compare-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #272725;
	overflow: hidden;
	color: #ff9e2a;
	font-size: 12px;
	font-weight: 700;
}
.pley-aff-block .pley-aff-compare-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pley-aff-block .pley-aff-compare-name { color: #fff; font-weight: 600; }
.pley-aff-block .pley-aff-compare-award { color: #ff9e2a; font-weight: 600; }
.pley-aff-block .pley-aff-compare-rating { color: #fff; font-weight: 700; white-space: nowrap; }
.pley-aff-block .pley-aff-compare-dash { color: #52514C; }
.pley-aff-block td.pley-aff-compare-action { text-align: right; white-space: nowrap; }
.pley-aff-block .pley-aff-compare-cta {
	display: inline-block;
	padding: 0.4rem 1.1rem;
	border: 1px solid #F18805;
	border-radius: 9999px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s;
}
.pley-aff-block .pley-aff-compare-cta:hover { background: #F18805; color: #fff; }

/* Sidebar sections (More guides + Useful tools). PLEY-native, matching the
   theme's own sidebars: an uppercase white heading, then a quiet divided
   list of text links. No icon tiles, no chevrons, no boxes; hover warms to
   brand with a small indent. */
.pley-aff-block .pley-aff-sidebar { gap: 1rem; }
.pley-aff-block .pley-aff-side-sec {
	background: #151514;
	border: 1px solid #272725;
	border-radius: 16px;
	padding: 16px 18px;
}
.pley-aff-block .pley-aff-side-heading {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
}
.pley-aff-block .pley-aff-side-list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.pley-aff-block .pley-aff-side-list li + li {
	border-top: 1px solid #222220;
}
.pley-aff-block .pley-aff-side-link {
	display: block;
	padding: 12px 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: #A2A19A;
	text-decoration: none;
	transition: color 0.2s ease;
}
/* PLEY standard link hover: muted text brightens to white (duration-200). */
.pley-aff-block .pley-aff-side-link:hover {
	color: #fff;
}

/* Tighten the gap between the pinned game sub-nav and the first block.
   The theme reserves lg:mt-28 (112px) on <main> to clear the sub-nav, but
   it over-reserves and leaves a large gap above the top banner. This
   stylesheet only loads on affiliate pages, so trimming main's top margin
   here is scoped to them; 4rem still clears the ~60px sub-nav. */
@media (min-width: 1024px) {
	main.main { margin-top: 4rem; }
}

/* Sponsor banner corners: 16px on desktop (unchanged), trimmed on mobile
   where a short full-width banner looks over-rounded. Mobile-only query so
   the finalised desktop radius is never touched. */
.pley-aff-block .pley-aff-banner-img { border-radius: 16px; }
@media (max-width: 639px) {
	.pley-aff-block .pley-aff-banner-img { border-radius: 8px; }
}

/* Podium row-reservation placeholders (invisible bonus / review spacers)
   only earn their keep when the three cards sit side by side - i.e. the
   staggered podium at >=1024px. Below that the podium stacks one per row
   (lg:grid-cols-3), where a reserved empty box would just be dead space,
   so drop them entirely on the stacked mobile / tablet view. */
@media (max-width: 1023px) {
	.pley-aff-block .pley-aff-reserve-ph { display: none !important; }
}