@font-face {
    font-family: 'Andale Mono';
    src: url('Andale Mono.ttf') format('truetype');
}

body {
    background-color: white;
    margin: 0;
    height: 100vh;
    /* Fallback if image is too big or invalid, but trying the image first */
    cursor: url('cursor-png-new.png'), auto;
    font-family: 'Andale Mono', monospace;
    /* User requested Andale Mono */
    overflow: hidden;
    /* Prevent scrollbars if not needed */
}



#image-container {
    position: absolute;
    top: 50%;
    left: 25%;
    /* Left side of the screen */
    transform: translate(-50%, -50%);
}

#slideshow-img {
    max-width: 28vw;
    /* Reasonable max width, adjustable */
    max-height: 28vw;
    display: block;
}

#hover-image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10;
    display: none;
}

#hover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.25);
}

#video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    /* Ensure it's on top of everything */
    display: none;
    background-color: black;
    /* Optional background */
}

#transition-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#text-container {
    position: absolute;
    top: 50%;
    left: 75%;
    /* Moved more to the right */
    transform: translate(-50%, -50%);
    color: blue;
    /* Placeholder blue, will adjust */
    font-size: 1.1vw;
    /* Smaller font size */
    white-space: pre;
    /* Keep formatting */
    z-index: 20;
    cursor: pointer;
    /* Indicate interactivity */
}

#text-visible-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 110;
    /* Above video (100) */
    display: none;
    pointer-events: auto;
    cursor: pointer;
}

#text-visible-img {
    max-width: 85vw;
    max-height: 85vh;
    display: block;
}

#blank-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 200;
    /* Highest */
    display: none;
    overflow-y: auto;
    /* Enable scrolling */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

#ascii-mirror-container {
    position: fixed;
    /* Stay in place while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through if needed, though mostly for visual */
}

#ascii-mirror-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scroll-image-container {
    position: relative;
    /* Standard flow */
    width: 100%;
    height: 100vh;
    /* Full screen height per image */
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spacer {
    height: 20vh;
    /* Reduced to crop bottom */
    width: 100%;
}

#webcam-wrapper {
    position: relative;
    width: 42vw;
    /* Adjust as needed */
    aspect-ratio: 1 / 1;
    /* Assuming square-ish frame, adjust based on image */
    display: flex;
    justify-content: center;
    align-items: center;
}

#webcam-frame-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Frame on top */
    pointer-events: none;
}

#ascii-canvas {
    position: absolute;
    top: 54%;
    /* Center vertically */
    left: 50%;
    /* Center horizontally */
    transform: translate(-50%, -50%);
    /* Perfect centering */
    width: 48%;
    /* Slightly adjusted width */
    height: 48%;
    /* Slightly adjusted height */
    z-index: 1;
    /* Canvas behind frame */
    background-color: white;
    border-radius: 0.7vw;
    /* Optional: smooth corners like reference */
}

/* Revert #img-2 to default behavior (handled by .scroll-image-container) */
/* #img-2 and #img-2 img styles removed as they were empty */

#scroll-text-container {
    position: absolute;
    top: 50%;
    right: 35%;
    /* Position to the right of the webcam */
    transform: translateY(-50%);
    color: blue;
    font-family: 'Andale Mono', monospace;
    font-size: 1.1vw;
    white-space: normal;
    max-width: 17.5vw;
    z-index: 5;
    text-align: left;
}

#img-3 {
    position: relative;
    /* Ensure absolute positioning works */
    justify-content: flex-start;
    padding-left: 10%;
}

#jagged-webcam-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10vh 0;
    gap: 1.4vw;
    overflow-x: hidden;
    flex-wrap: nowrap;
    /* Force single row */
}

.jagged-webcam-item {
    position: relative;
    flex-shrink: 1;
    /* Width and margin will be set by JS */
}

.jagged-webcam-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.jagged-webcam-item canvas {
    position: absolute;
    top: 54%;
    /* Moved down to fit frame */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48%;
    height: 48%;
    z-index: 1;
    background-color: white;
    border-radius: 0.35vw;
    /* Slightly smaller radius for smaller items */
    transition: opacity 0.3s ease;
}

.jagged-webcam-overlay {
    position: absolute;
    opacity: 0;
    /* Initial state for animation */
    transition: opacity 1s ease-in-out;
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
}

/* Dimming effect removed */
/*
#jagged-webcam-container.dim-webcams .jagged-webcam-item img,
#jagged-webcam-container.dim-webcams .jagged-webcam-item canvas {
    opacity: 0.5;
}
*/

.overlay-pos-1 {
    top: -100%;
    left: -80%;
    width: 350%;
    max-width: none;
}

.overlay-pos-2 {
    top: 10%;
    left: 20%;
    width: 400%;
    max-width: none;
    z-index: 10;
    /* Ensure it overlaps next webcam if needed */
}

.overlay-pos-3 {
    top: -80%;
    left: -120%;
    width: 450%;
    max-width: none;
}

#ascii-background-container {
    position: relative;
    width: 100%;
    margin-top: 7vw;
    min-height: 42vw;
    /* Ensure enough space for text and image */
    display: none;
    /* Hidden until unlocked */
}

#ascii-background-container img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}

#final-text-container {
    position: absolute;
    top: 5.6vw;
    /* Position in upper area as shown in screenshot */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    max-width: 56vw;
    color: blue;
    font-family: 'Andale Mono', monospace;
    font-size: 1.1vw;
    min-height: 1.2em;
    opacity: 1;
    z-index: 10;
    /* Ensure text appears above background */
    padding: 0 1.4vw;
}

#hover-text-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    /* White dimming overlay */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
    /* Allow clicks to pass through */
    transition: opacity 0.3s ease;
}

#hover-text-overlay.active {
    display: flex;
}

#hover-text-content {
    color: #000080;
    /* Navy blue */
    font-family: 'Andale Mono', monospace;
    font-size: 1.7vw;
    text-align: center;
    max-width: 80%;
    line-height: 1.6;
    padding: 1.4vw;
}

#look-closer-button-container {
    width: 100%;
    text-align: center;
    padding: 1.4vw 0 2.1vw 0;
    /* Reduced padding, closer to image */
    display: none;
    /* Hidden until unlocked */
}

#look-closer-btn {
    font-family: 'Andale Mono', monospace;
    font-size: 1.25vw;
    font-weight: bold;
    color: blue;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

#look-closer-btn:hover {
    opacity: 0.7;
}

#blue-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0000FF;
    /* Bright blue as shown in screenshot */
    z-index: 300;
    /* Above everything */
    display: none;
    overflow: hidden;
    /* No scrolling at all */
}

#blue-webcam-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28vw;
    /* Much smaller to match screenshot */
    aspect-ratio: 1 / 1;
    z-index: 400;
    /* Above multiplying images */
}

#blue-webcam-frame-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

#blue-ascii-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* Fill entire wrapper */
    height: 100%;
    /* Fill entire wrapper */
    z-index: 1;
    background-color: transparent;
    /* Transparent to show clear video underneath */
    border-radius: 0.7vw;
}

#ascii-art-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Fixed to viewport height - no scrolling */
    padding: 0;
    overflow: hidden;
    /* No scrolling */
    z-index: 1;
    /* Behind webcam */
}

.ascii-art-item {
    position: absolute;
    opacity: 0;
    transition: opacity 0.8s ease-in;
}

.ascii-art-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

#blue-webcam-hover-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400%;
    /* Increased from 200% */
    height: auto;
    z-index: 10;
    /* Above canvas */
    opacity: 0;
    pointer-events: none;
    /* No transition - instant appearance */
}

#blue-webcam-hover-img.visible {
    opacity: 1;
}

#blue-webcam-wrapper.interactive {
    cursor: pointer;
    pointer-events: auto;
}

#white-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 500;
    /* Above blue screen */
    display: none;
    overflow-y: auto;
}

#white-screen-content {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    /* Crop absolute positioned elements (rose overlay) to content height */
}

#white-screen-image {
    position: relative;
    width: 100%;
    height: 100vh;
}

#white-screen-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#i-left-text-image {
    position: relative;
    width: 100%;
    padding: 2.1vw 0 0 0;
    /* Slightly more spacing for visibility */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    /* Ensure white background */
}

#i-left-text-image img {
    max-width: 80%;
    max-height: 21vw;
    /* Increased from 200px */
    height: auto;
    display: block;
}

#white-screen-typed-text {
    position: relative;
    width: 100%;
    max-width: 42vw;
    margin: 0 auto 2.8vw auto;
    /* Reduced top margin from 40px to 10px */
    padding: 0 1.4vw 1.4vw 1.4vw;
    color: blue;
    font-family: 'Andale Mono', monospace;
    font-size: 1.1vw;
    line-height: 1.6;
    text-align: center;
    /* Centered text */
    z-index: 2;
    /* Ensure text is above the rose overlay if needed, or below? User said overlaying the text. Let's try z-index 1 for text and 2 for rose. */
    position: relative;
    min-height: 28vw;
    /* Pre-allocate height for scrolling */
}

#white-screen-video-icon {
    visibility: hidden;
    /* Occupy space but invisible */
    width: 10.5vw;
    margin: 0 auto 3.5vw auto;
    cursor: pointer;
    z-index: 20;
    position: relative;
}

#white-screen-video-icon video {
    width: 100%;
    height: auto;
    display: block;
}

#final-text-visible-image {
    position: fixed;
    top: 50%;
    right: 10%;
    /* Position on the right side, mirroring the command prompt text on the left */
    transform: translateY(-50%);
    max-width: 42vw;
    width: 40%;
    opacity: 0;
    /* Start hidden */
    z-index: 3001;
    /* Above final webcam container */
    pointer-events: none;
}

#final-text-visible-image img {
    width: 100%;
    height: auto;
    display: block;
}


#end-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 1000;
    display: none;
    overflow: hidden;
    /* Lock scroll */
    /* Center the image */
    display: none;
    /* JS toggles this to flex/block. Wait, JS uses display='block'. */
    /* If JS sets display='block', flex won't apply unless I add !important or change JS. */
    /* Better to use a wrapper or just set margins. */
}

/* JS sets display: block. So I can't rely on flex here unless I change JS. */
/* I'll use absolute positioning to center the image container. */

#end-screen-image {
    position: relative;
    width: 100%;
    height: 100vh;
}

#end-screen-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.valley-tab {
    position: absolute;
    background-color: white;
    color: blue;
    font-family: 'Andale Mono', monospace;
    padding: 1.05vw;
    max-width: 17.5vw;
    font-size: 1vw;
    display: none;
    /* Hidden initially */
    border: 1px solid blue;
    /* Optional: adds definition */
    box-shadow: 0.35vw 0.35vw 0px rgba(0, 0, 255, 0.2);
    /* Optional: slight depth */
    z-index: 1001;
}

#valley-tab-1 {
    top: 35%;
    left: 15%;
}

#valley-tab-2 {
    top: 50%;
    left: 45%;
    transform: translateX(-50%);
    /* Center horizontally relative to left point */
}

#valley-tab-3 {
    top: 65%;
    right: 15%;
    /* Position from right */
}

#end-screen-question-mark {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 2.1vw;
    height: 2.1vw;
    background-color: blue;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    /* More raw monospace */
    font-size: 1.4vw;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1002;
    border: 2px solid blue;
    /* Thicker border */
    /* No hover transition for raw feel */
}

#end-screen-question-mark:hover {
    cursor: pointer;
    /* No opacity change */
}

#end-feel-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    /* Smaller */
    height: auto;
    z-index: 1005;
    display: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.random-tab-image {
    position: absolute;
    max-width: 24.5vw;
    height: auto;
    display: block;
    pointer-events: none;
}

#end-feel-image img {
    width: 100%;
    height: auto;
}

#white-fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    pointer-events: none;
    z-index: 2000;
    transition: opacity 3s ease-in;
    /* Slow fade */
}

@keyframes fluctuate-opacity {
    0% {
        opacity: 0.8;
    }

    25% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.9;
    }
}

.chaos-meme {
    /* Animation duration will be randomized in JS for variety */
    animation-name: fluctuate-opacity;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#final-sequence-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3000;
}

#final-webcam-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3001;
    pointer-events: none;
}

.final-webcam-canvas {
    position: absolute;
    background-color: white;
}

#rose-overlay {
    position: absolute;
    top: 100vh;
    /* Start after the notepad image */
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    /* Overlay on top of text */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#rose-overlay img {
    width: 100%;
    height: auto;
    object-fit: cover;
    min-height: 100vh;
}

#back-arrow {
    position: fixed;
    top: 1.4vw;
    left: 1.4vw;
    font-size: 2.1vw;
    color: blue;
    cursor: pointer;
    z-index: 2000;
    /* Highest priority */
    display: none;
    /* Hidden by default */
    font-weight: bold;
    user-select: none;
    transition: transform 0.2s ease;
}

#back-arrow:hover {
    transform: scale(1.2);
}

/* Final Text Styles */
@font-face {
    font-family: 'Andale Mono';
    src: url('Andale Mono.ttf') format('truetype');
}

#command-prompt-container {
    position: absolute;
    top: 50%;
    left: 25%;
    /* Middle left section */
    transform: translate(-50%, -50%);
    width: 40%;
    /* Adjust width as needed */
    height: auto;
    background-color: transparent;
    border: none;
    box-shadow: none;
    z-index: 3000;
    font-family: 'Andale Mono', monospace;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    /* Let user observe only */
}

.cmd-header {
    display: none;
}

.cmd-body {
    padding: 0;
    color: white;
    font-size: 1.25vw;
    /* Adjust size as needed */
    line-height: 1.5;
    white-space: pre-wrap;
    overflow: hidden;
    /* No scrolling */
}

.cmd-cursor {
    display: inline-block;
    width: 0.7vw;
    height: 1.2em;
    background-color: white;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}