/*
 * RosterSlots v3: free spins, providers, networks.
 *
 * Loaded last. Adds the components the refocus needs (offer cards, routes
 * panel, spin-size row, guide cards, hub header) using the existing tokens,
 * so the site keeps its Cold Deck look.
 */

/* ---- shared small parts ---- */

.rs-kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 400 10.5px/1 var(--font-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 var(--s2);
}

.rs-adtag {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 3px;
	background: var(--bg-muted);
	font: 600 10px/1.4 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

/* ---- hero, v3 ---- */

.rs-hero--v3 .rs-hero__title {
	max-width: 18ch;
}

.rs-hero--v3 {
	padding-bottom: var(--s5);
}

/* ---- spin-size row ---- */

.rs-sizes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-top: var(--s3);
}

.rs-sizes__label {
	font: 400 10.5px/1 var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.rs-sizes ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rs-sizes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	font: 700 15px/1 var(--font-head);
	color: var(--text-primary);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.rs-sizes a:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ---- routes panel (hero, right) ---- */

.rs-routes {
	border: 1px solid var(--border-subtle);
	background: var(--bg-base);
}

.rs-routes__head {
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border-subtle);
	font: 400 10.5px/1 var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.rs-routes ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rs-routes li + li {
	border-top: 1px solid var(--border-subtle);
}

.rs-routes__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"code name count"
		". line line";
	gap: 6px 14px;
	align-items: baseline;
	padding: 20px 16px;
	color: var(--text-primary);
	text-decoration: none;
	transition: background var(--dur) var(--ease);
}

.rs-routes__link:hover {
	background: var(--bg-surface);
}

.rs-routes__link:hover .rs-routes__name {
	color: var(--accent);
}

.rs-routes__code {
	grid-area: code;
	font: 400 10px/1 var(--font-mono);
	letter-spacing: 0.12em;
	color: var(--text-muted);
}

.rs-routes__name {
	grid-area: name;
	font: 700 22px/1 var(--font-head);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	transition: color var(--dur) var(--ease);
}

.rs-routes__count {
	grid-area: count;
	font: 400 11px/1 var(--font-mono);
	color: var(--accent);
	white-space: nowrap;
}

.rs-routes__line {
	grid-area: line;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-secondary);
}

/* ---- partner offer cards ---- */

.rs-offers__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 860px) {
	.rs-offers__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

.rs-offer {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--s3);
	border: 1px solid var(--border-subtle);
	border-top: 2px solid var(--accent-fill);
	background: var(--bg-base);
}

.rs-offer__brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	min-height: 40px;
}

.rs-offer__logo {
	display: block;
	width: auto;
	height: 30px;
}

.rs-offer__headline {
	margin: 0;
	font: 700 clamp(24px, 2.6vw, 32px)/1.05 var(--font-head);
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--text-primary);
}

.rs-offer__detail {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text-secondary);
}

.rs-offer__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	background: var(--border-subtle);
	border: 1px solid var(--border-subtle);
}

.rs-offer__facts div {
	padding: 10px 12px;
	background: var(--bg-surface);
}

.rs-offer__facts dt {
	font: 400 9.5px/1.2 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.rs-offer__facts dd {
	margin: 4px 0 0;
	font: 600 14px/1.3 var(--font-body);
	color: var(--text-primary);
}

.rs-offer__cta {
	align-self: flex-start;
}

.rs-offer__small {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--text-muted);
}

/* ---- guide cards (free spins, networks) ---- */

.rs-guidegrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1000px) {
	.rs-guidegrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.rs-guidegrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.rs-guidecard__link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--border-subtle);
	background: var(--bg-base);
	color: var(--text-primary);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease);
}

.rs-guidecard__link:hover {
	border-color: var(--accent);
}

.rs-guidecard__num {
	font: 700 34px/1 var(--font-head);
	letter-spacing: -0.03em;
	color: var(--accent);
}

.rs-guidecard__title {
	font: 700 17px/1.2 var(--font-head);
	letter-spacing: -0.01em;
}

.rs-guidecard__excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-secondary);
}

.rs-guidecard__meta {
	margin-top: auto;
	font: 400 10.5px/1.4 var(--font-mono);
	color: var(--text-muted);
}

/* ---- hub header ---- */

.rs-hubhead {
	padding-block: var(--s5) var(--s3);
	max-width: 860px;
}

.rs-hubhead__title {
	font: 700 clamp(34px, 5vw, 60px)/1 var(--font-head);
	letter-spacing: -0.035em;
	text-transform: uppercase;
	margin: 0 0 var(--s3);
}

/* ---- compact game grid on the homepage ---- */

.rs-gamegrid--compact {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.rs-gamegrid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.rs-gamegrid--compact {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- partner offers inside an article column ---- */

.rs-offers-inline {
	margin-block: var(--s4);
}

.rs-offers-inline .rs-section {
	padding-block: 0;
}

.rs-offers-inline .rs-section__title {
	font-size: clamp(20px, 2.2vw, 26px);
	max-width: none;
}

.rs-offers-inline .rs-offers__list {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s2);
}

.rs-offers-inline .rs-offer {
	padding: var(--s2) var(--s3);
	gap: 10px;
}

.rs-offers-inline .rs-offer__headline {
	font-size: clamp(20px, 2vw, 24px);
}

.rs-offers-inline .rs-offer__facts {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 640px) {
	.rs-offers-inline .rs-offer__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.rs-offers-inline ul,
.rs-offers-inline dl {
	margin-left: 0;
	padding-left: 0;
}

.rs-offers-inline li::before {
	content: none;
}

.rs-fsguide .rs-kicker a {
	color: var(--text-muted);
	text-decoration: none;
}

.rs-fsguide .rs-kicker a:hover {
	color: var(--accent);
}

/* ---- layout fixes, 26 Oct 2026 ---- */

/* The routes panel sat at the top of a much taller copy column, leaving a
   block of empty space under it. Centre it against the copy instead. */
@media (min-width: 1024px) {
	.rs-hero--v3 > .rs-routes {
		align-self: center;
	}
}

/* Screen-reader labels inside table cells are absolutely positioned. With no
   positioned ancestor inside the scroll box they escaped it and pushed phone
   pages 116px wide. Making the box the containing block keeps them inside. */
.rs-tablewrap,
.rs-tablebox {
	position: relative;
}

/* Footer: brand plus five link columns. The old four-track grid wrapped the
   last two columns onto a second row with half the width empty. */
.rs-footcols {
	grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr));
	gap: var(--s4) var(--s3);
}

.rs-footcols__blurb {
	max-width: 30ch;
}

@media (max-width: 1100px) {
	.rs-footcols {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.rs-footcols__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 760px) {
	.rs-footcols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.rs-footcols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Byline separators: drawn in the gap, outside each item. Drawn inside, the
   dot landed in the Verified pill and at the start of every wrapped line.
   The row clips, so a dot before a line-starting item is cut off. */
.rs-gamehero .rs-byline,
.rs-review > .rs-byline {
	overflow: hidden;
	gap: 6px var(--s2);
}

.rs-gamehero .rs-byline > *,
.rs-review > .rs-byline > * {
	position: relative;
}

.rs-gamehero .rs-byline > * + *::before,
.rs-review > .rs-byline > * + *::before {
	position: absolute;
	top: 50%;
	left: calc(var(--s2) / -2 - 1.5px);
	margin: -1.5px 0 0;
}

/* The disclosure under the offer cards wrapped its link at 760px. */
.rs-offers .rs-section__disclosure {
	max-width: 80ch;
}

/* Score strip on a phone: once the rows drop under the score there is no
   neighbour to divide from, and three columns are too narrow for a studio
   name or "Over 21,100x bet", so let the values wrap instead of clipping. */
@media (max-width: 900px) {
	.rs-scorecard--strip .rs-scorecard__score {
		border-right: 0;
		padding-right: 0;
	}

	.rs-scorecard--strip .rs-scorecard__rows dd {
		white-space: normal;
		overflow: visible;
		overflow-wrap: anywhere;
	}
}

@media (max-width: 520px) {
	.rs-scorecard--strip .rs-scorecard__rows {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		row-gap: var(--s2);
	}
}

/* ---- inline offers: article-column overrides (beat .rs-prose and v4) ---- */

.rs-prose .rs-offers-inline .rs-section__head {
	display: block;
}

.rs-prose .rs-offers-inline .rs-section__head > * + * {
	margin-top: 10px;
}

.rs-prose .rs-offers-inline .rs-section__title {
	font-size: 22px;
	line-height: 1.15;
	margin: 0;
}

.rs-prose .rs-offers-inline .rs-section__note,
.rs-prose .rs-offers-inline .rs-offer__detail {
	font-size: 15px;
	line-height: 1.6;
}

.rs-prose .rs-offers-inline .rs-offer__headline {
	color: var(--text-primary);
	font-size: 22px;
	margin: 0;
}

.rs-prose .rs-offers-inline .rs-offer__small,
.rs-prose .rs-offers-inline .rs-section__disclosure {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--text-muted);
	margin: 0;
}

.rs-prose .rs-offers-inline .rs-section__disclosure {
	margin-top: var(--s2);
}

.rs-prose .rs-offers-inline p {
	margin-block: 0;
}

.rs-prose .rs-offers-inline .rs-btn {
	text-decoration: none;
}