/*
   Desktop shell stylesheet. Loaded ONLY when device === 'desktop'.
   Layout tokens (--d-*) live in variables.css.

   Note: .chip / .badge-live / @keyframes pulse-dot below intentionally
   override the base.css versions — the desktop variant uses an outlined
   look, the mobile (base.css) variant uses a filled look. Don't hoist
   these into a shared component file without checking both pages render.
*/

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

body {
	background: #08080f;
	min-height: 100vh;
	overflow-x: hidden;
}

#app {
	width: 100%;
	min-height: 100vh;
	background: var(--bg-primary);
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.625rem;
	border-radius: 624.9375rem;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
}

.chip--gold {
	background: rgba(var(--gold-rgb), 0.15);
	color: var(--gold-text);
	border: 0.0625rem solid rgba(var(--gold-rgb), 0.25);
}

.badge-live {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	background: rgba(var(--red-rgb), 0.12);
	color: var(--red-text);
	border: 0.0625rem solid rgba(var(--red-rgb), 0.25);
	border-radius: 624.9375rem;
	padding: 0.1875rem 0.625rem;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.0625rem;
	margin-left: 0.625rem;
}

.badge-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--red);
	animation: pulse-dot 1.6s infinite;
}

/* HEADER */
/* Nav density. The menu is admin-managed (Manage Page), so its length is not
   fixed. The nav row's right side is only Login|Join or Deposit|Logout (wallet
   and profile live in the utility row), so one density fits both states;
   narrow laptops get a tighter menu. */
#site-header {
	--nav-pad-x: 0.875rem;
	--nav-font: 0.8438rem;
	--nav-logo-gap: 2rem;
}

@media (max-width: 80rem) {
	#site-header {
		--nav-pad-x: 0.625rem;
		--nav-logo-gap: 1.25rem;
	}
}

@media (max-width: 64rem) {
	#site-header {
		--nav-pad-x: 0.5rem;
		--nav-font: 0.8125rem;
		--nav-logo-gap: 1rem;
	}
}

#site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--d-hdr-h);
	/* 7.5rem total */
	z-index: var(--z-header, 110);
	background: var(--bg-primary);
	backdrop-filter: blur(1.25rem);
	-webkit-backdrop-filter: blur(1.25rem);
	display: flex;
	flex-direction: column;
	transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] #site-header {
	background: #F9F9FB;
}

/* Keep submit-guard scroll targets clear of the fixed header (html's 5rem
   scroll-padding-top already counts toward it) */
form [required],
form .custom-select,
form .game-picker,
form :has(> .game-picker) {
	scroll-margin-top: calc(var(--d-hdr-h) - 5rem + 1rem);
}

.hdr-container {
	width: 100%;
	max-width: var(--d-max);
	margin: 0 auto;
	padding: 0 var(--d-px);
	box-sizing: border-box;
}

.hdr-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--d-hdr-nav);
	/* 4.25rem */
	gap: 1.5rem;
}

.hdr-left {
	display: flex;
	align-items: center;
	gap: var(--nav-logo-gap);
	flex: 0 1 auto;
	min-width: 0;
}

.hdr-right {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
}

.logo-wrap {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.logo-img {
	height: 3.5rem;
	width: auto;
	display: block;
}

/* Safety net: when even the tight spacing cannot fit (a member on a ~1280px or
   smaller screen), the menu scrolls sideways instead of running into the right
   side. The vertical padding keeps the HOT/LIVE tag badges, which sit above
   their link, inside the scroll area so they are not clipped; the negative
   margin gives that room back to the layout. */
.d-nav {
	display: flex;
	align-items: center;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding-block: 0.625rem;
	margin-block: -0.625rem;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-mask-image: linear-gradient(to right,
		transparent 0, #000 var(--nav-fade-l),
		#000 calc(100% - var(--nav-fade-r)), transparent 100%);
	mask-image: linear-gradient(to right,
		transparent 0, #000 var(--nav-fade-l),
		#000 calc(100% - var(--nav-fade-r)), transparent 100%);
}

.d-nav::-webkit-scrollbar {
	display: none;
}

/* Edge fades driven by the nav's own scroll position (scroll-driven animation,
   no JS). A nav that fits has no scroll timeline, so the animation is inactive
   and both fades stay at 0 — nothing is faded. Browsers without support get no
   fade and still scroll. */
@property --nav-fade-l {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@property --nav-fade-r {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@keyframes d-nav-edge-fade {
	0%   { --nav-fade-l: 0px;    --nav-fade-r: 2.5rem; }
	12%  { --nav-fade-l: 2.5rem; }
	88%  { --nav-fade-r: 2.5rem; }
	100% { --nav-fade-l: 2.5rem; --nav-fade-r: 0px; }
}

@supports (animation-timeline: scroll()) {
	.d-nav {
		animation: d-nav-edge-fade linear both;
		animation-timeline: scroll(self inline);
	}
}

.d-nav-list {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.d-nav-link {
	position: relative;
	display: inline-block;
	font-family: var(--font-brand);
	padding: 0.5rem var(--nav-pad-x);
	border-radius: 0.5rem;
	font-size: var(--nav-font);
	font-weight: 600;
	color: var(--text-secondary);
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: 0.0094rem;
	transition: color 0.18s ease, background 0.18s ease;
}

.d-nav-link:hover {
	color: var(--text-primary);
	background: rgba(var(--gold-rgb), 0.07);
}

.d-nav-link.is-active {
	color: var(--gold-text);
	font-weight: 700;
}

[data-theme="light"] .d-nav-link.is-active {
	color: #705D00;
	background: rgba(var(--gold-rgb), 0.16);
}

/* Light bg washes out the bright-gold bar + glow, so the selected item reads
   weakly. Use a solid dark-gold bar (no glow) to match dark theme's clarity. */
[data-theme="light"] .d-nav-link.is-active::before {
	background: #705D00;
	box-shadow: none;
}

.d-nav-link.is-active::before {
	content: '';
	position: absolute;
	bottom: 0.25rem;
	left: 50%;
	transform: translateX(-50%);
	width: 1.125rem;
	height: 0.125rem;
	border-radius: 0.125rem;
	background: var(--gold);
	box-shadow: 0 0 0.5rem rgba(var(--gold-rgb), 0.55);
}

.d-nav-link:not(.is-active):hover::before {
	content: '';
	position: absolute;
	bottom: 0.25rem;
	left: 50%;
	transform: translateX(-50%);
	width: 0.75rem;
	height: 0.125rem;
	border-radius: 0.125rem;
	background: rgba(var(--gold-rgb), 0.35);
}

.hdr-icon-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.05);
	border: 0.0625rem solid rgba(255, 255, 255, 0.08);
	color: var(--text-secondary);
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, transform 0.18s ease;
}

.hdr-icon-btn svg, .hdr-icon-btn iconify-icon {
	width: 1.125rem;
	height: 1.125rem;
	font-size: 1.125rem;
}

.hdr-icon-btn:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(var(--gold-rgb), 0.22);
	color: var(--text-primary);
}

.hdr-icon-btn:active {
	transform: scale(0.91);
}

.hdr-mailbox-btn:hover {
	border-color: rgba(var(--gold-rgb), 0.30);
	box-shadow: 0 0 0.875rem rgba(var(--gold-rgb), 0.12);
}

.hdr-notif-badge {
	position: absolute;
	top: 0.3125rem;
	right: 0.3125rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.25rem;
	border-radius: 6.1875rem;
	background: var(--red);
	border: 0.0938rem solid rgba(8, 8, 15, 0.90);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.5625rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	pointer-events: none;
	animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-pop {
	from {
		transform: scale(0);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Theme button — spins slightly on toggle */
.hdr-theme-btn:active {
	transform: scale(0.88) rotate(25deg);
}

/*  Light theme overrides  */
[data-theme="light"] .hdr-icon-btn {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.08);
	color: #555;
}

[data-theme="light"] .hdr-icon-btn:hover {
	background: rgba(0, 0, 0, 0.08);
	border-color: rgba(180, 130, 10, 0.30);
	color: #222;
}

[data-theme="light"] .hdr-notif-badge {
	border-color: rgba(245, 244, 240, 0.95);
}

/*
   UTILITY ROW (row 2) — Timezone · Lang  |  Login · Join Now
*/
.hdr-utility {
	height: var(--d-hdr-util);
	/* 3.25rem */
	background: rgba(4, 4, 14, 0.92);
	border-top: 0.0625rem solid rgba(var(--gold-rgb), 0.08);
	border-bottom: 0.0625rem solid rgba(var(--gold-rgb), 0.13);
	display: flex;
	align-items: center;
}

[data-theme="light"] .hdr-utility {
	background: #EFEFF3;
	border-top-color: rgba(0, 0, 0, 0.05);
	border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Inner flex — space-between: left group vs right group */
.hdr-util-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: 1rem;
}

/*  LEFT: Timezone + Separator + Language  */
.hdr-util-left {
	display: flex;
	align-items: center;
	gap: 0;
	/* gap controlled by separator margins */
}

/*  RIGHT: Login + Join Now  */
.hdr-util-right {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.hdr-util-right .hdr-sep {
	display: none;
}

/*  Vertical divider (replaces pipe character)  */
.hdr-sep {
	width: 0.0625rem;
	height: 0.875rem;
	background: rgba(255, 255, 255, 0.13);
	margin: 0 0.875rem;
	flex-shrink: 0;
	font-size: 0;
	/* hide the | text node */
	overflow: hidden;
}

[data-theme="light"] .hdr-sep {
	background: rgba(0, 0, 0, 0.14);
}

/*  Live clock (PNG time)
    Inter, not the brand font: Poppins has no tabular figures (a "1" is ~40%
    narrower than a "4"), so the clock changed width every second and shoved
    the language selector beside it. Inter's tnum digits are all one width. */
.hdr-tz {
	display: inline-flex;
	align-items: center;
	gap: 0.1875rem;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 0.8438rem;
	font-weight: 600;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hdr-tz-date {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.48);
	letter-spacing: 0.0188rem;
}

.hdr-tz-time {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
	letter-spacing: 0.0312rem;
}

.hdr-tz-dot {
	font-size: 1.25rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.6);
	user-select: none;
}

.hdr-tz-region {
	font-weight: 500;
	color: rgba(255, 255, 255, 0.38);
	letter-spacing: 0.0125rem;
}

[data-theme="light"] .hdr-tz-date {
	color: rgba(0, 0, 0, 0.50);
}

[data-theme="light"] .hdr-tz-time {
	color: rgba(0, 0, 0, 0.75);
}

[data-theme="light"] .hdr-tz-dot {
	color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .hdr-tz-region {
	color: rgba(0, 0, 0, 0.40);
}

/*  Language dropdown  */
.hdr-lang {
	position: relative;
	display: inline-flex;
}

/* Trigger button */
.hdr-lang-trigger {
	display: flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.375rem 0.6875rem 0.375rem 0.5625rem;
	border-radius: 0.5rem;
	border: 0.0625rem solid rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.70);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.hdr-lang-trigger:hover {
	border-color: rgba(var(--gold-rgb), 0.32);
	background: rgba(var(--gold-rgb), 0.07);
	color: var(--text-primary);
}

.hdr-lang.is-open .hdr-lang-trigger {
	border-color: rgba(var(--gold-rgb), 0.40);
	background: rgba(var(--gold-rgb), 0.09);
	color: var(--gold-text);
}

.hdr-lang-flag {
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
	flex-shrink: 0;
}

.hdr-lang-name {
	font-family: var(--font-brand);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.0125rem;
}

.hdr-lang-caret {
	width: 0.8125rem;
	height: 0.8125rem;
	font-size: 0.8125rem;
	opacity: 0.65;
	transition: transform 0.18s ease;
	flex-shrink: 0;
}

.hdr-lang.is-open .hdr-lang-caret {
	transform: rotate(180deg);
	opacity: 1;
}

[data-theme="light"] .hdr-lang-trigger {
	border-color: rgba(0, 0, 0, 0.28);
	background: #ffffff;
	color: rgba(0, 0, 0, 0.62);
}

[data-theme="light"] .hdr-lang-trigger:hover {
	border-color: rgba(140, 100, 8, 0.30);
	background: rgba(140, 100, 8, 0.06);
	color: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .hdr-lang.is-open .hdr-lang-trigger {
	border-color: rgba(140, 100, 8, 0.40);
	color: #8a6000;
}

/* Dropdown panel */
.hdr-lang-dropdown {
	position: absolute;
	top: calc(100% + 0.4375rem);
	left: 0;
	min-width: 9.875rem;
	background: var(--bg-card);
	border: 0.0625rem solid rgba(255, 255, 255, 0.10);
	border-radius: 0.875rem;
	box-shadow: 0 0.625rem 2.25rem rgba(0, 0, 0, 0.55), 0 0 0 0.0625rem rgba(var(--gold-rgb), 0.08);
	overflow: hidden;
	z-index: calc(110 + 10);
	/* Closed state */
	opacity: 0;
	transform: translateY(-0.375rem) scale(0.98);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	transform-origin: top left;
}

.hdr-lang.is-open .hdr-lang-dropdown {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

[data-theme="light"] .hdr-lang-dropdown {
	border-color: rgba(0, 0, 0, 0.10);
	box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.15), 0 0 0 0.0625rem rgba(140, 100, 8, 0.10);
}

/* Dropdown options */
.hdr-lang-option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.625rem 0.875rem;
	background: transparent;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	text-align: left;
	transition: background 0.14s ease, color 0.14s ease;
}

.hdr-lang-option+.hdr-lang-option {
	border-top: 0.0625rem solid var(--border-subtle);
}

.hdr-lang-option:hover {
	background: rgba(var(--gold-rgb), 0.07);
	color: var(--text-primary);
}

.hdr-lang-option.is-active {
	background: rgba(var(--gold-rgb), 0.10);
	color: var(--gold-text);
}

.hdr-lang-opt-flag {
	width: 1.125rem;
	height: 1.125rem;
	font-size: 1.125rem;
	flex-shrink: 0;
}

.hdr-lang-opt-name {
	font-family: var(--font-brand);
	font-size: 0.75rem;
	font-weight: 700;
	flex: 1;
}

.hdr-lang-opt-code {
	font-family: var(--font-brand);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.05rem;
	color: var(--text-muted);
	background: rgba(255, 255, 255, 0.06);
	padding: 0.125rem 0.375rem;
	border-radius: 624.9375rem;
}

.hdr-lang-option.is-active .hdr-lang-opt-code {
	background: rgba(var(--gold-rgb), 0.15);
	color: var(--gold-text);
}

[data-theme="light"] .hdr-lang-option:hover {
	background: rgba(140, 100, 8, 0.06);
}

[data-theme="light"] .hdr-lang-option.is-active {
	background: rgba(140, 100, 8, 0.09);
	color: #8a6000;
}

[data-theme="light"] .hdr-lang-opt-code {
	background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .hdr-lang-option.is-active .hdr-lang-opt-code {
	background: rgba(140, 100, 8, 0.14);
	color: #8a6000;
}

/*  Login button (ghost pill)  */
.hdr-btn-login {
	height: 2rem;
	padding: 0 1.125rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.05);
	border: 0.0625rem solid rgba(255, 255, 255, 0.58);
	color: rgb(255, 255, 255);
	font-family: var(--font-brand, 'Poppins', sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.0188rem;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.hdr-btn-login:hover {
	color: var(--gold-text);
	border-color: rgba(var(--gold-rgb), 0.35);
	background: rgba(var(--gold-rgb), 0.07);
}

.hdr-btn-login:active {
	transform: scale(0.96);
}

[data-theme="light"] .hdr-btn-login {
	color: #555;
	border-color: rgba(0, 0, 0, 0.12);
	background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .hdr-btn-login:hover {
	color: #a07010;
	border-color: rgba(160, 112, 16, 0.32);
	background: rgba(160, 112, 16, 0.05);
}

/*  Join Now CTA (gold gradient pill)  */
.hdr-btn-join {
	height: 2rem;
	padding: 0 1.375rem;
	border-radius: 0.5rem;
	background: var(--gold-gradient);
	border: none;
	color: var(--text-on-gold);
	font-family: var(--font-brand, 'Poppins', sans-serif);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.0312rem;
	cursor: pointer;
	white-space: nowrap;
	box-shadow:
		0 0.125rem 0.75rem rgba(var(--gold-rgb), 0.45),
		inset 0 0.0625rem 0 rgba(255, 255, 255, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hdr-btn-join:hover {
	transform: translateY(-0.0625rem);
	box-shadow:
		0 0.3125rem 1.375rem rgba(var(--gold-rgb), 0.65),
		inset 0 0.0625rem 0 rgba(255, 255, 255, 0.22);
}

.hdr-btn-join:active {
	transform: scale(0.96);
}

/* MAIN SCROLL AREA */
.d-main {
	padding-top: var(--d-hdr-h);
}

/*
   CONTENT WRAPPER (centred)
*/
.d-content {
	max-width: var(--d-max);
	margin: 0 auto;
	padding: 0 var(--d-px) var(--d-section-gap);
}

#app:has(.cms-page-main) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.cms-page-main {
	flex: 1;
}

.cms-page-title {
	margin: 0 0 0.75rem;
}

.cms-page-empty {
	margin: 0;
	color: var(--text-muted);
}

/*  Section base  */
.d-section {
	padding-top: var(--d-section-gap);
}

/*  Section header  */
.d-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.d-section-title {
	font-family: var(--font-brand);
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.d-title-accent {
	font-size: 1.25rem;
}

.d-btn-more {
	font-family: var(--font-brand);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--gold-text);
	background: rgba(var(--gold-rgb), 0.08);
	border: 0.0625rem solid rgba(var(--gold-rgb), 0.18);
	border-radius: 624.9375rem;
	padding: 0.4375rem 1.125rem;
	cursor: pointer;
	transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.d-btn-more:hover {
	background: rgba(var(--gold-rgb), 0.15);
	border-color: rgba(var(--gold-rgb), 0.30);
}

/*
   REFERRAL  (desktop overrides)
*/
#referral-section .referral-card {
	padding: 1.75rem 2.25rem 1.75rem;
}

#referral-section .ref-upto {
	font-size: 0.9375rem;
}

#referral-section .ref-upto strong {
	font-size: 2rem;
}

#referral-section .ref-headline {
	font-size: 1.375rem;
}

#referral-section .ref-sub {
	font-size: 0.7812rem;
	max-width: 30rem;
}

#referral-section .ref-socials {
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

#referral-section .ref-social {
	width: 2.625rem;
	height: 2.625rem;
}

#referral-section .ref-actions {
	gap: 0.625rem;
}

#referral-section .ref-row {
	gap: 0.625rem;
	max-width: 32.5rem;
}

#referral-section .ref-btn {
	padding: 0.75rem 0.875rem;
	font-size: 0.75rem;
}

#referral-section .ref-btn-ico {
	width: 0.9375rem;
	height: 0.9375rem;
}

/*
   SCROLLABLE MODAL VARIANT  (referral info — desktop only)
   Uses the existing Modal system; .modal-box--scroll is added
   by Modal.open({ scrollable: true }) and removed on close.
*/

/*  Wider box + scrollable content area  */
.modal-box--scroll {
	max-width: 35rem;
	max-height: 84vh;
}

.modal-box--scroll #modal-content {
	overflow-y: auto;
	max-height: calc(84vh - 0.125rem);
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(212, 170, 56, 0.20) transparent;
}

.modal-box--scroll #modal-content::-webkit-scrollbar {
	width: 0.25rem;
}

.modal-box--scroll #modal-content::-webkit-scrollbar-track {
	background: transparent;
}

.modal-box--scroll #modal-content::-webkit-scrollbar-thumb {
	background: rgba(212, 170, 56, 0.20);
	border-radius: 0.25rem;
}

[data-theme="light"] .modal-box--scroll #modal-content {
	scrollbar-color: rgba(168, 128, 16, 0.20) transparent;
}

[data-theme="light"] .modal-box--scroll #modal-content::-webkit-scrollbar-thumb {
	background: rgba(168, 128, 16, 0.20);
}

/* Drawer-specific adjustments */
/* suppress the drawer's own close handle (modal-close covers it) */
.modal-box--scroll .ref-drawer-close-row {
	display: none;
}

/* header top gap — clears the modal-close button */
.modal-box--scroll .ref-drawer-header {
	padding-top: 1.75rem;
}

/* sticky CTA fade must resolve to the modal-box background token */
.modal-box--scroll .ref-drawer-cta {
	background: linear-gradient(to bottom, transparent 0%, var(--bg-secondary) 40%);
}

/* Light-mode content patches (gaps in components.css) */
[data-theme="light"] .modal-box--scroll .ref-drawer-tier {
	border-color: rgba(168, 128, 16, 0.22);
}

[data-theme="light"] .modal-box--scroll .ref-drawer-tier-row {
	border-top-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .modal-box--scroll .ref-drawer-callout--time {
	background: rgba(37, 99, 235, 0.05);
	border-color: rgba(37, 99, 235, 0.18);
}

[data-theme="light"] .modal-box--scroll .ref-drawer-callout--bind {
	background: rgba(124, 58, 237, 0.05);
	border-color: rgba(124, 58, 237, 0.18);
}

[data-theme="light"] .modal-box--scroll .ref-drawer-callout--time .ref-drawer-callout-icon {
	color: #2563EB;
}

[data-theme="light"] .modal-box--scroll .ref-drawer-callout--bind .ref-drawer-callout-icon {
	color: #7C3AED;
}

[data-theme="light"] .modal-box--scroll .ref-drawer-callout--time .ref-drawer-callout-title {
	color: #1D4ED8;
}

[data-theme="light"] .modal-box--scroll .ref-drawer-callout--bind .ref-drawer-callout-title {
	color: #6D28D9;
}

[data-theme="light"] .modal-box--scroll .ref-drawer-excluded {
	background: rgba(220, 38, 38, 0.04);
	border-color: rgba(220, 38, 38, 0.16);
}

[data-theme="light"] .modal-box--scroll .ref-drawer-section-title::after {
	background: rgba(0, 0, 0, 0.09);
}

/*
   FULL-WIDTH: FOOTER
*/
.d-footer {
	width: 100%;
	padding: 4rem 0 2.5rem;
	background: #12121A;
	border-top: 0.0625rem solid var(--border-subtle);
	--footer-accent: var(--gold);
}

[data-theme="light"] .d-footer {
	background: var(--bg-secondary);
	--footer-accent: var(--gold-dark); /* darker gold reads on the light footer */
}

/* One explicit track for the brand; every link group that renders adds its own
   column beside it. Was a fixed 2fr 1fr 1fr 1fr — four tracks for a row that
   never holds more than three, so there was always a phantom empty column. */
.footer-desktop {
	max-width: var(--d-max);
	margin: 0 auto var(--sp-8, 2rem);
	padding: 0 var(--d-px);
	display: grid;
	grid-template-columns: minmax(0, 2fr);
	grid-auto-flow: column;
	grid-auto-columns: auto;
	gap: 3rem;
	text-align: left;
}

/* A single link group stacked as a column left a narrow ribbon of links stranded
   against the right edge with the middle of the footer empty. Give that group
   the remaining width and run its links along it instead. The view adds the
   modifier only when one group renders, so a second group restores the classic
   column-per-group layout with nothing to undo here. */
.footer-desktop--single {
	grid-template-columns: minmax(0, 1fr) auto;
}

.footer-desktop--single .footer-col-links {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.75rem;
}

/* Hover: an underline sweeping in from the left, not the vertical list's
   indent. Growing padding-left widens the link, which in a row shoves every
   link after it sideways as the pointer crosses them — and animating padding
   relayouts the row each frame. Transforming a pseudo-element moves nothing. */
.footer-desktop--single .footer-col-link {
	padding-left: 0;
	transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-desktop--single .footer-col-link::before {
	left: 0;
	right: 0;
	top: auto;
	bottom: -0.3125rem;
	width: auto;
	transform: scaleX(0);
}

.footer-desktop--single .footer-col-link:hover {
	transform: none;
}

.footer-desktop--single .footer-col-link:hover::before {
	transform: scaleX(1);
}

.footer-bottom-desktop {
	max-width: var(--d-max);
	margin: 0 auto;
	padding: 1.5rem var(--d-px) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 0.0625rem solid var(--border-subtle);
	font-size: 0.6875rem;
	color: var(--text-muted);
}

.footer-col-brand .logo-wrap {
	margin-bottom: 1rem;
}

/* The brand track takes whatever the link columns leave, so the licence text
   needs its own measure — unchecked it ran the better part of 1100px at 1440,
   which is far past a comfortable line length. */
.footer-col-about {
	max-width: 34rem;
	font-size: 0.75rem;
	color: var(--text-muted);
	line-height: 1.8;
	margin-bottom: 1rem;
}

.footer-col-social {
	display: flex;
	gap: 0.5rem;
}

.footer-social-btn {
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	background: var(--bg-card);
	border: 0.0625rem solid var(--border-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social-btn:hover {
	background: rgba(var(--gold-rgb), 0.10);
	border-color: rgba(var(--gold-rgb), 0.25);
}

.footer-col-title {
	position: relative;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1125rem;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 1rem;
	padding-bottom: 0.625rem;
}

.footer-col-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1.5rem;
	height: 0.125rem;
	border-radius: 0.125rem;
	background: var(--footer-accent);
}

.footer-col-links {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.footer-col-link {
	position: relative;
	font-size: 0.8125rem;
	color: var(--text-secondary);
	text-decoration: none;
	cursor: pointer;
	padding-left: 0;
	transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gold leading dash slides in on hover. The indent is a transform, not
   padding-left: the link columns size to their widest link, so padding on
   hover widened the column and shifted its title sideways. */
.footer-col-link::before {
	content: '';
	position: absolute;
	left: -0.875rem;
	top: 50%;
	width: 0.5rem;
	height: 0.0625rem;
	background: var(--footer-accent);
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	opacity: 0;
	transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s;
}

.footer-col-link:hover {
	color: var(--footer-accent);
	transform: translateX(0.875rem);
}

.footer-col-link:hover::before {
	opacity: 1;
	transform: translateY(-50%) scaleX(1);
}

/* .footer-mobile-only removed — mobile footer now lives in mobile/layouts/main.php */

/*
   NOTE: Desktop has NO sidebar / drawer.
   Navigation is handled by .hdr-nav-dropdown above.
*/

/*
   SHARED COMPONENT OVERRIDES (desktop context)
*/
/* Sec head pattern used by transactions */
.sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.sec-title {
	font-family: var(--font-brand);
	font-size: 1rem;
	font-weight: 800;
}

.btn-see-all {
	font-family: var(--font-brand);
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--gold-text);
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-see-all:hover {
	opacity: 1;
}

/*
   PAGE LOADER OVERLAY
   Shown immediately on paint; fades out after window load + delay.
*/
#page-loader {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #07070f;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
	opacity: 1;
	transition: opacity 0.6s ease;
}

#page-loader.hide {
	opacity: 0;
	pointer-events: none;
}

.loader-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.125rem;
	user-select: none;
}

/* Logo mark */
.loader-logo {
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 1rem;
	background: var(--gold-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 2.5rem rgba(var(--gold-rgb), 0.50), 0 0 5rem rgba(var(--gold-rgb), 0.18);
	animation: loader-pulse 2s ease-in-out infinite;
}

.loader-logo svg {
	width: 2.25rem;
	height: 2.25rem;
	fill: var(--text-on-gold);
}

@keyframes loader-pulse {

	0%,
	100% {
		box-shadow: 0 0 2.5rem rgba(var(--gold-rgb), 0.50), 0 0 5rem rgba(var(--gold-rgb), 0.18);
	}

	50% {
		box-shadow: 0 0 3.75rem rgba(var(--gold-rgb), 0.75), 0 0 6.875rem rgba(var(--gold-rgb), 0.30);
	}
}

/* Brand name */
.loader-brand {
	font-family: var(--font-brand, 'Orbitron', sans-serif);
	font-size: 1.375rem;
	font-weight: 900;
	letter-spacing: 0.0625rem;
	color: #fff;
	line-height: 1;
}

.loader-brand span {
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Spinner ring */
.loader-ring {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 0.1875rem solid rgba(var(--gold-rgb), 0.12);
	border-top-color: var(--gold, #f0c040);
	animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Tagline */
.loader-tagline {
	font-size: 0.6875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.35);
	letter-spacing: 0.0562rem;
	text-transform: uppercase;
	margin: 0;
}

/*
   BADGE ANIMATIONS — desktop only
   HOT: warm glow pulse  |  LIVE: red signal glow
*/

/* HOT badge — breathing orange/red glow */
@keyframes gtag-hot-glow {

	0%,
	100% {
		box-shadow: 0 0 0.5rem rgba(249, 115, 22, 0.38);
	}

	50% {
		box-shadow:
			0 0 1.125rem rgba(249, 115, 22, 0.72),
			0 0 2rem rgba(220, 38, 38, 0.28);
	}
}

/* LIVE / vdraw badge — red signal glow */
@keyframes gtag-live-glow {

	0%,
	100% {
		box-shadow: 0 0 0.625rem rgba(220, 38, 38, 0.42);
	}

	50% {
		box-shadow:
			0 0 1.375rem rgba(220, 38, 38, 0.78),
			0 0 2.375rem rgba(220, 38, 38, 0.24);
	}
}

/* Apply to HOT game-card badge */
.gtag--hot {
	animation: gtag-hot-glow 2.2s ease-in-out infinite;
}

/* Apply to LIVE game-card badge */
.gtag--live {
	animation: gtag-live-glow 2s ease-in-out infinite;
}

/* Apply to draw-video card LIVE badge */
.vdraw-live-badge {
	animation: gtag-live-glow 2s ease-in-out infinite;
}