/*
 * SCOPE, WIDENED 10 Sep — and worth reading before touching a selector here.
 *
 * Every card rule in this file was scoped under .slotsl-container, which is
 * the wrapper the ARCHIVE shortcode emits. The lobby shortcode does not emit
 * it: its markup is .slotsl-lobby-wrapper > .slotsl-lobby > sections, with the
 * same .slotsl-game / .slotsl-thumb / .slotsl-meta / .slotsl-title tiles
 * inside. So on /free-games/ the 64 lobby tiles rendered with the plugin's own
 * defaults while the 24 tiles below them, in the archive, were styled — one
 * page, two different-looking grids of the same component.
 *
 * :is(.slotsl-container, .slotsl-lobby) rather than a duplicated selector
 * list: both arguments are single classes, so the specificity is identical to
 * the .slotsl-container it replaces and nothing else in the cascade moves.
 */
/*
 * SlotsLaunch archive — the /home-renew/ card, applied to the plugin's markup.
 * ---------------------------------------------------------------------------
 * WHY A SEPARATE FILE. renew.css is scoped to body.grc-home-renew and loads on
 * that one route; /free-games/ is an ordinary page. This restyles the PLUGIN'S
 * own classes so the archive reads as part of the site rather than a bolted-on
 * widget, and it is enqueued only where the shortcode actually renders.
 *
 * NOTHING IN THE PLUGIN IS EDITED. Every rule here targets markup the plugin
 * emits (.slotsl-game / .slotsl-thumb / .slotsl-meta / .slotsl-demo-*), so a
 * plugin update cannot be undone by us and cannot silently revert this.
 *
 * !important IS NOT DECORATION HERE. slotslaunch-public.css sets
 * border-radius, img width, title font-size, title line-height and the
 * provider's POSITION with !important of its own. Those exact declarations are
 * the ones answered in kind; everything else is plain.
 *
 * TOKENS. --grc-* come from child.css's :root and are global. --hr-gap and
 * --hr-radius are declared on body.grc-home-renew, so they do NOT exist on
 * this page — the two values are restated locally rather than referenced.
 */

/*
 * DECLARED ON :root, NOT ON .slotsl-container.
 *
 * This was the bug behind "the cards still have the border radius". Custom
 * properties inherit DOWNWARDS only. The token used to live on
 * .slotsl-container, but it is read in two places that are not inside it:
 *
 *   - :is(.slotsl-container, .slotsl-lobby) — the .slotsl-lobby half of every
 *     one of those 70-odd rules sat outside the declaring element, and the
 *     archive shortcode's wrapper is not .slotsl-container either;
 *   - .grc-fg-page, which is an ANCESTOR of the plugin markup.
 *
 * An undefined var() in a shorthand-free property is "invalid at
 * computed-value time", which is not "ignore this line" — it resolves to the
 * property's unset value. So `border-radius: var(--sl-radius)` computed to 0
 * and the cards were square no matter what number the token held. Raising it
 * from 2px to 8px changed nothing visible because neither value was ever
 * reaching the card, and `.grc-fg-page { --hr-radius: var(--sl-radius) }`
 * actively cancelled renew.css's 2px on the belts for the same reason.
 *
 * On :root the token reaches every consumer, and it is still one line.
 */
:root {
	--sl-gap:    12px;   /* = --hr-gap */
	/*
	 * 2px = --hr-radius, which renew.css declares and .hr-slot reads. The
	 * site's card corner is 2px, i.e. all but square, and the belts on this
	 * page are .hr-slot. 8px here was my misreading of "the border radius of
	 * the cards needs to be improved": the plugin ships the card at
	 * `border-radius: 20px !important`, and it was that 20px — a corner
	 * nothing else on the site has — that needed correcting, not raising.
	 */
	--sl-radius: 2px;
	/*
	 * Fields are a different token in the design system: .grc-gf-find and
	 * .grc-vidsearch-field are 8px. Cards 2px, fields 8px — not one radius.
	 */
	--sl-field-radius: 8px;
	--sl-field-size:   54px;   /* .grc-gf-find / .grc-vidsearch-field */
}

/* ---------- the grid -------------------------------------------------------
 * The plugin's own columns come from a class its JS adds after measuring the
 * container (sl_check_grid adds sl-grid-4 only when the box is wider than
 * 950px). That is a measurement race: a container that is not laid out yet
 * measures 0, no class is added, and the grid stays at its 1-column default
 * with a 0px track. Declaring the columns in CSS removes the dependency
 * altogether, so the grid is correct on first paint and the JS class becomes
 * a no-op it can keep adding harmlessly.
 *
 * Column counts and breakpoints are /home-renew/'s .hr-5 exactly — 5 / 3 / 2 —
 * with ONE deliberate change: .hr-5 collapses to a single column below 720px
 * because there it is a five-card row inside a horizontal rail. An archive of
 * 52 games is not a rail, and one card per screen would be a 52-screen
 * scroll, so it holds at 2 across.
 * ------------------------------------------------------------------------- */
:is(.slotsl-container, .slotsl-lobby) .slotsl-grid,
:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-2,
:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-3,
:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-4,
:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-6 {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sl-gap);
}

@media (max-width: 1180px) {
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid,
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-2,
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-3,
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-4,
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid,
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-2,
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-3,
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-4,
	:is(.slotsl-container, .slotsl-lobby) .slotsl-grid.sl-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the card ------------------------------------------------------
 * .hr-slot: ink ground, 2px corner, no shadow, image and body stacked.
 * The plugin ships white / 5px / a soft drop shadow, which is the one thing
 * that made the archive look like a different site.
 * ------------------------------------------------------------------------- */
/*
 * !important IS REQUIRED ON THE RADIUS, and this is the measured reason:
 * slotslaunch-public.css ships
 *     .slotsl-game  { border-radius: 20px !important; }
 *     .slotsl-thumb { border-top-left-radius: 20px !important;
 *                     border-top-right-radius: 20px !important; }
 * A plain declaration here — which is what this rule carried — loses to an
 * !important one at any specificity, so the archive cards were 20px the whole
 * time and every change to --sl-radius was invisible on them. That is why the
 * belts moved and the archive did not.
 */
:is(.slotsl-container, .slotsl-lobby) .slotsl-game {
	border-radius: var(--hr-radius, var(--sl-radius)) !important;
	display: flex;
	flex-direction: column;
	background: var(--grc-ink, #181715);
	border-radius: var(--sl-radius);
	box-shadow: none;
	overflow: hidden;
	/* The plugin animates each tile in with fadeInUp on a 0.1s delay. Kept,
	   but it must not leave a card invisible if the animation never runs. */
	animation-fill-mode: both;
}

/* Corner radius belongs to the card, not to the image inside it. */
:is(.slotsl-container, .slotsl-lobby) .slotsl-thumb {
	/* Answering the plugin's two !important corner declarations in kind; the
	   card's own overflow:hidden then does the clipping. */
	border-start-start-radius: var(--hr-radius, var(--sl-radius)) !important;
	border-start-end-radius: var(--hr-radius, var(--sl-radius)) !important;
	position: relative;
	/*
	 * The top corners used to be forced square here, which was invisible at a
	 * 2px card radius and wrong at 8px: the image's corners sat outside the
	 * card's curve. The card carries overflow:hidden, so letting the thumb
	 * inherit the shape is all that is needed.
	 */
	overflow: hidden;
	background: var(--grc-ink-2, #1e1d1b);
}
:is(.slotsl-container, .slotsl-lobby) .slotsl-thumb > .slotsl-url { display: block; }

/*
 * 250 x 177 is the artboard's slot artwork box. The plugin forces 3/2, which
 * is close but not the same, and letterboxes tall thumbnails; cover crops
 * instead so every card in a row shares one silhouette.
 */
:is(.slotsl-container, .slotsl-lobby) .slotsl-thumb img {
	display: block;
	inline-size: 100% !important;
	block-size: auto;
	aspect-ratio: 250 / 177;
	object-fit: cover;
}

/* ---------- the Free Demo pill -------------------------------------------
 * The plugin's play affordance is a translucent RED sheet that covers the
 * whole thumbnail on hover with a large grey button centred in it — invisible
 * until hover, and invisible on touch, where there is no hover at all.
 *
 * The design's is a small white pill sitting over the bottom-right of the
 * artwork, always visible. Same element, repositioned: the container stops
 * being a full-bleed overlay and becomes the pill's anchor.
 * ------------------------------------------------------------------------- */
:is(.slotsl-container, .slotsl-lobby) .slotsl-demo-container {
	position: absolute;
	inset-block: auto 12px;
	inset-inline: auto 12px;
	block-size: auto;
	inline-size: auto;
	opacity: 1;
	background: none;
	transition: none !important;
	pointer-events: auto;
}
:is(.slotsl-container, .slotsl-lobby) .slotsl-demo-container:hover { opacity: 1; }

:is(.slotsl-container, .slotsl-lobby) .slotsl-demo-wrapper {
	position: static;
	transform: none;
	inline-size: auto;
	display: block;
	text-align: start;
}

:is(.slotsl-container, .slotsl-lobby) .slotsl-thumb-url {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background: var(--grc-surface, #fff);
	border-radius: 20px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
	color: var(--grc-ink, #181715);
	transition: none !important;
}
/*
 * The play triangle. parts/hr-slots.php draws it as a 7x8 inline SVG; a
 * border triangle reproduces the same shape at the same size without asking
 * the plugin's template for an extra element.
 */
:is(.slotsl-container, .slotsl-lobby) .slotsl-thumb-url::after {
	content: '';
	inline-size: 0;
	block-size: 0;
	border-block: 4px solid transparent;
	border-inline-start: 7px solid currentColor;
	border-inline-end: 0;
}
:is(.slotsl-container, .slotsl-lobby) .slotsl-thumb-url:hover {
	background: var(--grc-surface, #fff);
	color: var(--grc-ink, #181715);
}

/* ---------- the body ----------------------------------------------------- */
:is(.slotsl-container, .slotsl-lobby) .slotsl-meta {
	padding: 12px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* The plugin positions the provider absolutely against this box. */
	position: static;
}

/*
 * line-height: 0 !important and margin-bottom: 20px !important are the
 * plugin's, and they are what pushed the provider out of flow in the first
 * place. Both are answered so the two lines can simply stack.
 */
:is(.slotsl-container, .slotsl-lobby) .slotsl-meta p.slotsl-title {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 22px !important;
	text-align: start;
}
:is(.slotsl-container, .slotsl-lobby) .slotsl-meta .slotsl-title a,
:is(.slotsl-container, .slotsl-lobby) .slotsl-meta .slotsl-title span {
	font-family: var(--grc-font-title) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
}
:is(.slotsl-container, .slotsl-lobby) .slotsl-meta .slotsl-title a:hover,
:is(.slotsl-container, .slotsl-lobby) .slotsl-meta .slotsl-title span:hover { color: #cfe3f5 !important; }

/* Back into the flow, at .hr-slot-prov's weight and colour. */
:is(.slotsl-container, .slotsl-lobby) .slotsl-meta a.slotsl-provider,
:is(.slotsl-container, .slotsl-lobby) .slotsl-meta span.slotsl-provider {
	position: static !important;
	inset: auto !important;
	font-family: var(--grc-font-body) !important;
	font-weight: 700 !important;
	font-size: 10px !important;
	line-height: 12px !important;
	color: var(--grc-text-faint, #888) !important;
	text-decoration: none !important;
}
:is(.slotsl-container, .slotsl-lobby) .slotsl-meta a.slotsl-provider:hover { color: #fff !important; }

/* ---------- filter row --------------------------------------------------
 * Superseded. Everything for the filter panel now lives in the single block
 * at the end of this file, written against the plugin's real markup. Two
 * partial attempts in two places was how the panel ended up with a typeface
 * and no geometry.
 * ------------------------------------------------------------------------- */

/* Load more / pagination button, in the site's button shape. */
:is(.slotsl-container, .slotsl-lobby) .slotsl-load-more-btn {
	border: 1px solid var(--grc-ink, #181715);
	border-radius: 20px;
	background: var(--grc-ink, #181715);
	padding: 8px 20px;
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	cursor: pointer;
}
:is(.slotsl-container, .slotsl-lobby) .slotsl-load-more-btn:hover { background: var(--grc-ink-2, #1e1d1b); }
:is(.slotsl-container, .slotsl-lobby) .slotsl-progress-bar-fill { background: var(--hp-cyan, #34b2e9); }

/* ---------- the game popup ----------------------------------------------
 * The iframe's 4px border colour is an INLINE style built from the plugin's
 * own Colour setting, so it cannot be set from here — it is set in the
 * plugin's settings screen. What is set here is everything around it: the
 * scrim, the corner, and the box the frame sits in.
 * ------------------------------------------------------------------------- */
#sl-single-game-popup {
	background: rgba(24, 23, 21, 0.82);
	backdrop-filter: blur(2px);
	align-items: center;
	justify-content: center;
	padding: 24px;
}
#sl-single-game-popup iframe {
	border-radius: var(--sl-radius, 2px) !important;
	max-inline-size: 1332px;
	max-block-size: 100%;
	background: var(--grc-ink, #181715);
}

@media (prefers-reduced-motion: reduce) {
	:is(.slotsl-container, .slotsl-lobby) .slotsl-game { animation: none !important; }
}

/* ---------- the filter row's typeface ---------------------------------
 * FORM CONTROLS DO NOT INHERIT font-family. That is the whole bug: the
 * plugin declares no font on the selects, inputs or buttons (its only
 * font-family rules are on a broken-game submit button and a star-rating
 * label), so every control fell back to the browser's own UI font while the
 * cards beside them were in Outfit. Setting it on a container does nothing —
 * it has to be set on the controls themselves.
 *
 * <option> is listed separately because the dropdown list is rendered by the
 * OS in some browsers and only picks up a font when the option carries one.
 *
 * The .choices__* selectors are for the provider dropdown: it is enhanced by
 * Choices.js (enqueued as slotsl-select), which replaces the <select> with
 * generated divs, so styling the select alone leaves the visible control
 * untouched once the script runs.
 * ------------------------------------------------------------------- */
:is(.slotsl-container, .slotsl-lobby) .slotsl-filters,
:is(.slotsl-container, .slotsl-lobby) .slotsl-providers,
:is(.slotsl-container, .slotsl-lobby) .slotsl-search,
:is(.slotsl-container, .slotsl-lobby) .sl-filters,
:is(.slotsl-container, .slotsl-lobby) .sl-filter-container,
:is(.slotsl-container, .slotsl-lobby) .slotsl-megaways,
:is(.slotsl-container, .slotsl-lobby) .slotsl-providers-sortby {
	font-family: var(--grc-font-ui);
}

:is(.slotsl-container, .slotsl-lobby) .slotsl-filters select,
:is(.slotsl-container, .slotsl-lobby) .slotsl-filters option,
:is(.slotsl-container, .slotsl-lobby) .slotsl-filters input,
:is(.slotsl-container, .slotsl-lobby) .slotsl-filters button,
:is(.slotsl-container, .slotsl-lobby) .slotsl-filters label,
:is(.slotsl-container, .slotsl-lobby) .slotsl-providers select,
:is(.slotsl-container, .slotsl-lobby) .slotsl-providers option,
:is(.slotsl-container, .slotsl-lobby) .slotsl-search input,
:is(.slotsl-container, .slotsl-lobby) .sl-submit-search,
:is(.slotsl-container, .slotsl-lobby) .sl-mobile-filter-button {
	font-family: var(--grc-font-ui);
}

/* Choices.js replaces the provider <select> with its own markup. */
:is(.slotsl-container, .slotsl-lobby) .choices,
:is(.slotsl-container, .slotsl-lobby) .choices__inner,
:is(.slotsl-container, .slotsl-lobby) .choices__input,
:is(.slotsl-container, .slotsl-lobby) .choices__list,
:is(.slotsl-container, .slotsl-lobby) .choices__item,
:is(.slotsl-container, .slotsl-lobby) .choices__placeholder {
	font-family: var(--grc-font-ui);
}

/* The pagination and progress text sit in the same row and were missed for
   the same reason — a button and a couple of spans. */
:is(.slotsl-container, .slotsl-lobby) .slotsl-load-more,
:is(.slotsl-container, .slotsl-lobby) .slotsl-progress,
:is(.slotsl-container, .slotsl-lobby) .sl_total_found,
:is(.slotsl-container, .slotsl-lobby) .sl_total_viewed,
:is(.slotsl-container, .slotsl-lobby) .slotsl-not-found {
	font-family: var(--grc-font-ui);
}

/* ======================================================================
 * THE LOBBY CARD — beating slotslaunch-lobby.css
 *
 * WHY THIS BLOCK EXISTS, because the specificity here looks excessive until
 * you know what it is against.
 *
 * The plugin ships a SECOND stylesheet, slotslaunch-lobby.css, and it loads
 * AFTER this file (position 9 against our 8 in the document). It restyles the
 * same tiles this file already themed, back to its own defaults:
 *
 *     .slotsl-lobby-item .slotsl-game        background #fff, radius 8px,
 *                                            box-shadow, min-height 330px
 *     .slotsl-lobby-item .slotsl-thumb img   aspect-ratio 3/2
 *     .slotsl-lobby-item .slotsl-meta        padding 16px, min-height 120px
 *     .slotsl-lobby-item … .slotsl-title span   color #333 !important
 *     .slotsl-lobby-item … .slotsl-provider     absolute, #666 !important
 *     .slotsl-lobby-item .slotsl-thumb-url      background #e23940 !important
 *
 * So on /free-games/ the lobby rendered white cards with dark titles and a red
 * pill, directly under an archive of dark cards with white titles and a white
 * pill — the same component, two looks, one page.
 *
 * Its selectors are 0-2-0 and 0-3-0, several with !important, and it wins ties
 * on order. Prefixing with `body` adds an element to the count, which breaks
 * the tie at equal class count without inventing a class and without raising
 * !important beyond where the plugin already used it. `body` rather than the
 * page's own class so this also holds wherever else the lobby is embedded.
 *
 * The RAIL is deliberately left to the plugin — see the note in child.css.
 * Only the card's skin is taken back, which is what "match the homepage card"
 * actually means.
 * ====================================================================== */

body .slotsl-lobby-item .slotsl-game {
	background: var(--grc-ink, #181715);
	border-radius: var(--sl-radius);
	box-shadow: none;
	/* 330px was sized for the plugin's 16px meta and absolute provider; with
	   the site's 12/16/16 meta the card is shorter and must be allowed to be. */
	min-height: 0;
	transition: none;
}
body .slotsl-lobby-item .slotsl-game:hover {
	/* The plugin lifts and shadows the card on hover. The site's slot cards do
	   not move — and a hover effect that exists nowhere else was called out on
	   the gambling archive already. */
	transform: none;
	box-shadow: none;
}

body .slotsl-lobby-item .slotsl-thumb img {
	aspect-ratio: 250 / 177;
	object-fit: cover;
}

body .slotsl-lobby-item .slotsl-meta {
	padding: 12px 16px 16px;
	min-height: 0;
	/* static, so the provider below sits in the flow like the archive's. */
	position: static;
}

body .slotsl-lobby-item .slotsl-meta .slotsl-title {
	margin: 0 !important;
	min-height: 0;
	/* The two-line clamp is the plugin's and is kept: it is what stops one
	   long game name making a card taller than the fifteen beside it. */
}
body .slotsl-lobby-item .slotsl-meta .slotsl-title a,
body .slotsl-lobby-item .slotsl-meta .slotsl-title span {
	font-family: var(--grc-font-title) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	color: #fff !important;
	text-decoration: none !important;
}
body .slotsl-lobby-item .slotsl-meta .slotsl-title a:hover,
body .slotsl-lobby-item .slotsl-meta .slotsl-title span:hover { color: #cfe3f5 !important; }

body .slotsl-lobby-item .slotsl-meta a.slotsl-provider,
body .slotsl-lobby-item .slotsl-meta span.slotsl-provider {
	position: static !important;
	inset: auto !important;
	margin: 0 !important;
	font-family: var(--grc-font-body) !important;
	font-weight: 700 !important;
	font-size: 10px !important;
	line-height: 12px !important;
	color: var(--grc-text-faint, #888) !important;
}

/* The "Free Demo" affordance: the site's white pill on the thumb, not the
   plugin's red button. Same values as the archive's, above. */
body .slotsl-lobby-item .slotsl-thumb-url {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	padding: 3px 10px !important;
	background: var(--grc-surface, #fff) !important;
	border-radius: 20px !important;
	font-family: var(--grc-font-ui);
	font-weight: 600 !important;
	font-size: 12px !important;
	line-height: 18px;
	color: var(--grc-ink, #181715) !important;
	text-decoration: none !important;
	transition: none !important;
}
body .slotsl-lobby-item .slotsl-demo-container {
	position: absolute;
	inset-block: auto 12px;
	inset-inline: auto 12px;
	inline-size: auto;
	block-size: auto;
	background: none;
	opacity: 1;
}
body .slotsl-lobby-item .slotsl-demo-wrapper {
	position: static;
	transform: none;
	inline-size: auto;
	display: block;
	text-align: start;
}

/* ======================================================================
 * "DISCOVER ALL GAMES" — the archive grid
 *
 * FIVE ACROSS, which is this file's existing default, so there is no rule
 * here at all. The artboard draws six at an 8px gap; five was approved as
 * the easier option and it also matches the belts above it and the
 * homepage's slot row, so the page reads as one rhythm. per_page is 25 =
 * five full rows.
 * ====================================================================== */

/* ======================================================================
 * THE FILTER PANEL
 *
 * WRITTEN AGAINST THE PLUGIN'S ACTUAL MARKUP, which is:
 *
 *   .slotsl-filters
 *     form#slotsl-filters
 *       .sl-filter-container                     <- row 1
 *         .slotsl-search        input#sl-name + button.sl-submit-search
 *         .slotsl-providers     .choices  (Choices.js — provider)
 *         .slotsl-providers.slotsl-providers-sortby   select#slots-sort
 *       .sl-mobile-filter-button                 "Filter" + icon
 *       .sl-filter-container.sl-mobile-filters   <- row 2
 *         .slotsl-providers     select.slots-select-types
 *         .slotsl-providers     select.slots-select-themes
 *         .slotsl-providers.slotsl-megaways   label + label.switch
 *
 * Three things in the plugin's sheet decide what has to be done here, and all
 * three were the cause of the ragged panel:
 *   1. .sl-filter-container is `flex-direction: column` with
 *      `margin-bottom: 30px !important`, turned to `row` only at min-width
 *      1200px. Two containers = two rows, and stacked controls below 1200.
 *   2. `.slotsl-search input, .slotsl-megaways, .slotsl-providers select
 *       { min-width: 240px }` at min-width 1200 — the reason All Types and
 *      All Themes came out enormous.
 *   3. `.sl-mobile-filter-button { display: none }` and
 *      `.sl-mobile-filters { display: flex }` also only at min-width 1200,
 *      so between 900 and 1200 the "Filter" chip appears and row 2 collapses.
 *
 * THE FIX IS TO REMOVE THE TWO WRAPPER BOXES, not to fight their contents:
 * `display: contents` on both .sl-filter-container elements makes their six
 * children direct flex items of the form, and a box with `display: contents`
 * generates no box at all — so the column direction, the 30px margin and the
 * collapse all stop existing rather than needing an override each. DOM order
 * is already the order wanted: search, provider, sort, type, theme, megaways.
 *
 * The mobile toggle is then redundant — every field is visible at every
 * width — so it is hidden. That is the one piece of the plugin's default
 * behaviour deliberately dropped, and it is dropped because the brief is a
 * single row on desktop and 2-3 rows on mobile, not a collapsed panel.
 *
 * VALUES ARE THE DESIGN SYSTEM'S, from child.css's "FILTER BAR — one
 * component, three call sites" block, which /games/ and /video/ both use:
 *   panel   #eeeeee (--grc-border), 16px padding, 12px gap, 12px on mobile
 *   field   54px, 1px --grc-border-strong, 8px radius, white,
 *           Arial 400 16/24, placeholder --grc-text-faint,
 *           focus 2px --grc-link offset 1
 *   control Outfit 600 15/18 in --grc-ink
 *   accent  --grc-link, hover --grc-link-hover
 * One judgement call: the design system draws its dropdowns as 36px pills
 * (.grc-gf-pill) because there they sit in a chip row of their own. Here the
 * five controls share ONE row with the field, so they take the field's box at
 * 54px instead — a row of 54px fields with 36px pills dropped into it would
 * read as two components, not one.
 * ====================================================================== */

/* --- flush with the section, and the panel ------------------------------
 * .slotsl-container ships `padding: 0 15px`, which is why the panel and the
 * grid sat 15px inside the belts and the section's heading rule above them.
 * The section (.hr-wrap) already supplies the gutter, so the wrapper must not
 * add a second one. Measured after: container, panel and grid all run 70->1370
 * at 1440, the same edges as .hr-rail-x. `body` prefix is enough — the
 * plugin's rule is a bare .slotsl-container — so no !important.
 * ---------------------------------------------------------------------- */
body .slotsl-container { padding-inline: 0; }

body .slotsl-filters {
	box-sizing: border-box;
	padding: 16px;
	background: var(--grc-border, #eeeeee);
	border-radius: var(--sl-field-radius);
}

/* --- one row of controls ------------------------------------------------
 * EVERY SELECTOR BELOW IS PREFIXED WITH THE FORM'S ID, deliberately.
 *
 * The plugin's own rules for this panel run to 0-3-0 (e.g.
 * `.slotsl-filters .sl-filter-container.sl-mobile-filters { display: none }`),
 * which beats a plain three-class selector. Rather than escalate to
 * !important on layout properties — where it is genuinely hard to unpick
 * later — the form's id (#slotsl-filters, which the plugin puts in the
 * markup) carries these rules above anything the plugin can declare, and
 * !important is then needed only where the plugin used it itself.
 * ---------------------------------------------------------------------- */
body .slotsl-filters #slotsl-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 10px;
	align-items: center;
}
/* The two wrappers stop generating boxes; their six children join the row. */
body .slotsl-filters #slotsl-filters .sl-filter-container,
body .slotsl-filters #slotsl-filters .sl-filter-container.sl-mobile-filters,
body .slotsl-filters #slotsl-filters .sl-filter-container.sl-mobile-filters.show-filters {
	display: contents;
}
/* Redundant once nothing is collapsed. */
body .slotsl-filters #slotsl-filters .sl-mobile-filter-button { display: none; }

/* The plugin's per-control margins and column direction, cleared. */
body .slotsl-filters #slotsl-filters .slotsl-search,
body .slotsl-filters #slotsl-filters .slotsl-providers {
	margin: 0;
	flex-direction: row;
	align-items: center;
	min-inline-size: 0;
	/*
	 * flex-start, NOT the plugin's flex-end. This is the whole reason the
	 * provider box appeared *under the search field* on desktop and ran off
	 * the panel's left edge on mobile: .choices computes to a 240px minimum
	 * (see below), its slot is 170px, and in a flex box justified to the end
	 * an oversized child overflows to the LEFT. Justified to the start it
	 * would overflow right instead — but with the cap below it does neither.
	 */
	justify-content: flex-start;
}
/*
 * THE FIELD CANNOT EXCEED ITS SLOT, AT ANY WIDTH.
 *
 * `min-inline-size: 0` was previously stated only inside the >=1200px block,
 * because that is where the plugin declares `min-width: 240px`. But a control
 * that is floored at its intrinsic width is what puts the field under its
 * neighbour when the row is tight, so the floor is removed everywhere and the
 * cap is stated as well — `!important` because the plugin sets both `width`
 * and `min-width` on these, the latter with `width: auto` alongside it.
 */
body .slotsl-filters #slotsl-filters .slotsl-search input,
body .slotsl-filters #slotsl-filters .slotsl-providers select {
	min-inline-size: 0 !important;
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}
/*
 * And if two controls ever do meet, the field is the one on top rather than
 * the one hidden. .slotsl-search is positioned (the magnifier inside it is
 * absolute) and so is Choices' provider box; positioned siblings paint in DOM
 * order, which put the provider over the field. This settles that.
 */
body .slotsl-filters #slotsl-filters .slotsl-search { z-index: 1; }

/* --- the field: .grc-gf-find's box -------------------------------------- */
body .slotsl-filters #slotsl-filters .slotsl-search { position: relative; }
body .slotsl-filters #slotsl-filters .slotsl-search input[type='text'] {
	box-sizing: border-box;
	block-size: var(--sl-field-size) !important;
	min-block-size: 0 !important;
	/* Right padding clears the magnifier, which the plugin absolutely
	   positions 20px from the field's inner edge. */
	padding: 0 52px 0 15px !important;
	border: 1px solid var(--grc-border-strong, #ddd) !important;
	border-radius: var(--sl-field-radius) !important;
	background: var(--grc-surface, #fff);
	font-family: var(--grc-font-body);
	font-weight: 400;
	font-size: 16px;   /* 16 and not the artboard's 14.3: iOS zooms below 16 */
	line-height: 24px;
	color: var(--grc-ink, #181715);
}
body .slotsl-filters #slotsl-filters .slotsl-search input::placeholder {
	color: var(--grc-text-faint, #888) !important;
	opacity: 1;
}
body .slotsl-filters #slotsl-filters .slotsl-search input:focus-visible {
	outline: 2px solid var(--grc-link, #0088cc);
	outline-offset: 1px;
}
/*
 * .sl-submit-search IS NOT A BUTTON IN THE LAYOUT. The plugin absolutely
 * positions it inside the field and forces `background: transparent`, so it
 * is the magnifier affordance, not a submit CTA. It was previously styled
 * here as the design system's 125px accent button, which produced an
 * invisible 62px box floating in the field. Only the icon's colour is set —
 * the SVG's stroke="#666" is an attribute, so a CSS `stroke` overrides it.
 */
body .slotsl-filters #slotsl-filters .sl-submit-search { padding: 0 !important; }
body .slotsl-filters #slotsl-filters .sl-submit-search svg { stroke: var(--grc-ink, #181715); }
body .slotsl-filters #slotsl-filters .sl-submit-search:hover svg { stroke: var(--grc-link, #0088cc); }

/* --- the four dropdowns: the same box, Outfit 600 ----------------------- */
body .slotsl-filters #slotsl-filters .slotsl-providers select,
body .slotsl-filters #slotsl-filters .choices__inner {
	box-sizing: border-box;
	block-size: var(--sl-field-size) !important;
	min-block-size: var(--sl-field-size);
	padding: 0 40px 0 15px !important;
	border: 1px solid var(--grc-border-strong, #ddd) !important;
	border-radius: var(--sl-field-radius) !important;
	background-color: var(--grc-surface, #fff);
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	color: var(--grc-ink, #181715);
}
/* Choices.js replaces the provider <select> with its own markup, and
   choices.min.css loads AFTER this file — these win on specificity, not
   order, which is the only reason they hold. */
/*
 * .choices HAS A 240px min-width (measured on staging: computed min-width
 * 240px, rendered 240px in a 170px slot). `inline-size: 100%` cannot win
 * against a minimum — a min floor is applied after the used width — so the
 * floor itself has to be removed. This is the fix for the overlap; the
 * justify-content above is the belt to its braces.
 */
body .slotsl-filters #slotsl-filters .choices,
body .slotsl-filters #slotsl-filters .choices__inner {
	min-inline-size: 0 !important;
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}
body .slotsl-filters #slotsl-filters .choices { margin: 0; }
body .slotsl-filters #slotsl-filters .choices__inner {
	display: flex;
	align-items: center;
	padding-block: 0 !important;
}
body .slotsl-filters #slotsl-filters .choices__list--single { padding: 0; }
body .slotsl-filters #slotsl-filters .choices__item,
body .slotsl-filters #slotsl-filters .choices__placeholder {
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	color: var(--grc-ink, #181715);
	opacity: 1;
}
body .slotsl-filters #slotsl-filters .choices__list--dropdown {
	border: 1px solid var(--grc-border-strong, #ddd);
	border-radius: var(--sl-field-radius);
	font-family: var(--grc-font-ui);
	font-size: 15px;
}
body .slotsl-filters #slotsl-filters .choices[data-type*='select-one']::after {
	border-color: var(--grc-ink, #181715) transparent transparent;
}
body .slotsl-filters #slotsl-filters .choices.is-focused .choices__inner {
	outline: 2px solid var(--grc-link, #0088cc);
	outline-offset: 1px;
}

/* --- megaways: a control in the row, not a stray label ----------------- */
body .slotsl-filters #slotsl-filters .slotsl-providers.slotsl-megaways {
	box-sizing: border-box;
	display: flex;
	gap: 10px;
	align-items: center;
	block-size: var(--sl-field-size);
	padding-inline: 15px;
	border: 1px solid var(--grc-border-strong, #ddd);
	border-radius: var(--sl-field-radius);
	background: var(--grc-surface, #fff);
	font-family: var(--grc-font-ui);
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	color: var(--grc-ink, #181715);
}
body .slotsl-filters #slotsl-filters .slotsl-megaways > div { margin-right: 0 !important; }
/* The switch keeps the plugin's 60x34 geometry on desktop — it fits a 54px
   row — and only its "on" colour changes, from the plugin's #2196F3. */
/*
 * The switch is left at the size the flex row gives it.
 *
 * It was briefly pinned to a hard 60px basis, because min-width:auto on an
 * empty flex item resolves against its (nonexistent) content and the box was
 * measuring 30px rather than the plugin's 60px. Reverted on instruction — the
 * wider toggle did not look better, and the narrower one is not a fault: the
 * slider is absolutely positioned and still renders as a complete control.
 */
body .slotsl-filters #slotsl-filters .slotsl-megaways .switch { flex: 0 0 auto; }
body .slotsl-filters #slotsl-filters .slotsl-megaways input:checked + .slider {
	background-color: var(--grc-link, #0088cc);
}
body .slotsl-filters #slotsl-filters .slotsl-megaways input:focus-visible + .slider {
	outline: 2px solid var(--grc-link, #0088cc);
	outline-offset: 2px;
}

/* ======================================================================
 * THE ROW AT EACH WIDTH — measured on staging, not assumed
 *
 *   >= 1200   one row of six      383 / 170 / 170 / 170 / 170 / 155, all 54px
 *   780-1199  two rows of three   305 each at 1000px
 *   <  780    three rows of two   155 each at 375px
 *
 * 1200 is the plugin's own breakpoint — where it turns the panel into a row,
 * reveals the second container and applies `min-width: 240px` to the fields —
 * so nothing here lands mid-transition. 780 is ours.
 *
 * WHY max-inline-size APPEARS ALONGSIDE flex-basis. With basis alone the row
 * came out 249 / 334 / 334 at 1000px: a <select> is floored by the width of
 * its widest option, so the two dropdowns held more than their third and the
 * field absorbed the difference. Capping each item at its share makes the
 * three equal (measured: 305 / 305 / 305).
 *
 * And the mobile basis is `calc(50% - 8px)`, not `- 5px`, even though the gap
 * is 10px: two items at exactly 50% minus half the gap is an exact fit, and
 * an exact fit wraps on sub-pixel rounding. It did — the field ended up alone
 * on its line and the panel came out four rows deep instead of three.
 * ====================================================================== */
@media (min-width: 1200px) {
	/*
	 * NO `flex-wrap: nowrap` HERE ANY MORE — that was the fault behind "the
	 * search field is behind the provider field".
	 *
	 * nowrap does not make six controls fit; it makes them refuse to move to a
	 * second line, so once the five fixed-width controls plus the gaps exceed
	 * the panel (they need ~935px before the field gets anything, and the
	 * panel is only ~1100px wide at a 1200px viewport) the row runs straight
	 * out of the grey panel and over its neighbours. Measured with the
	 * container swept from 1400 down to 900: the row's right edge stayed put
	 * while the panel shrank past it.
	 *
	 * With `wrap` (inherited from the base rule) the six still sit on one line
	 * wherever they fit — the widths below are chosen so they do at any normal
	 * desktop width — and where they genuinely do not, the row wraps. A second
	 * line is the correct answer to not enough width; spilling never is.
	 */
	/*
	 * A SMALL flex-basis on purpose. Wrapping is decided on hypothetical main
	 * sizes — the bases, before any shrinking — so a generous basis on the
	 * field makes the row break to two lines while there is still room for
	 * six. At 120px the five fixed controls plus gaps plus this basis total
	 * ~1035px, which fits every panel down to a ~1085px container (a ~1185px
	 * viewport), i.e. the whole of this media query's range. flex-grow then
	 * hands the field all the leftover space, so it still ends up the widest
	 * control on the row — measured 383px at 1440.
	 */
	body .slotsl-filters #slotsl-filters .slotsl-search { flex: 1 1 120px; }
	body .slotsl-filters #slotsl-filters .slotsl-providers { flex: 0 1 170px; }
	body .slotsl-filters #slotsl-filters .slotsl-providers.slotsl-megaways { flex: 0 0 auto; }
	/* Beats the plugin's min-width:240px, declared in this same media query. */
	body .slotsl-filters #slotsl-filters .slotsl-search input,
	body .slotsl-filters #slotsl-filters .slotsl-providers select,
	body .slotsl-filters #slotsl-filters .slotsl-megaways { min-inline-size: 0 !important; }
}

@media (min-width: 780px) and (max-width: 1199px) {
	body .slotsl-filters #slotsl-filters .slotsl-search,
	body .slotsl-filters #slotsl-filters .slotsl-providers {
		flex: 1 1 calc(33.333% - 7px);
		max-inline-size: calc(33.333% - 7px);
	}
}

@media (max-width: 779px) {
	body .slotsl-filters { padding: 12px; }
	/*
	 * THE FIELD TAKES THE FIRST LINE ON ITS OWN, then the five dropdowns pair
	 * up in DOM order: provider | sort / type | theme / megaways. Asked for as
	 * "on mobile search first then provider" — a half-width search field also
	 * clipped its own placeholder at 320px.
	 *
	 * That is four rows rather than the three this block held before. Six
	 * controls cannot be three rows AND give the field a line of its own; the
	 * field's own line is the later instruction, so it wins. Pairing megaways
	 * with the field's line would fix the count but only by reordering against
	 * the DOM, which breaks the tab order.
	 */
	body .slotsl-filters #slotsl-filters .slotsl-search { flex: 1 1 100%; }
	body .slotsl-filters #slotsl-filters .slotsl-providers {
		flex: 1 1 calc(50% - 8px);
		max-inline-size: calc(50% - 5px);
	}
	body .slotsl-filters #slotsl-filters .slotsl-providers.slotsl-megaways {
		/* Full width: it is last, so at half width it sat alone on its line
		   with an empty half beside it. Label left, switch right. */
		flex: 1 1 100%;
		max-inline-size: none;
		padding-inline: 12px;
		gap: 8px;
		font-size: 14px;
		justify-content: space-between;
	}
	/*
	 * The switch is scaled down here. At 320px each column is 143px, and the
	 * plugin's 60x34 switch plus the label plus the box's padding measures
	 * 156px — it would push out of its own control. 44x24 measures 140px.
	 */
	body .slotsl-filters #slotsl-filters .slotsl-megaways .switch {
		inline-size: 44px;
		block-size: 24px;
	}
	body .slotsl-filters #slotsl-filters .slotsl-megaways .slider::before {
		block-size: 18px;
		inline-size: 18px;
		inset-inline-start: 3px;
		inset-block-end: 3px;
	}
	body .slotsl-filters #slotsl-filters .slotsl-megaways input:checked + .slider::before {
		transform: translateX(20px);
	}
}

/* --- the count line under the grid ------------------------------------- */
body .slotsl-progress {
	font-family: var(--grc-font-body);
	font-size: 13px;
	line-height: 18px;
	color: var(--grc-text-faint, #888);
}

/* ---- THE BELTS ARE NOT TOUCHED FROM HERE -------------------------------
 * There was a `.grc-fg-page { --hr-radius: var(--sl-radius) }` here, to stop
 * the page mixing two corner radii. It was the wrong end to fix it from: it
 * overrode renew.css's 2px on .hr-slot, so raising the plugin token rounded
 * off Newest and Upcoming Games — cards that were correct already. The
 * archive card is now brought to --hr-radius instead, so the page agrees on
 * one corner and .hr-slot keeps the value the rest of the site gives it.
 * ---------------------------------------------------------------------- */