/* =========================================================================
   06 — LIVESTREAM PLAYER + CHAT  (sv-livestream-manager)
   Re-themes the player to the Arena palette by overriding its inline CSS
   variables and adding premium container chrome. No layout change.
   ========================================================================= */

.sv-livestream-wrapper.sv-style-1 {
	--sv-bg-color: var(--s67-bg-elev-1) !important;
	--sv-wrapper-border-color: var(--s67-border) !important;
	--sv-btn-bg: var(--s67-bg-elev-2) !important;
	--sv-btn-text: var(--s67-text) !important;
	--sv-btn-border-color: transparent !important;
	--sv-btn-active-bg: var(--s67-gold-300) !important;
	--sv-btn-active-text: var(--s67-text-on-gold) !important;

	background: var(--s67-bg-elev-1);
	border: 1px solid var(--s67-border);
	border-radius: var(--s67-radius-lg);
	box-shadow: var(--s67-shadow-lg);
	overflow: hidden;
	padding: var(--s67-space-4);
}

/* Channel tabs → pills, with balanced spacing above (wrapper padding) and below */
.sv-channel-tabs {
	gap: var(--s67-space-2) !important;
	padding-bottom: 0 !important;
	margin-bottom: var(--s67-space-4) !important;
	flex-wrap: wrap;
}
.sv-channel-tab {
	padding: 8px 18px !important;
	border-radius: var(--s67-radius-pill) !important;
	background: var(--s67-bg-elev-2) !important;
	color: var(--s67-text) !important;
	border: 1px solid var(--s67-border) !important;
	font-weight: 700;
	font-size: 13px !important;
	letter-spacing: 0.03em;
	line-height: 1;
	transition: transform var(--s67-dur-fast) var(--s67-ease),
		background var(--s67-dur-fast) var(--s67-ease),
		border-color var(--s67-dur-fast) var(--s67-ease),
		color var(--s67-dur-fast) var(--s67-ease);
}
.sv-channel-tab:hover {
	background: var(--s67-bg-elev-3) !important;
	border-color: var(--s67-border-gold) !important;
	color: var(--s67-gold-100) !important;
	transform: translateY(-1px);
}
.sv-channel-tab.active {
	background-image: var(--s67-grad-gold) !important;
	background-color: var(--s67-gold-300) !important;
	color: var(--s67-text-on-gold) !important;
	border-color: transparent !important;
	/* clean depth — gloss highlight + neutral shadow, no tacky gold glow */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 10px -3px rgba(0, 0, 0, 0.5);
}

/* Video frame */
.sv-video-container,
.sv-video-player {
	border-radius: var(--s67-radius-md);
	overflow: hidden;
	background: #000;
}
.sv-video-overlay {
	background: var(--s67-overlay);
	backdrop-filter: blur(3px);
}

/* Loading spinner → gold */
.sv-loading-spinner {
	border-color: var(--s67-border-strong) !important;
	border-top-color: var(--s67-gold-300) !important;
}

/* Chat panel */
.sv-chat-container {
	background: var(--s67-bg-elev-1);
	border: 1px solid var(--s67-border);
	border-radius: var(--s67-radius-md);
	overflow: hidden;
}
.sv-chat-content { background: transparent; }

/* The livestream column wrapper on the homepage.
   Only the player itself (.sv-livestream-wrapper) should look like a card —
   the outer .col-inner.dark must NOT be framed, so the H1 sits outside it. */
.col-livestream .col-inner,
.chat__box .col-inner { background: transparent; }
.col-livestream .col-inner.dark {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Breathing room between the sticky header and the first (livestream) section
   on the homepage — the dark card was sitting flush against the header. */
.home #content > .section:first-of-type {
	padding-top: var(--s67-space-8);
}
@media (max-width: 549px) {
	/* A single gold light "spilling down" from above the header — the source
	   sits just above the section top and fades quickly downward, so it lights
	   the H1 right under the header without flooding the whole block with gold. */
	.home #content > .section:first-of-type {
		padding-top: var(--s67-space-6);
		background-image:
			radial-gradient(620px 210px at 50% -46px, rgba(241, 194, 51, 0.16), transparent 70%) !important;
		background-repeat: no-repeat !important;
		background-position: center top !important;
	}
}

/* --- Prominent homepage headline (sits ABOVE the player, no frame) --------
   Old markup used a red→purple Tailwind gradient; re-do it on-brand as a
   metallic gold-foil gradient text (matching the logo) with a soft glow. */
.home-h1 {
	margin: 0 0 var(--s67-space-4);
}
.home-h1 span {
	background-image: linear-gradient(100deg, #b07d1d 0%, #e8b929 30%, #f8d75a 52%, #fff3c2 72%, #d9a82a 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	font-weight: 800 !important;
	letter-spacing: 0.005em;
	font-size: clamp(24px, 4vw, 42px) !important;
	line-height: 1.12 !important;
	filter: drop-shadow(0 4px 22px rgba(241, 194, 51, 0.30));
}