/* Basic CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- THEME & GLOBAL VARIABLES --- */
:root {
    /* Colors */
    --color-text-light: #ffffff;
    --color-text-dark: #333;
    --color-background-dark: #000000;
    --color-accent-yellow: #ffff00;
    --color-accent-green: #00ff00;
    --color-accent-gold: #FFD700;
    --color-accent-tan: tan;

    /* Fonts */
    --font-pixel: 'Press Start 2P', cursive;
    --font-title: 'Rubik 80s Fade', system-ui;
    --font-button: 'jersey 15', sans-serif;
    --font-typewriter: 'Special Elite', monospace;
}

html {
    overflow: hidden;
}

/* Body Styling: Full screen, retro font, dark background */
body {
    font-family: var(--font-pixel); /* Apply the pixelated font as fallback */
    color: var(--color-text-light); /* White text for contrast */
    background-color: var(--color-background-dark); /* Black background as fallback */
    /* Use dynamic viewport height (dvh) to avoid layout jumps from mobile browser UI */
    height: 100dvh;
    overflow: hidden; /* Crucial: Hides any overflow from the oversized video background or sliding screens */
    position: relative; /* Needed for z-index of children like modal */
    perspective: 1500px; /* Add perspective for 3D transitions */
}

/* Video Background Styling (now applies to iframe) */
.video-background-iframe {
    position: fixed; /* Fixes element to the viewport */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    /* These dimensions are key for the "cover" effect.
       They ensure the iframe is always large enough to cover the viewport
       while maintaining a 16:9 aspect ratio (16/9 = 1.777..., 9/16 = 0.5625). */
    width: 177.77777778vh; /* 16/9 of viewport height */
    height: 56.25vw; /* 9/16 of viewport width */
    min-width: 100%; /* Ensure it's at least 100% wide */
    min-height: 100%; /* Ensure it's at least 100% tall */
    transform: translate(-50%, -50%); /* Use transform to truly center and cover */
    z-index: -2; /* Place behind all other content */
    pointer-events: none; /* Allows clicks to pass through to elements behind it */
}

/* Overlay for better text readability over video */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    z-index: -1; /* Between video/iframe and content */
}

/* Screen Container: Holds all main screens side-by-side for sliding */
#screenContainer {
    display: flex; /* Arranges children (screens) horizontally */
    width: 300%; /* Three viewport widths wide (relative to body) */
    height: 100dvh; /* Use dynamic viewport height */
    position: absolute; /* Crucial: Position absolutely from top-left of viewport */
    top: 0;
    left: 0;
    /* Changed transition duration to 1s */
    transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1), opacity 1.2s cubic-bezier(0.76, 0, 0.24, 1), filter 0.5s ease-out; /* Smooth transition for 3D effect and filter */
    z-index: 10; /* Position above the about us screen initially */
    transform: translateX(-33.3333%); /* Start on the main menu by default (now the 2nd screen) */
    transform-origin: center center; /* Set transform origin for rotation */
}

/* Classes to slide the screen container left to specific pages */
#screenContainer.slide-to-special-features {
    transform: translateX(0%); /* Special Features is the first screen */
}
#screenContainer.slide-to-main {
    transform: translateX(-33.3333%); /* Main Menu is the second screen */
}
#screenContainer.slide-to-scene {
    transform: translateX(-66.6666%); /* Scene Selection is the third screen */
}

/* Base styling for all screen wrappers (main, scene, special features) */
.screen-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes header to top, footer to bottom, main in between */
    align-items: center;
    height: 100dvh; /* Use dynamic viewport height */
    width: 33.3333%; /* Each screen takes one third of the container */
    flex-shrink: 0; /* Prevents shrinking */
    position: relative; /* For back button positioning */
    z-index: 1; /* Ensure its content is visible */
    padding: 20px;
    box-sizing: border-box; /* Include padding in width/height */
    background-size: cover; /* Ensure background images cover the area */
    background-position: center; /* Center background images */
    background-repeat: no-repeat; /* Do not repeat background images */
}

/* Main Menu Screen specific alignment */
#mainMenuScreen {
    align-items: center; /* Align content to the center for main menu */
    padding: 20px 0; /* Symmetrical vertical padding, no horizontal padding */
}

/* Main Title Styling (general for all headers) */
header {
    width: 100%;
    text-align: center;
    padding: 20px; /* Add horizontal padding back here to keep title constrained */
    z-index: 1; /* Ensure title is above video and overlay */
    margin-top: 10vh; /* Push title down from the top to create more space */
    /* Add perspective to the header for 3D effect on h1 */
    perspective: 600px; /* Changed perspective to 400px */
    transform-style: preserve-3d; /* Preserve 3D transformations for children */
}

/* Specific font for the main title */
#mainMenuScreen h1 {
    font-family: var(--font-title); /* New textured font */
    font-size: clamp(3rem, 10vw, 12rem); /* Adjusted for a more reasonable desktop size */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9); /* Dark shadow to enhance texture */
    color: var(--color-accent-gold); /* Gold color for the title */
    text-align: center; /* Keep title centered */
    width: 100%; /* Ensure it spans full width for centering */
    transform: none; /* Reset 3D transform to let the font stand out */
    letter-spacing: 4px; /* Adjusted letter spacing for the new font */
}

/* New: Subtitle styling for 'THE SHOWREEL' */
.subtitle-showreel {
    font-family: var(--font-pixel); /* Pixelated font */
    font-size: clamp(0.8rem, 2.5vw, 2rem); /* Responsive size, smaller than main title */
    color: var(--color-accent-green); /* Green for a "Matrix" feel */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7), /* Green glow */
                 0 0 10px rgba(0, 255, 0, 0.5);
    letter-spacing: 3px; /* Wider spacing */
    margin-top: 10px; /* Space from main title */
    filter: blur(0.5px); /* Subtle blur for a digital effect */
}

/* Style for individual characters in the subtitle, controlled by JS */
.subtitle-showreel span {
    display: inline-block; /* Allows transform and animation on each character */
    /* Initial state for JS animation - these are the *final* styles, but with opacity 0 */
    opacity: 0;
    filter: blur(0); /* Start with no blur, animation will add it */
    transform: translateY(0); /* Start at final Y position */
    color: var(--color-accent-green); /* Start with final color, animation will change it */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.5);
    
    /* Transition for the reveal to final state after cycling */
    transition: opacity 0.2s ease-out, filter 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out, text-shadow 0.2s ease-out;
}


/* Hide the original h1 title on the Special Features screen */
#specialFeaturesScreen header h1 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Make it unclickable */
    /* Ensure it takes up space for layout consistency */
    display: block;
    width: 100%;
    text-align: center;
}

/* Main content area within screen-wrapper */
main {
    flex-grow: 1; /* Allows main content to take available space */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes its content (button-container) to the bottom */
    width: 100%; /* Take full width of parent */
    align-items: flex-end; /* Align main content to the right */
}

/* Specific alignment for main menu's main content */
#mainMenuScreen main {
    align-items: stretch; /* Stretch the button container to full width */
    justify-content: flex-end; /* Keep it at the bottom */
    padding-bottom: 5vh; /* Add some space from the very bottom edge */
}

/* Specific styling for special features screen's main content to center its buttons */
#specialFeaturesScreen main {
    justify-content: center; /* Center buttons vertically */
    align-items: center; /* Center buttons horizontally */
}

/* Button Container Styling */
.button-container {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 20px; /* Space between buttons */
    width: fit-content; /* Adjust width to content */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.3); /* Slightly transparent background for button block */
    border-radius: 8px; /* Rounded corners */
}

/* Specific styling for main menu button container */
#mainMenuScreen .button-container {
    flex-direction: row; /* Arrange buttons horizontally */
    justify-content: center; /* Center the buttons within the full-width strip */
    gap: 40px; /* Space between horizontal buttons */
    background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white background */
    padding: 15px 40px; /* Padding for the strip */
    border-radius: 0; /* Remove rounded corners for a full-width strip */
    width: 100%; /* Ensure the container spans the full width */
}

/* Specific styling for special features menu button container (revert background/padding) */
#specialFeaturesScreen .button-container {
    gap: 20px; /* Original gap */
    background-color: rgba(0, 0, 0, 0.3); /* Original background */
    padding: 20px; /* Original padding */
}

/* Individual Button Styling */
.menu-button {
    text-decoration: none; /* Remove underline from links */
    color: var(--color-text-light); /* Default white text */
    font-size: clamp(1rem, 3vw, 1.8rem); /* Responsive font size */
    padding: 10px 20px;rgb(254, 254, 178)
    text-align: center;
    transition: color 0.2s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition for hover effect and opacity */
    white-space: nowrap; /* Prevent text wrapping */
    cursor: pointer; /* Indicate clickable element */
 
    /* New: Button Font and Gradient */
    font-family: var(--font-button);
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* Slightly larger for emphasis */
    background-image: linear-gradient(to bottom, #ffff00, #ff8c00); /* Vertical gradient: yellow to dark orange */
    -webkit-background-clip: text; /* Clip background to text shape */
    background-clip: text; /* Standard property */
    color: transparent; /* Make text transparent to show gradient */
}

/* Specific styling for main menu buttons */
#mainMenuScreen .menu-button {
    /* Changed to flexbox for precise icon alignment */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Vertically center */
    padding: 10px; /* Symmetrical padding for the button */
    gap: 10px; /* Increased space between icon and text */
    /* Removed text-align: right; as flexbox handles alignment */
    position: relative; /* Keep for general positioning if needed */
    transition: color 0.2s ease-in-out, opacity 0.3s ease-in-out, background-image 0.2s ease-in-out, filter 0.2s ease-in-out;
    /* New: Add a heavy drop shadow to the entire button (text and icon) */
    filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.75));
}

/* Pixelated circle for main menu hovered items */
#mainMenuScreen .menu-button::before {
    content: ''; /* We will create the square with width/height instead of a font character */
    display: inline-block; /* Treat it like a block-level element in the flex row */
    order: -1; /* Place before the text content in flex order */

    /* Proportional sizing using em units, relative to the button's font-size */
    width: 0.6em;
    height: 0.6em;
    background-color: var(--color-accent-yellow);
    box-shadow: 1px 1px 0 black; /* Use box-shadow instead of text-shadow */

    opacity: 0; /* Initially hidden */
    transition: opacity 0s ease-in-out; /* Only opacity transition, no transform */
}

#mainMenuScreen .menu-button:hover::before {
    opacity: 1; /* Just appear */
    transform: none; /* Ensure no lingering transform */
}

/* Specific styling for special features menu buttons (revert font/style) */
#specialFeaturesScreen .menu-button {
    font-family: var(--font-button);
    background-image: none; /* Remove gradient */
    color: var(--color-text-light); /* Ensure white text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Keep original shadow */
    font-size: clamp(1rem, 3vw, 1.8rem); /* Revert to original size */
    padding: 10px 20px; /* Revert to original padding */
    text-align: center; /* Explicitly center text for special features buttons */
}
/* Ensure hover for special features buttons still works */
#specialFeaturesScreen .menu-button:hover {
    color: var(--color-accent-yellow);
    text-shadow: 0 0 10px var(--color-accent-yellow), 0 0 20px var(--color-accent-yellow);
}


/* Button Hover Effect */
.menu-button:hover {
    color: var(--color-accent-yellow); /* Change to solid yellow on hover (overrides gradient) */
    text-shadow: 0 0 10px var(--color-accent-yellow), 0 0 20px var(--color-accent-yellow); /* Add a subtle glow */
    background-image: none; /* Remove gradient on hover for solid color */
}
/* Override for main menu hover to be white */
#mainMenuScreen .menu-button:hover {
    color: var(--color-text-light); /* Make text white on hover */
    text-shadow: 0 0 10px var(--color-text-light), 0 0 20px var(--color-text-light); /* White glow */
}

/* New class to programmatically highlight a main menu button */
#mainMenuScreen .menu-button.is-active {
    color: var(--color-text-light); /* Make text white */
    text-shadow: 0 0 10px var(--color-text-light), 0 0 20px var(--color-text-light);
}

/* Make the selector more specific to override the default opacity: 0 */
#mainMenuScreen .menu-button.is-active::before {
    opacity: 1; /* Show the square icon */
    transform: none;
}


/* Footer Styling */
footer {
    width: 100%;
    text-align: center;
    padding: 15px 20px; /* Add horizontal padding back here to keep footer constrained */
    font-size: clamp(0.5rem, 1.5vw, 0.8rem); /* Much smaller responsive font size */
    color: rgba(255, 255, 255, 0.7); /* Slightly dimmed white for footer */
    z-index: 1; /* Ensure footer is above video and overlay */
}

/* New: DVD Logo in the bottom left */
#dvdLogo {
    position: absolute;
    bottom: 15px; /* Align with footer padding */
    left: 20px;
    width: 60px; /* You can change the size here */
    height: 45px; /* You can change the size here */
    background-color: rgba(255, 255, 255, 0.7); /* You can change the color here */    
    cursor: pointer; /* Indicate that it's clickable for the easter egg */

    /* Use the SVG as a mask to allow for color changes */
    -webkit-mask-image: url('assets/dvd-logo.svg');
    mask-image: url('assets/dvd-logo.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* Add a smooth transition for color changes */
    transition: background-color 0.2s ease-in-out;
}

/* New: Class for when the logo is bouncing */
#dvdLogo.bouncing {
    /* Change position to fixed to bounce around the entire viewport */
    position: fixed;
    /* Let JS control the position via transform, so unset bottom/left */
    bottom: auto;
    left: auto;
    z-index: 200; /* Ensure it's on top of other content */
}

/* New: Speech bubble for the easter egg */
.easter-egg-bubble {
    position: fixed; /* Position relative to the viewport */
    background-color: var(--color-text-light);
    color: var(--color-background-dark);
    padding: 10px 15px;
    border-radius: 8px;
    font-family: var(--font-pixel);
    font-size: 12px;
    white-space: nowrap;
    z-index: 201; /* Above the bouncing logo */
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.5); /* Position above the click point and start small */
    transform-origin: bottom center;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none; /* Don't let it interfere with clicks */
}

.easter-egg-bubble.show {
    opacity: 1;
    transform: translate(-50%, -115%) scale(1); /* Grow to full size and pop up a bit */
}

/* The little triangle pointer for the bubble */
.easter-egg-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: var(--color-text-light) transparent transparent transparent;
}

/* Video Modal Styling */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--color-background-dark); /* Fully opaque */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100; /* High z-index to be on top */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Hidden from screen readers and interactions */
    transform: scale(0.1); /* Start tiny */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s;
}

.video-modal.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.video-modal-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* No padding-bottom or height here, handled by aspect-ratio div */
    background-color: var(--color-background-dark);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-modal-aspect-ratio { /* New class for aspect ratio container */
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    overflow: hidden;
}

.video-modal-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    color: var(--color-text-light);
    font-size: 2rem;
    cursor: pointer;
    z-index: 101;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: color 0.2s ease-in-out;
}

/* Video Interstitial (The "Play / Proceed" screen) */
#videoInterstitial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Dark background to hide video area */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    justify-content: center;
    align-items: center;
    gap: 30px;
    z-index: 105; /* Above the iframe */
}

#videoInterstitial.hidden {
    display: none;
}

/* Specific styling for Interstitial buttons to match the Exit button */
#videoInterstitial .menu-button {
    background-image: none; /* Remove gradient */
    -webkit-background-clip: border-box; /* Reset clip */
    background-clip: border-box;
    color: var(--color-text-light); /* White text */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    border: 2px solid var(--color-text-light); /* White border */
    font-size: 2rem;
    padding: 10px 40px;
    min-width: 200px;
    justify-content: center;
}

#videoInterstitial .menu-button:hover {
    background-color: var(--color-text-light);
    color: var(--color-background-dark);
    text-shadow: none;
}

.close-modal:hover {
    color: var(--color-accent-yellow);
}

/* Scene Selection specific styling */
.scene-selection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 20px;
    max-width: 1200px;
    width: 100%;
    margin: auto;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.chapter-video-item {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.chapter-video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(255, 255, 0, 0.4);
}

.chapter-video-item .video-thumbnail {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
    background-color: #333;
}

.chapter-video-item .video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chapter-video-item .chapter-title {
    padding: 10px;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    color: var(--color-text-light);
    white-space: normal;
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px; /* Padding inside the border */
    margin: 20px auto; /* Centered margin */
    max-width: 90vw; /* Prevent the container from exceeding the viewport width */
    border: 2px solid var(--color-text-light); /* White outline around the list */
    border-radius: 4px;
    flex-wrap: wrap; /* Allow the buttons to wrap onto the next line */
}

.pagination-item {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--color-text-light); /* White text */
    background-color: transparent; /* Transparent background */
    border: none; /* No individual borders */
    padding: 8px 15px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.pagination-item.active {
    background-color: var(--color-text-light); /* White background */
    color: var(--color-background-dark); /* Black text */
    cursor: default;
}

.pagination-item:not(.active):hover {
    background-color: var(--color-accent-yellow);
    color: var(--color-background-dark);
}

/* Back button for scene selection and special features */
.back-button {
    position: absolute;
    top: 20px;
    color: var(--color-text-light);
    font-size: 1.5rem;
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: color 0.2s ease-in-out;
}

.back-button:hover {
    color: var(--color-accent-yellow);
}

/* Specific styling for the back button on the left (Scene Selection) */
#backToMainMenuFromScenes {
    left: 20px;
}

/* Override default header styles for the About Us screen */
#aboutUsScreen header h1 {
    font-family: var(--font-typewriter);
    color: var(--color-text-dark);
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-shadow: none;
    transform: none;
    letter-spacing: 2px;
}

/* Specific styling for the back button on the right (Special Features) */
#backToMainMenuFromFeatures {
    right: 20px;
}

/* About Us Screen Specific Styling */
#aboutUsScreen {
    /* It's a modal-like panel that animates in 3D over the current screen */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90vw;
    height: 90dvh;
    max-width: 1200px; /* Adjusted max width for a cleaner look */
    max-height: 750px; /* Adjusted max height */
    z-index: 20; /* Positioned above the screenContainer (z-index: 10) */
    background-color: var(--color-accent-tan); /* Tan background as requested */
    color: var(--color-text-dark); /* Darker text for readability on tan background */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Initial state for 3D animation: off-screen at the bottom, rotated back */
    transform-origin: bottom center;
    transform: translate(-50%, -50%) rotateX(-90deg); /* Keep centered, just rotated out of view */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Ensure it's not interactive when hidden */
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease-out, visibility 1s;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
}

/* "TOP SECRET" stamp for the About Us page */
#aboutUsScreen::after {
    content: 'TOP SECRET';
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'Bowlby One SC', sans-serif; /* A suitably blocky, impactful font */
    font-size: clamp(8rem, 25vw, 20rem); /* Larger responsive font size */
    color: rgba(200, 0, 0, 0.1); /* Much more transparent red */
    border: 10px solid rgba(200, 0, 0, 0.1); /* Matching transparent border */
    padding: 0.2em 0.5em;
    border-radius: 8px;
    transform: translate(-50%, -50%) rotate(12deg); /* Center and rotate */
    /* z-index is removed; stacking is now controlled by .about-us-main */
    pointer-events: none; /* Prevent it from interfering with clicks */
    text-shadow: none;
}

/* Specific styling for the back button on the left (About Us) */
#backToMainMenuFromAbout {
    left: 20px;
    color: var(--color-text-dark); /* Make back button dark to be visible on tan */
}

/* --- 3D Transition Active State --- */

/* Backdrop for About Us screen to dim background and block clicks */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent black */
    z-index: 15; /* Between screenContainer (10) and aboutUsScreen (20) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Allow clicks to pass through when hidden */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

body.about-us-active::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Block clicks to underlying content */
}

/* When About Us is active, the background screen remains static and visible. */
body.about-us-active #screenContainer {
    /* No changes needed, it stays as is. */
}

/* And the about us screen animates into view */
body.about-us-active #aboutUsScreen {
    transform: translate(-50%, -50%) rotateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Make it interactive when shown */
}

/* Make Contact Screen Overlay Styling */
#makeContactScreen {
    /* It's a full-screen overlay that fades in */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 20; /* Positioned above the screenContainer (z-index: 10) */
    background-color: rgba(0, 0, 0, 0.9); /* Dark, semi-transparent background */
    
    /* Initial state for animation */
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05); /* Start slightly zoomed in for a nice effect */
    pointer-events: none; /* Ensure it's not interactive when hidden */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-out, visibility 0.4s;
}

/* Active state for the contact overlay */
body.contact-active #makeContactScreen {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Make it interactive when shown */
}

/* Center the content within the contact overlay */
#makeContactScreen main {
    justify-content: center;
    align-items: center;
}

/* Allow line breaks in the telepathy button and ensure it's centered */
#makeContactScreen #telepathyButton {
    white-space: normal;
    text-align: center;
}

.telepathy-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.95);
    color: var(--color-accent-green); /* Matrix green */
    font-family: var(--font-pixel);
    font-size: clamp(0.8rem, 2vw, 1.5rem);
    padding: 30px;
    border: 2px solid var(--color-accent-green);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.7);
    text-align: center;
    border-radius: 8px;
    z-index: 1000; /* On top of everything */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s;
    max-width: 80vw; /* Responsive width */
}

.telepathy-message.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

#makeContactScreen.wavy-active {
    filter: url(#telepathy-wave);
}


/* When About Us is active, also hide the special features clone title.
   This has higher specificity than .show-clone, so it will override it. */
body.about-us-active #specialFeaturesClone {
    opacity: 0;
    visibility: hidden;
}

/* When Contact screen is active, also hide the special features clone title. */
body.contact-active #specialFeaturesClone {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out; /* Add a quick fade out */
}

.about-us-content img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.about-us-main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content horizontally */
    width: 100%;
    padding: 20px;
    position: relative; /* Create a stacking context */
    z-index: 1; /* Ensure content is above the ::after pseudo-element (the stamp) */
}

.about-us-content {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    align-items: center;
}

.about-us-text {
    flex: 1;
    font-family: var(--font-typewriter); /* Typewriter font */
    font-size: 1.1rem; /* Slightly larger for readability */
    line-height: 1.7;
    color: var(--color-text-dark); /* Dark text for tan background */
}

.about-us-text p {
    margin-bottom: 2em; /* Adjust this value to increase or decrease the space */
}

.about-us-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Wrapper for each image to apply paperclip and rotation */
.image-wrapper {
    position: relative;
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.image-wrapper:hover {
    transform: rotate(0) scale(1.05); /* Straighten and slightly enlarge on hover */
    z-index: 2; /* Bring the hovered image to the front */
}

/* Rotate the first image clockwise */
.about-us-images .image-wrapper:first-child {
    transform: rotate(3deg);
}

/* Rotate the second image counter-clockwise */
.about-us-images .image-wrapper:last-child {
    transform: rotate(-4deg);
}

.about-us-content img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* New: Easter egg overlays for the About Us image */
.image-wrapper .easter-egg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the whole overlay is visible without stretching */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Allow clicks to pass through to the main image */
    transition: opacity 0.4s ease-in-out;
}

.image-wrapper .easter-egg-overlay.show-overlay {
    opacity: 1;
    visibility: visible;
}
/* DVD Loading Overlay Styling */
#dvdLoadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--color-background-dark);
    z-index: 9999; /* Highest z-index to be on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
}

#dvdLoadingOverlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevent interaction when hidden */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;    
}

.disc-loader {
    position: relative;
    width: 150px;
    height: 54px; /* Adjusted height to align perfectly with the slot */
    margin-bottom: 10px; /* Space between loader and text */
    overflow: hidden; /* This will act as the mask, clipping the disc */
}

.slot {
    position: absolute;
    bottom: 0; /* Position the slot at the very bottom of the container */
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* Shorter slot, slightly wider than the disc */
    height: 4px; /* Line thickness */
    background-color: var(--color-text-light); /* White line */
    border-radius: 2px; /* Rounded ends */
}

.disc {
    position: absolute;
    left: 50%;
    /* 'top' is removed, as the animation now controls the full vertical transform */
    width: 60px; /* Larger disc */
    height: 60px; /* Larger disc */
    background-color: transparent; /* No fill color */
    border: 4px solid var(--color-text-light); /* White outline with matching thickness */
    border-radius: 50%;
    /* The transform is now fully controlled by the animation keyframes */
    animation: insert-disc 2.5s ease-in-out infinite;
}

.disc::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; /* Size of the inner hole */
    height: 20px;
    background-color: var(--color-background-dark); /* Match the background to create a hole */
    border: 4px solid var(--color-text-light); /* White outline for the inner circle */
    border-radius: 50%;
    box-sizing: border-box; /* Ensure border is included in width/height */
}

/* --- VHS Loading Overlay --- */
#vhsLoadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--color-background-dark);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
}

#vhsLoadingOverlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.vhs-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.lcd-text {
    font-family: 'DSEG14-Classic', var(--font-pixel); /* Fallback to pixel if needed */
    color: var(--color-accent-green);
    font-size: 2.5rem;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    letter-spacing: 4px;
    font-style: italic;
    margin: 0;
}

/* 7-Segment Spinner */
.lcd-spinner {
    display: flex;
    gap: 12px;
}

.lcd-digit {
    position: relative;
    width: 40px;
    height: 70px;
    transform: skew(-10deg);
}

.segment {
    position: absolute;
    background-color: rgba(0, 255, 0, 0.1);
    border-radius: 3px;
    opacity: 0.3;
}

.segment-x { height: 6px; width: 28px; left: 6px; }
.segment-y { width: 6px; height: 28px; }

/* Segment Positions */
.seg-a { top: 0; }
.seg-b { top: 6px; right: 0; }
.seg-c { bottom: 6px; right: 0; }
.seg-d { bottom: 0; }
.seg-e { bottom: 6px; left: 0; }
.seg-f { top: 6px; left: 0; }
.seg-g { top: 32px; left: 6px; }

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    /* More aggressive adjustments to fit content within the mobile viewport height */
    header {
        margin-top: 8vh; /* Increase top margin to prevent overlap with back button */
        padding: 5px;
    }

    #mainMenuScreen h1 {
        font-size: clamp(3rem, 13vw, 6rem); /* Make title larger on mobile */
        letter-spacing: 1px; /* Tighten letter spacing more */
        margin-bottom: 1vh; /* Add a bit of space below title */
    }

    .subtitle-showreel {
        font-size: clamp(0.7rem, 2vw, 1rem); /* Make subtitle smaller */
        margin-top: 0;
    }

    #mainMenuScreen main {
        align-items: flex-end;
        flex-grow: 1; /* Allow main to fill the space between header and footer */
        padding-bottom: 80px; /* Increased to make space for egg counter */
    }

    footer {
        padding: 5px;
        margin-bottom: 1vh; /* Nudge footer up slightly from the absolute bottom */
    }

    .menu-button {
        padding: 8px 15px;
    }

    /* Make Special Features menu buttons larger on mobile */
    #specialFeaturesScreen .menu-button {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }

    /* Make the 'Back to Menu' buttons smaller on mobile for a cleaner look */
    .back-button {
        font-size: 1rem;
        top: 25px; /* Adjust position slightly to align with new size */
    }

    /* On mobile, move the DVD logo up to prevent overlapping the copyright text */
    #dvdLogo {
        bottom: 60px;
    }

    /* On mobile, use the ID for higher specificity to override the general rule */
    #eggCounter {
        bottom: 80px;
    }

    /* On mobile, allow easter egg bubbles to wrap to prevent overflow */
    .easter-egg-bubble {
        white-space: normal; /* Allow text to wrap */
        max-width: 60vw; /* Constrain width to 60% of the viewport width */
        text-align: center; /* Center the wrapped text for a cleaner look */
    }

    /* Hide the egg counter on the scene selection screen to reduce crowding */
    #screenContainer.slide-to-scene ~ #eggCounter {
        display: none;
    }

    /* Force 2 columns on screens up to 768px wide (tablets and larger phones) */
    .scene-selection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 10px;
    }
    #mainMenuScreen {
        padding: 20px 30px;
    }
    .about-us-content {
        flex-direction: column; /* Stack text and images on smaller screens */
        text-align: center;
    }

    /* Unwrap the images container to interleave images with text on mobile */
    .about-us-images {
        display: contents;
    }

    /* Move the first image to the top */
    #yazAndHazImageWrapper {
        order: -1;
    }

    /* On mobile, stack main menu buttons vertically and remove the background */
    #mainMenuScreen .button-container {
        flex-direction: column;
        gap: 15px; /* Reduce gap between buttons */
        width: auto; /* Allow the container to fit its content */
        background-color: transparent; /* Remove the background */
        border-radius: 0; /* Remove rounded corners */
        padding: 0; /* Remove padding to align cleanly to the right */
    }

    /* Right-align the text and icon within each button on mobile */
    #mainMenuScreen .menu-button {
        justify-content: flex-end;
        font-size: clamp(2rem, 5vw, 3rem); /* Make main menu buttons larger on mobile */
    }
}

@media (max-width: 480px) { /* Stack to 1 column on very small phones */
    .scene-selection-grid {
        /* grid-template-columns: 1fr; */
    }
    #mainMenuScreen {
        padding: 20px 20px;
    }
}

/* Special Features Clone Styling */
#specialFeaturesClone {
    position: fixed;
    /* Removed width and height from CSS, will be set by JS */
    /* width: 100vw; */
    /* height: 100vh; */
    box-sizing: border-box; /* Added for consistent sizing */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 95; /* Below the main screens but visible during transition */
    color: var(--color-accent-yellow); /* Default color */
    font-family: var(--font-button);
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    /* Add flex properties to perfectly center the text inside the clone's box */
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center center;
}

/* NEW: Class to apply transitions only when the animation should run */
#specialFeaturesClone.is-animating {
    transition-property: top, transform, font-size, letter-spacing, color, width, height;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

/* Class to make the clone instantly visible. The animation itself is triggered by JS. */
#specialFeaturesClone.show-clone {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

/* Black transition overlay for screen changes */
#transitionOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: #000 url('assets/gifs/The_Swing_car_away.gif') center center / cover no-repeat;
    z-index: 500; /* High enough to cover content during transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#transitionOverlay.show {
    opacity: 1;
    visibility: visible;
}

#passwordScreen {
    position: fixed;
    z-index: 10000; /* Higher than the loading overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--color-background-dark);
    font-family: var(--font-pixel);
    color: var(--color-accent-green);
    display: flex;
    padding: 2em;
    font-size: clamp(0.8rem, 2.5vw, 1.2rem); 
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    justify-content: flex-start; /* Changed from 'center' to align to left */
    align-items: flex-start; /* Changed from 'center' to align to top */
   
}

#passwordScreen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#passwordForm {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
    gap: 1em; /* Add some space between them */
    align-items: flex-start; /* Align items to the left */
}

#passwordForm label {
    line-height: 1.8;
    white-space: pre-wrap; /* Allows wrapping while preserving whitespace sequences */
}

#passcodeInput {
    background: transparent;
    border: none;
    color: var(--color-accent-green);
    font-family: var(--font-pixel);
    font-size: inherit; /* Inherit size from parent */
    outline: none;
    width: 12ch; /* Give it some initial width */
    display: block; /* Must be displayed to be focusable */
    opacity: 0; /* But make it invisible */
    pointer-events: none; /* And not clickable */
    transition: opacity 0.3s ease-out; /* For a nice fade-in effect */
    /* The default browser cursor will now be used */
}

/* Class to fade the input in when it's ready */
#passcodeInput.visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- Insert VHS Screen --- */
#insertVhsScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: #000; /* Black background */
    z-index: 10001; /* Above password screen (10000) */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#insertVhsScreen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#insertVhsButton {
    appearance: none;
    border: none;
    padding: 0;
    cursor: pointer;

    /* VHS Tape Dimensions */
    width: 300px;
    height: 180px;
    max-width: 90vw; /* Ensure it fits on small mobile screens */

    position: relative;
    
    /* The Tape Body */
    background-color: #080808; /* Dark plastic body */
    border-radius: 6px;
    
    /* The Hinge (Top Flap) */
    border-top: 35px solid #1a1a1a; /* Lighter matte black strip at the top */
    border-bottom: 4px solid #000; /* Subtle depth at bottom */
    
    box-shadow: 0 10px 20px rgba(0,0,0,0.7), 0 0 60px rgba(255, 255, 255, 0.2); /* Deep shadow + stronger white glow */
    transition: transform 0.2s ease;

    /* Hide the default button text, we recreate it on the label */
    color: transparent;
    font-size: 0;
}

/* The Windows (The Spools) */
#insertVhsButton::before {
    content: '';
    position: absolute;
    
    /* Left Window */
    top: 55%; /* Align vertically with label */
    transform: translateY(-50%);
    left: 20px;
    width: 45px;
    height: 80px; /* Match label height */
    background-color: #1a1a1a; /* Dark spool (matches top hinge) */
    border-radius: 12px; /* Curves */
    opacity: 0.9;

    /* Create the Right Window using a distant shadow (cloning the shape) */
    /* Offset: 300 width - 20 left - 45 width - 20 right margin = 215 */
    box-shadow: 215px 0 0 #1a1a1a;
}

/* The Label */
#insertVhsButton::after {
    content: 'INSERT TAPE';
    position: absolute;
    
    /* Centered in the body area */
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 130px;
    height: 80px;
    background-color: #f4f4f4; /* Paper white */
    border-radius: 2px;

    /* Text Styling */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    
    font-family: var(--font-typewriter); /* Handwritten/Typewriter feel */
    font-size: 1.3rem;
    color: #111; /* Black ink */
    letter-spacing: 2px;
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Slight paper lift */
}

#insertVhsButton:hover {
    transform: scale(1.05) rotate(-1deg); /* Slight lift and tilt on hover */
}
/* --- Skip To Menu Button --- */
#skipToMenu {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000; /* Increased to be above loading overlays (9999) */
    font-family: 'DSEG14-Classic', var(--font-pixel);
    font-style: italic;
    font-size: 2rem;
    color: var(--color-text-light);
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-text-light);
    padding: 10px 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, background-color 0.2s;
}

#skipToMenu.visible {
    opacity: 1;
    visibility: visible;
}

#skipToMenu:hover {
    background-color: var(--color-text-light);
    color: var(--color-background-dark);
}

/* --- Easter Egg Counter --- */
.egg-counter {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 90; /* Above normal screens, below video modal (100) */
    font-family: var(--font-pixel);
    color: var(--color-text-light);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    opacity: 0.7;
    transition: opacity 0.3s;
    pointer-events: none; /* Let clicks pass through */
}

.egg-counter.completed {
    pointer-events: auto; /* Make it clickable when complete */
    cursor: pointer;
    opacity: 1; /* Make it fully visible when completed */
}

.egg-text {
    font-size: 0.8rem;
    text-shadow: 1px 1px 0 #000;
}

.egg-text.flash {
    animation: text-flash 0.5s ease-in-out;
}

@keyframes text-flash {
    0%, 100% { color: var(--color-text-light); text-shadow: 1px 1px 0 #000; }
    50% {
        color: var(--color-accent-yellow);
        text-shadow: 0 0 10px var(--color-accent-yellow), 0 0 20px var(--color-accent-yellow);
    }
}

.egg-progress-bar {
    width: 100px;
    height: 8px;
    border: 2px solid var(--color-text-light);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1px;
}

#eggProgressFill {
    width: 0%;
    height: 100%;
    background-color: #ffa500; /* Start Orange */
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.5s ease;
}

/* --- Particle Effect --- */
.particle {
    position: fixed; /* Use fixed so it's relative to viewport, not a scrolling parent */
    z-index: 91; /* Just above the egg counter */
    border-radius: 50%; /* Make them circles */
    pointer-events: none;
    /* Animate transform and opacity */
    transition: transform 1s cubic-bezier(0.1, 0.8, 0.7, 1), opacity 1s ease-out;
}

/* Style for the new tap prompt */
#tapPrompt {
    color: var(--color-accent-yellow);
    margin-top: 1em;
    animation: pulse 2s infinite;
    cursor: pointer;
    display: none; /* Initially hidden, will be shown by JS */
}

/* Keyframes for the spinner animation */
@keyframes insert-disc {
    0% {
        transform: translate(-50%, -40px); /* Start closer to the slot */
    }
    40% {
        transform: translate(-50%, -8px); /* Adjusted so disc bottom enters the slot slightly */
    }
    100% {
        transform: translate(-50%, 54px); /* Move disc completely through and out of the container */
    }
}

/* New: Keyframes for the telepathy swirl effect */
@keyframes telepathy-swirl {
    0% {
        filter: blur(0px) hue-rotate(0deg);
        opacity: 1;
    }
    50% {
        filter: blur(20px) hue-rotate(720deg);
        opacity: 0.6;
    }
    100% {
        filter: blur(0px) hue-rotate(0deg);
        opacity: 1;
    }
}

/* Keyframes for the tap prompt pulse */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Snake Animation */
@keyframes snake-flash {
    0%, 12.49% {
        background-color: var(--color-accent-green);
        box-shadow: 0 0 10px var(--color-accent-green);
        opacity: 1;
    }
    12.5%, 100% {
        background-color: rgba(0, 255, 0, 0.1);
        box-shadow: none;
        opacity: 0.3;
    }
}

.snake-d1-a { animation: snake-flash 0.8s infinite 0s; }
.snake-d2-a { animation: snake-flash 0.8s infinite -0.7s; }
.snake-d2-b { animation: snake-flash 0.8s infinite -0.6s; }
.snake-d2-c { animation: snake-flash 0.8s infinite -0.5s; }
.snake-d2-d { animation: snake-flash 0.8s infinite -0.4s; }
.snake-d1-d { animation: snake-flash 0.8s infinite -0.3s; }
.snake-d1-e { animation: snake-flash 0.8s infinite -0.2s; }
.snake-d1-f { animation: snake-flash 0.8s infinite -0.1s; }

/* --- Mobile Landscape Fix (Zoom Out Strategy) --- */
/* Target devices in landscape orientation with limited vertical height (phones) */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        /* Scale down the entire site to fit the desktop layout in short height */
        transform: scale(0.65);
        transform-origin: top left;
        
        /* Compensate dimensions so it still fills the screen when scaled down */
        width: 153.85vw;  /* 100 / 0.65 */
        height: 153.85dvh; /* 100 / 0.65 */
        overflow: hidden;
    }

    /* Compensate fixed background video dimensions which use viewport units */
    .video-background-iframe {
        width: calc(177.77777778vh / 0.65);
        height: calc(56.25vw / 0.65);
    }

    /* 
       Force full-screen containers to inherit the expanded height from the body.
       Originally they are set to 100dvh, which is too short in this scaled context.
    */
    #screenContainer,
    .screen-wrapper,
    #vhsLoadingOverlay,
    #dvdLoadingOverlay,
    #transitionOverlay,
    #passwordScreen,
    #insertVhsScreen,
    #makeContactScreen,
    .video-modal,
    #videoInterstitial {
        height: 100%;
    }

    /* Fix About Us screen size calculation in scaled context */
    #aboutUsScreen {
        width: 95%; /* Use percentage of the scaled body, not viewport units */
        height: 90%; /* Maximize vertical space */
        max-width: none; /* Remove desktop constraints */
        max-height: none;
    }
}