/* --- 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;
    /* Oscillation: shifting background and shifting warp */
    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); }
}

@keyframes ripple-filter {
    0%, 100% { filter: url(#wavy) hue-rotate(0deg); }
    50% { filter: url(#wavy) hue-rotate(20deg); transform: scale(1.02); }
}

/* --- TERMINAL (RESTORED CRT) --- */
.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%); }

/* Ensure clicking the body focuses the input */
.terminal-body {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    cursor: text; /* Makes it clear you can click here */
}

/* Reduced glow for better readability */
.line {
    line-height: 1.6;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-shadow: 0 0 2px #33ff00; /* Subtle glow fixed */
}

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

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



.terminal-window { width: 100%; height: 100%; background: #0d0d0d; color: #33ff00; font-family: 'Share Tech Mono', monospace; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; box-shadow: inset 0 0 100px rgba(0,0,0,0.9); position: relative; overflow: hidden; border-top: 2px solid #335533; }
.terminal-window::before { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 3px, 3px 100%; z-index: 2; pointer-events: none; animation: flicker 0.1s infinite; }

.terminal-header { padding: 10px 20px; border-bottom: 1px solid #33ff00; display: flex; justify-content: space-between; align-items: center; background: #111; z-index: 3; }
.terminal-body { flex-grow: 1; padding: 20px; overflow-y: auto; z-index: 1; display: flex; flex-direction: column; }
.line { line-height: 1.6; letter-spacing: 1px; margin-bottom: 4px; text-shadow: 0 0 5px #33ff00; }

/* ERROR & EFFECTS */

/* .error-pulse { color: #ff5555 !important; animation: tremble 0.1s infinite; font-weight: bold; }
@keyframes tremble { 0% { transform: translate(1px, 1px); } 50% { transform: translate(-1px, -1px); } 100% { transform: translate(1px, 1px); } } */

/* Red Error Pulse */
.error-pulse {
    color: #ff5555 !important;
    text-shadow: 0 0 2px #ff5555;
    animation: heavy-breathe 2.5s infinite ease-in-out;
}
/* FIXED INPUT - No more Windows XP look */
.input-line { display: flex; width: 100%; gap: 10px; margin-top: 5px; }
#cmd-input { background: transparent; border: none; color: #ccffcc; font-family: 'Share Tech Mono', monospace; font-size: 1.1rem; flex-grow: 1; outline: none; }

/* 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; }

/* --- PACMAN SCREENSAVER --- */
#screensaver-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10; /* Above text, below CRT flicker layer */
    overflow: hidden;
}

.pacman-sprite {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #FFD700;
    border-radius: 50%;
    /* Chomp shape */
    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; /* Essential for movement */
}

.ghost-sprite {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #FF0000;
    border-radius: 50% 50% 0 0;
    transition: left 4s linear;
}

@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%); }
}

/* --- RESTORED 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; /* Removes that blue underline */
    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); }
}