<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import ContentDisplay from '$lib/components/ContentDisplay.svelte';
	import {
		initSocket,
		onContent,
		onLoading,
		onClear,
		onRoomStatus,
		onConnection,
		onVolume,
		onQrVisibility,
		getRoomId,
		disconnect
	} from '$lib/socket';
	import { currentContent, isLoading, roomStatus, currentVolume } from '$lib/stores/content';
	import type { ContentPayload, RoomStatus } from '$lib/socket';
	import QRCode from 'qrcode';

	let isFullscreen = $state(false);
	let isSocketConnected = $state(false);
	let needsInteraction = $state(true);
	let silentAudio: HTMLAudioElement | null = null;
	let qrCodeDataUrl = $state<string | null>(null);
	let qrVisible = $state(true);
	let qrFadedOut = $state(false);
	let qrFadeTimer: ReturnType<typeof setTimeout> | null = null;

	// Time state
	let time = $state('');
	let date = $state('');
	let greeting = $state('');
	let hour = $state(12);
	let minutes = $state(0);

	// Time period for theming
	type TimePeriod = 'night' | 'dawn' | 'morning' | 'afternoon' | 'dusk';
	let timePeriod = $state<TimePeriod>('morning');

	// Weather state
	interface WeatherData {
		temp: number;
		condition: string;
		iconType: string;
		location: string;
		code: number;
	}
	let weather = $state<WeatherData | null>(null);

	// Weather category for theming
	type WeatherCategory = 'clear' | 'cloudy' | 'rain' | 'snow' | 'fog' | 'storm';
	let weatherCategory = $state<WeatherCategory>('clear');

	// Weather condition to icon type mapping
	const weatherIconTypes: Record<string, string> = {
		'clear': 'sun',
		'sunny': 'sun',
		'partly-cloudy': 'cloud-sun',
		'cloudy': 'cloud',
		'overcast': 'cloud',
		'fog': 'fog',
		'drizzle': 'rain',
		'rain': 'rain',
		'heavy-rain': 'storm',
		'snow': 'snow',
		'sleet': 'snow',
		'thunderstorm': 'storm',
		'unknown': 'cloud'
	};

	// WMO weather codes to conditions
	function getWeatherCondition(code: number): { condition: string; iconType: string; category: WeatherCategory } {
		if (code === 0) return { condition: 'Clear', iconType: weatherIconTypes['clear'], category: 'clear' };
		if (code === 1) return { condition: 'Mostly Clear', iconType: weatherIconTypes['clear'], category: 'clear' };
		if (code === 2) return { condition: 'Partly Cloudy', iconType: weatherIconTypes['partly-cloudy'], category: 'cloudy' };
		if (code === 3) return { condition: 'Overcast', iconType: weatherIconTypes['overcast'], category: 'cloudy' };
		if (code >= 45 && code <= 48) return { condition: 'Foggy', iconType: weatherIconTypes['fog'], category: 'fog' };
		if (code >= 51 && code <= 55) return { condition: 'Drizzle', iconType: weatherIconTypes['drizzle'], category: 'rain' };
		if (code >= 56 && code <= 57) return { condition: 'Freezing Drizzle', iconType: weatherIconTypes['sleet'], category: 'rain' };
		if (code >= 61 && code <= 65) return { condition: 'Rain', iconType: weatherIconTypes['rain'], category: 'rain' };
		if (code >= 66 && code <= 67) return { condition: 'Freezing Rain', iconType: weatherIconTypes['sleet'], category: 'rain' };
		if (code >= 71 && code <= 77) return { condition: 'Snow', iconType: weatherIconTypes['snow'], category: 'snow' };
		if (code >= 80 && code <= 82) return { condition: 'Rain Showers', iconType: weatherIconTypes['rain'], category: 'rain' };
		if (code >= 85 && code <= 86) return { condition: 'Snow Showers', iconType: weatherIconTypes['snow'], category: 'snow' };
		if (code >= 95 && code <= 99) return { condition: 'Thunderstorm', iconType: weatherIconTypes['thunderstorm'], category: 'storm' };
		return { condition: 'Unknown', iconType: weatherIconTypes['unknown'], category: 'cloudy' };
	}

	function getTimePeriod(h: number): TimePeriod {
		if (h >= 5 && h < 7) return 'dawn';
		if (h >= 7 && h < 12) return 'morning';
		if (h >= 12 && h < 17) return 'afternoon';
		if (h >= 17 && h < 20) return 'dusk';
		return 'night';
	}

	// Calculate sun/moon position based on time (0-100% across sky arc)
	function getCelestialPosition(h: number, m: number): number {
		const totalMinutes = h * 60 + m;
		// Sun rises ~6am (360min), sets ~8pm (1200min)
		// Map to 0-100 across the visible arc
		if (h >= 6 && h < 20) {
			return ((totalMinutes - 360) / (1200 - 360)) * 100;
		}
		// Night: moon travels from 8pm to 6am
		if (h >= 20) {
			return ((totalMinutes - 1200) / (360 + 1440 - 1200)) * 100;
		}
		return ((totalMinutes + 1440 - 1200) / (360 + 1440 - 1200)) * 100;
	}

	let celestialPos = $state(50);

	async function fetchWeather() {
		try {
			const geoResponse = await fetch('https://ipapi.co/json/');
			const geoData = await geoResponse.json();

			const latitude = geoData.latitude;
			const longitude = geoData.longitude;
			const locationName = geoData.city || 'Local';

			const weatherResponse = await fetch(
				`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,weather_code&temperature_unit=fahrenheit`
			);
			const weatherData = await weatherResponse.json();

			const { condition, iconType, category } = getWeatherCondition(weatherData.current.weather_code);
			weatherCategory = category;

			weather = {
				temp: Math.round(weatherData.current.temperature_2m),
				condition,
				iconType,
				location: locationName,
				code: weatherData.current.weather_code
			};
		} catch (err) {
			console.log('[Display] Weather fetch failed:', err);
		}
	}

	function updateTime() {
		const now = new Date();
		hour = now.getHours();
		minutes = now.getMinutes();
		timePeriod = getTimePeriod(hour);
		celestialPos = getCelestialPosition(hour, minutes);

		time = now.toLocaleTimeString('en-US', {
			hour: 'numeric',
			minute: '2-digit',
			hour12: true
		}).replace(' ', '').toLowerCase();

		date = now.toLocaleDateString('en-US', {
			weekday: 'long',
			month: 'long',
			day: 'numeric'
		});

		if (hour < 12) greeting = 'Good morning';
		else if (hour < 17) greeting = 'Good afternoon';
		else greeting = 'Good evening';
	}

	onMount(async () => {
		if (sessionStorage.getItem('droppy-audio-enabled') === 'true') {
			needsInteraction = false;
		}

		silentAudio = new Audio('data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA');
		silentAudio.volume = 0.001;

		initSocket('display');

		updateTime();
		const timeInterval = setInterval(updateTime, 1000);

		fetchWeather();
		const weatherInterval = setInterval(fetchWeather, 15 * 60 * 1000);

		const roomId = getRoomId();
		if (roomId) {
			const uploaderUrl = `${window.location.origin}/?room=${roomId}`;
			try {
				qrCodeDataUrl = await QRCode.toDataURL(uploaderUrl, {
					width: 200,
					margin: 2,
					color: {
						dark: '#FFFFFF',
						light: '#00000000'
					}
				});
			} catch (err) {
				console.error('Failed to generate QR code:', err);
			}
		}

		const unsubContent = onContent((content: ContentPayload) => {
			currentContent.set(content);
			resetQrFade();
		});

		const unsubLoading = onLoading((loading: boolean) => {
			isLoading.set(loading);
		});

		const unsubClear = onClear(() => {
			currentContent.set(null);
		});

		const unsubStatus = onRoomStatus((status: RoomStatus) => {
			roomStatus.set(status);
		});

		const unsubConnection = onConnection((connected: boolean) => {
			isSocketConnected = connected;
		});

		const unsubVolume = onVolume((volume: number) => {
			currentVolume.set(volume);
		});

		const unsubQr = onQrVisibility((visible: boolean) => {
			qrVisible = visible;
		});

		document.addEventListener('fullscreenchange', handleFullscreenChange);

		return () => {
			clearInterval(timeInterval);
			clearInterval(weatherInterval);
			unsubContent();
			unsubLoading();
			unsubClear();
			unsubStatus();
			unsubConnection();
			unsubVolume();
			unsubQr();
			document.removeEventListener('fullscreenchange', handleFullscreenChange);
		};
	});

	onDestroy(() => {
		disconnect();
		if (qrFadeTimer) clearTimeout(qrFadeTimer);
	});

	function handleFullscreenChange() {
		isFullscreen = !!document.fullscreenElement;
	}

	function resetQrFade() {
		qrFadedOut = false;
		if (qrFadeTimer) clearTimeout(qrFadeTimer);
		qrFadeTimer = setTimeout(() => {
			qrFadedOut = true;
		}, 5000);
	}

	async function enableAudio() {
		if (silentAudio) {
			try {
				await silentAudio.play();
			} catch (e) {
				console.log('[Display] Silent audio play failed:', e);
			}
		}

		needsInteraction = false;
		sessionStorage.setItem('droppy-audio-enabled', 'true');
		window.dispatchEvent(new CustomEvent('droppyAudioEnabled'));

		try {
			await document.documentElement.requestFullscreen();
		} catch (err) {
			// Fullscreen may fail
		}
	}

	function handleKeydown(event: KeyboardEvent) {
		if (needsInteraction) {
			enableAudio();
		}

		if (event.key === 'f' || event.key === 'F') {
			if (isFullscreen) {
				document.exitFullscreen().catch(() => {});
			} else {
				document.documentElement.requestFullscreen().catch(() => {});
			}
		}
	}

	function handleClick() {
		if (needsInteraction) {
			enableAudio();
		}
	}

	// Generate layered star field with varied sizes and colors
	interface Star {
		x: number;
		y: number;
		size: number;
		opacity: number;
		color: string;
		twinkleSpeed: number;
	}

	function generateStarLayers(): { dim: Star[]; medium: Star[]; bright: Star[] } {
		const colors = ['#ffffff', '#f8fafc', '#f1f5f9', '#e2e8f0'];
		const dim: Star[] = [];
		const medium: Star[] = [];
		const bright: Star[] = [];

		// Dim background stars (80) - reduced for cleaner look
		for (let i = 0; i < 80; i++) {
			dim.push({
				x: Math.random() * 100,
				y: Math.random() * 65,
				size: Math.random() * 0.8 + 0.4,
				opacity: Math.random() * 0.25 + 0.08,
				color: colors[Math.floor(Math.random() * colors.length)],
				twinkleSpeed: Math.random() * 4 + 4
			});
		}

		// Medium stars (30) - reduced
		for (let i = 0; i < 30; i++) {
			medium.push({
				x: Math.random() * 100,
				y: Math.random() * 55,
				size: Math.random() * 1.2 + 0.8,
				opacity: Math.random() * 0.3 + 0.25,
				color: colors[Math.floor(Math.random() * colors.length)],
				twinkleSpeed: Math.random() * 5 + 5
			});
		}

		// Bright stars (10) - fewer, more special
		for (let i = 0; i < 10; i++) {
			bright.push({
				x: Math.random() * 100,
				y: Math.random() * 45,
				size: Math.random() * 1.5 + 1.5,
				opacity: Math.random() * 0.25 + 0.6,
				color: colors[0],
				twinkleSpeed: Math.random() * 6 + 6
			});
		}

		return { dim, medium, bright };
	}

	const starLayers = generateStarLayers();


	// Generate cloud formations
	interface CloudPuff {
		x: number;
		y: number;
		width: number;
		height: number;
		opacity: number;
	}

	interface Cloud {
		puffs: CloudPuff[];
		speed: number;
		delay: number;
		layer: number;
	}

	function generateClouds(count: number): Cloud[] {
		const clouds: Cloud[] = [];
		for (let i = 0; i < count; i++) {
			const puffCount = Math.floor(Math.random() * 4) + 3;
			const puffs: CloudPuff[] = [];
			const baseY = Math.random() * 25 + 5;
			let currentX = 0;

			for (let j = 0; j < puffCount; j++) {
				const width = Math.random() * 15 + 10;
				const height = Math.random() * 8 + 6;
				puffs.push({
					x: currentX,
					y: baseY + (Math.random() - 0.5) * 5,
					width,
					height,
					opacity: Math.random() * 0.3 + 0.4
				});
				currentX += width * 0.6;
			}

			clouds.push({
				puffs,
				speed: Math.random() * 40 + 60,
				delay: Math.random() * 60,
				layer: Math.floor(Math.random() * 3)
			});
		}
		return clouds;
	}

	const cloudFormations = generateClouds(6);

	// Rain drops with variety
	interface RainDrop {
		x: number;
		speed: number;
		delay: number;
		length: number;
		opacity: number;
		wind: number;
	}

	function generateRain(count: number): RainDrop[] {
		const drops: RainDrop[] = [];
		for (let i = 0; i < count; i++) {
			drops.push({
				x: Math.random() * 120 - 10, // Allow some off-screen start
				speed: Math.random() * 0.3 + 0.4,
				delay: Math.random() * 2,
				length: Math.random() * 20 + 15,
				opacity: Math.random() * 0.4 + 0.3,
				wind: Math.random() * 10 + 5 // Slight wind angle
			});
		}
		return drops;
	}

	const rainDrops = generateRain(80);

	// Snowflakes with variety
	interface Snowflake {
		x: number;
		size: number;
		speed: number;
		delay: number;
		drift: number;
		wobble: number;
		opacity: number;
	}

	function generateSnow(count: number): Snowflake[] {
		const flakes: Snowflake[] = [];
		for (let i = 0; i < count; i++) {
			flakes.push({
				x: Math.random() * 100,
				size: Math.random() * 6 + 3,
				speed: Math.random() * 4 + 4,
				delay: Math.random() * 8,
				drift: (Math.random() - 0.5) * 60,
				wobble: Math.random() * 20 + 10,
				opacity: Math.random() * 0.5 + 0.5
			});
		}
		return flakes;
	}

	const snowflakes = generateSnow(80);

	// Dust particles
	interface Particle {
		x: number;
		y: number;
		size: number;
		opacity: number;
		speed: number;
		delay: number;
	}

	function generateParticles(count: number): Particle[] {
		const particles: Particle[] = [];
		for (let i = 0; i < count; i++) {
			particles.push({
				x: Math.random() * 100,
				y: Math.random() * 100,
				size: Math.random() * 2 + 1,
				opacity: Math.random() * 0.15 + 0.05,
				speed: Math.random() * 30 + 20,
				delay: Math.random() * 20
			});
		}
		return particles;
	}

	const dustParticles = generateParticles(15); // Reduced for cleaner aesthetic
</script>

<svelte:head>
	<title>Droppy Display</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
	<style>
		html, body {
			margin: 0;
			padding: 0;
			overflow: hidden;
			background: #000;
		}
	</style>
</svelte:head>

<svelte:window onkeydown={handleKeydown} />

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
	class="display-page"
	onclick={handleClick}
	data-time={timePeriod}
	data-weather={weatherCategory}
>
	<div class="content-wrapper">
		<ContentDisplay content={$currentContent} isLoading={$isLoading} hideIdle={!needsInteraction && !$currentContent && !$isLoading} blocked={needsInteraction} />
	</div>

	{#if needsInteraction}
		<button class="enable-audio-overlay" onclick={enableAudio} type="button" data-time={timePeriod} data-weather={weatherCategory}>
			<div class="enable-bg"></div>
			<div class="enable-content">
				<div class="enable-icon">
					<svg viewBox="0 0 24 24" fill="currentColor">
						<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
					</svg>
				</div>
				<h1>Click to Start</h1>
				<p>Click anywhere to enable audio playback</p>
			</div>
		</button>
	{/if}

	<!-- Ambient landing page with dynamic atmosphere -->
	{#if !needsInteraction && !$currentContent && !$isLoading}
		<div class="ambient-landing" data-time={timePeriod} data-weather={weatherCategory}>
			<!-- Sky gradient base with multiple layers -->
			<div class="sky-base"></div>
			<div class="sky-gradient-overlay"></div>

			<!-- Horizon atmospheric haze -->
			<div class="horizon-haze"></div>

			<!-- Atmospheric depth layers -->
			<div class="atmosphere">
				<div class="atmo-layer atmo-1"></div>
				<div class="atmo-layer atmo-2"></div>
				<div class="atmo-layer atmo-3"></div>
				<div class="atmo-layer atmo-4"></div>
			</div>

			<!-- Stars (night/dusk) - Three layers for depth -->
			{#if timePeriod === 'night' || timePeriod === 'dusk'}
				<div class="star-field">
					<!-- Dim background stars -->
					{#each starLayers.dim as star}
						<div
							class="star star-dim"
							style="
								left: {star.x}%;
								top: {star.y}%;
								width: {star.size}px;
								height: {star.size}px;
								background: {star.color};
								opacity: {star.opacity};
								animation-duration: {star.twinkleSpeed}s;
							"
						></div>
					{/each}
					<!-- Medium stars -->
					{#each starLayers.medium as star}
						<div
							class="star star-medium"
							style="
								left: {star.x}%;
								top: {star.y}%;
								width: {star.size}px;
								height: {star.size}px;
								background: {star.color};
								opacity: {star.opacity};
								animation-duration: {star.twinkleSpeed}s;
							"
						></div>
					{/each}
					<!-- Bright stars with glow -->
					{#each starLayers.bright as star}
						<div
							class="star star-bright"
							style="
								left: {star.x}%;
								top: {star.y}%;
								width: {star.size}px;
								height: {star.size}px;
								background: {star.color};
								box-shadow: 0 0 {star.size * 3}px {star.size}px {star.color};
								opacity: {star.opacity};
								animation-duration: {star.twinkleSpeed}s;
							"
						></div>
					{/each}
				</div>

				<!-- Aurora Borealis (clear night only) -->
				{#if weatherCategory === 'clear' && timePeriod === 'night'}
					<div class="aurora-container">
						<div class="aurora aurora-1"></div>
						<div class="aurora aurora-2"></div>
						<div class="aurora aurora-3"></div>
					</div>
				{/if}
			{/if}

			<!-- Clouds - multiple layers with depth -->
			{#if weatherCategory === 'cloudy' || weatherCategory === 'rain' || weatherCategory === 'storm'}
				<div class="cloud-system">
					{#each cloudFormations as cloud, i}
						<div
							class="cloud-formation layer-{cloud.layer}"
							style="
								animation-duration: {cloud.speed}s;
								animation-delay: -{cloud.delay}s;
							"
						>
							{#each cloud.puffs as puff}
								<div
									class="cloud-puff"
									style="
										left: {puff.x}%;
										top: {puff.y}%;
										width: {puff.width}vw;
										height: {puff.height}vh;
										opacity: {puff.opacity};
									"
								></div>
							{/each}
						</div>
					{/each}
				</div>
			{/if}

			<!-- Sun with corona and rays -->
			{#if (weatherCategory === 'clear' || weatherCategory === 'cloudy') && timePeriod !== 'night'}
				<div
					class="celestial-container sun-container"
					style="--position: {celestialPos}%"
				>
					<div class="sun-rays"></div>
					<div class="sun-corona"></div>
					<div class="sun-core"></div>
					<div class="sun-flare"></div>
				</div>
			{/if}

			<!-- God rays for dawn/dusk -->
			{#if (timePeriod === 'dawn' || timePeriod === 'dusk') && weatherCategory !== 'storm'}
				<div class="god-rays">
					<div class="ray ray-1"></div>
					<div class="ray ray-2"></div>
					<div class="ray ray-3"></div>
					<div class="ray ray-4"></div>
					<div class="ray ray-5"></div>
				</div>
			{/if}

			<!-- Moon with glow and halo -->
			{#if (weatherCategory === 'clear' || weatherCategory === 'cloudy') && timePeriod === 'night'}
				<div
					class="celestial-container moon-container"
					style="--position: {celestialPos}%"
				>
					<div class="moon-halo"></div>
					<div class="moon-glow"></div>
					<div class="moon-body">
						<div class="moon-crater c1"></div>
						<div class="moon-crater c2"></div>
						<div class="moon-crater c3"></div>
						<div class="moon-crater c4"></div>
						<div class="moon-crater c5"></div>
						<div class="moon-mare"></div>
					</div>
				</div>
			{/if}

			<!-- Horizon glow -->
			{#if timePeriod === 'dawn' || timePeriod === 'dusk'}
				<div class="horizon-glow"></div>
				<div class="horizon-glow-secondary"></div>
			{/if}

			<!-- Rain system -->
			{#if weatherCategory === 'rain' || weatherCategory === 'storm'}
				<div class="rain-system">
					{#each rainDrops as drop}
						<div
							class="rain-drop"
							style="
								left: {drop.x}%;
								--speed: {drop.speed}s;
								--delay: {drop.delay}s;
								--length: {drop.length}px;
								--opacity: {drop.opacity};
								--wind: {drop.wind}deg;
							"
						></div>
					{/each}
					<!-- Rain mist at bottom -->
					<div class="rain-mist"></div>
					<div class="rain-mist-2"></div>
				</div>
			{/if}

			<!-- Snow system -->
			{#if weatherCategory === 'snow'}
				<div class="snow-system">
					{#each snowflakes as flake}
						<div
							class="snowflake"
							style="
								left: {flake.x}%;
								--size: {flake.size}px;
								--speed: {flake.speed}s;
								--delay: {flake.delay}s;
								--drift: {flake.drift}px;
								--wobble: {flake.wobble}px;
								--opacity: {flake.opacity};
							"
						></div>
					{/each}
					<!-- Snow accumulation glow -->
					<div class="snow-ground-glow"></div>
				</div>
			{/if}

			<!-- Fog layers with parallax -->
			{#if weatherCategory === 'fog'}
				<div class="fog-system">
					<div class="fog-layer fog-back"></div>
					<div class="fog-layer fog-mid"></div>
					<div class="fog-layer fog-front"></div>
					<div class="fog-wisps">
						<div class="fog-wisp w1"></div>
						<div class="fog-wisp w2"></div>
						<div class="fog-wisp w3"></div>
					</div>
				</div>
			{/if}

			<!-- Storm effects -->
			{#if weatherCategory === 'storm'}
				<div class="storm-system">
					<div class="lightning-flash"></div>
					<div class="lightning-bolt"></div>
					<div class="storm-clouds"></div>
				</div>
			{/if}

			<!-- Floating dust/particles -->
			<div class="particle-system">
				{#each dustParticles as particle}
					<div
						class="dust-particle"
						style="
							left: {particle.x}%;
							top: {particle.y}%;
							--size: {particle.size}px;
							--opacity: {particle.opacity};
							--speed: {particle.speed}s;
							--delay: {particle.delay}s;
						"
					></div>
				{/each}
			</div>

			<div class="ambient-noise"></div>
			<div class="ambient-vignette"></div>
			<div class="ambient-vignette-soft"></div>

			<!-- Main content -->
			<div class="ambient-content">
				<div class="time-display">
					<span class="time-text">{time}</span>
				</div>
				<p class="date-text">{date}</p>
				{#if weather}
					<div class="weather-display">
						<span class="weather-icon">
							{#if weather.iconType === 'sun'}
								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
									<circle cx="12" cy="12" r="4"/>
									<path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
								</svg>
							{:else if weather.iconType === 'cloud-sun'}
								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
									<path d="M12 2v1m0 18v1m9-10h1M2 12h1m15.5-6.5l.7.7M4.2 19.8l.7-.7m15.4 0l-.7-.7M4.9 5.2l-.7.7"/>
									<path d="M17.5 19a5 5 0 1 0-4.9-6A4.5 4.5 0 0 0 8 17.5a4.5 4.5 0 0 0 4.5 4.5h5a3 3 0 0 0 0-6"/>
								</svg>
							{:else if weather.iconType === 'cloud'}
								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
									<path d="M17.5 19a5 5 0 1 0-4.9-6A4.5 4.5 0 0 0 8 17.5a4.5 4.5 0 0 0 4.5 4.5h5a3 3 0 0 0 0-6"/>
								</svg>
							{:else if weather.iconType === 'rain'}
								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
									<path d="M16 13V5a4 4 0 0 0-8 0v8"/>
									<path d="M8 16v2m4-4v4m4-2v2"/>
									<path d="M6 12a4 4 0 0 0 0 8h12a4 4 0 0 0 0-8H6z"/>
								</svg>
							{:else if weather.iconType === 'snow'}
								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
									<path d="M12 2v20m5-17l-5 3-5-3m10 14l-5-3-5 3"/>
									<path d="M2 12h20M5 5l3 5-3 5m14-10l-3 5 3 5"/>
								</svg>
							{:else if weather.iconType === 'storm'}
								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
									<path d="M17.5 17a5 5 0 1 0-4.9-6A4.5 4.5 0 0 0 8 15.5a4.5 4.5 0 0 0 4.5 4.5h5a3 3 0 0 0 0-6"/>
									<path d="M13 12l-2 5h4l-2 5"/>
								</svg>
							{:else if weather.iconType === 'fog'}
								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
									<path d="M4 12h16M4 16h16M4 8h16"/>
								</svg>
							{:else}
								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
									<path d="M17.5 19a5 5 0 1 0-4.9-6A4.5 4.5 0 0 0 8 17.5a4.5 4.5 0 0 0 4.5 4.5h5a3 3 0 0 0 0-6"/>
								</svg>
							{/if}
						</span>
						<span class="weather-temp">{weather.temp}°</span>
						<span class="weather-divider"></span>
						<span class="weather-condition">{weather.condition}</span>
						{#if weather.location}
							<span class="weather-divider"></span>
							<span class="weather-location">{weather.location}</span>
						{/if}
					</div>
				{/if}
			</div>

			<!-- QR code -->
			{#if qrCodeDataUrl}
				<div class="qr-landing">
					<img src={qrCodeDataUrl} alt="Scan to add content" class="qr-image" />
					<span class="qr-label">Scan to cast</span>
				</div>
			{/if}

			<!-- Branding -->
			<div class="ambient-brand">
				<svg viewBox="0 0 24 24" class="brand-icon">
					<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
				</svg>
				<span class="brand-name">droppy</span>
			</div>
		</div>
	{/if}

	<!-- Corner QR when content playing -->
	{#if qrVisible && qrCodeDataUrl && ($currentContent || $isLoading)}
		<div class="qr-corner" class:faded={qrFadedOut}>
			<img src={qrCodeDataUrl} alt="QR code" class="qr-code-small" />
		</div>
	{/if}

	<div class="status-dot" class:connected={isSocketConnected} class:has-uploaders={$roomStatus.uploaders > 0}></div>
</div>

<style>
	/* ═══════════════════════════════════════════════════════════════
	   COLOR SYSTEM: Time of Day + Weather
	   ═══════════════════════════════════════════════════════════════ */

	.display-page {
		position: fixed;
		inset: 0;
		background: #000;
		overflow: hidden;
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

		/* Default/fallback colors */
		--sky-top: #0a0e1a;
		--sky-mid: #141b2d;
		--sky-bottom: #1a2140;
		--sky-horizon: #2a3655;
		--accent-primary: #6366f1;
		--accent-secondary: #a78bfa;
		--accent-glow: rgba(99, 102, 241, 0.3);
		--text-primary: rgba(255, 255, 255, 0.95);
		--text-secondary: rgba(255, 255, 255, 0.5);
		--orb-1: rgba(99, 102, 241, 0.15);
		--orb-2: rgba(139, 92, 246, 0.12);
		--orb-3: rgba(59, 130, 246, 0.1);
		--orb-4: rgba(168, 85, 247, 0.08);
		--cloud-color: rgba(255, 255, 255, 0.15);
		--sun-core: #fef3c7;
		--sun-mid: #fcd34d;
		--sun-outer: #f59e0b;
		--sun-glow: rgba(251, 191, 36, 0.4);
	}

	/* ═══════════════════════════════════════════════════════════════
	   DAWN (5-7am): Soft pinks, peaches, golds
	   ═══════════════════════════════════════════════════════════════ */
	.display-page[data-time="dawn"] {
		--sky-top: #1e1b4b;
		--sky-mid: #4c1d95;
		--sky-bottom: #be185d;
		--sky-horizon: #fb7185;
		--accent-primary: #fda4af;
		--accent-secondary: #fdba74;
		--accent-glow: rgba(253, 164, 175, 0.5);
		--text-primary: rgba(255, 255, 255, 0.95);
		--text-secondary: rgba(255, 255, 255, 0.65);
		--orb-1: rgba(251, 113, 133, 0.3);
		--orb-2: rgba(253, 186, 116, 0.25);
		--orb-3: rgba(253, 164, 175, 0.2);
		--orb-4: rgba(251, 207, 232, 0.15);
		--sun-core: #fff7ed;
		--sun-mid: #fed7aa;
		--sun-outer: #fb923c;
		--sun-glow: rgba(251, 146, 60, 0.6);
	}

	/* ═══════════════════════════════════════════════════════════════
	   MORNING (7am-12pm): Bright, warm whites and light blues
	   ═══════════════════════════════════════════════════════════════ */
	.display-page[data-time="morning"] {
		--sky-top: #0369a1;
		--sky-mid: #0ea5e9;
		--sky-bottom: #38bdf8;
		--sky-horizon: #bae6fd;
		--accent-primary: #fbbf24;
		--accent-secondary: #f59e0b;
		--accent-glow: rgba(251, 191, 36, 0.4);
		--text-primary: rgba(15, 23, 42, 0.9);
		--text-secondary: rgba(15, 23, 42, 0.55);
		--orb-1: rgba(251, 191, 36, 0.25);
		--orb-2: rgba(56, 189, 248, 0.2);
		--orb-3: rgba(255, 255, 255, 0.35);
		--orb-4: rgba(186, 230, 253, 0.25);
		--cloud-color: rgba(255, 255, 255, 0.85);
		--sun-core: #fefce8;
		--sun-mid: #fde047;
		--sun-outer: #facc15;
		--sun-glow: rgba(250, 204, 21, 0.5);
	}

	/* ═══════════════════════════════════════════════════════════════
	   AFTERNOON (12-5pm): Clear sky blues, warm yellows
	   ═══════════════════════════════════════════════════════════════ */
	.display-page[data-time="afternoon"] {
		--sky-top: #075985;
		--sky-mid: #0284c7;
		--sky-bottom: #0ea5e9;
		--sky-horizon: #7dd3fc;
		--accent-primary: #fcd34d;
		--accent-secondary: #fbbf24;
		--accent-glow: rgba(252, 211, 77, 0.4);
		--text-primary: rgba(15, 23, 42, 0.9);
		--text-secondary: rgba(15, 23, 42, 0.55);
		--orb-1: rgba(252, 211, 77, 0.2);
		--orb-2: rgba(14, 165, 233, 0.18);
		--orb-3: rgba(255, 255, 255, 0.3);
		--orb-4: rgba(125, 211, 252, 0.2);
		--cloud-color: rgba(255, 255, 255, 0.9);
		--sun-core: #fefce8;
		--sun-mid: #fef08a;
		--sun-outer: #fde047;
		--sun-glow: rgba(253, 224, 71, 0.45);
	}

	/* ═══════════════════════════════════════════════════════════════
	   DUSK (5-8pm): Rich oranges, purples, magentas
	   ═══════════════════════════════════════════════════════════════ */
	.display-page[data-time="dusk"] {
		--sky-top: #1e1b4b;
		--sky-mid: #5b21b6;
		--sky-bottom: #c026d3;
		--sky-horizon: #f97316;
		--accent-primary: #fb923c;
		--accent-secondary: #c084fc;
		--accent-glow: rgba(249, 115, 22, 0.5);
		--text-primary: rgba(255, 255, 255, 0.95);
		--text-secondary: rgba(255, 255, 255, 0.6);
		--orb-1: rgba(249, 115, 22, 0.3);
		--orb-2: rgba(192, 132, 252, 0.25);
		--orb-3: rgba(251, 146, 60, 0.2);
		--orb-4: rgba(217, 70, 239, 0.15);
		--sun-core: #fef3c7;
		--sun-mid: #fb923c;
		--sun-outer: #ea580c;
		--sun-glow: rgba(234, 88, 12, 0.7);
	}

	/* ═══════════════════════════════════════════════════════════════
	   NIGHT (8pm-5am): Deep blues, purples, stars
	   ═══════════════════════════════════════════════════════════════ */
	.display-page[data-time="night"] {
		--sky-top: #020617;
		--sky-mid: #0f172a;
		--sky-bottom: #1e293b;
		--sky-horizon: #334155;
		--accent-primary: #818cf8;
		--accent-secondary: #a78bfa;
		--accent-glow: rgba(129, 140, 248, 0.35);
		--text-primary: rgba(255, 255, 255, 0.92);
		--text-secondary: rgba(255, 255, 255, 0.48);
		--orb-1: rgba(129, 140, 248, 0.12);
		--orb-2: rgba(167, 139, 250, 0.1);
		--orb-3: rgba(99, 102, 241, 0.08);
		--orb-4: rgba(139, 92, 246, 0.06);
	}

	/* ═══════════════════════════════════════════════════════════════
	   WEATHER MODIFIERS
	   ═══════════════════════════════════════════════════════════════ */

	/* Cloudy: Muted, grayer tones */
	.display-page[data-weather="cloudy"] {
		--sky-top: color-mix(in srgb, var(--sky-top) 65%, #374151);
		--sky-mid: color-mix(in srgb, var(--sky-mid) 55%, #4b5563);
		--sky-bottom: color-mix(in srgb, var(--sky-bottom) 55%, #6b7280);
		--sky-horizon: color-mix(in srgb, var(--sky-horizon) 50%, #9ca3af);
		--cloud-color: rgba(209, 213, 219, 0.7);
		--orb-1: rgba(107, 114, 128, 0.18);
		--orb-2: rgba(156, 163, 175, 0.15);
	}

	/* Rain: Blue-gray wash */
	.display-page[data-weather="rain"] {
		--sky-top: color-mix(in srgb, var(--sky-top) 45%, #1e3a5f);
		--sky-mid: color-mix(in srgb, var(--sky-mid) 45%, #1e3a5f);
		--sky-bottom: color-mix(in srgb, var(--sky-bottom) 45%, #334155);
		--sky-horizon: color-mix(in srgb, var(--sky-horizon) 40%, #475569);
		--cloud-color: rgba(71, 85, 105, 0.85);
		--orb-1: rgba(59, 130, 246, 0.15);
		--orb-2: rgba(96, 165, 250, 0.12);
		--text-primary: rgba(255, 255, 255, 0.9);
		--text-secondary: rgba(255, 255, 255, 0.5);
	}

	/* Storm: Dark dramatic purples */
	.display-page[data-weather="storm"] {
		--sky-top: #0c0a1a;
		--sky-mid: #1a1033;
		--sky-bottom: #2d1f4a;
		--sky-horizon: #3b2962;
		--accent-primary: #a78bfa;
		--accent-glow: rgba(167, 139, 250, 0.5);
		--cloud-color: rgba(30, 27, 45, 0.9);
		--orb-1: rgba(88, 28, 135, 0.25);
		--orb-2: rgba(126, 34, 206, 0.2);
		--text-primary: rgba(255, 255, 255, 0.95);
		--text-secondary: rgba(255, 255, 255, 0.5);
	}

	/* Snow: White/silver with cool undertones */
	.display-page[data-weather="snow"] {
		--sky-top: color-mix(in srgb, var(--sky-top) 55%, #c7d2fe);
		--sky-mid: color-mix(in srgb, var(--sky-mid) 45%, #ddd6fe);
		--sky-bottom: color-mix(in srgb, var(--sky-bottom) 45%, #e0e7ff);
		--sky-horizon: color-mix(in srgb, var(--sky-horizon) 40%, #f1f5f9);
		--orb-1: rgba(224, 231, 255, 0.35);
		--orb-2: rgba(199, 210, 254, 0.3);
		--orb-3: rgba(255, 255, 255, 0.25);
		--text-primary: rgba(30, 41, 59, 0.9);
		--text-secondary: rgba(30, 41, 59, 0.55);
	}

	/* Fog: Misty, ethereal, low-contrast */
	.display-page[data-weather="fog"] {
		--sky-top: color-mix(in srgb, var(--sky-top) 35%, #94a3b8);
		--sky-mid: color-mix(in srgb, var(--sky-mid) 25%, #cbd5e1);
		--sky-bottom: color-mix(in srgb, var(--sky-bottom) 25%, #e2e8f0);
		--sky-horizon: color-mix(in srgb, var(--sky-horizon) 20%, #f1f5f9);
		--text-primary: rgba(255, 255, 255, 0.85);
		--text-secondary: rgba(255, 255, 255, 0.45);
		--orb-1: rgba(148, 163, 184, 0.25);
		--orb-2: rgba(203, 213, 225, 0.2);
	}

	/* ═══════════════════════════════════════════════════════════════
	   BASE LAYOUT
	   ═══════════════════════════════════════════════════════════════ */

	.content-wrapper {
		position: absolute;
		inset: 0;
	}

	/* ═══════════════════════════════════════════════════════════════
	   AUDIO UNLOCK OVERLAY
	   ═══════════════════════════════════════════════════════════════ */

	.enable-audio-overlay {
		position: fixed;
		inset: 0;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		pointer-events: auto;
		background: transparent;
	}

	.enable-audio-overlay .enable-bg {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 40%, var(--sky-bottom) 70%, var(--sky-horizon) 100%);
		transition: all 2s ease;
	}

	.enable-content {
		position: relative;
		text-align: center;
		color: var(--text-primary);
		z-index: 1;
	}

	.enable-icon {
		width: clamp(80px, 12vmin, 120px);
		height: clamp(80px, 12vmin, 120px);
		margin: 0 auto 2rem;
		background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 80px var(--accent-glow), 0 0 120px var(--accent-glow);
		animation: pulse-icon 3s ease-in-out infinite;
	}

	@keyframes pulse-icon {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.08); }
	}

	.enable-icon svg {
		width: 45%;
		height: 45%;
		color: white;
	}

	.enable-content h1 {
		font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
		font-size: clamp(2rem, 5vmin, 3.5rem);
		font-weight: 300;
		margin: 0 0 0.75rem;
		letter-spacing: 0.02em;
	}

	.enable-content p {
		font-size: clamp(0.9rem, 2vmin, 1.1rem);
		color: var(--text-secondary);
		margin: 0;
		font-weight: 400;
	}

	/* ═══════════════════════════════════════════════════════════════
	   AMBIENT LANDING PAGE
	   ═══════════════════════════════════════════════════════════════ */

	.ambient-landing {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		clip-path: inset(0);
		z-index: 5;
	}

	/* Multi-layer sky */
	.sky-base {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg,
			var(--sky-top) 0%,
			var(--sky-mid) 35%,
			var(--sky-bottom) 65%,
			var(--sky-horizon) 100%
		);
		transition: background 4s ease;
	}

	.sky-gradient-overlay {
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 120% 80% at 50% 120%, var(--sky-horizon) 0%, transparent 60%);
		opacity: 0.4;
	}

	.horizon-haze {
		position: absolute;
		/* Inset from edges to prevent blur clipping at sides */
		bottom: -30px;
		left: 30px;
		right: 30px;
		height: 32%;
		background: linear-gradient(180deg, transparent 0%, var(--sky-horizon) 100%);
		opacity: 0.3;
		filter: blur(20px);
	}

	/* Atmospheric orbs - four layers */
	.atmosphere {
		position: absolute;
		/* Safety margin: blur extends ~80px, so we inset by 100px to prevent edge artifacts */
		inset: 100px;
		pointer-events: none;
		overflow: hidden;
	}

	.atmo-layer {
		position: absolute;
		border-radius: 50%;
		filter: blur(80px);
		opacity: 0.7;
		will-change: transform;
	}

	.atmo-1 {
		width: 60%;
		height: 60%;
		top: 10%;
		left: 15%;
		background: radial-gradient(ellipse, var(--orb-1) 0%, transparent 70%);
		animation: drift-1 30s ease-in-out infinite;
	}

	.atmo-2 {
		width: 50%;
		height: 50%;
		top: 30%;
		right: 15%;
		background: radial-gradient(ellipse, var(--orb-2) 0%, transparent 70%);
		animation: drift-2 35s ease-in-out infinite;
	}

	.atmo-3 {
		width: 45%;
		height: 45%;
		bottom: 15%;
		left: 30%;
		background: radial-gradient(ellipse, var(--orb-3) 0%, transparent 70%);
		animation: drift-3 40s ease-in-out infinite;
	}

	.atmo-4 {
		width: 40%;
		height: 40%;
		top: 25%;
		left: 40%;
		background: radial-gradient(ellipse, var(--orb-4) 0%, transparent 70%);
		animation: drift-4 45s ease-in-out infinite;
	}

	/* Reduced animation range to prevent edge artifacts */
	@keyframes drift-1 {
		0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
		25% { transform: translate(3%, -2%) scale(1.05) rotate(1deg); }
		50% { transform: translate(-2%, 3%) scale(0.98) rotate(-1deg); }
		75% { transform: translate(-3%, -1%) scale(1.02) rotate(0.5deg); }
	}

	@keyframes drift-2 {
		0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
		33% { transform: translate(-2%, 2%) scale(0.96) rotate(-1deg); }
		66% { transform: translate(3%, -2%) scale(1.04) rotate(1deg); }
	}

	@keyframes drift-3 {
		0%, 100% { transform: translate(0, 0) scale(1); }
		50% { transform: translate(2%, -2%) scale(1.05); }
	}

	@keyframes drift-4 {
		0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
		25% { transform: translate(-2%, -3%) scale(1.02) rotate(-0.5deg); }
		75% { transform: translate(3%, 2%) scale(0.98) rotate(1deg); }
	}

	/* ═══════════════════════════════════════════════════════════════
	   STARS - Three layers for depth
	   ═══════════════════════════════════════════════════════════════ */

	.star-field {
		position: absolute;
		inset: 0;
		pointer-events: none;
		overflow: hidden;
	}

	.star {
		position: absolute;
		border-radius: 50%;
	}

	.star-dim {
		animation: twinkle-slow 4s ease-in-out infinite alternate;
	}

	.star-medium {
		animation: twinkle-medium 3s ease-in-out infinite alternate;
	}

	.star-bright {
		animation: twinkle-bright 2s ease-in-out infinite alternate;
	}

	@keyframes twinkle-slow {
		0% { opacity: 0.08; transform: scale(0.9); }
		100% { opacity: 0.3; transform: scale(1); }
	}

	@keyframes twinkle-medium {
		0% { opacity: 0.2; transform: scale(0.95); }
		100% { opacity: 0.5; transform: scale(1.05); }
	}

	@keyframes twinkle-bright {
		0% { opacity: 0.5; transform: scale(0.98); filter: brightness(0.9); }
		100% { opacity: 0.85; transform: scale(1.08); filter: brightness(1.15); }
	}


	/* ═══════════════════════════════════════════════════════════════
	   AURORA BOREALIS
	   ═══════════════════════════════════════════════════════════════ */

	.aurora-container {
		position: absolute;
		/* Safety inset to keep blurred aurora away from edges */
		inset: 50px;
		overflow: hidden;
		pointer-events: none;
		opacity: 0.2;
	}

	.aurora {
		position: absolute;
		width: 90%;
		height: 45%;
		top: 5%;
		left: 5%;
		filter: blur(40px);
		mix-blend-mode: screen;
	}

	.aurora-1 {
		background: linear-gradient(180deg,
			transparent 0%,
			rgba(74, 222, 128, 0.3) 20%,
			rgba(34, 197, 94, 0.4) 40%,
			rgba(16, 185, 129, 0.3) 60%,
			transparent 80%
		);
		animation: aurora-wave 20s ease-in-out infinite;
	}

	.aurora-2 {
		background: linear-gradient(180deg,
			transparent 0%,
			rgba(59, 130, 246, 0.2) 30%,
			rgba(139, 92, 246, 0.3) 50%,
			rgba(168, 85, 247, 0.2) 70%,
			transparent 90%
		);
		animation: aurora-wave 25s ease-in-out infinite reverse;
		animation-delay: -5s;
	}

	.aurora-3 {
		background: linear-gradient(180deg,
			transparent 0%,
			rgba(236, 72, 153, 0.15) 40%,
			rgba(232, 121, 249, 0.2) 60%,
			transparent 85%
		);
		animation: aurora-wave 30s ease-in-out infinite;
		animation-delay: -10s;
	}

	/* Reduced translateX range to prevent edge clipping of blurred aurora */
	@keyframes aurora-wave {
		0%, 100% {
			transform: translateX(0) skewX(-2deg) scaleY(1);
		}
		25% {
			transform: translateX(2%) skewX(1deg) scaleY(1.1);
		}
		50% {
			transform: translateX(-2%) skewX(-1deg) scaleY(0.9);
		}
		75% {
			transform: translateX(1%) skewX(2deg) scaleY(1.05);
		}
	}

	/* ═══════════════════════════════════════════════════════════════
	   CLOUDS - Multi-layer system
	   ═══════════════════════════════════════════════════════════════ */

	.cloud-system {
		position: absolute;
		inset: 0;
		pointer-events: none;
		overflow: hidden;
		clip-path: inset(0);
	}

	.cloud-formation {
		position: absolute;
		display: flex;
		animation: cloud-drift linear infinite;
	}

	.cloud-formation.layer-0 {
		top: 5%;
		opacity: 0.5;
		filter: blur(8px);
		transform: scale(0.8);
	}

	.cloud-formation.layer-1 {
		top: 15%;
		opacity: 0.7;
		filter: blur(4px);
	}

	.cloud-formation.layer-2 {
		top: 8%;
		opacity: 0.9;
		filter: blur(2px);
		transform: scale(1.2);
	}

	.cloud-puff {
		position: absolute;
		background: var(--cloud-color);
		border-radius: 50%;
		filter: blur(20px);
	}

	@keyframes cloud-drift {
		0% { transform: translateX(-30%); }
		100% { transform: translateX(130vw); }
	}

	/* ═══════════════════════════════════════════════════════════════
	   SUN - Core, corona, and rays
	   ═══════════════════════════════════════════════════════════════ */

	.celestial-container {
		position: absolute;
		pointer-events: none;
	}

	.sun-container {
		/* Position along arc based on time */
		--arc-height: 35vh;
		left: calc(var(--position) * 0.8 + 10%);
		top: calc(15% + sin((var(--position) - 50) * 0.0314) * var(--arc-height) * -1);
		width: clamp(80px, 12vmin, 140px);
		height: clamp(80px, 12vmin, 140px);
		transition: left 60s linear, top 60s linear;
	}

	[data-time="dawn"] .sun-container {
		left: calc(var(--position) * 0.3 + 60%);
		top: calc(50% + (100 - var(--position)) * 0.3%);
	}

	[data-time="dusk"] .sun-container {
		left: calc(20% + (100 - var(--position)) * 0.3);
		top: calc(40% + var(--position) * 0.2%);
	}

	.sun-rays {
		position: absolute;
		inset: -100%;
		background: conic-gradient(from 0deg,
			transparent 0deg,
			var(--sun-glow) 10deg,
			transparent 20deg,
			transparent 30deg,
			var(--sun-glow) 40deg,
			transparent 50deg,
			transparent 60deg,
			var(--sun-glow) 70deg,
			transparent 80deg,
			transparent 90deg,
			var(--sun-glow) 100deg,
			transparent 110deg,
			transparent 120deg,
			var(--sun-glow) 130deg,
			transparent 140deg,
			transparent 150deg,
			var(--sun-glow) 160deg,
			transparent 170deg,
			transparent 180deg,
			var(--sun-glow) 190deg,
			transparent 200deg,
			transparent 210deg,
			var(--sun-glow) 220deg,
			transparent 230deg,
			transparent 240deg,
			var(--sun-glow) 250deg,
			transparent 260deg,
			transparent 270deg,
			var(--sun-glow) 280deg,
			transparent 290deg,
			transparent 300deg,
			var(--sun-glow) 310deg,
			transparent 320deg,
			transparent 330deg,
			var(--sun-glow) 340deg,
			transparent 350deg,
			transparent 360deg
		);
		opacity: 0.3;
		animation: sun-rays-rotate 120s linear infinite;
		filter: blur(10px);
	}

	@keyframes sun-rays-rotate {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.sun-corona {
		position: absolute;
		inset: -50%;
		background: radial-gradient(circle, var(--sun-glow) 0%, transparent 70%);
		animation: corona-pulse 8s ease-in-out infinite;
	}

	@keyframes corona-pulse {
		0%, 100% { transform: scale(1); opacity: 0.6; }
		50% { transform: scale(1.15); opacity: 0.8; }
	}

	.sun-core {
		position: absolute;
		inset: 15%;
		background: radial-gradient(circle at 35% 35%,
			var(--sun-core) 0%,
			var(--sun-mid) 50%,
			var(--sun-outer) 100%
		);
		border-radius: 50%;
		box-shadow:
			0 0 40px var(--sun-glow),
			0 0 80px var(--sun-glow),
			0 0 120px var(--sun-glow);
	}

	.sun-flare {
		position: absolute;
		width: 30%;
		height: 30%;
		top: 20%;
		left: 25%;
		background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
		border-radius: 50%;
		filter: blur(2px);
	}

	/* ═══════════════════════════════════════════════════════════════
	   GOD RAYS - Crepuscular rays for dawn/dusk
	   ═══════════════════════════════════════════════════════════════ */

	.god-rays {
		position: absolute;
		/* Safety inset for blurred rays */
		inset: 30px;
		pointer-events: none;
		overflow: hidden;
	}

	.ray {
		position: absolute;
		bottom: 0;
		height: 95%;
		background: linear-gradient(180deg, transparent 0%, var(--accent-glow) 30%, transparent 100%);
		transform-origin: bottom center;
		opacity: 0.3;
		filter: blur(20px);
	}

	[data-time="dawn"] .god-rays {
		transform-origin: 70% 100%;
	}

	[data-time="dusk"] .god-rays {
		transform-origin: 30% 100%;
	}

	.ray-1 { left: 10%; width: 15%; transform: rotate(-15deg); animation: ray-sway 15s ease-in-out infinite; }
	.ray-2 { left: 25%; width: 12%; transform: rotate(-8deg); animation: ray-sway 18s ease-in-out infinite reverse; }
	.ray-3 { left: 40%; width: 18%; transform: rotate(0deg); animation: ray-sway 20s ease-in-out infinite; }
	.ray-4 { left: 58%; width: 14%; transform: rotate(8deg); animation: ray-sway 17s ease-in-out infinite reverse; }
	.ray-5 { left: 75%; width: 16%; transform: rotate(15deg); animation: ray-sway 22s ease-in-out infinite; }

	@keyframes ray-sway {
		0%, 100% { opacity: 0.2; transform: rotate(var(--base-angle, 0deg)) scaleY(1); }
		50% { opacity: 0.4; transform: rotate(calc(var(--base-angle, 0deg) + 3deg)) scaleY(1.1); }
	}

	/* ═══════════════════════════════════════════════════════════════
	   MOON - Body, craters, glow, and halo
	   ═══════════════════════════════════════════════════════════════ */

	.moon-container {
		right: calc((100 - var(--position)) * 0.6 + 15%);
		top: calc(10% + sin((var(--position) - 50) * 0.0314) * 20vh * -1);
		width: clamp(60px, 10vmin, 100px);
		height: clamp(60px, 10vmin, 100px);
		transition: right 60s linear, top 60s linear;
	}

	.moon-halo {
		position: absolute;
		inset: -80%;
		background: radial-gradient(circle,
			rgba(241, 245, 249, 0.08) 0%,
			rgba(241, 245, 249, 0.04) 40%,
			transparent 70%
		);
		animation: moon-halo-pulse 10s ease-in-out infinite;
	}

	@keyframes moon-halo-pulse {
		0%, 100% { transform: scale(1); opacity: 0.6; }
		50% { transform: scale(1.1); opacity: 0.8; }
	}

	.moon-glow {
		position: absolute;
		inset: -40%;
		background: radial-gradient(circle,
			rgba(241, 245, 249, 0.3) 0%,
			rgba(203, 213, 225, 0.15) 50%,
			transparent 70%
		);
	}

	.moon-body {
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 35% 35%,
			#f8fafc 0%,
			#e2e8f0 30%,
			#cbd5e1 60%,
			#94a3b8 100%
		);
		border-radius: 50%;
		box-shadow:
			inset -10px -10px 30px rgba(0, 0, 0, 0.2),
			0 0 30px rgba(241, 245, 249, 0.3),
			0 0 60px rgba(203, 213, 225, 0.2);
		overflow: hidden;
	}

	.moon-crater {
		position: absolute;
		border-radius: 50%;
		background: radial-gradient(circle at 40% 40%,
			rgba(148, 163, 184, 0.3) 0%,
			rgba(100, 116, 139, 0.4) 50%,
			rgba(148, 163, 184, 0.2) 100%
		);
		box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
	}

	.c1 { width: 22%; height: 22%; top: 20%; left: 15%; }
	.c2 { width: 16%; height: 16%; top: 45%; left: 55%; }
	.c3 { width: 12%; height: 12%; top: 65%; left: 25%; }
	.c4 { width: 10%; height: 10%; top: 30%; left: 65%; }
	.c5 { width: 8%; height: 8%; top: 75%; left: 60%; }

	.moon-mare {
		position: absolute;
		width: 40%;
		height: 35%;
		top: 35%;
		left: 20%;
		background: radial-gradient(ellipse, rgba(100, 116, 139, 0.25) 0%, transparent 70%);
		border-radius: 50%;
		filter: blur(5px);
	}

	/* ═══════════════════════════════════════════════════════════════
	   HORIZON GLOW
	   ═══════════════════════════════════════════════════════════════ */

	.horizon-glow {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40%;
		background: radial-gradient(ellipse 120% 100% at 50% 100%,
			var(--accent-glow) 0%,
			transparent 50%
		);
		pointer-events: none;
	}

	.horizon-glow-secondary {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 30%;
		background: linear-gradient(180deg,
			transparent 0%,
			color-mix(in srgb, var(--sky-horizon) 30%, transparent) 50%,
			var(--sky-horizon) 100%
		);
		opacity: 0.5;
		pointer-events: none;
	}

	/* ═══════════════════════════════════════════════════════════════
	   RAIN SYSTEM
	   ═══════════════════════════════════════════════════════════════ */

	.rain-system {
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.rain-drop {
		position: absolute;
		top: -30px;
		width: 2px;
		height: var(--length);
		background: linear-gradient(180deg,
			transparent 0%,
			rgba(148, 163, 184, calc(var(--opacity) * 0.3)) 20%,
			rgba(148, 163, 184, var(--opacity)) 50%,
			rgba(148, 163, 184, calc(var(--opacity) * 0.5)) 80%,
			transparent 100%
		);
		transform: rotate(var(--wind));
		animation: rain-fall var(--speed) linear infinite;
		animation-delay: var(--delay);
	}

	@keyframes rain-fall {
		0% {
			transform: translateY(-30px) rotate(var(--wind, 8deg));
			opacity: 0;
		}
		10% { opacity: 1; }
		90% { opacity: 1; }
		100% {
			transform: translateY(calc(100vh + 30px)) rotate(var(--wind, 8deg));
			opacity: 0;
		}
	}

	.rain-mist {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 15%;
		background: linear-gradient(180deg, transparent 0%, rgba(148, 163, 184, 0.2) 100%);
		filter: blur(20px);
		animation: mist-drift 8s ease-in-out infinite;
	}

	.rain-mist-2 {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 8%;
		background: linear-gradient(180deg, transparent 0%, rgba(148, 163, 184, 0.3) 100%);
		filter: blur(10px);
		animation: mist-drift 6s ease-in-out infinite reverse;
	}

	/* Use only opacity - no translateX to prevent edge artifacts */
	@keyframes mist-drift {
		0%, 100% { opacity: 0.85; }
		50% { opacity: 1; }
	}

	/* ═══════════════════════════════════════════════════════════════
	   SNOW SYSTEM
	   ═══════════════════════════════════════════════════════════════ */

	.snow-system {
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.snowflake {
		position: absolute;
		top: -20px;
		width: var(--size);
		height: var(--size);
		background: radial-gradient(circle,
			rgba(255, 255, 255, var(--opacity)) 0%,
			rgba(255, 255, 255, calc(var(--opacity) * 0.5)) 50%,
			transparent 100%
		);
		border-radius: 50%;
		box-shadow: 0 0 calc(var(--size) * 0.5) rgba(255, 255, 255, 0.3);
		animation: snow-fall var(--speed) linear infinite;
		animation-delay: var(--delay);
	}

	@keyframes snow-fall {
		0% {
			transform: translateY(-20px) translateX(0) rotate(0deg);
			opacity: 0;
		}
		10% { opacity: var(--opacity); }
		50% {
			transform: translateY(50vh) translateX(var(--wobble)) rotate(180deg);
		}
		90% { opacity: calc(var(--opacity) * 0.8); }
		100% {
			transform: translateY(calc(100vh + 20px)) translateX(var(--drift)) rotate(360deg);
			opacity: 0;
		}
	}

	.snow-ground-glow {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 10%;
		background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.15) 100%);
		filter: blur(30px);
	}

	/* ═══════════════════════════════════════════════════════════════
	   FOG SYSTEM
	   ═══════════════════════════════════════════════════════════════ */

	.fog-system {
		position: absolute;
		inset: 0;
		pointer-events: none;
		overflow: hidden;
	}

	.fog-layer {
		position: absolute;
		inset: 0;
	}

	/* Fog uses only opacity and subtle scale - no translateX to avoid edge clipping */
	.fog-back {
		background: linear-gradient(180deg,
			transparent 0%,
			rgba(148, 163, 184, 0.15) 30%,
			rgba(203, 213, 225, 0.25) 60%,
			rgba(226, 232, 240, 0.35) 100%
		);
		animation: fog-drift-slow 30s ease-in-out infinite;
	}

	.fog-mid {
		background: linear-gradient(180deg,
			transparent 0%,
			transparent 20%,
			rgba(203, 213, 225, 0.2) 50%,
			rgba(226, 232, 240, 0.4) 80%,
			rgba(241, 245, 249, 0.5) 100%
		);
		animation: fog-drift-mid 25s ease-in-out infinite reverse;
	}

	.fog-front {
		background: linear-gradient(180deg,
			transparent 0%,
			transparent 40%,
			rgba(226, 232, 240, 0.3) 70%,
			rgba(241, 245, 249, 0.6) 100%
		);
		animation: fog-drift-fast 20s ease-in-out infinite;
	}

	/* Remove translateX - use only opacity and scale to avoid edge artifacts */
	@keyframes fog-drift-slow {
		0%, 100% { opacity: 0.95; }
		50% { opacity: 1; }
	}

	@keyframes fog-drift-mid {
		0%, 100% { opacity: 0.9; }
		50% { opacity: 1; }
	}

	@keyframes fog-drift-fast {
		0%, 100% { opacity: 0.92; }
		50% { opacity: 1; }
	}

	.fog-wisps {
		position: absolute;
		/* Safety inset for blurred wisps */
		inset: 60px;
		overflow: hidden;
	}

	.fog-wisp {
		position: absolute;
		background: rgba(241, 245, 249, 0.3);
		border-radius: 50%;
		filter: blur(40px);
	}

	.w1 {
		width: 25%;
		height: 18%;
		bottom: 25%;
		left: 10%;
		animation: wisp-float 25s ease-in-out infinite;
	}

	.w2 {
		width: 22%;
		height: 14%;
		bottom: 35%;
		right: 20%;
		animation: wisp-float 30s ease-in-out infinite reverse;
	}

	.w3 {
		width: 28%;
		height: 20%;
		bottom: 15%;
		left: 38%;
		animation: wisp-float 35s ease-in-out infinite;
		animation-delay: -10s;
	}

	/* Minimal movement to prevent edge artifacts */
	@keyframes wisp-float {
		0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
		50% { transform: translate(1%, -1%) scale(1.03); opacity: 0.35; }
	}

	/* ═══════════════════════════════════════════════════════════════
	   STORM SYSTEM
	   ═══════════════════════════════════════════════════════════════ */

	.storm-system {
		position: absolute;
		inset: 0;
		pointer-events: none;
		overflow: hidden;
	}

	.lightning-flash {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg,
			rgba(167, 139, 250, 0.3) 0%,
			rgba(255, 255, 255, 0.8) 30%,
			rgba(167, 139, 250, 0.2) 100%
		);
		opacity: 0;
		animation: lightning-flash-anim 12s ease-out infinite;
	}

	@keyframes lightning-flash-anim {
		0%, 100% { opacity: 0; }
		89% { opacity: 0; }
		90% { opacity: 0.9; }
		91% { opacity: 0; }
		92% { opacity: 0.5; }
		93% { opacity: 0; }
		94% { opacity: 0.3; }
		95% { opacity: 0; }
	}

	.lightning-bolt {
		position: absolute;
		top: 10%;
		left: 60%;
		width: 3px;
		height: 40%;
		background: linear-gradient(180deg,
			white 0%,
			rgba(167, 139, 250, 0.8) 50%,
			transparent 100%
		);
		opacity: 0;
		filter: blur(1px);
		clip-path: polygon(
			50% 0%,
			55% 25%,
			70% 25%,
			45% 50%,
			60% 50%,
			30% 100%,
			40% 55%,
			25% 55%,
			50% 30%,
			35% 30%
		);
		animation: bolt-strike 12s ease-out infinite;
	}

	@keyframes bolt-strike {
		0%, 100% { opacity: 0; }
		89% { opacity: 0; }
		90% { opacity: 1; }
		92% { opacity: 0; }
	}

	.storm-clouds {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 40%;
		background: linear-gradient(180deg,
			rgba(30, 27, 45, 0.9) 0%,
			rgba(45, 31, 74, 0.7) 50%,
			transparent 100%
		);
		animation: storm-cloud-roll 15s ease-in-out infinite;
	}

	/* Use only opacity and scaleY - no translateX to prevent edge artifacts */
	@keyframes storm-cloud-roll {
		0%, 100% { opacity: 0.95; }
		50% { opacity: 1; }
	}

	/* ═══════════════════════════════════════════════════════════════
	   DUST PARTICLES
	   ═══════════════════════════════════════════════════════════════ */

	.particle-system {
		position: absolute;
		inset: 0;
		pointer-events: none;
		overflow: hidden;
	}

	.dust-particle {
		position: absolute;
		width: var(--size);
		height: var(--size);
		background: radial-gradient(circle, rgba(255, 255, 255, var(--opacity)) 0%, transparent 70%);
		border-radius: 50%;
		animation: particle-float var(--speed) ease-in-out infinite;
		animation-delay: var(--delay);
	}

	@keyframes particle-float {
		0%, 100% {
			transform: translate(0, 0) scale(1);
			opacity: var(--opacity);
		}
		25% {
			transform: translate(20px, -30px) scale(1.2);
		}
		50% {
			transform: translate(-10px, -50px) scale(0.8);
			opacity: calc(var(--opacity) * 1.5);
		}
		75% {
			transform: translate(15px, -20px) scale(1.1);
		}
	}

	/* ═══════════════════════════════════════════════════════════════
	   NOISE & VIGNETTE
	   ═══════════════════════════════════════════════════════════════ */

	.ambient-noise {
		position: absolute;
		inset: -10px;
		opacity: 0.02;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
		background-repeat: repeat;
		background-size: 256px 256px;
		pointer-events: none;
		mix-blend-mode: overlay;
	}

	.ambient-vignette {
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, rgba(0,0,0,0.6) 100%);
		pointer-events: none;
	}

	.ambient-vignette-soft {
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 150% 100% at 50% 0%, transparent 0%, transparent 60%, rgba(0,0,0,0.3) 100%);
		pointer-events: none;
	}

	/* ═══════════════════════════════════════════════════════════════
	   MAIN CONTENT - TIME & WEATHER
	   ═══════════════════════════════════════════════════════════════ */

	.ambient-content {
		position: relative;
		z-index: 10;
		text-align: center;
		padding: 2rem;
	}

	.time-display {
		margin-bottom: 0.5rem;
	}

	.time-text {
		font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
		font-size: clamp(7rem, 20vmin, 16rem);
		font-weight: 300;
		letter-spacing: -0.02em;
		line-height: 0.85;
		color: var(--text-primary);
		text-shadow:
			0 4px 40px rgba(0, 0, 0, 0.3),
			0 0 80px var(--accent-glow);
		transition: color 2s ease, text-shadow 2s ease;
	}

	.date-text {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: clamp(1rem, 2.5vmin, 1.6rem);
		font-weight: 400;
		color: var(--text-secondary);
		margin: clamp(2rem, 5vmin, 6rem) 0 1.5rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		transition: color 2s ease;
	}

	.weather-display {
		display: inline-flex;
		align-items: center;
		gap: clamp(0.5rem, 1.5vmin, 1rem);
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: clamp(1rem, 2.5vmin, 1.5rem);
		font-weight: 400;
		color: var(--text-secondary);
		background: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		padding: clamp(0.6rem, 1.5vmin, 1rem) clamp(1.2rem, 3vmin, 2rem);
		border-radius: 100px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		transition: all 2s ease;
	}

	.weather-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.weather-icon svg {
		width: 1.3em;
		height: 1.3em;
		stroke: var(--text-primary);
		opacity: 0.85;
	}

	.weather-temp {
		font-weight: 500;
		color: var(--text-primary);
	}

	.weather-divider {
		width: 1px;
		height: 1em;
		background: var(--text-secondary);
		opacity: 0.3;
	}

	.weather-condition {
		opacity: 0.8;
	}

	.weather-location {
		opacity: 0.6;
		font-size: 0.9em;
	}

	/* Daytime adjustments */
	[data-time="morning"] .weather-display,
	[data-time="afternoon"] .weather-display {
		background: rgba(255, 255, 255, 0.25);
		border-color: rgba(0, 0, 0, 0.08);
	}

	[data-time="morning"] .time-text,
	[data-time="afternoon"] .time-text {
		text-shadow:
			0 4px 40px rgba(255, 255, 255, 0.4),
			0 0 60px var(--accent-glow);
	}

	/* ═══════════════════════════════════════════════════════════════
	   QR CODE & BRANDING
	   ═══════════════════════════════════════════════════════════════ */

	.qr-landing {
		position: fixed;
		bottom: clamp(2rem, 5vmin, 4rem);
		right: clamp(2rem, 5vmin, 4rem);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		opacity: 0.35;
		transition: opacity 0.5s ease;
		animation: fade-in 2s ease-out 1s both;
	}

	.qr-landing:hover {
		opacity: 0.7;
	}

	.qr-image {
		width: clamp(80px, 12vmin, 120px);
		height: clamp(80px, 12vmin, 120px);
		filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4));
	}

	.qr-label {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: clamp(0.65rem, 1.3vmin, 0.85rem);
		font-weight: 500;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--text-secondary);
	}

	@keyframes fade-in {
		from { opacity: 0; transform: translateY(10px); }
		to { opacity: 0.35; transform: translateY(0); }
	}

	.ambient-brand {
		position: fixed;
		bottom: clamp(2rem, 5vmin, 4rem);
		left: clamp(2rem, 5vmin, 4rem);
		display: flex;
		align-items: center;
		gap: 0.6rem;
		opacity: 0.2;
		transition: opacity 0.5s ease;
		animation: fade-in-brand 2s ease-out 1.2s both;
	}

	@keyframes fade-in-brand {
		from { opacity: 0; transform: translateY(10px); }
		to { opacity: 0.2; transform: translateY(0); }
	}

	.ambient-brand:hover {
		opacity: 0.5;
	}

	.brand-icon {
		width: clamp(18px, 2.5vmin, 24px);
		height: clamp(18px, 2.5vmin, 24px);
		stroke: var(--accent-primary);
		stroke-width: 1.5;
		fill: none;
		transition: stroke 2s ease;
	}

	.brand-name {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: clamp(0.85rem, 1.8vmin, 1.1rem);
		font-weight: 600;
		color: var(--text-primary);
		letter-spacing: 0.1em;
		transition: color 2s ease;
	}

	/* Corner QR when content playing */
	.qr-corner {
		position: fixed;
		bottom: clamp(2rem, 5vmin, 3rem);
		right: clamp(2rem, 5vmin, 3rem);
		z-index: 50;
		opacity: 0.4;
		transition: opacity 0.8s ease;
	}

	.qr-corner.faded {
		opacity: 0.12;
	}

	.qr-code-small {
		width: clamp(48px, 6vmin, 64px);
		height: clamp(48px, 6vmin, 64px);
		display: block;
		filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
	}

	/* Status indicator */
	.status-dot {
		position: fixed;
		top: clamp(1rem, 2vmin, 1.5rem);
		right: clamp(1rem, 2vmin, 1.5rem);
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #ef4444;
		z-index: 100;
		opacity: 0.8;
		box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
		transition: all 0.4s ease;
	}

	.status-dot.connected {
		background: #fbbf24;
		opacity: 0.5;
		box-shadow: none;
	}

	.status-dot.connected.has-uploaders {
		background: #4ade80;
		opacity: 0.8;
		box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
	}
</style>
