/*!
 * iGaming Vault — main stylesheet
 * Dark-mode-first, neon-gold/electric-blue accents, bento grids,
 * glassmorphism cards, responsive comparison table, mobile thumb nav.
 */

/* ===================== Design tokens ===================== */
:root {
	--acc-gold: #D4AF37;
	--acc-gold-bright: #F5C542;
	--acc-blue: #2F80ED;
	--acc-blue-bright: #4CC9F0;
	--acc-telegram: #229ED9;
	--acc-badge: #FFB800;

	--bg-deep: #0B0E14;
	--bg-surface: #12151F;
	--bg-surface-2: #171B27;
	--border-glass: rgba(255,255,255,0.08);
	--card-glass: rgba(255,255,255,0.04);

	--text-primary: #F4F5F7;
	--text-secondary: #ABB2C0;
	--text-muted: #767E8F;

	--gold-text: #E8C866;
	--blue-text: #6FA8F5;

	--radius-md: 14px;
	--radius-lg: 20px;
	--shadow-glass: 0 8px 32px rgba(0,0,0,0.35);

	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--container-w: 1180px;
}

:root[data-theme-mode="light"],
html[data-theme-mode="light"] {
	--bg-deep: #F5F6FA;
	--bg-surface: #FFFFFF;
	--bg-surface-2: #EFF1F6;
	--border-glass: rgba(10,14,25,0.08);
	--card-glass: rgba(10,14,25,0.03);
	--text-primary: #14161C;
	--text-secondary: #4B5262;
	--text-muted: #767E8F;
	--gold-text: #8A6A10;
	--blue-text: #1B5FC4;
	--shadow-glass: 0 8px 24px rgba(20,22,28,0.10);
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme-mode="dark"]) {
		--bg-deep: #F5F6FA;
		--bg-surface: #FFFFFF;
		--bg-surface-2: #EFF1F6;
		--border-glass: rgba(10,14,25,0.08);
		--card-glass: rgba(10,14,25,0.03);
		--text-primary: #14161C;
		--text-secondary: #4B5262;
		--text-muted: #767E8F;
		--gold-text: #8A6A10;
		--blue-text: #1B5FC4;
		--shadow-glass: 0 8px 24px rgba(20,22,28,0.10);
	}
}

/* ===================== Reset ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg-deep);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* Final safety net for stray wide content pasted into posts (embeds,
	   wide tables). `clip` rather than `hidden` on purpose: `hidden`
	   turns the body into a scroll container, which breaks the sticky
	   header. Every layout below is sized so this never has to fire. */
	overflow-x: clip;
}

/* Grid and flex items default to min-width:auto, which means an item
   refuses to shrink below its content's min-content width and instead
   bursts out of its track — the classic cause of a card whose right
   edge is cut off on a narrow phone. Opting every layout item down to
   min-width:0 lets the track govern the width, and the wrapping rules
   further below handle the content. */
.igv-single-main, .igv-single-sidebar,
.igv-stat-box, .igv-listing-heading,
.igv-bento-item, .igv-card,
.igv-ct-row > *, .igv-ct-head > *,
.igv-listing-ctas > *, .igv-header-inner > *,
.igv-topic-card, .igv-footer-col {
	min-width: 0;
}
img { max-width: 100%; height: auto; display: block; }

/* Never let a single long unbroken token (a raw affiliate URL pasted as
   plain text, a long product/keyword string, etc. — common in post
   content) force the page wider than the viewport on mobile. Content text
   wraps normally; only a token with no natural break point is forced to
   break, so ordinary sentences are unaffected. */
p, li, h1, h2, h3, h4, h5, h6, blockquote, .igv-article-body, .igv-article-body *,
.igv-howto-panel, .igv-accordion-panel, .igv-listing-subtitle, .igv-card-excerpt {
	overflow-wrap: break-word;
	word-break: break-word;
}
pre, code { max-width: 100%; }
pre { overflow-x: auto; }
.igv-article-body table { display: block; max-width: 100%; overflow-x: auto; }
iframe, embed, video, object { max-width: 100%; }
a { color: var(--blue-text); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Reset applies to the theme's own UI lists (menus, breadcrumbs, card
   lists). Lists inside post content get their markers restored below —
   without that, bullet and numbered lists written by the editor (or the
   Content Assistant plugin) would render unstyled and unindented. */
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 0.5em; color: var(--text-primary); }
p { margin: 0 0 1em; color: var(--text-secondary); }
button { font-family: inherit; cursor: pointer; }
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px; overflow: hidden;
}
.igv-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	background: var(--bg-surface); color: var(--text-primary);
	padding: 12px 20px; border-radius: 0 0 8px 0;
}
.igv-skip-link:focus { left: 0; }

.igv-container {
	max-width: var(--container-w);
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
}
.igv-container > *:first-child { margin-top: 0; }
@media (max-width: 480px) {
	.igv-container { padding: 0 16px; }
}

.igv-site-main { display: block; overflow-x: hidden; }

.igv-section-title {
	font-size: clamp(1.3rem, 2vw + 1rem, 1.9rem);
	margin: 2.5em 0 1em;
}
.igv-front-page > .igv-container:first-of-type .igv-section-title:first-child { margin-top: 1em; }

/* ===================== Glass cards ===================== */
.glass-card, .igv-card {
	background: var(--card-glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--border-glass);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-glass);
}

/* ===================== Buttons ===================== */
.igv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	text-decoration: none;
}
.igv-btn:hover { transform: translateY(-1px); text-decoration: none; filter: brightness(1.06); }
.igv-btn-gold {
	background: linear-gradient(135deg, var(--acc-gold-bright), var(--acc-gold));
	color: #1a1400;
	box-shadow: 0 4px 18px rgba(212,175,55,0.35);
}
.igv-btn-blue {
	background: linear-gradient(135deg, var(--acc-blue-bright), var(--acc-blue));
	color: #04121f;
}
.igv-btn-telegram {
	background: var(--acc-telegram);
	color: #fff;
}
.igv-btn-outline {
	background: transparent;
	color: var(--text-primary);
	border: 1.5px solid var(--border-glass);
}
.igv-btn-outline:hover { border-color: var(--acc-gold); color: var(--gold-text); }
.igv-btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.igv-btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ===================== Header ===================== */
.igv-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(11,14,20,0.75);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border-glass);
}
:root[data-theme-mode="light"] .igv-header { background: rgba(255,255,255,0.8); }
.igv-header-inner {
	max-width: var(--container-w);
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.igv-branding { flex-shrink: 0; }
.igv-site-title { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.igv-branding img { max-height: 42px; width: auto; }

.igv-primary-nav { flex: 1; min-width: 0; }
.igv-primary-menu { display: flex; gap: 22px; flex-wrap: wrap; }
.igv-primary-menu a {
	color: var(--menu-color, var(--text-secondary));
	font-size: var(--menu-font-size, 15px);
	font-weight: var(--menu-font-weight, 500);
	text-transform: var(--menu-text-transform, none);
}
.igv-primary-menu a:hover { color: var(--gold-text); text-decoration: none; }
.igv-primary-menu ul { display: none; }

.igv-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.igv-theme-toggle, .igv-menu-toggle {
	background: var(--card-glass);
	border: 1px solid var(--border-glass);
	color: var(--text-primary);
	border-radius: 999px;
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
}
.igv-menu-toggle { display: none; }
.igv-header-cta { display: inline-flex; }

@media (max-width: 900px) {
	.igv-primary-nav { display: none; }
	.igv-menu-toggle { display: flex; }
	.igv-header-cta { display: none; }
}

/* Mobile drawer */
.igv-mobile-drawer {
	position: fixed; inset: 0; z-index: 900;
	background: rgba(0,0,0,0.55);
}
.igv-mobile-drawer[hidden] { display: none; }
.igv-mobile-drawer-inner {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(320px, 85vw);
	background: var(--bg-surface);
	border-left: 1px solid var(--border-glass);
	padding: 24px 20px;
	overflow-y: auto;
}
.igv-drawer-close {
	background: none; border: none; color: var(--text-primary);
	font-size: 1.8rem; line-height: 1; margin-bottom: 20px;
}
.igv-drawer-menu li { margin-bottom: 14px; }
.igv-drawer-menu a { color: var(--text-primary); font-size: 1.05rem; font-weight: 600; }
.igv-drawer-menu ul { padding-left: 14px; margin-top: 8px; }

/* ===================== Hero ===================== */
.igv-hero {
	background: radial-gradient(ellipse at top, rgba(212,175,55,0.12), transparent 60%), var(--bg-surface);
	padding: 64px 20px;
	border-bottom: 1px solid var(--border-glass);
}
.igv-hero-inner {
	max-width: var(--container-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
}
.igv-hero-caption-mode { padding: 32px 20px; }
.igv-hero-caption-mode .igv-hero-inner { grid-template-columns: 1fr; text-align: center; }
.igv-hero-headline {
	font-size: clamp(2rem, 4vw + 1rem, 3.4rem);
	background: linear-gradient(135deg, var(--gold-text), var(--acc-gold-bright));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.igv-hero-subtext { font-size: 1.1rem; max-width: 46ch; }
.igv-hero-caption-mode .igv-hero-subtext { margin-left: auto; margin-right: auto; }
.igv-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.igv-hero-caption-mode .igv-hero-ctas { justify-content: center; }

/* Optional hero badge + stat row (both hidden when their fields are blank). */
.igv-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	margin-bottom: 18px;
	border-radius: 999px;
	background: rgba(212, 175, 55, 0.09);
	border: 1px solid rgba(212, 175, 55, 0.3);
	color: var(--gold-text);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.igv-hero-badge::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #22C55E;
	box-shadow: 0 0 8px #22C55E;
}
.igv-hero-stats { display: flex; flex-wrap: wrap; margin-top: 30px; }
.igv-hero-stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 0 24px;
	border-left: 1px solid var(--border-glass);
}
.igv-hero-stat:first-child { padding-left: 0; border-left: 0; }
.igv-hero-stat-value { font-size: 1.45rem; font-weight: 800; color: var(--acc-badge); }
.igv-hero-stat-label {
	font-size: 0.68rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.igv-hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); }

@media (max-width: 800px) {
	.igv-hero-inner { grid-template-columns: 1fr; text-align: center; }
	.igv-hero-ctas { justify-content: center; }
	/* Hero copy centres here, so the stat row follows it. */
	.igv-hero-stats { justify-content: center; }
}

/* ===================== Search box ===================== */
.igv-search-box-wrap { margin: 28px 0; }
.igv-search-box {
	display: flex;
	gap: 8px;
	background: var(--card-glass);
	border: 1px solid var(--border-glass);
	border-radius: 999px;
	padding: 6px;
	backdrop-filter: blur(12px);
	max-width: 640px;
	margin: 0 auto;
}
.igv-search-box input {
	/* flex-basis 0 + min-width 0 so the field yields to the button instead
	   of holding its default ~170px intrinsic width and pushing the whole
	   box past the screen edge on a narrow phone. */
	flex: 1 1 0;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--text-primary);
	padding: 10px 16px;
	font-size: 1rem;
	outline: none;
}
.igv-search-box .igv-btn { flex-shrink: 0; }
@media (max-width: 400px) {
	.igv-search-box { padding: 5px; gap: 6px; }
	.igv-search-box input { padding: 9px 12px; font-size: 0.92rem; }
	.igv-search-box .igv-btn { padding: 9px 16px; font-size: 0.82rem; }
}

/* ===================== Quicklinks ===================== */
.igv-quicklinks-row { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 16px; }
.igv-quicklink {
	flex: 0 0 auto;
	min-width: 200px;
	padding: 16px 18px;
	color: var(--text-primary);
}
.igv-quicklink-title { display: block; font-weight: 700; margin-bottom: 4px; }
.igv-quicklink-desc { display: block; font-size: 0.85rem; color: var(--text-muted); }

/* ===================== Featured bonuses (hero + row) =====================
   A full-width "top pick" hero card followed by an even auto-fit row.
   Both parts flow independently, so the block never leaves an empty grid
   slot regardless of how many listings are returned. */
.igv-bento-section { margin: 8px 0 34px; }

.igv-featured-card {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 22px 24px;
	position: relative;
	overflow: hidden;
	margin-bottom: 18px;
	border-color: rgba(212, 175, 55, 0.32);
	box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12), var(--shadow-glass);
}
/* Warm wash behind the hero so it reads as the promoted slot. */
.igv-featured-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 160% at 0% 0%, rgba(212,175,55,0.13), transparent 60%);
	pointer-events: none;
}
.igv-featured-ribbon {
	position: absolute;
	top: 0; right: 0;
	background: linear-gradient(135deg, var(--acc-gold-bright), var(--acc-gold));
	color: #1a1400;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 0 var(--radius-md) 0 12px;
	z-index: 1;
}
.igv-featured-link {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	position: relative;
}
.igv-featured-link:hover { text-decoration: none; }
.igv-featured-link:hover .igv-featured-name { color: var(--gold-text); }
.igv-featured-logo {
	flex: 0 0 88px;
	width: 88px; height: 88px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--bg-surface-2);
	display: flex; align-items: center; justify-content: center;
}
.igv-featured-logo img { width: 100%; height: 100%; object-fit: cover; }
.igv-featured-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.igv-featured-name { font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.igv-featured-rating { display: flex; align-items: center; gap: 8px; color: var(--acc-gold-bright); }
.igv-featured-rating-num { color: var(--text-secondary); font-size: 0.9rem; font-weight: 700; }
.igv-featured-bonus { color: var(--acc-badge); font-weight: 700; font-size: 1.05rem; }
.igv-featured-desc { color: var(--text-muted); font-size: 0.88rem; }
.igv-featured-cta {
	flex: 0 0 auto;
	position: relative;
	padding: 15px 32px;
	font-size: 1rem;
}

.igv-featured-rest {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 18px;
}

@media (max-width: 700px) {
	.igv-featured-card { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
	/* Top-align once the text runs to several lines, otherwise the logo
	   floats oddly in the vertical middle of the block. */
	.igv-featured-link { gap: 14px; align-items: flex-start; }
	.igv-featured-ribbon { font-size: 0.62rem; padding: 5px 11px; }
	.igv-featured-logo { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 16px; }
	.igv-featured-name { font-size: 1.2rem; }
	.igv-featured-cta { width: 100%; }
}

/* ===================== Listing / article cards ===================== */
.igv-listing-grid, .igv-article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
	margin: 16px 0;
}
.igv-card { padding: 18px; position: relative; overflow: hidden; }
.igv-card-link { color: inherit; display: block; }
.igv-card-link:hover { text-decoration: none; }
.igv-card-logo { width: 56px; height: 56px; margin-bottom: 12px; border-radius: 14px; overflow: hidden; background: var(--bg-surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Listing card: logo beside the heading block, details below, CTA pinned to
   the bottom so buttons line up across a row of cards of differing height. */
.igv-listing-card { display: flex; flex-direction: column; }
.igv-listing-card .igv-card-link { display: flex; flex-direction: column; gap: 10px; }
.igv-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.igv-card-head .igv-card-logo { margin-bottom: 0; }
.igv-card-headings { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.igv-card-headings .igv-card-title,
.igv-card-headings .igv-card-rating { margin-bottom: 0; }
.igv-card-players {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 0.76rem; color: var(--text-muted);
}
.igv-card-desc {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.igv-listing-card .igv-card-bonus { margin-bottom: 0; }
.igv-listing-card .igv-card-cta { margin-top: auto; }
.igv-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.igv-logo-placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; font-weight: 800; font-size: 1.3rem;
	color: var(--gold-text); background: var(--bg-surface-2);
}
.igv-logo-placeholder-lg { width: 96px; height: 96px; font-size: 2rem; border-radius: 18px; }
.igv-card-title { font-size: 1.05rem; margin-bottom: 6px; }
.igv-card-rating { display: flex; align-items: center; gap: 6px; color: var(--acc-gold-bright); font-size: 0.9rem; margin-bottom: 6px; }
.igv-card-bonus { color: var(--acc-badge); font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; }
.igv-card-excerpt { font-size: 0.9rem; }
.igv-card-cta { width: 100%; margin-top: 10px; }
.igv-article-thumb { border-radius: 10px; overflow: hidden; margin-bottom: 12px; aspect-ratio: 16/10; }
.igv-article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.igv-stars { color: var(--acc-gold-bright); display: inline-flex; gap: 2px; }

/* Sticky-CTA treatment for individual cards (optional, JS-driven via IntersectionObserver) */
.igv-listing-card.igv-sticky-cta .igv-card-cta {
	position: sticky;
	bottom: 8px;
}

/* ===================== Comparison table ===================== */
.igv-comparison-table { margin: 20px 0 40px; }
.igv-ct-head,
.igv-ct-row {
	display: grid;
	grid-template-columns: 52px 48px minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.3fr) auto;
	gap: 12px;
	align-items: center;
}
.igv-ct-head {
	padding: 0 20px 10px;
	color: var(--text-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.igv-ct-row {
	padding: 14px 20px;
	margin-bottom: 12px;
}
.igv-ct-col-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.igv-ct-players {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.78rem;
	color: var(--text-muted);
}
.igv-rank-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: linear-gradient(135deg, var(--acc-gold-bright), var(--acc-gold));
	color: #1a1400; font-weight: 800; font-size: 0.85rem;
}
.igv-ct-logo-link { display: block; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--bg-surface-2); }
.igv-ct-logo-link img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.igv-ct-name { font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.igv-ct-name:hover { color: var(--gold-text); text-decoration: none; }
.igv-ct-rating-num { margin-left: 4px; color: var(--text-secondary); font-size: 0.85rem; }
.igv-ct-unrated { color: var(--text-muted); }
.igv-ct-col-bonus { color: var(--acc-badge); font-weight: 600; font-size: 0.9rem; }
.igv-ct-col-cta { display: flex; justify-content: flex-end; }

@media (max-width: 760px) {
	.igv-ct-head { display: none; }
	/* Compact one-row-per-site layout: logo on the left spanning the text
	   block, details stacked in the middle, CTA pinned right. The rank sits
	   as a small chip on the logo corner so it costs no horizontal space. */
	.igv-ct-row {
		position: relative;
		grid-template-columns: 48px minmax(0, 1fr) auto;
		grid-template-areas:
			"logo name   cta"
			"logo rating cta"
			"logo bonus  cta";
		gap: 2px 12px;
		padding: 12px 14px;
		align-items: center;
	}
	/* Top-aligned so the absolutely-positioned rank chip below lands on the
	   logo's corner rather than floating above it. */
	.igv-ct-col-logo { grid-area: logo; align-self: start; }
	.igv-ct-col-name { grid-area: name; }
	.igv-ct-col-rating { grid-area: rating; display: flex; align-items: center; gap: 6px; }
	.igv-ct-col-bonus { grid-area: bonus; font-size: 0.85rem; }
	.igv-ct-col-cta { grid-area: cta; align-self: center; justify-content: flex-end; }
	.igv-ct-col-cta .igv-btn { white-space: normal; text-align: center; padding: 10px 14px; }

	/* Rank chip overlapping the logo corner. */
	.igv-ct-col-rank {
		position: absolute;
		top: 7px;
		left: 7px;
		z-index: 1;
	}
	.igv-ct-col-rank .igv-rank-badge {
		width: 22px; height: 22px;
		font-size: 0.62rem;
		box-shadow: 0 0 0 2px var(--bg-surface);
	}
	/* Labels are redundant in the compact row — the star row and the gold
	   bonus text are self-evident, and dropping them frees real width. */
	.igv-ct-col-rating::before,
	.igv-ct-col-bonus::before { content: none; }
}

/* ===================== Tabs ===================== */
.igv-tabs { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; }
.igv-tab-trigger {
	background: var(--card-glass);
	border: 1px solid var(--border-glass);
	color: var(--text-secondary);
	padding: 10px 20px;
	border-radius: 999px;
	font-weight: 700;
}
.igv-tab-trigger.is-active {
	background: linear-gradient(135deg, var(--acc-gold-bright), var(--acc-gold));
	color: #1a1400;
	border-color: transparent;
}
.igv-tab-panel { display: none; }
.igv-tab-panel.is-active { display: block; }

/* ===================== Pros/Cons ===================== */
.igv-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.igv-proscons-col { background: var(--card-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 18px; }
.igv-proscons-col li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; color: var(--text-secondary); }
.igv-pc-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; }
.igv-pc-check { background: rgba(76,201,240,0.18); color: var(--blue-text); }
.igv-pc-x { background: rgba(255,90,90,0.15); color: #ff8080; }
@media (max-width: 600px) { .igv-proscons { grid-template-columns: 1fr; } }

/* ===================== FAQ accordion ===================== */
.igv-accordion-item { border-bottom: 1px solid var(--border-glass); }
.igv-accordion-trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: none;
	color: var(--text-primary);
	font-weight: 700;
	font-size: 1rem;
	padding: 16px 4px;
	text-align: left;
}
.igv-accordion-icon { transition: transform 0.2s ease; color: var(--gold-text); font-size: 1.3rem; }
.igv-accordion-trigger[aria-expanded="true"] .igv-accordion-icon { transform: rotate(45deg); }
.igv-accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.igv-accordion-panel p { padding-bottom: 14px; }
.igv-howto-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; padding: 0 4px; }
.igv-howto-panel p { padding-top: 10px; }

/* ===================== Listing single ===================== */
.igv-single-layout { display: grid; grid-template-columns: 2.1fr 1fr; gap: 32px; margin: 28px auto; align-items: start; }
.igv-single-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
@media (max-width: 960px) {
	.igv-single-layout { grid-template-columns: 1fr; }
	.igv-single-sidebar { position: static; }
}

.igv-listing-hero { padding: 26px; margin-bottom: 20px; }
.igv-listing-hero-top { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.igv-listing-icon { width: 80px; height: 80px; border-radius: 18px; overflow: hidden; flex-shrink: 0; background: var(--bg-surface-2); display:flex; align-items:center; justify-content:center; }
.igv-listing-icon img { width: 100%; height: 100%; object-fit: cover; }
.igv-listing-title { font-size: 1.6rem; margin-bottom: 4px; }
.igv-listing-subtitle { color: var(--text-muted); margin: 0; }
.igv-listing-version { margin-left: 8px; color: var(--gold-text); font-weight: 700; }
/* min(120px, 100%) keeps the track minimum from ever exceeding the
   available width on a narrow phone — a bare 120px minimum would force
   the track (and the card around it) wider than the screen. */
.igv-listing-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 14px; margin-bottom: 18px; }
.igv-stat-box { background: var(--bg-surface-2); border-radius: 10px; padding: 12px; text-align: center; }
.igv-stat-label { display: block; font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
/* Flex + wrap so the star row and the numeric rating can fall onto two
   lines on a narrow box instead of forcing the box wider. */
.igv-stat-value { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-weight: 700; }
.igv-stars { flex-shrink: 0; }
.igv-listing-bonus-callout {
	background: linear-gradient(135deg, rgba(255,184,0,0.15), rgba(212,175,55,0.08));
	border: 1px solid rgba(255,184,0,0.3);
	color: var(--acc-badge);
	font-weight: 700;
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 18px;
}
/* Buttons share the row and each may shrink; on a narrow phone they go
   full-width one per line rather than spilling past the card edge. */
.igv-listing-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.igv-listing-ctas > .igv-btn { flex: 1 1 auto; white-space: normal; overflow-wrap: anywhere; text-align: center; }
@media (max-width: 480px) {
	.igv-listing-ctas > .igv-btn { flex: 1 1 100%; }
	.igv-btn-lg { padding: 14px 18px; font-size: 1rem; }
}
.igv-listing-description, .igv-howto { padding: 20px; margin-bottom: 20px; }

/* Mobile: tighten the card gutters so text sits closer to the card edge
   (and the card to the screen edge), which also frees real width for the
   stats grid and CTA row on small screens. */
@media (max-width: 600px) {
	.igv-listing-hero { padding: 16px; }
	.igv-listing-description, .igv-howto { padding: 16px; }
	.igv-listing-hero-top { gap: 12px; }
	.igv-listing-icon { width: 64px; height: 64px; border-radius: 14px; }
	.igv-logo-placeholder-lg { width: 64px; height: 64px; font-size: 1.5rem; border-radius: 14px; }
	.igv-listing-title { font-size: 1.35rem; }
	.igv-listing-stats-grid { gap: 10px; }
	.igv-stat-box { padding: 10px 8px; }
	/* The grid is two columns at this width, so an odd number of filled
	   stats would otherwise leave a visible empty cell. Letting the last
	   box span the full row keeps the block solid no matter which fields
	   the editor filled in. */
	.igv-listing-stats-grid > .igv-stat-box:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.igv-card { padding: 14px; }
}
.igv-howto-trigger { padding: 0; }
.igv-last-updated { color: var(--text-muted); font-size: 0.85rem; margin: 18px 0; }
.igv-inline-app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; margin: 18px 0; }

/* ===================== Article body ===================== */
.igv-article-body :is(h2, h3, h4) { margin-top: 1.6em; }
.igv-article-body p { color: var(--text-secondary); }
.igv-article-body img { border-radius: 12px; }
.igv-article-body a { color: var(--blue-text); }
/* Restore real list rendering inside editor/plugin-written content. */
.igv-article-body ul { list-style: disc; padding-left: 1.35em; margin: 1em 0; }
.igv-article-body ol { list-style: decimal; padding-left: 1.35em; margin: 1em 0; }
.igv-article-body li { color: var(--text-secondary); margin: 0.4em 0; }
.igv-article-body ul ul, .igv-article-body ol ol { margin: 0.4em 0; }
.igv-article-body blockquote {
	margin: 1.2em 0; padding: 12px 16px;
	border-left: 3px solid var(--acc-gold);
	background: var(--card-glass); border-radius: 0 10px 10px 0;
	color: var(--text-secondary);
}
.igv-page-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 20px 0; }
.igv-article-meta { color: var(--text-muted); font-size: 0.9rem; }
.igv-article-thumb-large { border-radius: var(--radius-lg); overflow: hidden; margin: 16px 0; }

/* ===================== Silo / breadcrumbs / topic index ===================== */
.igv-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); margin: 18px 0; list-style: none; padding: 0; }
.igv-breadcrumbs li { display: inline-flex; align-items: center; }
.igv-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--text-muted); opacity: 0.6; }
.igv-breadcrumbs a { color: var(--text-muted); }
.igv-subtopic-nav ul { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 20px; }
.igv-subtopic-nav a { background: var(--card-glass); border: 1px solid var(--border-glass); padding: 8px 16px; border-radius: 999px; color: var(--text-primary); }
.igv-silo-list li { padding: 6px 0; }
.igv-silo-active a { color: var(--gold-text); font-weight: 700; }
.igv-silo-chain { display: flex; justify-content: space-between; gap: 12px; margin: 30px 0; flex-wrap: wrap; }
.igv-silo-chain a { background: var(--card-glass); border: 1px solid var(--border-glass); padding: 10px 16px; border-radius: 10px; color: var(--text-primary); }
.igv-topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 16px 0 30px; }
.igv-topic-card { padding: 18px; }
.igv-topic-children li { padding: 4px 0; }

/* ===================== Banners ===================== */
.igv-banner { text-align: center; margin: 20px auto; max-width: var(--container-w); }
.igv-banner img { margin: 0 auto; border-radius: 12px; }

/* ===================== Trust bar / notice / share ===================== */
.igv-trust-bar { background: var(--bg-surface); border-top: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass); padding: 18px 20px; margin: 30px 0; }
.igv-trust-inner { max-width: var(--container-w); margin: 0 auto; display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.igv-trust-item { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; }
.igv-trust-badge { color: var(--gold-text); }
.igv-notice-box { background: rgba(47,128,237,0.1); border: 1px solid rgba(47,128,237,0.25); border-radius: 12px; padding: 16px 20px; margin: 20px 0; font-size: 0.9rem; }
.igv-share-bar { display: flex; align-items: center; gap: 10px; margin: 24px 0; }
.igv-share-label { color: var(--text-muted); font-size: 0.85rem; }
.igv-share-btn {
	width: 34px; height: 34px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--card-glass); border: 1px solid var(--border-glass);
	color: var(--text-primary); font-size: 0.7rem; font-weight: 800;
}

/* ===================== SEO keywords ===================== */
.igv-seo-keywords { color: var(--text-muted); font-size: 0.8rem; margin: 20px 0; line-height: 1.7; }

/* ===================== Footer ===================== */
.igv-footer { background: var(--bg-surface); border-top: 1px solid var(--border-glass); margin-top: 50px; }
.igv-footer-inner { max-width: var(--container-w); margin: 0 auto; padding: 50px 20px 20px; }
.igv-footer-columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 30px; }
.igv-footer-col h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 14px; }
.igv-footer-col ul li { margin-bottom: 8px; }
.igv-footer-col a { color: var(--text-secondary); }
.igv-footer-brand-name { font-size: 1.3rem; font-weight: 800; display: block; margin-bottom: 10px; }
/* Social icon row — circular buttons, one per configured profile. */
.igv-social-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.igv-social-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--card-glass);
	border: 1px solid var(--border-glass);
	color: var(--text-secondary);
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.igv-social-icon:hover {
	color: var(--acc-gold-bright);
	border-color: rgba(212, 175, 55, 0.45);
	background: rgba(212, 175, 55, 0.08);
	transform: translateY(-2px);
	text-decoration: none;
}
.igv-social-icon:focus-visible {
	outline: 2px solid var(--acc-gold-bright);
	outline-offset: 2px;
}
.igv-badge-18plus {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: linear-gradient(135deg, #ff5a5a, #c62828);
	color: #fff; font-weight: 800; margin-top: 10px; font-size: 0.9rem;
}
@media (max-width: 960px) { .igv-footer-columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .igv-footer-columns { grid-template-columns: 1fr; } }

.igv-compliance-band { background: var(--bg-surface-2); border-top: 1px solid var(--border-glass); padding: 20px; }
.igv-compliance-inner { max-width: var(--container-w); margin: 0 auto; text-align: center; }
.igv-compliance-text { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; max-width: 78ch; margin-left: auto; margin-right: auto; }
.igv-compliance-text p { margin: 0 0 8px; }
.igv-compliance-text p:last-child { margin-bottom: 0; }
.igv-compliance-badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.igv-compliance-badge {
	background: var(--card-glass); border: 1px solid var(--border-glass);
	padding: 6px 14px; border-radius: 8px; font-size: 0.78rem; color: var(--text-secondary);
}
.igv-footer-bottom { text-align: center; padding: 16px 20px; font-size: 0.8rem; color: var(--text-muted); }

/* ===================== Sticky bar (global CTA) ===================== */
.igv-sticky-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 700;
	display: flex;
	gap: 10px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	background: rgba(11,14,20,0.85);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--border-glass);
	transition: transform 0.25s ease;
}
:root[data-theme-mode="light"] .igv-sticky-bar { background: rgba(255,255,255,0.9); }
.igv-sticky-bar[data-state="hidden"] { transform: translateY(100%); }
/* flex-basis 0 + min-width 0 so the two CTAs always split the bar evenly,
   and the label wraps instead of pushing the bar past the screen edge —
   the label text is admin-editable, so it can be arbitrarily long. */
.igv-sticky-cta, .igv-sticky-telegram {
	flex: 1 1 0;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
	line-height: 1.25;
}
@media (max-width: 380px) {
	.igv-sticky-bar { gap: 8px; padding-left: 12px; padding-right: 12px; }
	.igv-sticky-cta, .igv-sticky-telegram { padding-left: 10px; padding-right: 10px; font-size: 0.88rem; }
}
@media (min-width: 900px) {
	.igv-sticky-bar { left: auto; right: 24px; bottom: 24px; border-radius: 999px; border: 1px solid var(--border-glass); max-width: 420px; }
}

/* ===================== Bottom mobile nav ===================== */
.igv-bottom-nav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
	display: none;
	background: rgba(11,14,20,0.92);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--border-glass);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
:root[data-theme-mode="light"] .igv-bottom-nav { background: rgba(255,255,255,0.94); }
.igv-bottom-nav-item {
	flex: 1;
	background: none; border: none;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 10px 4px 8px;
	color: var(--text-secondary);
	font-size: 0.68rem;
}
.igv-bn-icon { color: inherit; }
@media (max-width: 780px) {
	.igv-bottom-nav { display: flex; }
	/* --igv-fixed-stack-h is set live by main.js from the real measured
	   height of the bottom-nav + sticky CTA bar (their combined height
	   varies with label length/font size), so content never ends up
	   hidden underneath them. The static fallback covers the brief
	   moment before JS runs / if JS is disabled. */
	body { padding-bottom: var(--igv-fixed-stack-h, 132px); }
	/* When both bottom nav and sticky CTA bar are present, stack sticky bar above bottom nav */
	.igv-sticky-bar { bottom: 58px; }
}

.igv-mobile-search-panel { position: fixed; left: 0; right: 0; bottom: 58px; z-index: 601; background: var(--bg-surface); border-top: 1px solid var(--border-glass); padding: 14px; }
.igv-mobile-search-panel[hidden] { display: none; }
.igv-mobile-search-panel form { display: flex; gap: 8px; }
.igv-mobile-search-panel input { flex: 1; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border-glass); background: var(--card-glass); color: var(--text-primary); }
.igv-mobile-search-panel button { padding: 10px 18px; border-radius: 999px; border: none; background: var(--acc-gold); color: #1a1400; font-weight: 700; }

/* ===================== Pagination ===================== */
.igv-pagination { margin: 30px 0; display: flex; justify-content: center; gap: 8px; }
.igv-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; border-radius: 8px;
	background: var(--card-glass); border: 1px solid var(--border-glass);
	color: var(--text-secondary); padding: 0 10px;
}
.igv-pagination .page-numbers.current { background: var(--acc-gold); color: #1a1400; font-weight: 700; }

/* ===================== Comments (basic) ===================== */
.comment-list { margin: 20px 0; }
.comment-form input, .comment-form textarea {
	width: 100%; padding: 10px 14px; margin-bottom: 12px;
	background: var(--card-glass); border: 1px solid var(--border-glass);
	border-radius: 8px; color: var(--text-primary);
}

/* ===================== Widgets ===================== */
.widget { padding: 18px; margin-bottom: 18px; }
.widget-title { font-size: 1rem; margin-bottom: 12px; }

/* ---- Sidebar mini list (Latest Games / Latest News) ---- */
.igv-mini-list { display: flex; flex-direction: column; }
.igv-mini-item + .igv-mini-item { border-top: 1px solid var(--border-glass); }
.igv-mini-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: var(--text-primary);
	min-width: 0;
}
.igv-mini-link:hover { text-decoration: none; }
.igv-mini-link:hover .igv-mini-title { color: var(--gold-text); }
.igv-mini-thumb {
	flex: 0 0 52px;
	width: 52px; height: 52px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--bg-surface-2);
	display: flex; align-items: center; justify-content: center;
}
.igv-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.igv-mini-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.igv-mini-title {
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.35;
	/* Cap each row at two lines so long titles can't stretch the sidebar. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.igv-mini-meta { font-size: 0.75rem; color: var(--text-muted); }
.igv-mini-bonus { color: var(--acc-badge); font-weight: 600; }

/* Fallback tile shown when a post has no image of its own. */
.igv-thumb-placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: var(--bg-surface-2);
	color: var(--text-muted);
}
.igv-thumb-placeholder-lg svg { width: 34px; height: 34px; }

/* ===================== 404 ===================== */
.igv-404 { text-align: center; padding: 60px 0; }
.igv-404 .igv-search-box-wrap { margin: 24px auto; }

/* ===================== End-of-article trust blocks ===================== */
.igv-trust-blocks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 16px;
	margin: 30px 0;
}
.igv-trust-block { padding: 20px; border-radius: var(--radius-md); }
.igv-trust-block-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1rem;
	margin: 0 0 10px;
}
.igv-trust-block-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	flex-shrink: 0;
}
.igv-preferred-source .igv-trust-block-icon {
	background: rgba(47, 128, 237, 0.14);
	color: var(--blue-text);
}
.igv-preferred-source p { font-size: 0.88rem; margin-bottom: 14px; }
/* The button label is long and admin-editable, so it wraps rather than
   holding one line and pushing the card past the screen edge. */
.igv-preferred-source .igv-btn {
	white-space: normal;
	text-align: center;
	max-width: 100%;
}

/* Amber note styling, mirroring how disclosures usually read. */
.igv-ai-disclaimer {
	background: rgba(255, 184, 0, 0.07);
	border: 1px solid rgba(255, 184, 0, 0.25);
	border-left-width: 4px;
}
.igv-ai-disclaimer .igv-trust-block-icon {
	background: rgba(255, 184, 0, 0.18);
	color: var(--acc-badge);
}
.igv-ai-disclaimer .igv-trust-block-title { color: var(--gold-text); }
.igv-ai-disclaimer p { font-size: 0.86rem; margin: 0; }

.igv-search-chips { margin: 26px 0; }
.igv-search-chips-title {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	margin-bottom: 12px;
}
.igv-search-chips-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 10px;
}
.igv-search-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	border-radius: 10px;
	background: var(--card-glass);
	border: 1px solid var(--border-glass);
	color: var(--text-secondary);
	font-size: 0.83rem;
	font-weight: 600;
	min-width: 0;
}
.igv-search-chip:hover {
	color: var(--gold-text);
	border-color: rgba(212, 175, 55, 0.35);
	text-decoration: none;
}