* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    background: #0c0b0c;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Courier New', Courier, monospace;

}





.crt {

    position: relative;

    width: 1200px;

    max-width: 95vw;

    height: 800px;

    max-height: 90vh;

    background: #0f0e0a;

    border-radius: 60px 60px 40px 40px;

    box-shadow: 

        0 0 0 10px #1e1c1a,

        0 0 0 15px #3a3a33,

        inset 0 0 60px rgba(0, 255, 0, 0.2),

        0 0 80px rgba(0, 255, 0, 0.3);

    overflow: hidden;

    border: 2px solid #2a2a20;

    transform: perspective(1200px) rotateX(2deg) rotateY(0.5deg);

    transition: transform 0.1s ease;

}





.crt::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 40, 0, 0.3) 90%);

    pointer-events: none;

    z-index: 5;

    border-radius: 60px 60px 40px 40px;

}





.crt::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: repeating-linear-gradient(

        0deg,

        rgba(0, 255, 0, 0.03) 0px,

        rgba(0, 0, 0, 0.4) 2px,

        rgba(0, 255, 0, 0.02) 3px,

        rgba(0, 0, 0, 0.3) 4px

    );

    pointer-events: none;

    z-index: 6;

    mix-blend-mode: multiply;

    border-radius: 60px 60px 40px 40px;

}





.screen {

    position: relative;

    width: 100%;

    height: 100%;

    padding: 40px 50px 30px 50px;

    background: #030803;

    color: #2aff96;

    text-shadow: 0 0 6px #00cc66, 0 0 12px #00aa33;

    font-size: 1.2rem;

    line-height: 1.5;

    font-weight: 500;

    letter-spacing: 0.5px;

    overflow-y: auto;

    white-space: pre-wrap;

    word-break: break-word;

    font-family: 'Courier New', Courier, monospace;

    box-shadow: inset 0 0 50px rgba(0, 255, 0, 0.2);

    scroll-behavior: smooth;

    z-index: 2;

    cursor: text;

}





.screen .pixel-grid {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: 

        linear-gradient(rgba(0, 255, 0, 0.02) 1px, transparent 1px),

        linear-gradient(90deg, rgba(0, 255, 0, 0.02) 1px, transparent 1px);

    background-size: 6px 6px;

    pointer-events: none;

    z-index: 3;

}





.cursor {

    display: inline-block;

    width: 12px;

    height: 1.2rem;

    background-color: #2aff96;

    box-shadow: 0 0 10px #00ff80;

    vertical-align: middle;

    margin-left: 4px;

    animation: blink 0.9s step-end infinite;

}



@keyframes blink {

    0%, 100% { opacity: 1; }

    50% { opacity: 0; }

}





.line {

    margin: 0;

    padding: 0;

    font-family: inherit;

    white-space: pre-wrap;

}



.override-warning {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: black;

    z-index: 100;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    font-family: 'Courier New', monospace;

    text-transform: uppercase;

    color: #ff1a1a;

    text-shadow: 0 0 20px #ff0000, 0 0 40px #aa0000;

    background: radial-gradient(circle at 30% 30%, #330000, #000000 80%);

    border: 6px solid #a00;

    box-shadow: inset 0 0 100px #d00, 0 0 80px #f33;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.1s ease;

    text-align: center;

    backdrop-filter: blur(2px);

    border-radius: 60px 60px 40px 40px;

}



.override-warning.active {

    opacity: 1;

    pointer-events: none;

    z-index: 200;

}



.warning-text {

    font-size: 5rem;

    font-weight: 900;

    letter-spacing: 20px;

    animation: pulse-red 1.2s infinite;

    border: 4px solid #f33;

    padding: 40px 80px;

    background: rgba(0,0,0,0.7);

    box-shadow: 0 0 200px red;

}



.warning-sub {

    font-size: 2rem;

    color: #ff8888;

    margin-top: 30px;

    text-shadow: 0 0 30px #f77;

}



@keyframes pulse-red {

    0% { text-shadow: 0 0 30px red; border-color: #f33; }

    50% { text-shadow: 0 0 90px #ff8888, 0 0 150px red; border-color: #ff8888; }

    100% { text-shadow: 0 0 30px red; border-color: #f33; }

}



.screen::-webkit-scrollbar {

    width: 12px;

    background: #021002;

}

.screen::-webkit-scrollbar-thumb {

    background: #1faa4f;

    box-shadow: inset 0 0 10px #0f0;

    border-radius: 20px;

}