    <style>
        :root {
            --glitch-red: #ff0000;
            --glitch-blue: #00ffff;
        }

        body, html {
            margin: 0; padding: 0;
            width: 100%; height: 100%;
            background-color: #0e0e0e;
            color: #ff8400; /* Retro amber CRT color */
            font-family: 'Courier New', monospace;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* The Main Office Background */
        #maze-container {
        position: relative;
        /* This makes it fill 90% of the screen but never larger than the original image quality */
        width: 90vw; 
        height: 80vh;
        max-width: 1000px; 
        max-height: 750px;

        /* background: url('/assets/img/404/level1.jpg') no-repeat center center; */
        /* USE THE PATH BELOW - remember we verified your assets folder structure earlier */
        background: url('/assets/img/404/level1.jpg?v=2') no-repeat center center;  
    
        /* 'contain' keeps the whole image visible. 'cover' fills the box entirely. */
        background-size: contain; 
    
    filter: grayscale(0.2) contrast(1.2);
    
    /* Optional: adds to the retro feel */
    border: 4px solid #222;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

        /* The Glitchy 404 Text */
        .glitch-text {
            position: absolute;
            font-size: 8vw;
            font-weight: bold;
            z-index: 5;
            pointer-events: none;
            text-shadow: 2px 0 var(--glitch-red), -2px 0 var(--glitch-blue);
            animation: jitter 0.5s infinite;
        }

        @keyframes jitter {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }

        /* The Shadow Entity */
        .shadow {
            position: absolute;
            width: 200px;
            height: 400px;
            background: black;
            filter: blur(60px);
            opacity: 0;
            pointer-events: none;
            z-index: 2;
        }

        /* Invisible Hotspots */
        .hotspot {
            position: absolute;
            width: 120px;
            height: 120px;
            z-index: 10;
            cursor: pointer;
            /* border: 1px solid rgba(255,0,0,0.2); */ /* Toggle for testing */
        }

        /* CRT Overlay Scanlines */
        .crt-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%),
                        linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05));
            background-size: 100% 4px, 4px 100%;
            pointer-events: none;
            z-index: 100;
        }
    </style>
