/* Reset and Body */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #2c2c2c; /* Dark background outside the room */
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Prevent scrolling if possible */
            cursor: url('../assets/Home/cursor1.png'), auto; /* Default cursor */
        }
        
        .pixel-font {
            font-family: 'Press Start 2P', cursive;
            image-rendering: pixelated;
        }

        /* The Room Container 
           This maintains the aspect ratio of the room and scales with the browser window.
        */
        #room-container {
            position: relative;
            width:100vw;
            aspect-ratio: 16/9; /* Standard widescreen aspect ratio */
            background-color: #e0d5c1; /* Fallback wall color */
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            overflow: hidden;
        }

        /* Common styles for all assets */
        .asset {
            position: absolute;
            display: block;
            image-rendering: pixelated; /* Keeps pixel art crisp */
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy smooth transition */
            cursor: url('../assets/Home/cursor2.png'), auto;
            user-select: none;
            z-index: 10;
        }

        /* Hover Effect: Scale 1.05x and bring to front slightly */
        .asset:hover {
            transform: scale(1.05);
            z-index: 100; /* Pop on top of other items when hovering */
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
        }

        /* --- BACKGROUND LAYERS --- */
        
        /* The main room structure (walls, floor) */
        #room-bg {
            width: 100%;
            height: 100%;
            top: 0%;
            left: 0;
            z-index: 5; /* In front of sky, behind objects */
            pointer-events: none; /* Let clicks pass through if needed */
        }

        /* The Night Sky (Behind the window) */
        #night-sky {
            width: 29%;
            top: 26%;
            left: 40%;
            z-index: 1; /* Furthest back */
        }
        #night-sky:hover {
            transform: none;
            filter: none;
        }

        /* --- OBJECT POSITIONING (Percentages relative to container) --- */

        /* == CEILING & WALLS == */
        
        #fan {
            width: 12%;
            top: 9%; /* Hanging from top */
            left: 42%;
            
            z-index: 20;
            transform-origin: top center;
        }
        /* Override hover for fan to keep it centered while scaling */
        #fan:hover {
            transform: none;
            filter: none; 
        }

        #polaroids {
            width: 22%;
            top: 18%;
            left: 18%;
            z-index: 8;
        }

        #whiteboard {
            width: 16%;
            top: 30%;
            left: 24%;
            z-index: 9;
        }
        #whiteboard:hover {
            transform: none;
            filter: none; 
        }

        #bookshelf {
            width: 14%;
            top: 22%;
            left: 2%;
            z-index: 10;
        }

        #ukulele {
            width: 5%;
            top: 35%;
            left: 18%;
            z-index: 9;
        }

        /* == LEFT FLOOR AREA == */

        #desk {
            width: 20%;
            bottom: 3%; /* Position from bottom looks better for floor items */
            left: 4%;
            z-index: 14;
        }
        #desk:hover {
            transform: none;
            filter: none; 
        }

        #monitor {
            width: 9%; /* Adjust width to fit on desk */
            bottom: 31%; /* Position relative to the desk */
            left: 8%; /* Position relative to the desk */
            z-index: 15; /* Ensure it's above the desk */
        }

        /* Small items on/near desk */
        #noodles {
            width: 4%;
            bottom: 29%; /* Adjusted to sit on the desk */
            left: 13%; /* Adjusted to sit on the desk */
            z-index: 16;
        }

        #ps5 {
            width: 4.5%;
            bottom: 13%;
            left: 16%;
            z-index: 15; /* Behind desk leg */
        }

        #dumbell {
            width: 8%;
            bottom: 13%;
            right: 15%;
            z-index: 16;
        }

        /* == CENTER FLOOR AREA == */

        #bean-bag {
            width: 20%;
            bottom: 15%;
            left: 27%;
            z-index: 12;
        }

        /* Override the default asset hover effect for the bean bag to prevent scaling */
        #bean-bag:hover {
            transform: none;
            filter: none;
        }

        #cyborg {
            width: 14%; /* Adjust scale based on preference */
            bottom: 12%;
            left: 55%;
            transform: translateX(-50%);
            z-index: 18; /* In front of most things */
        }
        #cyborg:hover {
             transform: translateX(-50%) scale(1.1);
        }

        /* == RIGHT WALL & FLOOR AREA == */

        #painting {
            width: 14%;
            top: 28%;
            right: 19%;
            z-index: 8;
        }

        #posters {
            width: 22%;
            top: 15%;
            right: 1%;
            z-index: 8;
        }

        #plant {
            width: 8%;
            bottom: 20%;
            right: 18%;
            z-index: 14;
        }
        #plant:hover {
            transform: none;
            filter: none; 
        }

        #dog {
            width: 17%;
            bottom: 15%;
            right: 30%;
            z-index: 15;
        }
        #dog:hover {
            transform: none;
            filter: none;
        }

        #cabinet {
            width: 13%;
            bottom: 0%;
            right: 2%;
            z-index: 16;
        }
        #cabinet:hover {
            transform: none;
            filter: none; 
        }

        #phone {
            width: 3%;
            bottom: 26%; /* Sitting on top of cabinet */
            right: 10%;
            z-index: 17;
        }

        #speaker {
            width: 3%;
            bottom: 24%; /* Sitting on top of cabinet */
            right: 5%;
            z-index: 17;
        }

        /* --- LOADING OVERLAY (Optional but nice) --- */
        #loader {
            position: fixed; /* Use fixed to ensure it covers the whole viewport even if body doesn't */
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%;
            background: #1a1a1a;
            color: white;
            display: flex; /* Use flexbox for centering loader content */
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Ensure it's on top of everything */
            transition: opacity 0.5s ease-out; /* Smooth fade-out */
            flex-direction: column; /* Stack content vertically */
            gap: 20px; /* Space between text and progress bar */
        }

        .loader-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px; /* Space between loading text and progress bar */
        }

        .loading-text {
            font-family: 'Press Start 2P', cursive; /* Apply pixelated font */
            font-size: 1.5em; /* Adjust size as needed */
            text-align: center;
            white-space: nowrap; /* Prevent text from wrapping */
        }
        @media (max-width: 768px) {
            .loading-text {
                font-size: 0.8em; /* Smaller font for mobile */
                white-space: normal; /* Allow text to wrap */
            }
        }

        .progress-bar-container {
            width: 80vw; /* Use viewport width for responsiveness */
            max-width: 300px; /* Maximum width on larger screens */
            height: 24px; /* Height of the progress bar */
            border: 2px solid white; /* Pixelated border */
            background-color: #555;
            box-sizing: border-box; /* Include border in width/height */
            image-rendering: pixelated; /* Keep border crisp */
            box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* Add depth */
        }

        .progress-bar-fill {
            height: 100%;
            width: 0%; /* Starts at 0% */
            background-color: #00ff00; /* Base green fill color */
            background-image: repeating-linear-gradient(
                -45deg, /* Slanted lines */
                black 0, black 4px, /* Black line 4px wide */
                transparent 4px, transparent 8px /* Transparent gap 4px wide */
            );
            background-size: 16px 16px; /* Adjust size for slanted lines */
            animation: move-lines 0.5s linear infinite; /* Animation for rightward movement */
            transition: width 0.1s linear; /* Smooth transition for progress */
            image-rendering: pixelated;
        }

        /* Ellipsis animation - Removed @keyframes here as JS directly updates content */
        #ellipsis {
            display: inline-block; /* Ensure it respects width/height for animation */
            width: 1.5em; /* Allocate space for three dots */
            text-align: left; /* Align dots to the left of the allocated space */
        }

        /* Dialogue Box */

        #dialogue-box {
            position: absolute;
            /* Positioning relative to the cyborg - will be adjusted by JS */
            top: 60%; 
            left: 43%;
            transform: translateX(-50%) translateY(-100%); /* Adjust to place above cyborg's mouth */
            width: 30%; /* Adjust width for the speech bubble image */
            height: 20%; /* Adjust height for the speech bubble image */
            background-image: url('../assets/Home/dialogue box.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex; /* Use flexbox for centering text */
            justify-content: center;
            align-items: center;
            padding-bottom: 4%; /* Adjust padding to fit text within the bubble shape */
            padding-left: 7%;
            padding-right: 7%;
            box-sizing: border-box; /* Include padding in width/height */
            color: black; /* Text color inside the dialogue box */
            font-size: 1em; /* Adjust font size to fit */
            text-align: center;
            z-index: 200; /* Above all other elements */
            visibility: hidden; /* Hidden by default, use visibility for smoother transitions */
            image-rendering: pixelated;
            font-family: 'Press Start 2P', 'Courier New', Courier, monospace; /* Use imported pixel font, fallback to monospace */
            line-height: 1.2;
        }

        #dialogue-box p {
            margin-top: 15%; /* Push text down to fit in the bubble */
            margin-bottom: 0;
            white-space: pre-wrap; /* Allows newlines from JS to render */
            max-width: 80%; /* Constrain text width */
            text-shadow: none; /* Remove text shadow */
            font-size: 0.7vw; /* Made font smaller and responsive using vw */
        }
        /* --- Hologram Styles --- */
        #phone-container {
            /* These values are taken from the original #phone styles */
            width: 4%;
            bottom: 24%;
            right: 9%;
            z-index: 18;
        }

        #phone-container #phone {
            width: 100%;
            position: static; /* The wrapper is now the positioned element */
            display: block; /* Ensure it behaves like a block element */
        }

        #hologram {
            position: absolute;
            bottom: 100%; /* Position above the phone */
            left: 50%;
            transform: translateX(-50%);
            width: 200%; /* Make it larger relative to the phone */
            aspect-ratio: 1.05 / 1; /* Match the aspect ratio of the hologram image */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0s linear 0.4s;
            pointer-events: none; /* Can't interact with it when hidden */
            z-index: 200; /* Ensure it appears above other elements */
            image-rendering: pixelated;
        }

        #phone-container:hover #hologram {
            opacity: 1;
            visibility: visible;
            transition-delay: 0s;
            pointer-events: auto; /* Allow interaction when visible */
        }

        #hologram .hologram-image {
            width: 100%;
            position: absolute;
            top: -10%;
            left: 0;
            pointer-events: none;
        }

        #hologram .hologram-link {
            position: absolute;
        }

        /* YouTube Player Container - Debug: visible */
        #youtube-player-container {
            position: absolute;
            left: -9999px; /* Off-screen */
            width: 1px;
            height: 1px;
            overflow: hidden;
            opacity: 0; /* Make visible */
            pointer-events: none; /* Make interactive */
            
        }

        /* Speaker glow effect for autoplay fallback */
        .speaker-active-feedback {
            transform: scale(1.05);
            filter: drop-shadow(0 0 8px rgba(0, 153, 255, 0.1)); /* Green glow */
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        @keyframes move-lines {
            from { background-position-x: 0; }
            to { background-position-x: 16px; } /* Must match background-size horizontal value */
        }