:root {
    /* Theme Colors */
    --term-yellow: #FFD700; --cursor-yellow: #FFFF55; --glow-yellow: #FFD700; --glow-intensity: 0.55; --term-yellow-rgb: 255, 215, 0; --cursor-yellow-rgb: 255, 255, 85;

    /* Layout & Base */
    --line-height: 1.4;
    --screen-radius: 15px;
    --terminal-width-percent: 70%;
    --gallery-width-percent: 30%;
    --gallery-column-gap: 8px;
    --gallery-image-gap: 8px;
    --gallery-initial-opacity: 0.5;

    /* Gallery Item Styles */
    --monitor-bezel-color: #282828; --monitor-border: #444; --screen-bg: #111;
    --gallery-scanline-color: rgba(255, 255, 255, 0.07); --gallery-scanline-thickness: 1px; --gallery-scanline-gap: 2px;
    --gallery-scanlines: repeating-linear-gradient( to bottom, transparent, transparent var(--gallery-scanline-gap), var(--gallery-scanline-color) var(--gallery-scanline-gap), var(--gallery-scanline-color) calc(var(--gallery-scanline-gap) + var(--gallery-scanline-thickness)) );

    /* Main Screen Scanlines */
    --crt-scanline-color: rgba(255, 255, 255, 0.12);
    --crt-scanline-thickness: 2px;
    --crt-scanline-gap: 3px;

    /* Feather Effect Overlay */
    --feather-color: rgba(0, 0, 0, 0.9);
    --feather-size: 80px;

    /* Padding */
    --content-padding-x: 3em;
    --content-padding-y: 2.5em;
    --terminal-output-bottom-padding: 1em;

    /* Animation & Transition */
    --scroll-duration: 90s;
    --transition-duration: 1.2s;
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --glitch-duration: 0.4s;
    --scanline-speed: 20s;
    
    /* Padding for the full-screen gallery image */
    --lg-padding: 20px;
}

/* Base Layout */
html { height: 100%; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
    height: 100dvh;
    margin: 0;
    background-color: #000;
    color: var(--term-yellow);
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
}

/* Screen - Main container */
#screen { width: 100%; height: 100%; position: relative; background: #050505; overflow: hidden; border-radius: var(--screen-radius); box-shadow: none; }

/* CRT - Holds overlays and content wrapper */
#crt { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: inherit; }

/* Feather Overlay */
#crt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: linear-gradient(to bottom, var(--feather-color) 0%, transparent var(--feather-size)), linear-gradient(to top, var(--feather-color) 0%, transparent var(--feather-size)), linear-gradient(to right, var(--feather-color) 0%, transparent var(--feather-size)), linear-gradient(to left, var(--feather-color) 0%, transparent var(--feather-size)); }

/* Animated Scanline Overlay */
.scanline { position: absolute; inset: 0; background-image: repeating-linear-gradient( to bottom, transparent, transparent var(--crt-scanline-gap), var(--crt-scanline-color) var(--crt-scanline-gap), var(--crt-scanline-color) calc(var(--crt-scanline-gap) + var(--crt-scanline-thickness)) ); background-size: 100% calc(var(--crt-scanline-gap) + var(--crt-scanline-thickness)); z-index: 2; pointer-events: none; border-radius: inherit; animation: verticalScan var(--scanline-speed) linear infinite; }
@keyframes verticalScan { from { background-position: 0 0; } to { background-position: 0 calc(var(--crt-scanline-gap) + var(--crt-scanline-thickness)); } }

/* Positioning context for absolute-positioned children */
#crt-content { display: flex; flex-direction: row; width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden; }

/* Terminal Area (Left) - Uses absolute positioning for transform animations */
.terminal {
    position: absolute; left: 0; top: 0;
    width: var(--terminal-width-percent); height: 100%;
    opacity: 1; min-width: 0; box-sizing: border-box; background: transparent;
    display: flex; flex-direction: column; overflow: hidden;
    padding: var(--content-padding-y) calc(var(--content-padding-x) / 2) var(--content-padding-y) var(--content-padding-x);
    transition: transform var(--transition-duration) var(--transition-timing), opacity calc(var(--transition-duration) * 0.8) var(--transition-timing);
    will-change: transform, opacity;
}

/* Fade effect between Terminal and Gallery (Desktop) */
.terminal::after { content: ''; position: absolute; top: 0; right: 0; width: 4em; height: 100%; background: linear-gradient(to right, rgba(5,5,5,0), rgba(5,5,5,1)); pointer-events: none; z-index: 2; transition: opacity 0.5s ease; }

#output { width: 100%; flex-grow: 1; overflow-y: auto; position: relative; background: transparent; padding-bottom: var(--terminal-output-bottom-padding); box-sizing: border-box; padding-left: 0.5em; }
#output div { white-space: pre-wrap; word-wrap: break-word; min-height: calc(1em * var(--line-height)); line-height: var(--line-height); background: transparent; }
#output div span, #prompt, #visible-input { text-shadow: 0 0 5px var(--glow-yellow), 0 0 10px var(--glow-yellow), 0 0 16px rgba(var(--term-yellow-rgb), var(--glow-intensity)); line-height: inherit; background-color: transparent; }

#input-area {
    display: flex; width: 100%; line-height: var(--line-height); flex-shrink: 0;
    align-items: baseline; position: relative; background: transparent;
    padding-bottom: 0.5em; padding-left: 0.5em;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
#input-area.input-visible {
    opacity: 1;
}

#prompt { white-space: nowrap; padding-right: 8px; background: transparent; }
#input-line { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; border: none; padding: 0; margin: 0; background: transparent; }
#visible-input { white-space: pre; min-height: calc(1em * var(--line-height)); background: transparent; }
.cursor { background-color: var(--cursor-yellow); display: inline-block; width: 0.6em; height: calc(1em * var(--line-height) * 0.9); line-height: calc(1em * var(--line-height) * 0.9); margin-left: 1px; vertical-align: baseline; animation: blink 1s step-end infinite; text-shadow: none; padding: 0; box-shadow: 0 0 6px var(--cursor-yellow), 0 0 10px rgba(var(--cursor-yellow-rgb), 0.6); position: relative; z-index: 4; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.command-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; text-shadow: inherit; cursor: pointer; text-align: left; }
.command-btn:hover { color: var(--cursor-yellow); }

/* State: Gallery Focused - Animate the terminal out */
#screen.gallery-focused .terminal { opacity: 0; transform: translateX(-25%); pointer-events: none; animation: terminalGlitch var(--glitch-duration) linear forwards; }
#screen.gallery-focused .terminal::after { opacity: 0; }
@keyframes terminalGlitch { 0% { clip-path: inset(0 0 0 0); transform: translateX(0) skewX(0); opacity: 1;} 20% { clip-path: inset(10% 20% 70% 5%); transform: translateX(-5px) skewX(-5deg); opacity: 0.8;} 40% { clip-path: inset(80% 5% 5% 10%); transform: translateX(8px) skewX(3deg); opacity: 0.5;} 60% { clip-path: inset(30% 50% 40% 30%); transform: translateX(-3px) skewX(6deg); opacity: 0.9;} 80% { clip-path: inset(60% 10% 20% 45%); transform: translateX(6px) skewX(-4deg); opacity: 0.3;} 100% { clip-path: inset(50% 50% 50% 50%); transform: translateX(0) skewX(0); opacity: 0; } }

/* Gallery Panel (Right) - Uses absolute positioning */
#gallery-panel {
    position: absolute; right: 0; top: 0;
    width: var(--gallery-width-percent); height: 100%;
    opacity: var(--gallery-initial-opacity);
    min-width: 0; box-sizing: border-box;
    display: flex; flex-direction: row; gap: var(--gallery-column-gap);
    padding: 0 0 0 calc(var(--content-padding-x) / 2); overflow: hidden;
    pointer-events: none;
    transition: width var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing), padding var(--transition-duration) var(--transition-timing);
    will-change: width, opacity, padding;
}
#screen.gallery-focused #gallery-panel { width: 100%; opacity: 1; padding: 0; pointer-events: auto; }
.gallery-column { flex: 1; height: 100%; overflow: hidden; position: relative; }
.scroll-wrapper { display: flex; flex-direction: column; }
.gallery-column.scroll-down .scroll-wrapper { animation: scrollDown var(--scroll-duration) linear infinite; }
.gallery-column.scroll-up .scroll-wrapper { animation: scrollUp var(--scroll-duration) linear infinite; }
.scroll-content { display: flex; flex-direction: column; gap: var(--gallery-image-gap); }
.gallery-column a { display: block; width: 100%; background-color: var(--monitor-bezel-color); border: 1px solid var(--monitor-border); border-radius: 3px; padding: 4px; box-sizing: border-box; box-shadow: inset 0 0 3px rgba(0,0,0,0.5); position: relative; overflow: hidden; flex-shrink: 0; }
.gallery-column img { display: block; width: 100%; height: auto; object-fit: cover; background-color: var(--screen-bg); }
.gallery-column a::after { content: ""; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background-image: var(--gallery-scanlines); background-size: 100% calc(var(--gallery-scanline-gap) + var(--gallery-scanline-thickness)); pointer-events: none; z-index: 2; }

@keyframes scrollDown { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes scrollUp { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }

/* Gallery Exit Prompt */
#gallery-back-prompt {
    position: absolute; bottom: 1.5em; left: 50%; transform: translateX(-50%);
    color: var(--term-yellow); background-color: rgba(0, 0, 0, 0.7);
    padding: 0.4em 1em; border-radius: 5px; font-size: 0.8rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); opacity: 0;
    pointer-events: none; z-index: 5;
    transition: opacity 0.5s ease-in-out calc(var(--transition-duration) * 0.6);
    will-change: opacity;
    font-family: inherit;
    border: 1px solid rgba(var(--term-yellow-rgb), 0.2);
}
#screen.gallery-focused #gallery-back-prompt {
    opacity: 1;
    pointer-events: auto;
}
#gallery-back-prompt .mobile-text { display: none; }
#gallery-back-prompt .desktop-text { display: inline; }

/* Default Font Size Scaling (Desktop) */
html { font-size: 1.5em; }

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 800px) {
    html { font-size: 1.2em; }
    :root {
        --content-padding-x: 1.5em;
        --content-padding-y: 1.5em;
        --mobile-gallery-height: 200px;
        --feather-size: 40px;
    }

    .terminal {
        width: 100%; height: calc(100% - var(--mobile-gallery-height));
        padding: var(--content-padding-y) var(--content-padding-x);
        transition: transform var(--transition-duration) var(--transition-timing), opacity calc(var(--transition-duration) * 0.8) var(--transition-timing);
    }
    .terminal::after { top: auto; bottom: 0; left: 0; width: 100%; height: 4em; background: linear-gradient(to top, rgba(5,5,5,1), rgba(5,5,5,0)); }

    #gallery-panel {
        top: auto; bottom: 0; left: 0; right: auto;
        width: 100%; height: var(--mobile-gallery-height);
        padding: 0 var(--content-padding-x);
        transition: height var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing), padding var(--transition-duration) var(--transition-timing);
    }
    #gallery-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3em; background: linear-gradient(to bottom, #050505 0%, rgba(5,5,5,0) 100%); pointer-events: none; z-index: 2; transition: opacity 0.5s ease; }

    #screen.gallery-focused .terminal { opacity: 0; transform: translateY(-25%); }
    #screen.gallery-focused #gallery-panel { width: 100%; height: 100%; padding: 0; }
    #screen.gallery-focused #gallery-panel::before { opacity: 0; }

    #gallery-back-prompt .mobile-text { display: inline; }
    #gallery-back-prompt .desktop-text { display: none; }
}

@media (max-width: 480px) {
    html { font-size: 1.0em; }
}

/* ==========================================================================
   LightGallery Customizations & Final Centering Fix
   ========================================================================== */

.lg-counter,
.lg-sub-html {
    display: none !important;
}

#screen .lg-toolbar {
    display: none !important;
}

#screen.gallery-focused .lg-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

#screen .lg-current {
    height: 100% !important;
}

#screen .lg-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#screen .lg-image {
    max-width: calc(100% - (var(--lg-padding) * 2));
    max-height: calc(100% - (var(--lg-padding) * 2));
    width: auto;
    height: auto;
}

/* --- NEW: "ACCESS DENIED" flash effect --- */
.error-flash {
    animation: flash 150ms step-end 3;
}
@keyframes flash {
    0%, 100% { background-color: transparent; color: var(--term-yellow); }
    50% { background-color: var(--term-yellow); color: #050505; }
}