body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            font-family: Arial, sans-serif;
            background-color: #ffffff;
        }
        
        /* Prevent CSS image loading during preload to avoid 200% loading issue */
        body.preloading .cat-sprite,
        body.preloading .cali-sprite, 
        body.preloading .ivybig-sprite,
        body.preloading .ivywave-sprite,
        body.preloading .sign-sprite,
        body.preloading .sign-flicker,
        body.preloading .cat-sprite-1, body.preloading .cat-sprite-2, body.preloading .cat-sprite-3,
        body.preloading .cat-sprite-4, body.preloading .cat-sprite-5, body.preloading .cat-sprite-6,
        body.preloading .cat-sprite-7, body.preloading .cat-sprite-8, body.preloading .cat-sprite-9,
        body.preloading .cat-sprite-10, body.preloading .cat-sprite-11, body.preloading .cat-sprite-12,
        body.preloading .cat-sprite-13,
        body.preloading .cali-sprite-1, body.preloading .cali-sprite-2, body.preloading .cali-sprite-3,
        body.preloading .cali-sprite-4, body.preloading .cali-sprite-5, body.preloading .cali-sprite-6,
        body.preloading .cali-sprite-7, body.preloading .cali-sprite-8, body.preloading .cali-sprite-9,
        body.preloading .cali-sprite-10, body.preloading .cali-sprite-11, body.preloading .cali-sprite-12,
        body.preloading .cali-sprite-13,
        body.preloading .ivybig-sprite-1, body.preloading .ivybig-sprite-2, body.preloading .ivybig-sprite-3,
        body.preloading .ivybig-sprite-4, body.preloading .ivybig-sprite-5, body.preloading .ivybig-sprite-6,
        body.preloading .ivybig-sprite-7, body.preloading .ivybig-sprite-8, body.preloading .ivybig-sprite-9,
        body.preloading .ivybig-sprite-10, body.preloading .ivybig-sprite-11, body.preloading .ivybig-sprite-12,
        body.preloading .ivybig-sprite-13, body.preloading .ivybig-sprite-14, body.preloading .ivybig-sprite-15,
        body.preloading .ivybig-sprite-16, body.preloading .ivybig-sprite-17, body.preloading .ivybig-sprite-18,
        body.preloading .ivybig-sprite-19, body.preloading .ivybig-sprite-20, body.preloading .ivybig-sprite-21,
        body.preloading .ivybig-sprite-22, body.preloading .ivybig-sprite-23, body.preloading .ivybig-sprite-24,
        body.preloading .ivybig-sprite-25, body.preloading .ivybig-sprite-26, body.preloading .ivybig-sprite-27,
        body.preloading .ivybig-sprite-28,
        body.preloading .ivywave-sprite-1, body.preloading .ivywave-sprite-2, body.preloading .ivywave-sprite-3,
        body.preloading .ivywave-sprite-4, body.preloading .ivywave-sprite-5, body.preloading .ivywave-sprite-6,
        body.preloading .ivywave-sprite-7, body.preloading .ivywave-sprite-8, body.preloading .ivywave-sprite-9,
        body.preloading .ivywave-sprite-10, body.preloading .ivywave-sprite-11, body.preloading .ivywave-sprite-12,
        body.preloading .ivywave-sprite-13, body.preloading .ivywave-sprite-14, body.preloading .ivywave-sprite-15,
        body.preloading .ivywave-sprite-16, body.preloading .ivywave-sprite-17, body.preloading .ivywave-sprite-18,
        body.preloading .ivywave-sprite-19, body.preloading .ivywave-sprite-20, body.preloading .ivywave-sprite-21,
        body.preloading .sign-sprite-1, body.preloading .sign-sprite-2, body.preloading .sign-sprite-3,
        body.preloading .sign-sprite-4, body.preloading .sign-sprite-5, body.preloading .sign-sprite-6,
        body.preloading .sign-sprite-7, body.preloading .sign-sprite-8, body.preloading .sign-sprite-9,
        body.preloading .sign-sprite-10, body.preloading .sign-sprite-11, body.preloading .sign-sprite-12,
        body.preloading .sign-sprite-13, body.preloading .sign-sprite-14, body.preloading .sign-sprite-15,
        body.preloading .sign-sprite-16, body.preloading .sign-sprite-17, body.preloading .sign-sprite-18,
        body.preloading .sign-sprite-19, body.preloading .sign-sprite-20,
        body.preloading .sign-flicker-1, body.preloading .sign-flicker-2, body.preloading .sign-flicker-3,
        body.preloading .sign-flicker-4, body.preloading .sign-flicker-5 {
            background-image: none !important;
        }
        
        /* Freeze character animations during preload - keep them visible but stop walking */
        body.preloading .cat-character,
        body.preloading .cali-character,
        body.preloading .ivybig-character {
            animation-play-state: paused !important;
            transform: none !important;
        }
        
        /* Pause all CSS animations during preload */
        body.preloading * {
            animation-play-state: paused !important;
            transition: none !important;
        }

        #game-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-color: #ffffff;
            background: url('images/sky.gif') repeat-x center center;
            background-size: cover;
        }

        #world-container {
            position: absolute;
            width: 12000px; /* Increased from 10000px to 12000px to extend the right boundary */
            height: 100%;
            left: 0;
            top: 0;
            background-color: #ffffff;
        }

        #building-container {
            position: absolute;
            width: 7000px; /* Increased from 5000px to 7000px to match extended world space */
            height: 100%;
            left: 2500px; /* Position in the middle of the world container */
            top: 0;
            bottom: 0; /* Anchor to bottom */
            overflow: visible; /* Allow content to overflow for proper visibility */
        }

        /* Sky background using CSS gradient */
        .sky-background {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #87CEEB, #B0E2FF, #E0FFFF);
            z-index: 0;
            overflow: hidden; /* Ensure clouds don't overflow */
        }

        #building-exterior {
            position: absolute;
            height: 100%;
            width: 100%;
            background-image: url('images/skyscraperFINAL3.png');
            background-position: 2000px bottom; /* Changed to bottom instead of fixed negative value */
            background-repeat: no-repeat;
            background-size: auto 400%;
            z-index: 1;
            bottom: 0; /* Anchor the building to the bottom */
            top: auto; /* Override any top positioning */
            transform: translateZ(0); /* Force GPU acceleration */
            will-change: transform; /* Hint to browser about future animations */
        }

        /* Add the outside floor */
        .outside-floor {
            position: absolute;
            bottom: 0;
            left: -2500px; /* Align with the world container */
            width: 12000px; /* Increased from 10000px to match new world container width */
            height: 80px;
            background-color: #c2c2c2; /* Concrete gray color */
            z-index: 90;
            /* Concrete texture with grid pattern */
            background-image: 
                linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px),
                linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
                linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0)), 
                linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%),
                linear-gradient(-45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%);
            background-size: 80px 80px, 20px 20px, 100% 100%, 40px 40px, 40px 40px;
            /* Sidewalk edge */
            border-top: 4px solid #999999;
            box-shadow: 0px -2px 10px rgba(0,0,0,0.2);
        }

        #building-interior {
            position: absolute;
            height: 100%;
            width: 100%;
            display: none; /* Hidden initially */
            background-color: #000000; /* Changed from #f5f5f5 to black */
            overflow: hidden; /* Ensure the reception area image stays contained */
            z-index: 10; /* Ensure it's above the exterior when shown */
        }

        #reception-area {
            position: absolute;
            bottom: 0;
            left: 500px; /* Reduced from 1000px to move reception area more to the left */
            width: 100%;
            height: 100vh; /* Full viewport height */
            display: none;
            border-top: 3px solid #333;
            background-color: #f5f5f5; /* Fallback background in case images don't load */
            z-index: 11; /* Ensure it's above the building interior */
        }

        /* Wall section with reception image */
        .reception-wall {
            position: absolute;
            top: 0;
            width: 80%;
            height: 75vh;
            background-image: url('images/lobbywall.png') !important;
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            border-bottom: 3px solid #333;
        }

        /* Floor section */
        .reception-floor {
            position: absolute;
            bottom: 0;
            width: 80%;
            height: 25vh;
            background-image: url('images/defloor.png');
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        /* Combined reception background */
        .reception-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 70%;
            height: 100%;
            background-image: url('images/defloor.png');
            background-size: 100% 100%;
            background-position: center center;
            background-repeat: no-repeat;
            z-index: 100;
        }
        
        /* Secondary background (Chicago skyline) that will be visible through transparent parts of defloor.png */
        .secondary-background {
            position: absolute;
            top: -275px;
            left: -500px;
            width: 75%;
            height: 100%;
            background-image: url('images/chicagoclear.png?v=2');
            /* Use a larger background size to zoom in on the bottom portion */
            background-size: 100% 100%; /* 400% height makes the image 4x taller, showing only 1/4 */
            /* Position at the bottom - shows the bottom 25% of the image */
            background-position: center bottom;
            background-repeat: no-repeat;
            z-index: 99; /* One less than reception-background to ensure it's behind */
        }
        
        /* Edge masking rectangles to cover image overlaps */
        .edge-mask-left {
            position: absolute;
            top: 0;
            left: 0;
            width: 1000px; /* Wide enough to cover any overlap */
            height: 100vh; /* Full viewport height */
            background-color: #000000;
            z-index: 5000; /* Very high z-index to be frontmost */
        }
        
        .edge-mask-right {
            position: absolute;
            top: 0;
            right: 0;
            width: 1000px; /* Wide enough to cover any overlap */
            height: 100vh; /* Full viewport height */
            background-color: #000000;
            z-index: 5000; /* Very high z-index to be frontmost */
        }

        #elevator {
            position: absolute;
            right: 300px;
            bottom: 0;
            width: 100px;
            height: 180px;
            background-color: #d0d0d0;
            border: 2px solid #888;
            display: none;
        }

        #character-container {
            position: fixed; /* Fixed position relative to the viewport */
            width: 90px;
            height: 180px;
            bottom: 50px;
            left: 50%; /* Center horizontally */
            transform: translateX(-50%); /* Adjust for character width */
            z-index: 1000;
        }

        #character {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: contain;
        }

        .stick-figure {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .stick-figure-still {
            background-color: transparent;
        }

        .stick-figure-walk1, .stick-figure-walk2 {
            background-color: transparent;
            display: none;
        }

        .facing-right {
            transform: scaleX(1);
        }

        .facing-left {
            transform: scaleX(-1);
        }

        #instructions {
            position: fixed;
            top: 20px;
            left: 20px;
            background-color: #000080; /* Dark blue background like old RPGs */
            color: #ffffff;
            padding: 15px;
            border: 4px solid #ffffff; /* White border */
            box-shadow: 0 0 0 2px #000080, 0 0 0 6px #4040ff; /* Double border effect */
            width: 80%;
            max-width: 600px;
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 14px;
            line-height: 1.5;
            image-rendering: pixelated;
            z-index: 2000;
            overflow: hidden; /* For text animation */
            white-space: pre-wrap; /* Preserve line breaks */
        }
        
        /* Client Portal Button */
        #client-portal-button {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 2000;
        }
        
        #client-portal-button a {
            display: inline-block;
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            padding: 12px 20px;
            text-decoration: none;
            border-radius: 8px;
            font-family: 'Press Start 2P', monospace, Arial, sans-serif;
            font-size: 10px;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            border: 2px solid #2e7d32;
        }
        
        #client-portal-button a:hover {
            background: linear-gradient(135deg, #45a049, #4CAF50);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
        }
        
        #client-portal-button a:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .front-door {
            position: absolute;
            bottom: 80px; /* Moved down 30px from 110px to better align with ground */
            left: 2395px; /* Moved left 5px from 2400px (was 2000px + adjustment) */
            width: 600px; /* 4x the original 80px width */
            height: 250px; /* 2x the original 150px height */
            background-color: rgba(0, 0, 0, 0.1); /* Transparent background for the door frame */
            border: 3px solid #444; /* Door frame border */
            z-index: 100; /* Ensure it's above other elements */
            overflow: hidden; /* Hide door panels when they slide */
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translateZ(0); /* Force GPU acceleration */
            will-change: transform; /* Hint to browser about future animations */
        }

        /* Sliding door panels */
        .door-panel {
            position: absolute;
            width: 50%;
            height: 100%;
            background-color: rgba(135, 206, 235, 0.6); /* Light blue transparent glass */
            border: 2px solid #888;
            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
            z-index: 101;
            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
            background-image: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0.1) 25%,
                rgba(255, 255, 255, 0) 50%,
                rgba(255, 255, 255, 0.1) 75%,
                rgba(255, 255, 255, 0.2) 100%
            );
        }
        
        .door-panel-left {
            left: 0;
            transform-origin: left center;
        }
        
        .door-panel-right {
            right: 0;
            transform-origin: right center;
        }
        
        /* Add horizontal dividers to glass panels */
        .door-panel::before {
            content: '';
            position: absolute;
            top: 33%;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .door-panel::after {
            content: '';
            position: absolute;
            top: 66%;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        /* Door opening/closing sound effect */
        @keyframes doorSound {
            0%, 100% { opacity: 0; }
        }
        
        /* Door sliding animation */
        .door-panel {
            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        
        /* Add a subtle bounce effect at the end of the animation */
        .door-open .door-panel-left {
            transform: translateX(-100%);
            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.2);
        }
        
        .door-open .door-panel-right {
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.2);
        }

        /* Door frame and details */
        .door-frame {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 5px solid #555;
            box-sizing: border-box;
            pointer-events: none;
            z-index: 102;
        }

        .door-label {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            background-color: #333;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 4px;
            z-index: 103;
        }

        /* Door proximity indicator */
        .door-proximity {
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 5px 10px;
            font-size: 12px;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 103;
        }

        .door-active .door-proximity {
            opacity: 1;
        }

        .reception-desk {
            position: absolute;
            bottom: 15vh; /* Adjust relative to new floor height */
            left: 45%;
            width: 200px;
            height: 80px;
            background-color: transparent;
            border: none;
            display: none;
            z-index: 110;
            cursor: pointer;
        }

        .door-marker {
            position: absolute;
            bottom: 80px; /* Updated to match the front-door's bottom position */
            left: 2395px; /* Updated to match the front-door's left position */
            width: 600px; /* Match the front-door width exactly */
            height: 250px; /* Match the front-door height exactly */
            background-color: transparent; /* Make it invisible */
            border: none; /* Remove the border */
            z-index: 90; /* Below the front door but still functional for activation */
            text-align: center;
            font-weight: bold;
            color: transparent; /* Make text invisible */
            font-size: 16px;
            overflow: hidden; /* For sliding door panels */
            transform: translateZ(0); /* Force GPU acceleration */
            will-change: transform; /* Hint to browser about future animations */
        }

        /* Interior door specific styles */
        .interior-door {
            background-color: rgba(0, 0, 0, 0.1);
            border: 3px solid #444;
            z-index: 110;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 0px; /* Increased from 60px to 110px to move the door up by 50 pixels */
            left: 1500px; 
            width: 640px; /* 4x the original 80px width */
            height: 300px; /* 2x the original 150px height */
        }
        
        .interior-door .door-panel {
            background-color: rgba(135, 206, 235, 0.6); /* Light blue transparent glass */
        }
        
        .interior-door .door-label {
            color: white;
            background-color: #333;
        }

        #debug {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 5px;
            font-size: 12px;
            z-index: 5000;
        }

        .screen-edge-marker {
            position: fixed;
            top: 0;
            width: 5px;
            height: 100%;
            background-color: magenta;
            z-index: 5000;
        }

        #left-edge-marker {
            left: 0;
        }

        #right-edge-marker {
            right: 0;
        }

        .receptionist-area {
            position: absolute;
            bottom: 18vh; /* Adjust relative to new floor height */
            /* Position will be set in JavaScript to center at world position 3550 */
            width: 600px;
            height: 150px;
            background-color: transparent; /* Make background transparent */
            border: 0; /* Remove border completely */
            opacity: 0; /* Make it fully transparent */
            display: none;
            z-index: 105;
            text-align: center;
        }

        /* Add style for active state to ensure it stays invisible */
        .receptionist-area.active {
            background-color: transparent !important;
            border: 0 !important;
            opacity: 0 !important;
        }

        .receptionist-label {
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 0, 0.7);
            padding: 5px 10px;
            border: 2px dashed #000;
            border-radius: 5px;
            font-weight: bold;
            display: none; /* Hide the receptionist label */
        }

        /* New dialogue box styles */
        #dialogue-container {
            position: fixed;
            bottom: 150px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-width: 800px;
            z-index: 3000;
            display: none;
            overflow: visible; 
            padding-top: 300px; /* Space for wave animation */
            /* Ensure dialogue container has adequate height */
            min-height: 200px;
        }

        .wave-animation-container {
            position: absolute; /* Position relative to dialogue-container */
            width: 100%;
            height: 340px; /* Increased height to allow sprite to be moved up */
            top: -50px;    /* Move the container up by 50px */
            left: -200px;  /* Move the container left by 200px */
            right: auto;   /* Reset right position */
            width: calc(100% + 400px); /* Increase width to allow left/right movement */
            z-index: 1;    /* Lower z-index (behind text) */
            overflow: hidden; /* Clip the sprite */
            /* border: 1px solid red; /* Debugging border */
        }

        .ivywave-sprite {
            position: absolute;
            width: 600px !important;  /* 3x size */
            height: 600px !important; /* 3x size */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center bottom; 
            left: 50%;     /* Center in the wider container */
            transform: translateX(-50%); /* Keep centering transform */
            display: none;
            bottom: 0;     /* Reset bottom position */
            /* No z-index needed here, positioned within its container */
        }

        .ivywave-sprite-1 {
            background-image: url('images/ivywave1.png');
            /* Removed display: block !important */
        }

        #npc-dialogue {
            background-color: #000080; 
            color: #ffffff;
            padding: 15px;
            border: 4px solid #ffffff; 
            box-shadow: 0 0 0 2px #000080, 0 0 0 6px #4040ff; 
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 10px;
            white-space: pre-wrap; 
            position: relative; /* Needed for z-index */
            z-index: 2; /* Higher z-index (above wave container) */
            min-height: 100px; /* Ensure minimum height for content */
            max-height: 300px; /* Maximum height */
            overflow-y: auto; /* Enable vertical scrolling if content exceeds max height */
            width: 100%; /* Ensure full width */
            word-wrap: break-word; /* Ensure long words wrap */
            max-width: 800px;
            display: inline-block; /* Make it size to content */
            box-sizing: border-box; /* Include padding in width calculation */
        }

        /* Add a special class for cat dialogues */
        #npc-dialogue.cat-dialogue {
            width: auto;
            min-width: 300px;
            max-width: 600px;
            margin: 0 auto;
            text-align: left;
        }

        #player-responses {
            background-color: #ffffff; 
            color: #000000; 
            padding: 15px;
            border: 4px solid #000000; 
            box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px #000000; 
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 14px;
            line-height: 1.5;
            position: relative; /* Needed for z-index */
            z-index: 2; /* Higher z-index (above wave container) */
        }

        .response-option {
            padding: 8px;
            margin: 5px 0;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .response-option:hover {
            background-color: #f0f0f0;
        }

        /* Add styles for the return button */
        .return-option {
            padding: 8px;
            margin-top: 15px;
            border-top: 2px solid #000;
            cursor: pointer;
            transition: background-color 0.2s;
            text-align: center;
            font-weight: bold;
        }

        .return-option:hover {
            background-color: #f0f0f0;
        }

        /* Add elevator styles */
        .elevator-container {
            position: absolute;
            right: 1650px; /* Moved 2000px to the left (from 400px to 2400px) */
            bottom: 0;
            width: 200px;
            height: 300px;
            background-color: #808080;
            border: 4px solid #404040;
            z-index: 100;
        }

        /* Elevator styling */
        .elevator-front {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #333333; /* Darker elevator color */
            border: 3px solid #555555;
            overflow: hidden; /* Hide door panels when they slide */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* Elevator door panels */
        .elevator-door-panel {
            position: absolute;
            width: 50%;
            height: 90%;
            background-color: #777777; /* Elevator door color */
            border: 1px solid #999999;
            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
            z-index: 101;
        }
        
        .elevator-door-panel-left {
            left: 0;
            transform-origin: left center;
        }
        
        .elevator-door-panel-right {
            right: 0;
            transform-origin: right center;
        }
        
        /* Elevator door open state */
        .elevator-open .elevator-door-panel-left {
            transform: translateX(-100%);
            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.2);
        }
        
        .elevator-open .elevator-door-panel-right {
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.2);
        }
        
        /* Elevator frame and details */
        .elevator-door-frame {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 5px solid #555;
            box-sizing: border-box;
            pointer-events: none;
            z-index: 102;
        }

        .elevator-trigger {
            position: absolute;
            bottom: 0;
            left: -20px;
            width: 240px;
            height: 320px;
            z-index: 90;
            transition: background-color 0.3s ease;
            
        }

        .elevator-label {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            background-color: #333;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 4px;
            z-index: 103;
            font-family: 'Press Start 2P', monospace, Arial;
        }

        .elevator-label-active {
            animation: pulse 1.5s infinite;
        }

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

        .elevator-menu {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #000080;
            border: 4px solid #ffffff;
            box-shadow: 0 0 0 2px #000080, 0 0 0 6px #4040ff;
            padding: 20px;
            z-index: 3000;
            display: none;
            font-family: 'Press Start 2P', monospace, Arial;
            color: white;
            width: 500px; /* Increased width to accommodate descriptions */
            max-height: 80vh; /* Maximum height */
            overflow-y: auto; /* Add scrolling if needed */
        }

        .elevator-menu h2 {
            text-align: center;
            margin: 0 0 20px 0;
            font-size: 18px;
        }

        .floor-buttons {
            display: flex;
            flex-direction: column; /* Using column direction */
            gap: 10px;
            margin-bottom: 20px;
        }

        .floor-button-container {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 5px;
            border-left: 3px solid transparent;
            transition: border-color 0.2s;
        }

        .floor-button-container:hover {
            border-left-color: #ffffff;
        }

        .floor-button {
            background-color: #4040ff;
            color: white;
            border: 2px solid #ffffff;
            padding: 10px;
            cursor: pointer;
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 14px;
            transition: background-color 0.2s;
            width: 120px;
            text-align: center;
            white-space: nowrap; /* Prevent text wrapping */
        }

        .floor-button:hover {
            background-color: #6060ff;
        }

        .floor-button.current {
            background-color: #808080;
            cursor: not-allowed;
        }

        .floor-description {
            font-size: 12px;
            color: #ffffff;
            flex: 1;
        }

        .close-elevator {
            background-color: #e74c3c;
            color: white;
            border: 2px solid #ffffff;
            padding: 10px 20px;
            cursor: pointer;
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 14px;
            width: 100%;
        }

        .close-elevator:hover {
            background-color: #c0392b;
        }

        /* Character sprite styles */
        .character-sprite {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            display: none;
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: contain;
        }

        .sprite-still {
            display: block;
            background-image: url('images/onez.png');
        }

        .sprite-walk1 {
            background-image: url('images/onez.png');
        }

        .sprite-walk2 {
            background-image: url('images/twoz.png');
        }

        .sprite-walk3 {
            background-image: url('images/threez.png');
        }

        .sprite-walk4 {
            background-image: url('images/four.png');
        }

        .sprite-walk5 {
            background-image: url('images/five.png');
        }

        .sprite-walk6 {
            background-image: url('images/six.png');
        }

        .sprite-walk7 {
            background-image: url('images/seven.png');
        }

        .facing-right {
            transform: scaleX(1);
        }

        .facing-left {
            transform: scaleX(-1);
        }

        /* Merivy character styles */
        .merivy-character {
            position: absolute;
            width: 360px; /* 3x size */
            height: 500px;
            background-image: url('images/merivy.png');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 3;
            display: none; /* Hide the merivy character */
        }
        
        /* Character Maker Styles */
        .character-maker {
            position: fixed;
            top: 0;
            right: -350px; /* Start off-screen */
            width: 350px;
            height: 100vh;
            background-color: #000080; /* Dark blue like instructions */
            color: white;
            border-left: 4px solid #ffffff;
            box-shadow: -2px 0 0 2px #000080, -6px 0 0 4px #4040ff; /* Double border effect */
            z-index: 4000;
            transition: right 0.3s ease-in-out;
            overflow-y: auto;
            font-family: 'Press Start 2P', monospace, Arial;
            padding: 0;
        }
        
        .character-maker.active {
            right: 0; /* Slide in when active */
        }
        
        .character-maker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: #4040ff;
            border-bottom: 2px solid #ffffff;
        }
        
        .character-maker-header h2 {
            margin: 0;
            font-size: 16px;
        }
        
        #close-character-maker {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            font-family: sans-serif;
        }
        
        .character-maker-content {
            padding: 15px;
        }
        
        .preview-section, .customization-section, .action-section {
            margin-bottom: 20px;
        }
        
        h3 {
            font-size: 14px;
            margin-top: 0;
            margin-bottom: 15px;
            border-bottom: 2px solid #4040ff;
            padding-bottom: 5px;
        }
        
        .character-preview {
            height: 180px;
            background-color: rgba(0, 0, 0, 0.3);
            border: 2px solid #4040ff;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .preview-character {
            position: relative;
            width: 80px;
            height: 150px;
        }
        
        .preview-head {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            background-color: #FFD700; /* Default gold color */
            border-radius: 50%; /* Default circle */
        }
        
        .preview-body {
            position: absolute;
            top: 45px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 60px;
            background-color: #3498DB; /* Default blue color */
            border-radius: 5px; /* Default rectangle */
        }
        
        .preview-legs {
            position: absolute;
            top: 110px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            background-color: #2ECC71; /* Default green color */
            border-radius: 5px; /* Default rectangle */
        }
        
        .option-group {
            margin-bottom: 10px;
        }
        
        label {
            display: block;
            font-size: 12px;
            margin-bottom: 5px;
        }
        
        select, input[type="text"], input[type="color"], input[type="range"] {
            width: 100%;
            padding: 8px;
            border: 2px solid #4040ff;
            background-color: #000040;
            color: white;
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 12px;
            box-sizing: border-box;
        }
        
        input[type="color"] {
            height: 30px;
            padding: 0;
        }
        
        input[type="range"] {
            background-color: transparent;
        }
        
        button {
            background-color: #4040ff;
            color: white;
            border: 2px solid #ffffff;
            padding: 10px 15px;
            cursor: pointer;
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 12px;
            margin-right: 5px;
            transition: background-color 0.2s;
        }
        
        button:hover {
            background-color: #6060ff;
        }
        
        #add-character {
            background-color: #27ae60;
        }
        
        #add-character:hover {
            background-color: #2ecc71;
        }
        
        /* Custom Character Styles */
        .custom-character {
            position: absolute;
            width: 90px;
            height: 180px;
            z-index: 110;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
        }
        
        .custom-character-name {
            position: absolute;
            top: -25px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-family: 'Press Start 2P', monospace, Arial;
            white-space: nowrap;
        }
        
        /* Shapes for custom characters */
        .head-circle {
            border-radius: 50%;
        }
        
        .head-square {
            border-radius: 0;
        }
        
        .head-triangle {
            border-radius: 0;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
        
        .body-rectangle {
            border-radius: 5px;
        }
        
        .body-square {
            border-radius: 0;
            height: 50px !important;
        }
        
        .body-trapezoid {
            border-radius: 0;
            clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
        }
        
        .legs-rectangle {
            border-radius: 5px;
        }
        
        .legs-triangle {
            border-radius: 0;
            clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
        }
        
        .legs-cylinder {
            border-radius: 10px 10px 0 0;
        }

        /* Cat character styles */
        .cat-character {
            position: absolute;
            width: 90px;
            height: 90px;
            z-index: 110;
            pointer-events: none;
        }

        .cat-sprite {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center bottom;
        }

        .cat-sprite-1 { background-image: url('images/cala1.png'); }
        .cat-sprite-2 { background-image: url('images/cala2.png'); }
        .cat-sprite-3 { background-image: url('images/cala3.png'); }
        .cat-sprite-4 { background-image: url('images/cala4.png'); }
        .cat-sprite-5 { background-image: url('images/cala5.png'); }
        .cat-sprite-6 { background-image: url('images/cala6.png'); }
        .cat-sprite-7 { background-image: url('images/cala7.png'); }
        .cat-sprite-8 { background-image: url('images/cala8.png'); }
        .cat-sprite-9 { background-image: url('images/cala9.png'); }
        .cat-sprite-10 { background-image: url('images/cala10.png'); }
        .cat-sprite-11 { background-image: url('images/cala11.png'); }
        .cat-sprite-12 { background-image: url('images/cala12.png'); }
        .cat-sprite-13 { background-image: url('images/cala13.png'); }

        .cat-facing-left {
            transform: scaleX(1);
        }

        .cat-facing-right {
            transform: scaleX(-1);
        }

        /* Cali (sister cat) character styles */
        .cali-character {
            position: absolute;
            width: 90px;
            height: 90px;
            z-index: 110;
            pointer-events: none;
        }

        .cali-sprite {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center bottom;
        }

        .cali-sprite-1 { background-image: url('images/cali1.png'); }
        .cali-sprite-2 { background-image: url('images/cali2.png'); }
        .cali-sprite-3 { background-image: url('images/cali3.png'); }
        .cali-sprite-4 { background-image: url('images/cali4.png'); }
        .cali-sprite-5 { background-image: url('images/cali5.png'); }
        .cali-sprite-6 { background-image: url('images/cali6.png'); }
        .cali-sprite-7 { background-image: url('images/cali7.png'); }
        .cali-sprite-8 { background-image: url('images/cali8.png'); }
        .cali-sprite-9 { background-image: url('images/cali9.png'); }
        .cali-sprite-10 { background-image: url('images/cali10.png'); }
        .cali-sprite-11 { background-image: url('images/cali11.png'); }
        .cali-sprite-12 { background-image: url('images/cali12.png'); }
        .cali-sprite-13 { background-image: url('images/cali13.png'); }

        .cali-facing-left {
            transform: scaleX(1);
        }

        .cali-facing-right {
            transform: scaleX(-1);
        }

        /* Ivybig character styles */
        .ivybig-character {
            position: absolute;
            width: 180px;  /* Larger size for Ivy */
            height: 360px; /* Larger size for Ivy */
            z-index: 110;
            pointer-events: none;
            bottom: 250px; /* Increased from 50px to 250px to move it up by 200 pixels */
            left: 850px;  /* Position relative to the desk, 450px to the right of desk's 400px */
        }

        .ivybig-sprite {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center bottom;
        }

        /* Ivy sprite frames */
        .ivybig-sprite-1 { background-image: url('images/ivywait1.png'); }
        .ivybig-sprite-2 { background-image: url('images/ivywait2.png'); }
        .ivybig-sprite-3 { background-image: url('images/ivywait3.png'); }
        .ivybig-sprite-4 { background-image: url('images/ivywait4.png'); }
        .ivybig-sprite-5 { background-image: url('images/ivywait5.png'); }
        .ivybig-sprite-6 { background-image: url('images/ivywait6.png'); }
        .ivybig-sprite-7 { background-image: url('images/ivywait7.png'); }
        .ivybig-sprite-8 { background-image: url('images/ivywait8.png'); }
        .ivybig-sprite-9 { background-image: url('images/ivywait9.png'); }
        .ivybig-sprite-10 { background-image: url('images/ivywait10.png'); }
        .ivybig-sprite-11 { background-image: url('images/ivywait11.png'); }
        .ivybig-sprite-12 { background-image: url('images/ivywait12.png'); }
        .ivybig-sprite-13 { background-image: url('images/ivywait13.png'); }
        .ivybig-sprite-14 { background-image: url('images/ivywait14.png'); }
        .ivybig-sprite-15 { background-image: url('images/ivywait15.png'); }
        .ivybig-sprite-16 { background-image: url('images/ivywait16.png'); }
        .ivybig-sprite-17 { background-image: url('images/ivywait17.png'); }
        .ivybig-sprite-18 { background-image: url('images/ivywait18.png'); }
        .ivybig-sprite-19 { background-image: url('images/ivywait19.png'); }
        .ivybig-sprite-20 { background-image: url('images/ivywait20.png'); }
        .ivybig-sprite-21 { background-image: url('images/ivywait21.png'); }
        .ivybig-sprite-22 { background-image: url('images/ivywait22.png'); }
        .ivybig-sprite-23 { background-image: url('images/ivywait23.png'); }
        .ivybig-sprite-24 { background-image: url('images/ivywait24.png'); }
        .ivybig-sprite-25 { background-image: url('images/ivywait25.png'); }
        .ivybig-sprite-26 { background-image: url('images/ivywait26.png'); }
        .ivybig-sprite-27 { background-image: url('images/ivywait27.png'); }
        .ivybig-sprite-28 { background-image: url('images/ivywait28.png'); }

        /* Eyes animation sequence */
        .ivybig-sprite-1b { background-image: url('images/ivyeyes1.png'); }
        .ivybig-sprite-2b { background-image: url('images/ivyeyes2.png'); }
        .ivybig-sprite-3b { background-image: url('images/ivyeyes3.png'); }
        .ivybig-sprite-4b { background-image: url('images/ivyeyes4.png'); }
        .ivybig-sprite-5b { background-image: url('images/ivyeyes5.png'); }
        .ivybig-sprite-6b { background-image: url('images/ivyeyes6.png'); }
        .ivybig-sprite-7b { background-image: url('images/ivyeyes7.png'); }
        .ivybig-sprite-8b { background-image: url('images/ivyeyes8.png'); }

        /* Side-looking animation sequence */
        .ivybig-sprite-1c { background-image: url('images/ivyside1.png'); }
        .ivybig-sprite-2c { background-image: url('images/ivyside2.png'); }
        .ivybig-sprite-3c { background-image: url('images/ivyside3.png'); }
        .ivybig-sprite-4c { background-image: url('images/ivyside4.png'); }
        .ivybig-sprite-5c { background-image: url('images/ivyside5.png'); }
        .ivybig-sprite-6c { background-image: url('images/ivyside6.png'); }
        .ivybig-sprite-7c { background-image: url('images/ivyside7.png'); }
        .ivybig-sprite-8c { background-image: url('images/ivyside8.png'); }
        .ivybig-sprite-9c { background-image: url('images/ivyside9.png'); }
        .ivybig-sprite-10c { background-image: url('images/ivyside10.png'); }
        .ivybig-sprite-11c { background-image: url('images/ivyside11.png'); }
        .ivybig-sprite-12c { background-image: url('images/ivyside12.png'); }
        .ivybig-sprite-13c { background-image: url('images/ivyside13.png'); }
        .ivybig-sprite-14c { background-image: url('images/ivyside14.png'); }
        .ivybig-sprite-15c { background-image: url('images/ivyside15.png'); }
        .ivybig-sprite-16c { background-image: url('images/ivyside16.png'); }

        /* Add wave animation sprites */
        .ivywave-sprite {
            position: absolute;
            width: 200px;  /* We can adjust these dimensions as needed */
            height: 200px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 1;  /* Behind the dialogue content */
            left: 50%;
            transform: translateX(-50%);
            top: 20px;  /* Adjust position as needed */
        }

        .ivywave-sprite-1 { background-image: url('images/ivywaver1.png'); }
        .ivywave-sprite-2 { background-image: url('images/ivywaver2.png'); }
        .ivywave-sprite-3 { background-image: url('images/ivywaver3.png'); }
        .ivywave-sprite-4 { background-image: url('images/ivywaver4.png'); }
        .ivywave-sprite-5 { background-image: url('images/ivywaver5.png'); }
        .ivywave-sprite-6 { background-image: url('images/ivywaver6.png'); }
        .ivywave-sprite-7 { background-image: url('images/ivywaver7.png'); }
        .ivywave-sprite-8 { background-image: url('images/ivywaver8.png'); }
        .ivywave-sprite-9 { background-image: url('images/ivywaver9.png'); }
        .ivywave-sprite-10 { background-image: url('images/ivywaver10.png'); }
        .ivywave-sprite-11 { background-image: url('images/ivywaver11.png'); }
        .ivywave-sprite-12 { background-image: url('images/ivywaver12.png'); }
        .ivywave-sprite-13 { background-image: url('images/ivywaver13.png'); }
        .ivywave-sprite-14 { background-image: url('images/ivywaver14.png'); }
        .ivywave-sprite-15 { background-image: url('images/ivywaver15.png'); }
        .ivywave-sprite-16 { background-image: url('images/ivywaver16.png'); }
        .ivywave-sprite-17 { background-image: url('images/ivywaver17.png'); }
        .ivywave-sprite-18 { background-image: url('images/ivywaver18.png'); }
        .ivywave-sprite-19 { background-image: url('images/ivywaver19.png'); }
        .ivywave-sprite-20 { background-image: url('images/ivywaver20.png'); }
        .ivywave-sprite-21 { background-image: url('images/ivywaver21.png'); }

        /* D sequence animation frames */
        .ivybig-sprite-1d { background-image: url('images/ivyd1.png'); }
        .ivybig-sprite-2d { background-image: url('images/ivyd2.png'); }
        .ivybig-sprite-3d { background-image: url('images/ivyd3.png'); }
        .ivybig-sprite-4d { background-image: url('images/ivyd4.png'); }
        .ivybig-sprite-5d { background-image: url('images/ivyd5.png'); }
        .ivybig-sprite-6d { background-image: url('images/ivyd6.png'); }
        .ivybig-sprite-7d { background-image: url('images/ivyd7.png'); }
        .ivybig-sprite-8d { background-image: url('images/ivyd8.png'); }
        .ivybig-sprite-9d { background-image: url('images/ivyd9.png'); }
        .ivybig-sprite-10d { background-image: url('images/ivyd10.png'); }
        .ivybig-sprite-11d { background-image: url('images/ivyd11.png'); }
        .ivybig-sprite-12d { background-image: url('images/ivyd12.png'); }
        .ivybig-sprite-13d { background-image: url('images/ivyd13.png'); }
        .ivybig-sprite-14d { background-image: url('images/ivyd14.png'); }
        .ivybig-sprite-15d { background-image: url('images/ivyd15.png'); }
        .ivybig-sprite-16d { background-image: url('images/ivyd16.png'); }
        .ivybig-sprite-17d { background-image: url('images/ivyd17.png'); }
        .ivybig-sprite-18d { background-image: url('images/ivyd18.png'); }
        .ivybig-sprite-19d { background-image: url('images/ivyd19.png'); }
        
        /* Desk in front of Ivy */
        .ivy-desk {
            position: absolute;
            width: 1200px;
            height: 1200px;
            background-image: url('images/desk.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center bottom;
            z-index: 111; /* One higher than ivybig's z-index of 110 */
            bottom: 225px; /* Position at the bottom of Ivy */
            left: 400px; /* Same left position as Ivy */
            pointer-events: none;
        }

        /* Animated sign styles */
        .status-sign {
            position: absolute;
            width: 600px;
            height: 400px;
            z-index: 105;
            bottom: 80px;
            left: 1500px;  /* Position near the building but before entrance */
            pointer-events: none;
            transform: translateZ(0); /* Force GPU acceleration */
            will-change: transform; /* Hint to browser about future animations */
        }

        .sign-sprite {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* Sign sprite frames for OFFLINE to AVAILABLE transition */
        .sign-sprite-1 { background-image: url('images/oa1.png'); }
        .sign-sprite-2 { background-image: url('images/oa2.png'); }
        .sign-sprite-3 { background-image: url('images/oa3.png'); }
        .sign-sprite-4 { background-image: url('images/oa4.png'); }
        .sign-sprite-5 { background-image: url('images/oa5.png'); }
        .sign-sprite-6 { background-image: url('images/oa6.png'); }
        .sign-sprite-7 { background-image: url('images/oa7.png'); }
        .sign-sprite-8 { background-image: url('images/oa8.png'); }
        .sign-sprite-9 { background-image: url('images/oa9.png'); }
        .sign-sprite-10 { background-image: url('images/oa10.png'); }
        .sign-sprite-11 { background-image: url('images/oa11.png'); }
        .sign-sprite-12 { background-image: url('images/oa12.png'); }
        .sign-sprite-13 { background-image: url('images/oa13.png'); }
        .sign-sprite-14 { background-image: url('images/oa14.png'); }
        .sign-sprite-15 { background-image: url('images/oa15.png'); }
        .sign-sprite-16 { background-image: url('images/oa16.png'); }
        .sign-sprite-17 { background-image: url('images/oa17.png'); }
        .sign-sprite-18 { background-image: url('images/oa18.png'); }
        .sign-sprite-19 { background-image: url('images/oa19.png'); }
        .sign-sprite-20 { background-image: url('images/oa20.png'); }

        /* Flicker animation sprites */
        .sign-flicker-1 { background-image: url('images/o1.png'); }
        .sign-flicker-2 { background-image: url('images/o2.png'); }
        .sign-flicker-3 { background-image: url('images/o3.png'); }
        .sign-flicker-4 { background-image: url('images/o4.png'); }
        .sign-flicker-5 { background-image: url('images/o5.png'); }

        /* Add z-index to control layering */
        .sign-sprite {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 2; /* Main animation on top */
        }

        .sign-flicker {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 1; /* Flicker animation underneath */
        }

        /* Tertiary background (animated sky) for reception area */
        .tertiary-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #87CEEB, #B0E2FF, #E0FFFF);
            z-index: 98; /* One less than secondary-background to ensure it's behind */
            overflow: hidden; /* Ensure clouds don't overflow */
        }

        /* Cloud SVGs */
        .cloud {
            position: absolute;
            width: 200px;
            height: 60px;
            background-color: white;
            border-radius: 50px;
            z-index: 1;
            opacity: 0.8;
            filter: blur(3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .cloud::before, .cloud::after {
            content: '';
            position: absolute;
            background-color: white;
            border-radius: 50%;
        }

        .cloud::before {
            width: 100px;
            height: 100px;
            top: -40px;
            left: 25px;
        }

        .cloud::after {
            width: 80px;
            height: 80px;
            top: -30px;
            right: 25px;
        }

        /* Animation for the clouds */
        @keyframes cloud-animation-1 {
            0% { transform: translateX(-300px); }
            100% { transform: translateX(calc(100vw + 300px)); }
        }

        @keyframes cloud-animation-2 {
            0% { transform: translateX(-200px); }
            100% { transform: translateX(calc(100vw + 200px)); }
        }

        @keyframes cloud-animation-3 {
            0% { transform: translateX(-400px); }
            100% { transform: translateX(calc(100vw + 400px)); }
        }

        /* Splash screen container */
        #splash-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000; /* Ensure it's on top of everything */
            background-color: #ffffff;
            transition: none !important; /* Ensure no transition delays */
            animation: none !important; /* Disable any animations */
            pointer-events: auto; /* Allow interaction when visible */
        }
        
        /* Ensure splash container and iframe disappear immediately when hidden */
        #splash-container[style*="display: none"],
        #splash-container[style*="display: none"] #splash-iframe {
            display: none !important;
            pointer-events: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            transform: translateX(-100vw) !important; /* Move off-screen immediately */
            transition: none !important;
            animation: none !important;
        }
        
        /* Force hide splash iframe when container is hidden */
        #splash-container[style*="visibility: hidden"] #splash-iframe,
        #splash-container[style*="opacity: 0"] #splash-iframe {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }
        
        /* Nuclear option: completely force-hide splash elements */
        .force-hidden,
        .force-hidden * {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transform: translateX(-100vw) translateY(-100vh) !important;
            position: absolute !important;
            top: -9999px !important;
            left: -9999px !important;
            z-index: -9999 !important;
            width: 0 !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
        }

        #splash-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Hide the main content initially */
        #game-container {
            display: none;
        }

        /* Add these CSS classes with higher specificity after the other .cat-sprite, .cali-sprite, and .ivybig-sprite styles */
        .cat-sprite.scaled-up {
            transform: scale(1.35) !important;
        }
        .cat-sprite.cat-facing-right.scaled-up {
            transform: scaleX(-1) scale(1.35) !important;
        }
        .cali-sprite.scaled-up {
            transform: scale(1.35) !important;
        }
        .cali-sprite.cali-facing-right.scaled-up {
            transform: scaleX(-1) scale(1.35) !important;
        }
        .ivybig-sprite.scaled-up {
            transform: scale(1.1) !important;
        }
        /* Add more styles for transition */
        .cat-sprite, .cali-sprite, .ivybig-sprite {
            transition: transform 0.2s cubic-bezier(0.4, 1.4, 0.6, 1);
        }

        /* Dialogue container styles */
        #dialogue-container {
            position: fixed;
            bottom: 150px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-width: 800px;
            z-index: 3000;
            display: none;
            overflow: visible; 
            padding-top: 300px; /* Space for wave animation */
        }

        /* NPC dialogue styles */
        #npc-dialogue {
            background-color: #000080; 
            color: #ffffff;
            padding: 15px;
            border: 4px solid #ffffff; 
            box-shadow: 0 0 0 2px #000080, 0 0 0 6px #4040ff; 
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 10px;
            white-space: pre-wrap; 
            position: relative;
            z-index: 2;
            min-height: 80px;
            width: 100%;
            max-width: 800px;
            display: inline-block; /* Make it size to content */
            box-sizing: border-box; /* Include padding in width calculation */
        }

        /* Add a special class for cat dialogues */
        #npc-dialogue.cat-dialogue {
            width: auto;
            min-width: 300px;
            max-width: 600px;
            margin: 0 auto;
            text-align: left;
        }

        /* --- Time-based sky backgrounds --- */
        .sky-morning {
            background: linear-gradient(to bottom, #87CEEB 0%, #B0E2FF 60%, #E0FFFF 100%);
        }
        .sky-sunset {
            background: linear-gradient(to bottom, #FFB347 0%, #FF7E5F 60%, #6A82FB 100%);
        }
        .sky-night {
            background: linear-gradient(to bottom, #232256 0%, #2C3E50 60%, #4B79A1 100%);
        }
        .moon {
            position: absolute;
            top: 10%;
            left: 80%;
            width: 80px;
            height: 80px;
            background: radial-gradient(circle at 60% 40%, #fff 70%, #e0e0ff 100%);
            border-radius: 50%;
            box-shadow: 0 0 40px 10px #fff8, 0 0 80px 30px #e0e0ff44;
            z-index: 2;
            opacity: 0.95;
            pointer-events: none;
            animation: moon-float 60s linear infinite;
        }
        @keyframes moon-float {
            0% { top: 10%; left: 80%; }
            100% { top: 20%; left: 10%; }
        }

        /* Add this to your CSS */
        .sprite {
            display: none;
        }
        .sprite.visible {
            display: block;
        }

        /* Add CSS for the office sign with logo and text */
        .office-sign {
            position: absolute;
            left: 50%;
            transform: translateX(-360px);
            bottom: 200px; /* Position above the door */
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 8px; /* Increased padding for larger sign */
            border-radius: 12px; /* Increased border radius */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Enhanced shadow */
            z-index: 95;
            /* This will be positioned via JavaScript to match door position */
        }
        
        .office-sign-logo {
            width: 160px; /* Doubled from 80px */
            height: 160px; /* Doubled from 80px */
            background-image: url('images/logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 25px; /* Increased margin */
        }
        
        .office-sign-text {
            font-family: 'Arial', sans-serif;
            font-size: 36px; /* Increased from 20px */
            font-weight: 900; /* Extra bold */
            color: #002855; /* Dark blue color matching logo */
            width: 480px; /* Doubled from 240px - about 3x the width of the logo */
            line-height: 1.2;
            letter-spacing: 0.5px; /* Added letter spacing for better readability */
        }

        /* Candy Machine */
        .candy-machine {
            position: absolute;
            left: 1800px; /* Moved 200px to the left from 2000px */
            bottom: 180px; /* Moved down from 280px to be within walkable area */
            width: 210px; /* 1.75x larger than 120px */
            height: 315px; /* 1.75x larger than 180px */
            background-image: url('images/candymachine.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 150; /* Above the reception background but below UI elements */
            transition: transform 0.3s ease; /* Add transition for pop-out effect */
        }

        /* Candy Machine pop-out effect */
        .candy-machine.pop-out {
            transform: scale(1.2);
            z-index: 200; /* Bring to front when popped out */
        }

        /* Candy Machine active state (same as characters) */
        .candy-machine.active {
            transform: scale(1.2);
            z-index: 200;
        }

        /* Zombie Machine */
        .zombie-machine {
            position: absolute;
            left: 1500px; /* Positioned to the left of candy machine (1800px - 300px) */
            bottom: 180px; /* Same bottom position as candy machine */
            width: 210px; /* Same size as candy machine */
            height: 315px; /* Same size as candy machine */
            background-image: url('images/zombie.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 150; /* Same z-index as candy machine */
            transition: transform 0.3s ease; /* Add transition for pop-out effect */
        }

        /* Zombie Machine pop-out effect */
        .zombie-machine.pop-out {
            transform: scale(1.2);
            z-index: 200; /* Bring to front when popped out */
        }

        /* Zombie Machine active state (same as characters) */
        .zombie-machine.active {
            transform: scale(1.2);
            z-index: 200;
        }



        /* Candy Machine Game Popup */
        .candy-machine-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 10000;
            display: none;
        }

        .candy-machine-popup-header {
            background-color: #333;
            color: white;
            padding: 10px 20px;
            border-radius: 6px 6px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 12px;
        }

        .candy-machine-popup-close {
            background: #ff4444;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-family: 'Press Start 2P', monospace, Arial;
            font-size: 10px;
        }

        .candy-machine-popup-close:hover {
            background: #ff6666;
        }

        .candy-machine-popup-content {
            width: 100%;
            height: calc(100% - 50px);
            border: none;
            border-radius: 0 0 6px 6px;
        }