/* livestaker — design tokens & base styles
 * Ported from the Lovable canonical styles.css (src/styles.css).
 * Keep token names in sync with Lovable so cross-references stay valid.
 */

:root {
	--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

	/* Surfaces */
	--color-bg-deep: #0E3D2C;
	--color-bg-deep-band: #1A4D38;
	--color-bg-page: #FAF7F0;
	--color-bg-card: #FFFFFF;
	--color-bg-sidebar: #F2EDE3;

	/* Text */
	--color-text-on-dark: #FFFFFF;
	--color-text-on-dark-muted: #B8C9C0;
	--color-text-primary: #0F0F0F;
	--color-text-body: #2C2C2C;
	--color-text-muted: #6B6B6B;

	/* Accents */
	--color-accent-bright: #2D8659;
	--color-accent-red: #C8312A;
	--color-accent-red-hover: #A52720;
	--color-accent-brass: #C9A55C;

	/* Signals */
	--color-trust: #16A34A;
	--color-warn: #C8312A;
	--color-gold: #F5C518;

	/* Borders */
	--color-border-subtle: #E5DFD2;
	--color-border-dark: #1A4D38;
	--color-border-strong: #C9C2B2;

	/* Radii */
	--radius-sm: 0.125rem;
	--radius-md: 0.25rem;
	--radius-lg: 0.375rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background-color: var(--color-bg-page);
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 28px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--color-text-primary);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }
h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; }
h3 { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; }
h4 { font-size: 18px; line-height: 1.3; }

p { margin: 0 0 1em; }

a {
	color: var(--color-accent-bright);
	text-decoration: none;
}
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

hr {
	border: 0;
	border-top: 1px solid var(--color-border-subtle);
	margin: 2rem 0;
}

/* Container */
.container-page {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Type utilities (mirror Lovable) */
.eyebrow {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.eyebrow-light {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-accent-bright);
}
.nav-label {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.col-label {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.col-label-dark {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-text-on-dark-muted);
}
.tabular-figs { font-variant-numeric: tabular-nums; }

/* Inactive link styling — used by link_if_exists() fallback (Phase 1 Step 2 will wire this up). */
.link-inactive {
	cursor: default;
	opacity: 0.7;
}
.link-inactive:hover { text-decoration: none; }

/* ============================================================
 * Casino grid — Phase 3 Step 1 ([casino_grid] shortcode)
 * Markup matches Lovable's CasinoGrid component in HomeBody.tsx.
 * ============================================================ */

.casino-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) {
	.casino-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.casino-grid { grid-template-columns: repeat(3, 1fr); }
}

.casino-grid__empty {
	color: var(--color-text-muted);
	font-size: 14px;
	padding: 1rem 0;
}

.casino-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.casino-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	padding: 1rem;
	border-bottom: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
}
.casino-card__logo img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}
.casino-card__logo-placeholder {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-text-muted);
}

.casino-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1rem 1.25rem 1.25rem;
}

.casino-card__eyebrow {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-accent-bright);
}

.casino-card__name {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-text-primary);
	margin: 0.5rem 0 0;
	letter-spacing: -0.01em;
}

.casino-card__bonus {
	font-size: 14px;
	line-height: 20px;
	color: var(--color-text-body);
	margin: 0.5rem 0 0;
	flex: 1;
}

.casino-card__features {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.casino-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-text-body);
}
.casino-card__features svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-accent-bright);
}

.casino-card__cta {
	display: block;
	text-align: center;
	background: var(--color-accent-bright);
	color: var(--color-text-on-dark);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 12px 16px;
	margin-top: 1rem;
	text-decoration: none;
	transition: background-color 150ms ease;
}
.casino-card__cta:hover {
	background: var(--color-bg-deep);
	text-decoration: none;
	color: var(--color-text-on-dark);
}
/* Inactive variant — keep the prominent green CTA treatment even when no
   affiliate URL is set, mirroring the .home-hero__btn--play and
   .site-header__cta override pattern. Cursor goes default so users get a
   subtle "not yet" affordance, but the visual is otherwise identical. */
.casino-card__cta.link-inactive {
	background: var(--color-accent-bright);
	color: var(--color-text-on-dark);
	opacity: 1;
	cursor: default;
}

/* ============================================================
 * Site header (top nav) — Phase 3 Step 2
 * ============================================================ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-bg-page);
	border-bottom: 1px solid var(--color-border-subtle);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 64px;
}
@media (min-width: 1024px) {
	.site-header__inner { height: 72px; }
}

.site-header__logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.01em;
	line-height: 1;
	text-decoration: none;
}
.site-header__logo:hover { text-decoration: none; }
.site-header__logo .live { color: var(--color-text-primary); }
.site-header__logo .staker { color: var(--color-accent-red); }

.site-header__nav {
	display: none;
}
@media (min-width: 1024px) {
	.site-header__nav { display: block; }
}
.site-header__nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}
.site-header__nav .nav-label {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 150ms ease;
}
.site-header__nav .nav-label:hover {
	color: var(--color-accent-bright);
	text-decoration: none;
}
.site-header__nav .nav-label.link-inactive {
	color: var(--color-text-muted);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.site-header__search {
	display: flex;
	align-items: center;
}
.site-header__search input {
	display: none;
	width: 200px;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	padding: 6px 10px;
	font: inherit;
	font-size: 14px;
	border-radius: var(--radius-md);
}
@media (min-width: 768px) {
	.site-header__search input { display: inline-block; }
}
.site-header__search button {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0.5rem;
	color: var(--color-text-muted);
	display: inline-flex;
	align-items: center;
	transition: color 150ms ease;
}
.site-header__search button:hover { color: var(--color-text-primary); }

.site-header__cta {
	display: none;
	align-items: center;
	background: var(--color-accent-red);
	color: var(--color-text-on-dark);
	padding: 10px 16px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 150ms ease;
}
@media (min-width: 640px) {
	.site-header__cta { display: inline-flex; }
}
.site-header__cta:hover {
	background: var(--color-accent-red-hover);
	color: var(--color-text-on-dark);
	text-decoration: none;
}
/* Explore Live Games CTA stays visually red even when its target (/live/) doesn't
   exist yet — it's a prominent brand element, not just a text link. The
   link_if_exists fallback still produces a <span> (non-clickable), but we override
   the default `.link-inactive` muting so the button keeps full red treatment. */
.site-header__cta.link-inactive {
	background: var(--color-accent-red);
	color: var(--color-text-on-dark);
	opacity: 1;
}

.site-header__age-badge {
	display: none;
	align-items: center;
	background: var(--color-warn);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	padding: 0 10px;
	height: 24px;
	border-radius: 999px;
}
@media (min-width: 640px) {
	.site-header__age-badge { display: inline-flex; }
}

.site-header__mobile-toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0.5rem;
	color: var(--color-text-primary);
	display: inline-flex;
	align-items: center;
}
@media (min-width: 1024px) {
	.site-header__mobile-toggle { display: none; }
}

/* Mobile menu (CSS-only via checkbox hack) */
.site-header__mobile-checkbox { display: none; }
.site-header__mobile-menu {
	display: none;
	background: var(--color-bg-page);
	border-top: 1px solid var(--color-border-subtle);
}
.site-header__mobile-checkbox:checked ~ .site-header__mobile-menu { display: block; }
.site-header__mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0.5rem 1.5rem 1rem;
}
.site-header__mobile-menu li { padding: 0.5rem 0; }
.site-header__mobile-menu a,
.site-header__mobile-menu .link-inactive {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ============================================================
 * Site footer — Phase 3 Step 2
 * ============================================================ */

.site-footer {
	background: var(--color-bg-page);
	border-top: 1px solid var(--color-border-subtle);
	margin-top: 4rem;
}
.site-footer__top {
	padding-top: 5rem;
	padding-bottom: 3rem;
}
.site-footer__brand-wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 36px;
	letter-spacing: -0.01em;
	line-height: 1;
}
.site-footer__brand-wordmark .live { color: var(--color-text-primary); }
.site-footer__brand-wordmark .staker { color: var(--color-accent-red); }
.site-footer__tagline {
	margin-top: 0.75rem;
	font-size: 15px;
	color: var(--color-text-muted);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem;
	margin-top: 3rem;
}
@media (min-width: 1024px) {
	.site-footer__columns { grid-template-columns: repeat(4, 1fr); }
}
.site-footer__col-label {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-accent-bright);
	margin: 0 0 1.25rem;
}
.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.site-footer__col a,
.site-footer__col .link-inactive {
	font-size: 15px;
	color: var(--color-text-body);
	text-decoration: none;
	transition: color 150ms ease;
}
.site-footer__col a:hover {
	color: var(--color-text-primary);
	text-decoration: none;
}

.site-footer__legal {
	border-top: 1px solid var(--color-border-subtle);
}
.site-footer__legal-inner {
	padding: 2rem 0;
}
.site-footer__legal-heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-primary);
	margin: 0;
}
.site-footer__legal-helplines {
	margin-top: 0.75rem;
	font-size: 15px;
	color: var(--color-text-body);
}
.site-footer__legal-helplines a {
	color: var(--color-text-body);
	text-decoration: none;
}
.site-footer__legal-helplines a:hover { color: var(--color-text-primary); }
.site-footer__legal-disclosure {
	margin-top: 1rem;
	max-width: 900px;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text-muted);
}
.site-footer__legal-policies {
	margin-top: 1rem;
	font-size: 13px;
	color: var(--color-text-muted);
}
.site-footer__legal-policies a,
.site-footer__legal-policies .link-inactive {
	color: var(--color-text-muted);
	text-decoration: none;
}
.site-footer__legal-policies a:hover { color: var(--color-text-primary); }

/* ============================================================
 * Sidebar — Phase 3 Step 2 (right-column section nav)
 * ============================================================ */

.layout-with-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 1024px) {
	/* Sidebar on the LEFT (260px), content fills the rest. Matches Lovable's
	   `lg:grid-cols-[260px_1fr]` layout. The handoff doc had this on the right —
	   the Lovable design (and this rule) are the source of truth. */
	.layout-with-sidebar {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 3rem;
	}
}

.livestaker-sidebar {
	background: var(--color-bg-sidebar);
	border: 1px solid var(--color-border-subtle);
	padding: 1.5rem;
}
@media (min-width: 1024px) {
	.livestaker-sidebar {
		position: sticky;
		top: 88px; /* below 72px header + 16px gap */
		max-height: calc(100vh - 88px);
		overflow-y: auto;
	}
}

.livestaker-sidebar__section + .livestaker-sidebar__section {
	border-top: 1px solid var(--color-border-subtle);
	margin-top: 1rem;
	padding-top: 1rem;
}

.livestaker-sidebar__heading {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-primary);
	margin: 0 0 0.75rem;
	text-decoration: none;
}
.livestaker-sidebar__heading.link-inactive {
	color: var(--color-text-primary);
	opacity: 1; /* the heading shouldn't look dim; it's just non-clickable */
}

.livestaker-sidebar__subgroup + .livestaker-sidebar__subgroup {
	margin-top: 1rem;
}
.livestaker-sidebar__sublabel {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 0.5rem;
}

.livestaker-sidebar__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.livestaker-sidebar__links a,
.livestaker-sidebar__links .link-inactive {
	display: block;
	padding: 2px 0 2px 12px;
	border-left: 2px solid transparent;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-text-body);
	text-decoration: none;
	transition: color 150ms ease, border-color 150ms ease;
}
.livestaker-sidebar__links a:hover {
	color: var(--color-accent-bright);
	border-left-color: var(--color-accent-bright);
	text-decoration: none;
}

.livestaker-sidebar__view-all {
	margin-top: 0.75rem;
}
.livestaker-sidebar__view-all a,
.livestaker-sidebar__view-all .link-inactive {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-bright);
	text-decoration: none;
}
.livestaker-sidebar__view-all a:hover {
	color: var(--color-accent-red);
}

/* ============================================================
 * Homepage — Phase 4 Step 1
 * Matches Lovable's Hero.tsx + HomeBody.tsx + MeetTheTeam.tsx.
 * ============================================================ */

/* ---- Hero ---- */
.home-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg-deep);
}
.home-hero__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.home-hero__layer--bg {
	background-image: url("https://images.unsplash.com/photo-1511193311914-0346f16efe90?w=1920&q=80");
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.home-hero__layer--tint {
	background-color: rgba(14, 61, 44, 0.8);
	z-index: 1;
}
.home-hero__layer--fade {
	background: linear-gradient(to right, rgba(14,61,44,0.7) 0%, rgba(14,61,44,0) 65%);
	z-index: 2;
}
.home-hero__inner {
	position: relative;
	z-index: 3;
	padding-top: 2.5rem;
	padding-bottom: 1.5rem;
}
.home-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 1024px) {
	.home-hero__grid { grid-template-columns: 3fr 2fr; gap: 3rem; }
}
.home-hero__copy { max-width: 600px; }
.home-hero__copy h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(32px, 4vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--color-text-on-dark);
	margin: 0;
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
	text-transform: uppercase;
}
.home-hero__copy p {
	max-width: 560px;
	margin: 0.75rem 0 0;
	font-size: 19px;
	line-height: 30px;
	color: var(--color-text-on-dark-muted);
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.home-hero__featured-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.home-hero__featured-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	background: var(--color-bg-deep-band);
	border: 1px solid var(--color-border-dark);
	padding: 14px 20px;
}
@media (min-width: 640px) {
	.home-hero__featured-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}
.home-hero__featured-info {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 12px;
}
.home-hero__featured-thumb {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 640px) {
	.home-hero__featured-thumb {
		flex: 0 0 48px;
		width: 48px;
		height: 48px;
	}
}
.home-hero__featured-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.home-hero__featured-thumb-letter {
	color: var(--color-accent-bright);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
}
.home-hero__featured-meta {
	flex: 1;
	min-width: 0;
}
.home-hero__featured-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-on-dark);
}
.home-hero__featured-cat {
	margin-top: 2px;
	font-size: 12px;
	color: var(--color-text-on-dark-muted);
}

/* Two-button actions cluster per featured row (matches Lovable's GameCardActions). */
.home-hero__featured-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0;
}
@media (min-width: 480px) {
	.home-hero__featured-actions { flex-direction: row; }
}
.home-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	border-radius: 6px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 8px 14px;
	min-height: 36px;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
	cursor: pointer;
}
.home-hero__btn--review {
	border-color: var(--color-accent-bright);
	background: transparent;
	color: var(--color-accent-bright);
}
.home-hero__btn--review:hover {
	background: var(--color-accent-bright);
	color: var(--color-text-on-dark);
	text-decoration: none;
}
/* Inactive variant — keep the outlined treatment, just not clickable. */
.home-hero__btn--review.link-inactive {
	background: transparent;
	color: var(--color-accent-bright);
	border-color: var(--color-accent-bright);
	opacity: 1;
}
.home-hero__btn--play {
	background: var(--color-accent-red);
	color: var(--color-text-on-dark);
}
.home-hero__btn--play:hover {
	background: var(--color-accent-red-hover);
	color: var(--color-text-on-dark);
	text-decoration: none;
}
/* Inactive variant — keep the prominent red treatment. */
.home-hero__btn--play.link-inactive {
	background: var(--color-accent-red);
	color: var(--color-text-on-dark);
	opacity: 1;
}

/* ---- Home layout overrides ---- */
.home-layout { padding-top: 3rem; padding-bottom: 5rem; }
.home-body { display: flex; flex-direction: column; }

/* ---- Section pattern ---- */
.home-section {
	padding-top: 4.5rem;
	border-top: 1px solid var(--color-border-subtle);
}
.home-section--first {
	padding-top: 0;
	border-top: 0;
}
.home-section h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 3.4vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0.75rem 0 0;
}
.home-section__intro {
	margin: 1rem 0 0;
	max-width: 680px;
	font-size: 17px;
	line-height: 28px;
	color: var(--color-text-body);
}
.home-section__body { margin-top: 2.5rem; }
.home-section__view-all {
	margin: 2rem 0 0;
	font-size: 14px;
	font-weight: 600;
}
.home-section__view-all a {
	color: var(--color-accent-bright);
	text-decoration: none;
}
.home-section__view-all a:hover { color: var(--color-bg-deep); }
.home-section__view-all--centered { text-align: center; }

/* ---- Game-type cards (section 2) ---- */
.home-game-types {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px) { .home-game-types { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-game-types { grid-template-columns: repeat(3, 1fr); } }

.home-game-type {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--color-text-primary);
	transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.home-game-type:hover {
	transform: translateY(-2px);
	border-color: var(--color-accent-bright);
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	text-decoration: none;
}
.home-game-type:hover h3 { color: var(--color-accent-bright); }
.home-game-type.link-inactive { opacity: 1; } /* don't dim the whole card */
.home-game-type.link-inactive h3 { color: var(--color-text-muted); }
.home-game-type__icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-sidebar);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent-bright);
}
.home-game-type h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
	color: var(--color-text-primary);
	transition: color 150ms ease;
}
.home-game-type p {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--color-text-muted);
}

/* ---- Series cards (section 3) ---- */
.home-series {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 640px) { .home-series { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-series { grid-template-columns: repeat(4, 1fr); } }
.home-series__card {
	position: relative;
	padding: 1.5rem;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
}
.home-series__accent {
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 4px;
	background: var(--color-accent-bright);
}
.home-series__card h3 {
	margin: 0.5rem 0 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	color: var(--color-text-primary);
}
.home-series__card p {
	margin: 0.75rem 0 0;
	flex: 1;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-text-body);
}
.home-series__link {
	margin-top: 1.25rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-bright);
	text-decoration: none;
}
.home-series__link:hover { color: var(--color-bg-deep); }

/* ---- Featured game cards (section 4) ---- */
.home-featured-games {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) { .home-featured-games { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-featured-games { grid-template-columns: repeat(3, 1fr); } }
.home-featured-game {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
}
.home-featured-game__thumb {
	aspect-ratio: 4 / 3;
	background: var(--color-bg-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-image: linear-gradient(135deg, var(--color-bg-deep) 0%, var(--color-bg-deep-band) 100%);
}
.home-featured-game__thumb-label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	text-align: center;
	color: var(--color-text-on-dark);
	letter-spacing: -0.01em;
}
.home-featured-game__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* When an <img> is present, drop the gradient-card padding so the image fills edge-to-edge. */
.home-featured-game__thumb:has(.home-featured-game__thumb-img) {
	padding: 0;
}
.home-featured-game__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
}
.home-featured-game__body h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	margin: 0.5rem 0 0;
}
.home-featured-game__body p {
	margin: 0.5rem 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-text-body);
	flex: 1;
}
.home-featured-game__cta {
	margin-top: 1.25rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-bright);
	text-decoration: none;
}
.home-featured-game__cta:hover { color: var(--color-bg-deep); }

/* ---- Studio pills (section 5) ---- */
.home-studios {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}
@media (min-width: 640px) { .home-studios { grid-template-columns: repeat(4, 1fr); } }
.home-studios__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: 999px;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--color-text-body);
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease;
}
.home-studios__pill:hover {
	border-color: var(--color-accent-bright);
	color: var(--color-accent-bright);
	text-decoration: none;
}
.home-studios__pill.link-inactive {
	opacity: 1;
	color: var(--color-text-muted);
}

/* ---- Meet the team ---- */
.home-team {
	background: var(--color-bg-sidebar);
	padding: 5rem 0;
}
.home-team__intro {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}
.home-team__intro h2 {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.home-team__intro p {
	margin: 1rem auto 0;
	max-width: 580px;
	font-size: 17px;
	line-height: 28px;
	color: var(--color-text-muted);
}
.home-team__cards {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.home-team__card {
	max-width: 760px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	background: var(--color-bg-deep);
	border-radius: 8px;
	padding: 1.5rem;
	text-align: center;
}
@media (min-width: 640px) {
	.home-team__card {
		flex-direction: row;
		text-align: left;
		align-items: center;
	}
}
.home-team__avatar {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
}
.home-team__avatar img,
.home-team__avatar-placeholder {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-accent-bright);
}
.home-team__avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-deep-band);
	color: var(--color-accent-bright);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 40px;
}
.home-team__details { min-width: 0; flex: 1; }
.home-team__namerow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	justify-content: center;
}
@media (min-width: 640px) { .home-team__namerow { justify-content: flex-start; } }
.home-team__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--color-text-on-dark);
}
.home-team__role {
	font-size: 14px;
	color: var(--color-text-on-dark-muted);
}
.home-team__tags {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	justify-content: center;
}
@media (min-width: 640px) { .home-team__tags { justify-content: flex-start; } }
.home-team__tag {
	font-size: 13px;
	color: var(--color-text-on-dark-muted);
}
.home-team__bio {
	margin-top: 0.75rem;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text-on-dark-muted);
}
.home-team__actions {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}
@media (min-width: 640px) { .home-team__actions { justify-content: flex-start; } }
.home-team__cta {
	display: inline-flex;
	align-items: center;
	background: var(--color-accent-bright);
	color: var(--color-text-on-dark);
	padding: 8px 16px;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 150ms ease;
}
.home-team__cta:hover { filter: brightness(0.9); color: var(--color-text-on-dark); text-decoration: none; }
.home-team__cta.link-inactive { background: var(--color-bg-deep-band); color: var(--color-text-on-dark-muted); }
.home-team__social { display: flex; gap: 0.75rem; }
.home-team__social a {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-deep-band);
	color: var(--color-text-on-dark);
	border-radius: 50%;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	transition: background-color 150ms ease;
}
.home-team__social a:hover { background: var(--color-accent-bright); text-decoration: none; color: var(--color-text-on-dark); }
.home-team__view-all {
	margin-top: 2rem;
	text-align: center;
	font-size: 15px;
	font-weight: 500;
}
.home-team__view-all a {
	color: var(--color-accent-bright);
	text-decoration: none;
}
.home-team__view-all a:hover { filter: brightness(0.9); }

/* ============================================================
 * Generic page hero — Phase 4 Step 2
 * Used on every page that has a hero EXCEPT the homepage.
 * ============================================================ */

.page-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg-deep);
}
/* Background URL is set inline by the template (livestaker_hero_background_url).
   Per-entity backgrounds: live CPT > game_category term > site default. */
.page-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	pointer-events: none;
}
.page-hero__tint {
	position: absolute;
	inset: 0;
	background-color: rgba(14, 61, 44, 0.78);
	z-index: 1;
	pointer-events: none;
}
.page-hero__inner {
	position: relative;
	z-index: 3;
}

.page-hero__breadcrumbs {
	padding-top: 1.5rem;
	font-size: 13px;
	color: var(--color-text-on-dark-muted);
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.page-hero__crumb,
.page-hero__crumb.link-inactive {
	color: var(--color-text-on-dark-muted);
	text-decoration: none;
}
.page-hero__crumb:hover { color: var(--color-accent-bright); text-decoration: none; }
.page-hero__crumb-sep { margin: 0 8px; opacity: 0.6; }
.page-hero__crumb--current { color: var(--color-text-on-dark); font-weight: 500; }

.page-hero__center {
	padding: 1.5rem 0 2rem;
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}

.page-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--color-text-on-dark);
	margin: 0.5rem 0 0;
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.page-hero__desc {
	margin: 1.25rem auto 0;
	max-width: 560px;
	font-size: 16px;
	line-height: 26px;
	color: var(--color-text-on-dark-muted);
}

.page-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.5rem;
	padding: 14px 28px;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-text-on-dark);
	background: var(--color-accent-red);
	text-decoration: none;
	transition: background-color 150ms ease;
}
.page-hero__cta:hover {
	background: var(--color-accent-red-hover);
	color: var(--color-text-on-dark);
	text-decoration: none;
}

/* ============================================================
 * Generic page section + provider games grid — Phase 4 Step 2
 * ============================================================ */

.page-body { display: flex; flex-direction: column; }

.page-section {
	padding-top: 3rem;
	border-top: 1px solid var(--color-border-subtle);
}
.page-section:first-of-type {
	padding-top: 2rem;
	border-top: 0;
}
.page-section__h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 1.5rem;
	color: var(--color-text-primary);
}
.page-section__empty {
	color: var(--color-text-muted);
	font-size: 15px;
	padding: 1rem 0 0;
}

/* Games-by-this-provider grid (also used on category hubs in Phase 4 Step 3).
   Visual is the same as home-featured-game on the homepage; just a more
   generic class so it reads correctly outside the homepage context. */
.provider-games {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) { .provider-games { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .provider-games { grid-template-columns: repeat(3, 1fr); } }
.provider-game {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
}
.provider-game__thumb {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-image: linear-gradient(135deg, var(--color-bg-deep) 0%, var(--color-bg-deep-band) 100%);
}
.provider-game__thumb:has(img) { padding: 0; }
.provider-game__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.provider-game__thumb-label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	text-align: center;
	color: var(--color-text-on-dark);
	letter-spacing: -0.01em;
}
.provider-game__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
}
.provider-game__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	margin: 0.5rem 0 1rem;
}
.provider-game__cta,
.provider-game__cta.link-inactive {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-bright);
	text-decoration: none;
}
.provider-game__cta:hover { color: var(--color-bg-deep); }

/* ============================================================
 * Category hub additional sections — Phase 4 Step 3 (revised)
 * Matches Lovable's category page structure (At a Glance,
 * What is, Studios, Guides, FAQ).
 * ============================================================ */

/* Section eyebrow above each H2 (matches Lovable's SectionHeader). */
.page-section__eyebrow {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-accent-bright);
	margin: 0 0 0.5rem;
}
.page-section__intro {
	margin: 1rem 0 1.5rem;
	max-width: 720px;
	font-size: 17px;
	line-height: 28px;
	color: var(--color-text-body);
}

/* At a Glance — 2-col tiles of key facts. */
.category-glance {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px) {
	.category-glance { grid-template-columns: repeat(2, 1fr); }
}
.category-glance__tile {
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: var(--radius-md);
	padding: 1.25rem;
}
.category-glance__label {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.category-glance__value {
	margin-top: 6px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--color-text-primary);
}
.category-placeholder {
	color: var(--color-text-muted);
	font-style: italic;
	border: 1px dashed var(--color-border-strong);
	padding: 1rem 1.25rem;
	border-radius: var(--radius-md);
	background: var(--color-bg-sidebar);
	font-size: 14px;
}

/* What is — long-form body text container (max-width for readability). */
.category-what-is {
	max-width: 720px;
}
.category-what-is p {
	margin: 0 0 1.25rem;
	font-size: 17px;
	line-height: 28px;
	color: var(--color-text-body);
}
.category-what-is p:last-child { margin-bottom: 0; }

/* Studios — pill list. */
.category-studios {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.category-studios__pill,
.category-studios__pill.link-inactive {
	display: inline-flex;
	align-items: center;
	min-width: 120px;
	justify-content: center;
	padding: 10px 20px;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--color-text-body);
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease;
	opacity: 1;
}
.category-studios__pill:hover {
	border-color: var(--color-accent-bright);
	color: var(--color-accent-bright);
	text-decoration: none;
}
.category-studios__pill.link-inactive {
	color: var(--color-text-muted);
}
.category-studios__footer {
	margin-top: 1.5rem;
	font-size: 13px;
	font-weight: 600;
}
.category-studios__footer a,
.category-studios__footer .link-inactive {
	color: var(--color-accent-bright);
	text-decoration: none;
}

/* Guides — 2-col cards. */
.category-guides {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 640px) {
	.category-guides { grid-template-columns: repeat(2, 1fr); }
}
.category-guides__card,
.category-guides__card.link-inactive {
	display: block;
	padding: 1.5rem;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color 150ms ease;
	min-height: 120px;
	opacity: 1;
}
.category-guides__card:hover {
	border-color: var(--color-accent-bright);
	text-decoration: none;
}
.category-guides__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.25;
	color: var(--color-text-primary);
	margin: 0;
	transition: color 150ms ease;
}
.category-guides__card.link-inactive .category-guides__title { color: var(--color-text-muted); }
.category-guides__card:hover .category-guides__title { color: var(--color-accent-bright); }
.category-guides__desc {
	margin: 0.5rem 0 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text-body);
}
.category-guides__cta {
	margin-top: 1rem;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-accent-bright);
}
.category-guides__card.link-inactive .category-guides__cta { color: var(--color-text-muted); }

/* FAQ — native <details>/<summary> accordion. */
.category-faq {
	margin: 0;
}
.category-faq__item {
	border-bottom: 1px solid var(--color-border-subtle);
}
.category-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 1.25rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.category-faq__item summary::-webkit-details-marker { display: none; }
.category-faq__item summary::marker { display: none; }
.category-faq__q {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--color-text-primary);
	margin: 0;
}
.category-faq__chevron {
	flex-shrink: 0;
	color: var(--color-accent-bright);
	transition: transform 200ms ease;
	font-size: 18px;
	line-height: 1;
}
.category-faq__item[open] .category-faq__chevron { transform: rotate(90deg); }
.category-faq__a {
	padding-bottom: 1.25rem;
	max-width: 720px;
	font-size: 16px;
	line-height: 26px;
	color: var(--color-text-body);
}
.category-faq__a p { margin: 0 0 1em; }
.category-faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
 * Taxonomy hub cards (/series/, /providers/) — Phase 5
 * ============================================================ */

.taxonomy-hub {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 640px) { .taxonomy-hub { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .taxonomy-hub { grid-template-columns: repeat(3, 1fr); } }

.taxonomy-hub__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
}
.taxonomy-hub__accent {
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 4px;
	background: var(--color-accent-bright);
}
.taxonomy-hub__name {
	margin: 0.5rem 0 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.15;
	color: var(--color-text-primary);
	letter-spacing: -0.01em;
}
.taxonomy-hub__desc {
	margin: 0.75rem 0 0;
	flex: 1;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text-body);
}
.taxonomy-hub__desc--placeholder {
	color: var(--color-text-muted);
	font-style: italic;
	font-size: 13px;
}
.taxonomy-hub__cta,
.taxonomy-hub__cta.link-inactive {
	margin-top: 1.25rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-bright);
	text-decoration: none;
}
.taxonomy-hub__cta:hover { color: var(--color-bg-deep); }

/* ============================================================
 * Single live game review template — Phase 6
 * ============================================================ */

/* ---- Hero ---- */
.single-live-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg-deep);
}
/* Hero content is centered in a 1100px max-width container — matches Lovable's
   `mx-auto max-w-[1100px]` on the hero. The sidebar does NOT appear inside the
   hero; it begins in the body section below, so the hero is full-width with no
   right-shift. The bg/tint layers remain absolute on the outer section, so the
   green background still spans the full viewport. Spacing mirrors Lovable's
   `pt-6` breadcrumb row + `pt-8 pb-8` content row. */
.single-live-hero__inner {
	position: relative;
	z-index: 3;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem 1rem 2rem;
}
@media (min-width: 640px) {
	.single-live-hero__inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.single-live-hero__grid {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-top: 1.5rem;
}
@media (min-width: 1024px) {
	.single-live-hero__grid {
		flex-direction: row;
		align-items: center;
		gap: 3rem;
	}
}
.single-live-hero__art {
	flex-shrink: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 240px;
	border-radius: 8px;
	background: rgba(14, 61, 44, 0.4);
	overflow: hidden;
}
@media (min-width: 1024px) {
	.single-live-hero__art {
		height: auto;
		min-height: 280px;
		padding: 1rem;
	}
}
.single-live-hero__art img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: 100%;
	object-fit: contain;
	object-position: center;
	box-shadow: none;
	filter: none;
}
.single-live-hero__art-placeholder {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 28px;
	color: var(--color-accent-bright);
	text-align: center;
	padding: 4rem 1rem;
	background: rgba(14, 61, 44, 0.4);
	border-radius: var(--radius-lg);
	width: 100%;
}
.single-live-hero__body { min-width: 0; }
.single-live-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(32px, 4.5vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--color-text-on-dark);
	margin: 0;
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Star rating row under the H1 (CSS-only — two layers, fill width-clipped to %). */
.single-live-hero__rating {
	margin: 1rem 0 0;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}
.rating-stars {
	position: relative;
	display: inline-block;
	font-size: 22px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.25);
	letter-spacing: 2px;
}
.rating-stars__bg,
.rating-stars__fill {
	font-family: serif; /* Unicode stars render larger in serif */
}
.rating-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--color-gold);
	white-space: nowrap;
}
.rating-stars__label {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text-on-dark);
	font-variant-numeric: tabular-nums;
}
.single-live-hero__intro {
	margin: 1rem 0 0;
	max-width: 520px;
	font-size: 16px;
	line-height: 26px;
	color: var(--color-text-on-dark-muted);
}
.single-live-hero__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 1.5rem;
	padding: 14px 28px;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-text-on-dark);
	background: var(--color-accent-red);
	text-decoration: none;
	transition: background-color 150ms ease;
}
.single-live-hero__cta:hover {
	background: var(--color-accent-red-hover);
	color: var(--color-text-on-dark);
}
.single-live-hero__cta.link-inactive {
	background: var(--color-accent-red);
	color: var(--color-text-on-dark);
	opacity: 1;
}

/* ---- Video section ---- */
.single-live-video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	background: var(--color-bg-deep);
}
.single-live-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Review body (post_content) ---- */
.single-live-review {
	max-width: 760px;
}
.single-live-review p,
.single-live-review ul,
.single-live-review ol {
	margin: 0 0 1.25rem;
	font-size: 17px;
	line-height: 28px;
	color: var(--color-text-body);
}
.single-live-review h2,
.single-live-review h3 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-text-primary);
	letter-spacing: -0.01em;
}
.single-live-review h2 { font-size: 26px; line-height: 1.2; margin: 2rem 0 1rem; }
.single-live-review h3 { font-size: 20px; line-height: 1.25; margin: 1.5rem 0 0.75rem; }

/* ============================================================
 * Editorial-prose tables — Lovable mirror.
 *
 * Applies to any <table> rendered inside the two prose containers:
 *   - .single-live-review  → live game review bodies (single-live.php)
 *   - .trust-page__content → guide pages, trust pages, author bios
 *                           (page-guide.php, page-trust.php, page-authors-landing.php,
 *                            single-author.php, 404.php)
 *
 * Mirrors Lovable's table treatment from src/routes/live_.crazy-time.tsx:
 *   <table className="w-full border-collapse border border-border-subtle text-[15px] text-text-body">
 *     <thead className="bg-bg-sidebar">
 *     <th className="col-label border border-border-subtle px-3 py-2 text-left" style={{fontSize:11}}>
 *     <td className="border border-border-subtle px-3 py-2 align-top">
 *
 * Reusable — every future game review, payout grid, comparison table, etc.
 * picks this up automatically as long as the table sits inside one of the
 * prose containers above.
 * ============================================================ */
.single-live-review table,
.trust-page__content table {
	width: 100%;
	max-width: 100%;
	margin: 1.5rem 0;
	border-collapse: collapse;
	border: 1px solid var(--color-border-subtle);
	background: transparent;
	font-size: 15px;
	line-height: 1.45;
	color: var(--color-text-body);
}
.single-live-review thead,
.trust-page__content thead {
	background: var(--color-bg-sidebar);
}
.single-live-review th,
.trust-page__content th,
.single-live-review td,
.trust-page__content td {
	border: 1px solid var(--color-border-subtle);
	padding: 0.6rem 0.85rem;
	text-align: left;
	vertical-align: top;
}
.single-live-review th,
.trust-page__content th {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	white-space: nowrap;
}
/* Numeric / tabular columns — when a class is added on rows or cells,
   right-align and use tabular figures. Future-proof for payout tables. */
.single-live-review td.is-numeric,
.trust-page__content td.is-numeric,
.single-live-review th.is-numeric,
.trust-page__content th.is-numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* Horizontal-scroll fallback on narrow viewports — wrap the table in
   `<div class="prose-table-scroll">` in markup if a table is too wide
   to fit. The rule below opt-in styles that wrapper. */
.prose-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5rem 0;
}
.prose-table-scroll table {
	margin: 0;
}

/* ---- Pros / Cons ---- */
.single-live-pros-cons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 640px) { .single-live-pros-cons { grid-template-columns: repeat(2, 1fr); } }
.single-live-pros,
.single-live-cons {
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}
.single-live-pros h3,
.single-live-cons h3 {
	margin: 0 0 0.75rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
}
.single-live-pros h3 { color: var(--color-accent-bright); }
.single-live-cons h3 { color: var(--color-accent-red); }
.single-live-pros ul,
.single-live-cons ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.single-live-pros li,
.single-live-cons li {
	padding-left: 22px;
	position: relative;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-text-body);
}
.single-live-pros li::before {
	content: "+";
	position: absolute;
	left: 0;
	color: var(--color-accent-bright);
	font-weight: 700;
}
.single-live-cons li::before {
	content: "−";
	position: absolute;
	left: 0;
	color: var(--color-accent-red);
	font-weight: 700;
}

/* ---- Author byline ---- */
.single-live-author {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	background: var(--color-bg-deep);
	border-radius: 8px;
	padding: 1.5rem;
	color: var(--color-text-on-dark);
	max-width: 760px;
}
@media (min-width: 640px) {
	.single-live-author {
		flex-direction: row;
		align-items: center;
	}
}
.single-live-author__avatar {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
}
.single-live-author__avatar img,
.single-live-author__avatar-placeholder {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-accent-bright);
}
.single-live-author__avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-deep-band);
	color: var(--color-accent-bright);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 32px;
}
.single-live-author__body { flex: 1; min-width: 0; }
.single-live-author__namerow { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.single-live-author__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
}
.single-live-author__role {
	font-size: 14px;
	color: var(--color-text-on-dark-muted);
}
.single-live-author__bio {
	margin: 0.5rem 0 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text-on-dark-muted);
}
.single-live-author__cta,
.single-live-author__cta.link-inactive {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-bright);
	text-decoration: none;
	opacity: 1;
}
.single-live-author__cta:hover { filter: brightness(0.9); color: var(--color-accent-bright); }

/* ============================================================
 * Trust pages (page-trust.php) — Phase 7
 * Long-form editorial body styling. Reused by single-author "About".
 * ============================================================ */

.trust-page__content {
	max-width: 760px;
}
.trust-page__content > * + * { margin-top: 1.25rem; }
.trust-page__content p {
	margin: 0 0 1.25rem;
	font-size: 17px;
	line-height: 28px;
	color: var(--color-text-body);
}
.trust-page__content p:last-child { margin-bottom: 0; }
.trust-page__content h2,
.trust-page__content h3 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-text-primary);
	letter-spacing: -0.01em;
	margin: 2.5rem 0 1rem;
}
.trust-page__content h2 { font-size: 26px; line-height: 1.2; }
.trust-page__content h3 { font-size: 20px; line-height: 1.25; margin-top: 1.75rem; }
.trust-page__content ul,
.trust-page__content ol {
	margin: 0 0 1.25rem 1.5rem;
	font-size: 17px;
	line-height: 28px;
	color: var(--color-text-body);
}
.trust-page__content ul li,
.trust-page__content ol li { margin-bottom: 0.5rem; }
.trust-page__content a {
	color: var(--color-accent-bright);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.trust-page__content a:hover { color: var(--color-bg-deep); }

/* ============================================================
 * Authors landing — Phase 7
 * 2-col grid of dark-green author cards (reuses the home-team look).
 * ============================================================ */

.authors-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) { .authors-grid { grid-template-columns: repeat(2, 1fr); } }
.authors-grid__card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem;
	background: var(--color-bg-deep);
	color: var(--color-text-on-dark);
	border-radius: 8px;
}
@media (min-width: 480px) {
	.authors-grid__card {
		flex-direction: row;
		align-items: center;
	}
}
.authors-grid__avatar {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
}
.authors-grid__avatar img,
.authors-grid__avatar-placeholder {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-accent-bright);
}
.authors-grid__avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-deep-band);
	color: var(--color-accent-bright);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 32px;
}
.authors-grid__body { flex: 1; min-width: 0; }
.authors-grid__namerow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
}
.authors-grid__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
}
.authors-grid__role {
	font-size: 14px;
	color: var(--color-text-on-dark-muted);
}
.authors-grid__tags {
	margin-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.authors-grid__tag {
	font-size: 12px;
	font-weight: 500;
	color: var(--color-accent-bright);
	border: 1px solid var(--color-accent-bright);
	border-radius: 999px;
	padding: 2px 10px;
}
.authors-grid__bio {
	margin: 0.75rem 0 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text-on-dark-muted);
}
.authors-grid__cta,
.authors-grid__cta.link-inactive {
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 4px;
	background: var(--color-accent-bright);
	color: var(--color-text-on-dark);
	text-decoration: none;
	opacity: 1;
}
.authors-grid__cta:hover { filter: brightness(0.9); color: var(--color-text-on-dark); }

/* ============================================================
 * Single author profile — Phase 7
 * Top profile card matches the home-team / authors-grid look.
 * ============================================================ */

.author-profile {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 2rem;
	background: var(--color-bg-deep);
	color: var(--color-text-on-dark);
	border-radius: 8px;
	max-width: 880px;
}
@media (min-width: 640px) {
	.author-profile {
		flex-direction: row;
		align-items: center;
	}
}
.author-profile__avatar {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
}
.author-profile__avatar img,
.author-profile__avatar-placeholder {
	width: 144px;
	height: 144px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-accent-bright);
}
.author-profile__avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-deep-band);
	color: var(--color-accent-bright);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 44px;
}
.author-profile__body { flex: 1; min-width: 0; }
.author-profile__namerow { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.author-profile__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 24px;
}
.author-profile__role {
	font-size: 15px;
	color: var(--color-text-on-dark-muted);
}
.author-profile__tags {
	margin-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.author-profile__tag {
	font-size: 12px;
	font-weight: 500;
	color: var(--color-accent-bright);
	border: 1px solid var(--color-accent-bright);
	border-radius: 999px;
	padding: 2px 10px;
}
.author-profile__bio {
	margin: 1rem 0 0;
	font-size: 15px;
	line-height: 24px;
	color: var(--color-text-on-dark-muted);
	max-width: 600px;
}
.author-profile__social {
	margin-top: 1rem;
	display: flex;
	gap: 0.75rem;
}
.author-profile__social a {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-deep-band);
	color: var(--color-text-on-dark);
	border-radius: 50%;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 150ms ease;
}
.author-profile__social a:hover { background: var(--color-accent-bright); color: var(--color-text-on-dark); }

/* ============================================================
 * Accessibility — Phase 9
 *
 * - Visible focus rings on all keyboard-focusable elements (WCAG 2.4.7).
 * - Skip link becomes visible on focus (WCAG 2.4.1).
 * - .screen-reader-text helper for off-screen-only content.
 * - Respect prefers-reduced-motion (WCAG 2.3.3).
 * ============================================================ */

/* Off-screen-only text — visible to screen readers, hidden visually.
   Used on h2 in the footer, skip-link before focus, etc.
   The :focus state below promotes the skip-link back into the viewport. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

/* Skip link — invisible until focused via Tab from the address bar.
   Inline style in header.php (`position:absolute;left:-9999px`) wins specificity
   in the default state; on focus we override it via :focus to slam it on-screen. */
.skip-link:focus,
.skip-link:focus-visible {
	left: 1rem !important;
	top: 1rem !important;
	z-index: 10000;
	clip: auto;
	-webkit-clip-path: none;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	padding: 12px 20px;
	background: var(--color-bg-deep, #0F2920);
	color: #FFFFFF;
	font-family: var(--font-sans, sans-serif);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-radius: 4px;
	outline: 3px solid var(--color-accent-brass, #C9A55C);
	outline-offset: 2px;
}

/* Global focus ring — keyboard-only (:focus-visible) so mouse clicks
   stay quiet on click. Green ring sits on light backgrounds; the
   dark-surface override below switches to brass for contrast. */
*:focus-visible {
	outline: 3px solid var(--color-accent-bright, #2D8659);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On dark surfaces the green ring fades — promote to brass. */
.site-header *:focus-visible,
.site-footer *:focus-visible,
.page-hero *:focus-visible,
.single-live-hero *:focus-visible,
.home-team *:focus-visible,
.home-hero *:focus-visible {
	outline-color: var(--color-accent-brass, #C9A55C);
}

/* Search input — give it its own focus treatment (the inline-style
   `border-radius` and padding make the global ring sit awkwardly). */
.site-header__search input[type="search"]:focus,
.site-header__search input[type="search"]:focus-visible {
	outline: 3px solid var(--color-accent-brass, #C9A55C);
	outline-offset: 2px;
}

/* Mobile menu toggle (the <label> behaves as a button via aria-controls / JS). */
.site-header__mobile-toggle:focus-visible {
	outline: 3px solid var(--color-accent-brass, #C9A55C);
	outline-offset: 4px;
	border-radius: 4px;
}

/* FAQ <summary> — default browser focus outline is muted; promote it. */
.category-faq__item summary:focus-visible {
	outline: 3px solid var(--color-accent-bright, #2D8659);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Honour user preference for reduced motion — neutralise non-essential
   transitions, animations, and smooth scroll (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
 * Live game card — equal-height grid normalization.
 *
 * Two class trees render the same visual card pattern: `.home-featured-game`
 * (homepage Featured This Month) and `.provider-game` (single-live Related
 * Games, category-hub Games directory, single-provider / single-series /
 * page-live-hub Games sections, single-author Games reviewed). Both render
 * via the rules below so the fix is universal.
 *
 * The canonical reusable component for new code is the [live_card] shortcode
 * in inc/live-grid.php — older templates that hand-roll the markup should
 * migrate to it over time. Until they do, the .provider-game tree carries
 * matching styles.
 *
 * What this fixes:
 *  - All rows in the parent grid have equal height (tallest card sets it).
 *  - Each card fills its grid cell vertically.
 *  - The REVIEW / PLAY / "Read review" action sticks to the bottom of the
 *    card regardless of description length (or absence of description).
 *  - Source images with different aspect ratios (square Crazy Time logos,
 *    landscape Lightning Roulette banners, portrait promo art) all crop to
 *    fill the 4:3 thumb identically via object-fit: cover + center.
 *  - A minimum body height ensures consistent visual rhythm even when ALL
 *    cards in a grid happen to have short descriptions.
 * ============================================================ */

/* Equal-height rows: tallest card in the entire grid sets the row height,
   and every other row inherits it. Without this, only same-row cards align. */
.home-featured-games,
.provider-games {
	grid-auto-rows: 1fr;
	align-items: stretch;
}

/* Each card stretches to fill its grid cell — without this, cards default to
   content-height inside their cell, undoing the grid-auto-rows equalization. */
.home-featured-game,
.provider-game {
	height: 100%;
}

/* The action cluster (REVIEW + PLAY, or "Read review →") sticks to the bottom
   of the card body via margin-top:auto. Works whether or not a description
   paragraph precedes it, so cards with empty post_excerpt stay aligned. */
.home-featured-game__body .home-hero__featured-actions,
.provider-game__body .home-hero__featured-actions,
.provider-game__body .provider-game__cta {
	margin-top: auto;
}

/* Reserve at least 2 lines for the description so cards stay tall even when
   every card in the grid has short copy. Combined with flex:1 from the older
   rule, this caps the minimum and lets the description grow as needed. */
.home-featured-game__body p,
.provider-game__body p {
	min-height: 40px; /* 2 lines @ 20px line-height */
}

/* Explicit crop center on thumbnails — the default but stated so the crop
   behaviour is deterministic across browsers and future image swaps. */
.home-featured-game__thumb-img,
.provider-game__thumb img {
	object-position: center;
}

/* The aspect-ratio fix.
 *
 * The earlier rule `aspect-ratio: 4/3` on the thumb gets overridden when the
 * thumb is `display: flex` AND its child <img> is sized via width/height:100%.
 * In that case the img's intrinsic dimensions (square Crazy Time logos at
 * 300x300 → thumb computes as 290x290 instead of 290x218) leak through and
 * resize the parent.
 *
 * Mirroring Lovable: make the thumb a positioned ancestor (relative) with
 * overflow: hidden, and take the img out of flex flow with position: absolute;
 * inset: 0. The img can no longer influence the parent's size, so the 4:3
 * aspect-ratio holds for every card regardless of source image dimensions. */
.home-featured-game__thumb,
.provider-game__thumb {
	position: relative;
	overflow: hidden;
}

.home-featured-game__thumb-img,
.provider-game__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}