body {
    background-color: #1a1a1a;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Inconsolata', monospace;
}

#retro-container {
    position: relative;
    width: 90vw;
    max-width: 1200px;
    aspect-ratio: 4/3;
    /* Approximate aspect ratio of the image or monitor */
}

#monitor {
    width: 100%;
    height: 100%;
    background-image: url('../images/black_screen.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* Screen positioning - This needs calibration based on the generated image */
#screen-bezel {
    position: absolute;
    /* Educated guess based on typical CRT monitor renders handled by AI */
    top: 19%;
    left: 17%;
    width: 64%;
    height: 48%;
    background-color: #000;
    border-radius: 2% / 5%;
    /* Curved screen corners */
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    transform: perspective(500px) rotateX(2deg);
    /* Slight tilt if needed */
}

#terminal-screen {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: #33ff33;
    /* Classic Phosphor Green */
    font-size: 1.1rem;
    line-height: 1.3;
    overflow-y: hidden;
    /* Terminal usually scrolls, but let's hide scrollbar */
    text-shadow: 0 0 1px rgba(51, 255, 51, 0.8);
    /* Reduced glow for sharpness */
    font-weight: 500;
}

/* Scrollbar hiding logic */
#terminal-screen::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

#boot-sequence p,
#login-sequence p,
#active-terminal p {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

#input-line {
    display: flex;
    flex-wrap: wrap;
}

#cursor {
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes turn-on {
    0% {
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        filter: brightness(30);
        opacity: 1;
    }

    3.5% {
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }

    3.6% {
        transform: scale(1, 0.8) translate3d(0, -100%, 0);
        opacity: 1;
    }

    9% {
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        opacity: 0;
    }

    11% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        opacity: 1;
        filter: contrast(0) brightness(0);
    }

    100% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        opacity: 1;
        filter: contrast(1) brightness(1.2) saturate(1.1);
    }
}

.turn-on {
    animation: turn-on 4s linear;
    animation-fill-mode: forwards;
}