html, body {
	height: 100%;
	margin: 0;
}

/* page background image, responsive */
body {
	background-image: url("../images/bg2.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	/* optional: keep background fixed while content scrolls */
	background-attachment: fixed;
}

/* faint black tint overlay on top of the background */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.20); /* adjust alpha for stronger/weaker tint */
	pointer-events: none;
	z-index: 0;
}

#app {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative; /* ensure content sits above the overlay */
	z-index: 1;
}

/* make main section grow to fill available space */
section.stream-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0; /* allow children to shrink correctly */
}

.stream-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: auto;
	margin-bottom: auto;
	padding: 1rem; /* small padding on all edges around the player */
}

.stream-container {
	position: relative;
	/* default to 1920x1080 but never exceed viewport width */
	width: min(1920px, 100vw);
	aspect-ratio: 16/9;
	/* allow it to remain within viewport height */
	max-height: 100vh;
	/* allow controls to overflow if needed */
	overflow: visible;
}

.stream-container iframe,
.stream-container video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 1; /* keep video behind controls */
}

/* custom minimal control bar */
.video-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.75rem;
	background: linear-gradient(transparent, rgba(0,0,0,0.45));
	gap: 0.5rem;
	box-sizing: border-box;
	z-index: 9999; /* ensure controls appear above the video */
	pointer-events: auto;
}

/* auto-hide controls */
.stream-container.controls-hidden .video-controls {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 240ms ease, transform 240ms ease;
	pointer-events: none;
}

.stream-container .video-controls {
	transition: opacity 240ms ease, transform 240ms ease;
}

.video-controls .left,
.video-controls .right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.control-button {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	color: #fff;
	padding: 6px 8px;
	border-radius: 4px;
	cursor: pointer;
	/* center any icon/svg inside the button */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ensure SVG icons don't sit on the text baseline */
.control-button .icon,
.control-button svg.icon {
	display: block;
	width: 18px;
	height: 18px;
	line-height: 0;
}

/* low-latency active state */
#btn-ll[aria-pressed="true"] {
	background: rgba(255,80,80,0.12);
	border-color: rgba(255,80,80,0.28);
}

.volume-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
}

.volume-button .icon {
	width: 18px;
	height: 18px;
	fill: #fff;
	display: inline-block;
}

/* visibility rules for muted/unmuted icons: use higher specificity and important to
   avoid being overridden by generic .control-button .icon rules */
.volume-button .muted { display: none !important; }
.volume-button .unmuted { display: inline-block !important; }
.volume-button.muted .muted { display: inline-block !important; }
.volume-button.muted .unmuted { display: none !important; }

.control-button:focus { outline: 2px solid rgba(255,255,255,0.15); }

.volume-slider {
	width: 110px;
}

/* play/pause icon handling */
#btn-play .icon { width: 18px; height: 18px; fill: #fff; }
#btn-play .pause { display: none; }
#btn-play.playing .play { display: none; }
#btn-play.playing .pause { display: inline; }

.resolution-select {
	background: rgba(0,0,0,0.35);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.08);
	padding: 6px 8px;
	border-radius: 4px;
	display: inline-block;
	z-index: 10000;
	/* ensure it's visible and interactive */
	visibility: visible !important;
	opacity: 1 !important;
}

.res-debug {
	color: rgba(255,255,255,0.7);
	font-size: 0.8rem;
	margin-left: 0.5rem;
}

.res-label {
	color: #fff;
	font-size: 0.85rem;
	margin-right: 0.25rem;
}

/* settings cog button */
#btn-settings {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	color: #fff;
	padding: 6px 8px;
	border-radius: 4px;
	cursor: pointer;
}

/* telemetry panel */
#telemetry-panel {
	position: absolute;
	right: 0.5rem;
	bottom: 3.5rem;
	width: 360px;
	max-height: 50vh;
	overflow: auto;
	background: rgba(0,0,0,0.78);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.06);
	padding: 0.5rem;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
	font-size: 12px;
	display: none; /* will be set to block when opening */
	opacity: 0;
	transform: translateY(8px) scale(0.995);
	transition: opacity 220ms ease, transform 220ms ease;
	pointer-events: none;
	z-index: 20000;
}

#telemetry-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#telemetry-panel h4 { margin: 0 0 6px 0; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
#telemetry-panel .close-btn { background: transparent; border: none; color: #fff; cursor: pointer; padding: 4px; margin-left: 8px; }
#telemetry-panel .close-btn:focus { outline: 2px solid rgba(255,255,255,0.14); }
#telemetry-panel .mode-row { display: flex; align-items: center; gap: 6px; }
#telemetry-ll { display: none; align-items: center; gap: 4px; color: #ffdb4d; font-weight: 600; }
#telemetry-ll svg { width: 12px; height: 12px; fill: #ffdb4d; }
#telemetry-panel table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
#telemetry-panel th, #telemetry-panel td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.04); }
#telemetry-panel .small { font-size: 11px; color: rgba(255,255,255,0.7); }

.player-wrapper {
	position: relative !important;
	width: 100% !important;
	height: auto !important;
}

/* When the viewport is larger than 1920x1080, lock the player to 1920x1080
   and center it both vertically and horizontally. For smaller viewports,
   the earlier responsive rules (width: min(1920px,100vw)) apply. */
@media (min-width: 1921px) and (min-height: 1081px) {
	section.stream-main {
		/* center the content vertically (column direction) */
		justify-content: center;
	}
	.stream-wrapper {
		padding: 1rem; /* keep a small outer gap */
		height: auto;
	}
	.stream-container {
		width: 1920px; /* exact desktop presentation */
		height: 1080px;
		aspect-ratio: auto; /* use explicit height */
		max-height: none;
	}
	.stream-container iframe,
	.stream-container video {
		width: 100%;
		height: 100%;
	}
}