.nss-live-section {
	--nss-void: #0A0705;
	--nss-ink: #170408;
	--nss-maroon: #2B0D14;
	--nss-maroon-2: #4a1a2c;
	--nss-plum: #1D0E17;
	--nss-deep: #14101F;
	--nss-gold: #C9A227;
	--nss-gold-light: #E8C766;
	--nss-marigold: #EFA23B;
	--nss-marigold-deep: #D98A3D;
	--nss-ivory: #FBF1DE;
	--nss-ivory-dim: rgba(251, 241, 222, 0.62);
	--nss-ember: #E5484D;

	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 88px 20px 76px;
	background:
		radial-gradient(ellipse 900px 500px at 50% -12%, rgba(201, 162, 39, 0.16), transparent 65%),
		radial-gradient(ellipse at 50% -10%, var(--nss-maroon) 0%, var(--nss-deep) 55%, var(--nss-void) 100%);
	overflow: hidden;
	box-sizing: border-box;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.nss-live-section *,
.nss-live-section *::before,
.nss-live-section *::after {
	box-sizing: border-box;
}

/* scattered twinkling stars across the whole section */
.nss-live-stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1.5px 1.5px at 10% 20%, rgba(251,241,222,0.5), transparent),
		radial-gradient(1.5px 1.5px at 80% 15%, rgba(251,241,222,0.4), transparent),
		radial-gradient(1px 1px at 30% 70%, rgba(251,241,222,0.4), transparent),
		radial-gradient(1.5px 1.5px at 60% 85%, rgba(251,241,222,0.35), transparent),
		radial-gradient(1px 1px at 90% 60%, rgba(251,241,222,0.4), transparent),
		radial-gradient(1.5px 1.5px at 45% 8%, rgba(232,199,102,0.5), transparent),
		radial-gradient(1px 1px at 20% 90%, rgba(251,241,222,0.3), transparent),
		radial-gradient(1.5px 1.5px at 70% 45%, rgba(251,241,222,0.35), transparent);
	background-repeat: no-repeat;
	animation: nssTwinkle 5s ease-in-out infinite alternate;
}
@keyframes nssTwinkle {
	0% { opacity: 0.45; }
	100% { opacity: 1; }
}

/* faint concentric mandala rings behind the header, for depth rather than flatness */
.nss-live-mandala {
	position: absolute;
	top: -260px;
	left: 50%;
	width: 760px;
	height: 760px;
	transform: translateX(-50%);
	pointer-events: none;
	border-radius: 50%;
	border: 1px dashed rgba(232, 199, 102, 0.09);
	animation: nssMandalaSpin 90s linear infinite;
}
.nss-live-mandala::before,
.nss-live-mandala::after {
	content: "";
	position: absolute;
	inset: 70px;
	border-radius: 50%;
	border: 1px dashed rgba(232, 199, 102, 0.07);
}
.nss-live-mandala::after {
	inset: 150px;
	border-style: solid;
	border-color: rgba(239, 162, 59, 0.06);
}
@keyframes nssMandalaSpin {
	to { transform: translateX(-50%) rotate(360deg); }
}

.nss-live-section-inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ---------------- eyebrow + flanking-flame headline ---------------- */
.nss-live-eyebrow {
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.32em;
	color: var(--nss-marigold);
	opacity: 0.85;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.nss-live-title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-bottom: 6px;
}

.nss-flame {
	display: inline-flex;
	width: 15px;
	height: 20px;
	color: var(--nss-marigold);
	filter: drop-shadow(0 0 6px rgba(239, 162, 59, 0.65));
	animation: nssFlameFlicker 2.6s ease-in-out infinite;
	transform-origin: 50% 100%;
}
.nss-flame svg { width: 100%; height: 100%; fill: currentColor; }
.nss-flame-right { animation-delay: 1.1s; }
@keyframes nssFlameFlicker {
	0%, 100% { transform: scale(1, 1) rotate(0deg); opacity: 0.9; }
	25% { transform: scale(0.92, 1.06) rotate(-2deg); opacity: 1; }
	50% { transform: scale(1.05, 0.95) rotate(1.5deg); opacity: 0.85; }
	75% { transform: scale(0.97, 1.03) rotate(-1deg); opacity: 1; }
}

.dp-vision__separator {
    display: block;
    width: 280px;
    max-width: 80%;
    height: auto;
    margin: 14px auto 10px;
}

.nss-live-section-title {
	margin: 0;
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 700;
	font-size: clamp(30px, 4.4vw, 46px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: linear-gradient(180deg, var(--nss-ivory) 0%, var(--nss-gold-light) 55%, var(--nss-marigold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 34px rgba(217, 138, 61, 0.35);
}

.nss-live-section-divider {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--nss-gold-light);
	font-size: 13px;
	margin: 14px 0 20px;
	opacity: 0.9;
}
.nss-div-line {
	width: 90px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nss-gold-light), transparent);
}
.nss-div-arrow { opacity: 0.7; font-size: 11px; }
.nss-div-dot { font-size: 10px; }

.nss-live-section-subtitle {
	max-width: 540px;
	margin: 0 0 30px;
	color: var(--nss-ivory-dim);
	font-size: 15px;
	line-height: 1.7;
	font-weight: 300;
}

/* ---------------- segmented badge row ---------------- */
.nss-live-section-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 40px;
}
.nss-section-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 20px;
	border-radius: 999px;
	border: 1px solid rgba(201, 162, 39, 0.35);
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
	color: var(--nss-gold-light);
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nss-section-pill:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -8px rgba(217, 138, 61, 0.5);
}
.nss-section-pill-accent {
	background: linear-gradient(135deg, var(--nss-marigold), var(--nss-marigold-deep));
	color: var(--nss-ink);
	border-color: transparent;
	box-shadow: 0 8px 26px -8px rgba(239, 162, 59, 0.65);
}
.nss-pill-icon-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
	animation: nssDotPulse 1.8s ease-in-out infinite;
}
@keyframes nssDotPulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(23,4,8,0.4); }
	50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(23,4,8,0); }
}

/* a soft column of light behind the card, like light spilling from a doorway */
.nss-live-lightbeam {
	position: absolute;
	top: 60px;
	left: 50%;
	width: 380px;
	height: 640px;
	transform: translateX(-50%);
	clip-path: polygon(38% 0%, 62% 0%, 92% 100%, 8% 100%);
	background: linear-gradient(180deg, rgba(232, 199, 102, 0.22), rgba(239, 162, 59, 0.06) 55%, transparent 90%);
	filter: blur(30px);
	opacity: 0.8;
	z-index: 0;
	pointer-events: none;
	animation: nssBeamPulse 6s ease-in-out infinite;
}
@keyframes nssBeamPulse {
	0%, 100% { opacity: 0.65; }
	50% { opacity: 0.95; }
}

/* ==========================================================================
   NSS Live — the player card itself
   ========================================================================== */

.nss-live-wrap {
	--nss-accent-soft: rgba(217, 138, 61, 0.35);

	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
	padding: 2px;
	border-radius: 22px;
	background: linear-gradient(135deg, var(--nss-maroon), var(--nss-deep) 55%, var(--nss-plum));
	box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.8);
	isolation: isolate;
	overflow: hidden;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
}
.nss-live-wrap *,
.nss-live-wrap *::before,
.nss-live-wrap *::after {
	box-sizing: border-box;
}

/* rotating gradient glow ring, peeking through the 2px padding around .nss-live-frame */
.nss-live-wrap::before {
	content: "";
	position: absolute;
	inset: -60%;
	background: conic-gradient(
		from 0deg,
		var(--nss-gold),
		var(--nss-marigold),
		var(--nss-ember),
		var(--nss-gold-light),
		var(--nss-gold)
	);
	animation: nssRingSpin 7s linear infinite;
	z-index: 0;
	will-change: transform;
}
@keyframes nssRingSpin {
	to { transform: rotate(360deg); }
}
.nss-live-wrap:hover::before {
	animation-duration: 3.2s;
}


/* ---------------- torana: hanging marigold garland ---------------- */
.nss-live-toran {
	position: relative;
	z-index: 3;
	height: 22px;
	margin: 0 34px -1px;
	background:
		radial-gradient(circle at 11px 15px, var(--nss-gold-light) 2.4px, transparent 3px) 0 0/22px 22px repeat-x,
		radial-gradient(circle at 11px 2px, transparent 9px, var(--nss-marigold) 10px, var(--nss-marigold-deep) 10px, transparent 10.6px) 0 0/22px 22px repeat-x;
	filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45));
	animation: nssToranSway 4.5s ease-in-out infinite;
	transform-origin: 50% 0%;
}
.nss-live-toran::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--nss-gold), var(--nss-gold-light), var(--nss-gold), transparent);
}
@keyframes nssToranSway {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(0.4deg); }
}

/* ---------------- threshold: flattened temple-arch lintel cap ---------------- */
.nss-live-threshold {
	position: relative;
	z-index: 2;
	height: 46px;
	margin: 0 20px -1px;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: linear-gradient(180deg, var(--nss-gold) 0%, var(--nss-marigold-deep) 60%, var(--nss-maroon) 100%);
	box-shadow: 0 -14px 34px -6px rgba(239, 162, 59, 0.35);
}
.nss-live-threshold::after {
	content: "";
	position: absolute;
	inset: 6px 22% auto;
	top: 8px;
	height: 2px;
	border-radius: 999px;
	background: rgba(23, 4, 8, 0.25);
}

/* drifting background auras */
.nss-live-aura {
	position: absolute;
	inset: 2px;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: 20px;
	background: var(--nss-deep);
}
.nss-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.6;
	mix-blend-mode: screen;
}
.nss-orb-a {
	width: 360px; height: 360px;
	top: -140px; left: -100px;
	background: radial-gradient(circle, var(--nss-maroon), transparent 70%);
	animation: nssDrift1 14s ease-in-out infinite;
}
.nss-orb-b {
	width: 320px; height: 320px;
	bottom: -120px; right: -80px;
	background: radial-gradient(circle, var(--nss-maroon-2), transparent 70%);
	animation: nssDrift2 18s ease-in-out infinite;
}
.nss-orb-c {
	width: 260px; height: 260px;
	top: 45%; left: 50%;
	background: radial-gradient(circle, rgba(217, 138, 61, 0.3), transparent 70%);
	animation: nssDrift3 22s ease-in-out infinite;
}
@keyframes nssDrift1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(50px, 35px) scale(1.2); }
}
@keyframes nssDrift2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-40px, -25px) scale(1.15); }
}
@keyframes nssDrift3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.35); }
}

/* subtle film-grain texture for depth */
.nss-grain {
	position: absolute;
	inset: 0;
	opacity: 0.05;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	pointer-events: none;
}

.nss-live-frame {
	position: relative;
	z-index: 1;
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(20, 16, 31, 0.85), rgba(29, 14, 23, 0.94));
	border: 1px solid rgba(217, 138, 61, 0.18);
	overflow: hidden;
}

/* ornamental corner flourishes, brass-rivet style */
.nss-corner {
	position: absolute;
	width: 34px;
	height: 34px;
	z-index: 5;
	pointer-events: none;
	opacity: 0.9;
}
.nss-corner::before,
.nss-corner::after {
	content: "";
	position: absolute;
	background: linear-gradient(90deg, var(--nss-gold-light), transparent);
}
.nss-corner::before { width: 100%; height: 2px; top: 0; left: 0; }
.nss-corner::after { width: 2px; height: 100%; top: 0; left: 0; }
.nss-corner-tl { top: 10px; left: 10px; }
.nss-corner-tr { top: 10px; right: 10px; transform: rotate(90deg); }
.nss-corner-bl { bottom: 10px; left: 10px; transform: rotate(-90deg); }
.nss-corner-br { bottom: 10px; right: 10px; transform: rotate(180deg); }
.nss-corner-tl::before { box-shadow: -1px 0 0 var(--nss-gold-light); }
.nss-corner span::before,
.nss-corner span::after { content: none; }

/* ---------------- frame caption (above the topbar, like a VR-hotspot label) --- */
.nss-live-frame-caption {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 12px 0 9px;
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: capitalize;
	color: var(--nss-gold-light);
	opacity: 0.9;
}
.nss-caption-dot {
	font-size: 9px;
	margin: 0 8px;
	opacity: 0.7;
	color: var(--nss-marigold);
}

/* ---------------- top bar ---------------- */
.nss-live-topbar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 22px;
	border-bottom: 1px solid rgba(217, 138, 61, 0.14);
	background: linear-gradient(90deg, rgba(43, 13, 20, 0.65), transparent);
}

/* ---------------- channel logo, pinned to the right of the topbar ---------------- */
.nss-live-logo {
	display: flex;
	align-items: center;
	margin-left: auto;
	flex: 0 0 auto;
}
.nss-live-logo-img {
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--nss-maroon);
	border: 1.5px solid rgba(232, 199, 102, 0.55);
	box-shadow: 0 0 0 3px rgba(23, 4, 8, 0.4), 0 0 14px -2px rgba(239, 162, 59, 0.55);
}

.nss-live-signal {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 22px;
	border-radius: 999px;
	background: rgba(229, 72, 77, 0.1);
	border: 1px solid rgba(229, 72, 77, 0.4);
}
.nss-signal-ring,
.nss-signal-core {
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -4px;
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nss-ember);
}
.nss-signal-ring::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: var(--nss-ember);
	opacity: 0.5;
	animation: nssPulseRing 1.8s ease-out infinite;
}
.nss-live-signal-label {
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #ff8b8f;
}
@keyframes nssPulseRing {
	0% { transform: scale(0.6); opacity: 0.6; }
	100% { transform: scale(2.8); opacity: 0; }
}

.nss-live-heading {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.nss-live-heading-main {
	font-size: 15px;
	font-weight: 600;
	color: var(--nss-ivory);
	letter-spacing: 0.01em;
}
.nss-live-heading-sub {
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 11.5px;
	color: var(--nss-ivory-dim);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* ---------------- decorative scrolling ticker ---------------- */
.nss-live-ticker {
	position: relative;
	z-index: 2;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid rgba(217, 138, 61, 0.14);
	padding: 6px 0;
	white-space: nowrap;
}
.nss-live-ticker-track {
	display: inline-flex;
	animation: nssTickerScroll 26s linear infinite;
}
.nss-live-ticker-track span {
	display: inline-block;
	padding-right: 0;
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nss-gold-light);
	opacity: 0.85;
}
@keyframes nssTickerScroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ---------------- stage ---------------- */
.nss-live-stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.nss-live-video-area {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	flex: 0 0 auto;
}

.nss-live-player-target,
.nss-live-player-target iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none; /* all interaction routed through our shield/controls */
}

/* invisible tap layer sitting above the iframe */
.nss-live-shield {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nss-tap-flash {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba(239, 162, 59, 0.25);
	opacity: 0;
	transform: scale(0.6);
	pointer-events: none;
}
.nss-tap-flash.is-active {
	animation: nssTapFlash 0.45s ease-out;
}
@keyframes nssTapFlash {
	0% { opacity: 0.9; transform: scale(0.5); }
	100% { opacity: 0; transform: scale(1.4); }
}

/* poster / tap-to-unmute overlay — covers YouTube's native branded
   pre-play splash until the stream is confirmed playing */
.nss-live-poster {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: radial-gradient(circle at 50% 45%, rgba(43, 13, 20, 0.78), rgba(20, 16, 31, 0.96));
	backdrop-filter: blur(2px);
	transition: opacity 0.5s ease;
	cursor: pointer;
}
.nss-live-poster.is-hidden {
	opacity: 0;
	pointer-events: none;
}
.nss-poster-play {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	border: 1.5px solid var(--nss-marigold);
	background: linear-gradient(135deg, rgba(239,162,59,0.28), rgba(217,138,61,0.1));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nss-ivory);
	cursor: pointer;
	animation: nssPosterPulse 2.4s ease-in-out infinite;
}
.nss-poster-play .nss-icon {
	width: 26px;
	height: 26px;
	fill: currentColor;
	margin-left: 3px;
}
.nss-poster-play:focus-visible {
	outline: 2px solid var(--nss-gold-light);
	outline-offset: 3px;
}
@keyframes nssPosterPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(239, 162, 59, 0.4); }
	50% { box-shadow: 0 0 0 16px rgba(239, 162, 59, 0); }
}
.nss-poster-label {
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nss-ivory-dim);
}

/* ---------------- controls bar (always after the video area = bottom) --- */
.nss-live-controls {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: linear-gradient(180deg, rgba(20, 16, 31, 0.5), rgba(10, 7, 5, 0.97));
	border-top: 1px solid rgba(217, 138, 61, 0.16);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.nss-ctrl-btn {
	appearance: none;
	border: none;
	background: rgba(217, 138, 61, 0.12);
	color: var(--nss-ivory);
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
	flex-shrink: 0;
}
.nss-ctrl-btn:hover {
	background: rgba(239, 162, 59, 0.3);
}
.nss-ctrl-btn:active {
	transform: scale(0.92);
}
.nss-ctrl-btn:focus-visible {
	outline: 2px solid var(--nss-gold-light);
	outline-offset: 2px;
}
.nss-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* themed volume slider — !important guards against theme/global
   `input[type=range]` resets that otherwise force a white background */
.nss-volume-track {
	display: flex;
	align-items: center;
	width: 90px;
	background: transparent !important;
}
.nss-live-wrap input[type="range"].nss-volume-slider {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 100%;
	height: 4px;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer;
	margin: 0;
	padding: 0;
}
.nss-live-wrap input[type="range"].nss-volume-slider:focus {
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}
.nss-live-wrap input[type="range"].nss-volume-slider:focus-visible {
	outline: 2px solid var(--nss-gold-light) !important;
	outline-offset: 3px;
}
.nss-live-wrap input[type="range"].nss-volume-slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--nss-marigold) 0%, var(--nss-marigold) var(--nss-vol, 80%), rgba(255,255,255,0.14) var(--nss-vol, 80%), rgba(255,255,255,0.14) 100%) !important;
	border: none !important;
	box-shadow: none !important;
}
.nss-live-wrap input[type="range"].nss-volume-slider::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14) !important;
	border: none !important;
	box-shadow: none !important;
}
.nss-live-wrap input[type="range"].nss-volume-slider::-moz-range-progress {
	height: 4px;
	border-radius: 999px;
	background: var(--nss-marigold) !important;
	border: none !important;
}
.nss-live-wrap input[type="range"].nss-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--nss-gold-light) !important;
	border: 2px solid var(--nss-ink) !important;
	margin-top: -4.5px;
	box-shadow: 0 0 6px rgba(239, 162, 59, 0.7) !important;
}
.nss-live-wrap input[type="range"].nss-volume-slider::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--nss-gold-light) !important;
	border: 2px solid var(--nss-ink) !important;
	box-shadow: 0 0 6px rgba(239, 162, 59, 0.7) !important;
}

.nss-ctrl-spacer {
	flex: 1 1 auto;
}

.nss-live-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--nss-ivory);
	background: rgba(229, 72, 77, 0.12);
	border: 1px solid rgba(229, 72, 77, 0.3);
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
	animation: nssPillEmber 2.2s ease-in-out infinite;
}
.nss-live-pill-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nss-ember);
	box-shadow: 0 0 8px var(--nss-ember);
}
@keyframes nssPillEmber {
	0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.35); }
	50% { box-shadow: 0 0 10px 2px rgba(229, 72, 77, 0.25); }
}

/* ---------------- offline state ---------------- */
.nss-live-offline {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 60px 20px;
	min-height: 320px;
	background: radial-gradient(circle at 50% 40%, rgba(43, 13, 20, 0.9), var(--nss-deep) 80%);
}
.nss-offline-diya {
	display: inline-flex;
	width: 26px;
	height: 34px;
	color: var(--nss-marigold);
	filter: drop-shadow(0 0 10px rgba(239, 162, 59, 0.55));
	margin-bottom: 16px;
	animation: nssFlameFlicker 2.6s ease-in-out infinite;
}
.nss-offline-diya svg { width: 100%; height: 100%; fill: currentColor; }
.nss-offline-text {
	color: var(--nss-ivory);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 6px;
}
.nss-offline-sub {
	color: var(--nss-ivory-dim);
	font-size: 13px;
	margin: 0;
	max-width: 320px;
	font-weight: 300;
}

/* ---------------- section footer ---------------- */
.nss-live-section-footer {
	margin-top: 30px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: capitalize;
	color: var(--nss-ivory-dim);
}
.dp-footer__tech-label {
    color: #E8C766;
}

.dp-footer__tech-name {
    color: #FBF1DE;
}

.nss-footer-brand {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 20px;
	border: 1px solid rgba(232, 199, 102, 0.55);
	background: linear-gradient(180deg, rgba(232, 199, 102, 0.14), rgba(239, 162, 59, 0.06));
	font-weight: 700;
	color: var(--nss-gold-light);
	text-shadow: 0 0 4px rgba(232, 199, 102, 0.5), 0 0 8px rgba(232, 199, 102, 0.3);
	animation: nssFooterGlow 2.2s ease-in-out infinite;
}
@keyframes nssFooterGlow {
	0%, 100% {
		color: var(--nss-gold-light);
		border-color: rgba(232, 199, 102, 0.5);
		text-shadow: 0 0 4px rgba(232, 199, 102, 0.45), 0 0 9px rgba(232, 199, 102, 0.25);
	}
	50% {
		color: #FFF3D2;
		border-color: rgba(255, 233, 174, 0.95);
		text-shadow: 0 0 12px rgba(232, 199, 102, 1), 0 0 26px rgba(239, 162, 59, 0.85);
	}
}

/* ==========================================================================
   Fullscreen behaviour
   ========================================================================== */

.nss-live-wrap.is-fullscreen {
	width: 100vw;
	height: 100vh;
	border-radius: 0;
	padding: 0;
}
.nss-live-wrap.is-fullscreen .nss-live-frame {
	border-radius: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.nss-live-wrap.is-fullscreen .nss-live-topbar,
.nss-live-wrap.is-fullscreen .nss-live-ticker,
.nss-live-wrap.is-fullscreen .nss-live-frame-caption,
.nss-live-wrap.is-fullscreen .nss-live-toran,
.nss-live-wrap.is-fullscreen .nss-live-threshold,
.nss-live-wrap.is-fullscreen .nss-corner {
	display: none; /* immersive: hide chrome in fullscreen */
}
.nss-live-wrap.is-fullscreen .nss-live-stage {
	flex: 1 1 auto;
	height: 100%;
	position: relative;
}
.nss-live-wrap.is-fullscreen .nss-live-video-area {
	flex: 1 1 auto;
	aspect-ratio: unset;
	height: 100%;
}

/* controls become a transparent overlay pinned to the bottom */
.nss-live-wrap.is-fullscreen .nss-live-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, transparent, rgba(10, 7, 5, 0.8) 55%, rgba(10, 7, 5, 0.95));
	border-top: none;
	padding: 18px 22px 20px;
}

.nss-live-wrap.is-fullscreen .nss-live-controls.is-hidden {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}

/* forced-landscape fallback for browsers/devices that block
   the Screen Orientation Lock API (e.g. iOS Safari) while in fullscreen */
.nss-live-wrap.is-fullscreen.force-rotate .nss-live-frame {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100vh;
	height: 100vw;
	margin-top: calc(-1 * (100vw / 2));
	margin-left: calc(-1 * (100vh / 2));
	transform: rotate(90deg);
	transform-origin: center center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
	.nss-live-section { padding: 56px 16px; }
	.nss-live-section-pills { gap: 8px; }
	.nss-section-pill { padding: 7px 14px; font-size: 10px; }
	.nss-live-heading-sub { display: none; }
	.nss-volume-track { width: 56px; }
	.nss-live-topbar { padding: 12px 14px; }
	.nss-corner { width: 22px; height: 22px; }
	.nss-live-toran { margin: 0 16px -1px; }
	.nss-live-threshold { margin: 0 10px -1px; height: 34px; }
	.nss-flame { width: 12px; height: 16px; }
	.nss-live-title-row { gap: 10px; }
	.nss-live-lightbeam { width: 260px; }
}

/* ==========================================================================
   Reduced motion — keep the informative ticker, drop purely decorative motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.nss-live-stars,
	.nss-live-mandala,
	.nss-flame,
	.nss-offline-diya,
	.nss-live-toran,
	.nss-orb-a, .nss-orb-b, .nss-orb-c,
	.nss-live-wrap::before,
	.nss-live-lightbeam,
	.nss-pill-icon-dot,
	.nss-poster-play,
	.nss-live-pill,
	.nss-footer-brand,
	.nss-live-ticker-track {
		animation: none !important;
	}
}