fixes lol

frontend/src/lib/components/ScreensaverOverlay.svelte

@@ -0,0 +1,120 @@
+<script>
+    import { onMount } from 'svelte';
+    import { browser } from '$app/environment';
+    import { screensaver, isScreensaverActive } from '$lib/stores/screensaver';
+
+    let snowflakes = [];
+    const SNOWFLAKE_COUNT = 100;
+
+    // Generate initial snowflakes
+    function initSnowflakes() {
+        snowflakes = Array.from({ length: SNOWFLAKE_COUNT }, (_, i) => ({
+            id: i,
+            x: Math.random() * 100,           // % position
+            size: Math.random() * 4 + 2,      // 2-6px
+            speed: Math.random() * 1 + 0.5,   // Fall speed multiplier
+            drift: Math.random() * 2 - 1,     // Horizontal drift
+            opacity: Math.random() * 0.5 + 0.5,
+            delay: Math.random() * 10         // Animation delay
+        }));
+    }
+
+    // Dismiss on any interaction
+    function handleDismiss() {
+        screensaver.dismiss();
+    }
+
+    onMount(() => {
+        if (browser) {
+            initSnowflakes();
+        }
+    });
+</script>
+
+{#if $isScreensaverActive}
+    <div
+        class="screensaver-overlay"
+        on:click={handleDismiss}
+        on:keydown={handleDismiss}
+        on:mousemove={handleDismiss}
+        role="button"
+        tabindex="0"
+        aria-label="Click or press any key to dismiss screensaver"
+    >
+        <div class="snowfall">
+            {#each snowflakes as flake (flake.id)}
+                <div
+                    class="snowflake"
+                    style="
+                        --x: {flake.x}%;
+                        --size: {flake.size}px;
+                        --speed: {flake.speed};
+                        --drift: {flake.drift};
+                        --opacity: {flake.opacity};
+                        --delay: {flake.delay}s;
+                    "
+                />
+            {/each}
+        </div>
+
+        <div class="screensaver-hint">
+            Click or press any key to dismiss
+        </div>
+    </div>
+{/if}
+
+<style>
+    .screensaver-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.85);
+        z-index: 9997;  /* Below other overlays (9998) but above content */
+        cursor: pointer;
+        overflow: hidden;
+    }
+
+    .snowfall {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+    }
+
+    .snowflake {
+        position: absolute;
+        left: var(--x);
+        top: -10px;
+        width: var(--size);
+        height: var(--size);
+        background: white;
+        border-radius: 50%;
+        opacity: var(--opacity);
+        animation: fall linear infinite;
+        animation-duration: calc(10s / var(--speed));
+        animation-delay: var(--delay);
+    }
+
+    @keyframes fall {
+        0% {
+            transform: translateY(-10px) translateX(0);
+        }
+        100% {
+            transform: translateY(100vh) translateX(calc(var(--drift) * 100px));
+        }
+    }
+
+    .screensaver-hint {
+        position: absolute;
+        bottom: 2rem;
+        left: 50%;
+        transform: translateX(-50%);
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 0.875rem;
+        pointer-events: none;
+        animation: fadeInOut 3s ease-in-out infinite;
+    }
+
+    @keyframes fadeInOut {
+        0%, 100% { opacity: 0.3; }
+        50% { opacity: 0.7; }
+    }
+</style>