/* BoostArena Global Design System V1. Every selector is explicitly opt-in through .ba-ds. */

/* 1. Tokens */
.ba-ds {
	--ba-color-white: #ffffff;
	--ba-color-off-white: #f6f7fa;
	--ba-color-ice: #f8fafc;
	--ba-color-black: #05060a;
	--ba-color-navy-900: #09152f;
	--ba-color-ink: #111629;
	--ba-color-slate: #66728c;
	--ba-color-cyan-300: #67dcfa;
	--ba-color-cyan-400: #67e8f9;
	--ba-color-cyan-500: #22d3ee;
	--ba-color-cyan-600: #08a6d8;
	--ba-color-periwinkle: #7d8dff;
	--ba-color-purple: #7c3aed;
	--ba-color-gold: #d6b36a;
	--ba-color-apex: #ff6c56;
	--ba-color-apex-strong: #ff625b;
	--ba-color-apex-secondary: #ff9a54;
	--ba-color-marvel: #8c65ff;
	--ba-color-marvel-strong: #7c3aed;
	--ba-color-marvel-secondary: #57cfff;
	--ba-color-success: #22c55e;
	--ba-color-warning: #8b4c00;
	--ba-color-error: #a23030;
	--ba-color-error-bright: #f87171;

	--ba-page-bg: #f6f7fa;
	--ba-page-bg-dark: #05060a;
	--ba-surface-light: #ffffff;
	--ba-surface-dark: #111629;
	--ba-surface-elevated: rgba(255, 255, 255, .96);
	--ba-brand-primary: #22d3ee;
	--ba-brand-strong: #08a6d8;
	--ba-brand-secondary: #7d8dff;
	--ba-brand-support: #7c3aed;
	--ba-brand-gold: #d6b36a;
	--ba-text-light-primary: #111629;
	--ba-heading-light: #09152f;
	--ba-text-light-secondary: #66728c;
	--ba-text-dark-primary: #f8fafc;
	--ba-text-dark-secondary: #c8d2e7;
	--ba-text-muted-dark: #a8b3c7;
	--ba-border-subtle: rgba(21, 47, 88, .11);
	--ba-border-accent: #72daf7;
	--ba-focus-color: #08a6d8;
	--ba-disabled-bg: #c8d5db;
	--ba-disabled-text: #687a83;
	--ba-overlay-dark: rgba(8, 19, 42, .72);
	--ba-glow-primary: rgba(34, 211, 238, .18);
	--ba-state-success: #22c55e;
	--ba-state-warning: #8b4c00;
	--ba-state-error: #a23030;

	--ba-theme-accent: #22d3ee;
	--ba-theme-accent-strong: #08a6d8;
	--ba-theme-accent-secondary: #7d8dff;
	--ba-theme-ambient-primary: rgba(34, 211, 238, .18);
	--ba-theme-ambient-secondary: rgba(124, 58, 237, .14);
	--ba-theme-glow: rgba(34, 211, 238, .22);
	--ba-theme-texture: none;

	--ba-gradient-button-primary: linear-gradient(90deg, #64dcf8, #7d8dff);
	--ba-gradient-cta-panel: linear-gradient(135deg, rgba(9, 21, 47, .98) 0%, rgba(17, 22, 41, .97) 55%, rgba(58, 35, 101, .94) 100%);

	--ba-font-family: "Outfit", Arial, sans-serif;
	--ba-font-weight-regular: 400;
	--ba-font-weight-semibold: 600;
	--ba-font-weight-bold: 700;
	--ba-font-weight-extrabold: 800;
	--ba-font-weight-black: 900;
	--ba-type-display-size: 76px;
	--ba-type-display-weight: 900;
	--ba-type-display-line-height: .99;
	--ba-type-display-letter-spacing: -.052em;
	--ba-type-hero-size: clamp(52px, 4.2vw, 64px);
	--ba-type-hero-weight: 900;
	--ba-type-hero-line-height: .99;
	--ba-type-hero-letter-spacing: -.052em;
	--ba-type-section-heading-size: clamp(36px, 4.2vw, 54px);
	--ba-type-section-heading-weight: 700;
	--ba-type-section-heading-line-height: 1.06;
	--ba-type-section-heading-letter-spacing: -.035em;
	--ba-type-card-heading-size: 21px;
	--ba-type-card-heading-weight: 700;
	--ba-type-card-heading-line-height: 1.2;
	--ba-type-card-heading-letter-spacing: -.025em;
	--ba-type-body-lg-size: 18px;
	--ba-type-body-lg-weight: 400;
	--ba-type-body-lg-line-height: 1.65;
	--ba-type-body-size: 17px;
	--ba-type-body-weight: 400;
	--ba-type-body-line-height: 1.65;
	--ba-type-small-size: 14px;
	--ba-type-small-line-height: 1.55;
	--ba-type-caption-size: 13px;
	--ba-type-caption-line-height: 1.4;
	--ba-type-eyebrow-size: 13px;
	--ba-type-eyebrow-weight: 800;
	--ba-type-eyebrow-line-height: 1.65;
	--ba-type-eyebrow-letter-spacing: .15em;
	--ba-type-button-size: 14px;
	--ba-type-button-weight: 800;
	--ba-type-field-label-size: 14px;
	--ba-type-field-label-weight: 600;
	--ba-type-field-label-line-height: 1.4;
	--ba-type-helper-size: 14px;
	--ba-type-helper-line-height: 1.55;

	--ba-space-1: 4px;
	--ba-space-2: 8px;
	--ba-space-3: 12px;
	--ba-space-4: 16px;
	--ba-space-5: 24px;
	--ba-space-6: 30px;
	--ba-space-7: 40px;
	--ba-space-8: 48px;
	--ba-space-9: 64px;
	--ba-space-10: 88px;
	--ba-space-11: 104px;
	--ba-container: 1200px;
	--ba-container-wide: 1580px;
	--ba-container-narrow: 760px;
	--ba-section-space: 88px;
	--ba-section-space-compact: 64px;
	--ba-card-gap: 18px;
	--ba-button-gap: 20px;
	--ba-field-gap: 16px;
	--ba-card-padding: 30px;
	--ba-gutter: 64px;
	--ba-header-height: 92px;

	--ba-radius-sm: 9px;
	--ba-radius-control: 11px;
	--ba-radius-card: 18px;
	--ba-radius-panel: 24px;
	--ba-radius-pill: 999px;
	--ba-border-width: 1px;
	--ba-border-accent-width: 3px;
	--ba-shadow-card: 0 18px 52px rgba(21, 34, 70, .08);
	--ba-shadow-elevated: 0 24px 54px rgba(7, 13, 31, .18);
	--ba-shadow-panel: 0 26px 70px rgba(0, 0, 0, .24);
	--ba-art-glow: 0 24px 48px rgba(34, 211, 238, .18), 0 12px 34px rgba(124, 58, 237, .14);
	--ba-focus-ring: 0 0 0 3px #08a6d8;

	--ba-motion-fast: 180ms;
	--ba-motion-standard: 360ms;
	--ba-motion-slow: 720ms;
	--ba-ease-standard: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 1024px) {
	.ba-ds {
		--ba-type-display-size: 58px;
		--ba-type-button-size: 13px;
		--ba-gutter: 40px;
		--ba-header-height: 80px;
	}
}

@media (max-width: 767px) {
	.ba-ds {
		--ba-type-display-size: 50px;
		--ba-type-body-size: 16px;
		--ba-section-space: 68px;
		--ba-section-space-compact: 48px;
		--ba-card-padding: 24px;
		--ba-button-gap: 12px;
		--ba-gutter: 24px;
		--ba-header-height: 72px;
	}
}

/* 2. Scoped foundations */
.ba-ds {
	color: var(--ba-text-light-primary);
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-body-size);
	font-weight: var(--ba-font-weight-regular);
	line-height: var(--ba-type-body-line-height);
	text-rendering: optimizeLegibility;
}

:where(.ba-ds .ba-button, .ba-ds.ba-button, .ba-ds .ba-card, .ba-ds.ba-card, .ba-ds .ba-field, .ba-ds.ba-field, .ba-ds .ba-state, .ba-ds.ba-state, .ba-ds .ba-accordion, .ba-ds.ba-accordion, .ba-ds .ba-cta-panel, .ba-ds.ba-cta-panel, .ba-ds .ba-trust-item, .ba-ds.ba-trust-item, .ba-ds .ba-badge, .ba-ds.ba-badge, .ba-ds .ba-game-card, .ba-ds.ba-game-card, .ba-ds .ba-info-card, .ba-ds.ba-info-card) {
	box-sizing: border-box;
}

/* 3. Typography */
:where(.ba-ds .ba-type--eyebrow, .ba-ds.ba-type--eyebrow, .ba-ds .ba-type--eyebrow-gold, .ba-ds.ba-type--eyebrow-gold) {
	color: var(--ba-theme-accent);
	font-size: var(--ba-type-eyebrow-size);
	font-weight: var(--ba-type-eyebrow-weight);
	letter-spacing: var(--ba-type-eyebrow-letter-spacing);
	line-height: var(--ba-type-eyebrow-line-height);
	margin: 0;
	text-transform: uppercase;
}

:where(.ba-ds .ba-type--eyebrow-gold, .ba-ds.ba-type--eyebrow-gold) {
	color: var(--ba-brand-gold);
}

:where(.ba-ds .ba-type--display, .ba-ds.ba-type--display) {
	font-size: var(--ba-type-display-size);
	font-weight: var(--ba-type-display-weight);
	letter-spacing: var(--ba-type-display-letter-spacing);
	line-height: var(--ba-type-display-line-height);
	margin: 0;
}

:where(.ba-ds .ba-type--hero, .ba-ds.ba-type--hero) {
	font-size: var(--ba-type-hero-size);
	font-weight: var(--ba-type-hero-weight);
	letter-spacing: var(--ba-type-hero-letter-spacing);
	line-height: var(--ba-type-hero-line-height);
	margin: 0;
}

:where(.ba-ds .ba-type--section-heading, .ba-ds.ba-type--section-heading) {
	font-size: var(--ba-type-section-heading-size);
	font-weight: var(--ba-type-section-heading-weight);
	letter-spacing: var(--ba-type-section-heading-letter-spacing);
	line-height: var(--ba-type-section-heading-line-height);
	margin: 0;
}

:where(.ba-ds .ba-type--card-heading, .ba-ds.ba-type--card-heading) {
	font-size: var(--ba-type-card-heading-size);
	font-weight: var(--ba-type-card-heading-weight);
	letter-spacing: var(--ba-type-card-heading-letter-spacing);
	line-height: var(--ba-type-card-heading-line-height);
	margin: 0;
}

:where(.ba-ds .ba-type--body-lg, .ba-ds.ba-type--body-lg) {
	font-size: var(--ba-type-body-lg-size);
	font-weight: var(--ba-type-body-lg-weight);
	line-height: var(--ba-type-body-lg-line-height);
	margin: 0;
}

:where(.ba-ds .ba-type--body, .ba-ds.ba-type--body, .ba-ds .ba-type--body-muted, .ba-ds.ba-type--body-muted) {
	font-size: var(--ba-type-body-size);
	font-weight: var(--ba-type-body-weight);
	line-height: var(--ba-type-body-line-height);
	margin: 0;
}

:where(.ba-ds .ba-type--body-muted, .ba-ds.ba-type--body-muted) {
	color: var(--ba-text-light-secondary);
}

:where(.ba-ds .ba-type--small, .ba-ds.ba-type--small) {
	font-size: var(--ba-type-small-size);
	line-height: var(--ba-type-small-line-height);
	margin: 0;
}

:where(.ba-ds .ba-type--caption, .ba-ds.ba-type--caption) {
	font-size: var(--ba-type-caption-size);
	line-height: var(--ba-type-caption-line-height);
	margin: 0;
}

/* 4. Layout */
:where(.ba-ds .ba-section, .ba-ds.ba-section) {
	box-sizing: border-box;
	padding-block: var(--ba-section-space);
	position: relative;
}

:where(.ba-ds .ba-section--compact, .ba-ds.ba-section--compact) {
	padding-block: var(--ba-section-space-compact);
}

:where(.ba-ds .ba-section--light, .ba-ds.ba-section--light) {
	background: var(--ba-page-bg);
	color: var(--ba-text-light-primary);
}

:where(.ba-ds .ba-section--dark, .ba-ds.ba-section--dark) {
	background: var(--ba-page-bg-dark);
	color: var(--ba-text-dark-primary);
}

:where(.ba-ds .ba-section--ambient, .ba-ds.ba-section--ambient) {
	background-color: var(--ba-page-bg-dark);
	background-image: radial-gradient(circle at 18% 20%, var(--ba-theme-ambient-primary), transparent 42%), radial-gradient(circle at 82% 74%, var(--ba-theme-ambient-secondary), transparent 46%), var(--ba-theme-texture);
	color: var(--ba-text-dark-primary);
}

:where(.ba-ds .ba-container, .ba-ds.ba-container) {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(var(--ba-container) + (2 * var(--ba-gutter)));
	padding-inline: var(--ba-gutter);
	width: 100%;
}

:where(.ba-ds .ba-container--wide, .ba-ds.ba-container--wide) {
	max-width: calc(var(--ba-container-wide) + (2 * var(--ba-gutter)));
}

:where(.ba-ds .ba-container--narrow, .ba-ds.ba-container--narrow) {
	max-width: calc(var(--ba-container-narrow) + (2 * var(--ba-gutter)));
}

/* 5. Buttons */
:where(.ba-ds .ba-button, .ba-ds.ba-button) {
	align-items: center;
	appearance: none;
	border: var(--ba-border-width) solid transparent;
	border-radius: var(--ba-radius-control);
	box-shadow: none;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--ba-type-button-size);
	font-weight: var(--ba-type-button-weight);
	gap: var(--ba-space-2);
	justify-content: center;
	letter-spacing: .08em;
	line-height: 1;
	min-height: 48px;
	padding: 0 var(--ba-space-5);
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform var(--ba-motion-fast) var(--ba-ease-standard), box-shadow var(--ba-motion-fast) var(--ba-ease-standard), border-color var(--ba-motion-fast) var(--ba-ease-standard), background-color var(--ba-motion-fast) var(--ba-ease-standard);
	user-select: none;
}

:where(.ba-ds .ba-button--primary, .ba-ds.ba-button--primary) {
	background: var(--ba-gradient-button-primary);
	color: var(--ba-color-navy-900);
}

:where(.ba-ds .ba-button--secondary, .ba-ds.ba-button--secondary) {
	background: transparent;
	border-color: var(--ba-theme-accent);
	color: var(--ba-theme-accent-strong);
}

:where(.ba-ds .ba-button--tertiary, .ba-ds.ba-button--tertiary) {
	background: rgba(34, 211, 238, .08);
	color: var(--ba-theme-accent-strong);
}

:where(.ba-ds .ba-button--compact, .ba-ds.ba-button--compact) {
	min-height: 40px;
	padding-inline: var(--ba-space-4);
}

:where(.ba-ds .ba-button--full, .ba-ds.ba-button--full) {
	width: 100%;
}

:where(.ba-ds .ba-button__icon, .ba-ds.ba-button__icon) {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

:where(.ba-ds .ba-button__label, .ba-ds.ba-button__label) {
	display: inline-block;
}

:where(.ba-ds .ba-button, .ba-ds.ba-button):hover:not(:disabled):not([aria-disabled="true"]) {
	box-shadow: var(--ba-shadow-elevated);
	transform: translateY(-2px);
}

:where(.ba-ds .ba-button, .ba-ds.ba-button):focus-visible {
	box-shadow: var(--ba-focus-ring);
	outline: 0;
}

:where(.ba-ds .ba-button, .ba-ds.ba-button):disabled,
:where(.ba-ds .ba-button, .ba-ds.ba-button)[aria-disabled="true"] {
	background: var(--ba-disabled-bg);
	border-color: transparent;
	box-shadow: none;
	color: var(--ba-disabled-text);
	cursor: not-allowed;
	transform: none;
}

:where(.ba-ds .ba-button, .ba-ds.ba-button).is-loading {
	color: transparent;
	cursor: wait;
	overflow: hidden;
	pointer-events: none;
}

:where(.ba-ds .ba-button, .ba-ds.ba-button).is-loading::after {
	color: var(--ba-color-navy-900);
	content: "…";
	font-size: 20px;
	inset: 50% auto auto 50%;
	line-height: 1;
	position: absolute;
	transform: translate(-50%, -55%);
}

/* 6. Cards */
:where(.ba-ds .ba-card, .ba-ds.ba-card) {
	background: var(--ba-surface-light);
	border: var(--ba-border-width) solid var(--ba-border-subtle);
	border-radius: var(--ba-radius-card);
	border-top: var(--ba-border-accent-width) solid transparent;
	box-shadow: var(--ba-shadow-card);
	color: var(--ba-text-light-primary);
	padding: var(--ba-card-padding);
}

:where(.ba-ds .ba-card--light, .ba-ds.ba-card--light) {
	background: var(--ba-surface-light);
	color: var(--ba-text-light-primary);
}

:where(.ba-ds .ba-card--dark, .ba-ds.ba-card--dark) {
	background: var(--ba-surface-dark);
	border-color: rgba(255, 255, 255, .1);
	color: var(--ba-text-dark-primary);
}

:where(.ba-ds .ba-card--accent-top, .ba-ds.ba-card--accent-top) {
	border-top: 3px solid #72daf7;
}

:where(.ba-ds .ba-card--interactive, .ba-ds.ba-card--interactive) {
	cursor: pointer;
	transition: transform var(--ba-motion-standard) var(--ba-ease-standard), box-shadow var(--ba-motion-standard) var(--ba-ease-standard), border-color var(--ba-motion-fast) var(--ba-ease-standard);
}

:where(.ba-ds .ba-card--interactive, .ba-ds.ba-card--interactive):hover:not(.ba-card--disabled) {
	box-shadow: var(--ba-shadow-elevated);
	transform: translateY(-6px) scale(1.01);
}

:where(.ba-ds .ba-card--interactive, .ba-ds.ba-card--interactive):focus-visible {
	box-shadow: var(--ba-focus-ring), var(--ba-shadow-elevated);
	outline: 0;
}

:where(.ba-ds .ba-card--static, .ba-ds.ba-card--static) {
	cursor: default;
	transform: none;
}

:where(.ba-ds .ba-card--selected, .ba-ds.ba-card--selected) {
	border-color: var(--ba-theme-accent-strong);
	box-shadow: 0 0 0 2px var(--ba-theme-glow), var(--ba-shadow-card);
}

:where(.ba-ds .ba-card--disabled, .ba-ds.ba-card--disabled) {
	box-shadow: none;
	cursor: not-allowed;
	filter: grayscale(.35);
	opacity: .58;
	pointer-events: none;
	transform: none;
}

/* 7. Forms */
:where(.ba-ds .ba-field, .ba-ds.ba-field) {
	display: grid;
	gap: var(--ba-space-2);
}

:where(.ba-ds .ba-field__label, .ba-ds.ba-field__label) {
	color: var(--ba-heading-light);
	font-size: var(--ba-type-field-label-size);
	font-weight: var(--ba-type-field-label-weight);
	line-height: var(--ba-type-field-label-line-height);
}

:where(.ba-ds .ba-field__control, .ba-ds.ba-field__control, .ba-ds .ba-input, .ba-ds.ba-input, .ba-ds .ba-select, .ba-ds.ba-select) {
	background: var(--ba-surface-light);
	border: var(--ba-border-width) solid var(--ba-border-subtle);
	border-radius: var(--ba-radius-control);
	box-sizing: border-box;
	color: var(--ba-text-light-primary);
	font: inherit;
	min-height: 48px;
	padding: var(--ba-space-3) var(--ba-space-4);
	transition: border-color var(--ba-motion-fast) var(--ba-ease-standard), box-shadow var(--ba-motion-fast) var(--ba-ease-standard), background-color var(--ba-motion-fast) var(--ba-ease-standard);
	width: 100%;
}

:where(.ba-ds .ba-field__control, .ba-ds.ba-field__control, .ba-ds .ba-input, .ba-ds.ba-input, .ba-ds .ba-select, .ba-ds.ba-select):focus-visible,
:where(.ba-ds .ba-checkbox, .ba-ds.ba-checkbox, .ba-ds .ba-radio, .ba-ds.ba-radio):focus-visible {
	border-color: var(--ba-focus-color);
	box-shadow: var(--ba-focus-ring);
	outline: 0;
}

:where(.ba-ds .ba-checkbox, .ba-ds.ba-checkbox, .ba-ds .ba-radio, .ba-ds.ba-radio) {
	accent-color: var(--ba-theme-accent-strong);
	box-sizing: border-box;
	height: 20px;
	margin: 0;
	width: 20px;
}

:where(.ba-ds .ba-field__help, .ba-ds.ba-field__help, .ba-ds .ba-field__error, .ba-ds.ba-field__error) {
	font-size: var(--ba-type-helper-size);
	line-height: var(--ba-type-helper-line-height);
	margin: 0;
}

:where(.ba-ds .ba-field__help, .ba-ds.ba-field__help) {
	color: var(--ba-text-light-secondary);
}

:where(.ba-ds .ba-field__error, .ba-ds.ba-field__error) {
	color: var(--ba-state-error);
}

:where(.ba-ds .ba-field, .ba-ds.ba-field).is-disabled {
	cursor: not-allowed;
	opacity: .68;
}

:where(.ba-ds .ba-field__control, .ba-ds.ba-field__control, .ba-ds .ba-input, .ba-ds.ba-input, .ba-ds .ba-select, .ba-ds.ba-select):disabled,
:where(.ba-ds .ba-field__control, .ba-ds.ba-field__control, .ba-ds .ba-input, .ba-ds.ba-input, .ba-ds .ba-select, .ba-ds.ba-select)[aria-disabled="true"] {
	background: var(--ba-disabled-bg);
	color: var(--ba-disabled-text);
	cursor: not-allowed;
}

:where(.ba-ds .ba-field__control, .ba-ds.ba-field__control, .ba-ds .ba-input, .ba-ds.ba-input, .ba-ds .ba-select, .ba-ds.ba-select)[aria-invalid="true"] {
	border-color: var(--ba-state-error);
	box-shadow: 0 0 0 3px rgba(162, 48, 48, .16);
}

/* 8. System states */
:where(.ba-ds .ba-state, .ba-ds.ba-state) {
	background: var(--ba-surface-elevated);
	border: var(--ba-border-width) solid var(--ba-border-subtle);
	border-inline-start: var(--ba-border-accent-width) solid var(--ba-theme-accent);
	border-radius: var(--ba-radius-control);
	display: grid;
	gap: var(--ba-space-3);
	padding: var(--ba-space-5);
}

:where(.ba-ds .ba-state--loading, .ba-ds.ba-state--loading) {
	border-inline-start-color: var(--ba-theme-accent);
}

:where(.ba-ds .ba-state--empty, .ba-ds.ba-state--empty, .ba-ds .ba-state--notice, .ba-ds.ba-state--notice) {
	border-inline-start-color: var(--ba-brand-secondary);
}

:where(.ba-ds .ba-state--error, .ba-ds.ba-state--error, .ba-ds .ba-state--unavailable, .ba-ds.ba-state--unavailable) {
	border-inline-start-color: var(--ba-state-error);
}

:where(.ba-ds .ba-state--success, .ba-ds.ba-state--success) {
	border-inline-start-color: var(--ba-state-success);
}

:where(.ba-ds .ba-state--held, .ba-ds.ba-state--held) {
	border-inline-start-color: var(--ba-state-warning);
}

:where(.ba-ds .ba-state__title, .ba-ds.ba-state__title) {
	color: var(--ba-heading-light);
	font-size: var(--ba-type-card-heading-size);
	font-weight: var(--ba-type-card-heading-weight);
	line-height: var(--ba-type-card-heading-line-height);
	margin: 0;
}

:where(.ba-ds .ba-state__message, .ba-ds.ba-state__message) {
	color: var(--ba-text-light-secondary);
	font-size: var(--ba-type-body-size);
	line-height: var(--ba-type-body-line-height);
	margin: 0;
}

:where(.ba-ds .ba-state__actions, .ba-ds.ba-state__actions) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ba-button-gap);
}

/* 9. Content components */
:where(.ba-ds .ba-accordion, .ba-ds.ba-accordion) {
	border-block: var(--ba-border-width) solid var(--ba-border-subtle);
}

:where(.ba-ds .ba-accordion__item, .ba-ds.ba-accordion__item) {
	border-block-end: var(--ba-border-width) solid var(--ba-border-subtle);
}

:where(.ba-ds .ba-accordion__item, .ba-ds.ba-accordion__item):last-child {
	border-block-end: 0;
}

:where(.ba-ds .ba-accordion__trigger, .ba-ds.ba-accordion__trigger) {
	align-items: center;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-weight: var(--ba-font-weight-bold);
	justify-content: space-between;
	padding: var(--ba-space-5) 0;
	text-align: start;
	width: 100%;
}

:where(.ba-ds .ba-accordion__trigger, .ba-ds.ba-accordion__trigger):focus-visible {
	box-shadow: var(--ba-focus-ring);
	outline: 0;
}

:where(.ba-ds .ba-accordion__panel, .ba-ds.ba-accordion__panel) {
	color: var(--ba-text-light-secondary);
	padding: 0 0 var(--ba-space-5);
}

:where(.ba-ds .ba-cta-panel, .ba-ds.ba-cta-panel) {
	background: var(--ba-gradient-cta-panel);
	border: var(--ba-border-width) solid rgba(255, 255, 255, .12);
	border-radius: var(--ba-radius-panel);
	box-shadow: var(--ba-shadow-panel);
	color: var(--ba-text-dark-primary);
	padding: var(--ba-card-padding);
}

:where(.ba-ds .ba-trust-item, .ba-ds.ba-trust-item) {
	align-items: flex-start;
	display: flex;
	gap: var(--ba-space-3);
}

:where(.ba-ds .ba-badge, .ba-ds.ba-badge) {
	align-items: center;
	background: rgba(34, 211, 238, .1);
	border: var(--ba-border-width) solid var(--ba-theme-accent);
	border-radius: var(--ba-radius-pill);
	color: var(--ba-theme-accent-strong);
	display: inline-flex;
	font-size: var(--ba-type-caption-size);
	font-weight: var(--ba-font-weight-extrabold);
	letter-spacing: .08em;
	line-height: var(--ba-type-caption-line-height);
	padding: var(--ba-space-1) var(--ba-space-3);
	text-transform: uppercase;
}

:where(.ba-ds .ba-game-card, .ba-ds.ba-game-card, .ba-ds .ba-info-card, .ba-ds.ba-info-card) {
	background: var(--ba-surface-light);
	border: var(--ba-border-width) solid var(--ba-border-subtle);
	border-radius: var(--ba-radius-card);
	box-shadow: var(--ba-shadow-card);
	color: var(--ba-text-light-primary);
	padding: var(--ba-card-padding);
}

:where(.ba-ds .ba-hero-divider, .ba-ds.ba-hero-divider) {
	--ba-hero-divider-color: currentColor;
	--ba-hero-divider-height: 0px;
	block-size: var(--ba-hero-divider-height);
	color: var(--ba-hero-divider-color);
	overflow: clip;
}

:where(.ba-ds .ba-ambient-glow, .ba-ds.ba-ambient-glow) {
	--ba-ambient-glow-size: 320px;
	background: radial-gradient(circle, var(--ba-theme-glow), transparent 68%);
	block-size: var(--ba-ambient-glow-size);
	inline-size: var(--ba-ambient-glow-size);
	pointer-events: none;
}

:where(.ba-ds .ba-galaxy, .ba-ds.ba-galaxy) {
	--ba-galaxy-opacity: 0;
	contain: layout paint;
	opacity: var(--ba-galaxy-opacity);
	pointer-events: none;
}

:where(.ba-ds .ba-artwork, .ba-ds.ba-artwork) {
	--ba-artwork-fit: contain;
	display: block;
	filter: var(--ba-artwork-filter, none);
	max-inline-size: 100%;
	object-fit: var(--ba-artwork-fit);
}

:where(.ba-ds .ba-section-transition, .ba-ds.ba-section-transition) {
	--ba-section-transition-color: transparent;
	background: var(--ba-section-transition-color);
	contain: paint;
}

/* 10. Themes */
.ba-ds .ba-theme--default,
.ba-ds.ba-theme--default {
	--ba-theme-accent: #22d3ee;
	--ba-theme-accent-strong: #08a6d8;
	--ba-theme-accent-secondary: #7d8dff;
	--ba-theme-ambient-primary: rgba(34, 211, 238, .18);
	--ba-theme-ambient-secondary: rgba(124, 58, 237, .14);
	--ba-theme-glow: rgba(34, 211, 238, .22);
	--ba-theme-texture: none;
}

.ba-ds .ba-theme--apex,
.ba-ds.ba-theme--apex {
	--ba-theme-accent: #ff6c56;
	--ba-theme-accent-strong: #ff625b;
	--ba-theme-accent-secondary: #ff9a54;
	--ba-theme-ambient-primary: rgba(255, 108, 86, .18);
	--ba-theme-ambient-secondary: rgba(255, 154, 84, .14);
	--ba-theme-glow: rgba(255, 108, 86, .22);
	--ba-theme-texture: none;
}

.ba-ds .ba-theme--marvel,
.ba-ds.ba-theme--marvel {
	--ba-theme-accent: #8c65ff;
	--ba-theme-accent-strong: #7c3aed;
	--ba-theme-accent-secondary: #57cfff;
	--ba-theme-ambient-primary: rgba(140, 101, 255, .18);
	--ba-theme-ambient-secondary: rgba(87, 207, 255, .14);
	--ba-theme-glow: rgba(140, 101, 255, .22);
	--ba-theme-texture: none;
}

/* 11. Motion and reduced motion */
:where(.ba-ds .ba-reveal, .ba-ds.ba-reveal) {
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--ba-motion-standard) var(--ba-ease-standard), transform var(--ba-motion-standard) var(--ba-ease-standard);
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	:where(.ba-ds .ba-button, .ba-ds.ba-button, .ba-ds .ba-card--interactive, .ba-ds.ba-card--interactive, .ba-ds .ba-reveal, .ba-ds.ba-reveal, .ba-ds .ba-ambient-glow, .ba-ds.ba-ambient-glow, .ba-ds .ba-galaxy, .ba-ds.ba-galaxy, .ba-ds .ba-artwork, .ba-ds.ba-artwork) {
		animation-delay: 0ms;
		animation-duration: 0ms;
		animation-iteration-count: 1;
		transform: none;
		transition-delay: 0ms;
		transition-duration: 0ms;
	}

	:where(.ba-ds .ba-reveal, .ba-ds.ba-reveal) {
		opacity: 1;
		visibility: visible;
	}
}

/* 12. Minimal utilities */
:where(.ba-ds .ba-u-text-center, .ba-ds.ba-u-text-center) {
	text-align: center;
}

:where(.ba-ds .ba-u-stack, .ba-ds.ba-u-stack) {
	display: grid;
	gap: var(--ba-stack-gap, var(--ba-space-5));
}

:where(.ba-ds .ba-u-visually-hidden, .ba-ds.ba-u-visually-hidden) {
	block-size: 1px;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* 13. ELEMENTOR ADAPTER
 * Elementor stores semantic classes on widget/container wrappers. These rules
 * forward the existing V1 contract to the rendered node without changing the
 * public class API. Every override remains opt-in through .ba-ds.
 */

/* Sections placed directly on Elementor containers. */
.ba-ds .ba-section.e-con,
.ba-ds.ba-section.e-con {
	box-sizing: border-box;
	padding-block: var(--ba-section-space);
	position: relative;
}

.ba-ds .ba-section--compact.e-con,
.ba-ds.ba-section--compact.e-con {
	padding-block: var(--ba-section-space-compact);
}

.ba-ds .ba-section--light.e-con,
.ba-ds.ba-section--light.e-con {
	background: var(--ba-page-bg);
	color: var(--ba-text-light-primary);
}

.ba-ds .ba-section--dark.e-con,
.ba-ds.ba-section--dark.e-con {
	background: var(--ba-page-bg-dark);
	color: var(--ba-text-dark-primary);
}

.ba-ds .ba-section--ambient.e-con,
.ba-ds.ba-section--ambient.e-con {
	background-color: var(--ba-page-bg-dark);
	background-image: radial-gradient(circle at 18% 20%, var(--ba-theme-ambient-primary), transparent 42%), radial-gradient(circle at 82% 74%, var(--ba-theme-ambient-secondary), transparent 46%), var(--ba-theme-texture);
	color: var(--ba-text-dark-primary);
}

/* Containers preserve Elementor layout mechanics and only own the V1 frame. */
.ba-ds .ba-container.e-con,
.ba-ds.ba-container.e-con {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(var(--ba-container) + (2 * var(--ba-gutter)));
	padding-inline: var(--ba-gutter) !important;
	width: 100%;
}

.ba-ds .ba-container--wide.e-con,
.ba-ds.ba-container--wide.e-con {
	max-width: calc(var(--ba-container-wide) + (2 * var(--ba-gutter)));
}

.ba-ds .ba-container--narrow.e-con,
.ba-ds.ba-container--narrow.e-con {
	max-width: calc(var(--ba-container-narrow) + (2 * var(--ba-gutter)));
}

/* Heading widget wrappers forward typography to Elementor's rendered title. */
.ba-ds .ba-type--eyebrow.elementor-widget-heading .elementor-heading-title,
.ba-ds.ba-type--eyebrow.elementor-widget-heading .elementor-heading-title,
.ba-ds .ba-type--eyebrow-gold.elementor-widget-heading .elementor-heading-title,
.ba-ds.ba-type--eyebrow-gold.elementor-widget-heading .elementor-heading-title {
	color: var(--ba-theme-accent) !important;
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-eyebrow-size) !important;
	font-weight: var(--ba-type-eyebrow-weight) !important;
	letter-spacing: var(--ba-type-eyebrow-letter-spacing) !important;
	line-height: var(--ba-type-eyebrow-line-height) !important;
	margin: 0;
	text-transform: uppercase;
}

.ba-ds .ba-type--eyebrow-gold.elementor-widget-heading .elementor-heading-title,
.ba-ds.ba-type--eyebrow-gold.elementor-widget-heading .elementor-heading-title {
	color: var(--ba-brand-gold) !important;
}

.ba-ds .ba-type--display.elementor-widget-heading .elementor-heading-title,
.ba-ds.ba-type--display.elementor-widget-heading .elementor-heading-title {
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-display-size) !important;
	font-weight: var(--ba-type-display-weight) !important;
	letter-spacing: var(--ba-type-display-letter-spacing) !important;
	line-height: var(--ba-type-display-line-height) !important;
	margin: 0;
}

.ba-ds .ba-type--hero.elementor-widget-heading .elementor-heading-title,
.ba-ds.ba-type--hero.elementor-widget-heading .elementor-heading-title {
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-hero-size) !important;
	font-weight: var(--ba-type-hero-weight) !important;
	letter-spacing: var(--ba-type-hero-letter-spacing) !important;
	line-height: var(--ba-type-hero-line-height) !important;
	margin: 0;
}

.ba-ds .ba-type--section-heading.elementor-widget-heading .elementor-heading-title,
.ba-ds.ba-type--section-heading.elementor-widget-heading .elementor-heading-title {
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-section-heading-size) !important;
	font-weight: var(--ba-type-section-heading-weight) !important;
	letter-spacing: var(--ba-type-section-heading-letter-spacing) !important;
	line-height: var(--ba-type-section-heading-line-height) !important;
	margin: 0;
}

.ba-ds .ba-type--card-heading.elementor-widget-heading .elementor-heading-title,
.ba-ds.ba-type--card-heading.elementor-widget-heading .elementor-heading-title {
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-card-heading-size) !important;
	font-weight: var(--ba-type-card-heading-weight) !important;
	letter-spacing: var(--ba-type-card-heading-letter-spacing) !important;
	line-height: var(--ba-type-card-heading-line-height) !important;
	margin: 0;
}

/* Text Editor wrappers forward only to their own rendered content container. */
.ba-ds .ba-type--body-lg.elementor-widget-text-editor > .elementor-widget-container,
.ba-ds.ba-type--body-lg.elementor-widget-text-editor > .elementor-widget-container {
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-body-lg-size);
	font-weight: var(--ba-type-body-lg-weight);
	line-height: var(--ba-type-body-lg-line-height);
	margin: 0;
}

.ba-ds .ba-type--body.elementor-widget-text-editor > .elementor-widget-container,
.ba-ds.ba-type--body.elementor-widget-text-editor > .elementor-widget-container,
.ba-ds .ba-type--body-muted.elementor-widget-text-editor > .elementor-widget-container,
.ba-ds.ba-type--body-muted.elementor-widget-text-editor > .elementor-widget-container {
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-body-size);
	font-weight: var(--ba-type-body-weight);
	line-height: var(--ba-type-body-line-height);
	margin: 0;
}

.ba-ds .ba-type--body-muted.elementor-widget-text-editor > .elementor-widget-container,
.ba-ds.ba-type--body-muted.elementor-widget-text-editor > .elementor-widget-container {
	color: var(--ba-text-light-secondary);
}

.ba-ds .ba-type--small.elementor-widget-text-editor > .elementor-widget-container,
.ba-ds.ba-type--small.elementor-widget-text-editor > .elementor-widget-container {
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-small-size);
	line-height: var(--ba-type-small-line-height);
	margin: 0;
}

.ba-ds .ba-type--caption.elementor-widget-text-editor > .elementor-widget-container,
.ba-ds.ba-type--caption.elementor-widget-text-editor > .elementor-widget-container {
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-caption-size);
	line-height: var(--ba-type-caption-line-height);
	margin: 0;
}

/* Keep the Elementor widget wrapper structural; render the button on its link. */
.ba-ds .ba-button.elementor-widget-button,
.ba-ds.ba-button.elementor-widget-button {
	align-items: initial;
	appearance: auto;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	cursor: inherit;
	display: block;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	gap: normal;
	justify-content: normal;
	letter-spacing: normal;
	line-height: inherit;
	min-height: 0;
	overflow: visible;
	padding: 0;
	pointer-events: auto;
	text-align: initial;
	text-decoration: initial;
	text-transform: none;
	transform: none;
	transition: none;
	user-select: auto;
	width: auto;
}

.ba-ds .ba-button.elementor-widget-button::after,
.ba-ds.ba-button.elementor-widget-button::after {
	content: none;
}

.ba-ds .ba-button.elementor-widget-button .elementor-button,
.ba-ds.ba-button.elementor-widget-button .elementor-button {
	align-items: center;
	appearance: none;
	border: var(--ba-border-width) solid transparent !important;
	border-radius: var(--ba-radius-control) !important;
	box-shadow: none !important;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--ba-font-family);
	font-size: var(--ba-type-button-size);
	font-weight: var(--ba-type-button-weight) !important;
	gap: var(--ba-space-2);
	justify-content: center;
	letter-spacing: .08em;
	line-height: 1;
	min-height: 48px;
	padding: 0 var(--ba-space-5) !important;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform var(--ba-motion-fast) var(--ba-ease-standard), box-shadow var(--ba-motion-fast) var(--ba-ease-standard), border-color var(--ba-motion-fast) var(--ba-ease-standard), background-color var(--ba-motion-fast) var(--ba-ease-standard) !important;
	user-select: none;
}

.ba-ds .ba-button--primary.elementor-widget-button .elementor-button,
.ba-ds.ba-button--primary.elementor-widget-button .elementor-button {
	background: var(--ba-gradient-button-primary) !important;
	color: var(--ba-color-navy-900) !important;
}

.ba-ds .ba-button--secondary.elementor-widget-button .elementor-button,
.ba-ds.ba-button--secondary.elementor-widget-button .elementor-button {
	background: transparent !important;
	border-color: var(--ba-theme-accent) !important;
	color: var(--ba-theme-accent-strong) !important;
}

.ba-ds .ba-button--tertiary.elementor-widget-button .elementor-button,
.ba-ds.ba-button--tertiary.elementor-widget-button .elementor-button {
	background: rgba(34, 211, 238, .08) !important;
	color: var(--ba-theme-accent-strong) !important;
}

.ba-ds .ba-button--compact.elementor-widget-button .elementor-button,
.ba-ds.ba-button--compact.elementor-widget-button .elementor-button {
	min-height: 40px;
	padding-inline: var(--ba-space-4) !important;
}

.ba-ds .ba-button--full.elementor-widget-button .elementor-button,
.ba-ds.ba-button--full.elementor-widget-button .elementor-button {
	width: 100%;
}

.ba-ds .ba-button.elementor-widget-button:not([aria-disabled="true"]) .elementor-button:hover:not(:disabled):not([aria-disabled="true"]),
.ba-ds.ba-button.elementor-widget-button:not([aria-disabled="true"]) .elementor-button:hover:not(:disabled):not([aria-disabled="true"]) {
	box-shadow: var(--ba-shadow-elevated) !important;
	transform: translateY(-2px);
}

.ba-ds .ba-button.elementor-widget-button .elementor-button:focus-visible,
.ba-ds.ba-button.elementor-widget-button .elementor-button:focus-visible {
	box-shadow: var(--ba-focus-ring) !important;
	outline: 0 !important;
}

.ba-ds .ba-button.elementor-widget-button .elementor-button:disabled,
.ba-ds.ba-button.elementor-widget-button .elementor-button:disabled,
.ba-ds .ba-button.elementor-widget-button .elementor-button[aria-disabled="true"],
.ba-ds.ba-button.elementor-widget-button .elementor-button[aria-disabled="true"],
.ba-ds .ba-button.elementor-widget-button[aria-disabled="true"] .elementor-button,
.ba-ds.ba-button.elementor-widget-button[aria-disabled="true"] .elementor-button {
	background: var(--ba-disabled-bg) !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: var(--ba-disabled-text) !important;
	cursor: not-allowed;
	transform: none;
}

.ba-ds .ba-button.elementor-widget-button.is-loading .elementor-button,
.ba-ds.ba-button.elementor-widget-button.is-loading .elementor-button {
	color: transparent !important;
	cursor: wait;
	overflow: hidden;
	pointer-events: none;
}

.ba-ds .ba-button.elementor-widget-button.is-loading .elementor-button::after,
.ba-ds.ba-button.elementor-widget-button.is-loading .elementor-button::after {
	color: var(--ba-color-navy-900);
	content: "…";
	font-size: 20px;
	inset: 50% auto auto 50%;
	line-height: 1;
	position: absolute;
	transform: translate(-50%, -55%);
}

@media (prefers-reduced-motion: reduce) {
	.ba-ds .ba-button.elementor-widget-button .elementor-button,
	.ba-ds.ba-button.elementor-widget-button .elementor-button {
		animation-delay: 0ms;
		animation-duration: 0ms;
		animation-iteration-count: 1;
		transform: none !important;
		transition-delay: 0ms !important;
		transition-duration: 0ms !important;
	}
}