/* =====================================================================
 * Gamereactor facelift — component layer
 *
 * Phase 3. Every rule is scoped under body.gr-next, which
 * grc_next_enabled() withholds, so this file matches nothing until an
 * edition is switched on. Values come from gr-tokens.css; a literal in
 * here is a bug unless it is commented as a deliberate exception.
 *
 * BUILT AGAINST THE EXISTING MARKUP, not the artboards'. The handoff's
 * own instruction was not to copy artboard markup, and it turned out
 * not to be needed: single.php already emits .gr-post-hero, .gr-body,
 * .gr-side and .gr-feature under the same names the artboards use, so
 * Editorial is a restyle rather than a re-markup.
 * ===================================================================== */

/* --- Post ------------------------------------------------------------
 * Three differences from what ships today, and nothing else:
 *
 *   main column   minmax(0,800px)  ->  minmax(0,1fr) inside the 1132 wrap
 *   column gap    32px             ->  40px
 *   collapse      1040px           ->  900px  (the new breakpoint set)
 *
 * .gr-feature is deliberately absent. The canonical overlap was settled
 * as margin-bottom:-70px in Post's direction, and the live rule is
 * already block-size:300px; margin-block-end:-70px — the same value and
 * the same direction. Restating it would add a rule that changes
 * nothing and invite the two copies to drift.
 * ------------------------------------------------------------------- */

/* EVERY WRAP, NOT TWO OF THEM.
 *
 * This first targeted .gr-wrap and .gr-post-wrap only, which was a bug
 * with two visible symptoms. The theme has four wrap classes and the
 * Editorial templates mix them: single.php wraps its body in
 * .gr-post-wrap but its review hero in .grc-wrap, while archive.php and
 * author.php use .grc-wrap throughout.
 *
 * So a review page rendered its hero at --grc-max (1300px) and the
 * article beneath it at 1132px — a 168px step between two stacked bands,
 * which reads as broken rather than as a narrower column. And Archive and
 * Author never narrowed at all, because nothing on them matched.
 *
 * .hr-wrap is included so the homepage and gambling templates move with
 * everything else once their families are built; a switched-on edition
 * with two content widths is the same fault in a different place. */
.gr-next .gr-wrap,
.gr-next .gr-post-wrap,
.gr-next .grc-wrap,
.gr-next .hr-wrap {
	/*
	 * BORDER-BOX, AND THE MAX-WIDTH CARRIES THE GUTTERS.
	 *
	 * MEASURED: with content-box the wrap rendered 422px inside a 390px
	 * viewport — 390 of content plus 2 x 16 of padding — which is exactly
	 * the horizontal scroll the handoff's QA list forbids ("no horizontal
	 * scroll at 390px"). It was on the homepage, the post and the review.
	 *
	 * The handoff's contract says border-box, and border-box is also what
	 * stops the overflow: the box can never exceed the space it is given.
	 * The max-width then has to carry the gutters itself — 1132 of content
	 * plus 32 of padding — so desktop keeps the 1132px column the artboards
	 * were drawn and QA'd against while mobile stays inside the viewport.
	 */
	max-inline-size: calc(var(--gr-wrap) + (var(--gr-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gr-gutter);
	box-sizing: border-box;
}

/* BOTH GRID CLASSES. Verified in the browser: single.php uses .gr-body,
   but archive.php and author.php use .grc-arch-grid and have no .gr-body
   at all — so this rule reached one template of three and Archive and
   Author kept the theme's fixed 800px main column and 32px gap. Same
   mistake as the wrap: a class that looked shared and was not. */
.gr-next .gr-body,
.gr-next .grc-arch-grid {
	grid-template-columns: minmax(0, 1fr) var(--gr-rail);
	gap: var(--gr-space-10);
}

@media (max-width: 980px) {
	.gr-next .gr-body,
	.gr-next .grc-arch-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Type and colour come from the tokens, so the article reads the same
   here as it will everywhere else once the other families land. */
.gr-next .gr-post-title {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-display);
	letter-spacing: var(--gr-track-display);
	color: var(--gr-ink);
}

.gr-next .gr-article-body {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-16);
	color: var(--gr-ink);
}

.gr-next .gr-post-meta {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-13);
	color: var(--gr-ink-meta);
}

.gr-next .gr-article-body a {
	color: var(--gr-link);
}
.gr-next .gr-article-body a:hover {
	color: var(--gr-link-hover);
}

/* --- Review ----------------------------------------------------------
 * The shell needs nothing: single.php's review variant uses the same
 * .gr-body / .gr-side / .gr-wrap the Post rules above already cover, so
 * Review inherits the 1132 wrap, the 300px rail, the 40px gap and the
 * 900px collapse without a line of its own.
 *
 * What is review-specific is not shared vocabulary. The artboard draws
 * .gr-headgrid and .gr-verdict; the theme ships grc-rev-* (hero, cover,
 * facts, chips, headline, head). Rather than rename live markup to match
 * an artboard — which the handoff itself says not to do — the grc-rev-*
 * components are restyled in place onto the tokens.
 *
 * .gr-feature is NOT restated here either — but the reason recorded
 * earlier was wrong and is corrected here.
 *
 * The live theme sets block-size:500px / margin-block-end:-150px at base
 * and block-size:300px / -70px under max-width:760px. Those are a
 * RESPONSIVE PAIR, not two competing declarations; the artboards carry the
 * same pair and it was misread as a duplicate whose first half was dead.
 * Nothing was built on the misreading, because no .gr-feature rule was
 * ever written — the live pair is intact and computes to -150px on
 * desktop, which is correct.
 *
 * Outstanding: that 760px step belongs on the 640/900 set. Moving it
 * changes where the overlap shrinks, so it is left for the responsive
 * pass rather than slipped in here.
 * ------------------------------------------------------------------- */

/* h1.grc-rev-title is the review headline — confirmed in the browser,
   not inferred from the class name. .grc-rev-headline is a <header>
   wrapper and .grc-rev-headline-main is 13px meta inside it; both were
   being given display weight and display tracking here purely because
   their names read like a headline. The review variant also does not use
   .gr-post-title, so the Post rule never reached it. */
.gr-next .grc-rev-title {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-display);
	letter-spacing: var(--gr-track-display);
	line-height: 1.08;
	color: var(--gr-ink);
	text-wrap: balance;
}

.gr-next .grc-rev-standfirst {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-17);
	line-height: var(--gr-lh-body);
	color: var(--gr-ink-meta);
	text-wrap: pretty;
}

.gr-next .grc-rev-headline-meta,
.gr-next .grc-rev-author {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-13);
	color: var(--gr-ink-meta);
}

.gr-next .grc-rev-facts {
	font-family: var(--gr-font-ui);
	font-size: var(--gr-fs-13);
	color: var(--gr-ink);
}

.gr-next .grc-rev-hero {
	background: var(--gr-surface-dark);
	color: var(--gr-ink-inverse);
}
.gr-next .grc-rev-hero .grc-rev-headline-meta {
	color: var(--gr-ink-on-dark);
}

.gr-next .grc-rev-cover {
	border-radius: var(--gr-radius-1);
}

/* --- Archive: shell only --------------------------------------------
 * The wrap and rail are shared and are covered above. The rest of the
 * artboard — a lead block, a three-up story grid and day-grouped rows —
 * has NO counterpart in the theme, which renders a flat grc-rows list.
 * Those need markup, not styling, so they are not stubbed here: an empty
 * .gr-stories rule that matches nothing on a live page is worse than no
 * rule, because it reads as done.
 * ------------------------------------------------------------------- */

.gr-next .grc-arch-title {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-display);
	letter-spacing: var(--gr-track-display);
	color: var(--gr-ink);
}

.gr-next .grc-arch-desc {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-14);
	color: var(--gr-ink-meta);
}

.gr-next .grc-row-title {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-medium);
	color: var(--gr-ink);
}

.gr-next .grc-row-meta,
.gr-next .grc-row-author {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-12);
	color: var(--gr-ink-meta);
}

.gr-next .grc-row {
	border-block-end: 1px solid var(--gr-line);
}

/* Day heading on an archive. Emitted by archive.php only when the day
   carries grc_archive_day_min() posts or more — see the note there for
   why a flat grouping was wrong on this network. */
.gr-next .grc-rows-day {
	margin: var(--gr-space-6) 0 var(--gr-space-2);
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-semi);
	font-size: var(--gr-fs-12);
	letter-spacing: var(--gr-track-caps);
	text-transform: uppercase;
	color: var(--gr-ink-meta);
	padding-block-end: var(--gr-space-2);
	border-block-end: 1px solid var(--gr-line);
}
.gr-next .grc-rows-day:first-child { margin-block-start: 0; }

/* --- Author ----------------------------------------------------------
 * The live template already carries what the artboard draws: a portrait
 * card with name, role and socials, the favourites panels, the article
 * count, and the same grc-rows list archive.php uses. So this is type,
 * colour and one measurement — not new structure.
 *
 * The portrait goes 140px -> 132px, the artboard's .gr-hero column.
 * ------------------------------------------------------------------- */

.gr-next .grc-authorcard-portrait {
	inline-size: 132px;
	block-size: 132px;
}

.gr-next .grc-authorcard-name {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-display);
	letter-spacing: var(--gr-track-display);
	color: var(--gr-ink);
}

.gr-next .grc-authorcard-role {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-semi);
	font-size: var(--gr-fs-11);
	letter-spacing: var(--gr-track-caps);
	text-transform: uppercase;
	color: var(--gr-ink-meta);
}

.gr-next .grc-authorbio {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-14);
	color: var(--gr-ink);
}

.gr-next .grc-panel-title {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-semi);
	font-size: var(--gr-fs-12);
	letter-spacing: var(--gr-track-caps);
	text-transform: uppercase;
	color: var(--gr-ink-meta);
}

/* --- Lead + three-up ------------------------------------------------
 * parts/rows-lead.php, shared by archive.php and author.php. Geometry is
 * the artboards': the lead splits 1.35fr / 1fr with a 28px gap, the grid
 * is three equal columns at 20px/18px. Collapse follows the 640/900 set,
 * not the artboards' own 900/620.
 * ------------------------------------------------------------------- */

.gr-next .grc-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--gr-space-6) 28px;
	align-items: center;
	margin-block-end: var(--gr-space-8);
}
.gr-next .grc-lead-media img,
.gr-next .grc-story-media img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	border-radius: var(--gr-radius-1);
}
.gr-next .grc-lead-text {
	display: flex;
	flex-direction: column;
	gap: var(--gr-space-2);
	min-inline-size: 0;
}
.gr-next .grc-lead-eyebrow {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-semi);
	font-size: var(--gr-fs-11);
	letter-spacing: var(--gr-track-caps);
	text-transform: uppercase;
	color: var(--gr-accent);
	text-decoration: none;
}
.gr-next .grc-lead-title {
	margin: 0;
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-display);
	font-size: var(--gr-fs-30);
	line-height: 1.12;
	letter-spacing: var(--gr-track-display);
	text-wrap: balance;
}
/* On the element as well as the link: the heading itself computed to
   rgb(68,68,68) from an inherited rule, which only went unnoticed because
   the visible text happens to be wrapped in the anchor. */
.gr-next .grc-lead-title,
.gr-next .grc-lead-title a { color: var(--gr-ink); text-decoration: none; }
.gr-next .grc-lead-stand {
	margin: 0;
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-16);
	color: var(--gr-ink-meta);
	text-wrap: pretty;
}

.gr-next .grc-stories {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 18px;
	margin-block-end: var(--gr-space-8);
}
.gr-next .grc-story {
	display: flex;
	flex-direction: column;
	gap: var(--gr-space-2);
	min-inline-size: 0;
}
.gr-next .grc-story-title {
	margin: 0;
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-medium);
	font-size: var(--gr-fs-16);
	line-height: 1.25;
	text-wrap: pretty;
}
.gr-next .grc-story-title a { color: var(--gr-ink); text-decoration: none; }

@media (max-width: 980px) {
	.gr-next .grc-lead { grid-template-columns: minmax(0, 1fr); }
	.gr-next .grc-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.gr-next .grc-stories { grid-template-columns: minmax(0, 1fr); }
	.gr-next .grc-lead-title { font-size: var(--gr-fs-22); }
}

/* --- Article prose ---------------------------------------------------
 * Derived from the artboards' inline styles rather than their classes.
 * 84% of the artboards' styling sits in style="" attributes with no class
 * to map — the .gr- classes carry layout only — so the components below
 * come from clustering repeated (tag, style) signatures and naming what
 * recurs. Every value resolves to a token; where the artboards' literal
 * had no token, one was added rather than the literal inlined here.
 *
 * ARTICLE HEADINGS ARE SET AT 20px, WHICH IS A DECISION, NOT A COPY.
 * The artboards give the same component four sizes — Post 17.6px,
 * Money Page 18px, Default Page 19px, Review 22px — over a 17px body. At
 * Post's 17.6px a heading clears the paragraph it introduces by 0.6px,
 * which is not a heading. The previous visual-refresh handoff diagnosed
 * this exact problem in the live theme ("17.6px/600 above 16px body ...
 * which is why articles read as one undifferentiated block") and it has
 * been reproduced here, slightly worse.
 *
 * 20px is chosen because it already appears as an h2 size in Post, Review
 * and Default Page, so it is the artboards' own value rather than an
 * invention, and it gives 3px of clearance over the body. One line to
 * change if the design side wants the per-template sizes back.
 * ------------------------------------------------------------------- */

.gr-next .gr-article-body {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-17);
	line-height: var(--gr-lh-body);
	color: var(--gr-ink-body);
}

.gr-next .gr-article-body p {
	margin: 0 0 var(--gr-space-5);
	text-wrap: pretty;
}

.gr-next .gr-article-body h2,
.gr-next .gr-article-body h3 {
	margin: var(--gr-space-8) 0 var(--gr-space-3);
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-semi);
	font-size: var(--gr-fs-20);
	line-height: var(--gr-lh-tight);
	color: var(--gr-ink);
	text-wrap: balance;
}
.gr-next .gr-article-body h3 { font-size: var(--gr-fs-18); }

.gr-next .gr-article-body ul,
.gr-next .gr-article-body ol {
	margin: 0 0 var(--gr-space-5);
	padding-inline-start: var(--gr-space-5);
}
.gr-next .gr-article-body li { margin-block-end: var(--gr-space-2); }

.gr-next .gr-article-body blockquote {
	margin: var(--gr-space-6) 0;
	padding-inline-start: var(--gr-space-4);
	border-inline-start: 4px solid var(--gr-ink);
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-medium);
	font-size: var(--gr-fs-20);
	line-height: 29px;
	color: var(--gr-ink);
}

/* --- Shared editorial atoms -----------------------------------------
 * Each of these recurs across the Editorial artboards, so they are named
 * once here rather than restated per template.
 * ------------------------------------------------------------------- */

/* Uppercase eyebrow / section label. Outfit 600, 0.12em, caps. */
.gr-next .grc-lead-eyebrow,
.gr-next .grc-row-tag,
.gr-next .grc-panel-title,
.gr-next .grc-authorcard-role {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-semi);
	font-size: var(--gr-fs-11);
	letter-spacing: var(--gr-track-label);
	text-transform: uppercase;
}

/* Byline meta, and the 4px dot the artboards separate it with. */
.gr-next .grc-card-meta {
	display: inline-flex;
	align-items: center;
	gap: var(--gr-space-2);
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-12);
	color: var(--gr-ink-meta);
}
.gr-next .grc-byline { color: var(--gr-ink-meta); }
.gr-next .gr-post-dot {
	inline-size: 4px;
	block-size: 4px;
	border-radius: var(--gr-radius-round);
	background: var(--gr-ink-meta);
	flex-shrink: 0;
}

/* --- Cards and rows --------------------------------------------------
 * The row is the workhorse: parts/list-row.php renders it on archive.php,
 * author.php and the game hub, 50 to a page. Its media panel sits on the
 * dark ground in the artboards (rgb(24,23,21), overflow hidden) and its
 * meta runs 12px Arial — smaller than Post and Review's 14.3px on-dark
 * meta, which is a genuine difference between a list row and an article
 * byline rather than a slip, so both are kept.
 * ------------------------------------------------------------------- */

.gr-next .grc-row-media {
	background: var(--gr-surface-dark);
	overflow: hidden;
	border-radius: var(--gr-radius-1);
}
.gr-next .grc-row-media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--gr-dur) var(--gr-ease);
}
.gr-next .grc-row:hover .grc-row-media img { transform: scale(1.02); }

.gr-next .grc-row-body {
	display: flex;
	flex-direction: column;
	gap: var(--gr-space-2);
	min-inline-size: 0;
}
.gr-next .grc-row-title a { color: var(--gr-ink); text-decoration: none; }
.gr-next .grc-row-title a:hover { text-decoration: underline; text-underline-offset: 2px; }

.gr-next .grc-row-meta,
.gr-next .grc-row-author {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-12);
	color: var(--gr-ink-meta);
}
.gr-next .grc-row-dot {
	inline-size: 4px;
	block-size: 4px;
	border-radius: var(--gr-radius-round);
	background: var(--gr-ink-meta);
	flex-shrink: 0;
}

.gr-next .grc-story-media,
.gr-next .grc-lead-media {
	display: block;
	background: var(--gr-surface-dark);
	overflow: hidden;
	border-radius: var(--gr-radius-1);
}
.gr-next .grc-story-media img { transition: transform var(--gr-dur) var(--gr-ease); }
.gr-next .grc-story:hover .grc-story-media img { transform: scale(1.02); }

/* --- Review verdict --------------------------------------------------
 * PROS AND CONS ARE NOT COLOUR-CODED HERE, AND THAT IS DELIBERATE.
 *
 * The artboards set the pros label in rgb(25,118,210) — the accent — and
 * the cons label in rgb(185,181,176), a grey. Two problems with copying
 * that. The accent was fixed as "interactive, selected, current" when the
 * one-blue decision was made, so spending it on "this is a good thing"
 * gives it a second meaning on the one page where a reader is scanning
 * for a verdict. And a grey label reads as disabled rather than negative.
 *
 * The live template already separates the two the better way: it renders
 * icon-verdict-like.svg and icon-verdict-dislike.svg through
 * .grc-verdict-icon, so the distinction is carried by a mark rather than
 * by hue alone — which is also the accessible form, since colour is not
 * the only channel. Both labels therefore take the same ink and the
 * icons do the work.
 *
 * Tracking is 0.12em, the eyebrow value, not the artboards' 0.14em. That
 * 0.14em appears only on these two labels and would be a third tracking
 * value in a system that already has 0.1em and 0.12em.
 * ------------------------------------------------------------------- */

/* The first pass gave this a near-white ground on a white page plus a 2px
   rule, which is not a block — it was invisible. A verdict is the thing a
   reader scrolls to on a review, so it gets an actual edge. */
.gr-next .grc-verdict {
	background: var(--gr-surface-sub);
	border: 1px solid var(--gr-line);
	border-block-start: 3px solid var(--gr-accent);
	padding: var(--gr-space-6) var(--gr-space-5);
	border-radius: var(--gr-radius-1);
}
.gr-next .grc-verdict-head {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-bold);
	font-size: var(--gr-fs-11);
	letter-spacing: var(--gr-track-label);
	text-transform: uppercase;
	color: var(--gr-ink);
}
.gr-next .grc-verdict-cols {
	display: grid;
	gap: var(--gr-space-6);
	align-items: start;
}
.gr-next .grc-verdict-icon {
	inline-size: 16px;
	block-size: 16px;
	flex-shrink: 0;
}
.gr-next .grc-verdict-locale {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-12);
	color: var(--gr-ink-meta);
}

@media (max-width: 620px) {
	.gr-next .grc-verdict-cols { grid-template-columns: minmax(0, 1fr); }
}

/* --- Home ------------------------------------------------------------
 * The homepage already speaks the artboards' vocabulary with an hr-
 * prefix: .hr-3 / .hr-4 / .hr-5 are the artboards' .gr-3 / .gr-4 / .gr-5,
 * and .hr-rail-x is .gr-rail-x under the same name. So this is gaps and
 * rail geometry, not new structure.
 *
 * The one real difference is the gap. The theme runs a single --hr-gap of
 * 12px across every grid; the artboards vary it by column count — 22/18
 * at three, 16 at four and five, 20 at two. Wider columns get more air.
 * Applied per grid rather than by redefining --hr-gap, which is used
 * elsewhere in the theme and not ours to move.
 * ------------------------------------------------------------------- */

.gr-next .hr-3 { gap: 22px 18px; }
.gr-next .hr-4 { gap: var(--gr-space-4); }
.gr-next .hr-5 { gap: var(--gr-space-4); }

/* The horizontal rail: the artboards fix cards at 264px and snap, where
   the theme sizes them at 62% of the viewport on narrow screens only. */
.gr-next .hr-rail-x {
	gap: 18px;
	scroll-snap-type: x mandatory;
	padding-block-end: 6px;
	scrollbar-width: thin;
}
.gr-next .hr-rail-x > * { flex: 0 0 264px; scroll-snap-align: start; }
.gr-next .hr-rail-x::-webkit-scrollbar { height: 6px; }
.gr-next .hr-rail-x::-webkit-scrollbar-thumb { background: var(--gr-grey-400); }

/* .hr-articles is the artboards' .gr-split: main column over a 300px
   rail. The theme flexes it with a 32px gap; the artboards grid it at 40,
   which is the same figure Post and Review use, so the homepage column
   lines up with the article pages rather than sitting 8px tighter. */
.gr-next .hr-articles {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--gr-rail);
	gap: var(--gr-space-10);
	align-items: start;
}

@media (max-width: 980px) {
	.gr-next .hr-articles { grid-template-columns: minmax(0, 1fr); }
	.gr-next .hr-3,
	.gr-next .hr-4,
	.gr-next .hr-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.gr-next .hr-3,
	.gr-next .hr-4,
	.gr-next .hr-5 { grid-template-columns: minmax(0, 1fr); }
	.gr-next .hr-rail-x > * { flex: 0 0 72%; }
}

/* Module headers and the hero sub take the type system. */
.gr-next .hr-bh-h {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-display);
	font-size: var(--gr-fs-16);
	letter-spacing: var(--gr-track-caps);
	text-transform: uppercase;
	color: var(--gr-ink);
}
.gr-next .hr-dark .hr-bh-h { color: var(--gr-ink-inverse); }
.gr-next .hr-rule { background: var(--gr-accent); }
.gr-next .hr-hero-sub {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-bold);
	letter-spacing: var(--gr-track-display);
	color: var(--gr-ink-inverse);
}
.gr-next .hr-hero-lede { color: var(--gr-ink-on-dark); }
.gr-next .hr-all {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-semi);
	font-size: var(--gr-fs-12);
	letter-spacing: var(--gr-track-caps);
	text-transform: uppercase;
	border-color: var(--gr-line);
	color: var(--gr-ink);
	border-radius: var(--gr-radius-0);
}
.gr-next .hr-dark .hr-all { border-color: var(--gr-line-dark); color: var(--gr-ink-inverse); }

/* --- Catalogue, Video and Search: already covered -------------------
 * games-archive.php, archive-gr_video.php and search.php all render
 * through grc-arch / grc-arch-grid / grc-arch-main / grc-arch-title, the
 * same shell archive.php uses, so the Archive rules above reach them
 * unchanged. taxonomy-gr_game.php uses .gr-body and .gr-post-wrap and is
 * covered by the Post rules. Nothing is restated for them here — a
 * duplicate rule per template is how a shared shell stops being shared.
 * ------------------------------------------------------------------- */

/* --- Default Page (page.php) ---------------------------------------- */

.gr-next .grc-doc-title {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-display);
	letter-spacing: var(--gr-track-display);
	color: var(--gr-ink);
	text-wrap: balance;
}
.gr-next .grc-doc-intro {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-17);
	line-height: var(--gr-lh-body);
	color: var(--gr-ink-meta);
	text-wrap: pretty;
}
.gr-next .grc-doc-body {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-17);
	line-height: var(--gr-lh-body);
	color: var(--gr-ink-body);
}
/* The artboards measure long-form at 680px, roughly 75 characters. The
   theme's own .grc-doc-measure is the same idea under another name. */
.gr-next .grc-doc-measure { max-inline-size: 680px; }
.gr-next .grc-doc-hero { background: var(--gr-surface-dark); }
.gr-next .grc-doc-hero .grc-doc-title { color: var(--gr-ink-inverse); }
.gr-next .grc-doc-hero .grc-doc-intro { color: var(--gr-ink-on-dark); }

/* --- Money Page (single-gambling.php) -------------------------------
 * Only the chrome. Operator rows, offer text and their CTAs belong to
 * the commercial plugin and are explicitly out of scope — no rule here
 * selects them, and none should be added.
 * ------------------------------------------------------------------- */

.gr-next .grc-cm-hero { background: var(--gr-surface-dark); }
.gr-next .grc-cm-hero-inner {
	max-inline-size: var(--gr-wrap);
	margin-inline: auto;
	padding-inline: var(--gr-gutter);
	box-sizing: content-box;
}

/* --- 404 ------------------------------------------------------------- */

/* .grc-404-ghost, not .grc-404-code. Both exist in 404.php but only the
   ghost is rendered on a live 404 — checked in the browser rather than
   read off the template, which is how the first version of this rule
   ended up styling an element nobody sees. */
.gr-next .grc-404-ghost,
.gr-next .grc-404-code {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-display);
	font-size: var(--gr-fs-104);
	line-height: 0.9;
	letter-spacing: var(--gr-track-display);
	color: var(--gr-line);
}
.gr-next .grc-404-title {
	font-family: var(--gr-font-ui);
	font-weight: var(--gr-w-display);
	font-size: var(--gr-fs-34);
	letter-spacing: var(--gr-track-display);
	color: var(--gr-ink);
	text-wrap: balance;
}
.gr-next .grc-404-body {
	font-family: var(--gr-font-body);
	font-size: var(--gr-fs-17);
	line-height: var(--gr-lh-body);
	color: var(--gr-ink-meta);
}

@media (max-width: 620px) {
	.gr-next .grc-404-ghost,
	.gr-next .grc-404-code { font-size: var(--gr-fs-64); }
	.gr-next .grc-404-title { font-size: var(--gr-fs-26); }
}

/* --- Facelift hero ---------------------------------------------------
 * The background is the theme's own bg-hero.svg, positioned exactly as
 * .grc-rev-hero-bg / .grc-doc-hero-bg / .grc-cm-hero-bg already position
 * it, so every hero on the site carries the same effect rather than the
 * homepage having one of its own. The artboard's hero-bg-clean.svg was
 * dropped by the exporter; this is the device already implemented here.
 * ------------------------------------------------------------------- */
.gr-next .gn-hero-bg {
	position: absolute;
	inset: 0;
	background: url('../img/bg-hero.svg') right center / auto 100% no-repeat;
	pointer-events: none;
}

/* REMOVED on instruction: the 2px accent rule that sat above the four-up
   strip. The hero already separates the lead from the strip by spacing and
   by type size, and the rule was the only horizontal decorator inside a
   dark band anywhere on the site. The padding stays — it is what holds the
   strip off the lead, and the rule was never carrying that. */
.gr-next .gn-hero-strip {
	padding-block-start: 22px;
}

/* The post hero's background layer ships display:none. Every other hero
   draws it, so the article hero was the odd one out. */
.gr-next .gr-post-hero-bg {
	display: block;
	position: absolute;
	inset: 0;
	background: url('../img/bg-hero.svg') right center / auto 100% no-repeat;
	pointer-events: none;
}
.gr-next .gr-post-hero { position: relative; }
.gr-next .gr-post-hero > *:not(.gr-post-hero-bg) { position: relative; z-index: 1; }

/* Rail scroll buttons — the artboard's 32px squares. A <button>, not the
   artboard's clickable <div>: it is a control, and it has to be reachable
   from the keyboard. */
.gr-next .gn-railbtn {
	inline-size: 32px; block-size: 32px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--gr-line-soft);
	background: transparent;
	color: var(--gr-ink);
	cursor: pointer;
	padding: 0;
	transition: var(--gr-dur) var(--gr-ease);
}
.gr-next .gn-railbtn:hover,
.gr-next .gn-railbtn:focus-visible {
	background: var(--gr-accent);
	border-color: var(--gr-accent);
	color: var(--gr-ink-inverse);
}

/* Comparison guide card — the artboard's hover state, which an inline
   style cannot express. */
.gr-next .gn-guidecard { transition: var(--gr-transition, border-color 140ms ease-out, background-color 140ms ease-out); text-decoration: none; }
.gr-next .gn-guidecard:hover,
.gr-next .gn-guidecard:focus-visible { border-color: var(--gr-accent) !important; background: rgb(250,252,255); }

/* The games panels carry an inline display:grid, and an inline style beats
   a stylesheet rule — so the [hidden] attribute did nothing and all three
   tabs rendered stacked, 27 rows at once. !important is the correct tool
   here: it is the only way a stylesheet can override an inline display. */
.gr-next .gn-gpanel[hidden] { display: none !important; }

/* Rail: hide the browser scrollbar. The rail is driven by its own buttons
   and still scrolls by touch and by keyboard, so the bar is chrome the
   design does not want — the artboard styles a thin one, but on a real
   page it sits under the cards and reads as a stray rule.
   overflow-x stays auto so the scrolling itself is untouched. */
.gr-next .gr-rail-x {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gr-next .gr-rail-x::-webkit-scrollbar { display: none; height: 0; }

/* Breathing room between the reviews rail and the games panel below it. */
.gr-next .gn-gamedb-gap { margin-block-start: var(--gr-space-10); }

/* --- Games panel on small screens -----------------------------------
 * Three faults the artboard's desktop-pinned frame could not show:
 *
 * 1. The tab row wrapped. flex-wrap:wrap put "Upcoming games next month"
 *    on its own second line, so the panel had a two-storey header and the
 *    active underline sat away from the other two. A tab row scrolls; it
 *    does not wrap.
 * 2. The grid stayed three columns, which truncated nearly every title
 *    to "Gears of ..." at 390px.
 * 3. grid-auto-flow:column with three fixed rows meant a narrower grid
 *    silently dropped rows rather than reflowing them — the panel showed
 *    items 4-9 and hid 1-3.
 * ------------------------------------------------------------------- */

.gr-next .gr-tabs-x {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gr-next .gr-tabs-x::-webkit-scrollbar { display: none; height: 0; }

@media (max-width: 980px) {
	.gr-next .gn-gpanel {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-rows: auto !important;
		grid-auto-flow: row !important;
	}
}
@media (max-width: 620px) {
	.gr-next .gn-gpanel {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	/* The rail cards are 264px on desktop; that is most of a phone's
	   width with nothing beside it, so they narrow and the next card
	   peeks in to show the rail scrolls. */
	.gr-next .gr-rail-x > * { flex: 0 0 74%; }
	.gr-next .gn-railbtn { inline-size: 44px; block-size: 44px; }
}

/* Rail buttons on the dark Watch ground. */
.gr-next .gn-railbtn--dark { border-color: var(--gr-line-dark); color: var(--gr-ink-inverse); }
.gr-next .gn-railbtn--dark:hover,
.gr-next .gn-railbtn--dark:focus-visible { background: var(--gr-blue-400); border-color: var(--gr-blue-400); }

.gr-next .gn-vpanel[hidden] { display: none !important; }

/* The trust band closes the page and the footer follows it directly.
   .hr-page carries a 48px bottom padding that left a white gap between
   them — fine when the last block was a normal section, wrong when the
   last block is a full-bleed band. */
.gr-next .hr-page { padding-block-end: 0; }
/* MEASURED: the trust band ends at 5507 and the footer starts at 5537 —
   a 30px margin-top on #mainfooter, not padding on the page. The band is
   meant to run into the footer, so the margin goes under the facelift. */
.gr-next #mainfooter { margin-block-start: 0; }

/* --- Post: article prose ---------------------------------------------
 * The artboard sets the body copy itself, not just the shell: 17px/27px
 * Arial at rgb(45,45,45), section headings at 17.6px Outfit 600, and a
 * pull quote that is a 4px accent rule rather than a box.
 *
 * These are the only rules in this file that reach INSIDE the_content().
 * They are scoped to .gr-next .gr-article-body so editorial markup in the
 * un-gated theme is untouched, and they set type only — no widths, no
 * floats, no margins on embeds — because the body carries fifteen years
 * of hand-placed galleries, iframes and tables that any layout rule here
 * would reflow.
 * ------------------------------------------------------------------- */
.gr-next .gr-article-body p {
	font-family: Arial, sans-serif;
	font-size: 17px;
	line-height: 27px;
	color: rgb(45, 45, 45);
	text-wrap: pretty;
}
/*
 * QA 1 — "design looks strange" on /gambling/how-we-rate/.
 *
 * The cause is two rules in THIS FILE fighting, and the wrong one winning.
 * Line ~414 is the design-system rule: token sizes, and a real bottom margin
 * (--gr-space-3). This block is a later hardcoded duplicate at identical
 * specificity, so it wins on source order and its `margin-block: 24px 0`
 * zeroed the space under every heading in an article body.
 *
 * It did not show on most guides because .grc-prose h2 + p adds 16px to the
 * FOLLOWING paragraph, which papered over it wherever that sibling rule
 * matched. On the how-we-rate page it does not, so the heading sat flush on
 * its first line of text.
 *
 * The bottom margin is restored here rather than by deleting this block,
 * because deleting it hands every article heading back to --gr-fs-20 and
 * resizes headings across the site — a visible change that is not what QA
 * reported. Adjacent margins collapse, so pages that already had the 16px
 * from the sibling rule are unchanged: max(8, 16) is still 16.
 *
 * NOTE FOR THE CLEANUP (ticket OUT-1): this duplicate pair is exactly the
 * pathology the front-end team described — the token layer exists and is
 * being overridden by a hardcoded rule further down the same sheet.
 */
.gr-next .gr-article-body h2,
.gr-next .gr-article-body h3 {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 17.6px;
	line-height: 22px;
	color: rgb(0, 0, 0);
	margin-block: 24px 8px;
}
.gr-next .gr-article-body blockquote {
	border-inline-start: 4px solid rgb(25, 118, 210);
	box-sizing: border-box;
	padding: 4px 0 4px 16px;
	margin-inline: 0;
	background: none;
}
.gr-next .gr-article-body blockquote p {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: rgb(0, 0, 0);
}
.gr-next .gr-article-body a { color: rgb(0, 136, 204); }
.gr-next .gr-article-body a:hover { color: rgb(25, 118, 210); text-decoration: underline; }

/* Author panel: the artboard stacks it under 760px so the 124px avatar
   stops squeezing the bio into a two-word column. */
.gr-next .gn-authorbox-name:hover { color: rgb(25, 118, 210); }
.gr-next .gn-soc:hover { background: rgb(0, 136, 204); border-color: rgb(0, 136, 204); }
.gr-next .gn-authorbox-cta:hover { background: rgb(238, 238, 238); }
.gr-next .gn-share:hover { background: rgb(0, 136, 204); border-color: rgb(0, 136, 204); color: #fff; }
.gr-next .gn-follow:hover { background: rgb(245, 245, 245); }
.gr-next .gn-relcard-img { transition: transform .5s ease; }
.gr-next .gn-relcard:hover .gn-relcard-img { transform: scale(1.04); }

/* The author-box avatar.
 *
 * Styled by class rather than inline BECAUSE of the WebP rewriter: Imagify
 * turns the <img> into <picture><source><img> and moves class and style to
 * the <picture>, which can neither object-fit nor clip. Both shapes are
 * covered here, so the panel renders the same whether that plugin is on,
 * off, or has no .webp for this particular file.
 *
 * overflow:hidden is what actually makes it round when the wrapper is a
 * <picture> — the radius alone does not clip a child element.
 *
 * Also applies to the monogram <span> fallback, which shares the class and
 * keeps its own display:flex centring from its style attribute. */
.gr-next .gn-authorbox-av {
	position: relative;
	inline-size: 124px;
	block-size: 124px;
	border-radius: 100px;
	overflow: hidden;
	flex-shrink: 0;
	display: block;
	object-fit: cover;
}
/* ONLY the wrapped case. `img.gn-authorbox-av` must NOT be in this selector:
   when the rewriter is off the <img> carries the class itself, the rule above
   has already sized it to 124px, and a (0,2,1) `img.…{inline-size:100%}` would
   out-specify that and stretch the avatar to the width of the flex row. */
.gr-next picture.gn-authorbox-av > img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

/* "Mobile: … author box stacked" — the handoff's QA line. At 620, where
   everything else drops to one column, not at the article grid's own
   collapse where the box still has 700px to work with. */
@media (max-width: 620px) {
	.gr-next .gn-authorbox {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding-inline: 14px !important;
	}
	.gr-next .gn-authorbox-av { inline-size: 84px !important; block-size: 84px !important; }
}

/* The 174px that opens .gr-post-below exists to clear the feature image,
 * which overhangs the dark head by 150px. Most Gamereactor news posts place
 * their imagery INSIDE the body and have no featured image at all, and on
 * those the reserved space rendered as an empty band between the head and
 * the first paragraph.
 *
 * So the overlap allowance is now conditional on the overhang actually being
 * there: .gn-posthead and .gr-post-below are adjacent siblings, and :has()
 * asks whether the head drew a .gr-feature before the gap is reserved. The
 * base value is the artboard's ordinary top padding.
 */
.gr-next .gn-posthead + .gr-post-below { padding-block-start: 40px; }
.gr-next .gn-posthead:has(.gr-feature) + .gr-post-below { padding-block-start: 174px; }
@media (max-width: 760px) {
	.gr-next .gn-posthead + .gr-post-below { padding-block-start: 26px; }
	.gr-next .gn-posthead:has(.gr-feature) + .gr-post-below { padding-block-start: 94px; }
}

/* --- Review ----------------------------------------------------------
 * The screenshot under the review head is pulled UP into the 170px the
 * head reserves, the mirror of the post's downward overhang. Both use the
 * same step sizes so the two heads shrink together.
 *
 * The review body then opens on its own 32px rather than the post's 174px
 * clearance: nothing overhangs into it, because the pull happened above.
 * ------------------------------------------------------------------- */
.gr-next .gn-revshot {
	position: relative;
	block-size: 520px;
	margin-block-start: -150px;
	overflow: hidden;
}
.gr-next .gn-revshot img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}
.gr-next .gn-revhead + .gr-post-below,
.gr-next .gn-revshot + .gr-post-below { padding-block-start: 32px; }

/* Verdict card: the network box drops under the verdict rather than beside
   it once the rail column is gone, and the score keeps its scale. */
@media (max-width: 980px) {
	.gr-next .gn-verdictcard .gr-verdict { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
	.gr-next .gn-revshot { block-size: 300px; margin-block-start: -70px; }
	.gr-next .gn-verdictcard { padding: 20px !important; }
}

/* --- Archive ---------------------------------------------------------
 * The three grids the rebuilt archive draws. They carry the artboard's
 * own class names because the markup is the artboard's — .gr-lead,
 * .gr-stories and .gr-daygrid did not exist on a live page until now, so
 * there is nothing here to collide with.
 *
 * Breakpoints are the project's 900/640 set rather than the artboard's
 * 1040/760: the lead and the story grid are the same shapes the homepage
 * reflows, and two archives stepping at different widths from the rest of
 * the site is exactly the inconsistency this pass is meant to remove.
 * ------------------------------------------------------------------- */
.gr-next .gr-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}
.gr-next .gr-stories {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.gr-next .gr-daygrid {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
/* The day label rides with its rows on a long group, and stops being
   sticky once the label sits above them instead of beside them. */
.gr-next .gn-daylabel { position: sticky; top: 16px; }

.gr-next .gn-lead-img,
.gr-next .gn-story-img { transition: transform .5s ease; }
.gr-next .gn-lead:hover .gn-lead-img { transform: scale(1.03); }
.gr-next .gn-story:hover .gn-story-img { transform: scale(1.04); }
.gr-next .gn-dayrow:hover { background: rgb(250, 250, 250); }

@media (max-width: 980px) {
	.gr-next .gr-lead { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.gr-next .gr-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.gr-next .gr-stories { grid-template-columns: minmax(0, 1fr); }
	.gr-next .gr-daygrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.gr-next .gn-daylabel { position: static; }
	/* The author column is the first thing to go when the row runs out of
	   width: the title is what the reader is scanning for. */
	.gr-next .gn-dayauthor { display: none; }
}

/* --- Author ----------------------------------------------------------
 * .gr-hero here is the portrait beside the name (132px + the rest), and
 * .gr-cols the body's column pair. Both are the artboard's names and
 * neither existed on a live page before this template.
 * ------------------------------------------------------------------- */
.gr-next .gn-authid {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
}
.gr-next .gr-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
}
.gr-next .gr-three {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.gr-next .gn-soc:hover { background: rgb(0, 136, 204); border-color: rgb(0, 136, 204); }

@media (max-width: 980px) {
	.gr-next .gr-cols { grid-template-columns: minmax(0, 1fr); }
	.gr-next .gn-authfoot { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
	.gr-next .gr-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.gr-next .gn-authid { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
	.gr-next .gn-authid h1 { font-size: 30px !important; line-height: 33px !important; }
	.gr-next .gr-three { grid-template-columns: minmax(0, 1fr); }
}

/* The author portrait frame. Sized here rather than inline because the
   element that needs the size may be a <picture> the theme inserted, and
   because theme.css already has opinions about img[width]. */
.gr-next .gn-authportrait {
	inline-size: 132px;
	block-size: 132px;
	border-radius: 100px;
	overflow: hidden;
	flex-shrink: 0;
	background: rgb(58, 57, 54);
}
.gr-next .gn-authportrait > * ,
.gr-next .gn-authportrait img {
	inline-size: 100% !important;
	block-size: 100% !important;
	object-fit: cover;
	display: block;
	max-inline-size: none;
}
.gr-next .gn-authmono {
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 800;
	font-size: 48px;
	color: rgb(255, 255, 255);
}
@media (max-width: 620px) {
	.gr-next .gn-authportrait { inline-size: 84px; block-size: 84px; }
	.gr-next .gn-authmono { font-size: 32px; }
}

/* The post head's feature <img> sits in the theme's .gr-feature frame,
   which sizes the box; the image fills it. Declared because the head now
   prints a plain <img> rather than the_post_thumbnail()'s sized markup. */
.gr-next .gr-feature img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 41% 50%;
	display: block;
}

/* The adopted caption, and the wrapper that carries the overhang for it.
 *
 * The image hangs 150px out of the dark head, so the caption under it is
 * always on the white body, never on the black — one colour, both
 * templates. The wrapper takes the negative margin off the image itself so
 * the pair moves as one; without that the caption is pulled up over the
 * picture. */
.gr-next .gn-featwrap { margin-block-end: -150px; }
.gr-next .gn-featwrap .gr-feature { margin-block-end: 0; }
.gr-next .gn-feature-cap {
	margin: 8px 0 0;
	font-family: Arial, sans-serif;
	font-size: 12.5px;
	line-height: 18px;
	color: rgb(136, 136, 136);
}
/* A caption adds its own line to what the body has to clear. */
.gr-next .gn-posthead:has(.gn-feature-cap) + .gr-post-below { padding-block-start: 206px; }
@media (max-width: 760px) {
	.gr-next .gn-featwrap { margin-block-end: -70px; }
	.gr-next .gn-posthead:has(.gn-feature-cap) + .gr-post-below { padding-block-start: 126px; }
}

/* --- Money page ------------------------------------------------------
 * The contents rail sits second in the markup and second in the grid, so
 * source order and reading order agree. .gr-main / .gr-side only need to
 * exist as grid children; .gr-cols above already sets the pair.
 *
 * The intro renders OPEN here. commercial.css clamps .grc-intro to three
 * lines on the outgoing hero; on these pages the standfirst is the
 * methodology summary, and half a methodology is worse than none.
 * ------------------------------------------------------------------- */
/*
 * TYPE AND COLOUR ONLY — NO DISPLAY.
 *
 * CORRECTED. This block used to set `display: block` across the intro's
 * descendants, which included .intro-full — the half the plugin keeps
 * collapsed until the reader presses More. Forcing it visible printed the
 * standfirst twice: the truncated excerpt with a More button, and the
 * whole thing again with a Less button, one under the other.
 *
 * The plugin owns the open/closed state. This only restyles what it shows.
 */
.gr-next .gn-money-intro,
.gr-next .gn-money-intro p,
.gr-next .gn-money-intro .intro,
.gr-next .gn-money-intro .intro-excerpt,
.gr-next .gn-money-intro .intro-full {
	margin: 0;
	font-family: Arial, sans-serif;
	font-size: 17px;
	line-height: 27px;
	/* #ABB0B2. The intro is the one thing on this band meant to be read
	   before the article, so it takes the light grey; the disclosure below
	   it is a standing legal line and recedes to #666. */
	color: rgb(171, 176, 178);
	text-wrap: pretty;
}
/* The plugin's More/Less control sits inside the intro. */
.gr-next .gn-money-intro .intro-toggle {
	display: inline;
	border: 0;
	background: none;
	padding: 0 0 0 4px;
	font-family: Arial, sans-serif;
	font-size: 17px;
	line-height: 27px;
	color: rgb(0, 136, 204);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gr-next .gn-money-intro .intro-toggle:hover { color: #fff; }
.gr-next .gn-money-layout { grid-template-areas: "content contents"; }
.gr-next .gn-money-layout > .gr-main { grid-area: content; }
.gr-next .gn-toc-rail { grid-area: contents; align-self: stretch; }
.gr-next .gn-toc-toggle { display: none; }
/* The in-body contents is the phone/tablet component; above 1040 the rail
   beside the article is the one that shows. Hidden rather than not rendered
   so one markup path serves both and the builder fills whichever is live. */
.gr-next .gn-toc-inline { display: none; }
/* The desktop rail highlights the section being read — see the observer in
   assets/js/commercial-toc.js (QA 12). */
.gr-next .gn-toc-rail a[aria-current="true"] {
	color: rgb(0, 136, 204);
	font-weight: 700;
	border-inline-start-color: rgb(25, 118, 210);
}
.gr-next .gn-toc-rail[hidden],
.gr-next .gn-toc-rail nav[hidden] { display: none; }
.gr-next .gn-toc-rail nav {
	border-inline-start: 1px solid rgb(232, 232, 232);
	max-height: calc(100dvh - 160px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.gr-next .gn-toc-rail ul,
.gr-next .gn-toc-rail li { margin: 0; padding: 0; list-style: none; }
.gr-next .gn-toc-rail ul ul { padding-inline-start: 12px; }
.gr-next .gn-toc-rail a {
	display: block;
	padding: 6px 0;
	padding-inline-start: 12px;
	margin-inline-start: -1px;
	border-inline-start: 2px solid transparent;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 500;
	font-size: 13.5px;
	line-height: 18px;
	color: rgb(102, 102, 102);
}
.gr-next .gn-toc-rail a:hover,
.gr-next .gn-toc-rail a:focus-visible { color: rgb(0, 136, 204); border-inline-start-color: rgb(25, 118, 210); }
/* The contents precede the article in reading order. Keep a compact control
   within reach on narrow screens, with its own bounded list when expanded. */
@media (max-width: 1040px) {
	/*
	 * QA 3 + 4 — THE MOBILE CONTENTS.
	 *
	 * The rail is a DESKTOP component and is hidden here. Its sticky never
	 * worked on a phone and could not: as a grid item its containing block
	 * is its own single-row grid area, which is 50px tall, so `position:
	 * sticky` had no range to travel and the bar scrolled away with the
	 * first swipe. Measured before this change: position:sticky, top:62px,
	 * height 50px, in a "contents"/"content" row pair.
	 *
	 * .gn-toc-inline replaces it, rendered by gn-money.php in the body
	 * after the first toplist — which is where it was asked to go, so the
	 * offers are not pushed below a navigation panel. Being inside
	 * .e-content it sits in a block container that is the height of the
	 * whole article, so sticky has the full article to travel and the bar
	 * stays with the reader the rest of the way down.
	 *
	 * Width comes from the flow rather than a cap, so it fits the column at
	 * every size — phone portrait and landscape, tablet both ways.
	 */
	.gr-next .gn-money-layout { grid-template-areas: "contents" "content"; row-gap: 0; }
	.gr-next .gn-toc-rail { display: none !important; }

	.gr-next .gn-toc-inline {
		display: block;
		position: sticky;
		top: var(--gr-toc-top, 64px);
		z-index: 20;
		inline-size: 100%;
		max-inline-size: none;
		margin-block: 8px 24px;
		background: #fff;
		border: 1px solid #e8e8e8;
		box-shadow: 0 2px 6px #0000000d;
	}
	.gr-next .gn-toc-inline[hidden] { display: none; }
	.gr-next .gn-toc-inline nav[hidden] { display: none; }
	.gr-next .gn-toc-inline nav {
		max-height: min(50dvh, calc(100dvh - 80px - var(--gr-toc-top, 64px)));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 12px 12px;
	}
	.gr-next .gn-toc-inline ul,
	.gr-next .gn-toc-inline li { margin: 0; padding: 0; list-style: none; }
	.gr-next .gn-toc-inline ul ul { padding-inline-start: 12px; }
	.gr-next .gn-toc-inline a {
		display: block;
		padding-block: 12px;
		font: 400 14px/19px Arial, sans-serif;
		color: rgb(68, 68, 68);
		text-decoration: none;
		border-block-end: 1px solid rgb(240, 240, 240);
	}
	.gr-next .gn-toc-inline li:last-child > a { border-block-end: 0; }
	.gr-next .gn-toc-inline a:hover,
	.gr-next .gn-toc-inline a:focus-visible,
	.gr-next .gn-toc-inline a[aria-current="true"] { color: rgb(0, 136, 204); }
	.gr-next .gn-toc-inline a[aria-current="true"] { font-weight: 700; }

	.gr-next .gn-toc-label { display: none; }
	.gr-next .gn-toc-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		min-height: 48px;
		padding: 12px 16px;
		border: 0;
		background: #fff;
		color: #181715;
		font: 600 16px/24px 'Outfit', Arial, sans-serif;
		text-align: start;
		cursor: pointer;
	}
	.gr-next .gn-toc-toggle > span {
		flex: 0 0 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}
	.gr-next .gn-toc-toggle[aria-expanded="true"] > span { transform: rotate(225deg); }
	.gr-next .gn-toc-toggle:focus-visible { outline: 2px solid #0088cc; outline-offset: -4px; }
	body.gr-next article.gambling .gn-money-layout .e-content :is(h2, h3)[id] {
		scroll-margin-block-start: var(--gr-toc-anchor-top, 132px);
	}
}
.gr-next .gn-quick:hover { color: rgb(0, 136, 204); }

/* --- Full-bleed bands, everywhere the facelift runs -------------------
 * .hr-bleed is defined in sections.css, and sections.css is enqueued on
 * the HOMEPAGE ONLY (inc/assets.php, the gr-renew handle). So every head
 * that carried the class on an inner template — post, review, archive,
 * author, page, money — inherited nothing, and the band stopped at the
 * 1300px .main container with a gutter either side. The trust band at the
 * foot of an article had the same problem.
 *
 * The rule is restated here, in the sheet that loads wherever the switch
 * is on, and it is byte-identical to the homepage's: on the front page
 * both sheets now say the same thing, so nothing there changes.
 *
 * --grc-vw is the true viewport width, published by theme.js and removed
 * again when the measurement is implausible. max(100%, …) means a missing
 * or stale value can only ever fall back to container width — no bleed,
 * never broken.
 * ------------------------------------------------------------------- */
.gr-next .hr-bleed {
	inline-size: max(100%, var(--grc-vw, 100%));
	margin-inline: calc(50% - max(100%, var(--grc-vw, 100%)) / 2);
	box-sizing: border-box;
}

/* --- Gambling hub ----------------------------------------------------
 * The guide index is a three-column row: rank, guide, verified. The
 * artboard draws five, but "Best for" and "Sites" have no field behind
 * them on a gambling post — see the note in parts/gn-hub.php.
 * ------------------------------------------------------------------- */
.gr-next .gn-guiderow {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 150px 92px;
	gap: 16px;
	align-items: baseline;
}
/* The Best-for column only exists on indexes where a guide actually has a
   highlighted label — see parts/gn-hub.php. */
.gr-next .gn-guiderow--label {
	grid-template-columns: 32px minmax(0, 1fr) 150px 150px 92px;
}
.gr-next .gn-guidelink:hover { background: rgb(250, 250, 250); }
.gr-next .gn-four {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 980px) {
	.gr-next .gn-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	/* The verified column is the first thing to go: the guide's own page
	   states the date, and the title is what the reader is scanning. */
	.gr-next .gn-guiderow,
	.gr-next .gn-guiderow--label { grid-template-columns: 26px minmax(0, 1fr) 54px; }
	.gr-next .gn-hide { display: none; }
	.gr-next .gn-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The five-up game strip on Free Games and the hub. */
.gr-next .gn-strip {
	display: grid;
	/* Six, three, two: the belt carries six games, so every breakpoint
	   fills its last row instead of stranding a tile on its own. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 980px) { .gr-next .gn-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 620px) { .gr-next .gn-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Games database: the index runs full width under the facelift — the rail
   is not rendered, so the grid must not keep a column reserved for it. */
.gr-next .gn-garch .grc-arch-grid { grid-template-columns: minmax(0, 1fr); }

/* --- Games database: filters and index -------------------------------
 * The controls and the table are the database's own markup and stay that
 * way — they own the query-string contract every filter link depends on.
 * What changes is the skin: the artboard's index is a list of hairline
 * rows, not a boxed table on a grey panel.
 *
 * The <table> is kept as a table. It is four labelled columns of one kind
 * of record, which is what a table is for, and screen readers get the
 * column association for free. Only its borders and fills change.
 * ------------------------------------------------------------------- */
.gr-next .grc-gf {
	background: none;
	border: 1px solid rgb(232, 232, 232);
	padding: 16px;
	border-radius: 0;
}
.gr-next .grc-gf-find {
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
}
.gr-next .grc-gf-cta {
	border-radius: 0;
	background: rgb(25, 118, 210);
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.gr-next .grc-gf-pill,
.gr-next .grc-gf-selectwrap {
	border-radius: 0;
	border: 1px solid rgb(226, 226, 226);
	background: #fff;
}
.gr-next .grc-gf-label {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(136, 136, 136);
}

.gr-next .grc-gt { border-collapse: collapse; inline-size: 100%; }
.gr-next .grc-gt-scroll { overflow-x: auto; }
/* The head rule is the artboard's 2px near-black; every row below it is a
   hairline. That contrast is what makes the list read as an index. */
.gr-next .grc-gt thead th {
	background: none;
	border: 0;
	border-block-end: 2px solid rgb(24, 23, 21);
	padding: 9px 12px 9px 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(136, 136, 136);
	text-align: start;
}
.gr-next .grc-gt tbody td {
	background: none;
	border: 0;
	border-block-end: 1px solid rgb(232, 232, 232);
	padding: 11px 12px 11px 0;
	font-family: Arial, sans-serif;
	font-size: 13px;
	color: rgb(68, 68, 68);
}
.gr-next .grc-gt tbody tr:hover td { background: rgb(250, 250, 250); }
.gr-next .grc-gt-c--title,
.gr-next .grc-gt-c--title a {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 21px;
	color: rgb(24, 23, 21);
}
.gr-next .grc-gsum-count,
.gr-next .grc-gsum-sort {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(136, 136, 136);
}

/* 404: the head carries the words now, so the art block below it loses the
   vertical centring that was holding an empty column open. */
.gr-next .gn-404 { padding-block: 32px 48px; }
.gr-next .gn-404 .grc-404-inner { gap: 20px; }

/* --- Game hub --------------------------------------------------------
 * The head is the review head with a boxshot column. 132px matches the
 * author portrait and the homepage rail's cover width, so the three
 * "small square asset beside a heading" cases on the site agree.
 * ------------------------------------------------------------------- */
.gr-next .gn-gamegrid {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}
.gr-next .gn-boxshot {
	inline-size: 132px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: rgb(58, 57, 54);
}
/* A fixed 3:4 frame rather than auto height: the fallback sources are
   landscape article images, and letting each one set its own height made
   the head's first column a different size on every game. */
.gr-next .gn-boxshot img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}
.gr-next .gn-boxmono {
	inline-size: 100%;
	block-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 800;
	font-size: 40px;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.72);
}
/* The hub body opens on its own padding: nothing overhangs the head here,
   so the 174px the post reserves would be a hole. */
.gr-next .gn-gamehead + .grc-gh-below { padding-block-start: 32px; }
@media (max-width: 620px) {
	.gr-next .gn-gamegrid { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; }
	.gr-next .gn-boxshot { inline-size: 92px; }
	.gr-next .gn-gamehead h1 { font-size: 30px !important; line-height: 33px !important; }
}

/* The video head carries the section as an accent chip above the headline,
   the way every other head does. .gr-crumb-section renders as a chip too,
   so the crumb showed "VIDEOS" twice, once in each treatment. In the crumb
   it goes back to being a link. */
.gr-next .grc-vid-head .gr-crumb-section {
	background: none;
	padding: 0;
	border-radius: 0;
	font-family: Arial, sans-serif;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0;
	text-transform: none;
	color: rgb(171, 176, 178);
}

/* --- Legacy layout wrappers inside editorial content -----------------
 * Static pages carry .colwide / .colthin INSIDE the body copy — they are
 * the old page layout, baked into the content by the migration. theme.css
 * gives .colwide a fixed `width: calc(--grc-max - --grc-rail) !important`,
 * which on the rebuilt page is wider than the column it now sits in, so
 * the prose ran straight under the contents rail.
 *
 * Inside a facelift body they are neutralised — the grid owns the width
 * now. Outside it nothing changes, so the un-switched page is untouched.
 * ------------------------------------------------------------------- */
.gr-next .gr-article-body .colwide,
.gr-next .gr-article-body .colthin,
.gr-next .gr-article-body .colwide_grtv {
	inline-size: 100% !important;
	max-inline-size: 100%;
	float: none;
	margin-inline: 0;
}

/* --- The legacy shell, neutralised under the facelift -----------------
 * MEASURED IN THE BROWSER, not inferred. On the commercial template the
 * probe read:
 *
 *     #main      x=220 w=1000  max-width:1000px  padding-inline:20px
 *     .gr-cols   x=256 w=928   →  588px main + 300px rail
 *
 * commercial.css pins #main to a 1000px shell above 1024px and turns
 * article.gambling into a flex row, because the outgoing template laid
 * out its own 640/300 columns inside it. The rebuilt page brings its own
 * 1132px .gr-wrap, so that shell now fights it: the hero bled past the
 * clamp while the body stayed inside it, which is the "off" look — a
 * 588px article column beside a 300px rail, both pushed right.
 *
 * The clamp and the flex row go; .gr-wrap governs the width, and the
 * body column lands at 792px against the 300px rail like every other
 * template. Scoped to .gr-next, so the un-switched page keeps its shell.
 * ------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.gr-next.gr-commercial-page #main {
		max-inline-size: none;
		padding-inline: 0;
	}
	.gr-next.gr-commercial-page article.gambling {
		display: block;
		gap: 0;
	}
}

/* THE WHITE STRIP BETWEEN THE HEADER AND THE HERO.
 *
 * layout.css opens .main with `padding: 15px 0 0 0` on a white ground —
 * harmless when a page started with white content, visible as a band now
 * that every facelift template opens on a full-bleed dark hero. The dark
 * band should meet the masthead. */
.gr-next .main { padding-block-start: 0; }

/* The money page's head. .gr-headgrid is the artboard's 1fr/300 pair —
   used by the post and review heads, where a 300px column is reserved
   beside the headline.

   THE MONEY PAGE IS THE EXCEPTION, on instruction: its head runs the full
   container width. There is nothing in the reserved column on this
   template, so the intro, the byline and the disclosure were all measured
   against a 300px gap holding nothing. */
.gr-next .gr-headgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
}
@media (max-width: 980px) {
	.gr-next .gr-headgrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* The disclosure, now on the dark band. */
.gr-next .gn-money-disc {
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
	padding-block-start: 12px;
	margin-block-start: 2px;
	/* Full container width, with the byline above it. The 90ch cap it used
	   to carry measured out at ~660px against a 1132px head, so the rule
	   above it ran twice as wide as the text under it. */
	max-inline-size: none;
}
.gr-next .gn-money-disc .gambling-disclosure { max-inline-size: none; }
.gr-next .gn-money-disc,
.gr-next .gn-money-disc * {
	font-family: Arial, sans-serif;
	/* 10px here, 8px on mobile. It is a standing legal line rather than
	   something anyone reads on the way in, so it is set at the smallest
	   size that stays legible and takes the band's own grey. */
	/* QA 6 — RAISED from 10px/8px. It was set at "the smallest size that
	   stays legible" and 8px on a phone is below that line by any measure;
	   QA's word was "almost imperceptible". This is the affiliate
	   disclosure, which is the one piece of copy on a gambling page that
	   has to be readable for compliance reasons rather than editorial ones,
	   so the floor matters more than the quietness. 12px here, 11px on a
	   phone — still the smallest thing on the band.
	   The colour goes with it, from #666 to the rgb(136,136,136) this same
	   block already uses for its <strong>, so the line is internally
	   consistent and clears a usable contrast on the near-black ground. */
	font-size: 12px;
	line-height: 17px;
	color: rgb(136, 136, 136);
	font-style: normal;
}
.gr-next .gn-money-disc b,
.gr-next .gn-money-disc strong { font-weight: 700; color: rgb(136, 136, 136); }
.gr-next .gn-money-disc a { color: rgb(136, 136, 136); text-decoration: underline; }
.gr-next .gn-money-disc a:hover { color: rgb(215, 217, 219); }
@media (max-width: 620px) {
	.gr-next .gn-money-disc,
	.gr-next .gn-money-disc * { font-size: 11px; line-height: 16px; }
}

/* The verifier links to their author archive — the plugin builds the
   anchor, so this only has to keep it legible on the dark band.

   NO UNDERLINE, on instruction (15 Sep). This rule used to add one, at rest
   and on hover. The byline row it sits in is a strip of four facts — author,
   role, verifier, updated date — of which two are links, and the author at
   the head of the row carries no underline at rest. Underlining only the
   verifier made the compliance line the most emphatic thing in a row it
   should sit quietly in.

   Its cue is now the colour lift to white on hover, not a rule. Measured
   after the change: verifier none/none, author none/underline — the author
   still takes the site-wide a:hover from layout.css, and is left alone
   because it is blue against the row's grey and already reads as a link. */
.gr-next .gn-verified a { color: rgb(215, 217, 219); text-decoration: none; }
.gr-next .gn-verified a:hover { color: #fff; text-decoration: none; }
.gr-next .gn-verified span { color: inherit; }

/* Related guides: index rows, not cards. */
.gr-next .gn-relguide:hover { background: rgb(250, 250, 250); }
.gr-next .gn-relguide:last-child { border-block-end: 0; }

/* The games database lead sits above the filter panel and needs air
   between the two — the panel is a bordered box and reads as the start of
   the index, not as part of the card above it. */
.gr-next .gn-garch .gn-lead { margin-block-end: 32px; }

/* --- Video library ---------------------------------------------------
 * The fold is the artboard's 1fr/320 pair; the card grid is three up.
 * The library's own wrap is .grc-arch-grid, which the facelift collapses
 * to one column here because the rail lives inside the fold instead.
 * ------------------------------------------------------------------- */
.gr-next .grc-vidarch .grc-arch-grid { grid-template-columns: minmax(0, 1fr); }
.gr-next .gn-vidfold {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	align-items: start;
}
.gr-next .gn-six {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px 18px;
}
/* The play affordance on a card, drawn rather than shipped as an asset. */
.gr-next .gn-playdot {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: rgba(24, 23, 21, 0.72);
	border: 2px solid rgba(255, 255, 255, 0.9);
}
.gr-next .gn-playdot::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 52%;
	transform: translate(-50%, -50%);
	inline-size: 0;
	block-size: 0;
	border-inline-start: 12px solid #fff;
	border-block-start: 7px solid transparent;
	border-block-end: 7px solid transparent;
}
.gr-next .gn-vidlead:hover h2 { color: rgb(0, 136, 204); }

@media (max-width: 980px) {
	.gr-next .gn-vidfold { grid-template-columns: minmax(0, 1fr); }
	.gr-next .gn-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gr-next .gn-vidlead > div:first-child { height: 260px !important; }
}
@media (max-width: 620px) {
	.gr-next .gn-six { grid-template-columns: minmax(0, 1fr); }
	.gr-next .gn-vidlead h2 { font-size: 26px !important; line-height: 29px !important; }
}

/* --- Free games: the SlotsLaunch panel and grid, restyled --------------
 * The plugin owns this markup, the catalogue behind it and the query
 * string its controls write, so none of it is rebuilt — it is re-skinned
 * to the artboard's filter panel and card.
 *
 * Mapping, plugin class -> artboard element:
 *
 *   .slotsl-filters        the bordered panel
 *   .sl-filter-container   the control row
 *   .slotsl-search         the search field and its submit
 *   .slotsl-providers      each select's wrapper
 *   .slotsl-megaways       the "Megaways only" toggle
 *   .slotsl-game           the card
 *   .slotsl-thumb          the 3:2 image frame
 *   .slotsl-thumb-url      the "Free Demo" chip
 *   .slotsl-title/-provider the two lines under it
 *
 * Two artboard elements have no counterpart and are NOT faked: the field
 * LABELS above each control (the plugin puts the label inside the select
 * as its first option — "All Providers", "Sort By" — which says the same
 * thing in less space), and the Reset button (the plugin has no reset
 * action to bind one to; clearing a select does it).
 * ------------------------------------------------------------------- */
.gr-next .grc-fg-arch-body .slotsl-filters {
	box-sizing: border-box;
	border: 1px solid rgb(232, 232, 232);
	border-radius: 0;
	background: #fff;
	padding: 16px;
	margin-block-end: 20px;
}
.gr-next .grc-fg-arch-body .sl-filter-container {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}
.gr-next .grc-fg-arch-body .slotsl-search {
	flex: 1 1 220px;
	min-inline-size: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.gr-next .grc-fg-arch-body .slotsl-search input[type="text"] {
	inline-size: 100%;
	box-sizing: border-box;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	padding: 10px 12px;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
	background: #fff;
	block-size: auto;
}
.gr-next .grc-fg-arch-body .sl-submit-search {
	flex-shrink: 0;
	border: 1px solid rgb(25, 118, 210);
	border-radius: 0;
	background: rgb(25, 118, 210);
	padding: 0 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gr-next .grc-fg-arch-body .sl-submit-search svg { stroke: #fff; }
.gr-next .grc-fg-arch-body .sl-submit-search:hover { background: rgb(0, 136, 204); border-color: rgb(0, 136, 204); }

.gr-next .grc-fg-arch-body .slotsl-providers {
	flex: 1 1 160px;
	min-inline-size: 0;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.gr-next .grc-fg-arch-body .slotsl-providers select {
	inline-size: 100%;
	box-sizing: border-box;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	padding: 10px 12px;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
	background: #fff;
	block-size: auto;
	appearance: auto;
}

/* The artboard's Megaways control is a 16px square checkbox with the label
   beside it, not a pill switch. The switch is a styled <span> over a real
   checkbox, so the square is drawn on that span and the knob removed. */
.gr-next .grc-fg-arch-body .slotsl-megaways {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row-reverse;
	gap: 9px;
	align-items: center;
	background: none;
	border: 0;
	padding: 0;
}
.gr-next .grc-fg-arch-body .slotsl-megaways > div {
	margin-right: 0 !important;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: rgb(24, 23, 21);
}
.gr-next .grc-fg-arch-body .slotsl-megaways .switch {
	inline-size: 16px;
	block-size: 16px;
	min-inline-size: 0;
}
.gr-next .grc-fg-arch-body .slotsl-megaways .slider {
	inset: 0;
	inline-size: 16px;
	block-size: 16px;
	border-radius: 0 !important;
	border: 1px solid rgb(136, 136, 136);
	background: #fff;
}
.gr-next .grc-fg-arch-body .slotsl-megaways .slider::before { display: none; }
.gr-next .grc-fg-arch-body .slotsl-megaways input:checked + .slider {
	background: rgb(25, 118, 210);
	border-color: rgb(25, 118, 210);
}

/* The card. Square corners, the demo chip pinned top-left as the artboard
   draws it, and the two meta lines under a 3:2 frame. */
.gr-next .grc-fg-arch-body .slotsl-game {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.gr-next .grc-fg-arch-body .slotsl-thumb {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 0;
	background: rgb(238, 244, 251);
}
.gr-next .grc-fg-arch-body .slotsl-thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform .5s ease;
}
.gr-next .grc-fg-arch-body .slotsl-game:hover .slotsl-thumb img { transform: scale(1.04); }
.gr-next .grc-fg-arch-body .slotsl-demo-container,
.gr-next .grc-fg-arch-body .slotsl-demo-wrapper {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-block-end: auto;
	inset-inline-end: auto;
	background: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	inline-size: auto;
	block-size: auto;
	display: block;
}
.gr-next .grc-fg-arch-body .slotsl-thumb-url {
	display: inline-block;
	border-radius: 0;
	background: rgb(25, 118, 210);
	color: #fff;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* The chip is pinned into a corner of the frame, so it must not take
	   its width from the card — it broke to "FREE / DEMO" on two lines. */
	white-space: nowrap;
	padding: 4px 8px;
	border: 0;
	box-shadow: none;
}
.gr-next .grc-fg-arch-body .slotsl-meta {
	padding: 8px 0 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: none;
}
.gr-next .grc-fg-arch-body .slotsl-title,
.gr-next .grc-fg-arch-body .slotsl-title span {
	margin: 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 19px;
	color: rgb(24, 23, 21);
	text-wrap: pretty;
}
.gr-next .grc-fg-arch-body .slotsl-provider {
	font-family: Arial, sans-serif;
	font-size: 11.5px;
	color: rgb(136, 136, 136);
	text-decoration: none;
}
.gr-next .grc-fg-arch-body .slotsl-provider:hover { color: rgb(0, 136, 204); }

/* --- Review: the network score list ----------------------------------
 * Caps the edition list at about the handoff's own height and scrolls the
 * remainder, so a game reviewed by all 23 editions does not stretch the
 * verdict card past the verdict itself. The scrollbar is left visible —
 * it is the only affordance saying there are more scores below.
 * ------------------------------------------------------------------- */
.gr-next .gn-netrows {
	max-block-size: 190px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.gr-next .gn-netrows::-webkit-scrollbar { inline-size: 6px; }
.gr-next .gn-netrows::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.28);
}
/* The network box is a column beside the verdict, not a stack under it:
   keeping it from growing is what holds the two side by side. */
.gr-next .gn-netbox { align-self: start; }

/* --- Dated index: the group's own rules -------------------------------
 * Each day group opens on a rule and every row closes on a hairline, so
 * the LAST row's hairline sat immediately above the next group's rule —
 * two lines, 1px apart, reading as a double border and flattening the
 * grouping the rules exist to show. The last row in a group drops its own.
 * ------------------------------------------------------------------- */
.gr-next .gn-daygrid .gn-dayrow:last-child { border-block-end: 0; }
/* Same for the homepage's flat latest index and the rail lists, where the
   closing hairline sits against the block that follows. */
.gr-next .gn-latestindex .gn-dayrow:last-child { border-block-end: 0; }
.gr-next .gn-calrow:last-child { border-block-end: 0; }

/* --- Games database: the release calendar ----------------------------- */
.gr-next .gn-calgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}
@media (max-width: 980px) {
	.gr-next .gn-calgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.gr-next .gn-calgrid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.gr-next .gn-calrow:hover { background: rgb(250, 250, 250); }

/* --- Video library: the filter block ---------------------------------
 * parts/video-filters.php keeps its markup and its query-string contract;
 * only the skin changes. The handoff draws a white block, not a grey
 * panel: a full-width search with the sort control on its right, then the
 * categories as plain text tabs with a blue underline on the active one —
 * pills at that count wrapped into three rows of lozenges and dominated
 * the page above the fold.
 * ------------------------------------------------------------------- */
.gr-next .grc-vidsearch {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-block-end: 14px;
}
.gr-next .grc-vidsearch-row {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}
.gr-next .grc-vidsearch-field {
	flex: 1 1 320px;
	min-inline-size: 0;
	box-sizing: border-box;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	padding: 11px 13px;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
	background: #fff;
}
.gr-next .grc-vidsearch-btn {
	border-radius: 0;
	border: 1px solid rgb(25, 118, 210);
	background: rgb(25, 118, 210);
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 11px 16px;
	color: #fff;
}
.gr-next .grc-vidsearch-btn:hover { background: rgb(0, 136, 204); border-color: rgb(0, 136, 204); }

.gr-next .grc-vidsort {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	background: none;
	border: 0;
	padding: 0;
}
.gr-next .grc-vidsort-label {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(136, 136, 136);
}
.gr-next .grc-vidsort-links { display: flex; flex-direction: row; gap: 8px; }
/* Sort is two buttons, the active one filled — the handoff's control, and
   it reads as a choice rather than as two links that might be breadcrumbs. */
.gr-next .grc-vidsort-link {
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	padding: 8px 14px;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	color: rgb(24, 23, 21);
	text-decoration: none;
	background: #fff;
}
.gr-next .grc-vidsort-link:hover { border-color: rgb(24, 23, 21); }
.gr-next .grc-vidsort-link.is-active {
	background: rgb(24, 23, 21);
	border-color: rgb(24, 23, 21);
	color: #fff;
}
.gr-next .grc-vidsort-count {
	font-family: Arial, sans-serif;
	font-size: 12.5px;
	color: rgb(136, 136, 136);
}

/* The categories: text tabs on one hairline, active one underlined. */
.gr-next .grc-vidchips {
	display: flex;
	flex-direction: row;
	gap: 22px;
	flex-wrap: wrap;
	border-block-end: 1px solid rgb(232, 232, 232);
	padding: 0;
	margin-block-end: 20px;
	background: none;
	overflow: visible;
}
.gr-next .grc-vidchip {
	border: 0;
	border-block-end: 2px solid transparent;
	border-radius: 0;
	background: none;
	padding: 0 0 10px;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: rgb(136, 136, 136);
	white-space: nowrap;
}
.gr-next .grc-vidchip:hover { color: rgb(24, 23, 21); }
.gr-next .grc-vidchip.is-active {
	color: rgb(24, 23, 21);
	border-block-end-color: rgb(25, 118, 210);
	background: none;
}

/* The fold and the index, tightened to the handoff's rhythm. */
.gr-next .gn-liverow:hover span:first-child { color: rgb(0, 136, 204); }
.gr-next .gn-vidrow:hover { background: rgb(250, 250, 250); }
.gr-next .gn-vidrow:last-child { border-block-end: 0; }
@media (max-width: 620px) {
	.gr-next .grc-vidchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.gr-next .grc-vidchips::-webkit-scrollbar { display: none; height: 0; }
}

/* A page whose content brings its own .colthin runs full width — the
   template's rail would make it a third column. See parts/gn-page.php. */
.gr-next .gn-pagecols--full { grid-template-columns: minmax(0, 1fr); }

/* --- The handoff's responsive contract, applied ------------------------
 * "1040px collapses the article grid, 980px the homepage and card grids,
 *  620px drops to one column."
 *
 * The article grid is .gr-body / .gr-cols / .gr-headgrid — the 1fr + 300px
 * pair. It collapses 40px LATER than the card grids, which is deliberate
 * in the handoff: a 300px rail beside a 700px column still reads, while a
 * three-up card grid at the same width does not.
 * ------------------------------------------------------------------- */
@media (max-width: 1040px) {
	.gr-next .gr-body,
	.gr-next .gr-cols,
	.gr-next .gr-headgrid,
	.gr-next .grc-arch-grid { grid-template-columns: minmax(0, 1fr); }

	/* "Sticky rails: position sticky, top 16px. Static below the collapse
	   breakpoint." Once the rail is under the article rather than beside
	   it, sticking pins it to the viewport while the reader scrolls past
	   the thing it belongs to — and it can overlap the footer. */
	/* MEASURED at 390: post and review still reported a sticky rail after
	   the first pass — theirs is .gr-side > .gr-side-sticky > div, one
	   level deeper than the selector reached. The attribute match catches
	   any inline `position:sticky` a rail part sets on itself. */
	.gr-next .gr-side > div,
	.gr-next .gr-side [style*="position:sticky"],
	.gr-next .gr-side-sticky > div,
	.gr-next .gr-rail,
	.gr-next .gr-side-sticky,
	.gr-next .gn-netbox,
	.gr-next .gn-daylabel { position: static !important; }
}

/* "Carousels … arrows are hidden below 620px." Touch scrolls the rail
   directly, so the buttons are 44px of furniture with nothing to do. */
@media (max-width: 620px) {
	.gr-next .gn-railbtn { display: none !important; }
}

/* "Mobile: … no capped image crops." Fixed pixel heights on the lead and
   card media crop the picture harder the narrower the screen gets; on one
   column they become the aspect ratio the art was cut for. */
@media (max-width: 620px) {
	.gr-next .gn-lead > div:first-child,
	.gr-next .gn-vidlead > div:first-child,
	.gr-next .gn-story > div:first-child {
		block-size: auto !important;
		aspect-ratio: 16 / 9;
	}
}

/* Editorial tables are content, and some are far wider than a phone.
   They scroll inside their own box rather than widening the document —
   the "no horizontal scroll at 390px" line covers the PAGE, not a table
   that is legitimately wide. */
.gr-next .gr-article-body table,
.gr-next .e-content table { max-inline-size: 100%; }
.gr-next .gr-article-body .gn-tablescroll,
.gr-next .e-content .gn-tablescroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --- Card metadata sits on the card's floor ---------------------------
 * A row of cards is one object repeated, so the byline has to land on the
 * same line in every card whatever the headline above it does. Measured
 * on the Just-in row: a three-line headline pushed its byline a full line
 * below its neighbours', and the row read as three unrelated blocks.
 *
 * Two parts to it. The card must fill the grid row — grid stretches it
 * already, but only if nothing sets its height — and the meta takes the
 * slack with margin-block-start:auto, which is what puts every byline on
 * the same baseline regardless of how tall the title above it grew.
 *
 * Tagged explicitly rather than matched as :last-child, because on some
 * cards the last element IS the headline (the hero strip, the game rows)
 * and pushing THAT to the floor would be the opposite of the intent.
 * ------------------------------------------------------------------- */
.gr-next .gn-cardmeta {
	margin-block-start: auto;
	padding-block-start: 8px;
}
/* The card is a flex column already; this makes sure it uses the whole
   row height so there is slack for the meta to take. */
.gr-next .gr-3 > a,
.gr-next .gr-4 > a,
.gr-next .gr-stories > a,
.gr-next .gr-three > a,
.gr-next .gn-six > a,
.gr-next .gn-four > a,
.gr-next .gn-strip > a,
.gr-next .gn-relgrid > a,
.gr-next .gn-authgrid > a,
.gr-next .gn-strip > a {
	block-size: 100%;
	justify-content: flex-start;
}

/* THE RAILS STRETCH, THEY DO NOT TAKE A PERCENTAGE.
   A rail is a flex ROW of auto height, so `block-size: 100%` on a card
   has nothing definite to resolve against and silently falls back to the
   card's own content height — which is worse than doing nothing, because
   it also cancels the stretch the row would have given it for free.
   Measured on the reviews rail: cards 210 and 230 tall inside a 236 rail,
   with the bylines of the two-line titles sitting 20px lower than their
   neighbours'. align-self does what 100% was meant to. */
.gr-next .gr-rail-x { align-items: stretch; }
.gr-next .gr-rail-x > a {
	block-size: auto;
	align-self: stretch;
	justify-content: flex-start;
}

/* --- Game hub: the body, brought onto the design system ---------------
 * The head was rebuilt; everything under it was still the outgoing
 * theme's furniture — underlined section bars, a bordered REVIEW button,
 * circular colour-coded score badges in the rail. The markup is the
 * theme's and stays: only the skin moves.
 *
 * Mapping, live class -> design element:
 *
 *   .grc-section-title   the h2 with the blue triangle, no underline bar
 *   .grc-gh-review       the review row
 *   .grc-gamelist-*      the related-games rail rows
 *   .grc-row-*           the article index rows
 *   .grc-score           the square blue chip, not a coloured circle
 * ------------------------------------------------------------------- */

/* Section headings. The outgoing bar was a 2px blue rule under the whole
   heading; the design system marks a heading with the triangle alone. */
.gr-next .grc-gh-below .grc-section-title,
.gr-next .grc-gh .grc-section-title {
	margin: 0 0 14px;
	padding-block-end: 0;
	border-block-end: 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.01em;
	color: rgb(24, 23, 21);
	text-transform: none;
}
.gr-next .grc-gh-below .grc-section-title::before,
.gr-next .grc-gh .grc-section-title::before {
	inline-size: 11px;
	block-size: 11px;
	background: rgb(25, 118, 210);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	border-radius: 0;
}
.gr-next .grc-gh-below .grc-section-title::after,
.gr-next .grc-gh .grc-section-title::after { display: none; }

/* Blocks sit on their own space rather than inside bordered cards. */
.gr-next .grc-gh-block {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-block-end: 34px;
}

/* The review row: a hairline row, the chip square, the CTA a text link
   with the arrow suffix the design uses for section links. */
.gr-next .grc-gh-review {
	background: none;
	border: 0;
	border-block-start: 2px solid rgb(24, 23, 21);
	border-block-end: 1px solid rgb(232, 232, 232);
	border-radius: 0;
	padding: 14px 0;
	gap: 16px;
	align-items: center;
}
.gr-next .grc-gh-review-media { border-radius: 0; overflow: hidden; }
.gr-next .grc-gh-review-title {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 21px;
	color: rgb(24, 23, 21);
}
.gr-next .grc-btn.grc-gh-review-cta {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: rgb(0, 136, 204);
	text-transform: none;
}
.gr-next .grc-btn.grc-gh-review-cta::after { content: " →"; }

/* SCORE CHIPS ARE SQUARE AND BLUE. The outgoing badge is a circle whose
   colour changes with the band — five colours down a rail reads as five
   different kinds of thing. The design system scores in one blue chip and
   lets the number carry the meaning. */
.gr-next .grc-gh-below .grc-score,
.gr-next .grc-gamelist .grc-score {
	border-radius: 0;
	background: rgb(25, 118, 210);
	color: #fff;
	inline-size: auto;
	min-inline-size: 30px;
	block-size: auto;
	padding: 3px 8px;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 800;
	font-size: 14px;
	line-height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Related games: name over platforms, hairline rows, chip right —
   the same row the review rail uses, so the two agree. */
.gr-next .grc-gamelist { display: flex; flex-direction: column; gap: 0; }
.gr-next .grc-gamelist-item {
	border: 0;
	border-block-end: 1px solid rgb(232, 232, 232);
	border-radius: 0;
	background: none;
	padding: 0;
}
.gr-next .grc-gamelist-link {
	gap: 12px;
	align-items: center;
	padding: 9px 0;
	border-radius: 0;
}
.gr-next .grc-gamelist-link:hover { background: rgb(250, 250, 250); }
.gr-next .grc-gamelist-shot { border-radius: 0; overflow: hidden; }
.gr-next .grc-gamelist-name {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 18px;
	color: rgb(24, 23, 21);
}
.gr-next .grc-gamelist-sys {
	font-family: Arial, sans-serif;
	font-size: 11.5px;
	color: rgb(136, 136, 136);
}
.gr-next .grc-gamelist-rank {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 800;
	font-size: 13px;
	color: rgb(200, 200, 200);
}

/* The article index under the gallery: the site's row shape. */
.gr-next .grc-gh-below .grc-row {
	border: 0;
	border-block-end: 1px solid rgb(232, 232, 232);
	border-radius: 0;
	background: none;
	padding: 10px 0;
	gap: 14px;
	align-items: center;
}
.gr-next .grc-gh-below .grc-row:hover { background: rgb(250, 250, 250); }
.gr-next .grc-gh-below .grc-row:last-child { border-block-end: 0; }
.gr-next .grc-gh-below .grc-row-media { border-radius: 0; overflow: hidden; }
.gr-next .grc-gh-below .grc-row-tag {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(25, 118, 210);
}
.gr-next .grc-gh-below .grc-row-title {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 21px;
	color: rgb(24, 23, 21);
}
.gr-next .grc-gh-below .grc-row-meta,
.gr-next .grc-gh-below .grc-row-author {
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: rgb(136, 136, 136);
}

/* The gallery is a plain grid of square-cornered tiles. */
.gr-next .grc-gh-gallery-grid { gap: 10px; }
.gr-next .grc-gh-tile { border-radius: 0; overflow: hidden; }

/* --- Game hub: featured block ----------------------------------------
 * One, two or three reviews depending on the game, so the grid takes its
 * column count from how many there actually are — a single review reads
 * as a lead at full width, three as a row of equals.
 * ------------------------------------------------------------------- */
.gr-next .gn-featgrid { display: grid; gap: 20px; align-items: start; }
.gr-next .gn-featgrid--1 { grid-template-columns: minmax(0, 1fr); }
.gr-next .gn-featgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gr-next .gn-featgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gr-next .gn-featcard { block-size: 100%; }
.gr-next .gn-featcard-frame { aspect-ratio: 16 / 9; }
.gr-next .gn-featcard-img { transition: transform .5s ease; }
.gr-next .gn-featcard:hover .gn-featcard-img { transform: scale(1.03); }
/* The score rides the corner of the still, as it does on the related-review
   cards, so a reader scanning covers gets the verdict without reading. */
.gr-next .gn-featscore {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
	background: rgb(25, 118, 210);
	color: #fff;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 800;
	font-size: 16px;
	line-height: 20px;
	padding: 5px 10px;
}
/* A single featured review gets display sizing; a row of three gets card
   sizing, because three 30px headlines side by side is a wall. */
.gr-next .gn-featgrid--1 .gn-featcard-title { font-size: 28px; line-height: 32px; letter-spacing: -0.02em; }
.gr-next .gn-featgrid--2 .gn-featcard-title,
.gr-next .gn-featgrid--3 .gn-featcard-title { font-size: 17px; line-height: 22px; }
.gr-next .gn-featgrid--2 .gn-featcard-stand,
.gr-next .gn-featgrid--3 .gn-featcard-stand { font-size: 13.5px; line-height: 20px; }

.gr-next .gn-railgame:hover { color: rgb(0, 136, 204); }

@media (max-width: 980px) {
	.gr-next .gn-featgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.gr-next .gn-featgrid--2,
	.gr-next .gn-featgrid--3 { grid-template-columns: minmax(0, 1fr); }
	.gr-next .gn-featgrid--1 .gn-featcard-title { font-size: 22px; line-height: 26px; }
}

/* --- Video library: one control row -----------------------------------
 * SEARCH label over the field, the field taking the slack, SORT BY and
 * its two buttons on the same line — then the category tabs underneath.
 * The count is not here; the grid heading carries it.
 * ------------------------------------------------------------------- */
.gr-next .grc-vidsearch-row {
	align-items: flex-end;
	gap: 14px;
}
.gr-next .grc-vidsearch-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 320px;
	min-inline-size: 0;
	border: 0;
	background: none;
	padding: 0;
}
.gr-next .grc-vidsearch-caption {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(136, 136, 136);
}
.gr-next .grc-vidsearch-field input {
	inline-size: 100%;
	box-sizing: border-box;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	padding: 11px 13px;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
	background: #fff;
}
/* The sort sits on the row's baseline with the field and the button. */
.gr-next .grc-vidsearch-row .grc-vidsort-links {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}
/* The tabs close the block; the fold follows immediately, so the strip
   that used to sit between them is gone rather than left empty. */
.gr-next .grc-vidchips { margin-block: 14px 0; }
.gr-next .grc-vidarch .gr-fold { padding-block-start: 18px; }

/* --- Mobile: the brand band's claims --------------------------------
 * Flex-wrap packs them by width, so the four claims landed on ragged
 * rows with the second column starting wherever the first item ended.
 * On one column they become a real 2 x 2 grid: two even columns, every
 * bullet on the same left edge as the one above it.
 *
 * .gn-heroclaims is the same row on the gambling hub and the free-games
 * page, which had the same ragged packing — one rule for all three.
 * ------------------------------------------------------------------- */
@media (max-width: 620px) {
	.gr-next .gn-claims,
	.gr-next .gn-heroclaims {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 16px;
		align-items: start !important;
		/* THE ROW MUST FILL THE PAGE, or its second column lands short of
		   where everything else on the page sits. The brand band lays its
		   copy and its claims out as two flex items with space-between;
		   when they wrap onto separate lines the claims row takes its
		   CONTENT width, not the line's. Measured at 390: the claims row
		   302px wide against a headline of 358, so the right-hand bullets
		   lined up with nothing. */
		inline-size: 100%;
		min-inline-size: 0;
	}
	.gr-next .gn-claims > div,
	.gr-next .gn-heroclaims > div {
		min-inline-size: 0;
		align-items: start !important;
	}
	.gr-next .gn-claims span:last-child,
	.gr-next .gn-heroclaims span:last-child { text-wrap: pretty; }

	/*
	 * THE DOT SITS ON THE MIDDLE OF THE FIRST LINE, on instruction: bullet
	 * centred, label beside it.
	 *
	 * It was flush with the top of the label, which put it about 6px high —
	 * measured, dot centre 1069 against text centre 1075 — and read as a
	 * bullet floating above its own line.
	 *
	 * The obvious fix, align-items:center, is WRONG HERE and was checked
	 * before being rejected: at 390 the labels wrap to two lines on six
	 * markets (.dk .de .fr .es .nl .fi — "Vertrauenswürdig seit 2010",
	 * "Tests réalisés par des experts" and so on), and centring on the item
	 * would drop the dot into the gap between the two lines. Desktop keeps
	 * align-items:center because nothing wraps there.
	 *
	 * So: top-aligned, nudged down by half the difference between the line
	 * box and the dot — (18 - 7) / 2 — which lands it on the optical centre
	 * of the first line whether the label wraps or not. Written as the
	 * subtraction rather than 5.5px so it stays true if either value moves.
	 */
	.gr-next .gn-claims > div > span:first-child,
	.gr-next .gn-heroclaims > div > span:first-child {
		margin-block-start: calc((18px - 7px) / 2);
	}
}

/* --- Mobile: the games panel tabs -----------------------------------
 * "Top games this month / Games out this month / Upcoming games next
 * month" wrapped onto two and three lines at 390 and pushed the panel
 * down the page. They scroll on one line instead, like every other tab
 * strip on the site — .gr-tabs-x already does this, but the panel set
 * its own flex-wrap inline, which beat the class.
 * ------------------------------------------------------------------- */
@media (max-width: 620px) {
	.gr-next .gr-tabs-x {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.gr-next .gr-tabs-x::-webkit-scrollbar { display: none; height: 0; }
	.gr-next .gn-gtab { white-space: nowrap; flex-shrink: 0; }
}

/* The SEARCH caption is a label, so it sits on the field's left edge —
   it was inheriting the centred alignment of the band above it. */
.gr-next .grc-vidsearch-field { align-items: flex-start; }
.gr-next .grc-vidsearch-caption { text-align: start; }
/* The fold follows the tabs directly; the strip between them is gone. */
.gr-next .grc-vidarch .gr-fold { padding-block-start: 10px; }
.gr-next .grc-vidarch .gn-vidfold { margin-block-start: 0; }

/* --- The games panel's chip slot -------------------------------------
 * One position at the end of every row, two kinds of chip in it: the
 * blue score on the Top tab, the grey date on the two release tabs.
 * Same box, same alignment, so the three tabs line up with each other
 * as the reader switches between them.
 * ------------------------------------------------------------------- */
.gr-next .gn-gchip {
	flex-shrink: 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 800;
	font-size: 13px;
	line-height: 18px;
	padding: 5px 10px;
	text-align: center;
	white-space: nowrap;
}
.gr-next .gn-gchip--score {
	background: rgb(25, 118, 210);
	color: #fff;
	min-inline-size: 38px;
}
/* The date is a fact, not a verdict, so it takes the grey chip rather
   than the accent — and it is wider, because a date is five characters
   where a score is one. */
.gr-next .gn-gchip--date {
	background: rgb(240, 240, 240);
	color: rgb(24, 23, 21);
	min-inline-size: 62px;
}

/* --- Games index: score column, subline, sort links -------------------
 * Additive to the table the database already renders, so every existing
 * sort link and filter URL still means what it did.
 * ------------------------------------------------------------------- */
.gr-next .grc-gt-c--title a { display: block; }
.gr-next .grc-gt-sub {
	display: block;
	padding-block-start: 2px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: rgb(136, 136, 136);
}
.gr-next .grc-gt-h--score,
.gr-next .grc-gt-c--score { text-align: end; white-space: nowrap; }
.gr-next .grc-gt-score {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 800;
	font-size: 15px;
	color: rgb(25, 118, 210);
}
.gr-next .grc-gt-noscore { color: rgb(200, 200, 200); }

.gr-next .grc-gsum-sort { display: flex; flex-direction: row; gap: 14px; align-items: baseline; }
.gr-next .grc-gsum-sortlink {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	color: rgb(136, 136, 136);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}
.gr-next .grc-gsum-sortlink:hover { color: rgb(24, 23, 21); }
.gr-next .grc-gsum-sortlink.is-active { color: rgb(24, 23, 21); font-weight: 700; }

/* --- Games index: the filter panel -----------------------------------
 * The handoff's panel is SEARCH / PLATFORM / GENRE / YEAR as labelled
 * fields on one row with a Reset, and A–Z as a row of letters beneath.
 * The markup keeps its names and its query-string contract; the label
 * moves above its control and the controls take the width.
 * ------------------------------------------------------------------- */
.gr-next .grc-gf-pills {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}
.gr-next .grc-gf-pill {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	flex: 1 1 170px;
	min-inline-size: 0;
	border: 0;
	background: none;
	padding: 0;
	border-radius: 0;
}
.gr-next .grc-gf-pill .grc-gf-label {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(136, 136, 136);
}
.gr-next .grc-gf-selectwrap {
	position: relative;
	inline-size: 100%;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	background: #fff;
	padding: 0;
}
.gr-next .grc-gf-select {
	inline-size: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
	background: none;
	padding: 11px 30px 11px 13px;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
	appearance: none;
}
.gr-next .grc-gf-chev {
	position: absolute;
	inset-inline-end: 12px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: rgb(102, 102, 102);
}
/* Reset is an outline button, the design's least-loud affordance. */
.gr-next .grc-gf-reset {
	flex: 0 0 auto;
	border: 1px solid rgb(24, 23, 21);
	border-radius: 0;
	background: #fff;
	padding: 11px 16px;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgb(24, 23, 21);
	text-decoration: none;
}
.gr-next .grc-gf-reset:hover { background: rgb(24, 23, 21); color: #fff; }

/* The letter row, on its own hairline under the fields. */
.gr-next .grc-gf-letters {
	display: flex;
	flex-direction: row;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	margin-block-start: 14px;
	padding-block-start: 12px;
	border-block-start: 1px solid rgb(232, 232, 232);
}
.gr-next .grc-gf-letter {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: rgb(136, 136, 136);
	text-decoration: none;
	border-block-end: 2px solid transparent;
	padding-block-end: 3px;
}
.gr-next .grc-gf-letter:hover { color: rgb(24, 23, 21); }
.gr-next .grc-gf-letter.is-active {
	color: rgb(24, 23, 21);
	border-block-end-color: rgb(25, 118, 210);
}

@media (max-width: 620px) {
	.gr-next .grc-gf-pill { flex: 1 1 100%; }
	.gr-next .grc-gf-letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.gr-next .grc-gf-letters::-webkit-scrollbar { display: none; height: 0; }
	.gr-next .grc-gf-letter { flex-shrink: 0; }
}

/* The search field gets the same stacked label as the three selects, so
   the row reads as four labelled controls rather than a box and three
   labelled ones. The row becomes a grid to carry the label above. */
.gr-next .grc-gf-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "label label" "field button";
	gap: 5px 12px;
	align-items: center;
}
.gr-next .grc-gf-label--find { grid-area: label; }
.gr-next .grc-gf-find {
	grid-area: field;
	inline-size: 100%;
	box-sizing: border-box;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	padding: 11px 13px;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
	background: #fff;
}
.gr-next .grc-gf-cta { grid-area: button; }

/* The select needs its own line-height: the inherited one came from the
   panel and clipped the descender on "PC (8,159)". */
.gr-next .grc-gf-select { line-height: 1.45; block-size: auto; }

/* CLEAR FILTERS and RESET are the same action, and with the panel's Reset
   in place the summary line was offering it twice. The panel keeps it —
   it sits with the controls it clears. */
.gr-next .grc-gsum-clear { display: none; }

/* THE MONEY PAGE'S HEAD ALIGNS WITH ITS ARTICLE COLUMN, on instruction.
 *
 * Measured on /baccarat-casinos/: .gr-main below is 792px at x=74, and
 * .gr-side 300px at x=906 — the 1fr + 300px pair with a 40px gap that
 * .gr-cols sets. The head was running the full 1132 and starting a line
 * 340px wider than every line of the article under it.
 *
 * So the head takes the same pair. Not a hardcoded 792: the columns are
 * declared the same way the body declares them, so if the rail or the
 * wrap ever changes, the headline and the prose move together.
 *
 * (The earlier note here said the head ran full width. That was the fix
 * for a 90ch cap which had it at ~660 — narrower than the article. This
 * is the same intent stated properly: match the column, don't guess.)
 */
.gr-next .gn-moneyhero .gr-headgrid {
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
}
/* …and nothing inside it may be wider than that column. */
.gr-next .gn-moneyhero .gr-headgrid > * { max-inline-size: 100%; }
@media (max-width: 980px) {
	.gr-next .gn-moneyhero .gr-headgrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* The featured game needs air above it: it is the first thing under a
   full-bleed black hero, and it was sitting straight against the band. */
.gr-next .gn-garch .gn-lead { margin-block-start: 34px; }
@media (max-width: 620px) {
	.gr-next .gn-garch .gn-lead { margin-block-start: 22px; }
}

/* --- Search: the games-database panel, no rail -----------------------
 * Same control as /games/: a caption over a full-width field with the
 * accent button beside it, in a bordered panel. And the results run the
 * full width — a "most popular" column beside a result set competes with
 * the thing the reader came for.
 * ------------------------------------------------------------------- */
.gr-next .gn-searchgrid { grid-template-columns: minmax(0, 1fr); }

.gr-next .grc-searchpanel {
	box-sizing: border-box;
	border: 1px solid rgb(232, 232, 232);
	border-radius: 0;
	background: #fff;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-block-end: 24px;
}
.gr-next .grc-search-caption {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(136, 136, 136);
}
.gr-next .grc-searchform {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: stretch;
}
.gr-next .grc-searchfield {
	flex: 1 1 auto;
	min-inline-size: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	background: #fff;
	padding: 0 13px;
}
.gr-next .grc-searchicon { color: rgb(136, 136, 136); flex-shrink: 0; display: flex; }
.gr-next .grc-q {
	inline-size: 100%;
	border: 0;
	background: none;
	padding: 12px 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
}
.gr-next .grc-q:focus { outline: none; }
.gr-next .grc-searchfield:focus-within { border-color: rgb(25, 118, 210); }
.gr-next .grc-searchbtn {
	flex-shrink: 0;
	border: 1px solid rgb(25, 118, 210);
	border-radius: 0;
	background: rgb(25, 118, 210);
	padding: 12px 22px;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}
.gr-next .grc-searchbtn:hover { background: rgb(0, 136, 204); border-color: rgb(0, 136, 204); }

/* --- Video library: sections are not wraps ---------------------------
 * MEASURED: .grc-arch-main is 1132px, and the fold inside it rendered at
 * 976px with the card grid at 1100px. The part wraps each section in
 * .gr-wrap, but it renders INSIDE .grc-arch-main, which is already inside
 * .grc-wrap — so every section was paying a second max-width and a second
 * 16px of side padding. .gn-vidsec is a plain block; the page's own wrap
 * owns the width.
 * ------------------------------------------------------------------- */
.gr-next .gn-vidsec { inline-size: 100%; min-inline-size: 0; }

/* --- Video library: the featured clip --------------------------------
 * The games database's lead shape — artwork left, words right — so the
 * two library templates assert their lead the same way.
 * ------------------------------------------------------------------- */
/* Top-aligned, like the games database's lead — on instruction. The
   text column was centred against the artwork, so a short standfirst
   floated in the middle of a 357px row while /games/ starts its copy on
   the image's top edge. Measured: games lead align-items start, text at
   y=274 with the still; video was centre, text at y=331 against a still
   at 266. */
.gr-next .gn-vidfeature { margin-block: 26px 30px; align-items: start; }
.gr-next .gn-vidfeature-frame { aspect-ratio: 16 / 9; }
.gr-next .gn-vidfeature .gn-lead-img { transition: transform .5s ease; }
.gr-next .gn-vidfeature:hover .gn-lead-img { transform: scale(1.03); }
.gr-next .gn-vidfeature:hover h2 { color: rgb(0, 136, 204); }
/* A lead deserves a larger affordance than a card. */
.gr-next .gn-playdot--lead { inline-size: 64px; block-size: 64px; }
.gr-next .gn-playdot--lead::after {
	border-inline-start-width: 18px;
	border-block-start-width: 11px;
	border-block-end-width: 11px;
}
@media (max-width: 620px) {
	.gr-next .gn-vidfeature { margin-block: 18px 22px; }
	.gr-next .gn-vidfeature h2 { font-size: 24px !important; line-height: 28px !important; }
}

/* --- Single video: the body, onto the design system ------------------
 * The head was rebuilt; everything under it was still the outgoing
 * theme's furniture — a bordered "Published" box repeating the date
 * already in the head, a dark game card with icon rows, underlined
 * section bars, and belt cards with the title burned into the image.
 *
 * Markup is the theme's and keeps its queries; this is a skin pass.
 * ------------------------------------------------------------------- */

/* The date is in the head's byline. A bordered box repeating it under
   the player is the same fact twice, boxed. */
.gr-next .grc-vid-published { display: none; }

/* The channel tag becomes the accent eyebrow every other template uses. */
.gr-next .grc-vid-tags { margin-block: 16px 0; }
.gr-next .grc-vid-tag {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(25, 118, 210);
}

/* Section headings: triangle, sentence case, no underline bar. */
.gr-next .grc-vidbelt .grc-section-title,
.gr-next .grc-vid-main .grc-section-title {
	margin: 0 0 14px;
	padding-block-end: 0;
	border-block-end: 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.01em;
	color: rgb(24, 23, 21);
	text-transform: none;
}
.gr-next .grc-vidbelt .grc-section-title::before,
.gr-next .grc-vid-main .grc-section-title::before {
	inline-size: 11px;
	block-size: 11px;
	background: rgb(25, 118, 210);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	border-radius: 0;
}
.gr-next .grc-vidbelt .grc-section-title::after,
.gr-next .grc-vid-main .grc-section-title::after { display: none; }

/* THE GAME BOX becomes the review rail's facts block: light, hairline
   rows, no icon column. A dark card in a light rail was the only dark
   panel on the page and read as an advert. */
.gr-next .grc-vidbox {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: inherit;
}
.gr-next .grc-vidbox-cover { border-radius: 0; overflow: hidden; margin-block-end: 12px; }
.gr-next .grc-vidbox-title {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 21px;
	color: rgb(24, 23, 21);
	margin-block-end: 4px;
}
.gr-next .grc-vidbox-rows { display: flex; flex-direction: column; }
.gr-next .grc-vidbox-rows > * {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 0;
	border-block-end: 1px solid rgb(232, 232, 232);
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 18px;
	color: rgb(24, 23, 21);
}
.gr-next .grc-vidbox-rows > *:last-child { border-block-end: 0; }
/* The icons carried the meaning of each row; without labels they are the
   only thing saying "publisher" rather than "developer", so they stay —
   just neutral rather than white-on-dark. */
.gr-next .grc-gh-icon { color: rgb(136, 136, 136); flex-shrink: 0; }
.gr-next .grc-vidbox .grc-btn {
	display: block;
	border: 1px solid rgb(24, 23, 21);
	border-radius: 0;
	background: #fff;
	padding: 10px 14px;
	margin-block-start: 14px;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgb(24, 23, 21);
	text-align: center;
}
.gr-next .grc-vidbox .grc-btn:hover { background: rgb(24, 23, 21); color: #fff; }

/* Belt cards take the library's card: image, then title and meta BELOW
   it. The outgoing card laid the title over the still, which on a
   thumbnail that is already a title card is two titles in one frame. */
.gr-next .grc-vidcard {
	background: none;
	border: 0;
	border-radius: 0;
}
.gr-next .grc-vidcard-media { border-radius: 0; overflow: hidden; }
.gr-next .grc-vidcard-body {
	position: static;
	background: none;
	padding: 9px 0 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.gr-next .grc-vidcard-title {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 15.5px;
	line-height: 20px;
	color: rgb(24, 23, 21);
	text-shadow: none;
	text-wrap: pretty;
}
.gr-next .grc-vidcard-date {
	font-family: Arial, sans-serif;
	font-size: 12.5px;
	color: rgb(136, 136, 136);
	text-shadow: none;
}
/* The play affordance is the site's circle, not a corner square. */
.gr-next .grc-vidcard-badge,
.gr-next .grc-vidcard-tri { display: none; }
.gr-next .grc-vidcard-media { position: relative; }
.gr-next .grc-vidcard-media::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: rgba(24, 23, 21, 0.72);
	border: 2px solid rgba(255, 255, 255, 0.9);
}
.gr-next .grc-vidcard-media::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline-start: calc(50% + 2px);
	inset-block-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 0;
	block-size: 0;
	border-inline-start: 12px solid #fff;
	border-block-start: 7px solid transparent;
	border-block-end: 7px solid transparent;
}

.gr-next .grc-btn.grc-vidbelt-more {
	border: 1px solid rgb(24, 23, 21);
	border-radius: 0;
	background: #fff;
	padding: 11px 18px;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgb(24, 23, 21);
}
.gr-next .grc-btn.grc-vidbelt-more:hover { background: rgb(24, 23, 21); color: #fff; }

/* The search field takes the whole control row now that the submit button
   is gone — it submits on Enter, which is what the design draws. */
.gr-next .grc-gf-row { grid-template-columns: 1fr; grid-template-areas: "label" "field"; }
.gr-next .grc-vidsearch-row .grc-vidsearch-field { flex: 1 1 420px; }

/* --- Games index: the filter panel is ONE control row -----------------
 * DESIGN VS LIVE. The artboard puts SEARCH, PLATFORM, GENRE, YEAR and
 * RESET on a single line, with the A–Z jump on its own line under a
 * hairline. Live had the search field on its own full-width row above
 * the three selects, so the panel read as two separate bands of
 * controls and stood twice as tall as it is drawn.
 *
 * The markup is untouched: .grc-gf-row (the search) and .grc-gf-pills
 * (the selects + Reset) both carry the un-switched theme's layout too.
 * The FORM becomes the row and those two become its children, so the
 * query-string contract every filter link depends on does not move.
 * ------------------------------------------------------------------- */
.gr-next .grc-gf {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 20px 22px;
}
/* SEARCH is the wide control — roughly 27% of the row, the three selects
   and the Reset sharing the rest, which is the artboard's proportion. */
.gr-next .grc-gf-row   { flex: 1.35 1 230px; gap: 5px 12px; }
.gr-next .grc-gf-pills { flex: 3 1 520px; gap: 12px; margin: 0; }
.gr-next .grc-gf-letters { flex: 1 1 100%; margin-block-start: 6px; padding-block-start: 16px; }

/* One height for every control on the row. Left to their own padding the
   select sat at 44px and the Reset at 40px, which is the ragged bottom
   edge in the comparison. */
.gr-next .grc-gf-find,
.gr-next .grc-gf-selectwrap,
.gr-next .grc-gf-reset {
	block-size: 44px;
	box-sizing: border-box;
}
.gr-next .grc-gf-select { block-size: 100%; padding-block: 0; }
.gr-next .grc-gf-reset {
	display: inline-flex;
	align-items: center;
	padding-block: 0;
	padding-inline: 18px;
}

/* ONE FOCUS RING, ON THE CONTROL. .grc-gf-pill:focus-within draws an
   outline around the whole label+control group, and the select draws its
   own inside it — the two nested blue boxes in the comparison. Under the
   facelift the group is a stack, not a chip, so the ring belongs to the
   box the reader is actually in, drawn the way the artboard draws it: a
   blue border, not an offset outline. */
.gr-next .grc-gf-pill:focus-within,
.gr-next .grc-gf-select:focus-visible { outline: none; }
.gr-next .grc-gf-selectwrap:focus-within,
.gr-next .grc-gf-find:focus-visible {
	outline: none;
	border-color: rgb(25, 118, 210);
	box-shadow: inset 0 0 0 1px rgb(25, 118, 210);
}

/* The field labels read a shade darker than the card meta grey — they
   label a control, not a byline. */
.gr-next .grc-gf-label,
.gr-next .grc-gf-pill .grc-gf-label { color: rgb(110, 110, 110); }

/* The letter row fills the panel on one line at desktop, which is the
   even spread the artboard draws. Below that it wraps (and below 620 it
   scrolls, set further up), where space-between would rag the last row. */
@media (min-width: 981px) {
	.gr-next .grc-gf-letters { justify-content: space-between; }
}
@media (max-width: 620px) {
	.gr-next .grc-gf-row { flex: 1 1 100%; }
	.gr-next .grc-gf { padding: 16px; }
}

/* The pill inherits block-size:36px from the chip it used to be. As a
   label-over-control stack that fixed height is a ceiling: the 44px
   control was shrinking to 22px inside it, which is the squashed row and
   the labels sitting lower than the SEARCH label beside them. */
.gr-next .grc-gf-pill { block-size: auto; }
.gr-next .grc-gf-find,
.gr-next .grc-gf-selectwrap,
.gr-next .grc-gf-reset { flex-shrink: 0; }

/* --- Games index on a phone: the table folds into rows ----------------
 * At 390px the five-column table had nowhere to go — the title ran into
 * the platform list, the release date collided with the genre, and the
 * SCORE column fell off the right edge. A horizontal scroller is not the
 * answer either: this is the page's main content, not an aside.
 *
 * So below 620px each row becomes what the rest of the site's mobile
 * lists already are — a title with its developer, one grey meta line
 * (platforms · genre · release), and the score held at the right edge.
 * The header row goes with it: its only extra function is the sort
 * arrows, and the Newest / Highest rated / A–Z row above does that in
 * a control the thumb can actually hit.
 * ------------------------------------------------------------------- */
@media (max-width: 620px) {
	.gr-next .grc-gt-scroll { overflow-x: visible; }
	.gr-next .grc-gt { display: block; }
	.gr-next .grc-gt thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.gr-next .grc-gt tbody { display: block; }
	/* ONE GRID PER ROW, so the three meta values stay on one line and the
	   platform list — the only one that can run long — is the one that
	   truncates. A flex row let them wrap instead, which stranded a lone
	   separator at the start of the second line. */
	.gr-next .grc-gt tbody tr {
		display: grid;
		/* The empty 1fr column is the slack. Without it the platform
		   column took every spare pixel and pushed genre and release
		   date over to the right edge, so a row with one platform read
		   as three values scattered across the screen. */
		grid-template-columns: minmax(0, auto) auto auto 1fr 44px;
		grid-template-areas:
			"title title title title score"
			"sys   genre date  .     score";
		column-gap: 7px;
		row-gap: 3px;
		align-items: baseline;
		padding-block: 13px;
		border-block-end: 1px solid rgb(232, 232, 232);
	}
	.gr-next .grc-gt tbody td.grc-gt-c {
		display: block;
		padding: 0;
		border: 0;
		max-inline-size: none;
	}
	.gr-next .grc-gt-c--title { grid-area: title; }
	.gr-next .grc-gt-c--meta {
		font-family: Arial, sans-serif;
		font-size: 12px;
		line-height: 18px;
		color: rgb(136, 136, 136);
		min-inline-size: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.gr-next .grc-gt tbody td.grc-gt-c--meta:nth-child(2) { grid-area: sys; }
	.gr-next .grc-gt tbody td.grc-gt-c--meta:nth-child(3) { grid-area: genre; }
	.gr-next .grc-gt tbody td.grc-gt-c--date { grid-area: date; }
	/* A separator only between two meta values that are both present —
	   an em-dash cell is dropped rather than printed as "— · — · —". */
	.gr-next .grc-gt { min-inline-size: 0; }
	.gr-next .grc-gt tbody td.grc-gt-c { inline-size: auto; }
	.gr-next .grc-gt tbody td.grc-gt-c--meta.is-empty { display: none; }
	.gr-next .grc-gt-c--meta:not(.is-empty) ~ .grc-gt-c--meta:not(.is-empty)::before {
		content: "\B7";
		padding-inline-end: 7px;
		color: rgb(200, 200, 200);
	}
	.gr-next .grc-gt-c--score {
		grid-area: score;
		align-self: start;
		text-align: end;
	}

	/* theme.css caps the select at 140px on a phone, which truncated
	   "All platforms" inside a control with 250px of room. */
	.gr-next .grc-gf-select { max-inline-size: none; }
}

/* The clip's format tags now sit in the dark head beside the date, so
   they take the band's ink: a hairline chip on the dark, not the light
   pill they were as the only thing in an empty body column. */
.gr-next .grc-vid-tag--head {
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: none;
	color: rgb(224, 226, 227);
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 0;
	line-height: 1;
}

/* …and with the chip gone from the video crumb, its bullets come back.
   theme.css suppresses a separator either side of .gr-crumb-section
   because there it is a solid chip that reads as its own object; here it
   is a plain link like the two beside it, so the row was running
   "Gamereactor Videos EV Hour" with nothing between the words. */
.gr-next .grc-vid-head .gr-post-crumbs > * + *::before {
	content: "\2022";
	margin-inline-end: 5px;
	font-size: 14.3px;
	color: rgb(171, 176, 178);
}

/* The short player's blurred backdrop — see parts/video-player.php. The
   video paints its poster contained over the top, so the real still is
   never cropped; the blur only fills the frame around it. */
.gr-next .grc-player--portrait { position: relative; overflow: hidden; }
.gr-next .grc-player--portrait .grc-player-blur {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(26px) brightness(0.5);
	transform: scale(1.15);
	z-index: 0;
}
.gr-next .grc-player--portrait .grc-player-video {
	position: relative;
	z-index: 1;
	background: transparent;
	object-fit: contain;
}
.gr-next .grc-player--portrait .grc-player-play { z-index: 2; }

/* --- Game hub gallery on a phone -------------------------------------
 * theme.css drops the mosaic to one column and gives the four small
 * stills a fixed 240px band, which squeezed them to a shape no still
 * fits — trailer cards came out with their own titles cropped in half.
 * Here the lead still spans the width and the other four sit under it as
 * an even 2x2 of 16:9 tiles: five stills, no orphan row, no crop that
 * the image was not made for.
 * ------------------------------------------------------------------- */
@media (max-width: 620px) {
	.gr-next .grc-gh-gallery {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		block-size: auto;
	}
	.gr-next .grc-gh-gallery > .grc-gh-tile:first-child { grid-column: 1 / -1; }
	.gr-next .grc-gh-gallery-grid { display: contents; }
	.gr-next .grc-gh-gallery .grc-gh-tile { aspect-ratio: 16 / 9; block-size: auto; }
}


/* --- The rail's Guides / Articles rows on a phone ---------------------
 * In the 300px rail a row is "title … byline" on one line. At 390px the
 * two fight for the same line: the headline wraps to three lines while
 * the byline sits at the right edge beside the first of them. Below 620
 * the row stacks, so the byline reads as what it is — the card meta
 * pattern the rest of the page already uses.
 * ------------------------------------------------------------------- */
@media (max-width: 620px) {
	.gr-next .gn-listrow { flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; }
	.gr-next .gn-listrow-by { font-size: 11.5px !important; line-height: 16px !important; }
}

/* --- The SlotsLaunch archive's own filter panel ------------------------
 * "Discover all games" on the Free Games page is the plugin's shortcode,
 * and it ships its own controls: pill-rounded selects, a 54px search box
 * with a floating magnifier, its own greys. Next to the rebuilt page
 * above it they read as a different website.
 *
 * The markup is the plugin's and stays untouched — this only restates
 * the panel in the design system's terms: square edges, the hairline
 * border, Outfit, and the same 44px control height the games database
 * filter row uses. Class names below are the plugin's public ones
 * (.slotsl-*), so a plugin update that renames them loses the skin and
 * shows its own — never a broken layout.
 * ------------------------------------------------------------------- */
.gr-next .slotsl-filters {
	border: 1px solid rgb(232, 232, 232);
	border-radius: 0;
	background: none;
	padding: 18px;
}
.gr-next .slotsl-filters .sl-filter-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.gr-next .slotsl-search {
	position: relative;
	flex: 1 1 260px;
	min-inline-size: 0;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	background: #fff;
	block-size: 44px;
	box-sizing: border-box;
	padding: 0;
}
.gr-next .slotsl-search input[type="text"] {
	inline-size: 100%;
	block-size: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0 44px 0 13px;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
}
.gr-next .slotsl-search .sl-submit-search {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 0;
	block-size: 100%;
	inline-size: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: none;
	color: rgb(102, 102, 102);
	cursor: pointer;
}
.gr-next .slotsl-search .sl-submit-search svg { block-size: 17px; inline-size: 17px; }
.gr-next .slotsl-providers {
	flex: 1 1 170px;
	min-inline-size: 0;
	margin: 0;
}
.gr-next .slotsl-select,
.gr-next .slotsl-filters select {
	inline-size: 100%;
	block-size: 44px;
	box-sizing: border-box;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	background: #fff;
	padding: 0 13px;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
}
/* The Megaways toggle is a label and a checkbox in a box of its own. */
.gr-next .slotsl-megaways {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 0 1 auto;
	block-size: 44px;
	box-sizing: border-box;
	border: 1px solid rgb(226, 226, 226);
	padding-inline: 13px;
	font-family: 'Outfit', Arial, sans-serif;
	font-size: 14px;
	color: rgb(24, 23, 21);
}

/* The tiles: square corners and the site's card type, so the plugin's
   grid and the theme's own belts above it read as one page. */
.gr-next .slotsl-game,
.gr-next .slotsl-thumb,
.gr-next .slotsl-thumb img { border-radius: 0; }
.gr-next .slotsl-title {
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 19px;
	color: rgb(24, 23, 21);
}
.gr-next .slotsl-provider {
	font-family: Arial, sans-serif;
	font-size: 11.5px;
	color: rgb(136, 136, 136);
}
.gr-next .slotsl-load-more a,
.gr-next .slotsl-load-more button {
	border-radius: 0;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* WHITE ON WHITE — every game name on the Free Games archive was
   invisible. Not the plugin's doing: slots.css, written for the dark slot
   cards, sets `color: #fff !important` on .slotsl-title a|span, and the
   plugin's own rule under it says #000. On this page's white ground that
   left the title element in the layout, its 46px of space reserved, and
   nothing readable in it. Measured: rgb(255,255,255) on rgba(0,0,0,0).

   Matched selector plus !important, because that is what it takes to beat
   an !important; the dark cards keep their own rule since the facelift
   draws those with the theme's card, not the plugin's tile. */
.gr-next :is(.slotsl-container, .slotsl-lobby) .slotsl-meta .slotsl-title a,
.gr-next :is(.slotsl-container, .slotsl-lobby) .slotsl-meta .slotsl-title span,
.gr-next .slotsl-title .slotsl-url,
.gr-next .slotsl-title a {
	color: rgb(24, 23, 21) !important;
	font-family: 'Outfit', Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 14.5px !important;
	line-height: 19px !important;
	text-decoration: none !important;
}
.gr-next :is(.slotsl-container, .slotsl-lobby) .slotsl-meta .slotsl-title a:hover,
.gr-next :is(.slotsl-container, .slotsl-lobby) .slotsl-meta .slotsl-title span:hover,
.gr-next .slotsl-title a:hover { color: rgb(25, 118, 210) !important; }

/* --- Legacy content columns on a phone --------------------------------
 * /staff/ and friends carry the OLD page layout inside the body copy:
 * .colwide beside .colthin, plus fixed .col204 / .col417 blocks, baked in
 * by the migration and given hard pixel widths by theme.css. The page
 * template deliberately stands down where the content brings its own
 * .colthin — but nothing then made those columns responsive, so /staff/
 * was still two columns at 390px: a 190px column of prose next to a
 * 120px rail with every editor's name broken over three lines.
 *
 * Desktop keeps the two columns, which is what the page was written for.
 * Below 900px they stack. !important because the widths they are beating
 * are !important themselves.
 * ------------------------------------------------------------------- */
@media (max-width: 900px) {
	.gr-next .gn-pagecols .colwide,
	.gr-next .gn-pagecols .colthin,
	.gr-next .gn-pagecols .colwide_grtv,
	.gr-next .gn-pagecols .col204,
	.gr-next .gn-pagecols .col417,
	.gr-next .gr-article-body .col204,
	.gr-next .gr-article-body .col417 {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		float: none !important;
		margin-inline: 0;
	}
	/* The staff rail reads as a list under the bio, not as a sidebar. */
	.gr-next .gn-pagecols .colthin { margin-block-start: 24px; }
}

/* The small score badge, for the six-card row on a section archive. The
   lead keeps the full-size one. */
.gr-next .gn-featscore--sm {
	font-size: 13px;
	line-height: 17px;
	padding: 4px 8px;
}

/* --- The hero lead headline on a phone --------------------------------
 * 46px/48 is the artboard's desktop size and it is right there. At 390px
 * the same 46px ran the lead story to six lines and 336px of headline
 * before the standfirst. 34px on instruction, with the line height and
 * the accent triangle scaled to match so the block keeps its proportions.
 * ------------------------------------------------------------------- */
@media (max-width: 620px) {
	.gr-next .gn-hero-h {
		font-size: 34px !important;
		line-height: 37px !important;
		letter-spacing: -0.028em !important;
		max-width: none !important;
	}
	.gr-next .gn-hero-h > span:first-child {
		width: 15px !important;
		height: 15px !important;
		margin-right: 10px !important;
	}
}

/* ── Links on a dark ground ───────────────────────────────────────────────
 *
 * This began as one hand-set colour on the WATCH band's "All …" link. It is
 * a token now (--gr-link-on-dark) and applied to every dark band, which is
 * what was asked for: one answer to "what colour is a link on black"
 * instead of one component's answer.
 *
 * MATCHED ON THE INLINE VALUE, deliberately. Every one of these parts writes
 * `color:rgb(0,136,204)` into a style attribute — the byline author on the
 * post, review, game, hub, money and archive heads, the author box, and the
 * two "All …" links — so an attribute match is both the only thing that can
 * reach them without !important-ing a blanket `a` rule, and an exact
 * description of the set: elements that render the WHITE-GROUND link colour
 * on a DARK ground. Nothing else is touched.
 *
 * That precision matters, because two link colours on these bands are
 * deliberate and must survive: the verifier at rgb(215,217,219) and the
 * affiliate disclosure at rgb(136,136,136). Neither carries the inline blue,
 * so neither matches. A blanket `.gn-moneyhero a` rule would have taken both.
 *
 * !important is needed for the same reason the match is: an inline style
 * beats any selector. This is ticket OUT-1 in miniature — when those inline
 * colours move to classes, this whole block collapses to `a { color:
 * var(--gr-link-on-dark) }` scoped to the bands.
 */
.gr-next .hr-bleed [style*="rgb(0,136,204)"],
.gr-next .hr-dark [style*="rgb(0,136,204)"],
.gr-next .gn-archhero [style*="rgb(0,136,204)"],
.gr-next .gn-authhero [style*="rgb(0,136,204)"],
.gr-next .gn-authorbox [style*="rgb(0,136,204)"],
.gr-next .gn-fghero [style*="rgb(0,136,204)"],
.gr-next .gn-gamehead [style*="rgb(0,136,204)"],
.gr-next .gn-hubhero [style*="rgb(0,136,204)"],
.gr-next .gn-moneyhero [style*="rgb(0,136,204)"],
.gr-next .gn-pagehero [style*="rgb(0,136,204)"],
.gr-next .gn-posthead [style*="rgb(0,136,204)"],
.gr-next .gn-revhead [style*="rgb(0,136,204)"],
.gr-next .gn-verdictcard [style*="rgb(0,136,204)"],
.gr-next .gn-vidfeature-frame [style*="rgb(0,136,204)"] {
	color: var(--gr-link-on-dark) !important;
}
.gr-next .hr-bleed a[style*="rgb(0,136,204)"]:hover,
.gr-next .hr-dark a[style*="rgb(0,136,204)"]:hover,
.gr-next .gn-authorbox a[style*="rgb(0,136,204)"]:hover,
.gr-next .gn-moneyhero a[style*="rgb(0,136,204)"]:hover,
.gr-next .gn-posthead a[style*="rgb(0,136,204)"]:hover,
.gr-next .gn-revhead a[style*="rgb(0,136,204)"]:hover {
	color: rgb(255, 255, 255) !important;
}

/* --- Homepage: the casino strip's own spacing ------------------------
 * gn-casino added 38px below itself on top of .hr-sec's 24px above the
 * next block, so the previews sat in roughly 62px of white. The 38px is
 * gone. The top padding stayed at 0 for one release and put the heading
 * straight under the games panel's "All games" link, so it is back at
 * 26px — the space is above the block now instead of below it.
 * ------------------------------------------------------------------- */
.gr-next .hr-sec--casino { padding-block: 26px 0; }

/* --- A horizontal strip must not also scroll vertically ---------------
 * `overflow-x: auto` computes overflow-y to `auto` as well, so every one
 * of these strips is a two-axis scroller: on a phone the games panel's
 * tab row could be dragged a few pixels up and down, which reads as the
 * tabs wobbling under the thumb. They are one line of text and there is
 * nothing below it to reach.
 * ------------------------------------------------------------------- */
.gr-next .gr-tabs-x,
.gr-next .gr-rail-x,
.gr-next .grc-vidchips,
.gr-next .grc-gf-letters,
.gr-next .grc-tabs { overflow-y: hidden; }

/* --- The act band's word: a column on desktop, a watermark on mobile ---
 * DESKTOP IS THE ARTBOARD'S OWN LAYOUT and stays that way, on
 * instruction: .gr-act is a two-column grid with the copy on the left and
 * the 104px word set beside it on the right.
 *
 * Below 861px that grid stacks, and the word dropped underneath the
 * paragraph as a stray line of grey text — which is the state this rule
 * exists to fix. There it comes out of flow and sits BEHIND the heading
 * as the background device it is: clipped to the band, inert to the
 * pointer, taking no space of its own.
 * ------------------------------------------------------------------- */
@media (max-width: 860px) {
	.gr-next .gr-act {
		position: relative;
		overflow: hidden;
		min-block-size: 92px;
	}
	.gr-next .gr-act > div:first-child {
		position: relative;
		z-index: 1;
	}
	.gr-next .gr-actword {
		display: block;
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 50%;
		transform: translateY(-50%);
		z-index: 0;
		pointer-events: none;
		user-select: none;
		white-space: nowrap;
	}
}

/* --- Slot cards are the plugin's play control ------------------------
 * The card used to be an <a> carrying its layout inline. It is now
 * whatever slotsl_game_link() returns — an <a> where single game pages
 * are public, a <span role="button"> where they are not — so the layout
 * moves here, and the stretch rules that said "> a" have to stop saying
 * that or a span card loses its bottom-aligned meta line.
 * ------------------------------------------------------------------- */
.gr-next .gn-slotcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-inline-size: 0;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
.gr-next .gn-slotcard:focus-visible { outline: 2px solid rgb(25, 118, 210); outline-offset: 3px; }
.gr-next .gr-rail-x > .gn-slotcard,
.gr-next .gn-strip > .gn-slotcard,
.gr-next .gn-four > .gn-slotcard {
	block-size: 100%;
	align-self: stretch;
	justify-content: flex-start;
}

/* The plugin's tiles carry a white play pill beside the FREE DEMO tag —
   slots.css restyles .slotsl-thumb-url into that tag and its ::after
   triangle is left over from the pill it used to be. On the tag it reads
   as a stray white square. */
.gr-next :is(.slotsl-container, .slotsl-lobby) .slotsl-thumb-url::after { content: none; }

/* --- By-day indexes: no rule under the last row of a day -------------
 * Each day group is a .gn-daygrid that opens on its own hairline, and
 * every row inside it closes on one. That put two rules 9px apart at
 * every group boundary — the last row's and the next day's — and a rule
 * hanging under the final row of the whole list with nothing beneath it.
 *
 * The colour goes rather than the border: dropping the width would pull
 * each group's last row 1px up and break the rhythm the other rows set.
 *
 * One rule, three templates: the section archives (parts/gn-archive),
 * the author archive (parts/gn-author) and the game hub's All articles
 * (parts/gn-gamearchive) all render .gn-dayrow inside .gn-daygrid. The
 * homepage's flat "latest" index is deliberately not matched — it has no
 * day groups, so its rules are separating rows, not closing a set.
 * ------------------------------------------------------------------- */
.gr-next .gn-daygrid .gn-dayrow:last-child {
	border-block-end-color: transparent !important;
}

/* With the rail gone from a clip, the body block is a single column —
   .gr-body's 1fr + 300px pair would otherwise keep reserving the 300. */
.gr-next .gr-post--video .gr-body { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* --- "How we rate" takes the site blue ------------------------------
 * The block was drawn on --hp-cyan (#34b2e9), the outgoing theme's
 * accent for dark bands, so its weight bars, percentages and inline link
 * were a different blue from the hero directly above them on the same
 * page. One token, one blue.
 *
 * Contrast note: rgb(25,118,210) on the band's near-black is about
 * 3.5:1 — fine for the 16px/800 percentages and the 4px bars, tight for
 * the 14px inline link, which is why the link keeps a lift on hover.
 * ------------------------------------------------------------------- */
.gr-next .grc-hwr { --hwr-accent: rgb(25, 118, 210); }

/* Empty gambling archives: join the two dark bands when no figures or
   guides intervene. Populated archives retain their section spacing. */
.gr-next .gn-hubbody { padding-block: 32px 48px; }
.gr-next .gn-hubhero + .gn-hubbody { padding-block-start: 0; }
.gr-next .gn-hubhero + .gn-hubbody > div > .grc-hwr:first-child {
	margin-block-start: 0;
}

/* Keep the 492x216 artwork compact and render it at 2x density. */
.gr-next .gn-404 .grc-404-inner {
	max-inline-size: 640px;
	inline-size: 100%;
}
.gr-next .gn-404 .grc-404-ghost {
	inline-size: min(246px, 100%);
	block-size: auto;
}

/* --- The money page's intro expander is a phone control ---------------
 * The hero intro collapses behind a More / Less toggle so a 300-word
 * standfirst does not fill a phone screen before the reader reaches the
 * toplist. On a desktop viewport the whole intro already fits and is
 * shown expanded by default, so the only thing the control can do there
 * is make the page worse — and it was rendering as a stray "Less" at the
 * end of the paragraph.
 *
 * Hidden above 620px, and the full intro is pinned open there so a
 * collapsed state cannot survive a resize with no way to undo it.
 * ------------------------------------------------------------------- */
@media (min-width: 621px) {
	.gr-next .gn-moneyhero .intro-toggle { display: none !important; }
	.gr-next .gn-moneyhero .intro-full { display: block !important; }
	.gr-next .gn-moneyhero .intro-teaser { display: none !important; }
}

/* --- Pagination, in the design system --------------------------------
 * It had no facelift rules at all, so every paginated template — the
 * section archives, search, the author archive, the games database, the
 * video library, the game hub — was still drawing the outgoing theme's
 * control: 2px rounded corners, the old border token, a tinted current
 * page and body-face digits, under pages rebuilt square in Outfit.
 *
 * Same component, restated: square, hairline, Outfit, and the accent as a
 * solid fill on the page you are on rather than a wash behind it. The
 * markup is untouched — parts/pagination.php already emits the window
 * with ellipses and chevrons that the artboard draws.
 * ------------------------------------------------------------------- */
.gr-next .grc-pagination {
	gap: 8px;
	margin-block-start: 28px;
	padding-block-start: 20px;
	border-block-start: 1px solid rgb(232, 232, 232);
}
.gr-next .grc-page {
	min-inline-size: 40px;
	min-block-size: 40px;
	padding-inline: 10px;
	border: 1px solid rgb(226, 226, 226);
	border-radius: 0;
	background: #fff;
	font-family: 'Outfit', Arial, sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: rgb(24, 23, 21);
	font-variant-numeric: tabular-nums;
}
.gr-next .grc-page:hover,
.gr-next .grc-page:focus-visible {
	border-color: rgb(24, 23, 21);
	color: rgb(24, 23, 21);
}
.gr-next .grc-page--current,
.gr-next .grc-page--current:hover {
	background: rgb(25, 118, 210);
	border-color: rgb(25, 118, 210);
	color: #fff;
	font-weight: 700;
}
/* The ellipsis is a spacer, not a control: no box, no hover. */
.gr-next .grc-page--gap {
	border: 0;
	background: none;
	min-inline-size: 16px;
	color: rgb(170, 170, 170);
}
.gr-next .grc-page--gap:hover { border: 0; color: rgb(170, 170, 170); }
.gr-next .grc-page--arrow { color: rgb(102, 102, 102); }
.gr-next .grc-page--arrow:hover { color: rgb(24, 23, 21); }

@media (max-width: 620px) {
	.gr-next .grc-pagination { gap: 6px; margin-block-start: 22px; padding-block-start: 16px; }
	.gr-next .grc-page { min-inline-size: 42px; min-block-size: 42px; padding-inline: 8px; }
}

/* --- Video library: the search block is the games panel --------------
 * On instruction, /video/ takes the same experience as /games/: one
 * bordered panel holding the labelled controls, with the category row
 * beneath them under a hairline — the shape the A-Z row has there.
 *
 * AND THE FIELD SIZES TO ITS CONTENT. theme.css gives
 * .grc-vidsearch-field a fixed height from when the field WAS the input;
 * as a label-over-input stack that height is a ceiling, and the input
 * hung out of the bottom of its own box. Measured at 1280: box 54px tall
 * at y=669, input running to y=736. At 414 that overflow ran the input
 * into the sort buttons — 5px of overlap, which is why they touched.
 * ------------------------------------------------------------------- */
.gr-next .grc-vidsearch {
	border: 1px solid rgb(232, 232, 232);
	padding: 20px 22px;
	margin-block-end: 22px;
}
.gr-next .grc-vidsearch-row {
	align-items: flex-end;
	gap: 12px 22px;
}
.gr-next .grc-vidsearch-field {
	block-size: auto;
	min-block-size: 0;
}
.gr-next .grc-vidsearch-field input {
	block-size: 44px;
	box-sizing: border-box;
}
.gr-next .grc-vidsearch-caption { color: rgb(110, 110, 110); }
.gr-next .grc-vidsearch-row .grc-vidsort-links { gap: 10px; }
.gr-next .grc-vidsort-label { color: rgb(110, 110, 110); }
.gr-next .grc-vidsort-link { block-size: 44px; display: inline-flex; align-items: center; }

/* The category row closes the panel, the way A-Z closes the games one. */
.gr-next .grc-vidsearch .grc-vidchips {
	margin-block: 16px 0;
	padding-block-start: 14px;
	border-block-start: 1px solid rgb(232, 232, 232);
}

/* --- Video cards: the hover was pale blue on white -------------------
 * theme.css hovers .grc-vidcard-title to #cfe3f5, which was right when
 * the title sat over the artwork on a dark card. On the rebuilt white
 * card it makes the headline all but disappear under the cursor. The
 * site's card hover is the link blue. */
.gr-next .grc-vidcard:hover .grc-vidcard-title { color: rgb(0, 136, 204); }

/* --- Room at the foot of a clip --------------------------------------
 * The belts ran to within 8px of the footer: last row of cards, then
 * black. Measured: article ends y=3137, last belt ends y=3129. */
.gr-next .grc-vid-belts { padding-block-end: 52px; }

/* --- Games index: a long title wraps, it does not run over -----------
 * The title cell is nowrap with an ellipsis, but the anchor inside it is
 * nowrap with overflow VISIBLE — so a long name ignored the ellipsis and
 * ran straight across the SYSTEM column. "1... 2... 3... Kick It (Drop
 * That Beat Like a..." sat on top of "PC". Two lines instead.
 * ------------------------------------------------------------------- */
.gr-next .grc-gt-c--title,
.gr-next .grc-gt-c--title a {
	white-space: normal;
	overflow-wrap: anywhere;
	text-overflow: clip;
}
.gr-next .grc-gt-c--title a { display: block; line-height: 20px; }
.gr-next .grc-gt tbody td { vertical-align: top; }


/* ── Brand Management components keep their own link styling ───────────
 *
 * On instruction (15 Sep): the CTAs in a BM campaign must not pick up an
 * underline.
 *
 * The cause is two rules of ours, not the plugin's. `.gr-article-body a`
 * (theme.css) underlines every anchor in an article body and
 * `.gr-next .gr-article-body a:hover` re-asserts it on hover — both correct
 * for editorial prose, and both reaching inside the toplist, which is a
 * commercial component with its own buttons. Today the plugin's own
 * `body.gr-commercial-page .e-content a…-cta-btn` happens to out-specify
 * them at (0,3,2) against (0,3,1), which is why PLAY NOW measures clean on
 * every gambling page right now. That is one class of margin, and it holds
 * only while every one of these renders inside BOTH `body.gr-commercial-page`
 * and `.e-content`. A toplist in any other context — and the block editor
 * preview is already one — loses it.
 *
 * So the exclusion is stated at our end rather than left to a coincidence of
 * specificity. Measured on /non-uk-casinos/ with every :hover rule in every
 * sheet rewritten to a class and applied: the two cta-btn anchors were
 * already none/none, the two LOGO anchors were underline/underline — an
 * underline under an <img>, invisible until a logo fails to load and the alt
 * text shows. Both families are covered.
 *
 * The named classes are the four that exist across the gambling pages and
 * markets checked; the [class*=] pair catches a new component from the same
 * plugin without needing this list updated. Ordinary prose links in the same
 * body are untouched — they should underline, and they still do. */
.gr-next .gr-article-body a.toplist-gamereactor__offer-cta-btn,
.gr-next .gr-article-body a.toplist-gamereactor__offer-cta-btn:hover,
.gr-next .gr-article-body a.toplist-gamereactor__offer-logo,
.gr-next .gr-article-body a.toplist-gamereactor__offer-logo:hover,
.gr-next .gr-article-body a.toplist-gamereactor__show-more-btn,
.gr-next .gr-article-body a.toplist-gamereactor__show-more-btn:hover,
.gr-next .gr-article-body a.offer-gamereactor-review__cta-btn,
.gr-next .gr-article-body a.offer-gamereactor-review__cta-btn:hover,
.gr-next .gr-article-body a.offer-gamereactor-review__logo,
.gr-next .gr-article-body a.offer-gamereactor-review__logo:hover,
.gr-next .gr-article-body a[class*="__cta-btn"],
.gr-next .gr-article-body a[class*="__cta-btn"]:hover,
.gr-next .gr-article-body a[class*="__offer-logo"],
.gr-next .gr-article-body a[class*="__offer-logo"]:hover {
	text-decoration: none;
}


/* ── The How We Rate slider takes the homepage's arrows ───────────────────
 *
 * QA 5 and 7 — confirmed as the same component: the slider buttons in the
 * How We Rate section. The homepage rails use .gn-railbtn, a 32px bordered
 * square with a chevron that fills with the accent on hover; the plugin's
 * slider drew a bare 44px SVG button with no border. The plugin's is
 * restyled to the rail button rather than the other way round, because the
 * rail button is the one that came from the artboards.
 *
 * SCOPED TO THIS SLIDER. The wide-table scroll controls
 * (.gr-table-controls, built in theme.js) were briefly included here and are
 * not: those stay visible on a phone, where 44px is a touch target and 32px
 * is under the floor. The rails and this slider can be 32px precisely
 * because both hide below 620px. Same reason their glyph stays the literal
 * arrow character rather than this chevron.
 *
 * The plugin's own rules are single-class (0,1,0) or (0,2,0); everything
 * here is (0,2,0)+ under .gr-next, so this wins without !important.
 */
.gr-next .gr-how-we-rate .splide__arrow {
	inline-size: 32px;
	block-size: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--gr-line-soft);
	border-radius: 0;
	background: transparent;
	color: var(--gr-ink);
	cursor: pointer;
	padding: 0;
	opacity: 1;
	transition: var(--gr-dur) var(--gr-ease);
}
.gr-next .gr-how-we-rate .splide__arrow:hover:not(:disabled),
.gr-next .gr-how-we-rate .splide__arrow:focus-visible {
	background: var(--gr-accent);
	border-color: var(--gr-accent);
	color: var(--gr-ink-inverse);
}
/* The plugin hardcodes #181715 on the SVG path, which would stay dark on the
   filled hover state. currentColor makes the mark follow the button. */
.gr-next .gr-how-we-rate .splide__arrow svg { inline-size: 14px; block-size: 14px; display: block; }
.gr-next .gr-how-we-rate .splide__arrow svg path { stroke: currentColor; }
.gr-next .gr-how-we-rate .splide__arrow:disabled { opacity: .35; cursor: default; }
.gr-next .gr-how-we-rate .splide__arrows {
	display: flex;
	flex-direction: row;
	gap: 8px;
	justify-content: flex-end;
}

/* "Carousels … arrows are hidden below 620px" — the rule the homepage rails
   already follow, now applied to the How We Rate slider too (QA 5).
   SAFE BECAUSE THE SLIDER IS DRAGGABLE: measured, the element carries
   splide--draggable and is-overflow with six slides, so a touch reader moves
   it by swiping and hiding the buttons takes nothing away. If that plugin
   option is ever turned off, this rule has to go with it. */
@media (max-width: 620px) {
	.gr-next .gr-how-we-rate .splide__arrows { display: none !important; }
}


/* ── The pale bands take the callout artwork ──────────────────────────────
 *
 * On instruction: the same background effect as the top-picks block, WITHOUT
 * its drop shadow. Measured off .top-picks-block in app.css, which sets
 *
 *     background: url(callout-bg-N1H92wCO.svg) 50% 0 / 100% auto no-repeat,
 *                 rgb(194,233,248);
 *     box-shadow: inset 0 6px 0 var(--color-body-link),
 *                 inset 0 -6px 0 var(--color-body-link);
 *
 * The box-shadow is the "drop shadow" — a 6px #0087bd bar pinned inside the
 * top and bottom edges. That is what is left off here; everything else is the
 * same treatment.
 *
 * ON THE WRAP, NOT THE BLEED, which is what was asked for and is also the
 * right call: .hr-bleed runs the full viewport, so at 1920 the artwork would
 * be stretched half as wide again as it has ever been drawn. .gr-wrap is
 * 1132px and holds the content, so the shapes stay in proportion to the copy
 * they sit behind.
 *
 * The ground colour STAYS rgb(238,244,251) — the bands' own, set inline on
 * the parent, which shows through because this layer only paints an image.
 * The top-picks block's rgb(194,233,248) is a good deal stronger, and
 * swapping the ground on four bands across every template is a bigger change
 * than "use this background effect" asks for. Say the word if the deeper blue
 * is wanted too; it is one line.
 *
 * .gn-callout is a class on the four bands rather than an attribute match on
 * their inline colour: one of the few places this rebuild moves a style OUT
 * of a style attribute rather than working around one, which is the direction
 * ticket OUT-1 wants.
 */
.gr-next .gn-callout > .gr-wrap {
	background-image: url('../../public/build/assets/callout-bg-N1H92wCO.svg');
	background-position: 50% 0;
	background-size: 100% auto;
	background-repeat: no-repeat;
}