/* --- FONTS --- */
@font-face { font-family: 'Press Start 2P'; src: url('fonts/press-start-400.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; src: url('fonts/quicksand-300.woff2') format('woff2'); font-weight: 300; }
@font-face { font-family: 'Quicksand'; src: url('fonts/quicksand-500.woff2') format('woff2'); font-weight: 500; }
@font-face { font-family: 'Share Tech Mono'; src: url('fonts/share-tech-mono-400.woff2') format('woff2'); }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { height: 100vh; overflow: hidden; font-family: 'Quicksand', sans-serif; background-color: #A0E7E5; display: flex; justify-content: center; align-items: center; }

/* --- BACKGROUNDS (UNTARGEABLE) --- */
.sky-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient(to bottom, #ff6b6b 0%, #ff9f43 35%, #feca57 50%, #fffdf0 60%, #0abde3 100%); z-index: -2; }
.pool-reflection { position: absolute; bottom: 0; left: 0; width: 100%; height: 35%; background: linear-gradient(to bottom, #48dbfb, #5f27cd); opacity: 0.9; z-index: -1; border-top: 6px solid #fff; }
.sun { position: absolute; top: 10%; right: 10%; width: 125px; height: 125px; background: linear-gradient(to bottom, #ffffaf, #ffeaa7); border-radius: 50%; box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); z-index: 10; }

/* --- THE SEA MODE (WAVY MIRAGE) --- */
#sea-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, #a29bfe, #74b9ff, #81ecec, #fab1a0, #ff7675); background-size: 400% 400%; z-index: 5; opacity: 0; transition: opacity 2s ease-in-out; pointer-events: none; }
#sea-overlay.active {
    opacity: 1;
    animation: sea-shift 12s infinite alternate ease-in-out, mirage-warp 3s infinite alternate ease-in-out;
    filter: url(#wavy);
}

@keyframes sea-shift {
    0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
    100% { background-position: 100% 50%; filter: hue-rotate(45deg); }
}

@keyframes mirage-warp {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.05) skewX(1deg); }
}

/* --- CRT TERMINAL (THE MONITOR) --- */
.terminal-overlay { position: fixed; bottom: 0; left: 0; width: 100%; height: 40vh; z-index: 100; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); background: #000; }
.terminal-overlay.active { transform: translateY(0%); }

.terminal-window { 
    width: 100%; 
    height: 100%; 
    background: #0d0d0d; 
    color: #33ff00; 
    font-family: 'Share Tech Mono', monospace; 
    display: flex; 
    flex-direction: column; 
    border-radius: 40px; /* CRT Bowl edges */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9), 0 0 20px rgba(51, 255, 0, 0.2); 
    border: 15px solid #1a1a1a; /* Monitor Bezel */
    position: relative; 
    overflow: hidden; 
}

/* Global CRT Filter - Sits over Text AND Sprites */
.terminal-window::after { 
    content: " "; 
    display: block; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    background: 
        radial-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.4) 100%),
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05));
    background-size: 100% 100%, 100% 4px, 4px 100%;
    z-index: 100; 
    pointer-events: none; 
    animation: flicker 0.15s infinite; 
}

@keyframes flicker {
    0% { opacity: 0.97; }
    50% { opacity: 1; }
    100% { opacity: 0.98; }
}

/* --- FIXED ALIGNMENT FOR BOWL GEOMETRY --- */
.terminal-header { 
    padding: 20px 30px 10px 30px; /* Top, Right, Bottom, Left */
    display: flex; 
    justify-content: space-between; /* Pushes [X] to the right */
    align-items: center; 
    background: transparent; /* Let the bowl background show through */
    z-index: 101; /* Ensure it stays above the scanline overlay */
    position: relative;
}

.terminal-title {
    font-family: 'Share Tech Mono', monospace;
    color: #33ff00;
    font-size: 1rem;
    letter-spacing: 2px;
}

.close-btn { 
    background: none; 
    border: none; 
    color: #33ff00; 
    font-family: 'Share Tech Mono', monospace; 
    font-size: 1.1rem; 
    cursor: pointer; 
    padding: 0;
    text-shadow: 0 0 5px #33ff00;
}

.terminal-body { 
    flex-grow: 1; 
    padding: 10px 30px 30px 30px; /* Match the header's left/right padding */
    overflow-y: auto; 
    z-index: 1; 
    display: flex; 
    flex-direction: column; 
    cursor: text; 
}

.line { line-height: 1.6; letter-spacing: 1px; margin-bottom: 4px; text-shadow: 0 0 2px #33ff00; }

.prompt, #cmd-input { font-family: 'Share Tech Mono', monospace !important; font-size: 1.1rem; color: #33ff00; }

.input-line { display: flex; width: 100%; gap: 10px; margin-top: 5px; }

#cmd-input { background: transparent; border: none; flex-grow: 1; outline: none; text-shadow: 0 0 2px #33ff00; }

/* ERROR & EFFECTS */
.error-pulse {
    color: #ff5555 !important;
    text-shadow: 0 0 2px #ff5555;
    animation: heavy-breathe 2.5s infinite ease-in-out;
}
@keyframes heavy-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* LOGO SHIFT */
h1 { font-family: 'Press Start 2P'; color: #fff; font-size: 2rem; text-shadow: 4px 4px 0px #fd79a8; transition: all 1.5s; }
h1.sea-mode { position: fixed; top: 10%; left: 10%; font-size: 1.2rem; }

/* --- GREEN PHOSPHOR PACMAN --- */
#screensaver-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; overflow: hidden; }

.pacman-sprite {
    position: absolute; width: 30px; height: 30px;
    background: #33ff00 !important; /* Terminal Green */
    box-shadow: 0 0 10px #33ff00;
    border-radius: 50%;
    clip-path: polygon(100% 74%, 44% 48%, 100% 21%, 100% 0, 0 0, 0 100%, 100% 100%);
    animation: chomp 0.2s infinite;
    transition: left 4s linear;
}

.ghost-sprite {
    position: absolute; width: 30px; height: 30px;
    background: #114411 !important; /* Dim Green */
    box-shadow: 0 0 8px #33ff00;
    border-radius: 15px 15px 0 0;
    transition: left 4s linear;
}

/* Monochrome Eyes */
.ghost-sprite::before, .ghost-sprite::after { content: ''; position: absolute; top: 8px; width: 6px; height: 8px; background: #33ff00 !important; border-radius: 50%; }
.ghost-sprite::before { left: 5px; } .ghost-sprite::after { left: 18px; }

@keyframes chomp {
    0%, 100% { clip-path: polygon(100% 74%, 44% 48%, 100% 21%, 100% 0, 0 0, 0 100%, 100% 100%); }
    50% { clip-path: polygon(100% 60%, 44% 48%, 100% 40%, 100% 0, 0 0, 0 100%, 100% 100%); }
}

/* Lucky Video Overlay - Default State (Centered) */
#lucky-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    display: none;
    /* Smooth movement animation */
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* DOCKED STATE: When Terminal is Open */
#lucky-container.docked-top {
    top: 5vh !important; /* Sit 5% from the top */
    transform: translate(-50%, 0) !important; /* Remove vertical centering */
}

/* IMPORTANT: When docked, force the video to shrink so it doesn't hit the terminal */
#lucky-container.docked-top #lucky-video {
    max-height: 45vh !important; /* Restrict height to 45% of screen */
    width: auto; /* Keep aspect ratio */
}

/* Standard Active State */
#lucky-container.active { display: block; }

/* Video Styling */
.video-wrapper { 
    position: relative; 
    box-shadow: 0 0 30px rgba(0,0,0,0.8); 
}

#lucky-video { 
    display: block; 
    max-width: 90vw; 
    max-height: 80vh; /* Default large size when terminal is closed */
    border: 1px solid #fff; 
    /* Smooth resizing animation */
    transition: max-height 0.6s ease;
}

#close-lucky { 
    position: absolute; 
    top: -40px; 
    right: 0; 
    background: none; 
    border: none; 
    color: #fff; 
    font-family: 'Courier New', monospace; 
    font-size: 24px; 
    cursor: pointer; 
    text-shadow: 0 0 5px #fff; 
}
#close-lucky:hover { color: #ff0055; }

/* Helper utility for hiding things */
.hidden {
    display: none !important;
}

/* Lucky Star Mode (Konata Colors) */
.sky-gradient.lucky-mode {
    /* Pastel Blue to Pastel Pink */
    background: linear-gradient(to bottom, #89cff0 0%, #f4c2c2 100%);
}

/* --- RETRO PILL BUTTON --- */
.bottom-nav { position: absolute; bottom: 40px; left: 0; width: 100%; display: flex; justify-content: center; z-index: 20; }
.nav-btn {
    text-decoration: none; font-family: 'Press Start 2P', cursive; font-size: 0.85rem; color: #fff; background: rgba(255, 255, 255, 0.25); padding: 14px 24px 10px 24px; border-radius: 30px; border: 3px solid #fff; display: flex; align-items: center; gap: 12px; transition: all 0.15s ease; backdrop-filter: blur(4px);
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.5); color: #0abde3; transform: translateY(2px); }
.shimmer { animation: shimmer-haze 3s infinite ease-in-out; }
@keyframes shimmer-haze { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }