/*
 * ClubHouseVR — Main Stylesheet
 * VR Terminal aesthetic. Dark, energetic, gamer-first.
 * Tokens live at :root. Everything is chvr- prefixed.
 */

:root {
	--bg-0: #07070B;
	--bg-1: #0B0B12;
	--bg-2: #14141B;
	--bg-3: #1C1C26;
	--bg-4: #25252F;
	--border: rgba(255,255,255,0.07);
	--border-2: rgba(255,255,255,0.12);
	--text-1: #F0F0F5;
	--text-2: #9A9AB0;
	--text-3: #5A5A6E;
	--volt: #C8FF00;
	--volt-dim: #8FB200;
	--magenta: #FF3081;
	--cyan: #29F1FF;
	--amber: #FFB800;
	--danger: #FF4444;
	/* --ink is "text on a bright accent" — must stay dark in ALL themes
	   (including light/white themes) so volt/magenta/amber buttons keep
	   readable text. Themes that flip --bg-0 to white must NOT change --ink. */
	--ink: #0B0B12;
	--font-display: 'Chakra Petch', system-ui, sans-serif;
	--font-body: 'Geist', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--container: 1320px;
	/* Logo template size — overrides the natural image dimensions so logos
	   render at a consistent size across all themes. Themes can override these
	   variables for their own preferred sizing. */
	--logo-max-width: 200px;
	--logo-max-height: 48px;
	/* Translucent backdrops. --bg-glass is chrome (header, subnav) and flips
	   with the background mode. --bg-glass-strong is for image overlays (card
	   poster fades, lightbox) and stays dark in ALL themes so posters keep
	   their vibrancy and on-image badges stay readable. */
	--bg-glass: rgba(11,11,18,0.75);
	--bg-glass-strong: rgba(11,11,18,0.85);
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg-1);
	color: var(--text-1);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image:
		radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--volt) 4%, transparent) 0%, transparent 40%),
		radial-gradient(circle at 0% 100%, rgba(255,48,129,0.03) 0%, transparent 50%);
	background-attachment: fixed;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
	z-index: 0;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--volt); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.1;
	margin: 0 0 0.5em;
}

::selection { background: var(--volt); color: var(--ink); }

.chvr-skip {
	position: absolute; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.chvr-skip:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 1rem; background: var(--volt); color: var(--ink); z-index: 9999; }

.chvr-container { max-width: var(--container); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.chvr-accent { color: var(--volt); }
.chvr-muted { color: var(--text-3); }

/* ========================================
   TOPBAR
   ======================================== */
.chvr-topbar {
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	background: var(--bg-glass);
	position: relative;
	z-index: 50;
}
.chvr-topbar__inner {
	display: flex; align-items: center; gap: 28px;
	padding: 18px 32px;
	max-width: var(--container);
	margin: 0 auto;
}

.chvr-logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.5px;
	display: inline-flex;	align-items: center;
	gap: 10px;
	color: var(--text-1);
}
.chvr-logo:hover { color: var(--text-1); }
.chvr-logo__mark {
	width: 28px; height: 28px;
	background: var(--volt);
	display: inline-grid;
	place-items: center;
	color: var(--ink);
	font-weight: 700;
	font-size: 12px;
	clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
	font-family: var(--font-display);
}
.chvr-logo__text { color: var(--text-1); }
.chvr-logo__text span { color: var(--volt); }

/* Logo template-size constraint.
   WordPress's the_custom_logo() outputs an <img> at its natural dimensions —
   which is unpredictable and breaks the header layout when admins upload
   large logos. These rules constrain it to --logo-max-width / --logo-max-height
   which themes can override (see Appearance → CHVR Theme Colors). */
.chvr-logo img,
.chvr-logo .custom-logo {
	height: var(--logo-max-height);
	width: auto;
	max-width: var(--logo-max-width);
	object-fit: contain;
	display: block;
}
.chvr-logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.chvr-search {
	flex: 1;
	max-width: 520px;
	position: relative;
}
.chvr-search input {
	width: 100%;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text-1);
	padding: 11px 16px 11px 42px;
	font-family: var(--font-body);
	font-size: 13.5px;
	outline: none;
	transition: all 0.2s;
	border-radius: 0;
}
.chvr-search input::placeholder { color: var(--text-3); }
.chvr-search input:focus { border-color: var(--volt); background: var(--bg-3); }
.chvr-search__icon {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	color: var(--text-3); pointer-events: none; font-size: 16px;
	font-style: normal;
}
.chvr-search__kbd {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	font-family: var(--font-mono); font-size: 10px;
	background: var(--bg-3); padding: 3px 7px; color: var(--text-2);
	border: 1px solid var(--border);
}
.chvr-search__results {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0;
	background: var(--bg-2); border: 1px solid var(--border);
	max-height: 420px; overflow-y: auto;
	z-index: 100;
}
.chvr-search__result {
	display: flex; align-items: center; gap: 12px; padding: 12px;
	border-bottom: 1px solid var(--border); transition: background 0.15s;
	color: var(--text-1);
}
.chvr-search__result:hover, .chvr-search__result.is-active { background: var(--bg-3); color: var(--volt); }
.chvr-search__result-thumb { width: 40px; height: 52px; background: var(--bg-3); flex-shrink: 0; background-size: cover; background-position: center; }
.chvr-search__result-title { font-size: 13px; font-weight: 500; }
.chvr-search__result-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }

.chvr-online {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	background: var(--bg-2);
	border: 1px solid var(--border);
	font-size: 12px;
	font-family: var(--font-mono);
	color: var(--text-2);
}
.chvr-online strong { color: var(--text-1); font-weight: 600; }

.chvr-live-dot {
	width: 8px; height: 8px;
	background: var(--volt);
	border-radius: 50%;
	position: relative;
	display: inline-block;
	flex-shrink: 0;
}
.chvr-live-dot::after {
	content: '';
	position: absolute; inset: -4px;
	background: var(--volt);
	border-radius: 50%;
	opacity: 0.4;
	animation: chvr-pulse 1.8s ease-out infinite;
}
@keyframes chvr-pulse {
	0% { transform: scale(0.8); opacity: 0.6; }
	100% { transform: scale(2.4); opacity: 0; }
}

.chvr-icon-btn {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text-2);
	font-size: 16px;
	transition: all 0.15s;
}
.chvr-icon-btn:hover { border-color: var(--volt); color: var(--volt); }

.chvr-avatar {
	width: 38px; height: 38px;
	background: var(--magenta);
	display: grid; place-items: center;
	color: white;
	font-weight: 600;
	font-size: 13px;
	font-family: var(--font-display);
	transition: transform 0.15s;
}
.chvr-avatar:hover { transform: scale(1.05); color: white; }

/* ========================================
   SUBNAV
   ======================================== */
.chvr-subnav {
	border-bottom: 1px solid var(--border);
	background: var(--bg-glass);
	position: sticky;
	top: 0;
	z-index: 49;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* Hamburger toggle — hidden on desktop, shown on mobile via media query.
   On desktop the menu wrapper lays out inline as a normal nav row. */
.chvr-menu-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 14px 4px;
	color: var(--text-1);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.chvr-menu-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--text-1);
	position: relative;
	transition: transform 0.2s, opacity 0.2s;
}
.chvr-menu-toggle__bar + .chvr-menu-toggle__bar { margin-top: 4px; }
.chvr-menu-toggle__label { margin-left: 2px; }
.chvr-menu-toggle[aria-expanded="true"] .chvr-menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.chvr-menu-toggle[aria-expanded="true"] .chvr-menu-toggle__bar:nth-child(2) { opacity: 0; }
.chvr-menu-toggle[aria-expanded="true"] .chvr-menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.chvr-subnav__menu {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}
.chvr-subnav__inner {
	display: flex; align-items: center; gap: 4px;
	padding: 0 32px;
	max-width: var(--container);
	margin: 0 auto;
}
.chvr-nav {
	display: flex; gap: 0;
	list-style: none; margin: 0; padding: 0;
}
.chvr-nav li { display: flex; }
.chvr-nav a {
	padding: 14px 18px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--text-2);
	position: relative;
	transition: color 0.15s;
}
.chvr-nav a:hover { color: var(--text-1); }
.chvr-nav .current-menu-item a,
.chvr-nav li.current_page_item a { color: var(--volt); }
.chvr-nav .current-menu-item a::after,
.chvr-nav li.current_page_item a::after {
	content: '';
	position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px;
	background: var(--volt);
}
.chvr-nav-cta {
	margin-left: auto;
	padding: 8px 16px;
	background: var(--volt);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: transform 0.15s, box-shadow 0.15s;
}
.chvr-nav-cta:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--magenta); color: var(--ink); }

/* ========================================
   TICKER
   ======================================== */
.chvr-ticker {
	background: var(--bg-0);
	border-bottom: 1px solid var(--border);
	overflow: hidden;
	padding: 8px 0;
	position: relative;
	z-index: 1;
}
.chvr-ticker__track {
	display: flex; gap: 48px;
	white-space: nowrap;
	animation: chvr-scroll-x 60s linear infinite;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-2);
}
.chvr-ticker__item { display: inline-flex; align-items: center; gap: 8px; }
.chvr-ticker__dot { color: var(--volt); }
@keyframes chvr-scroll-x {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ========================================
   BUTTONS
   Specificity matters: WordPress content wrappers like .entry-content a
   have the same specificity as plain .chvr-btn-primary, and depending on
   stylesheet load order can win and override text color. Chaining the
   `a` tag selector plus pseudo-classes guarantees these buttons always
   look right when rendered inside the_content() output (shortcodes,
   block editor, etc.).
   ======================================== */
.chvr-btn-primary,
a.chvr-btn-primary,
a.chvr-btn-primary:link,
a.chvr-btn-primary:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 28px;
	background: var(--volt);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
	border: none;
	cursor: pointer;
}
.chvr-btn-primary:hover,
a.chvr-btn-primary:hover,
a.chvr-btn-primary:focus,
a.chvr-btn-primary:active {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--magenta);
	color: var(--ink);
	text-decoration: none;
	background: var(--volt);
}

.chvr-btn-secondary,
a.chvr-btn-secondary,
a.chvr-btn-secondary:link,
a.chvr-btn-secondary:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 22px;
	background: transparent;
	color: var(--text-1);
	border: 1px solid var(--border-2);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	transition: all 0.15s;
	cursor: pointer;
}
.chvr-btn-secondary:hover,
a.chvr-btn-secondary:hover,
a.chvr-btn-secondary:focus {
	border-color: var(--volt);
	color: var(--volt);
	text-decoration: none;
	background: transparent;
}

.chvr-btn-block { width: 100%; }
.chvr-btn-lg { padding: 16px 32px !important; font-size: 14px !important; }
.chvr-btn-sm { padding: 8px 16px !important; font-size: 11px !important; }
.chvr-btn-icon { padding: 13px 14px; }

/* ========================================
   HERO
   ======================================== */
.chvr-main { padding-bottom: 48px; }
.chvr-hero {
	padding: 56px 32px 40px;
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 32px;
	align-items: stretch;
}
.chvr-hero__featured {
	background: var(--bg-2);
	border: 1px solid var(--border);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 480px;
}
.chvr-hero__media {
	flex: 1;
	background:
		radial-gradient(circle at 70% 30%, rgba(255,48,129,0.35) 0%, transparent 50%),
		radial-gradient(circle at 30% 80%, rgba(41,241,255,0.25) 0%, transparent 50%),
		linear-gradient(135deg, #1a1a3a 0%, #2a0a3a 100%);
	background-size: cover;
	background-position: center;
	position: relative;
	min-height: 280px;
	display: grid;
	place-items: center;
}
.chvr-hero__media::after {
	content: '';
	position: absolute; inset: 0;
	background-image: linear-gradient(rgba(0,0,0,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.6) 1px, transparent 1px);
	background-size: 32px 32px;
	opacity: 0.12;
	pointer-events: none;
}
.chvr-hero__video,
.chvr-hero__video iframe,
.chvr-hero__video video,
.chvr-hero__video .chvr-video-embed__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	border: 0;
	z-index: 0;
}
.chvr-hero__play {
	position: relative;
	z-index: 2;
	width: 88px; height: 88px;
	border: 2px solid var(--volt);
	border-radius: 50%;
	display: grid; place-items: center;
	color: var(--volt);
	font-size: 28px;
	transition: all 0.2s;
	background: var(--bg-glass-strong);
	backdrop-filter: blur(8px);
}
.chvr-hero__play:hover {
	background: var(--volt); color: var(--ink);
	transform: scale(1.05);
}
.chvr-hero__body {
	padding: 28px;
	border-top: 1px solid var(--border);
	position: relative;
}
.chvr-hero__featured::before {
	content: 'FEATURED';
	position: absolute; top: 20px; left: 20px;
	font-family: var(--font-mono); font-size: 11px;
	background: var(--volt); color: var(--ink);
	padding: 4px 10px;
	font-weight: 600;
	letter-spacing: 1px;
	z-index: 3;
}
.chvr-hero__tags { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.chvr-tag {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.6px;
	padding: 4px 8px;
	background: var(--bg-3);
	color: var(--text-2);
	border: 1px solid var(--border);
}
.chvr-tag--platform { background: color-mix(in srgb, var(--volt) 14%, transparent); color: var(--text-1); border-color: color-mix(in srgb, var(--volt) 38%, transparent); }
.chvr-tag--genre    { background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--text-1); border-color: color-mix(in srgb, var(--cyan) 32%, transparent); }

.chvr-hero__title {
	font-family: var(--font-display);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 12px;
	letter-spacing: -1px;
}
.chvr-hero__desc {
	color: var(--text-2);
	font-size: 14.5px;
	line-height: 1.55;
	max-width: 540px;
	margin: 0 0 20px;
}
.chvr-hero__stats {
	display: flex; gap: 24px;
	font-family: var(--font-mono); font-size: 12px;
	color: var(--text-2);
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.chvr-hero__stats span { display: inline-flex; align-items: center; gap: 6px; }
.chvr-star { color: var(--amber); }
.chvr-star--amber { color: var(--amber); }
.chvr-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }

.chvr-hero__side { display: flex; flex-direction: column; gap: 16px; }

/* ========================================
   SIDE CARD (Streamers)
   ======================================== */
.chvr-side-card {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 20px;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.chvr-side-card__h {
	font-family: var(--font-display);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--text-2);
	margin: 0 0 16px;
	display: flex; align-items: center; gap: 8px;
}
.chvr-side-card__count { color: var(--text-3); font-weight: 400; margin-left: auto; font-family: var(--font-mono); font-size: 11px; }
.chvr-h-dot { width: 6px; height: 6px; background: var(--volt); display: inline-block; flex-shrink: 0; }

.chvr-stream-list { display: flex; flex-direction: column; flex: 1; }
.chvr-stream-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	transition: padding 0.15s;
}
.chvr-stream-item:hover { padding-left: 4px; }
.chvr-stream-item:last-child { border-bottom: none; }
.chvr-stream-item__thumb {
	width: 44px; height: 44px;
	background: var(--bg-4);
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}
.chvr-stream-item__thumb::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(135deg, var(--magenta) 0%, var(--cyan) 100%);
	opacity: 0.6;
}
.chvr-stream-item__live-tag {
	position: absolute; top: 2px; left: 2px;
	font-family: var(--font-mono); font-size: 8px;
	background: var(--magenta); color: white;
	padding: 1px 4px;
	font-weight: 600;
	z-index: 2;
}
.chvr-stream-item__meta { flex: 1; min-width: 0; }
.chvr-stream-item__meta .name {
	font-size: 13px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-1);
}
.chvr-stream-item__meta .game {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chvr-stream-item__watchers {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--magenta);
	white-space: nowrap;
}
.chvr-side-card__more {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--volt);
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
	transition: gap 0.15s;
	display: inline-flex; align-items: center; gap: 6px;
}
.chvr-side-card__more:hover { color: var(--volt); gap: 10px; }

.chvr-skeleton .chvr-stream-item__thumb::before { display: none; }
.chvr-skeleton .chvr-stream-item__thumb { animation: chvr-skeleton 1.4s ease-in-out infinite; }
.chvr-skeleton-line { height: 10px; background: var(--bg-3); margin-bottom: 6px; animation: chvr-skeleton 1.4s ease-in-out infinite; }
@keyframes chvr-skeleton {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

/* ========================================
   STATS STRIP
   ======================================== */
.chvr-stats-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	margin: 16px 0 56px;
}
.chvr-stat-cell {
	background: var(--bg-1);
	padding: 24px 28px;
	position: relative;
	overflow: hidden;
	transition: background 0.2s;
}
.chvr-stat-cell:hover { background: var(--bg-2); }
.chvr-stat-cell::before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 40px; height: 2px;
	background: var(--volt);
}
.chvr-stat-cell__label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--text-3);
	margin-bottom: 8px;
}
.chvr-stat-cell__value {
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -1px;
}
.chvr-stat-cell__trend {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--volt);
	margin-top: 4px;
}

/* ========================================
   SECTION HEAD
   ======================================== */
.chvr-section-head {
	display: flex; align-items: baseline; gap: 16px;
	margin-bottom: 28px;
}
.chvr-section-title {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin: 0;
}
.chvr-section-count {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-3);
	letter-spacing: 0.5px;
}
.chvr-section-link {
	margin-left: auto;
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--volt);
	display: inline-flex; align-items: center; gap: 6px;
	transition: gap 0.15s;
}
.chvr-section-link:hover { color: var(--volt); gap: 10px; }

/* ========================================
   FILTER BAR
   ======================================== */
.chvr-filter-bar {
	display: flex; gap: 8px;
	margin-bottom: 24px;
	align-items: center;
	flex-wrap: wrap;
}
.chvr-filter-label {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--text-3);
	margin-right: 8px;
}
.chvr-chip-filter {
	padding: 8px 16px;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text-2);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: all 0.15s;
	cursor: pointer;
}
.chvr-chip-filter:hover { border-color: var(--border-2); color: var(--text-1); }
.chvr-chip-filter.is-active {
	background: var(--volt);
	color: var(--ink);
	border-color: var(--volt);
}

.chvr-filter-bar__sort { margin-left: auto; }
.chvr-filter-bar__sort select {
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text-1);
	padding: 8px 32px 8px 14px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%239A9AB0' d='M2 4l4 4 4-4'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

/* ========================================
   GAMES GRID & CARD
   ======================================== */
.chvr-games-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 64px;
}

.chvr-card {
	background: var(--bg-2);
	border: 1px solid var(--border);
	overflow: hidden;
	transition: all 0.25s var(--ease-out);
	position: relative;
	opacity: 0;
	transform: translateY(20px);
	animation: chvr-card-in 0.6s var(--ease-out) forwards;
	will-change: transform;
}
@keyframes chvr-card-in {
	to { opacity: 1; transform: translateY(0); }
}
.chvr-card:nth-child(1) { animation-delay: 0.05s; }
.chvr-card:nth-child(2) { animation-delay: 0.10s; }
.chvr-card:nth-child(3) { animation-delay: 0.15s; }
.chvr-card:nth-child(4) { animation-delay: 0.20s; }
.chvr-card:nth-child(5) { animation-delay: 0.25s; }
.chvr-card:nth-child(6) { animation-delay: 0.30s; }
.chvr-card:nth-child(7) { animation-delay: 0.35s; }
.chvr-card:nth-child(8) { animation-delay: 0.40s; }
.chvr-card:nth-child(n+9) { animation-delay: 0.45s; }

.chvr-card:hover {
	border-color: var(--volt);
	transform: translateY(-4px);
}

.chvr-card__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	height: 100%;
}
.chvr-card__link:hover { color: inherit; }

.chvr-card__poster {
	aspect-ratio: 3/4;
	position: relative;
	overflow: hidden;
	background: var(--bg-4);
}
.chvr-card__poster::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 50%, var(--bg-glass-strong) 100%);
	pointer-events: none;
}
.chvr-card__poster-bg {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease, opacity 0.3s ease;
}
.chvr-card:hover .chvr-card__poster-bg { transform: scale(1.05); }

/* ========================================
   HOVER TRAILER PREVIEW
   On desktop, hovering a card with .has-hover-video fades the trailer
   in over the poster. JS handles preload-on-hover and play/pause so
   we never load bandwidth until the user actually hovers.
   Trailers are 9:16 portrait — object-fit: cover centers and crops
   them into the 3:4 card area (the center stays in frame, top/bottom
   edges may crop).
   ======================================== */
.chvr-card__hover-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	background: var(--bg-4);
	z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
	.chvr-card.has-hover-video.is-video-ready .chvr-card__hover-video {
		opacity: 1;
	}
	.chvr-card.has-hover-video.is-video-ready .chvr-card__poster-bg {
		/* Hide poster slightly when video is playing — keeps the badges
		   readable but lets the trailer dominate. The gradient overlay
		   in ::after stays for badge legibility. */
		opacity: 0.15;
	}
}
/* Touch devices: never autoload the trailer — the card stays a static
   poster, tap goes to the game page where the trailer plays in hero. */
@media (hover: none) {
	.chvr-card__hover-video { display: none; }
}

.chvr-card__badges {
	position: absolute; top: 10px; left: 10px; right: 10px;
	display: flex; justify-content: space-between; align-items: flex-start;
	z-index: 3;
	gap: 8px;
}
.chvr-card__size {
	position: absolute; bottom: 10px; right: 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: #F0F0F5;
	background: rgba(0,0,0,0.65);
	padding: 3px 7px;
	z-index: 3;
	backdrop-filter: blur(4px);
}

.chvr-badge {
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 600;
	padding: 3px 7px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.chvr-badge--hot      { background: var(--magenta); color: white; }
.chvr-badge--new      { background: var(--volt); color: var(--ink); }
.chvr-badge--pick,
.chvr-badge--featured { background: var(--cyan); color: var(--ink); }
.chvr-badge--staff    { background: var(--cyan); color: var(--ink); }
.chvr-badge--free     { background: rgba(0,0,0,0.7); color: var(--volt); border: 1px solid var(--volt); }
.chvr-badge--price    { background: rgba(0,0,0,0.7); color: #F0F0F5; border: 1px solid var(--border-2); }

.chvr-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.chvr-card__title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.3px;
	color: var(--text-1);
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.chvr-card__stats {
	display: flex; gap: 14px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-3);
	flex-wrap: wrap;
}
.chvr-card__rating, .chvr-card__downloads { display: inline-flex; align-items: center; gap: 4px; }
.chvr-card__chips {
	display: flex; gap: 4px;
	margin-top: auto;
	flex-wrap: wrap;
}
.chvr-chip {
	font-family: var(--font-mono);
	font-size: 9px;
	padding: 2px 6px;
	letter-spacing: 0.5px;
	font-weight: 600;
}
.chvr-chip--platform { background: color-mix(in srgb, var(--volt) 16%, transparent); color: var(--magenta); border: 1px solid color-mix(in srgb, var(--volt) 35%, transparent); }
.chvr-chip--genre    { background: color-mix(in srgb, var(--text-2) 8%, transparent); color: var(--text-2); border: 1px solid var(--border-2); }

.chvr-card__wishlist {
	position: absolute; top: 10px; right: 10px;
	width: 30px; height: 30px;
	background: rgba(0,0,0,0.55);
	color: #F0F0F5;
	border: 1px solid rgba(255,255,255,0.15);
	display: grid; place-items: center;
	font-size: 14px;
	z-index: 4;
	opacity: 0;
	transition: all 0.2s;
	backdrop-filter: blur(4px);
}
.chvr-card:hover .chvr-card__wishlist { opacity: 1; }
.chvr-card__wishlist:hover { color: var(--magenta); border-color: var(--magenta); }
.chvr-card__wishlist.is-wishlisted { color: var(--magenta); opacity: 1; }

/* ========================================
   BENTO COMMUNITY
   ======================================== */
.chvr-bento {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
	margin-bottom: 64px;
	min-height: 360px;
}
.chvr-bento__cell {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 24px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s;
}
.chvr-bento__cell:hover { border-color: var(--border-2); }

.chvr-bento__discord {
	grid-row: 1 / 3;
	background:
		radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--volt) 15%, transparent) 0%, transparent 50%),
		var(--bg-2);
	display: flex;
	flex-direction: column;
}
.chvr-bento__h {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin: 0 0 12px;
	line-height: 1.1;
}
.chvr-bento__discord p {
	color: var(--text-2);
	font-size: 14px;
	margin: 0 0 20px;
	max-width: 360px;
	line-height: 1.6;
}
.chvr-discord__avatars {
	display: flex;
	margin-bottom: 24px;
}
.chvr-discord__av {
	width: 36px; height: 36px;
	border: 2px solid var(--bg-2);
	margin-left: -10px;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
}
.chvr-discord__av:first-child { margin-left: 0; }
.chvr-discord__av--more {
	background: var(--bg-3);
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-2);
}
.chvr-discord__count {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-2);
	margin-bottom: 24px;
	display: flex; align-items: center; gap: 8px;
}
.chvr-discord__count strong { color: var(--volt); font-weight: 600; }
.chvr-bento__discord .chvr-btn-primary { align-self: flex-start; }

.chvr-bento__stat {
	display: flex; flex-direction: column; justify-content: space-between;
}
.chvr-bento__stat-label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--text-3);
}
.chvr-bento__stat-value {
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -1.5px;
	line-height: 1;
}
.chvr-bento__stat-value--volt    { color: var(--volt); }
.chvr-bento__stat-value--magenta { color: var(--magenta); }
.chvr-bento__stat-trend {
	font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
	margin-top: 4px;
}

/* ========================================
   DEV CTA
   ======================================== */
.chvr-dev-cta {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 48px;
	margin-bottom: 64px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.chvr-dev-cta::before {
	content: '';
	position: absolute;
	top: 0; right: 0; width: 200px; height: 200px;
	background: var(--volt);
	opacity: 0.06;
	transform: rotate(45deg) translate(50%, -50%);
}
.chvr-dev-cta__h {
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin: 0 0 12px;
	line-height: 1.15;
}
.chvr-dev-cta__body p { color: var(--text-2); font-size: 15px; max-width: 580px; line-height: 1.6; margin: 0; }

/* ========================================
   SINGLE GAME PAGE
   ======================================== */
.chvr-single-game { padding-top: 32px; }
.chvr-breadcrumb {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-3);
	margin-bottom: 24px;
	letter-spacing: 0.5px;
}
.chvr-breadcrumb a:hover { color: var(--volt); }
.chvr-breadcrumb span { color: var(--text-1); }

.chvr-single-game__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 40px;
	margin-bottom: 48px;
}

.chvr-single-game__main-media {
	aspect-ratio: 16/9;
	background: var(--bg-2);
	border: 1px solid var(--border);
	overflow: hidden;
	margin-bottom: 12px;
}
.chvr-single-game__main-media img,
.chvr-single-game__video,
.chvr-single-game__video iframe,
.chvr-single-game__video video,
.chvr-single-game__video .chvr-video-embed__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	display: block;
}
.chvr-single-game__media-fallback { width: 100%; height: 100%; }

/* ========================================
   VIDEO EMBED HELPER WRAPPERS
   clubhousevr_render_video() outputs a wrapper div around an <iframe>
   (YouTube/Vimeo) or <video> (direct files). These styles ensure the
   element fills its parent container correctly in any context.
   For portrait 9:16 trailers in landscape containers, the iframe
   letterboxes (black bars) which is the YouTube-correct behavior.
   ======================================== */
.chvr-video-embed {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--bg-3);
	overflow: hidden;
}
.chvr-video-embed iframe,
.chvr-video-embed video,
.chvr-video-embed .chvr-video-embed__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* When used INSIDE the hero (autoplay/looping background), use cover
   so the trailer fills the hero. */
.chvr-hero__video iframe,
.chvr-hero__video video { object-fit: cover; }
/* When used INSIDE the single-game main media area (controls visible),
   use contain so the full trailer is visible — letterboxed if needed. */
.chvr-single-game__video iframe,
.chvr-single-game__video video { object-fit: contain; background: #000; }

.chvr-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}
.chvr-gallery-thumb {
	aspect-ratio: 16/10;
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s;
}
.chvr-gallery-thumb:hover, .chvr-gallery-thumb.is-active { border-color: var(--volt); }
.chvr-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.chvr-single-game__panel {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 28px;
	align-self: start;
	position: sticky;
	top: 140px;
}

/* Poster button at the top of the right panel — clickable, opens
   the full-size poster in the lightbox. */
.chvr-single-game__poster {
	display: block;
	width: 100%;
	margin: -28px -28px 24px;
	width: calc(100% + 56px);
	padding: 0;
	border: 0;
	background: var(--bg-3);
	cursor: zoom-in;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3/4;
}
.chvr-single-game__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease-out);
}
.chvr-single-game__poster:hover img { transform: scale(1.04); }
.chvr-single-game__poster:focus-visible {
	outline: 2px solid var(--volt);
	outline-offset: -4px;
}
.chvr-single-game__poster-expand {
	position: absolute;
	top: 14px; right: 14px;
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	background: var(--bg-glass-strong);
	color: var(--text-1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 18px;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}
.chvr-single-game__poster:hover .chvr-single-game__poster-expand,
.chvr-single-game__poster:focus-visible .chvr-single-game__poster-expand {
	opacity: 1;
}

/* Make gallery thumbs feel clickable */
.chvr-gallery-thumb { cursor: zoom-in; }

.chvr-single-game__title {
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 12px 0 8px;
}
.chvr-single-game__dev {
	font-size: 13px;
	color: var(--text-2);
	margin-bottom: 24px;
}
.chvr-single-game__dev a { color: var(--cyan); }

.chvr-single-game__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	margin-bottom: 24px;
}
.chvr-stat-block {
	background: var(--bg-1);
	padding: 14px;
	text-align: center;
}
.chvr-stat-block__value {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: 4px;
}
.chvr-stat-block__label {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-3);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.chvr-single-game__download { margin-bottom: 28px; }
.chvr-single-game__download-meta {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-3);
	margin: 12px 0 0;
	text-align: center;
}
.chvr-single-game__secondary-actions {
	display: flex; gap: 8px;
	margin-top: 12px;
}
.chvr-single-game__secondary-actions .chvr-btn-secondary { flex: 1; justify-content: center; }

.chvr-locked {
	background: var(--bg-1);
	border: 1px dashed var(--border-2);
	padding: 20px;
	text-align: center;
}
.chvr-locked p {
	font-size: 13px;
	color: var(--text-2);
	margin: 0 0 16px;
}
.chvr-locked__buttons {
	display: flex; gap: 8px; flex-direction: column;
}
.chvr-locked__buttons .chvr-btn-primary, .chvr-locked__buttons .chvr-btn-secondary { justify-content: center; }

.chvr-single-game__meta-table {
	border-top: 1px solid var(--border);
	padding-top: 20px;
}
.chvr-meta-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 16px;
	padding: 8px 0;
	font-size: 13px;
}
.chvr-meta-row__label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-3);
}
.chvr-meta-row__value { color: var(--text-1); }

/* About section now lives INSIDE the left column of the top grid,
   filling the space below the gallery thumbs so the page balances
   against the (much taller) right panel. */
.chvr-single-game__about {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}

.chvr-single-game__body { margin-bottom: 48px; max-width: 800px; }
.chvr-single-game__section-h {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 18px;
	letter-spacing: -0.5px;
	text-transform: uppercase;
}
.chvr-single-game__content { font-size: 15.5px; line-height: 1.7; color: var(--text-1); }
.chvr-single-game__content p { margin: 0 0 1.1em; color: var(--text-2); }
.chvr-single-game__content p:last-child { margin-bottom: 0; }
.chvr-single-game__content h2, .chvr-single-game__content h3 { margin-top: 1.5em; color: var(--text-1); }
.chvr-single-game__content a { color: var(--volt); }
.chvr-single-game__content strong { color: var(--text-1); }
.chvr-single-game__content ul, .chvr-single-game__content ol { padding-left: 1.4em; color: var(--text-2); }
.chvr-single-game__content li { margin-bottom: 0.4em; }

/* ========================================
   ARCHIVE
   ======================================== */
.chvr-archive { padding: 32px 0 0; }
.chvr-archive__head {
	display: flex; align-items: baseline; gap: 16px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.chvr-archive__title {
	font-family: var(--font-display);
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 0;
}
.chvr-archive__count {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-3);
}
.chvr-load-more {
	display: block;
	width: 100%;
	max-width: 280px;
	margin: 32px auto 64px;
	padding: 16px;
	background: var(--bg-2);
	border: 1px solid var(--border-2);
	color: var(--text-1);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.15s;
}
.chvr-load-more:hover { border-color: var(--volt); color: var(--volt); }
.chvr-load-more:disabled { opacity: 0.5; cursor: not-allowed; }

.chvr-empty {
	text-align: center;
	padding: 80px 32px;
	color: var(--text-2);
}
.chvr-empty h2 { color: var(--text-1); margin-bottom: 12px; }

/* When the four stat tiles are hidden (brand-new site), let the Discord
   card span the full bento width so it doesn't look lopsided. */
.chvr-bento--discord-only {
	grid-template-columns: 1fr !important;
	grid-template-rows: auto !important;
	min-height: 0 !important;
}
.chvr-bento--discord-only .chvr-bento__discord {
	grid-column: 1 / -1 !important;
	grid-row: auto !important;
}

/* ========================================
   EMPTY STATE — used in trending grid and other listings
   Sits inside .chvr-games-grid; spans all columns gracefully.
   ======================================== */
.chvr-empty-state {
	background: var(--bg-2);
	border: 1px dashed var(--border-2);
	padding: 56px 24px;
	text-align: center;
	color: var(--text-2);
}
.chvr-empty-state--grid-span {
	grid-column: 1 / -1;
}
.chvr-empty-state__icon {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 16px;
	opacity: 0.7;
}
.chvr-empty-state__title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--text-1);
	margin: 0 0 8px;
	letter-spacing: -0.4px;
}
.chvr-empty-state__body {
	font-size: 14px;
	line-height: 1.55;
	max-width: 440px;
	margin: 0 auto 24px;
}
.chvr-empty-state__actions {
	display: inline-flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 720px) {
	.chvr-empty-state { padding: 40px 18px; }
	.chvr-empty-state__icon { font-size: 44px; }
	.chvr-empty-state__title { font-size: 18px; }
	.chvr-empty-state__body { font-size: 13px; }
	.chvr-empty-state__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; margin: 0 auto; }
	.chvr-empty-state__actions .chvr-btn-primary,
	.chvr-empty-state__actions .chvr-btn-secondary { width: 100%; }
}

/* ========================================
   FOOTER
   ======================================== */
.chvr-footer {
	border-top: 1px solid var(--border);
	padding: 48px 0 32px;
	margin-top: 64px;
	background: var(--bg-0);
}
.chvr-footer__grid {
	display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px; margin-bottom: 40px;
}
.chvr-footer__brand .chvr-logo { margin-bottom: 16px; }
.chvr-footer__brand p { color: var(--text-3); font-size: 13px; max-width: 280px; line-height: 1.6; margin: 0 0 20px; }
.chvr-footer__social { display: flex; gap: 8px; }
.chvr-footer__social a {
	width: 32px; height: 32px;
	background: var(--bg-2);
	border: 1px solid var(--border);
	display: grid; place-items: center;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-2);
	letter-spacing: 0.5px;
	transition: all 0.15s;
}
.chvr-footer__social a:hover { border-color: var(--volt); color: var(--volt); }

.chvr-footer h4 {
	font-family: var(--font-display);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--text-3);
	margin: 0 0 16px;
	font-weight: 700;
}
.chvr-footer__menu, .chvr-footer ul {
	list-style: none; margin: 0; padding: 0;
}
.chvr-footer__menu li, .chvr-footer ul li { margin-bottom: 10px; }
.chvr-footer__menu a, .chvr-footer ul a {
	color: var(--text-2); font-size: 13px;
}
.chvr-footer__menu a:hover, .chvr-footer ul a:hover { color: var(--volt); }

.chvr-footer__bottom {
	border-top: 1px solid var(--border);
	padding-top: 24px;
	display: flex; justify-content: space-between; align-items: center;
	font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
	flex-wrap: wrap;
	gap: 12px;
}
.chvr-status-ok { color: var(--volt); }

/* ========================================
   TOAST / NOTIFICATIONS
   ======================================== */
.chvr-toast {
	position: fixed; bottom: 24px; right: 24px;
	background: var(--bg-3);
	border: 1px solid var(--volt);
	color: var(--text-1);
	padding: 14px 20px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	z-index: 9999;
	transform: translateY(20px);
	opacity: 0;
	transition: all 0.25s var(--ease-out);
	max-width: 360px;
}
.chvr-toast.is-visible { transform: translateY(0); opacity: 1; }
.chvr-toast--magenta { border-color: var(--magenta); }

/* ========================================
   AUTH FORMS (login, register, lost password)
   Used by [chvr_login] / [chvr_register] / [chvr_lost_pass] shortcodes.
   ======================================== */
.chvr-auth-form {
	max-width: 440px;
	margin: 48px auto;
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 40px;
}
.chvr-auth-form form { display: flex; flex-direction: column; gap: 16px; }
.chvr-auth-form label { display: flex; flex-direction: column; gap: 6px; }
.chvr-auth-form label > span {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-3);
}
.chvr-auth-form label small {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-3);
	margin-top: 4px;
	text-transform: none;
	letter-spacing: 0;
}
.chvr-auth-form input[type=text],
.chvr-auth-form input[type=email],
.chvr-auth-form input[type=password],
.chvr-auth-form input[type=url] {
	background: var(--bg-1);
	border: 1px solid var(--border-2);
	color: var(--text-1);
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	outline: none;
	transition: border-color 0.15s, background 0.15s;
	border-radius: 0;
}
.chvr-auth-form input:focus { border-color: var(--volt); background: var(--bg-3); }
.chvr-auth-form__checkbox {
	flex-direction: row !important;
	align-items: center;
	gap: 8px !important;
	font-size: 13px;
	color: var(--text-2);
	cursor: pointer;
}
.chvr-auth-form__checkbox > span { font-family: var(--font-body) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-2) !important; }
.chvr-auth-form__checkbox input { accent-color: var(--volt); width: 16px; height: 16px; }
.chvr-auth-form__links { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 8px; }
.chvr-auth-form__links a { color: var(--volt); }
.chvr-auth-form__links a:hover { text-decoration: underline; }
.chvr-auth-form__legal { font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.5; }
.chvr-auth-form__legal a { color: var(--text-2); text-decoration: underline; }
.chvr-auth-form__error {
	background: rgba(255,48,129,0.1);
	border-left: 2px solid var(--magenta);
	padding: 10px 14px;
	font-size: 13px;
	color: var(--text-1);
	margin-bottom: 4px;
}
.chvr-auth-form__success {
	background: color-mix(in srgb, var(--volt) 10%, transparent);
	border-left: 2px solid var(--volt);
	padding: 10px 14px;
	font-size: 13px;
	color: var(--text-1);
	margin-bottom: 4px;
}

/* ========================================
   ACCOUNT DASHBOARD ([chvr_account])
   ======================================== */
.chvr-account {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
	margin: 32px 0 64px;
}
.chvr-account__nav {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 24px;
	height: fit-content;
	position: sticky;
	top: 140px;
}
.chvr-account__user { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.chvr-account__avatar {
	width: 64px; height: 64px;
	margin: 0 auto 12px;
	border-radius: 50%;
	border: 2px solid var(--volt);
	display: block;
}
.chvr-account__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
.chvr-account__handle { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.chvr-account__nav nav { display: flex; flex-direction: column; gap: 2px; }
.chvr-account__nav nav a {
	padding: 10px 14px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--text-2);
	transition: all 0.15s;
}
.chvr-account__nav nav a:hover { background: var(--bg-3); color: var(--text-1); }
.chvr-account__nav nav a.is-active { background: var(--bg-3); color: var(--volt); border-left: 2px solid var(--volt); padding-left: 12px; }

.chvr-account__main { background: var(--bg-2); border: 1px solid var(--border); padding: 32px; min-height: 400px; }
.chvr-account__heading { font-family: var(--font-display); font-size: 24px; margin: 0 0 24px; letter-spacing: -0.5px; }
.chvr-account__subheading { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); margin: 32px 0 12px; padding-top: 24px; border-top: 1px solid var(--border); }

.chvr-account__flash { padding: 12px 16px; margin-bottom: 24px; font-size: 13.5px; }
.chvr-account__flash--success { background: color-mix(in srgb, var(--volt) 8%, transparent); border-left: 2px solid var(--volt); color: var(--text-1); }
.chvr-account__flash--error   { background: rgba(255,48,129,0.08); border-left: 2px solid var(--magenta); color: var(--text-1); }
.chvr-account__flash--welcome { background: rgba(41,241,255,0.08); border-left: 2px solid var(--cyan); color: var(--text-1); }

.chvr-account__form { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.chvr-account__form label { display: flex; flex-direction: column; gap: 6px; }
.chvr-account__form label > span {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-3);
}
.chvr-account__form label > span small { text-transform: none; letter-spacing: 0; color: var(--text-3); margin-left: 4px; }
.chvr-account__form input,
.chvr-account__form textarea,
.chvr-account__form select {
	background: var(--bg-1);
	border: 1px solid var(--border-2);
	color: var(--text-1);
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	outline: none;
	border-radius: 0;
}
.chvr-account__form input:focus,
.chvr-account__form textarea:focus,
.chvr-account__form select:focus { border-color: var(--volt); }
.chvr-account__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.chvr-account__list { display: flex; flex-direction: column; gap: 8px; }
.chvr-account__row {
	display: flex; align-items: center; gap: 14px;
	background: var(--bg-1);
	border: 1px solid var(--border);
	padding: 12px;
	transition: border-color 0.15s, transform 0.15s;
	color: inherit;
}
.chvr-account__row:hover { border-color: var(--volt); transform: translateX(2px); color: inherit; }
.chvr-account__row-thumb { width: 48px; height: 48px; background: var(--bg-3); background-size: cover; background-position: center; flex-shrink: 0; }
.chvr-account__row-body { flex: 1; min-width: 0; }
.chvr-account__row-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--text-1); }
.chvr-account__row-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.chvr-account__row-action { font-family: var(--font-mono); color: var(--volt); font-size: 18px; padding: 0 8px; }

.chvr-account__status { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.8px; padding: 2px 6px; border: 1px solid; }
.chvr-account__status--publish { color: var(--volt); border-color: var(--volt); }
.chvr-account__status--pending { color: var(--amber); border-color: var(--amber); }
.chvr-account__status--draft   { color: var(--text-3); border-color: var(--border-2); }

.chvr-account__empty { text-align: center; padding: 32px 16px; color: var(--text-2); }
.chvr-account__empty p { margin-bottom: 16px; }

/* ========================================
   SUBMISSION FORM ([chvr_submit_game])
   ======================================== */
.chvr-submit-form {
	max-width: 760px;
	margin: 32px auto 64px;
}
.chvr-submit-form__form {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.chvr-submit-form__section-title {
	font-family: var(--font-display);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--volt);
	margin: 16px 0 4px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.chvr-submit-form__section-title:first-child { padding-top: 0; border-top: none; margin-top: 0; }
.chvr-submit-form__form label { display: flex; flex-direction: column; gap: 6px; }
.chvr-submit-form__form label > span {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-2);
}
.chvr-submit-form__form label > span small {
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-3);
	margin-left: 6px;
	font-size: 10.5px;
}
.chvr-submit-form__form label small {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-3);
	margin-top: 4px;
}
.chvr-submit-form__form input[type=text],
.chvr-submit-form__form input[type=url],
.chvr-submit-form__form textarea,
.chvr-submit-form__form select {
	background: var(--bg-1);
	border: 1px solid var(--border-2);
	color: var(--text-1);
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	outline: none;
	border-radius: 0;
}
.chvr-submit-form__form input[type=file] {
	background: var(--bg-1);
	border: 1px dashed var(--border-2);
	color: var(--text-2);
	padding: 12px;
	font-family: var(--font-mono);
	font-size: 12px;
}
.chvr-submit-form__form input:focus,
.chvr-submit-form__form textarea:focus,
.chvr-submit-form__form select:focus { border-color: var(--volt); }
.chvr-submit-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chvr-submit-form__checks {
	border: 1px solid var(--border);
	padding: 14px 16px;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.chvr-submit-form__checks legend {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-2);
	padding: 0 6px;
}
.chvr-submit-form__check {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 6px !important;
	padding: 4px 10px;
	background: var(--bg-1);
	border: 1px solid var(--border);
	cursor: pointer;
	font-size: 12.5px;
	color: var(--text-2);
}
.chvr-submit-form__check input { accent-color: var(--volt); }
.chvr-submit-form__check span { font-family: var(--font-body) !important; font-size: 12.5px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-2) !important; }
.chvr-submit-form__actions { padding-top: 24px; border-top: 1px solid var(--border); margin-top: 12px; }
.chvr-submit-form__legal { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 16px 0 0; max-width: 600px; }
.chvr-submit-form__error,
.chvr-submit-form__success {
	padding: 14px 18px;
	font-size: 13.5px;
	margin-bottom: 16px;
	border-left: 2px solid;
}
.chvr-submit-form__error   { background: rgba(255,48,129,0.08); border-color: var(--magenta); color: var(--text-1); }
.chvr-submit-form__success { background: color-mix(in srgb, var(--volt) 8%, transparent); border-color: var(--volt); color: var(--text-1); }
.chvr-submit-form__locked {
	max-width: 520px;
	margin: 64px auto;
	text-align: center;
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 48px 32px;
}
.chvr-submit-form__locked h2 { font-family: var(--font-display); font-size: 24px; margin: 0 0 12px; }
.chvr-submit-form__locked p { color: var(--text-2); font-size: 14px; margin: 0 0 24px; }
.chvr-submit-form__locked-actions { display: flex; gap: 10px; justify-content: center; }

@media (max-width: 720px) {
	.chvr-account { grid-template-columns: 1fr; gap: 16px; }
	.chvr-account__nav { position: relative; top: 0; }
	.chvr-account__nav nav { flex-direction: row; overflow-x: auto; gap: 0; }
	.chvr-account__nav nav a { flex-shrink: 0; }
	.chvr-account__form-row { grid-template-columns: 1fr; }
	.chvr-submit-form__row { grid-template-columns: 1fr; }
	.chvr-submit-form__form { padding: 24px; }
	.chvr-auth-form { padding: 28px 20px; margin: 24px auto; }
}

/* ========================================
   GAMES GRID SHORTCODE
   - [chvr_games_grid] container — auto-responsive multi-column grid
   ======================================== */
.chvr-games-grid {
	display: grid;
	gap: 18px;
	margin: 24px 0 40px;
}
.chvr-games-grid--cols-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.chvr-games-grid--cols-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.chvr-games-grid--cols-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.chvr-games-grid--cols-5 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.chvr-games-grid__heading {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.4px;
	margin: 0 0 16px;
	text-transform: uppercase;
}
.chvr-game-card--fallback {
	display: block;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: inherit;
}
.chvr-game-card--fallback .chvr-game-card__thumb {
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
	background-color: var(--bg-3);
}
.chvr-game-card--fallback .chvr-game-card__body {
	padding: 12px 14px;
}
.chvr-game-card--fallback .chvr-game-card__title {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

/* ========================================
   REVIEWS & RATINGS
   - Star input on comment form
   - Aggregate stars on game pages
   - Review list with helpful voting + dev reply styling
   ======================================== */

/* Star input (interactive, CSS-only radio group, right-to-left fill on hover) */
.chvr-rating-input {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 4px;
	margin-left: 8px;
}
.chvr-rating-input input {
	display: none;
}
.chvr-rating-input label {
	color: var(--border-2);
	font-size: 24px;
	cursor: pointer;
	transition: color 0.1s;
}
.chvr-rating-input label:hover,
.chvr-rating-input label:hover ~ label,
.chvr-rating-input input:checked ~ label {
	color: var(--amber);
}

/* Read-only star display */
.chvr-stars { display: inline-flex; gap: 2px; }
.chvr-star { font-size: 14px; line-height: 1; }
.chvr-star--full  { color: var(--amber); }
.chvr-star--half  { color: var(--amber); opacity: 0.5; }
.chvr-star--empty { color: var(--border-2); }

/* Review form container */
.chvr-review-form {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 24px;
	margin: 24px 0 32px;
}
.chvr-review-form__locked {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 24px;
	text-align: center;
}
.chvr-review-form__locked p {
	color: var(--text-2);
	margin: 0 0 16px;
}
.chvr-review-form #commentform label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 6px;
}
.chvr-review-form #commentform textarea,
.chvr-review-form #commentform input[type=text],
.chvr-review-form #commentform input[type=email],
.chvr-review-form #commentform input[type=url] {
	width: 100%;
	background: var(--bg-1);
	border: 1px solid var(--border-2);
	color: var(--text-1);
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	outline: none;
}
.chvr-review-form #commentform textarea:focus,
.chvr-review-form #commentform input:focus { border-color: var(--volt); }
.chvr-review-form__rating { display: flex; align-items: center; margin-bottom: 16px; }

/* Reviews list */
.chvr-reviews { margin-top: 40px; }
.chvr-reviews__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}
.chvr-reviews__average { display: flex; flex-direction: column; gap: 4px; }
.chvr-reviews__average-num {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -1px;
}
.chvr-reviews__average-stars .chvr-star { font-size: 18px; }
.chvr-reviews__average-count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-3);
	letter-spacing: 0.5px;
}
.chvr-reviews__sort { display: flex; gap: 10px; align-items: center; }
.chvr-reviews__sort label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-3);
}
.chvr-reviews__sort select {
	background: var(--bg-1);
	border: 1px solid var(--border-2);
	color: var(--text-1);
	padding: 6px 10px;
	font-family: var(--font-mono);
	font-size: 12px;
}
.chvr-reviews__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; }

.chvr-review {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 20px 24px;
	transition: border-color 0.15s;
}
.chvr-review:hover { border-color: var(--border-2); }
.chvr-review--dev { border-left: 3px solid var(--volt); }
.chvr-review__head { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.chvr-review__avatar { border-radius: 50%; flex-shrink: 0; }
.chvr-review__author {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-1);
	display: flex;
	align-items: center;
	gap: 8px;
}
.chvr-review__dev-badge {
	background: var(--volt);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 2px 6px;
}
.chvr-review__meta {
	display: flex;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-3);
	margin-top: 2px;
	align-items: center;
}
.chvr-review__body { font-size: 14.5px; line-height: 1.6; color: var(--text-1); }
.chvr-review__body p { margin: 0 0 0.7em; }
.chvr-review__footer { margin-top: 12px; display: flex; gap: 16px; align-items: center; }
.chvr-review__helpful {
	background: transparent;
	border: 1px solid var(--border-2);
	color: var(--text-2);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.6px;
	padding: 5px 12px;
	cursor: pointer;
	transition: all 0.15s;
}
.chvr-review__helpful:hover { border-color: var(--volt); color: var(--volt); }
.chvr-review__helpful.is-voted,
.chvr-review__helpful:disabled {
	color: var(--volt);
	border-color: var(--volt);
	background: color-mix(in srgb, var(--volt) 8%, transparent);
	cursor: default;
}
.chvr-review__helpful-count { opacity: 0.8; margin-left: 4px; }

/* Replies under a review */
.chvr-review__replies {
	list-style: none;
	padding: 0;
	margin: 20px 0 0 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-left: 1px solid var(--border);
	padding-left: 20px;
}
.chvr-review-reply {
	background: var(--bg-1);
	padding: 14px 18px;
	border: 1px solid var(--border);
}
.chvr-review-reply--dev {
	border-left: 3px solid var(--cyan);
	background: rgba(41, 241, 255, 0.04);
}
.chvr-review-reply .chvr-review__dev-badge { background: var(--cyan); }
.chvr-review-reply .chvr-review__avatar { width: 32px; height: 32px; }

@media (max-width: 720px) {
	.chvr-reviews__header { flex-direction: column; align-items: flex-start; }
	.chvr-reviews__average-num { font-size: 36px; }
	.chvr-review { padding: 16px; }
	.chvr-review__replies { margin-left: 0; padding-left: 14px; }
}

/* ========================================
   DEVELOPER ACCOUNTS
   - chvr-auth-form--wide : wider variant of auth form for dev signup
   - chvr-dev-dashboard   : private dev dashboard with stats + games list
   - chvr-dev-profile     : public dev profile page at /dev/{slug}
   - chvr-dev-heading     : the eyebrow + tagline for dev signup
   ======================================== */

.chvr-auth-form--wide { max-width: 640px; }
.chvr-auth-form .chvr-auth-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chvr-auth-form .chvr-auth-form__row label { gap: 6px; }

.chvr-dev-heading {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin: 0 0 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	line-height: 1.2;
}
.chvr-dev-heading .chvr-tag {
	align-self: flex-start;
	font-size: 10px;
	letter-spacing: 1.2px;
}
.chvr-dev-subhead {
	color: var(--text-2);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 0 0 24px;
}

.chvr-dev-verified {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	color: var(--volt);
	background: color-mix(in srgb, var(--volt) 10%, transparent);
	border: 1px solid var(--volt);
	padding: 2px 8px;
	margin-left: 8px;
}
.chvr-dev-pending {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	color: var(--amber);
	background: rgba(255, 184, 0, 0.08);
	border: 1px solid var(--amber);
	padding: 2px 8px;
	margin-left: 8px;
}

/* Dev dashboard layout */
.chvr-dev-dashboard {
	max-width: 1080px;
	margin: 32px auto 64px;
}
.chvr-dev-dashboard__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}
.chvr-dev-dashboard__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: var(--text-3);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.chvr-dev-dashboard__title {
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 0 0 6px;
}
.chvr-dev-dashboard__url {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--cyan);
	letter-spacing: 0.5px;
}
.chvr-dev-dashboard__url:hover { color: var(--volt); }
.chvr-dev-dashboard__actions { display: flex; gap: 10px; }
.chvr-dev-dashboard__section-h {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.3px;
	margin: 40px 0 16px;
	text-transform: uppercase;
}

/* Dev stats grid: 4 cells using existing chvr-stat-cell styling */
.chvr-dev-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	margin-bottom: 8px;
}
.chvr-dev-stats .chvr-stat-cell {
	background: var(--bg-2);
	padding: 20px 24px;
}
.chvr-dev-stats .chvr-stat-cell__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 6px;
}
.chvr-dev-stats .chvr-stat-cell__value {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--text-1);
}

/* Game list in dev dashboard */
.chvr-dev-games {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.chvr-dev-game-row {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 12px 16px;
	transition: border-color 0.15s, transform 0.15s;
}
.chvr-dev-game-row:hover { border-color: var(--volt); transform: translateX(2px); }
.chvr-dev-game-row .chvr-account__row-thumb { width: 48px; height: 48px; flex-shrink: 0; }
.chvr-dev-game-row__body { flex: 1; min-width: 0; }
.chvr-dev-game-row__title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
}
.chvr-dev-game-row__title a { color: var(--text-1); }
.chvr-dev-game-row__title a:hover { color: var(--volt); }
.chvr-dev-game-row__meta {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-3);
	display: flex;
	gap: 14px;
	align-items: center;
}

.chvr-btn-sm {
	padding: 6px 14px !important;
	font-size: 11px !important;
}

/* Public dev profile (/dev/{slug}) */
.chvr-dev-profile {
	max-width: 1080px;
	margin: 32px auto 64px;
}
.chvr-dev-profile__head {
	display: flex;
	gap: 24px;
	align-items: center;
	padding-bottom: 32px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--border);
}
.chvr-dev-profile__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 2px solid var(--volt);
	flex-shrink: 0;
}
.chvr-dev-profile__name {
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 0 0 4px;
}
.chvr-dev-profile__link {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--cyan);
	letter-spacing: 0.4px;
}
.chvr-dev-profile__link:hover { color: var(--volt); }
.chvr-dev-profile__bio {
	font-size: 15px;
	line-height: 1.65;
	color: var(--text-2);
	max-width: 700px;
	margin: 0 0 24px;
}
.chvr-dev-profile__stats {
	display: flex;
	gap: 32px;
	padding: 20px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	margin-bottom: 32px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-3);
	letter-spacing: 0.5px;
	flex-wrap: wrap;
}
.chvr-dev-profile__stats strong {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--text-1);
	font-weight: 700;
	margin-right: 4px;
	letter-spacing: -0.3px;
}
.chvr-dev-profile__section-h {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.4px;
	margin: 0 0 20px;
}
.chvr-accent { color: var(--volt); }

/* ========================================
   /developers/ page — grid of developer cards
   ======================================== */
.chvr-devs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	margin: 32px 0 64px;
}
.chvr-dev-card {
	background: var(--bg-2);
	border: 1px solid var(--border);
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	color: var(--text-1);
	transition: all 0.2s var(--ease-out);
}
.chvr-dev-card:hover { border-color: var(--volt); transform: translateY(-3px); color: var(--text-1); }
.chvr-dev-card__avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid var(--border);
	transition: border-color 0.15s;
}
.chvr-dev-card:hover .chvr-dev-card__avatar { border-color: var(--volt); }
.chvr-dev-card__name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.2px;
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.chvr-dev-card__verified {
	color: var(--volt);
	font-size: 12px;
}
.chvr-dev-card__count {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.8px;
	color: var(--text-3);
	text-transform: uppercase;
}

/* ========================================
   /streamers/ page — grid of live stream cards
   ======================================== */
.chvr-streamers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin: 32px 0 64px;
}
.chvr-streamer-card {
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: inherit;
	transition: all 0.2s var(--ease-out);
	overflow: hidden;
}
.chvr-streamer-card:hover { border-color: var(--magenta); transform: translateY(-2px); color: inherit; }
.chvr-streamer-card__thumb {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: var(--bg-3);
	position: relative;
}
.chvr-streamer-card__live {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--magenta);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	padding: 3px 8px;
}
.chvr-streamer-card__viewers {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 11px;
	padding: 3px 8px;
}
.chvr-streamer-card__body { padding: 14px 16px; }
.chvr-streamer-card__name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.2px;
	margin-bottom: 4px;
}
.chvr-streamer-card__title {
	font-size: 12.5px;
	color: var(--text-2);
	line-height: 1.4;
}

@media (max-width: 720px) {
	.chvr-auth-form .chvr-auth-form__row { grid-template-columns: 1fr; }
	.chvr-dev-stats { grid-template-columns: repeat(2, 1fr); }
	.chvr-dev-dashboard__title { font-size: 28px; }
	.chvr-dev-profile__name { font-size: 28px; }
	.chvr-dev-profile__head { flex-direction: column; text-align: center; }
	.chvr-dev-profile__stats { gap: 20px; }
}

/* ========================================
   BLOG POSTS, SINGLE POST, SEARCH, 404, PAGE
   Template-specific styles for the WordPress fallback templates.
   ======================================== */

/* Generic page (About, Privacy, Submit, Staff picks, Streamers, etc.) */
.chvr-page { padding: 48px 0; }

/* Page article fills the full container width (matching the homepage)
   instead of being constrained to a narrow text column. The container
   itself (.chvr-container) already caps at --container: 1320px, so
   we just let the article fill that naturally. */
.chvr-page__article { max-width: none; margin: 0; }

/* When the page contains bbPress, use a slightly tighter max-width to
   match bbPress's natural layout. */
.chvr-page__article:has(#bbpress-forums) { max-width: 1200px; margin: 0 auto; }
body.bbp-page .chvr-page__article,
body.forum-archive .chvr-page__article,
body.single-forum .chvr-page__article,
body.single-topic .chvr-page__article { max-width: 1200px; margin: 0 auto; }

.chvr-page__header { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.chvr-page__title {
	font-family: var(--font-display);
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 0;
}
.chvr-page__featured { margin-bottom: 32px; }
.chvr-page__featured img { width: 100%; height: auto; }
.chvr-page__content { font-size: 16px; line-height: 1.7; }
.chvr-page__content p { margin: 0 0 1em; }
.chvr-page__content h2 { font-family: var(--font-display); font-size: 28px; margin: 1.8em 0 0.6em; letter-spacing: -0.5px; }
.chvr-page__content h3 { font-family: var(--font-display); font-size: 20px; margin: 1.5em 0 0.5em; }
.chvr-page__content a { color: var(--volt); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--volt) 40%, transparent); }
.chvr-page__content a:hover { text-decoration-color: var(--volt); }
.chvr-page__content ul, .chvr-page__content ol { margin: 0 0 1em; padding-left: 24px; }
.chvr-page__content blockquote { border-left: 3px solid var(--volt); padding: 12px 20px; margin: 24px 0; background: var(--bg-2); color: var(--text-2); font-style: italic; }
.chvr-page__content code { background: var(--bg-3); padding: 2px 6px; font-family: var(--font-mono); font-size: 13px; }
.chvr-page__content pre { background: var(--bg-2); border: 1px solid var(--border); padding: 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; }
.chvr-page__content img { width: 100%; height: auto; margin: 24px 0; }

/* Single blog post */
.chvr-single-post { padding: 32px 0 48px; }
.chvr-single-post .chvr-breadcrumb { max-width: 820px; margin-left: auto; margin-right: auto; }
.chvr-post { max-width: 820px; margin: 0 auto; }
.chvr-post__header { margin-bottom: 32px; }
.chvr-post__categories { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.chvr-post__title {
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 0 0 16px;
	line-height: 1.15;
}
.chvr-post__meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); display: flex; gap: 10px; align-items: center; }
.chvr-post__featured { margin-bottom: 32px; }
.chvr-post__featured img { width: 100%; height: auto; }
.chvr-post__content { font-size: 16px; line-height: 1.75; color: var(--text-1); }
.chvr-post__content p { margin: 0 0 1.2em; }
.chvr-post__content h2 { font-family: var(--font-display); font-size: 26px; margin: 1.6em 0 0.5em; }
.chvr-post__content h3 { font-family: var(--font-display); font-size: 20px; margin: 1.4em 0 0.5em; }
.chvr-post__content a { color: var(--volt); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--volt) 40%, transparent); }
.chvr-post__content a:hover { text-decoration-color: var(--volt); }
.chvr-post__content img { width: 100%; height: auto; margin: 24px 0; }
.chvr-post__content blockquote { border-left: 3px solid var(--volt); padding: 12px 20px; margin: 24px 0; background: var(--bg-2); color: var(--text-2); font-style: italic; }
.chvr-post__nav {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	margin: 48px 0 32px;
}
.chvr-post__nav a {
	background: var(--bg-2);
	padding: 20px;
	display: flex; flex-direction: column; gap: 6px;
	transition: background 0.15s;
}
.chvr-post__nav a:hover { background: var(--bg-3); color: var(--volt); }
.chvr-post__nav-next { text-align: right; }
.chvr-post__nav-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; }
.chvr-post__nav-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.chvr-post__comments { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); }

/* Post listing grid (used by index.php) */
.chvr-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 48px;
}
.chvr-post-card {
	background: var(--bg-2);
	border: 1px solid var(--border);
	transition: all 0.2s var(--ease-out);
}
.chvr-post-card:hover { border-color: var(--volt); transform: translateY(-3px); }
.chvr-post-card__link { display: block; color: inherit; }
.chvr-post-card__link:hover { color: inherit; }
.chvr-post-card__thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3); }
.chvr-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.chvr-post-card__body { padding: 16px 18px 20px; }
.chvr-post-card__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-bottom: 8px; letter-spacing: 0.3px; }
.chvr-post-card__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: -0.3px;
	line-height: 1.25;
}
.chvr-post-card__excerpt { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* Pagination */
.chvr-pagination { display: flex; justify-content: center; gap: 6px; margin: 32px 0 64px; flex-wrap: wrap; }
.chvr-pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.chvr-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px;
	padding: 0 14px;
	background: var(--bg-2);
	border: 1px solid var(--border);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
	transition: all 0.15s;
}
.chvr-pagination .page-numbers:hover { border-color: var(--volt); color: var(--volt); }
.chvr-pagination .page-numbers.current { background: var(--volt); color: var(--ink); border-color: var(--volt); }
.chvr-pagination .dots { background: transparent; border: none; }

/* Search results */
.chvr-search { padding: 32px 0 48px; }
.chvr-search-results { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.chvr-search-result {
	background: var(--bg-2);
	border: 1px solid var(--border);
	transition: border-color 0.15s;
}
.chvr-search-result:hover { border-color: var(--volt); }
.chvr-search-result__link { display: flex; gap: 16px; padding: 16px; color: inherit; }
.chvr-search-result__link:hover { color: inherit; }
.chvr-search-result__thumb { width: 88px; height: 88px; flex-shrink: 0; overflow: hidden; background: var(--bg-3); }
.chvr-search-result__thumb img { width: 100%; height: 100%; object-fit: cover; }
.chvr-search-result__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chvr-search-result__type {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 1.2px;
	color: var(--volt);
	font-weight: 600;
}
.chvr-search-result__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.3px;
}
.chvr-search-result__excerpt { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* 404 */
.chvr-404 { padding: 80px 0; min-height: 60vh; display: flex; align-items: center; }
.chvr-404__inner { max-width: 600px; margin: 0 auto; text-align: center; }
.chvr-404__code {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--magenta);
	letter-spacing: 3px;
	margin-bottom: 24px;
	font-weight: 600;
}
.chvr-404__title {
	font-family: var(--font-display);
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -2px;
	margin: 0 0 16px;
	background: linear-gradient(180deg, var(--text-1) 0%, var(--text-2) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.chvr-404__msg { color: var(--text-2); font-size: 16px; line-height: 1.6; margin: 0 0 32px; }
.chvr-404__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.chvr-404__search {
	display: flex; gap: 0;
	max-width: 480px;
	margin: 0 auto;
	background: var(--bg-2);
	border: 1px solid var(--border);
}
.chvr-404__search input {
	flex: 1;
	background: transparent;
	border: none;
	padding: 14px 18px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text-1);
	outline: none;
}
.chvr-404__search input::placeholder { color: var(--text-3); }

@media (max-width: 720px) {
	.chvr-posts-grid { grid-template-columns: 1fr; gap: 14px; }
	.chvr-post__title { font-size: 28px; }
	.chvr-page__title { font-size: 32px; }
	.chvr-post__nav { grid-template-columns: 1fr; }
	.chvr-post__nav-next { text-align: left; }
	.chvr-search-result__link { flex-direction: column; }
	.chvr-search-result__thumb { width: 100%; height: 160px; }
	.chvr-404__title { font-size: 44px; }
	.chvr-404__actions { flex-direction: column; }
	.chvr-404__actions .chvr-btn-primary,
	.chvr-404__actions .chvr-btn-secondary { width: 100%; justify-content: center; }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1100px) {
	.chvr-hero { grid-template-columns: 1fr; padding: 40px 32px 32px; }
	.chvr-games-grid { grid-template-columns: repeat(3, 1fr); }
	.chvr-bento { grid-template-columns: 1fr 1fr; }
	.chvr-bento__discord { grid-row: auto; grid-column: 1 / 3; }
	.chvr-single-game__top { grid-template-columns: 1fr; }
	.chvr-single-game__panel { position: relative; top: 0; }
	.chvr-hero__title { font-size: 36px; }
}

@media (max-width: 720px) {
	.chvr-container { padding: 0 20px; }
	.chvr-topbar__inner { padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
	.chvr-search { flex-basis: 100%; order: 10; max-width: none; }
	.chvr-search__kbd { display: none; }
	/* Mobile: collapse the menu behind the hamburger toggle */
	.chvr-subnav__inner { padding: 0 20px; display: block; }
	.chvr-menu-toggle { display: inline-flex; }
	.chvr-subnav__menu {
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 8px 0 16px;
	}
	.chvr-subnav__menu.is-open { display: flex; }
	.chvr-subnav .chvr-nav { flex-direction: column; align-items: stretch; width: 100%; }
	.chvr-subnav .chvr-nav li { width: 100%; }
	.chvr-subnav .chvr-nav a { padding: 12px 4px; width: 100%; font-size: 15px; }
	.chvr-nav-cta { display: inline-flex; margin: 8px 4px 0; width: max-content; }
	.chvr-hero { padding: 24px 20px; }
	.chvr-hero__title { font-size: 28px; }
	.chvr-hero__body { padding: 20px; }
	.chvr-games-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.chvr-stats-strip { grid-template-columns: repeat(2, 1fr); margin-bottom: 32px; }
	.chvr-stat-cell__value { font-size: 28px; }
	.chvr-bento { grid-template-columns: 1fr; min-height: 0; }
	.chvr-bento__discord { grid-column: 1; }
	.chvr-bento__h { font-size: 24px; }
	.chvr-dev-cta { grid-template-columns: 1fr; padding: 32px 24px; }
	.chvr-dev-cta__h { font-size: 26px; }
	.chvr-section-title { font-size: 22px; }
	.chvr-section-link { font-size: 11px; }
	.chvr-archive__title { font-size: 28px; }
	.chvr-filter-bar { gap: 6px; }
	.chvr-chip-filter { padding: 6px 12px; font-size: 11px; }
	.chvr-filter-bar__sort { margin-left: 0; flex-basis: 100%; margin-top: 8px; }
	.chvr-single-game__title { font-size: 26px; }
	.chvr-single-game__stats { grid-template-columns: repeat(3, 1fr); }
	.chvr-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.chvr-card__title { font-size: 14px; }
	.chvr-card__body { padding: 12px; }
}

@media (max-width: 420px) {
	.chvr-games-grid { grid-template-columns: 1fr; }
	.chvr-stats-strip { grid-template-columns: 1fr; }
}

/* ========================================
   ACCESSIBILITY & REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.chvr-live-dot::after, .chvr-ticker__track { animation: none; }
}

*:focus-visible {
	outline: 2px solid var(--volt);
	outline-offset: 2px;
}

/* ========================================
   LIGHTBOX
   Full-screen image preview for posters and gallery screenshots.
   Built lazily via initLightbox() — DOM only exists after first open.
   Backdrop click / Esc / X button to close, arrow keys + swipe to navigate.
   ======================================== */
.chvr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.chvr-lightbox.is-open { display: flex; }

.chvr-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: var(--bg-glass-strong);
	backdrop-filter: blur(8px);
	animation: chvr-lightbox-fade 0.2s var(--ease-out);
	cursor: zoom-out;
}
@keyframes chvr-lightbox-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.chvr-lightbox__figure {
	position: relative;
	z-index: 1;
	max-width: min(92vw, 1400px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	animation: chvr-lightbox-rise 0.25s var(--ease-out);
}
@keyframes chvr-lightbox-rise {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

.chvr-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	transition: opacity 0.2s;
}

.chvr-lightbox__caption {
	color: var(--text-2);
	font-size: 13px;
	font-family: var(--font-mono);
	letter-spacing: 0.5px;
	text-align: center;
	max-width: 720px;
	margin: 0;
	text-transform: uppercase;
}

.chvr-lightbox__counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	background: var(--bg-glass-strong);
	border: 1px solid var(--border-2);
	color: var(--text-1);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	padding: 6px 12px;
}

.chvr-lightbox__close {
	position: absolute;
	top: 18px; right: 18px;
	z-index: 2;
	width: 44px; height: 44px;
	background: var(--bg-glass-strong);
	border: 1px solid var(--border-2);
	color: var(--text-1);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.15s;
}
.chvr-lightbox__close:hover {
	background: var(--magenta);
	color: var(--ink);
	border-color: var(--magenta);
}

.chvr-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 56px; height: 56px;
	background: var(--bg-glass-strong);
	border: 1px solid var(--border-2);
	color: var(--text-1);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.15s;
	font-family: var(--font-display);
	display: flex; align-items: center; justify-content: center;
}
.chvr-lightbox__nav:hover {
	background: var(--volt);
	color: var(--ink);
	border-color: var(--volt);
}
.chvr-lightbox__nav--prev { left: 24px; }
.chvr-lightbox__nav--next { right: 24px; }

.chvr-lightbox__spinner {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 40px; height: 40px;
	border: 3px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--volt);
	border-radius: 50%;
	animation: chvr-spin 0.8s linear infinite;
	display: none;
	pointer-events: none;
}
.chvr-lightbox__figure.is-loading .chvr-lightbox__spinner { display: block; }
@keyframes chvr-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Prevent body scroll when lightbox is open */
body.chvr-lightbox-open {
	overflow: hidden;
}

@media (max-width: 720px) {
	.chvr-lightbox { padding: 12px; }
	.chvr-lightbox__close { width: 40px; height: 40px; font-size: 24px; top: 12px; right: 12px; }
	.chvr-lightbox__nav { width: 42px; height: 42px; font-size: 24px; }
	.chvr-lightbox__nav--prev { left: 10px; }
	.chvr-lightbox__nav--next { right: 10px; }
	.chvr-lightbox__image { max-height: 70vh; }
	.chvr-lightbox__caption { font-size: 11px; }
}

/* ========================================
   FORUM ACTIVITY (homepage section, between bento and new releases)
   Renders only when bbPress is active and has topics. Visually like a
   condensed forum index — bold titles, monospace meta, hover state.
   ======================================== */
.chvr-forum-activity {
	margin: 24px 0;
}
.chvr-forum-activity__list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--bg-2);
	border: 1px solid var(--border);
}
.chvr-forum-activity__item {
	border-bottom: 1px solid var(--border);
}
.chvr-forum-activity__item:last-child {
	border-bottom: 0;
}
.chvr-forum-activity__link,
.chvr-forum-activity__link:hover,
.chvr-forum-activity__link:focus,
.chvr-forum-activity__link:visited,
.chvr-page__content .chvr-forum-activity__link,
.chvr-page__content .chvr-forum-activity__link:hover {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
	padding: 16px 22px;
	text-decoration: none !important;
	background-image: none !important;
	color: inherit !important;
	transition: background 0.12s;
}
.chvr-forum-activity__link *,
.chvr-page__content .chvr-forum-activity__link * {
	text-decoration: none !important;
	background-image: none !important;
}
.chvr-forum-activity__link:hover {
	background: var(--bg-3);
}
.chvr-forum-activity__main {
	min-width: 0;
}
.chvr-forum-activity__title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--text-1);
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.12s;
}
.chvr-forum-activity__link:hover .chvr-forum-activity__title {
	color: var(--magenta);
}
.chvr-forum-activity__meta {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-3);
	letter-spacing: 0.3px;
}
.chvr-forum-activity__forum {
	color: var(--cyan);
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 1px;
}
.chvr-forum-activity__author strong {
	color: var(--text-2);
	font-weight: 600;
}
.chvr-forum-activity__sep {
	color: var(--border-2);
	margin: 0 6px;
}
.chvr-forum-activity__count {
	text-align: right;
	flex-shrink: 0;
	min-width: 70px;
}
.chvr-forum-activity__count-value {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--text-1);
	line-height: 1;
}
.chvr-forum-activity__count-label {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-3);
}

@media (max-width: 720px) {
	.chvr-forum-activity__link {
		grid-template-columns: 1fr auto;
		gap: 12px;
		padding: 12px 14px;
	}
	.chvr-forum-activity__title { font-size: 13.5px; white-space: normal; }
	.chvr-forum-activity__meta { font-size: 10.5px; }
	.chvr-forum-activity__count-value { font-size: 18px; }
	.chvr-forum-activity__count { min-width: 50px; }
}