/* ==========================================================================
   BoostingNation — Design System
   Original dark gaming-marketplace visual language. Palette/typography per
   the approved design direction — see project CLAUDE.md.
   ========================================================================== */

/* Self-hosted (no Google Fonts request at runtime), latin subset only.
   Manrope is the variable release, so one file covers the whole 200-800
   weight axis.
   font-display:block (not swap, not optional): swap always paints the
   fallback font first and visibly jumps to the real one whenever it
   arrives — Arial-then-Archivo-Black on the hero headline is a jarring
   reflow, exactly the flash this project doesn't want. optional avoids
   that flash too, but can give up on the real font entirely for a whole
   pageview if it's not ready within ~100ms, which reads as "the branding
   font is just gone." block keeps text briefly invisible (not wrong-font)
   while these preloaded, ~20-30KB files finish loading, then always shows
   the correct font — no visible flash, and never silently falls back. */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: block;
	src: url('../fonts/manrope-latin.woff2') format('woff2');
}

/* Display face for headlines — the reference design's impact comes almost
   entirely from a heavy display type, which Manrope alone can't carry. */
@font-face {
	font-family: 'Archivo Black';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('../fonts/archivo-black-latin.woff2') format('woff2');
}

/* Brush/marker face for the hero's accent line only. */
@font-face {
	font-family: 'Permanent Marker';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('../fonts/permanent-marker-latin.woff2') format('woff2');
}

:root {
	--bn-bg: #08080D;
	--bn-bg-alt: #11111A;
	--bn-card: #181824;
	--bn-border: rgba(255, 255, 255, 0.10);
	--bn-text: #F7F7FA;
	--bn-text-muted: #A7A7B5;
	--bn-accent: #6D35FF;
	--bn-accent-bright: #8B5CFF;
	--bn-accent-deep: #3E1C9C;
	--bn-blue: #3D7CFF;
	--bn-cyan: #38C7FF;
	--bn-online: #35D07F;
	--bn-gold: #F3C969;
	--bn-discord: #5865F2;
	--bn-gradient: linear-gradient(135deg, var(--bn-blue) 0%, var(--bn-accent) 52%, var(--bn-accent-bright) 100%);

	--bn-font: 'Manrope', Arial, Helvetica, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--bn-font-display: 'Archivo Black', 'Manrope', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	--bn-font-brush: 'Permanent Marker', 'Archivo Black', Impact, sans-serif;
	--bn-radius: 14px;
	--bn-radius-sm: 8px;
	/* min(), not a fixed px value: scales with the viewport up to 1600px so
	   a large gaming monitor actually gets used instead of two huge empty
	   gutters, but still caps out at a sane reading width on an ultrawide
	   or 4K display instead of stretching into absurdly long lines. Every
	   section shares this one variable — no more per-section width
	   overrides (header/hero used to each set their own, which is exactly
	   what made the site look inconsistently wide from section to section). */
	--bn-container: min(94vw, 1600px);
	--bn-space: 1rem;
}

/* ---- Reset ------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
}

body {
	margin: 0;
	background:
		radial-gradient(circle at 12% -8%, rgba(61, 124, 255, 0.16), transparent 42%),
		radial-gradient(circle at 88% 15%, rgba(109, 53, 255, 0.14), transparent 40%),
		radial-gradient(circle at 50% 100%, rgba(109, 53, 255, 0.12), transparent 45%),
		var(--bn-bg);
	background-attachment: fixed;
	color: var(--bn-text);
	font-family: var(--bn-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Section headings use the display face; h3/h4 stay on Manrope since
   Archivo Black at small sizes reads as heavy noise rather than hierarchy. */
h1, h2 {
	font-family: var(--bn-font-display);
	font-weight: 400;
}

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

h1, h2 {
	font-weight: 400;
	letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem); }
h3 { font-size: 1.25rem; }

p {
	margin: 0 0 1em;
	color: var(--bn-text-muted);
}

button {
	font-family: inherit;
}

/* ---- Focus states (keyboard accessibility) ----------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--bn-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Layout helpers ----------------------------------------------------- */

.bn-container {
	max-width: var(--bn-container);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.bn-section {
	padding: clamp(2.5rem, 5vw, 5rem) 0;
}

.bn-section--alt {
	background: var(--bn-bg-alt);
}

.bn-section-head {
	margin-bottom: 2rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.bn-section-head p {
	margin: 0.25rem 0 0;
}

.bn-hot-right-now-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.bn-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bn-cyan);
	margin-bottom: 0.5rem;
}

/* ---- Buttons ------------------------------------------------------------ */

.bn-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.4rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}

.bn-btn--lg {
	padding: 1rem 2rem;
	font-size: 1.05rem;
}

.bn-btn-arrow {
	display: inline-flex;
	align-items: center;
	transition: transform 0.15s ease;
}

.bn-btn:hover .bn-btn-arrow,
.bn-btn:focus-visible .bn-btn-arrow {
	transform: translateX(3px);
}

.bn-btn:hover {
	transform: translateY(-1px);
}

.bn-btn--primary {
	background: var(--bn-gradient);
	color: #fff;
	box-shadow: 0 8px 24px -8px rgba(109, 53, 255, 0.6);
}

.bn-btn--secondary {
	background: transparent;
	border-color: var(--bn-border);
	color: var(--bn-text);
}

.bn-btn--secondary:hover {
	border-color: var(--bn-accent-bright);
}

.bn-btn--whatsapp {
	background: var(--bn-online);
	color: #06120c;
}

.bn-btn--discord {
	background: var(--bn-bg-alt);
	border: 1px solid var(--bn-border);
	color: var(--bn-text);
}

/*
 * Filled Discord-brand button — used specifically in the order modal so
 * the Discord option reads with the same visual confidence/weight as the
 * filled-green WhatsApp option next to it, instead of looking like a
 * secondary/lesser choice. .bn-btn--discord (outlined) stays as-is for
 * other lower-emphasis Discord links (header, footer, etc.).
 */
.bn-btn--discord-brand {
	background: var(--bn-discord);
	color: #fff;
}

.bn-btn--block {
	width: 100%;
	justify-content: center;
}

/* ---- Header -------------------------------------------------------------- */

.bn-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background:
		radial-gradient(circle at 15% 0%, rgba(61, 124, 255, 0.16), transparent 55%),
		radial-gradient(circle at 85% 100%, rgba(109, 53, 255, 0.14), transparent 55%),
		rgba(17, 17, 26, 0.9);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bn-border);
	box-shadow: 0 1px 24px -8px rgba(109, 53, 255, 0.35);
}

.bn-header-inner {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: 2rem;
	padding: 0.85rem 0;
}

/* The header's content otherwise sits inside the site's normal 1200px
   reading-width container, so on a large/big monitor the logo and nav/
   actions all bunch in a small centered block with huge empty margins on
   both sides. Reverted to the standard 1200px cap (was widened to 1800px
   earlier per an explicit request) — on an actual large monitor it made
   the header visibly wider than every other section on the site, which
   read as a layout bug rather than an intentional edge-to-edge header. */

.bn-primary-nav {
	display: flex;
}

/* Covers the header logo and the mobile menu's text-only variant, which
   has no .bn-logo-name wrapper of its own. */
.bn-logo {
	font-family: var(--bn-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.bn-logo img {
	max-height: 44px;
	width: auto;
}

.bn-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.bn-logo-name {
	font-family: var(--bn-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--bn-text);
}

.bn-logo-name-accent {
	background: var(--bn-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Back to the body face — the display font's heavy forms turn to mush at
   this size with wide letter-spacing. */
.bn-logo-tagline {
	font-family: var(--bn-font);
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bn-text-muted);
}

.bn-nav-list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.bn-nav-list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bn-text-muted);
	padding: 0.35rem 0;
	transition: color 0.15s ease;
}

/* Per-item icons replaced the old diamond bullet when the nav was rebuilt
   to match the reference design — the icon now carries that role, so the
   ::before diamond would just double up. */
.bn-nav-list a::before {
	content: none;
}

.bn-nav-icon {
	display: inline-flex;
	align-items: center;
	margin-right: 0.45rem;
	color: var(--bn-text-muted);
	transition: color 0.15s ease;
}

.bn-nav-list a:hover .bn-nav-icon,
.bn-nav-list a:focus-visible .bn-nav-icon,
.bn-nav-list a.is-active .bn-nav-icon,
.bn-nav-list .current-menu-item > a .bn-nav-icon,
.bn-nav-list .current_page_item > a .bn-nav-icon {
	color: var(--bn-accent-bright);
}

.bn-nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: var(--bn-gradient);
	transition: right 0.25s ease;
}

.bn-nav-list a:hover,
.bn-nav-list a:focus-visible,
.bn-nav-list .current-menu-item > a,
.bn-nav-list .current_page_item > a,
.bn-nav-list a.is-active {
	color: var(--bn-text);
}

.bn-nav-list a:hover::before,
.bn-nav-list a:focus-visible::before,
.bn-nav-list .current-menu-item > a::before,
.bn-nav-list .current_page_item > a::before,
.bn-nav-list a.is-active::before {
	opacity: 1;
}

.bn-nav-list a:hover::after,
.bn-nav-list a:focus-visible::after,
.bn-nav-list .current-menu-item > a::after,
.bn-nav-list .current_page_item > a::after,
.bn-nav-list a.is-active::after {
	right: 0;
}

.bn-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
}

.bn-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--bn-text-muted);
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--bn-border);
	border-radius: 999px;
}

.bn-status-pill-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.bn-status-pill-text strong {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--bn-text);
}

.bn-status-pill-text small {
	font-size: 0.63rem;
	color: var(--bn-text-muted);
}

.bn-status-pill .bn-dot {
	color: var(--bn-online);
}

.bn-header-account {
	position: relative;
	font-size: 0.85rem;
}

.bn-header-account-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.35rem 0.6rem;
	color: var(--bn-text);
	font-weight: 700;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.bn-header-account-trigger:hover,
.bn-header-account-trigger:focus-visible {
	border-color: var(--bn-border);
}

.bn-header-account-name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bn-header-account-chevron {
	display: inline-flex;
	transform: rotate(90deg);
	color: var(--bn-text-muted);
	transition: transform 0.15s ease;
}

.bn-header-account-trigger[aria-expanded="true"] .bn-header-account-chevron {
	transform: rotate(-90deg);
}

.bn-header-account-dropdown {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 140px;
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius-sm);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	padding: 0.4rem;
	z-index: 20;
}

.bn-header-account-dropdown[hidden] {
	display: none;
}

.bn-header-account-logout {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--bn-radius-sm);
	color: var(--bn-text-muted);
	transition: background 0.15s ease, color 0.15s ease;
}

.bn-header-account-logout:hover,
.bn-header-account-logout:focus-visible {
	background: var(--bn-bg-alt);
	color: var(--bn-text);
}

.bn-mobile-menu-account {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bn-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bn-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--bn-border);
	color: var(--bn-text);
	border-radius: var(--bn-radius-sm);
	padding: 0.4rem;
}

.bn-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bn-mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--bn-bg);
	padding: 1.25rem;
	overflow-y: auto;
}

.bn-mobile-menu.is-open {
	display: block;
}

.bn-mobile-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.bn-mobile-menu-close {
	background: none;
	border: 1px solid var(--bn-border);
	color: var(--bn-text);
	border-radius: var(--bn-radius-sm);
	padding: 0.4rem;
}

.bn-mobile-menu ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.bn-mobile-menu a {
	display: block;
	padding: 0.85rem 0.25rem;
	font-weight: 700;
	font-size: 1.1rem;
	border-bottom: 1px solid var(--bn-border);
}

body.bn-no-scroll {
	overflow: hidden;
}

/* ---- Carousel (shared: hero slideshow + featured games) ------------------- */

.bn-carousel {
	position: relative;
}

.bn-carousel-track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.25rem;
	scrollbar-width: none; /* Firefox */
}

.bn-carousel-track::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Edge */
}

.bn-carousel-track > * {
	scroll-snap-align: start;
	flex-shrink: 0;
}

.bn-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	color: var(--bn-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
}

.bn-carousel-nav:hover {
	border-color: var(--bn-accent-bright);
}

.bn-carousel-nav--prev {
	left: -14px;
}

.bn-carousel-nav--prev svg {
	transform: rotate(180deg);
}

.bn-carousel-nav--next {
	right: -14px;
}

.bn-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.bn-carousel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bn-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: width 0.15s ease, background 0.15s ease;
}

.bn-carousel-dot.is-active {
	background: var(--bn-accent-bright);
	width: 22px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bn-carousel-track {
		scroll-behavior: auto;
	}
}

/* ---- Hero ---------------------------------------------------------------- */

/* Deliberately NOT overflow:hidden — the search dropdown is positioned
   inside this section and extends past its bottom edge, and clipping here
   cut it in half. The background slides that used to need the clip do
   their own overflow:hidden on .bn-hero-bg instead. */
.bn-hero {
	position: relative;
	padding: clamp(1.25rem, 3.5vw, 2.25rem) 0 clamp(1.5rem, 3.5vw, 2.5rem);
	background-image:
		linear-gradient(180deg, rgba(8, 8, 13, 0.55) 0%, rgba(8, 8, 13, 0.82) 65%, var(--bn-bg) 100%),
		radial-gradient(circle at 50% 30%, rgba(109, 53, 255, 0.25), transparent 60%),
		var(--bn-hero-bg-image, none);
	background-size: cover;
	background-position: center;
}

/* The hero's own bottom padding + the next section's top padding were
   stacking to a very large gap before the featured games grid. Only the
   section immediately after the hero is tightened — every other
   section-to-section gap stays as designed. */
.bn-hero + section.bn-section {
	padding-top: clamp(1rem, 2.5vw, 2rem);
}

/* Reverted to the standard 1200px cap (was widened to 1480px earlier per
   an explicit request, same as the header above) — same reasoning: it
   made the hero wider than the rest of the page on a large monitor. */
.bn-hero .bn-container {
	padding-left: 2rem;
	padding-right: 2rem;
}

/* Two-column hero: copy left, visual right. min-width:0 on the copy column
   is required — grid items default to min-width:auto and the search bar's
   intrinsic min-content width would otherwise force the column (and the
   page) wider than the viewport on narrow screens. */
.bn-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.bn-hero-copy {
	min-width: 0;
}

.bn-hero-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	margin-bottom: 1.1rem;
}

.bn-hero-badge,
.bn-hero-badge-note {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bn-hero-badge {
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba(139, 92, 255, 0.45);
	border-radius: 999px;
	background: rgba(109, 53, 255, 0.16);
	color: var(--bn-text);
}

.bn-hero-badge svg,
.bn-hero-badge-note svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.bn-hero-badge-note {
	color: var(--bn-text-muted);
}

.bn-hero-badge-note svg {
	color: var(--bn-cyan);
}

.bn-hero-title {
	display: flex;
	flex-direction: column;
	gap: 0.12em;
	font-family: var(--bn-font-display);
	font-size: clamp(2.1rem, 4.6vw + 0.5rem, 4.15rem);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.bn-hero-title-top {
	color: var(--bn-text);
}

/* Left-to-right "typing" reveal via clip-path steps — chosen over
   splitting the text into per-character spans because clip-path leaves
   the actual text node untouched (nothing to break for screen readers)
   and doesn't interfere with the accent line's background-clip:text
   gradient the way wrapping individual letters would. Runs once on page
   load; the accent line's delay is timed to start as the top line
   finishes. Also happens to cover most of the font's font-display:block
   loading gap, so the reveal and the font swap-in land together instead
   of as two separate, unrelated pops. */
@media (prefers-reduced-motion: no-preference) {
	.bn-hero-title-top {
		clip-path: inset(0 100% 0 0);
		animation: bn-hero-title-reveal 0.7s steps(14, end) forwards;
	}

	.bn-hero-title-accent {
		clip-path: inset(0 100% 0 0);
		animation: bn-hero-title-reveal 0.6s steps(16, end) forwards;
		animation-delay: 0.65s;
	}
}

@keyframes bn-hero-title-reveal {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

/* Brush accent line, matching the reference's graffiti treatment. Sized up
   relative to the top line because the marker face runs visually smaller
   at the same font-size. */
.bn-hero-title-accent {
	font-family: var(--bn-font-brush);
	font-size: 1.06em;
	line-height: 1.05;
	background: linear-gradient(100deg, #FF4FD8 0%, var(--bn-accent-bright) 45%, var(--bn-cyan) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transform: skewX(-6deg);
	transform-origin: left center;
	padding-right: 0.12em;
}

.bn-hero-copy .bn-hero-subheading {
	margin-top: 1rem;
	font-size: 0.98rem;
	max-width: 54ch;
}

.bn-hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1.75rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.bn-hero-trust li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.bn-hero-trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 10px;
	border: 1px solid var(--bn-border);
	background: rgba(109, 53, 255, 0.14);
	color: var(--bn-accent-bright);
}

.bn-hero-trust-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.bn-hero-trust-text strong {
	font-size: 0.87rem;
	font-weight: 800;
}

.bn-hero-trust-text small {
	font-size: 0.74rem;
	color: var(--bn-text-muted);
}

/* Game chips row under the search bar. */
.bn-hero-chips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.6rem;
	margin-top: 1.1rem;
}

/* min-width:0 is load-bearing: as a grid item this defaults to
   min-width:auto, so the nowrap game title inside set an intrinsic minimum
   wider than the 1fr track and pushed the whole row past the viewport on
   phones (clipped silently by the page's overflow-x:hidden). With this the
   track wins and the title ellipsises instead. */
.bn-hero-chip {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 0.6rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--bn-border);
	border-radius: 12px;
	background: rgba(24, 24, 36, 0.72);
	transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.bn-hero-chip:hover,
.bn-hero-chip:focus-visible {
	border-color: rgba(139, 92, 255, 0.6);
	background: rgba(24, 24, 36, 0.95);
	transform: translateY(-2px);
}

.bn-hero-chip-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--bn-gradient);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.02em;
}

.bn-hero-chip-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bn-hero-chip-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.bn-hero-chip-text strong {
	font-size: 0.82rem;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bn-hero-chip-text small {
	font-size: 0.7rem;
	color: var(--bn-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Full-bleed background slideshow layer. Slides crossfade via opacity
   (hero-slideshow.js), so they stack in the same box rather than scrolling
   — the scroll-snap carousel used for card rows is the wrong mechanism for
   a background. */
.bn-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* Anchored right so cropping eats the empty dark left side rather than the
   subject, and anchored to the top because the hero is far wider than the
   16:9 source images — with "center" the vertical crop was taking equal
   bites off top and bottom, which decapitated the characters. Cropping
   from the bottom (legs/ground) instead keeps every head in frame. */
.bn-hero-bg-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: right top;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.bn-hero-bg-slide.is-active {
	opacity: 1;
}

/* Keeps the left-hand copy readable over any image: near-opaque on the
   left, clearing toward the right so the artwork still reads. Without this
   the headline sits on bare photo and washes out on bright frames — the
   same failure mode the offer cards hit. */
.bn-hero-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(100deg, rgba(8, 8, 13, 0.96) 0%, rgba(8, 8, 13, 0.88) 32%, rgba(8, 8, 13, 0.45) 62%, rgba(8, 8, 13, 0.25) 100%),
		linear-gradient(180deg, rgba(8, 8, 13, 0.55) 0%, transparent 30%, rgba(8, 8, 13, 0.9) 100%),
		radial-gradient(circle at 78% 30%, rgba(139, 92, 255, 0.3), transparent 58%);
}

/* Above the stats strip (z-index 2) that follows it, otherwise the search
   dropdown — which hangs below the hero — is painted under that strip,
   since equal z-index falls back to document order. */
.bn-hero-grid {
	z-index: 3;
}

/* Right column is now just open space over the background artwork, holding
   the graffiti tag — no contained panel. */
.bn-hero-visual {
	position: relative;
	min-width: 0;
	min-height: clamp(220px, 30vw, 420px);
}

.bn-hero-visual-tag {
	font-family: var(--bn-font-brush);
	position: absolute;
	right: 0;
	top: clamp(0.5rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1em;
	font-size: clamp(0.95rem, 1.5vw, 1.4rem);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	text-align: right;
	transform: skewX(-7deg);
	background: linear-gradient(100deg, #FF4FD8 0%, var(--bn-accent-bright) 60%, var(--bn-cyan) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.bn-hero-visual-tag em {
	font-style: italic;
}

.bn-hero-search-wrap {
	position: relative;
	margin-top: 1.5rem;
	width: 100%;
	min-width: 0;
}

.bn-hero-search-wrap .bn-hero-search {
	margin-top: 0;
}

.bn-hero-search-results {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 320px;
	overflow-y: auto;
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	box-shadow: 0 20px 45px -20px rgba(61, 124, 255, 0.45);
	padding: 0.5rem;
	/* The default light scrollbar reads as a bright stripe against this
	   dark panel; keep it visible (the list really does scroll) but themed. */
	scrollbar-width: thin;
	scrollbar-color: rgba(139, 92, 255, 0.5) transparent;
}

.bn-hero-search-results::-webkit-scrollbar {
	width: 8px;
}

.bn-hero-search-results::-webkit-scrollbar-track {
	background: transparent;
}

.bn-hero-search-results::-webkit-scrollbar-thumb {
	background: rgba(139, 92, 255, 0.5);
	border-radius: 999px;
}

/* These rows are <button> elements, so the UA's default button styling has
   to be reset explicitly — without it they render on the browser's light
   ButtonFace background with this near-white text (white on white) and
   shrink to their content width instead of filling the dropdown. */
.bn-hero-search-result {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.6rem 0.75rem;
	background: none;
	border: none;
	text-align: left;
	font-family: inherit;
	border-radius: var(--bn-radius-sm);
	cursor: pointer;
	color: var(--bn-text);
	font-weight: 600;
	font-size: 0.9rem;
}

.bn-hero-search-result:hover,
.bn-hero-search-result.is-active {
	background: rgba(109, 53, 255, 0.14);
}

.bn-hero-search-result-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bn-gradient);
	color: #fff;
	font-weight: 800;
	font-size: 0.85rem;
}

.bn-hero-search-result-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bn-hero-search-empty {
	padding: 0.75rem;
	color: var(--bn-text-muted);
	font-size: 0.85rem;
}

.bn-hero-search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	max-width: 100%;
	margin-top: 0;
	padding: 0.55rem 0.55rem 0.55rem 1.15rem;
	background: rgba(17, 17, 26, 0.92);
	border: 1px solid rgba(139, 92, 255, 0.35);
	border-radius: 999px;
	color: var(--bn-text-muted);
	box-shadow: 0 18px 40px -24px rgba(109, 53, 255, 0.75);
}

.bn-hero-search-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--bn-text-muted);
}

.bn-nav-caret {
	display: inline-flex;
	margin-left: 0.3rem;
	color: var(--bn-text-muted);
}

.bn-hero-search:focus-within {
	border-color: var(--bn-accent-bright);
}

.bn-hero-search-submit {
	flex-shrink: 0;
	white-space: nowrap;
}

.bn-hero-search-submit-icon {
	display: none;
}

.bn-hero-search input {
	flex: 1;
	background: none;
	border: none;
	color: var(--bn-text);
	font-family: inherit;
	font-size: 0.95rem;
	min-width: 0;
}

.bn-hero-search input:focus {
	outline: none;
}

.bn-hero-search input::placeholder {
	color: var(--bn-text-muted);
}

/* ---- Stats strip (directly under the hero) ------------------------------- */

.bn-stats-strip {
	position: relative;
	z-index: 2;
	background: rgba(17, 17, 26, 0.9);
	border-top: 1px solid var(--bn-border);
	border-bottom: 1px solid var(--bn-border);
	padding: 1rem 0;
}

.bn-stats-strip-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 2rem;
}

.bn-stats-strip-title {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	margin: 0;
	padding-left: 0.9rem;
	border-left: 3px solid var(--bn-accent-bright);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bn-text-muted);
	line-height: 1.4;
}

.bn-stats-strip-title strong {
	color: var(--bn-text);
	font-weight: 800;
}

.bn-stats-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bn-stats-list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.bn-stats-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(109, 53, 255, 0.16);
	border: 1px solid var(--bn-border);
	color: var(--bn-accent-bright);
}

.bn-stats-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.bn-stats-text strong {
	font-size: 1.05rem;
	font-weight: 900;
}

.bn-stats-text small {
	font-size: 0.72rem;
	color: var(--bn-text-muted);
}

.bn-hero-actions {
	display: flex;
	justify-content: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	margin: 1.1rem 0 0;
}


/* ---- Cards --------------------------------------------------------------- */

.bn-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bn-grid--categories {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* .bn-grid's grid items (the data-name wrapper divs, not .bn-card itself)
   already stretch to the row's tallest sibling by default — but .bn-card
   is just a normal block child of that stretched wrapper, so it only ever
   took its own content's natural height, leaving the wrapper's extra
   height as invisible empty space rather than actually growing the
   visible card. height:100% is what makes it fill the space that was
   already being reserved for it. */
.bn-card {
	height: 100%;
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.bn-card:hover {
	border-color: var(--bn-accent-bright);
	transform: translateY(-2px);
}

.bn-card-media {
	aspect-ratio: 3 / 2;
	background: var(--bn-bg-alt);
	position: relative;
}

.bn-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bn-card-body {
	padding: 1.1rem 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.bn-card-eyebrow {
	font-size: 0.75rem;
	color: var(--bn-cyan);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Same fix as .bn-card-desc below, for the same reason: title length
   varies post to post, so an unclamped title was the next thing making
   cards in the same row different heights once the description was fixed
   (a 1-line title next to 2-line and 3-line titles on otherwise identical
   cards). line-clamp only caps the MAXIMUM though — a genuinely short
   1-line title still left a shorter box than a 2-line one, so min-height
   (2 lines at this font-size/line-height) reserves the same space either
   way, not just an upper limit. */
.bn-card-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 2.55rem;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.2;
}

/* wp_trim_words() caps word count, not line count — 16 words of short
   words wraps to 2 lines while 16 words of long ones wraps to 3-4, so
   cards in the same row ended up different heights even at identical word
   counts (visible on the blog archive: three Valorant cards, three very
   different excerpt lengths). Clamping to a fixed line count fixes the
   actual visual rhythm regardless of word length. */
.bn-card-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 2.88rem;
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

.bn-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.85rem;
}

.bn-price {
	font-weight: 800;
	color: var(--bn-text);
}

.bn-price--muted {
	font-weight: 600;
	color: var(--bn-text-muted);
}

.bn-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(139, 92, 255, 0.18);
	color: var(--bn-accent-bright);
}

.bn-badge--new { background: rgba(56, 199, 255, 0.18); color: var(--bn-cyan); }
.bn-badge--custom { background: rgba(243, 201, 105, 0.18); color: var(--bn-gold); }

/* ---- Offer cards (full-bleed image, closer to the reference layout) ----- */

.bn-offer-card {
	position: relative;
	border-radius: var(--bn-radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	display: block;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Homepage "Hot Right Now" only — a slightly smaller, denser card than the
   Services archive uses, since this is a quick teaser row, not the full
   catalog grid. */
/* auto-fit, not auto-fill: this row always shows a fixed count (5 cards,
   shuffled from the full featured pool), so on a wide screen auto-fill
   reserved extra empty column tracks sized for the container width and
   left them unused — the 5 real cards stayed small with dead space to
   their right instead of expanding to fill the row. auto-fit collapses
   those empty tracks and lets the real ones take the freed space. Same
   fix applied to .bn-guides-preview-grid below for the same reason —
   NOT applied to the shared .bn-grid used by paginated archives, where a
   partially-filled last page stretching its few cards much wider than
   every other page would be a real inconsistency, not a fix. */
.bn-hot-right-now-grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.1rem;
}

.bn-guides-preview-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.bn-hot-right-now-grid .bn-offer-card-content {
	padding: 0.85rem;
}

.bn-hot-right-now-grid .bn-card-title {
	font-size: 0.95rem;
}

.bn-hot-right-now-grid .bn-offer-bullets {
	font-size: 0.8rem;
}

.bn-offer-card:hover {
	border-color: var(--bn-accent-bright);
	transform: translateY(-2px);
}

.bn-offer-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bn-offer-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bn-offer-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	/* Previous version (0.97 to 60%, 0.9 to 85%, floor of 0.55 even at the
	   very top) over-corrected — on a card whose photo is itself a dark
	   scene (night-time Warzone shots, etc.) it read as an almost solid
	   black card with no visible photo at all, not just "text is legible".
	   Text legibility is now carried mainly by the text-shadow already on
	   .bn-offer-card-content; this gradient only needs to reinforce it near
	   the bottom where the price/button sit, and get out of the way
	   higher up so the photo is actually visible again. */
	background: linear-gradient(to top, rgba(8, 8, 13, 0.92) 32%, rgba(8, 8, 13, 0.6) 58%, rgba(8, 8, 13, 0.25) 80%, rgba(8, 8, 13, 0.05) 100%);
	pointer-events: none;
}

.bn-offer-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 3;
}

.bn-offer-card-content {
	position: relative;
	z-index: 3;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.4rem;
	padding: 1rem 1.1rem 1.2rem;
	pointer-events: none;
	/* Belt-and-braces on top of the gradient overlay: guarantees contrast
	   against any image brightness without depending on exactly where the
	   gradient's opaque zone falls. */
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.bn-offer-card-content a {
	pointer-events: auto;
}

.bn-offer-bullets {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.82rem;
	color: var(--bn-text-muted);
}

.bn-offer-bullets li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.bn-offer-bullets li span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bn-offer-bullets svg {
	color: var(--bn-online);
	flex-shrink: 0;
}

.bn-offer-bullets--lg {
	font-size: 0.95rem;
	color: var(--bn-text);
	gap: 0.6rem;
}

.bn-offer-footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.6rem;
	margin-top: 0.4rem;
}

.bn-offer-footer .bn-price {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bn-offer-footer .bn-btn {
	width: 100%;
	justify-content: center;
}

.bn-offer-duration {
	color: var(--bn-text-muted);
	font-weight: 400;
}

.bn-btn--sm {
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
}

/* ---- Game tile (catalog card) ---------------------------------------------- */

.bn-game-tile {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	display: block;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bn-game-tile:hover {
	border-color: var(--bn-accent-bright);
	transform: translateY(-3px);
	box-shadow: 0 12px 32px -12px rgba(109, 53, 255, 0.45);
}

.bn-game-tile:hover .bn-game-tile-img {
	transform: scale(1.04);
}

.bn-game-tile-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
}

.bn-game-tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

.bn-game-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(8, 8, 13, 0.96) 8%, rgba(8, 8, 13, 0.5) 45%, transparent 75%);
	pointer-events: none;
}

/* Abstract placeholder for a Game with no featured image yet */
.bn-game-tile--placeholder .bn-game-tile-link {
	background:
		radial-gradient(circle at 25% 20%, rgba(139, 92, 255, 0.35), transparent 45%),
		radial-gradient(circle at 80% 75%, rgba(56, 199, 255, 0.25), transparent 50%),
		linear-gradient(150deg, var(--bn-accent-deep) 0%, var(--bn-bg-alt) 70%);
}

.bn-game-tile-placeholder-mark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.18);
}

.bn-game-tile-placeholder-mark svg {
	width: 64px;
	height: 64px;
}

.bn-game-tile-content {
	position: relative;
	z-index: 3;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.3rem;
	padding: 1.1rem 1.2rem 1.3rem;
	pointer-events: none;
}

.bn-game-tile-content a {
	pointer-events: auto;
}

.bn-game-tile-subtitle {
	margin: 0;
	font-size: 0.85rem;
	color: var(--bn-text-muted);
}

.bn-game-tile-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--bn-cyan);
}

.bn-game-tile-cta svg {
	transition: transform 0.15s ease;
}

.bn-game-tile:hover .bn-game-tile-cta svg {
	transform: translateX(3px);
}

.bn-game-tile-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem 1rem;
	color: var(--bn-text-muted);
	border: 1px dashed var(--bn-border);
	border-radius: var(--bn-radius);
}

/* ---- Homepage featured games: one carousel, every card the same size ------ */

/*
 * Every game card uses the same 3:4 ratio and the same fixed width here —
 * no "one bigger, rest smaller" split. All featured games are equal-size
 * slides in a single carousel.
 */
.bn-carousel-slide--game {
	width: 240px;
}

.bn-featured-games-carousel {
	padding: 0 0.5rem;
}

@media (max-width: 560px) {
	.bn-carousel-slide--game {
		width: 200px;
	}
}

/* Deliberate 4/3/2/1 breakpoints for the Games catalog, per spec */
.bn-game-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
	.bn-game-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 820px) {
	.bn-game-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.bn-game-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Order modal (Buy Now -> choose WhatsApp/Discord) --------------------- */

.bn-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(8, 8, 13, 0.75);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

/* The [hidden] attribute is how the JS opens/closes this modal — without
   this rule, the unconditional display:flex above overrides the browser's
   own [hidden]{display:none} default, so the modal would ignore "hidden"
   entirely and stay visually open at all times. */
.bn-modal-overlay[hidden] {
	display: none;
}

.bn-modal {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	padding: 1.5rem;
}

.bn-modal h2 {
	font-size: 1.25rem;
}

.bn-modal-subtitle {
	font-size: 0.9rem;
}

.bn-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: 1px solid var(--bn-border);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bn-text);
	cursor: pointer;
}

.bn-modal-close:hover {
	border-color: var(--bn-accent-bright);
}

.bn-modal h2 {
	padding-right: 2.5rem;
	margin-bottom: 0.5rem;
}

.bn-modal-subtitle {
	margin-bottom: 1.5rem;
}

.bn-modal-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem 1.25rem;
	margin: 0 0 1.25rem;
	padding: 1rem;
	font-size: 0.9rem;
	background: var(--bn-bg-alt);
	border-radius: var(--bn-radius-sm);
}

.bn-modal-summary-duration {
	grid-column: 1 / -1;
}

.bn-modal-summary div {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.bn-modal-summary dt {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bn-text-muted);
}

.bn-modal-summary dd {
	margin: 0;
	font-weight: 700;
}

.bn-modal-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.bn-modal-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	height: 100%;
	padding: 1.1rem 0.75rem;
	background: var(--bn-bg-alt);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius-sm);
	cursor: pointer;
	color: var(--bn-text);
	font-family: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.bn-modal-option:hover,
.bn-modal-option:focus-visible {
	border-color: var(--bn-accent-bright);
	transform: translateY(-2px);
}

.bn-modal-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bn-gradient);
	color: #fff;
}

.bn-modal-option-icon--whatsapp {
	background: var(--bn-online);
}

.bn-modal-option-icon--discord {
	background: var(--bn-discord);
}

.bn-modal-option-title {
	font-weight: 700;
}

.bn-modal-option-desc {
	flex: 1;
	font-size: 0.78rem;
	color: var(--bn-text-muted);
}

.bn-modal-hint {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--bn-text-muted);
	margin: 0 0 1.25rem;
}

.bn-modal-hint svg {
	flex-shrink: 0;
	margin-top: 0.15rem;
	color: var(--bn-online);
}

.bn-modal-option-cta {
	width: 100%;
	justify-content: center;
	margin-top: 0.5rem;
	pointer-events: none;
}

.bn-modal-message {
	margin-bottom: 1.25rem;
}

.bn-modal-message label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bn-text-muted);
	margin-bottom: 0.4rem;
}

.bn-modal-message-box {
	background: var(--bn-bg-alt);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius-sm);
	overflow: hidden;
}

.bn-modal-message-fixed {
	padding: 0.75rem 0.75rem 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--bn-text-muted);
	white-space: pre-wrap;
	word-break: break-word;
}

.bn-modal-message-fixed:last-child {
	padding: 0 0.75rem 0.75rem;
	padding-top: 0.5rem;
}

.bn-modal-message-editable {
	display: block;
	width: 100%;
	min-height: 90px;
	margin: 0.25rem 0;
	background: rgba(109, 53, 255, 0.08);
	border: none;
	border-top: 1px dashed var(--bn-border);
	border-bottom: 1px dashed var(--bn-border);
	color: var(--bn-text);
	padding: 0.75rem;
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 1.5;
	resize: vertical;
}

.bn-modal-message-editable:focus {
	outline: none;
	background: rgba(109, 53, 255, 0.14);
}

.bn-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	z-index: 200;
	max-width: calc(100vw - 2.5rem);
	background: var(--bn-card);
	border: 1px solid var(--bn-accent-bright);
	color: var(--bn-text);
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	font-size: 0.85rem;
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bn-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
	.bn-modal-overlay {
		padding: 0.75rem;
	}

	.bn-modal {
		padding: 1.25rem;
		max-height: 92vh;
	}

	.bn-modal h2 {
		font-size: 1.1rem;
		padding-right: 2rem;
	}

	.bn-modal-summary,
	.bn-modal-options {
		grid-template-columns: 1fr;
	}

	.bn-modal-option {
		padding: 0.9rem 0.75rem;
		gap: 0.3rem;
	}

	.bn-modal-option-icon {
		width: 32px;
		height: 32px;
	}
}

/* ---- Archive filter bar --------------------------------------------------- */

.bn-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

/* ---- Category toggle switches (Accounts / Topups / Boosting / Hire
   Teammate) — multi-select, each independently on/off. ---- */

.bn-category-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 2rem;
}

.bn-toggle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.bn-toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.bn-toggle-track {
	position: relative;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--bn-card);
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bn-toggle-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bn-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease, background 0.2s ease;
}

.bn-toggle input:checked + .bn-toggle-track {
	background: var(--bn-gradient);
	border-color: transparent;
}

.bn-toggle input:checked + .bn-toggle-track .bn-toggle-knob {
	transform: translateX(18px);
	background: #fff;
}

.bn-toggle input:focus-visible + .bn-toggle-track {
	outline: 2px solid var(--bn-cyan);
	outline-offset: 2px;
}

.bn-toggle-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bn-text-muted);
	transition: color 0.15s ease;
}

.bn-toggle input:checked ~ .bn-toggle-label {
	color: var(--bn-text);
}

.bn-filter-input,
.bn-filter-select {
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	color: var(--bn-text);
	border-radius: var(--bn-radius-sm);
	padding: 0.65rem 1rem;
	font-family: inherit;
	font-size: 0.9rem;
	min-width: 0;
	max-width: 100%;
}

.bn-filter-input {
	flex: 1 1 240px;
}

.pagination {
	margin-top: 2rem;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	margin-right: 0.4rem;
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius-sm);
	color: var(--bn-text-muted);
	font-weight: 700;
	font-size: 0.85rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.page-numbers:hover,
.page-numbers:focus-visible {
	color: var(--bn-text);
	border-color: var(--bn-accent-bright);
}

.page-numbers.current {
	background: var(--bn-gradient);
	border-color: transparent;
	color: #fff;
}

.page-numbers.dots {
	border: none;
}

/* ---- Single Game page: sidebar + offer grid ------------------------------ */

.bn-game-banner {
	aspect-ratio: 21 / 6;
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--bn-border);
	box-shadow: 0 20px 45px -20px rgba(61, 124, 255, 0.35);
}

.bn-game-header {
	padding: 1.75rem 0 0.5rem;
	max-width: 70ch;
}

.bn-game-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 2.5rem;
	align-items: start;
	padding-bottom: 2rem;
}

.bn-game-about-card {
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-bottom: 3rem;
}

.bn-game-about-card .bn-prose {
	max-width: none;
}

.bn-game-sidebar {
	position: sticky;
	top: 5rem;
}

.bn-game-sidebar nav {
	display: flex;
	flex-direction: column;
}

.bn-game-sidebar nav a {
	display: flex;
	align-items: center;
	padding: 0.85rem 0.25rem;
	border-bottom: 1px solid var(--bn-border);
	font-weight: 600;
	color: var(--bn-text-muted);
	transition: color 0.15s ease;
}

.bn-game-sidebar nav a::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 0.5rem;
	background: var(--bn-cyan);
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.bn-game-sidebar nav a:hover,
.bn-game-sidebar nav a.is-active {
	color: var(--bn-text);
}

.bn-game-sidebar nav a:hover::before,
.bn-game-sidebar nav a.is-active::before {
	opacity: 1;
}

.bn-offer-grid {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ---- Single Service page --------------------------------------------------- */

.bn-service-hero {
	display: grid;
	grid-template-columns: minmax(240px, 320px) 1fr;
	gap: 2rem;
	align-items: start;
	padding-top: 1.75rem;
}

.bn-service-hero--no-media {
	grid-template-columns: 1fr;
}

.bn-service-hero-media {
	aspect-ratio: 3 / 4;
	border-radius: var(--bn-radius);
	overflow: hidden;
	border: 1px solid var(--bn-border);
	box-shadow: 0 20px 45px -20px rgba(61, 124, 255, 0.35);
}

.bn-service-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.bn-service-hero-info {
	max-width: 70ch;
}

.bn-service-hero-info h1 {
	margin-top: 0.5rem;
}

@media (max-width: 700px) {
	.bn-service-hero {
		grid-template-columns: 1fr;
	}

	.bn-service-hero-media {
		max-width: 320px;
		margin: 0 auto;
	}

	.bn-guide-hero {
		grid-template-columns: 1fr;
	}

	.bn-guide-hero-media {
		max-width: 320px;
		margin: 0 auto;
	}
}

.bn-service-body {
	max-width: 70ch;
	margin-bottom: 2rem;
}

/* ---- Benefit / trust cards ("Why Choose Us") ------------------------------- */

.bn-benefit-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bn-benefit-card {
	padding: 1.75rem 1.5rem;
	border-radius: var(--bn-radius);
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
}

.bn-benefit-card--highlight {
	background: linear-gradient(160deg, rgba(109, 53, 255, 0.16), var(--bn-card) 65%);
	border-color: var(--bn-accent-bright);
}

.bn-benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--bn-gradient);
	color: #fff;
	margin-bottom: 1rem;
}

.bn-category-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.25rem 1rem;
	border-radius: var(--bn-radius);
	background: var(--bn-card);
	border: 1px solid var(--bn-border);
	font-weight: 700;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.bn-category-chip:hover {
	border-color: var(--bn-accent-bright);
	transform: translateY(-2px);
}

/* Mobile horizontal scroll row for featured games */
.bn-scroll-row {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.bn-scroll-row .bn-card {
	min-width: 240px;
	scroll-snap-align: start;
}

/* ---- How it works -------------------------------------------------------- */

.bn-steps {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	counter-reset: bn-step;
}

.bn-step {
	position: relative;
	padding: 1.5rem 1.25rem 1.25rem;
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	background: var(--bn-card);
}

.bn-step::before {
	counter-increment: bn-step;
	content: counter(bn-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bn-gradient);
	color: #fff;
	font-weight: 800;
	margin-bottom: 0.75rem;
}

/* ---- Packages / safety ---------------------------------------------------- */

.bn-package-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bn-package {
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	background: var(--bn-card);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: relative;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.bn-package:hover,
.bn-package:focus-within {
	border-color: var(--bn-accent-bright);
	transform: translateY(-2px);
}

.bn-package--popular {
	border-color: var(--bn-accent-bright);
	box-shadow: 0 0 0 1px var(--bn-accent-bright) inset;
}

.bn-package-price {
	font-size: 1.5rem;
	font-weight: 800;
}

.bn-safety-notice {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: 0.85rem;
	color: var(--bn-gold);
	background: rgba(243, 201, 105, 0.08);
	border: 1px solid rgba(243, 201, 105, 0.25);
	border-radius: var(--bn-radius-sm);
	padding: 0.75rem 1rem;
}

.bn-safety-notice svg {
	flex-shrink: 0;
	margin-top: 0.15rem;
}

/* ---- Auth modal (sign in / sign up gate before ordering) ------------------ */

.bn-auth-modal {
	max-width: 400px;
}

.bn-auth-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--bn-border);
}

.bn-auth-tab {
	position: relative;
	flex: 1;
	background: none;
	border: none;
	padding: 0.6rem 0.5rem;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--bn-text-muted);
	cursor: pointer;
	transition: color 0.15s ease;
}

.bn-auth-tab.is-active {
	color: var(--bn-text);
}

.bn-auth-error {
	margin: 0 0 1rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(255, 90, 90, 0.35);
	background: rgba(255, 90, 90, 0.08);
	border-radius: var(--bn-radius-sm);
	color: #ff9b9b;
	font-size: 0.85rem;
}

.bn-auth-modal {
	text-align: center;
}

.bn-auth-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--bn-gradient);
	color: #fff;
	margin-bottom: 1rem;
	box-shadow: 0 0 24px rgba(109, 53, 255, 0.45);
}

.bn-auth-modal .bn-modal-subtitle {
	max-width: 32ch;
	margin: 0 auto 1.5rem;
}

.bn-auth-tabs {
	position: relative;
}

.bn-auth-tab::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--bn-gradient);
	transition: left 0.25s ease, right 0.25s ease;
}

.bn-auth-tab.is-active::after {
	left: 0;
	right: 0;
}

.bn-auth-form {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-align: left;
}

.bn-auth-form[hidden] {
	display: none;
}

.bn-auth-form label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--bn-text-muted);
	margin-top: 0.5rem;
}

.bn-auth-form input {
	background: var(--bn-bg-alt);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius-sm);
	color: var(--bn-text);
	padding: 0.65rem 0.85rem;
	font-family: inherit;
	font-size: 0.9rem;
}

.bn-auth-form input:focus {
	outline: none;
	border-color: var(--bn-accent-bright);
}

.bn-auth-form .bn-btn {
	margin-top: 1.25rem;
}

.bn-auth-form .bn-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---- Blog archive (game sidebar) ---------------------------------------- */

.bn-blog-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2.5rem;
	align-items: start;
	padding-bottom: 2rem;
}

.bn-blog-sidebar {
	position: sticky;
	top: 5rem;
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	background: var(--bn-card);
	padding: 1rem;
}

.bn-blog-sidebar-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--bn-border);
	border-radius: 999px;
	background: var(--bn-bg-alt);
	color: var(--bn-text-muted);
}

.bn-blog-sidebar-search svg {
	flex-shrink: 0;
}

.bn-blog-sidebar-search input {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
	color: var(--bn-text);
	font-family: inherit;
	font-size: 0.9rem;
}

.bn-blog-sidebar-search input:focus {
	outline: none;
}

.bn-blog-game-list {
	display: flex;
	flex-direction: column;
	max-height: 60vh;
	overflow-y: auto;
}

.bn-blog-game-list a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.5rem;
	border-radius: var(--bn-radius-sm);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--bn-text-muted);
	transition: background 0.15s ease, color 0.15s ease;
}

.bn-blog-game-list a:hover,
.bn-blog-game-list a:focus-visible {
	background: var(--bn-bg-alt);
	color: var(--bn-text);
}

.bn-blog-game-list a.is-active {
	background: var(--bn-gradient);
	color: #fff;
}

.bn-blog-game-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 50%;
	background: var(--bn-bg-alt);
	color: var(--bn-text-muted);
}

.bn-blog-game-list a.is-active .bn-blog-game-icon {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.bn-blog-game-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bn-blog-game-icon svg {
	width: 14px;
	height: 14px;
}

/* Per-card game tag on blog cards — icon, game name, and a "Blogs" label,
   matching the reference design's category-tag treatment. */
.bn-card-blog-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--bn-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bn-card-blog-eyebrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 50%;
	background: var(--bn-bg-alt);
}

.bn-card-blog-eyebrow-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bn-card-blog-eyebrow-icon svg {
	width: 12px;
	height: 12px;
}

@media (max-width: 900px) {
	.bn-blog-layout {
		grid-template-columns: 1fr;
	}

	.bn-blog-sidebar {
		position: static;
	}

	.bn-blog-game-list {
		max-height: none;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.bn-blog-game-list a {
		flex: 0 0 auto;
	}
}

/* ---- Guides (single) -------------------------------------------------- */

/* Image left, header right — same shape as .bn-service-hero. Guide
   featured images are always reused from a game's own 3:4 portrait photo,
   never a wide banner shot, so this replaced an earlier full-width 21:6
   banner treatment that hard-cropped those portrait images down to a thin
   horizontal sliver (WordPress's own bn-banner size crops server-side,
   before CSS ever gets a say). */
.bn-guide-hero {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 2rem;
	align-items: start;
	padding-top: 1.75rem;
}

.bn-guide-hero--no-media {
	grid-template-columns: 1fr;
}

.bn-guide-hero-media {
	aspect-ratio: 3 / 4;
	border-radius: var(--bn-radius);
	overflow: hidden;
	box-shadow: 0 20px 45px -20px rgba(61, 124, 255, 0.35);
}

.bn-guide-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.bn-guide-header {
	max-width: 60ch;
}

.bn-guide-meta {
	color: var(--bn-text-muted);
	font-size: 0.85rem;
	margin: 0.25rem 0 0;
}

.bn-guide-layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 2.5rem;
	padding-bottom: 3rem;
}

.bn-guide-sidebar-card {
	position: sticky;
	top: 5rem;
	padding: 1.5rem;
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	background: var(--bn-card);
}

.bn-guide-sidebar-card h2 {
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
}

.bn-guide-sidebar-card p {
	font-size: 0.9rem;
	margin-bottom: 1.25rem;
}

/* Long-form block-editor content (Gutenberg) — WP core's own block-library
   stylesheet handles structural things (columns, galleries), this just
   overrides typography/color to fit the dark theme, since the block
   library's defaults assume a light background. */
.bn-prose {
	max-width: 70ch;
	color: var(--bn-text);
	font-size: 1rem;
	line-height: 1.75;
}

/* ---- Static pages (legal, etc.) ---------------------------------------- */

.bn-page-header {
	padding-top: 1.75rem;
	margin-bottom: 1.5rem;
}

.bn-page-prose {
	padding-bottom: 3rem;
}

.bn-page-prose h3 {
	font-size: 1.15rem;
	margin-top: 1.5rem;
}

.bn-prose > * {
	margin-bottom: 1.25em;
}

.bn-prose h2 {
	font-size: 1.5rem;
	margin-top: 2rem;
}

.bn-prose h3 {
	font-size: 1.2rem;
	margin-top: 1.75rem;
}

.bn-prose p,
.bn-prose li {
	color: var(--bn-text-muted);
}

.bn-prose a {
	color: var(--bn-cyan);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bn-prose ul,
.bn-prose ol {
	padding-left: 1.5em;
	list-style: revert;
}

.bn-prose img {
	border-radius: var(--bn-radius-sm);
}

.bn-prose blockquote {
	margin: 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--bn-accent-bright);
	background: var(--bn-card);
	border-radius: 0 var(--bn-radius-sm) var(--bn-radius-sm) 0;
	color: var(--bn-text-muted);
	font-style: italic;
}

.bn-prose code {
	background: var(--bn-bg-alt);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}

@media (max-width: 900px) {
	.bn-guide-layout {
		grid-template-columns: 1fr;
	}

	.bn-guide-sidebar-card {
		position: static;
	}
}

/* ---- FAQ ------------------------------------------------------------------ */

.bn-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 800px;
}

.bn-faq-item {
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius-sm);
	background: var(--bn-card);
	transition: border-color 0.15s ease;
}

.bn-faq-item:hover,
.bn-faq-item:has(summary:focus-visible) {
	border-color: var(--bn-accent-bright);
}

.bn-faq-item summary {
	cursor: pointer;
	padding: 1rem 1.25rem;
	font-weight: 700;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bn-faq-item summary::-webkit-details-marker {
	display: none;
}

.bn-faq-item[open] summary svg {
	transform: rotate(90deg);
}

.bn-faq-item summary svg {
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.bn-faq-item-body {
	padding: 0 1.25rem 1.15rem;
}

/* ---- Breadcrumbs ----------------------------------------------------------- */

.bn-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: var(--bn-text-muted);
}

.bn-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.4rem;
	color: var(--bn-border);
}

.bn-breadcrumbs a:hover {
	color: var(--bn-text);
}

/* ---- Footer ----------------------------------------------------------------- */

.bn-footer {
	background: var(--bn-bg-alt);
	border-top: 1px solid var(--bn-border);
	padding: 3rem 0 1.5rem;
}

.bn-footer-games {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--bn-border);
}

.bn-footer-games h2 {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bn-text-muted);
	margin-bottom: 0.9rem;
}

.bn-footer-games-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
}

.bn-footer-games-list a {
	font-size: 0.82rem;
	color: var(--bn-text-muted);
	transition: color 0.15s ease;
}

.bn-footer-games-list a:hover,
.bn-footer-games-list a:focus-visible {
	color: var(--bn-text);
}

.bn-footer-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	margin-bottom: 2rem;
}

.bn-footer-col h2 {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bn-text-muted);
	margin-bottom: 0.9rem;
}

.bn-footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.bn-footer-col a {
	color: var(--bn-text-muted);
}

.bn-footer-col a:hover {
	color: var(--bn-text);
}

.bn-footer-disclaimer {
	font-size: 0.8rem;
	color: var(--bn-text-muted);
	border-top: 1px solid var(--bn-border);
	padding-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
}

/* ---- Sticky mobile order bar ------------------------------------------------ */

.bn-sticky-cta {
	position: sticky;
	bottom: 0;
	z-index: 40;
	display: none;
	gap: 0.6rem;
	padding: 0.75rem 1.25rem;
	background: rgba(8, 8, 13, 0.92);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--bn-border);
}

/* ---- Responsive -------------------------------------------------------------- */

/* Tablets (portrait and landscape) get the stacked hero layout too — the
   2-column grid only really has room to breathe at desktop widths. */
@media (max-width: 1024px) {
	.bn-hero .bn-container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.bn-hero-grid {
		grid-template-columns: 1fr;
	}

	/* Stacked: the background image is full-bleed behind everything
	   anyway, so the right column's only job (holding the graffiti tag)
	   goes — keeping it would just add dead vertical space under the copy. */
	.bn-hero-visual {
		display: none;
	}

	/* Overlay flips to a vertical wash when stacked, since there's no
	   longer a left copy column / right artwork split to protect. */
	.bn-hero-bg-overlay {
		background:
			linear-gradient(180deg, rgba(8, 8, 13, 0.7) 0%, rgba(8, 8, 13, 0.9) 45%, rgba(8, 8, 13, 0.97) 100%),
			radial-gradient(circle at 70% 15%, rgba(139, 92, 255, 0.32), transparent 60%);
	}

	.bn-hero-title {
		font-size: clamp(2rem, 7vw, 3.2rem);
	}
}

@media (max-width: 640px) {
	.bn-hero-trust {
		gap: 0.7rem 1.1rem;
	}

	.bn-hero-trust li {
		flex: 1 1 44%;
	}

	.bn-hero-chips {
		grid-template-columns: 1fr 1fr;
	}

	.bn-stats-strip-title {
		flex: 1 1 100%;
	}

	.bn-stats-list {
		gap: 0.85rem 1.5rem;
	}

	.bn-stats-list li {
		flex: 1 1 44%;
	}

	.bn-stats-text strong {
		font-size: 0.95rem;
	}
}

@media (max-width: 900px) {
	.bn-footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.bn-game-layout {
		grid-template-columns: 1fr;
	}

	.bn-game-sidebar {
		position: static;
	}

	.bn-game-sidebar nav {
		flex-direction: row;
		overflow-x: auto;
		gap: 0.5rem;
		-webkit-overflow-scrolling: touch;
	}

	.bn-game-sidebar nav a {
		white-space: nowrap;
		border: 1px solid var(--bn-border);
		border-bottom: 1px solid var(--bn-border);
		border-radius: 999px;
		padding: 0.5rem 1rem;
	}

	.bn-game-sidebar nav a::before {
		display: none;
	}

	.bn-game-sidebar nav a.is-active {
		background: var(--bn-gradient);
		border-color: transparent;
		color: #fff;
	}
}

@media (max-width: 782px) {
	/* iOS Safari has long-standing rendering/scroll-jank bugs with fixed
	   backgrounds; the ambient gradient still shows, it just scrolls with
	   the page on small screens instead of staying pinned. */
	body {
		background-attachment: scroll;
	}

	.bn-nav-list,
	.bn-header-actions .bn-status-pill,
	.bn-header-actions .bn-btn--secondary,
	.bn-header-actions .bn-header-account {
		display: none;
	}

	.bn-nav-toggle {
		display: inline-flex;
	}

	/* The header CTA at full size + the hamburger icon together were
	   wider than the available space at phone widths, pushing the
	   hamburger past the edge (silently clipped by the page's
	   overflow-x:hidden safety net instead of visibly overflowing). */
	.bn-header-inner {
		gap: 0.75rem;
	}

	/* Business name text next to the logo mark ate too much of the
	   already-tight header width on phones, forcing the CTA/Discord/
	   hamburger group to squeeze and visibly clip. Icon mark only. */
	.bn-logo span {
		display: none;
	}

	.bn-logo img {
		max-height: 34px;
	}

	.bn-header-actions {
		gap: 0.5rem;
	}

	/* "Choose a Game" and "Join Discord" collapse to colored, icon-only
	   circular buttons on phones — same tap target, no clipped text. */
	.bn-header-actions .bn-btn--primary,
	.bn-header-actions .bn-btn--discord {
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
	}

	/* The trailing arrow is decorative and would crowd the 44px circle
	   alongside the gamepad icon — two glyphs jammed in one button. */
	.bn-header-actions .bn-btn--primary .bn-btn-arrow,
	.bn-header-actions .bn-btn--discord .bn-btn-arrow {
		display: none;
	}

	/* Visually hidden, not display:none — display:none removes text from
	   the accessibility tree entirely, leaving these icon-only buttons with
	   no accessible name at all for screen readers/AI agents. This keeps
	   the label announced while showing only the icon. */
	.bn-header-actions .bn-btn--primary .bn-btn-label,
	.bn-header-actions .bn-btn--discord .bn-btn-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.bn-header-actions .bn-btn--primary .bn-btn-icon svg,
	.bn-header-actions .bn-btn--discord .bn-btn-icon svg {
		width: 20px;
		height: 20px;
	}

	.bn-header-actions .bn-btn--discord {
		background: var(--bn-discord);
		border-color: transparent;
		color: #fff;
	}

	.bn-sticky-cta {
		display: flex;
	}

	.bn-footer-grid {
		grid-template-columns: 1fr;
	}

	/* Search button shrinks to an icon-only circle so the whole search bar
	   stays on one row instead of a stretched-full-width button wrapping
	   below (which looked oversized/blocky). */
	.bn-hero-search-submit {
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
	}

	.bn-hero-search-submit-icon {
		display: inline-flex;
	}

	.bn-hero-search-submit-label,
	.bn-hero-search-submit .bn-btn-arrow {
		display: none;
	}

	/* Logo tagline and the support pill's second line both go on phones —
	   the header row is already tight enough there (see the hamburger
	   clipping bug this breakpoint exists to prevent). */
	.bn-logo-tagline {
		display: none;
	}

	/* On mobile the offer-card grid is 1 column, so a full-viewport-width
	   3:4 card reads as huge. Keep the taller portrait ratio (that's the
	   intended look) but narrow the card itself with side spacing instead
	   of flattening its shape. */
	.bn-game-tile {
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Offer cards (single Game "Top Offers", Services archive/homepage)
	   sized smaller than game tiles, and justify-items:center guarantees
	   true centering regardless of how many cards end up in the row —
	   margin:auto alone only centers within the grid item's own box, which
	   isn't reliable once auto-fill collapses to a single 1fr track. */
	.bn-offer-grid,
	.bn-hot-right-now-grid {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	/* width:100% alongside max-width, not max-width alone: under
	   justify-items:center the wrapper (and this card inside it) sizes by
	   shrink-to-fit, so max-width is only a ceiling — actual rendered width
	   varied per card based on its own content, exactly the "different
	   size cards" bug reported. width:100% forces every card to actually
	   BE 260px (up to that ceiling), not just capped at it. */
	.bn-offer-card {
		width: 100%;
		max-width: 260px;
	}
}

/* ---- Gaming-style cursor + card spotlight (desktop/fine-pointer only) --- */
/* JS (effects.js) skips all of this entirely on touch devices and under
   prefers-reduced-motion, and only adds the html class once it's actually
   drawing the custom cursor — so nothing here ever hides the real cursor
   on a device that has no replacement for it. */

html.bn-has-custom-cursor,
html.bn-has-custom-cursor * {
	cursor: none !important;
}

.bn-cursor-dot,
.bn-cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	will-change: transform;
	transition: opacity 0.2s ease, width 0.18s ease, height 0.18s ease, margin 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.bn-cursor-dot {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--bn-accent-bright);
	box-shadow: 0 0 10px 2px rgba(139, 95, 255, 0.7);
}

.bn-cursor-ring {
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border-radius: 50%;
	border: 1.5px solid rgba(139, 95, 255, 0.55);
	background: radial-gradient(circle, rgba(109, 53, 255, 0.1), transparent 70%);
}

.bn-cursor-dot.is-visible,
.bn-cursor-ring.is-visible {
	opacity: 1;
}

.bn-cursor-ring.is-active {
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-color: var(--bn-cyan);
	background: radial-gradient(circle, rgba(56, 199, 255, 0.16), transparent 70%);
}

/* Pointer-follow glow inside cards/buttons — position is set per-element
   via --bn-spot-x/--bn-spot-y custom properties (effects.js), the CSS just
   renders a soft radial glow at that point on hover. */
.bn-spotlight {
	position: relative;
}

.bn-spotlight::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(320px circle at var(--bn-spot-x, 50%) var(--bn-spot-y, 50%), rgba(139, 95, 255, 0.16), transparent 60%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: 1;
}

.bn-spotlight:hover::after {
	opacity: 1;
}