/* Basic Setup */
body {
    background-color: #0c0c0c;
    color: #fff;
    font-family: 'VT323', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* Made monitor larger */
.crt-monitor {
    background: #2a2a2a;
    border: 20px solid #1a1a1a;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 
        0 0 10px rgba(0,0,0,0.5), 
        inset 0 0 20px rgba(0,0,0,0.8);
    width: 95vw;
    max-width: 1100px;
    aspect-ratio: 4 / 3;
}

/* The Screen */
.screen {
    background: #0a0a0a;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
    position: relative;
    overflow: hidden;
    transform: perspective(300px) rotateX(2deg); 
}

/* Scanlines and Flicker Overlays */
.screen::after, .screen::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    pointer-events: none;
    z-index: 2;
}
.screen::after {
    background: linear-gradient(to bottom, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
}
.screen::before {
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    animation: flicker 0.15s infinite;
}

/* Increased font size slightly for larger monitor */
#text-output-container {
    padding: 20px;
    color: #00ff41;
    font-size: 26px;
    line-height: 1.2;
    text-shadow: 0 0 2px #00ff41, 0 0 5px #00ff41, 0 0 10px #00ff41;
    animation: text-flicker 3s linear infinite;
    /* UPDATED: This container is no longer faded out with a transition */
}

#text-output {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

/* --- UPDATED: Style for individually animated characters --- */
#text-output .char {
    display: inline-block; /* Needed for animations to work reliably */
}

/* Scaled cursor to match new font size */
.cursor {
    display: inline-block;
    width: 18px;
    height: 26px;
    background-color: #00ff41;
    box-shadow: 0 0 4px #00ff41, 0 0 8px #00ff41, 0 0 15px #00ff41;
    animation: blink 1.2s step-end infinite;
}

/* Power-Off Effect styles */
#power-off-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 10;
    box-shadow: 0 0 10px 2px #fff, 0 0 20px 5px #fff, 0 0 40px 10px #00ff41;
}

#power-off-effect.active {
    animation: collapse 0.8s ease-in forwards;
}

@keyframes collapse {
    0% { width: 150%; height: 4px; opacity: 1; }
    30% { width: 150%; height: 4px; }
    80% { width: 0; height: 4px; opacity: 1; }
    100% { width: 0; height: 4px; opacity: 0; }
}

/* New styles for the final message */
#sga-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1.5s ease-in;
    z-index: 5;
}

#sga-container img {
    max-width: 80%;
    max-height: 80%;
    filter: 
        brightness(1.5)
        drop-shadow(0 0 3px #00ff41) 
        drop-shadow(0 0 8px #00ff41);
    animation: text-flicker 4s linear infinite;
}

#sga-container.visible {
    opacity: 1;
}


/* Utility class to hide elements */
.hidden { opacity: 0 !important; }


/* Animations */
@keyframes flicker { 0% { opacity: 0.1; } 20% { opacity: 1; } 80% { opacity: 0.2; } 100% { opacity: 0.1; } }
@keyframes blink { from, to { background-color: transparent; box-shadow: none; } 50% { background-color: #00ff41; box-shadow: 0 0 4px #00ff41, 0 0 8px #00ff41, 0 0 15px #00ff41; } }
@keyframes text-flicker { 0%{opacity:.989}5%{opacity:.985}10%{opacity:.99}15%{opacity:.995}20%{opacity:.98}25%{opacity:.99}30%{opacity:.98}35%{opacity:1}40%{opacity:.995}45%{opacity:.985}50%{opacity:.99}55%{opacity:.98}60%{opacity:1}65%{opacity:.99}70%{opacity:.985}75%{opacity:.99}80%{opacity:.995}85%{opacity:.98}90%{opacity:.99}95%{opacity:1}100%{opacity:.99} }

/* --- UPDATED: New animation for character decay --- */
@keyframes flash-and-fade {
    0% {
        color: #00ff41;
        text-shadow: 0 0 2px #00ff41, 0 0 5px #00ff41;
        opacity: 1;
    }
    25% {
        color: #fff;
        text-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 25px #00ff41;
        opacity: 1;
    }
    100% {
        color: #000;
        text-shadow: none;
        opacity: 0;
    }
}


/* Start Overlay Styles */
#start-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    cursor: pointer;
    transition: opacity 0.5s ease;
}
#start-overlay.hidden { opacity: 0; pointer-events: none; }
.start-message { text-align: center; color: #0f0; text-shadow: 0 0 10px #0f0; font-size: 1.5rem; animation: blink 1.5s step-end infinite; }